thirdweb-dev · jnsdls · Aug 24, 2022 · Aug 24, 2022 · Aug 24, 2022 · Aug 24, 2022
diff --git a/package.json b/package.json
@@ -50,16 +50,16 @@
     "@chakra-ui/react": "^2.1.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@thirdweb-dev/react": "^2.4.9-4",
-    "@thirdweb-dev/sdk": "^2.3.39-0",
+    "@thirdweb-dev/react": "^2.7.3-0",
+    "@thirdweb-dev/sdk": "^2.3.39",
+    "@thirdweb-dev/storage": "^0.1.0",
     "color": "^4.2.3",
     "ethers": "^5.6.7",
     "flat": "^5.0.2",
     "framer-motion": "^6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-icons": "^4.3.1",
-    "wagmi": "^0.2.9"
+    "react-icons": "^4.3.1"
   },
   "resolutions": {
     "ansi-regex": "^5.0.1"

diff --git a/src/embeds/edition-drop.tsx b/src/embeds/edition-drop.tsx
@@ -31,7 +31,8 @@ import {
   useNFT,
   useTotalCirculatingSupply,
 } from "@thirdweb-dev/react";
-import { EditionDrop, IpfsStorage } from "@thirdweb-dev/sdk";
+import { EditionDrop } from "@thirdweb-dev/sdk";
+import { IpfsStorage } from "@thirdweb-dev/storage";
 import { BigNumber } from "ethers";
 import { formatUnits, parseUnits } from "ethers/lib/utils";
 import React, { useEffect, useMemo, useRef, useState } from "react";
@@ -70,7 +71,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
   const activeClaimCondition = useActiveClaimCondition(contract, tokenId);
   const claimIneligibilityReasons = useClaimIneligibilityReasons(
     contract,
-    { quantity, walletAddress: address },
+    { quantity, walletAddress: address || "" },
     tokenId,
   );
   const claimMutation = useClaimNFT(contract);
@@ -265,7 +266,7 @@ const ClaimPage: React.FC<ClaimPageProps> = ({
               w="100%"
               h="100%"
               src={metadata?.image}
-              alt={metadata?.name}
+              alt={metadata?.name?.toString()}
             />
           ) : (
             <Icon maxW="100%" maxH="100%" as={DropSvg} />
@@ -322,8 +323,6 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
 }) => {
   const { setColorMode } = useColorMode();
   const editionDrop = useEditionDrop(contractAddress);
-  const activeClaimCondition = useActiveClaimCondition(editionDrop, tokenId);
-  const tokenAddress = activeClaimCondition?.data?.currencyAddress;
 
   useEffect(() => {
     setColorMode(colorScheme);
@@ -344,7 +343,7 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
       borderColor="borderColor"
       bgColor="backgroundHighlight"
     >
-      <Header tokenAddress={tokenAddress} />
+      <Header primaryColor={primaryColor} colorScheme={colorScheme} />
       <Body>
         <ClaimPage
           contract={editionDrop}

diff --git a/src/embeds/marketplace.tsx b/src/embeds/marketplace.tsx
@@ -37,18 +37,18 @@ import {
 import {
   AuctionListing,
   DirectListing,
-  IpfsStorage,
   ListingType,
   Marketplace,
 } from "@thirdweb-dev/sdk";
+import { IpfsStorage } from "@thirdweb-dev/storage";
 import { BigNumber, ethers } from "ethers";
 import React, { useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { AiFillExclamationCircle } from "react-icons/ai";
 import { IoDiamondOutline } from "react-icons/io5";
 import { RiAuctionLine } from "react-icons/ri";
+import { Header } from "src/shared/header";
 import { ConnectWalletButton } from "../shared/connect-wallet-button";
-import { ConnectedWallet } from "../shared/connected-wallet";
 import { Footer } from "../shared/footer";
 import { DropSvg } from "../shared/svg/drop";
 import chakraTheme from "../shared/theme";
@@ -82,28 +82,6 @@ interface DirectListingProps extends BuyPageProps {
   listing: DirectListing;
 }
 
-interface HeaderProps {
-  tokenAddress?: string;
-}
-
-const Header: React.FC<HeaderProps> = ({ tokenAddress }) => {
-  return (
-    <Stack
-      as="header"
-      px="28px"
-      direction="row"
-      height="48px"
-      w="100%"
-      flexGrow={0}
-      borderBottom="1px solid rgba(0,0,0,.1)"
-      align="center"
-      justify="flex-end"
-    >
-      <ConnectedWallet tokenAddress={tokenAddress} />
-    </Stack>
-  );
-};
-
 const AuctionListingComponent: React.FC<AuctionListingProps> = ({
   contract,
   expectedChainId,
@@ -685,7 +663,7 @@ const BuyPage: React.FC<BuyPageProps> = ({
                 "ipfs://",
                 "https://cloudflare-ipfs.com/ipfs/",
               )}
-              alt={listing?.asset?.name}
+              alt={listing?.asset?.name?.toString()}
             />
           ) : (
             <Icon maxW="100%" maxH="100%" as={DropSvg} />
@@ -765,7 +743,7 @@ const MarketplaceEmbed: React.FC<MarketplaceEmbedProps> = ({
       borderColor="borderColor"
       bgColor="backgroundHighlight"
     >
-      <Header tokenAddress={listing?.currencyContractAddress} />
+      <Header primaryColor={primaryColor} colorScheme={colorScheme} />
       <Body>
         <BuyPage
           contract={marketplace}

diff --git a/src/embeds/nft-drop.tsx b/src/embeds/nft-drop.tsx
@@ -32,7 +32,8 @@ import {
   useNFTDrop,
   useUnclaimedNFTSupply,
 } from "@thirdweb-dev/react";
-import { IpfsStorage, NFTDrop } from "@thirdweb-dev/sdk";
+import { NFTDrop } from "@thirdweb-dev/sdk";
+import { IpfsStorage } from "@thirdweb-dev/storage";
 import { formatUnits, parseUnits } from "ethers/lib/utils";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
@@ -68,7 +69,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
   const activeClaimCondition = useActiveClaimCondition(contract);
   const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
     quantity,
-    walletAddress: address,
+    walletAddress: address || "",
   });
   const unclaimedSupply = useUnclaimedNFTSupply(contract);
   const claimedSupply = useClaimedNFTSupply(contract);
@@ -306,8 +307,6 @@ const NFTDropEmbed: React.FC<NFTDropEmbedProps> = ({
 }) => {
   const { setColorMode } = useColorMode();
   const nftDrop = useNFTDrop(contractAddress);
-  const activeClaimCondition = useActiveClaimCondition(nftDrop);
-  const tokenAddress = activeClaimCondition?.data?.currencyAddress;
 
   useEffect(() => {
     setColorMode(colorScheme);
@@ -328,7 +327,7 @@ const NFTDropEmbed: React.FC<NFTDropEmbedProps> = ({
       borderColor="borderColor"
       bgColor="backgroundHighlight"
     >
-      <Header tokenAddress={tokenAddress} />
+      <Header primaryColor={primaryColor} colorScheme={colorScheme} />
       <Body>
         <ClaimPage
           contract={nftDrop}

diff --git a/src/embeds/signature-drop.tsx b/src/embeds/signature-drop.tsx
@@ -32,7 +32,8 @@ import {
   useSignatureDrop,
   useUnclaimedNFTSupply,
 } from "@thirdweb-dev/react";
-import { IpfsStorage, SignatureDrop } from "@thirdweb-dev/sdk";
+import { SignatureDrop } from "@thirdweb-dev/sdk";
+import { IpfsStorage } from "@thirdweb-dev/storage";
 import { formatUnits, parseUnits } from "ethers/lib/utils";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
@@ -68,7 +69,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
   const activeClaimCondition = useActiveClaimCondition(contract);
   const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
     quantity,
-    walletAddress: address,
+    walletAddress: address || "",
   });
   const unclaimedSupply = useUnclaimedNFTSupply(contract);
   const claimedSupply = useClaimedNFTSupply(contract);
@@ -308,8 +309,6 @@ const SignatureDropEmbed: React.FC<SignatureDropEmbedProps> = ({
 }) => {
   const { setColorMode } = useColorMode();
   const signatureDrop = useSignatureDrop(contractAddress);
-  const activeClaimCondition = useActiveClaimCondition(signatureDrop);
-  const tokenAddress = activeClaimCondition?.data?.currencyAddress;
 
   useEffect(() => {
     setColorMode(colorScheme);
@@ -330,7 +329,7 @@ const SignatureDropEmbed: React.FC<SignatureDropEmbedProps> = ({
       borderColor="borderColor"
       bgColor="backgroundHighlight"
     >
-      <Header tokenAddress={tokenAddress} />
+      <Header primaryColor={primaryColor} colorScheme={colorScheme} />
       <Body>
         <ClaimPage
           contract={signatureDrop}

diff --git a/src/embeds/token-drop.tsx b/src/embeds/token-drop.tsx
@@ -30,12 +30,12 @@ import {
   useContractMetadata,
   useTokenDrop,
 } from "@thirdweb-dev/react";
-import { IpfsStorage, TokenDrop } from "@thirdweb-dev/sdk";
+import { TokenDrop } from "@thirdweb-dev/sdk";
+import { IpfsStorage } from "@thirdweb-dev/storage";
 import { formatUnits, parseUnits } from "ethers/lib/utils";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { IoDiamondOutline } from "react-icons/io5";
-import { QueryClient, QueryClientProvider } from "react-query";
 import { Header } from "src/shared/header";
 import { ConnectWalletButton } from "../shared/connect-wallet-button";
 import { Footer } from "../shared/footer";
@@ -73,7 +73,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
 
   const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
     quantity,
-    walletAddress: address,
+    walletAddress: address || "",
   });
 
   const isEnabled = !!contract && !!address && chainId === expectedChainId;
@@ -287,8 +287,6 @@ const TokenDropEmbed: React.FC<TokenDropEmbedProps> = ({
 }) => {
   const { setColorMode } = useColorMode();
   const tokenDrop = useTokenDrop(contractAddress);
-  const activeClaimCondition = useActiveClaimCondition(tokenDrop);
-  const tokenAddress = activeClaimCondition?.data?.currencyAddress;
 
   useEffect(() => {
     setColorMode(colorScheme);
@@ -309,7 +307,7 @@ const TokenDropEmbed: React.FC<TokenDropEmbedProps> = ({
       borderColor="borderColor"
       bgColor="backgroundHighlight"
     >
-      <Header tokenAddress={tokenAddress} />
+      <Header primaryColor={primaryColor} colorScheme={colorScheme} />
       <Body>
         <ClaimPage
           contract={tokenDrop}
@@ -323,7 +321,6 @@ const TokenDropEmbed: React.FC<TokenDropEmbedProps> = ({
   );
 };
 
-const queryClient = new QueryClient();
 const urlParams = new URL(window.location.toString()).searchParams;
 
 const App: React.FC = () => {
@@ -359,26 +356,24 @@ const App: React.FC = () => {
           }
         `}
       />
-      <QueryClientProvider client={queryClient}>
-        <ChakraProvider theme={chakraTheme}>
-          <ThirdwebProvider
-            desiredChainId={expectedChainId}
-            sdkOptions={sdkOptions}
-            storageInterface={
-              ipfsGateway ? new IpfsStorage(ipfsGateway) : undefined
-            }
-            chainRpc={{ [expectedChainId]: rpcUrl }}
-          >
-            <TokenDropEmbed
-              contractAddress={contractAddress}
-              expectedChainId={expectedChainId}
-              colorScheme={colorScheme}
-              primaryColor={primaryColor}
-              secondaryColor={secondaryColor}
-            />
-          </ThirdwebProvider>
-        </ChakraProvider>
-      </QueryClientProvider>
+      <ChakraProvider theme={chakraTheme}>
+        <ThirdwebProvider
+          desiredChainId={expectedChainId}
+          sdkOptions={sdkOptions}
+          storageInterface={
+            ipfsGateway ? new IpfsStorage(ipfsGateway) : undefined
+          }
+          chainRpc={{ [expectedChainId]: rpcUrl }}
+        >
+          <TokenDropEmbed
+            contractAddress={contractAddress}
+            expectedChainId={expectedChainId}
+            colorScheme={colorScheme}
+            primaryColor={primaryColor}
+            secondaryColor={secondaryColor}
+          />
+        </ThirdwebProvider>
+      </ChakraProvider>
     </>
   );
 };

diff --git a/src/shared/connect-wallet-button.tsx b/src/shared/connect-wallet-button.tsx
@@ -15,11 +15,11 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { useConnect, useNetwork } from "@thirdweb-dev/react";
-import { SUPPORTED_CHAIN_ID } from "@thirdweb-dev/sdk";
+import { SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "@thirdweb-dev/sdk";
 import React from "react";
 import { FiInfo } from "react-icons/fi";
 import { IoSwapHorizontalSharp } from "react-icons/io5";
-import { ChainIDToName, supportedChains } from "./rpcUtils";
+import { ChainIDToName } from "./rpcUtils";
 
 interface ConnectWalletButtonProps {
   expectedChainId: number;
@@ -101,7 +101,13 @@ export const ConnectWalletButton: React.FC<ConnectWalletButtonProps> = ({
             <Text>
               Please switch your wallet to{" "}
               <strong>
-                {supportedChains.find((c) => c.id === expectedChainId)?.name}
+                {
+                  ChainIDToName[
+                    SUPPORTED_CHAIN_IDS.find(
+                      (cId) => cId === expectedChainId,
+                    ) as SUPPORTED_CHAIN_ID
+                  ]
+                }
               </strong>
               .
             </Text>