Skip to content

Commit b909e29

Browse files
nachoiacovinonachoiacovino
authored
No more prebuilts (#86)
* Make embeds work for any ERC 721/1155/20 claimableWithConditions * No more need for a signature drop file
1 parent e1c1cc2 commit b909e29

8 files changed

+36
-162
lines changed

‎.github/workflows/deploy.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ jobs:
7878
needs: release
7979
strategy:
8080
matrix:
81-
filename: ['marketplace.html', 'edition-drop.html', 'nft-drop.html', 'token-drop.html', 'signature-drop.html']
81+
filename: ['marketplace.html', 'erc721.html', 'erc1155.html', 'erc20.html']
8282
gateway: ['ipfs.io', 'cloudflare-ipfs.com', 'gateway.pinata.cloud', 'ipfs.thirdweb.com']
8383
steps:
8484
- name: Warming ${{ matrix.gateway }} - ${{ matrix.filename }}

‎src/embeds/edition-drop.tsx ‎src/embeds/erc1155.tsx

+6-9
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,22 @@ import chakraTheme from "../shared/theme";
1919
import { fontsizeCss } from "../shared/theme/typography";
2020
import { TokenMetadataPage } from "../shared/token-metadata-page";
2121

22-
interface EditionDropEmbedProps {
22+
interface Erc1155EmbedProps {
2323
contractAddress: string;
2424
tokenId: string;
2525
colorScheme: ColorMode;
2626
primaryColor: string;
2727
}
2828

29-
const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
29+
const Erc1155Embed: React.FC<Erc1155EmbedProps> = ({
3030
contractAddress,
3131
tokenId,
3232
colorScheme,
3333
primaryColor,
3434
}) => {
3535
const { setColorMode } = useColorMode();
36-
const { contract: editionDrop } = useContract(
37-
contractAddress,
38-
"edition-drop",
39-
);
40-
const { data: nft, isLoading } = useNFT(editionDrop, tokenId);
36+
const { contract } = useContract(contractAddress);
37+
const { data: nft, isLoading } = useNFT(contract, tokenId);
4138

4239
useEffect(() => {
4340
setColorMode(colorScheme);
@@ -62,7 +59,7 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
6259
<Body>
6360
<TokenMetadataPage metadata={nft?.metadata} isLoading={isLoading}>
6461
<ERC1155ClaimButton
65-
contract={editionDrop}
62+
contract={contract}
6663
tokenId={tokenId}
6764
primaryColor={primaryColor}
6865
colorScheme={colorScheme}
@@ -117,7 +114,7 @@ const App: React.FC = () => {
117114
}
118115
chainRpc={rpcUrl ? { [chainId]: rpcUrl } : undefined}
119116
>
120-
<EditionDropEmbed
117+
<Erc1155Embed
121118
contractAddress={contractAddress}
122119
tokenId={tokenId}
123120
colorScheme={colorScheme}

‎src/embeds/token-drop.tsx ‎src/embeds/erc20.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,18 @@ import chakraTheme from "../shared/theme";
1919
import { fontsizeCss } from "../shared/theme/typography";
2020
import { parseIpfsGateway } from "../utils/parseIpfsGateway";
2121

22-
interface TokenDropEmbedProps {
22+
interface Erc20EmbedProps {
2323
colorScheme: ColorMode;
2424
primaryColor: string;
2525
contractAddress: string;
2626
}
27-
const TokenDropEmbed: React.FC<TokenDropEmbedProps> = ({
27+
const Erc20Embed: React.FC<Erc20EmbedProps> = ({
2828
contractAddress,
2929
colorScheme,
3030
primaryColor,
3131
}) => {
3232
const { setColorMode } = useColorMode();
33-
const { contract: tokenDrop } = useContract(contractAddress, "token-drop");
33+
const { contract } = useContract(contractAddress);
3434

3535
useEffect(() => {
3636
setColorMode(colorScheme);
@@ -53,9 +53,9 @@ const TokenDropEmbed: React.FC<TokenDropEmbedProps> = ({
5353
>
5454
<Header primaryColor={primaryColor} colorScheme={colorScheme} />
5555
<Body>
56-
<ContractMetadataPage contract={tokenDrop}>
56+
<ContractMetadataPage contract={contract}>
5757
<ERC20ClaimButton
58-
contract={tokenDrop}
58+
contract={contract}
5959
primaryColor={primaryColor}
6060
colorScheme={colorScheme}
6161
/>
@@ -107,7 +107,7 @@ const App: React.FC = () => {
107107
}
108108
chainRpc={rpcUrl ? { [chainId]: rpcUrl } : undefined}
109109
>
110-
<TokenDropEmbed
110+
<Erc20Embed
111111
contractAddress={contractAddress}
112112
colorScheme={colorScheme}
113113
primaryColor={primaryColor}

‎src/embeds/signature-drop.tsx ‎src/embeds/erc721.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ThirdwebProvider, useContract } from "@thirdweb-dev/react";
99
import { ThirdwebStorage } from "@thirdweb-dev/storage";
1010
import React, { useEffect } from "react";
1111
import { createRoot } from "react-dom/client";
12-
import { Body } from "src/shared/body";
12+
import { Body } from "../shared/body";
1313
import { ERC721ClaimButton } from "../shared/claim-button-erc721";
1414
import { ContractMetadataPage } from "../shared/contract-metadata-page";
1515
import { Footer } from "../shared/footer";
@@ -19,19 +19,19 @@ import chakraTheme from "../shared/theme";
1919
import { fontsizeCss } from "../shared/theme/typography";
2020
import { parseIpfsGateway } from "../utils/parseIpfsGateway";
2121

22-
interface SignatureDropEmbedProps {
22+
interface Erc721EmbedProps {
2323
contractAddress: string;
2424
colorScheme: ColorMode;
2525
primaryColor: string;
2626
}
2727

28-
const SignatureDropEmbed: React.FC<SignatureDropEmbedProps> = ({
28+
const Erc721Embed: React.FC<Erc721EmbedProps> = ({
2929
contractAddress,
3030
colorScheme,
3131
primaryColor,
3232
}) => {
3333
const { setColorMode } = useColorMode();
34-
const { contract: sigDrop } = useContract(contractAddress, "signature-drop");
34+
const { contract } = useContract(contractAddress);
3535

3636
useEffect(() => {
3737
setColorMode(colorScheme);
@@ -54,9 +54,9 @@ const SignatureDropEmbed: React.FC<SignatureDropEmbedProps> = ({
5454
>
5555
<Header primaryColor={primaryColor} colorScheme={colorScheme} />
5656
<Body>
57-
<ContractMetadataPage contract={sigDrop}>
57+
<ContractMetadataPage contract={contract}>
5858
<ERC721ClaimButton
59-
contract={sigDrop}
59+
contract={contract}
6060
colorScheme={colorScheme}
6161
primaryColor={primaryColor}
6262
/>
@@ -76,6 +76,7 @@ const App: React.FC = () => {
7676
const relayerUrl = urlParams.get("relayUrl") || "";
7777
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
7878
const biconomyApiId = urlParams.get("biconomyApiId") || "";
79+
7980
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
8081
const primaryColor = urlParams.get("primaryColor") || "purple";
8182

@@ -108,7 +109,7 @@ const App: React.FC = () => {
108109
}
109110
chainRpc={rpcUrl ? { [chainId]: rpcUrl } : undefined}
110111
>
111-
<SignatureDropEmbed
112+
<Erc721Embed
112113
contractAddress={contractAddress}
113114
colorScheme={colorScheme}
114115
primaryColor={primaryColor}

‎src/embeds/nft-drop.tsx

-127
This file was deleted.

‎src/shared/claim-button-erc1155.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
useToast,
1414
} from "@chakra-ui/react";
1515
import {
16+
DropContract,
1617
useActiveClaimCondition,
1718
useAddress,
1819
useClaimConditions,
@@ -21,21 +22,21 @@ import {
2122
useTotalCirculatingSupply,
2223
Web3Button,
2324
} from "@thirdweb-dev/react";
24-
import type { EditionDrop } from "@thirdweb-dev/sdk";
25+
import type { NFTDrop, SignatureDrop, TokenDrop } from "@thirdweb-dev/sdk";
2526
import { BigNumber, BigNumberish, utils } from "ethers";
2627
import React, { useMemo, useState } from "react";
2728
import { parseIneligibility } from "../utils/parseIneligibility";
2829
import { useDebounce } from "./hooks/useDebounce";
2930
import chakraTheme from "./theme";
3031

31-
interface ClaimButtoProps {
32-
contract?: EditionDrop;
32+
interface ClaimButtonProps {
33+
contract?: Exclude<DropContract, TokenDrop | SignatureDrop | NFTDrop>;
3334
tokenId: BigNumberish;
3435
primaryColor: string;
3536
colorScheme: ColorMode;
3637
}
3738

38-
export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
39+
export const ERC1155ClaimButton: React.FC<ClaimButtonProps> = ({
3940
contract,
4041
primaryColor,
4142
tokenId,

‎src/shared/claim-button-erc20.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
useToast,
1414
} from "@chakra-ui/react";
1515
import {
16+
DropContract,
1617
useActiveClaimCondition,
1718
useAddress,
1819
useClaimConditions,
@@ -21,20 +22,20 @@ import {
2122
useTokenSupply,
2223
Web3Button,
2324
} from "@thirdweb-dev/react";
24-
import type { TokenDrop } from "@thirdweb-dev/sdk";
25+
import type { EditionDrop, NFTDrop, SignatureDrop } from "@thirdweb-dev/sdk";
2526
import { BigNumber, utils } from "ethers";
2627
import React, { useMemo, useState } from "react";
2728
import { parseIneligibility } from "../utils/parseIneligibility";
2829
import { useDebounce } from "./hooks/useDebounce";
2930
import chakraTheme from "./theme";
3031

31-
interface ClaimButtoProps {
32-
contract?: TokenDrop;
32+
interface ClaimButtonProps {
33+
contract?: Exclude<DropContract, EditionDrop | SignatureDrop | NFTDrop>;
3334
primaryColor: string;
3435
colorScheme: ColorMode;
3536
}
3637

37-
export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
38+
export const ERC20ClaimButton: React.FC<ClaimButtonProps> = ({
3839
contract,
3940
primaryColor,
4041
colorScheme,

‎src/shared/claim-button-erc721.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
useToast,
1414
} from "@chakra-ui/react";
1515
import {
16+
DropContract,
1617
useActiveClaimCondition,
1718
useAddress,
1819
useClaimConditions,
@@ -22,20 +23,20 @@ import {
2223
useUnclaimedNFTSupply,
2324
Web3Button,
2425
} from "@thirdweb-dev/react";
25-
import type { NFTDrop, SignatureDrop } from "@thirdweb-dev/sdk";
26+
import { EditionDrop, TokenDrop } from "@thirdweb-dev/sdk";
2627
import { BigNumber, utils } from "ethers";
2728
import React, { useMemo, useState } from "react";
2829
import { parseIneligibility } from "../utils/parseIneligibility";
2930
import { useDebounce } from "./hooks/useDebounce";
3031
import chakraTheme from "./theme";
3132

32-
interface ClaimButtoProps {
33-
contract?: SignatureDrop | NFTDrop;
33+
interface ClaimButtonProps {
34+
contract?: Exclude<DropContract, TokenDrop | EditionDrop>;
3435
primaryColor: string;
3536
colorScheme: ColorMode;
3637
}
3738

38-
export const ERC721ClaimButton: React.FC<ClaimButtoProps> = ({
39+
export const ERC721ClaimButton: React.FC<ClaimButtonProps> = ({
3940
contract,
4041
primaryColor,
4142
colorScheme,

0 commit comments

Comments
 (0)