Skip to content

Commit a872923

Browse files
nachoiacovinonachoiacovino
authored
Use ConnectWallet UI button (#65)
* Update SDKs, fix errors * update SDK * Use connectwallet button * Remove wagmi dependency
1 parent f9c2b61 commit a872923

File tree

11 files changed

+769
-359
lines changed

11 files changed

+769
-359
lines changed

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@
5050
"@chakra-ui/react": "^2.1.0",
5151
"@emotion/react": "^11",
5252
"@emotion/styled": "^11",
53-
"@thirdweb-dev/react": "^2.4.9-4",
54-
"@thirdweb-dev/sdk": "^2.3.39-0",
53+
"@thirdweb-dev/react": "^2.7.3-0",
54+
"@thirdweb-dev/sdk": "^2.3.39",
55+
"@thirdweb-dev/storage": "^0.1.0",
5556
"color": "^4.2.3",
5657
"ethers": "^5.6.7",
5758
"flat": "^5.0.2",
5859
"framer-motion": "^6",
5960
"react": "^18.1.0",
6061
"react-dom": "^18.1.0",
61-
"react-icons": "^4.3.1",
62-
"wagmi": "^0.2.9"
62+
"react-icons": "^4.3.1"
6363
},
6464
"resolutions": {
6565
"ansi-regex": "^5.0.1"

‎src/embeds/edition-drop.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ import {
3131
useNFT,
3232
useTotalCirculatingSupply,
3333
} from "@thirdweb-dev/react";
34-
import { EditionDrop, IpfsStorage } from "@thirdweb-dev/sdk";
34+
import { EditionDrop } from "@thirdweb-dev/sdk";
35+
import { IpfsStorage } from "@thirdweb-dev/storage";
3536
import { BigNumber } from "ethers";
3637
import { formatUnits, parseUnits } from "ethers/lib/utils";
3738
import React, { useEffect, useMemo, useRef, useState } from "react";
@@ -70,7 +71,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
7071
const activeClaimCondition = useActiveClaimCondition(contract, tokenId);
7172
const claimIneligibilityReasons = useClaimIneligibilityReasons(
7273
contract,
73-
{ quantity, walletAddress: address },
74+
{ quantity, walletAddress: address || "" },
7475
tokenId,
7576
);
7677
const claimMutation = useClaimNFT(contract);
@@ -265,7 +266,7 @@ const ClaimPage: React.FC<ClaimPageProps> = ({
265266
w="100%"
266267
h="100%"
267268
src={metadata?.image}
268-
alt={metadata?.name}
269+
alt={metadata?.name?.toString()}
269270
/>
270271
) : (
271272
<Icon maxW="100%" maxH="100%" as={DropSvg} />
@@ -322,8 +323,6 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
322323
}) => {
323324
const { setColorMode } = useColorMode();
324325
const editionDrop = useEditionDrop(contractAddress);
325-
const activeClaimCondition = useActiveClaimCondition(editionDrop, tokenId);
326-
const tokenAddress = activeClaimCondition?.data?.currencyAddress;
327326

328327
useEffect(() => {
329328
setColorMode(colorScheme);
@@ -344,7 +343,7 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
344343
borderColor="borderColor"
345344
bgColor="backgroundHighlight"
346345
>
347-
<Header tokenAddress={tokenAddress} />
346+
<Header primaryColor={primaryColor} colorScheme={colorScheme} />
348347
<Body>
349348
<ClaimPage
350349
contract={editionDrop}

‎src/embeds/marketplace.tsx‎

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,18 @@ import {
3737
import {
3838
AuctionListing,
3939
DirectListing,
40-
IpfsStorage,
4140
ListingType,
4241
Marketplace,
4342
} from "@thirdweb-dev/sdk";
43+
import { IpfsStorage } from "@thirdweb-dev/storage";
4444
import { BigNumber, ethers } from "ethers";
4545
import React, { useEffect, useMemo, useState } from "react";
4646
import { createRoot } from "react-dom/client";
4747
import { AiFillExclamationCircle } from "react-icons/ai";
4848
import { IoDiamondOutline } from "react-icons/io5";
4949
import { RiAuctionLine } from "react-icons/ri";
50+
import { Header } from "src/shared/header";
5051
import { ConnectWalletButton } from "../shared/connect-wallet-button";
51-
import { ConnectedWallet } from "../shared/connected-wallet";
5252
import { Footer } from "../shared/footer";
5353
import { DropSvg } from "../shared/svg/drop";
5454
import chakraTheme from "../shared/theme";
@@ -82,28 +82,6 @@ interface DirectListingProps extends BuyPageProps {
8282
listing: DirectListing;
8383
}
8484

85-
interface HeaderProps {
86-
tokenAddress?: string;
87-
}
88-
89-
const Header: React.FC<HeaderProps> = ({ tokenAddress }) => {
90-
return (
91-
<Stack
92-
as="header"
93-
px="28px"
94-
direction="row"
95-
height="48px"
96-
w="100%"
97-
flexGrow={0}
98-
borderBottom="1px solid rgba(0,0,0,.1)"
99-
align="center"
100-
justify="flex-end"
101-
>
102-
<ConnectedWallet tokenAddress={tokenAddress} />
103-
</Stack>
104-
);
105-
};
106-
10785
const AuctionListingComponent: React.FC<AuctionListingProps> = ({
10886
contract,
10987
expectedChainId,
@@ -685,7 +663,7 @@ const BuyPage: React.FC<BuyPageProps> = ({
685663
"ipfs://",
686664
"https://cloudflare-ipfs.com/ipfs/",
687665
)}
688-
alt={listing?.asset?.name}
666+
alt={listing?.asset?.name?.toString()}
689667
/>
690668
) : (
691669
<Icon maxW="100%" maxH="100%" as={DropSvg} />
@@ -765,7 +743,7 @@ const MarketplaceEmbed: React.FC<MarketplaceEmbedProps> = ({
765743
borderColor="borderColor"
766744
bgColor="backgroundHighlight"
767745
>
768-
<Header tokenAddress={listing?.currencyContractAddress} />
746+
<Header primaryColor={primaryColor} colorScheme={colorScheme} />
769747
<Body>
770748
<BuyPage
771749
contract={marketplace}

‎src/embeds/nft-drop.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ import {
3232
useNFTDrop,
3333
useUnclaimedNFTSupply,
3434
} from "@thirdweb-dev/react";
35-
import { IpfsStorage, NFTDrop } from "@thirdweb-dev/sdk";
35+
import { NFTDrop } from "@thirdweb-dev/sdk";
36+
import { IpfsStorage } from "@thirdweb-dev/storage";
3637
import { formatUnits, parseUnits } from "ethers/lib/utils";
3738
import React, { useEffect, useMemo, useRef, useState } from "react";
3839
import { createRoot } from "react-dom/client";
@@ -68,7 +69,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
6869
const activeClaimCondition = useActiveClaimCondition(contract);
6970
const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
7071
quantity,
71-
walletAddress: address,
72+
walletAddress: address || "",
7273
});
7374
const unclaimedSupply = useUnclaimedNFTSupply(contract);
7475
const claimedSupply = useClaimedNFTSupply(contract);
@@ -306,8 +307,6 @@ const NFTDropEmbed: React.FC<NFTDropEmbedProps> = ({
306307
}) => {
307308
const { setColorMode } = useColorMode();
308309
const nftDrop = useNFTDrop(contractAddress);
309-
const activeClaimCondition = useActiveClaimCondition(nftDrop);
310-
const tokenAddress = activeClaimCondition?.data?.currencyAddress;
311310

312311
useEffect(() => {
313312
setColorMode(colorScheme);
@@ -328,7 +327,7 @@ const NFTDropEmbed: React.FC<NFTDropEmbedProps> = ({
328327
borderColor="borderColor"
329328
bgColor="backgroundHighlight"
330329
>
331-
<Header tokenAddress={tokenAddress} />
330+
<Header primaryColor={primaryColor} colorScheme={colorScheme} />
332331
<Body>
333332
<ClaimPage
334333
contract={nftDrop}

‎src/embeds/signature-drop.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ import {
3232
useSignatureDrop,
3333
useUnclaimedNFTSupply,
3434
} from "@thirdweb-dev/react";
35-
import { IpfsStorage, SignatureDrop } from "@thirdweb-dev/sdk";
35+
import { SignatureDrop } from "@thirdweb-dev/sdk";
36+
import { IpfsStorage } from "@thirdweb-dev/storage";
3637
import { formatUnits, parseUnits } from "ethers/lib/utils";
3738
import React, { useEffect, useMemo, useRef, useState } from "react";
3839
import { createRoot } from "react-dom/client";
@@ -68,7 +69,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
6869
const activeClaimCondition = useActiveClaimCondition(contract);
6970
const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
7071
quantity,
71-
walletAddress: address,
72+
walletAddress: address || "",
7273
});
7374
const unclaimedSupply = useUnclaimedNFTSupply(contract);
7475
const claimedSupply = useClaimedNFTSupply(contract);
@@ -308,8 +309,6 @@ const SignatureDropEmbed: React.FC<SignatureDropEmbedProps> = ({
308309
}) => {
309310
const { setColorMode } = useColorMode();
310311
const signatureDrop = useSignatureDrop(contractAddress);
311-
const activeClaimCondition = useActiveClaimCondition(signatureDrop);
312-
const tokenAddress = activeClaimCondition?.data?.currencyAddress;
313312

314313
useEffect(() => {
315314
setColorMode(colorScheme);
@@ -330,7 +329,7 @@ const SignatureDropEmbed: React.FC<SignatureDropEmbedProps> = ({
330329
borderColor="borderColor"
331330
bgColor="backgroundHighlight"
332331
>
333-
<Header tokenAddress={tokenAddress} />
332+
<Header primaryColor={primaryColor} colorScheme={colorScheme} />
334333
<Body>
335334
<ClaimPage
336335
contract={signatureDrop}

‎src/embeds/token-drop.tsx‎

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@ import {
3030
useContractMetadata,
3131
useTokenDrop,
3232
} from "@thirdweb-dev/react";
33-
import { IpfsStorage, TokenDrop } from "@thirdweb-dev/sdk";
33+
import { TokenDrop } from "@thirdweb-dev/sdk";
34+
import { IpfsStorage } from "@thirdweb-dev/storage";
3435
import { formatUnits, parseUnits } from "ethers/lib/utils";
3536
import React, { useEffect, useMemo, useRef, useState } from "react";
3637
import { createRoot } from "react-dom/client";
3738
import { IoDiamondOutline } from "react-icons/io5";
38-
import { QueryClient, QueryClientProvider } from "react-query";
3939
import { Header } from "src/shared/header";
4040
import { ConnectWalletButton } from "../shared/connect-wallet-button";
4141
import { Footer } from "../shared/footer";
@@ -73,7 +73,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
7373

7474
const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
7575
quantity,
76-
walletAddress: address,
76+
walletAddress: address || "",
7777
});
7878

7979
const isEnabled = !!contract && !!address && chainId === expectedChainId;
@@ -287,8 +287,6 @@ const TokenDropEmbed: React.FC<TokenDropEmbedProps> = ({
287287
}) => {
288288
const { setColorMode } = useColorMode();
289289
const tokenDrop = useTokenDrop(contractAddress);
290-
const activeClaimCondition = useActiveClaimCondition(tokenDrop);
291-
const tokenAddress = activeClaimCondition?.data?.currencyAddress;
292290

293291
useEffect(() => {
294292
setColorMode(colorScheme);
@@ -309,7 +307,7 @@ const TokenDropEmbed: React.FC<TokenDropEmbedProps> = ({
309307
borderColor="borderColor"
310308
bgColor="backgroundHighlight"
311309
>
312-
<Header tokenAddress={tokenAddress} />
310+
<Header primaryColor={primaryColor} colorScheme={colorScheme} />
313311
<Body>
314312
<ClaimPage
315313
contract={tokenDrop}
@@ -323,7 +321,6 @@ const TokenDropEmbed: React.FC<TokenDropEmbedProps> = ({
323321
);
324322
};
325323

326-
const queryClient = new QueryClient();
327324
const urlParams = new URL(window.location.toString()).searchParams;
328325

329326
const App: React.FC = () => {
@@ -359,26 +356,24 @@ const App: React.FC = () => {
359356
}
360357
`}
361358
/>
362-
<QueryClientProvider client={queryClient}>
363-
<ChakraProvider theme={chakraTheme}>
364-
<ThirdwebProvider
365-
desiredChainId={expectedChainId}
366-
sdkOptions={sdkOptions}
367-
storageInterface={
368-
ipfsGateway ? new IpfsStorage(ipfsGateway) : undefined
369-
}
370-
chainRpc={{ [expectedChainId]: rpcUrl }}
371-
>
372-
<TokenDropEmbed
373-
contractAddress={contractAddress}
374-
expectedChainId={expectedChainId}
375-
colorScheme={colorScheme}
376-
primaryColor={primaryColor}
377-
secondaryColor={secondaryColor}
378-
/>
379-
</ThirdwebProvider>
380-
</ChakraProvider>
381-
</QueryClientProvider>
359+
<ChakraProvider theme={chakraTheme}>
360+
<ThirdwebProvider
361+
desiredChainId={expectedChainId}
362+
sdkOptions={sdkOptions}
363+
storageInterface={
364+
ipfsGateway ? new IpfsStorage(ipfsGateway) : undefined
365+
}
366+
chainRpc={{ [expectedChainId]: rpcUrl }}
367+
>
368+
<TokenDropEmbed
369+
contractAddress={contractAddress}
370+
expectedChainId={expectedChainId}
371+
colorScheme={colorScheme}
372+
primaryColor={primaryColor}
373+
secondaryColor={secondaryColor}
374+
/>
375+
</ThirdwebProvider>
376+
</ChakraProvider>
382377
</>
383378
);
384379
};

‎src/shared/connect-wallet-button.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ import {
1515
Text,
1616
} from "@chakra-ui/react";
1717
import { useConnect, useNetwork } from "@thirdweb-dev/react";
18-
import { SUPPORTED_CHAIN_ID } from "@thirdweb-dev/sdk";
18+
import { SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "@thirdweb-dev/sdk";
1919
import React from "react";
2020
import { FiInfo } from "react-icons/fi";
2121
import { IoSwapHorizontalSharp } from "react-icons/io5";
22-
import { ChainIDToName, supportedChains } from "./rpcUtils";
22+
import { ChainIDToName } from "./rpcUtils";
2323

2424
interface ConnectWalletButtonProps {
2525
expectedChainId: number;
@@ -101,7 +101,13 @@ export const ConnectWalletButton: React.FC<ConnectWalletButtonProps> = ({
101101
<Text>
102102
Please switch your wallet to{" "}
103103
<strong>
104-
{supportedChains.find((c) => c.id === expectedChainId)?.name}
104+
{
105+
ChainIDToName[
106+
SUPPORTED_CHAIN_IDS.find(
107+
(cId) => cId === expectedChainId,
108+
) as SUPPORTED_CHAIN_ID
109+
]
110+
}
105111
</strong>
106112
.
107113
</Text>

0 commit comments

Comments
 (0)