Update SDKs

package.json

@@ -49,9 +49,9 @@
     "@chakra-ui/react": "^2.1.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@thirdweb-dev/react": "^3.9.5",
-    "@thirdweb-dev/sdk": "^3.9.5",
-    "@thirdweb-dev/storage": "^1.0.10",
+    "@thirdweb-dev/react": "^3.11.8-nightly-0b1f5229-20230417214052",
+    "@thirdweb-dev/sdk": "^3.10.11-nightly-0b1f5229-20230417214052",
+    "@thirdweb-dev/storage": "^1.1.2",
     "color": "^4.2.3",
     "ethers": "^5.7.0",
     "flat": "^5.0.2",

scripts/build.mjs

@@ -16,14 +16,15 @@ esbuild
     bundle: true,
     minify: true,
     platform: "browser",
-    target: "es2018",
+    target: "es2020",
     outdir: "./esout",
 
 
     splitting: false,
     write: false,
     sourcemap: false,
     define: {
+      global: 'globalThis',
       process: JSON.stringify({
         env: "production"
       })

src/embeds/erc1155.tsx

@@ -22,7 +22,7 @@ import { TokenMetadataPage } from "../shared/token-metadata-page";
 interface Erc1155EmbedProps {
   contractAddress: string;
   tokenId: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
   primaryColor: string;
 }
 

src/embeds/erc20.tsx

@@ -20,7 +20,7 @@ import { fontsizeCss } from "../shared/theme/typography";
 import { parseIpfsGateway } from "../utils/parseIpfsGateway";
 
 interface Erc20EmbedProps {
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
   primaryColor: string;
   contractAddress: string;
 }

src/embeds/erc721.tsx

@@ -1,9 +1,4 @@
-import {
-  ChakraProvider,
-  ColorMode,
-  Flex,
-  useColorMode,
-} from "@chakra-ui/react";
+import { ChakraProvider, Flex, useColorMode } from "@chakra-ui/react";
 import { css, Global } from "@emotion/react";
 import { ThirdwebProvider, useContract } from "@thirdweb-dev/react";
 import { ThirdwebStorage } from "@thirdweb-dev/storage";
@@ -21,7 +16,7 @@ import { parseIpfsGateway } from "../utils/parseIpfsGateway";
 
 interface Erc721EmbedProps {
   contractAddress: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
   primaryColor: string;
 }
 

src/embeds/marketplace-v3.tsx

@@ -56,7 +56,7 @@ interface MarketplaceV3EmbedProps {
   rpcUrl?: string;
   contractAddress: string;
   listingId: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
   primaryColor: string;
   secondaryColor: string;
   type: string;
@@ -68,7 +68,7 @@ interface BuyPageProps {
   isLoading?: boolean;
   primaryColor: string;
   secondaryColor: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
   type: string;
 }
 
@@ -217,8 +217,10 @@ const EnglishAuctionComponent: React.FC<EnglishAuctionProps> = ({
                 <LightMode>
                   <Web3Button
                     contractAddress={contract?.getAddress() || ""}
-                    accentColor={accentColor}
-                    colorMode={colorScheme}
+                    style={{
+                      backgroundColor: accentColor,
+                    }}
+                    theme={colorScheme}
                     isDisabled={
                       parseFloat(bid) <
                       parseFloat(valuesFormatted.mimimumBidNumber.toString())
@@ -264,8 +266,10 @@ const EnglishAuctionComponent: React.FC<EnglishAuctionProps> = ({
                   <LightMode>
                     <Web3Button
                       contractAddress={contract?.getAddress() || ""}
-                      accentColor={accentColor}
-                      colorMode={colorScheme}
+                      style={{
+                        backgroundColor: accentColor,
+                      }}
+                      theme={colorScheme}
                       action={() =>
                         contract?.englishAuctions.buyoutAuction(listing.id)
                       }
@@ -509,8 +513,10 @@ const DirectListingComponent: React.FC<DirectListingProps> = ({
         <LightMode>
           <Web3Button
             contractAddress={contract?.getAddress() || ""}
-            accentColor={accentColor}
-            colorMode={colorScheme}
+            style={{
+              backgroundColor: accentColor,
+            }}
+            theme={colorScheme}
             isDisabled={!canClaim}
             action={() =>
               contract?.directListings.buyFromListing(listing.id, quantity)

src/embeds/marketplace.tsx

@@ -55,7 +55,7 @@ interface MarketplaceEmbedProps {
   rpcUrl?: string;
   contractAddress: string;
   listingId: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
   primaryColor: string;
   secondaryColor: string;
 }
@@ -66,7 +66,7 @@ interface BuyPageProps {
   isLoading?: boolean;
   primaryColor: string;
   secondaryColor: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
 }
 
 interface AuctionListingProps extends BuyPageProps {
@@ -212,8 +212,10 @@ const AuctionListingComponent: React.FC<AuctionListingProps> = ({
                 <LightMode>
                   <Web3Button
                     contractAddress={contract?.getAddress() || ""}
-                    accentColor={accentColor}
-                    colorMode={colorScheme}
+                    style={{
+                      backgroundColor: accentColor,
+                    }}
+                    theme={colorScheme}
                     isDisabled={
                       parseFloat(bid) <
                       parseFloat(valuesFormatted.mimimumBidNumber.toString())
@@ -259,8 +261,10 @@ const AuctionListingComponent: React.FC<AuctionListingProps> = ({
                   <LightMode>
                     <Web3Button
                       contractAddress={contract?.getAddress() || ""}
-                      accentColor={accentColor}
-                      colorMode={colorScheme}
+                      style={{
+                        backgroundColor: accentColor,
+                      }}
+                      theme={colorScheme}
                       action={() => contract?.buyoutListing(listing.id)}
                       onSuccess={() => {
                         toast({
@@ -502,8 +506,10 @@ const DirectListingComponent: React.FC<DirectListingProps> = ({
         <LightMode>
           <Web3Button
             contractAddress={contract?.getAddress() || ""}
-            accentColor={accentColor}
-            colorMode={colorScheme}
+            style={{
+              backgroundColor: accentColor,
+            }}
+            theme={colorScheme}
             isDisabled={!canClaim}
             action={() => contract?.buyoutListing(listing.id, quantity)}
             onSuccess={() => {

src/shared/claim-button-erc1155.tsx

@@ -33,7 +33,7 @@ interface ClaimButtonProps {
   contract?: Exclude<DropContract, TokenDrop | SignatureDrop | NFTDrop>;
   tokenId: BigNumberish;
   primaryColor: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
 }
 
 export const ERC1155ClaimButton: React.FC<ClaimButtonProps> = ({
@@ -296,11 +296,13 @@ export const ERC1155ClaimButton: React.FC<ClaimButtonProps> = ({
           </Skeleton>
         )}
         <Web3Button
-          colorMode={colorScheme}
+          theme={colorScheme}
           contractAddress={contract?.getAddress() || ""}
           action={(cntr) => cntr.erc1155.claim(tokenId, quantity)}
           isDisabled={!canClaim || buttonLoading}
-          accentColor={accentColor}
+          style={{
+            backgroundColor: accentColor,
+          }}
           onError={(err) => {
             console.error(err);
             toast({

src/shared/claim-button-erc20.tsx

@@ -32,7 +32,7 @@ import chakraTheme from "./theme";
 interface ClaimButtonProps {
   contract?: Exclude<DropContract, EditionDrop | SignatureDrop | NFTDrop>;
   primaryColor: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
 }
 
 export const ERC20ClaimButton: React.FC<ClaimButtonProps> = ({
@@ -289,11 +289,13 @@ export const ERC20ClaimButton: React.FC<ClaimButtonProps> = ({
           </Skeleton>
         )}
         <Web3Button
-          colorMode={colorScheme}
+          theme={colorScheme}
           contractAddress={contract?.getAddress() || ""}
           action={(cntr) => cntr.erc20.claim(quantity)}
           isDisabled={!canClaim || buttonLoading}
-          accentColor={accentColor}
+          style={{
+            backgroundColor: accentColor,
+          }}
           onError={(err) => {
             console.error(err);
             toast({

src/shared/claim-button-erc721.tsx

@@ -1,5 +1,4 @@
 import {
-  ColorMode,
   Flex,
   NumberDecrementStepper,
   NumberIncrementStepper,
@@ -33,7 +32,7 @@ import chakraTheme from "./theme";
 interface ClaimButtonProps {
   contract?: Exclude<DropContract, TokenDrop | EditionDrop>;
   primaryColor: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
 }
 
 export const ERC721ClaimButton: React.FC<ClaimButtonProps> = ({
@@ -291,11 +290,14 @@ export const ERC721ClaimButton: React.FC<ClaimButtonProps> = ({
           </Skeleton>
         )}
         <Web3Button
-          colorMode={colorScheme}
+          style={{
+            backgroundColor: accentColor,
+            color: "white",
+          }}
+          theme={colorScheme}
           contractAddress={contract?.getAddress() || ""}
           action={(cntr) => cntr.erc721.claim(quantity)}
           isDisabled={!canClaim || buttonLoading}
-          accentColor={accentColor}
           onError={(err) => {
             console.error(err);
             toast({

src/shared/header.tsx

@@ -1,21 +1,13 @@
 import { Stack } from "@chakra-ui/react";
 import { ConnectWallet } from "@thirdweb-dev/react";
-import { ColorMode } from "@thirdweb-dev/react/dist/declarations/src/evm/components/theme";
 import React from "react";
-import chakraTheme from "./theme";
 
 interface HeaderProps {
   primaryColor: string;
-  colorScheme: ColorMode;
+  colorScheme: "light" | "dark";
 }
 
-export const Header: React.FC<HeaderProps> = ({
-  primaryColor,
-  colorScheme,
-}) => {
-  const colors = chakraTheme.colors;
-  const accentColor = colors[primaryColor as keyof typeof colors][500];
-
+export const Header: React.FC<HeaderProps> = ({ colorScheme }) => {
   return (
     <Stack
       as="header"
@@ -28,7 +20,7 @@ export const Header: React.FC<HeaderProps> = ({
       justify="flex-end"
       py={2}
     >
-      <ConnectWallet accentColor={accentColor} colorMode={colorScheme} />
+      <ConnectWallet theme={colorScheme} />
     </Stack>
   );
 };