From 9c97cd947dd2360e7c3ed9bff6a536e995c62a2a Mon Sep 17 00:00:00 2001 From: Yohan Tancrez Date: Wed, 18 Oct 2023 05:49:41 +0200 Subject: [PATCH] completed whole flow --- .../(routes)/bridge/_components/TokenList.tsx | 29 +++++++++++++++++-- .../(routes)/bridge/_hooks/useNftSelection.ts | 2 +- .../bridge/_hooks/useTransferStarknetNfts.ts | 8 +++++ .../portfolio/_components/NftsTabs.tsx | 3 +- apps/web/src/app/_components/ConnectModal.tsx | 20 ++++++++----- .../src/app/_components/NftCard/NftCard.tsx | 2 +- .../NftCard/NftCardStackBackground.tsx | 4 +-- .../src/app/_components/NftsEmptyState.tsx | 18 +++++------- .../src/app/_components/NftsLoadingState.tsx | 18 +++++------- apps/web/src/server/api/routers/nfts.ts | 9 +++--- 10 files changed, 74 insertions(+), 39 deletions(-) diff --git a/apps/web/src/app/(routes)/bridge/_components/TokenList.tsx b/apps/web/src/app/(routes)/bridge/_components/TokenList.tsx index fa7c1b09..07f4c025 100644 --- a/apps/web/src/app/(routes)/bridge/_components/TokenList.tsx +++ b/apps/web/src/app/(routes)/bridge/_components/TokenList.tsx @@ -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) { @@ -59,7 +59,7 @@ function CollectionList({ selectCollection }: CollectionGridProps) { {nfts === undefined ? null : ( {Object.keys(nfts?.byCollection)?.length ?? 0} @@ -81,6 +81,7 @@ function CollectionList({ selectCollection }: CollectionGridProps) { interface CollectionTokenListProps { allCollectionSelected: boolean; + selectCollection: (collectionName: null | string) => void; selectedCollection: Array; selectedCollectionName: null | string; toggleNftSelection: (nftId: string) => void; @@ -89,6 +90,7 @@ interface CollectionTokenListProps { function CollectionTokenList({ allCollectionSelected, + selectCollection, selectedCollection, selectedCollectionName, toggleNftSelection, @@ -100,6 +102,28 @@ function CollectionTokenList({ return (
+ {/* TODO @YohanTz: Refacto to be a variant in the Button component */} +
@@ -160,6 +184,7 @@ export default function TokenList() { ) : ( selectedNft?.tokenId), + use_deposit_burn_auto: false, + use_withdraw_auto: true, + }); depositCallData = depositCallData.compile("deposit_tokens", { collection_l2: selectedNfts[0]?.collectionContractAddress ?? "", owner_l1: ethereumAddress, diff --git a/apps/web/src/app/(routes)/portfolio/_components/NftsTabs.tsx b/apps/web/src/app/(routes)/portfolio/_components/NftsTabs.tsx index 7227ed86..57cb3391 100644 --- a/apps/web/src/app/(routes)/portfolio/_components/NftsTabs.tsx +++ b/apps/web/src/app/(routes)/portfolio/_components/NftsTabs.tsx @@ -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 { @@ -58,7 +59,7 @@ export default function NftsTabs() { ); if (l1Nfts === undefined || l2Nfts === undefined) { - return null; + return ; } return ( diff --git a/apps/web/src/app/_components/ConnectModal.tsx b/apps/web/src/app/_components/ConnectModal.tsx index 98d8b246..de69232e 100644 --- a/apps/web/src/app/_components/ConnectModal.tsx +++ b/apps/web/src/app/_components/ConnectModal.tsx @@ -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, @@ -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 ( diff --git a/apps/web/src/app/_components/NftCard/NftCard.tsx b/apps/web/src/app/_components/NftCard/NftCard.tsx index 4db087bc..4d9e3dd9 100644 --- a/apps/web/src/app/_components/NftCard/NftCard.tsx +++ b/apps/web/src/app/_components/NftCard/NftCard.tsx @@ -29,7 +29,7 @@ export default function NftCard({ title, }: NftCardProps) { return ( -
+
{cardType === "collection" && ( )} diff --git a/apps/web/src/app/_components/NftCard/NftCardStackBackground.tsx b/apps/web/src/app/_components/NftCard/NftCardStackBackground.tsx index c5b85da0..d5104280 100644 --- a/apps/web/src/app/_components/NftCard/NftCardStackBackground.tsx +++ b/apps/web/src/app/_components/NftCard/NftCardStackBackground.tsx @@ -8,14 +8,14 @@ export default function NftCardStackBackground({ return ( <>
{[1, 2, 3, 4, 5].map((emptyCardNumber) => { return ( - <> - {`empty - + {`empty ); })} {[1, 2, 3, 4, 5].map((emptyCardNumber) => { diff --git a/apps/web/src/app/_components/NftsLoadingState.tsx b/apps/web/src/app/_components/NftsLoadingState.tsx index d21626f7..f22e4a75 100644 --- a/apps/web/src/app/_components/NftsLoadingState.tsx +++ b/apps/web/src/app/_components/NftsLoadingState.tsx @@ -11,16 +11,14 @@ export default function NftsLoadingState({
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((lodingCardNumber) => { return ( - <> - {`loadingcard - + {`loadingcard ); })} {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((loadingCardNumber) => { diff --git a/apps/web/src/server/api/routers/nfts.ts b/apps/web/src/server/api/routers/nfts.ts index 350a323e..740625a7 100644 --- a/apps/web/src/server/api/routers/nfts.ts +++ b/apps/web/src/server/api/routers/nfts.ts @@ -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, }; });