Skip to content

Commit

Permalink
completed whole flow
Browse files Browse the repository at this point in the history
  • Loading branch information
YohanTz committed Oct 18, 2023
1 parent b52dd2b commit 9c97cd9
Show file tree
Hide file tree
Showing 10 changed files with 74 additions and 39 deletions.
29 changes: 27 additions & 2 deletions apps/web/src/app/(routes)/bridge/_components/TokenList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import NftCard from "../../../_components/NftCard/NftCard";
import useNftSelection from "../_hooks/useNftSelection";

interface CollectionGridProps {
selectCollection: (collectionName: string) => void;
selectCollection: (collectionName: null | string) => void;
}

function CollectionGrid({ selectCollection }: CollectionGridProps) {
Expand Down Expand Up @@ -59,7 +59,7 @@ function CollectionList({ selectCollection }: CollectionGridProps) {
</Typography>
{nfts === undefined ? null : (
<Typography
className="rounded-full bg-primary-source px-2 py-1 text-white"
className="rounded-full bg-primary-source px-2.5 py-1 text-white"
variant="button_text_s"
>
{Object.keys(nfts?.byCollection)?.length ?? 0}
Expand All @@ -81,6 +81,7 @@ function CollectionList({ selectCollection }: CollectionGridProps) {

interface CollectionTokenListProps {
allCollectionSelected: boolean;
selectCollection: (collectionName: null | string) => void;
selectedCollection: Array<Nft>;
selectedCollectionName: null | string;
toggleNftSelection: (nftId: string) => void;
Expand All @@ -89,6 +90,7 @@ interface CollectionTokenListProps {

function CollectionTokenList({
allCollectionSelected,
selectCollection,
selectedCollection,
selectedCollectionName,
toggleNftSelection,
Expand All @@ -100,6 +102,28 @@ function CollectionTokenList({

return (
<div>
{/* TODO @YohanTz: Refacto to be a variant in the Button component */}
<button
className="mb-10 flex h-12 items-center gap-1.5 rounded-full border-2 border-asteroid-grey-600 px-6 py-3 text-asteroid-grey-600 dark:border-space-blue-300 dark:text-space-blue-300"
onClick={() => selectCollection(null)}
>
{/* TODO @YohanTz: Export svg to icons file */}
<svg
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.25 12L12.7297 12C11.9013 12 11.2297 12.6716 11.2297 13.5L11.2297 16.4369C11.2297 17.0662 10.5013 17.4157 10.0104 17.0219L4.47931 12.585C4.10504 12.2848 4.10504 11.7152 4.47931 11.415L10.0104 6.97808C10.5013 6.58428 11.2297 6.93377 11.2297 7.56311L11.2297 9.375"
stroke="currentColor"
stroke-linecap="round"
stroke-width="1.5"
/>
</svg>
<Typography variant="button_text_s">Back</Typography>
</button>
<div className="mb-10 flex w-full flex-wrap justify-between gap-3.5">
<div className="flex max-w-full items-center gap-3.5">
<Typography ellipsable variant="heading_light_s">
Expand Down Expand Up @@ -160,6 +184,7 @@ export default function TokenList() {
) : (
<CollectionTokenList
allCollectionSelected={allCollectionSelected}
selectCollection={selectCollection}
selectedCollection={selectedCollection}
selectedCollectionName={selectedCollectionName}
toggleNftSelection={toggleNftSelection}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(routes)/bridge/_hooks/useNftSelection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export default function useNftSelection() {
});
}

function selectCollection(collectionName: string) {
function selectCollection(collectionName: null | string) {
setSelectedCollectionName(collectionName);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,14 @@ export default function useTransferStarknetNfts() {
selectedNfts[0] !== undefined
) {
depositCallData = new CallData(bridgeContract?.abi);
console.table({
collection_l2: selectedNfts[0]?.collectionContractAddress ?? "",
owner_l1: ethereumAddress,
salt: Date.now(),
token_ids: selectedNfts.map((selectedNft) => selectedNft?.tokenId),
use_deposit_burn_auto: false,
use_withdraw_auto: true,
});
depositCallData = depositCallData.compile("deposit_tokens", {
collection_l2: selectedNfts[0]?.collectionContractAddress ?? "",
owner_l1: ethereumAddress,
Expand Down
3 changes: 2 additions & 1 deletion apps/web/src/app/(routes)/portfolio/_components/NftsTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Typography } from "design-system";
import { useAccount as useEthereumAccount } from "wagmi";

import NftCard from "~/app/_components/NftCard/NftCard";
import NftsLoadingState from "~/app/_components/NftsLoadingState";
import { api } from "~/utils/api";

interface NftTabsTriggerProps {
Expand Down Expand Up @@ -58,7 +59,7 @@ export default function NftsTabs() {
);

if (l1Nfts === undefined || l2Nfts === undefined) {
return null;
return <NftsLoadingState className="mt-18" />;
}

return (
Expand Down
20 changes: 13 additions & 7 deletions apps/web/src/app/_components/ConnectModal.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import * as RUIDialog from "@radix-ui/react-dialog";
import { useBalance as useStarknetBalance } from "@starknet-react/core";
import {
useAccount as useStarknetAccount,
useBalance as useStarknetBalance,
} from "@starknet-react/core";
import { Dialog, Typography } from "design-system";
import Image from "next/image";
import { useState } from "react";
import { useEffect, useState } from "react";
import {
useAccount as useEthereumAccount,
useBalance as useEthereumBalance,
Expand Down Expand Up @@ -184,11 +187,14 @@ export default function ConnectModal({
},
});

// useStarknetAccount({
// onConnect() {
// onWalletConnect();
// },
// });
// TODO: Use onConnect like in the ethereum version
const { address } = useStarknetAccount();

useEffect(() => {
if (address !== undefined) {
onWalletConnect();
}
}, [address]);

return (
<Dialog isOpen={isOpen} onOpenChange={onOpenChange}>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/_components/NftCard/NftCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function NftCard({
title,
}: NftCardProps) {
return (
<div className="relative w-full">
<div className={`${onClick !== undefined ? "group" : ""} relative w-full`}>
{cardType === "collection" && (
<NftCardStackBackground isSelected={isSelected} />
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ export default function NftCardStackBackground({
return (
<>
<div
className={`absolute inset-0 z-[-1] -translate-x-[5px] translate-y-[5px] rounded-2xl bg-white dark:bg-dark-blue-950 ${
className={`absolute inset-0 z-[-1] -translate-x-[5px] translate-y-[5px] rounded-2xl border-2 bg-white transition-[outline_border] group-hover:border-primary-source dark:bg-dark-blue-950 ${
isSelected
? "border-2 border-primary-source"
: "border border-neutral-200 dark:border-dark-blue-600"
}`}
/>
<div
className={`absolute inset-0 z-[-2] -translate-x-[9px] translate-y-[9px] rounded-2xl bg-white dark:bg-dark-blue-950 ${
className={`absolute inset-0 z-[-2] -translate-x-[9px] translate-y-[9px] rounded-2xl border-2 bg-white transition-[outline_border] group-hover:border-primary-source dark:bg-dark-blue-950 ${
isSelected
? "border-2 border-primary-source"
: "border border-neutral-200 dark:border-dark-blue-600"
Expand Down
18 changes: 8 additions & 10 deletions apps/web/src/app/_components/NftsEmptyState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,14 @@ export default function NftsEmptyState({
<div className={`grid grid-cols-2 gap-5 sm:grid-cols-5 ${className}`}>
{[1, 2, 3, 4, 5].map((emptyCardNumber) => {
return (
<>
<Image
alt={`empty card ${emptyCardNumber}`}
className="hidden h-auto w-full dark:block dark:last:hidden sm:dark:last:block"
height={208}
key={`dark-${emptyCardNumber}`}
src={`/medias/dark/empty_card_${emptyCardNumber}.png`}
width={182}
/>
</>
<Image
alt={`empty card ${emptyCardNumber}`}
className="hidden h-auto w-full dark:block dark:last:hidden sm:dark:last:block"
height={208}
key={`dark-${emptyCardNumber}`}
src={`/medias/dark/empty_card_${emptyCardNumber}.png`}
width={182}
/>
);
})}
{[1, 2, 3, 4, 5].map((emptyCardNumber) => {
Expand Down
18 changes: 8 additions & 10 deletions apps/web/src/app/_components/NftsLoadingState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,14 @@ export default function NftsLoadingState({
<div className={`grid grid-cols-2 gap-5 sm:grid-cols-5 ${className}`}>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((lodingCardNumber) => {
return (
<>
<Image
alt={`loadingcard ${lodingCardNumber}`}
className="hidden h-auto w-full dark:block dark:last:hidden sm:dark:last:block"
height={208}
key={`dark-${lodingCardNumber}`}
src={`/medias/dark/loading_card.png`}
width={182}
/>
</>
<Image
alt={`loadingcard ${lodingCardNumber}`}
className="hidden h-auto w-full dark:block dark:last:hidden sm:dark:last:block"
height={208}
key={`dark-${lodingCardNumber}`}
src={`/medias/dark/loading_card.png`}
width={182}
/>
);
})}
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((loadingCardNumber) => {
Expand Down
9 changes: 4 additions & 5 deletions apps/web/src/server/api/routers/nfts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,24 +87,23 @@ export const nftsRouter = createTRPCRouter({
);

if (ownedNftsResponse.status !== 200) {
console.log(ownedNftsResponse.status);
return { byCollection: {}, raw: [] };
}

const ownedNfts = (await ownedNftsResponse.json()) as {
result: Array<{
token_address: string;
contract_address: string;
token_id: string;
}>;
};

const rawNfts = ownedNfts.result.map((ownedNft) => {
return {
collectionContractAddress: ownedNft.token_address,
collectionContractAddress: ownedNft.contract_address,
collectionName: "No metadata",
id: `${ownedNft.token_address}-${ownedNft.token_id}`,
id: `${ownedNft.contract_address}-${ownedNft.token_id}`,
image: undefined,
title: "NO TITLE",
title: `#${ownedNft.token_id}`,
tokenId: ownedNft.token_id,
};
});
Expand Down

0 comments on commit 9c97cd9

Please sign in to comment.