fix: mainnet fixes (#176)

* fixed images * used public provider instead of our juno node for now * fetched whitelisted collections from bridge l1 contract * fix medias --------- Co-authored-by: Yohan Tancrez <[email protected]>
ArkProjectNFTs · Apr 4, 2024 · ddb736a · ddb736a
1 parent 7d1d596
commit ddb736a
Show file tree

Hide file tree

Showing 18 changed files with 210 additions and 198 deletions.
diff --git a/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx b/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx
@@ -159,9 +159,9 @@ export default function TokenList({ nftContractAddress }: TokenListProps) {
                 cardType="nft"
                 chain={sourceChain}
                 disabled={isAllSelected && !isSelected}
-                image={ownedNft.image}
                 isSelected={isSelected}
                 key={ownedNft.tokenId}
+                media={ownedNft.media}
                 title={ownedNft.name}
               />
             );

diff --git a/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx b/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx
@@ -62,8 +62,8 @@ export default function CollectionGrid({
                 cardType="collection"
                 chain={sourceChain}
                 disabled={!nftCollection.isBridgeable}
-                image={nftCollection.image}
                 isBridgeable={nftCollection.isBridgeable}
+                media={nftCollection.media}
                 numberOfNfts={nftCollection.totalBalance}
                 onClick={() => {}}
                 title={nftCollection.name}

diff --git a/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx b/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx
@@ -50,32 +50,13 @@ export default function TransferNftsList() {
         return (
           <div className="flex justify-between" key={selectedNft.tokenId}>
             <div className="flex items-center gap-4">
-              {selectedNft?.image ? (
-                <Media
-                  alt={selectedNft.tokenName}
-                  className="rounded"
-                  height={52}
-                  src={selectedNft.image}
-                  width={52}
-                />
-              ) : (
-                <>
-                  <Media
-                    alt="empty Nft image"
-                    className="hidden rounded dark:block"
-                    height={52}
-                    src={`/medias/dark/empty_nft.png`}
-                    width={52}
-                  />
-                  <Media
-                    alt="empty Nft image"
-                    className="rounded dark:hidden"
-                    height={52}
-                    src={`/medias/empty_nft.png`}
-                    width={52}
-                  />
-                </>
-              )}
+              <Media
+                alt={selectedNft.tokenName}
+                className="rounded"
+                height={52}
+                media={selectedNft.media}
+                width={52}
+              />
               <div className="flex flex-col">
                 <Typography ellipsable variant="body_text_14">
                   {selectedNft.collectionName}

diff --git a/apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts b/apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts
@@ -140,7 +140,7 @@ export default function useTransferStarknetNfts() {
         setIsSigning(false);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
       setIsSigning(false);
     }
   }

diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx
@@ -86,32 +86,13 @@ export default function NftTransferItem({
         )}
       >
         <div className="flex items-center gap-4">
-          {collectionImage ? (
-            <Media
-              alt="nft"
-              className="rounded-lg"
-              height={62}
-              src={collectionImage}
-              width={62}
-            />
-          ) : (
-            <>
-              <Image
-                alt="empty Nft image"
-                className="hidden aspect-square rounded-lg object-cover dark:block"
-                height={62}
-                src={`/medias/dark/empty_nft.png`}
-                width={62}
-              />
-              <Image
-                alt="empty Nft image"
-                className="aspect-square rounded-lg object-cover dark:hidden"
-                height={62}
-                src={`/medias/empty_nft.png`}
-                width={62}
-              />
-            </>
-          )}
+          <Media
+            alt="nft"
+            className="rounded-lg"
+            height={62}
+            media={{ format: "image", src: collectionImage }}
+            width={62}
+          />
           <div className="text-left">
             <Typography component="p" variant="body_text_bold_14">
               {collectionName} Collection

diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItemContent.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItemContent.tsx
@@ -97,32 +97,13 @@ export default function NftTransferItemContent({
               <div key={nft.tokenName}>
                 <div className="grid grid-cols-[1fr_1fr_1fr_1fr_2.25rem] place-items-start items-center">
                   <div className="flex items-center gap-4">
-                    {nft.image !== undefined ? (
-                      <Media
-                        alt="nft"
-                        className="flex-shrink-0 rounded-md"
-                        height={52}
-                        src={nft.image}
-                        width={52}
-                      />
-                    ) : (
-                      <>
-                        <Media
-                          alt="empty Nft image"
-                          className="hidden aspect-square rounded-lg object-cover dark:block"
-                          height={52}
-                          src={`/medias/dark/empty_nft.png`}
-                          width={52}
-                        />
-                        <Media
-                          alt="empty Nft image"
-                          className="aspect-square rounded-lg object-cover dark:hidden"
-                          height={52}
-                          src={`/medias/empty_nft.png`}
-                          width={52}
-                        />
-                      </>
-                    )}
+                    <Media
+                      alt="nft"
+                      className="flex-shrink-0 rounded-md"
+                      height={52}
+                      media={nft.media}
+                      width={52}
+                    />
                     <div className="text-left">
                       <Typography component="p" variant="body_text_14">
                         {nft.collectionName}

diff --git a/apps/web/src/app/(routes)/portfolio/_components/NftTabsContent.tsx b/apps/web/src/app/(routes)/portfolio/_components/NftTabsContent.tsx
@@ -62,9 +62,9 @@ function AllNftsTabsContent() {
               <NftCard
                 cardType="nft"
                 chain="Ethereum"
-                image={nft.image}
                 isSelected={false}
                 key={`${nft.contractAddress}-${nft.tokenId}`}
+                media={nft.media}
                 title={nft.name}
               />
             );
@@ -78,9 +78,9 @@ function AllNftsTabsContent() {
                 <NftCard
                   cardType="nft"
                   chain="Starknet"
-                  image={nft.image}
                   isSelected={false}
                   key={`${nft.contractAddress}-${nft.tokenId}`}
+                  media={nft.media}
                   title={nft.name}
                 />
               );
@@ -147,9 +147,9 @@ function CollectionsTabsContent() {
               <NftCard
                 cardType="collection"
                 chain="Ethereum"
-                image={collection.image}
                 isSelected={false}
                 key={collection.contractAddress}
+                media={collection.media}
                 numberOfNfts={collection.totalBalance}
                 title={collection.name}
               />
@@ -163,9 +163,9 @@ function CollectionsTabsContent() {
                 <NftCard
                   cardType="collection"
                   chain="Starknet"
-                  image={collection.image}
                   isSelected={false}
                   key={collection.contractAddress}
+                  media={collection.media}
                   numberOfNfts={collection.totalBalance}
                   title={collection.name}
                 />
@@ -222,9 +222,9 @@ function EthereumNTabsContent() {
               <NftCard
                 cardType="nft"
                 chain="Ethereum"
-                image={nft.image}
                 isSelected={false}
                 key={`${nft.contractAddress}-${nft.tokenId}`}
+                media={nft.media}
                 title={nft.name}
               />
             );
@@ -282,9 +282,9 @@ function StarknetTabsContent() {
             <NftCard
               cardType="nft"
               chain="Starknet"
-              image={nft.image}
               isSelected={false}
               key={`${nft.contractAddress}-${nft.tokenId}`}
+              media={nft.media}
               title={nft.name}
             />
           );

diff --git a/apps/web/src/app/(routes)/portfolio/page.tsx b/apps/web/src/app/(routes)/portfolio/page.tsx
@@ -15,9 +15,9 @@ export default function Page() {
 
           <NftsTabs />
 
-          <BridgingQuestBanner className="mt-16" />
+          <BridgingQuestBanner className="my-16" />
 
-          <NftTransferList className="mt-16" variant="lounge" />
+          <NftTransferList variant="lounge" />
         </MainPageContainer>
       </div>
       <Footer />

diff --git a/apps/web/src/app/(routes)/providers.tsx b/apps/web/src/app/(routes)/providers.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import {
-  type Chain,
+  // type Chain,
   // goerli as starknetGoerli,
   mainnet as starknetMainnet,
 } from "@starknet-react/chains";
 import {
   StarknetConfig,
-  jsonRpcProvider,
+  // jsonRpcProvider,
+  publicProvider,
   // publicProvider,
 } from "@starknet-react/core";
 import { ThemeProvider } from "next-themes";
@@ -32,14 +33,14 @@ const wagmiConfig = createConfig({
   },
 });
 
-function starknetRpc(chain: Chain) {
-  if (chain.network === "goerli")
-    return { nodeUrl: `https://juno.testnet.arkproject.dev/` };
+// function starknetRpc(chain: Chain) {
+//   if (chain.network === "goerli")
+//     return { nodeUrl: `https://juno.testnet.arkproject.dev/` };
 
-  return { nodeUrl: `https://juno.mainnet.arkproject.dev/` };
-}
+//   return { nodeUrl: `https://juno.mainnet.arkproject.dev/` };
+// }
 
-// const starknetProvider = publicProvider();
+const starknetProvider = publicProvider();
 
 interface ProvidersProps {
   children: React.ReactNode;
@@ -52,8 +53,8 @@ export default function Providers({ children }: ProvidersProps) {
       // chains={[starknetGoerli]}
       chains={[starknetMainnet]}
       connectors={starknetConnectors}
-      provider={jsonRpcProvider({ rpc: starknetRpc })}
-      // provider={starknetProvider}
+      // provider={jsonRpcProvider({ rpc: starknetRpc })}
+      provider={starknetProvider}
     >
       <WagmiProvider config={wagmiConfig}>
         <WalletModalsProvider>

diff --git a/apps/web/src/app/_abis/bridge_l1_abi.json b/apps/web/src/app/_abis/bridge_l1_abi.json
@@ -0,0 +1,34 @@
+[
+  {
+    "type": "function",
+    "name": "getWhiteListedCollections",
+    "inputs": [],
+    "outputs": [
+      {
+        "name": "",
+        "type": "address[]",
+        "internalType": "address[]"
+      }
+    ],
+    "stateMutability": "view"
+  },
+  {
+    "type": "function",
+    "name": "isWhiteListed",
+    "inputs": [
+      {
+        "name": "collection",
+        "type": "address",
+        "internalType": "address"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool",
+        "internalType": "bool"
+      }
+    ],
+    "stateMutability": "view"
+  }
+]
diff --git a/apps/web/src/app/_components/Media.tsx b/apps/web/src/app/_components/Media.tsx
@@ -1,23 +1,39 @@
 import Image from "next/image";
+import { useTheme } from "next-themes";
+
+import { type NftMedia } from "~/server/api/types";
+/* eslint-disable @next/next/no-img-element */
 
 interface MediaProps {
   alt: string;
   className?: string;
   height: number;
-  src: string;
+  media: NftMedia;
   width: number;
 }
 
 export default function Media({
   alt,
   className,
   height,
-  src,
+  media,
   width,
 }: MediaProps) {
-  const extension = src.split(".").pop();
+  const { resolvedTheme } = useTheme();
+
+  if (media.src === undefined || media.src.length === 0) {
+    return (
+      <Image
+        alt={alt}
+        className={className}
+        height={height}
+        src={`/medias/${resolvedTheme === "dark" ? "dark/" : ""}empty_nft.png`}
+        width={width}
+      />
+    );
+  }
 
-  if (extension === "mp4") {
+  if (media.format === "video") {
     return (
       <video
         autoPlay
@@ -27,17 +43,17 @@ export default function Media({
         muted
         width={width}
       >
-        <source src={src} type="video/mp4" />
+        <source src={media.src} type="video/mp4" />
         Your browser does not support the video tag.
       </video>
     );
   } else {
     return (
-      <Image
+      <img
         alt={alt}
         className={className}
         height={height}
-        src={src}
+        src={media.src}
         width={width}
       />
     );