diff --git a/buffer-shim.js b/buffer-shim.js deleted file mode 100644 index 8b4f142..0000000 --- a/buffer-shim.js +++ /dev/null @@ -1 +0,0 @@ -export let Buffer = require("buffer").Buffer; diff --git a/package.json b/package.json index 44e514b..793ec32 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,10 @@ "version": "2.0.0", "description": "", "scripts": { - "build": "rm -rf dist/ && node scripts/build.js", + "build": "rm -rf dist/ && node scripts/build.mjs", "dev": "parcel serve parcel-build.html", "gen:theme-typings": "chakra-cli tokens src/shared/theme/index.ts", - "postinstall": "yarn gen:theme-typings", - "deploy": "yarn build && node scripts/deploy.mjs" + "postinstall": "yarn gen:theme-typings" }, "repository": { "type": "git", @@ -30,7 +29,7 @@ "@typescript-eslint/eslint-plugin": "^5.14.0", "@typescript-eslint/parser": "^5.14.0", "assert": "^2.0.0", - "esbuild": "^0.14.2", + "esbuild": "^0.15.6", "eslint": "^8.9.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.2", @@ -39,7 +38,7 @@ "eslint-plugin-react": "^7.29.3", "eslint-plugin-react-hooks": "^4.3.0", "follow-redirects": "^1.14.6", - "parcel": "^2.6.2", + "parcel": "^2.7.0", "prettier": "^2.4.1", "prettier-plugin-organize-imports": "^2.3.4", "stream": "^0.0.2", @@ -50,13 +49,13 @@ "@chakra-ui/react": "^2.1.0", "@emotion/react": "^11", "@emotion/styled": "^11", - "@thirdweb-dev/react": "^2.7.3-0", - "@thirdweb-dev/sdk": "^2.3.39", - "@thirdweb-dev/storage": "^0.1.0", + "@thirdweb-dev/react": "^3.0.5-nightly-b54f95d", + "@thirdweb-dev/sdk": "^3.0.5-nightly-b54f95d", + "@thirdweb-dev/storage": "^1.0.2-nightly-b54f95d", "color": "^4.2.3", - "ethers": "^5.6.7", + "ethers": "^5.7.0", "flat": "^5.0.2", - "framer-motion": "^6", + "framer-motion": "^7", "react": "^18.1.0", "react-dom": "^18.1.0", "react-icons": "^4.3.1" diff --git a/scripts/build.js b/scripts/build.mjs similarity index 93% rename from scripts/build.js rename to scripts/build.mjs index ee83575..9ffb359 100644 --- a/scripts/build.js +++ b/scripts/build.mjs @@ -1,5 +1,6 @@ -const path = require("path"); -const fs = require("fs"); +import path from 'path'; +import fs from 'fs'; +import esbuild from 'esbuild'; const EMBEDS_SRC_PATH = path.resolve(process.cwd(), "src/embeds"); const DIST_PATH = path.resolve(process.cwd(), "dist/"); @@ -8,23 +9,25 @@ const files = fs.readdirSync(EMBEDS_SRC_PATH); fs.rmSync(DIST_PATH, { recursive: true, force: true }); -require("esbuild") +esbuild .build({ + jsx: 'automatic', entryPoints: files.map((f) => path.resolve(EMBEDS_SRC_PATH, f)), bundle: true, minify: true, platform: "browser", target: "es6", outdir: "./esout", + + splitting: false, write: false, + sourcemap: false, define: { - global: "window", process: JSON.stringify({ env: "production" }) }, - inject: ['./buffer-shim.js'] }) .then((result) => { for (const file of result.outputFiles) { diff --git a/src/embeds/edition-drop.tsx b/src/embeds/edition-drop.tsx index c52dc80..4ce4030 100644 --- a/src/embeds/edition-drop.tsx +++ b/src/embeds/edition-drop.tsx @@ -1,7 +1,7 @@ import { - Button, Center, ChakraProvider, + ColorMode, Flex, Grid, Heading, @@ -24,21 +24,18 @@ import { ThirdwebProvider, useActiveClaimCondition, useAddress, - useChainId, useClaimIneligibilityReasons, - useClaimNFT, - useEditionDrop, + useContract, useNFT, useTotalCirculatingSupply, + Web3Button, } from "@thirdweb-dev/react"; -import { EditionDrop } from "@thirdweb-dev/sdk"; -import { IpfsStorage } from "@thirdweb-dev/storage"; +import { SmartContract } from "@thirdweb-dev/sdk/dist/declarations/src/contracts/smart-contract"; +import { ThirdwebStorage } from "@thirdweb-dev/storage"; import { BigNumber } from "ethers"; 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 { ConnectWalletButton } from "../shared/connect-wallet-button"; import { Footer } from "../shared/footer"; import { Header } from "../shared/header"; import { DropSvg } from "../shared/svg/drop"; @@ -48,22 +45,19 @@ import { parseIneligibility } from "../utils/parseIneligibility"; import { parseIpfsGateway } from "../utils/parseIpfsGateway"; interface ClaimPageProps { - contract?: EditionDrop; - expectedChainId: number; + contract?: SmartContract | null; tokenId: string; primaryColor: string; - secondaryColor: string; + colorScheme: ColorMode; } const ClaimButton: React.FC = ({ contract, - expectedChainId, tokenId, primaryColor, - secondaryColor, + colorScheme, }) => { const address = useAddress(); - const chainId = useChainId(); const [quantity, setQuantity] = useState(1); const loaded = useRef(false); const { data: totalSupply } = useTotalCirculatingSupply(contract, tokenId); @@ -74,10 +68,6 @@ const ClaimButton: React.FC = ({ { quantity, walletAddress: address || "" }, tokenId, ); - const claimMutation = useClaimNFT(contract); - - const isEnabled = !!contract && !!address && chainId === expectedChainId; - const bnPrice = parseUnits( activeClaimCondition.data?.currencyMetadata.displayValue || "0", activeClaimCondition.data?.currencyMetadata.decimals, @@ -116,51 +106,29 @@ const ClaimButton: React.FC = ({ isNaN(Number(availableSupply)) ? 1000 : Number(availableSupply), ); - const claim = async () => { - claimMutation.mutate( - { to: address as string, tokenId, quantity }, - { - onSuccess: () => { - toast({ - title: "Successfully claimed.", - status: "success", - duration: 5000, - isClosable: true, - }); - }, - onError: (err) => { - console.error(err); - toast({ - title: "Failed to claim drop.", - status: "error", - duration: 9000, - isClosable: true, - }); - }, - }, - ); - }; - const isLoading = claimIneligibilityReasons.isLoading && !loaded.current; const canClaim = !isSoldOut && !!address && !claimIneligibilityReasons.data?.length; - if (!isEnabled) { - return ( - - ); + if (!contract) { + return null; } const maxQuantity = activeClaimCondition.data?.maxQuantity; + const colors = chakraTheme.colors; + const accentColor = colors[primaryColor as keyof typeof colors][500]; + return ( - + = ({ - + {activeClaimCondition.data && ( @@ -228,10 +211,9 @@ const ClaimButton: React.FC = ({ const ClaimPage: React.FC = ({ contract, - expectedChainId, tokenId, primaryColor, - secondaryColor, + colorScheme, }) => { const tokenMetadata = useNFT(contract, tokenId); @@ -283,9 +265,8 @@ const ClaimPage: React.FC = ({ @@ -307,22 +288,18 @@ const Body: React.FC = ({ children }) => { interface EditionDropEmbedProps { contractAddress: string; tokenId: string; - expectedChainId: number; - colorScheme: string; + colorScheme: ColorMode; primaryColor: string; - secondaryColor: string; } const EditionDropEmbed: React.FC = ({ contractAddress, tokenId, - expectedChainId, colorScheme, primaryColor, - secondaryColor, }) => { const { setColorMode } = useColorMode(); - const editionDrop = useEditionDrop(contractAddress); + const { contract: editionDrop } = useContract(contractAddress); useEffect(() => { setColorMode(colorScheme); @@ -348,9 +325,8 @@ const EditionDropEmbed: React.FC = ({