thirdweb 5.48.0 → 5.48.1-nightly-7ef1c721ef693584d153554d46f2e70e8015b261-20240822000343

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -225,7 +225,7 @@ export async function getTotalTxCostForBuy(
 
     // add 10% extra gas cost to the estimate to ensure user buys enough to cover the tx cost
     return gasCost.wei + bufferCost + (txValue || 0n);
-  } catch (e) {
+  } catch {
     if (from) {
       // try again without passing from
       return await getTotalTxCostForBuy(tx);

package/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -115,7 +115,7 @@ export function useAutoConnectCore(
       try {
         await handleWalletConnection(wallet);
         manager.addConnectedWallet(wallet);
-      } catch (e) {
+      } catch {
         // no-op
       }
     }

package/src/react/core/hooks/wallets/useSendToken.ts

@@ -69,7 +69,7 @@ export function useSendToken(client: ThirdwebClient) {
           client,
           name: receiverAddress,
         });
-      } catch (e) {
+      } catch {
         throw new Error("Failed to resolve address");
       }
 

package/src/react/core/utils/timeoutPromise.test.ts

@@ -58,7 +58,7 @@ describe("timeoutPromise", () => {
     });
     try {
       await timeoutPromise(mockPromise, options);
-    } catch (error) {}
+    } catch {}
     expect(clearTimeoutSpy).toHaveBeenCalled();
     clearTimeoutSpy.mockRestore();
   });

package/src/react/native/ui/components/RNImage.tsx

@@ -33,10 +33,19 @@ function getImage(data: string): {
 
 export const RNImage = (props: ImageInfo) => {
   const { data, size, color, placeholder } = props;
-  if (!data) {
+
+  const imageResult = useMemo(() => {
+    if (!data) {
+      return undefined;
+    }
+    return getImage(data);
+  }, [data]);
+
+  if (!imageResult) {
     return null;
   }
-  const { image, type } = useMemo(() => getImage(data), [data]);
+
+  const { image, type } = imageResult;
   switch (type) {
     case "url":
     case "image":

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -349,7 +349,6 @@ export function ConnectButton(props: ConnectButtonProps) {
         }}
         welcomeScreen={props.connectModal?.welcomeScreen}
         size={size}
-        isEmbed={false}
         localeId={props.locale || "en_US"}
         onConnect={props.onConnect}
         recommendedWallets={props.recommendedWallets}

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -276,7 +276,7 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
           connectLocale={localeQuery.data}
           size={modalSize}
           meta={meta}
-          isEmbed={true}
+          header={props.header}
           localeId={props.locale || "en_US"}
           onConnect={props.onConnect}
           recommendedWallets={props.recommendedWallets}
@@ -318,7 +318,13 @@ const ConnectEmbedContent = (props: {
     privacyPolicyUrl?: string;
   };
   size: "compact" | "wide";
-  isEmbed: boolean;
+  header:
+    | {
+        title?: string;
+        titleIcon?: string;
+      }
+    | true
+    | undefined;
   localeId: LocaleId;
   onConnect: ((wallet: Wallet) => void) | undefined;
   recommendedWallets: Wallet[] | undefined;
@@ -383,10 +389,18 @@ const ConnectEmbedContent = (props: {
         chains={props.chains}
         client={props.client}
         connectLocale={props.connectLocale}
-        meta={props.meta}
+        meta={{
+          ...props.meta,
+          title:
+            typeof props.header === "object" ? props.header.title : undefined,
+          titleIconUrl:
+            typeof props.header === "object"
+              ? props.header.titleIcon
+              : undefined,
+        }}
         size={props.size}
         welcomeScreen={props.welcomeScreen}
-        isEmbed={props.isEmbed}
+        hideHeader={!props.header}
         onConnect={props.onConnect}
         recommendedWallets={props.recommendedWallets}
         showAllWallets={props.showAllWallets}
@@ -431,8 +445,8 @@ export const EmbedContainer = /* @__PURE__ */ StyledDiv<{
     overflow: "hidden",
     fontFamily: theme.fontFamily,
     "& *::selection": {
-      backgroundColor: theme.colors.primaryText,
-      color: theme.colors.modalBg,
+      backgroundColor: theme.colors.selectedTextBg,
+      color: theme.colors.selectedTextColor,
     },
     "& *": {
       boxSizing: "border-box",

package/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx

@@ -37,7 +37,6 @@ type ConnectModalOptions = {
   };
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
-  isEmbed: boolean;
   recommendedWallets: Wallet[] | undefined;
   localeId: LocaleId;
   chain: Chain | undefined;
@@ -142,7 +141,7 @@ const ConnectModal = (props: ConnectModalOptions) => {
         size={props.size}
         welcomeScreen={props.welcomeScreen}
         meta={props.meta}
-        isEmbed={props.isEmbed}
+        hideHeader={false}
         onConnect={props.onConnect}
         recommendedWallets={props.recommendedWallets}
         wallets={props.wallets}

package/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx

@@ -55,7 +55,7 @@ export const ConnectModalContent = (props: {
   welcomeScreen: WelcomeScreen | undefined;
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
-  isEmbed: boolean;
+  hideHeader: boolean;
   recommendedWallets: Wallet[] | undefined;
   chain: Chain | undefined;
   chains: Chain[] | undefined;
@@ -149,7 +149,7 @@ export const ConnectModalContent = (props: {
       setModalVisibility={setModalVisibility}
       client={props.client}
       connectLocale={props.connectLocale}
-      isEmbed={props.isEmbed}
+      hideHeader={props.hideHeader}
       recommendedWallets={props.recommendedWallets}
       accountAbstraction={props.accountAbstraction}
       chain={props.chain}

package/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -71,7 +71,7 @@ export type WalletSelectorProps = {
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
   recommendedWallets: Wallet[] | undefined;
-  isEmbed: boolean;
+  hideHeader: boolean;
   chain: Chain | undefined;
   chains: Chain[] | undefined;
   showAllWallets: boolean | undefined;
@@ -472,7 +472,8 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
     }
   }
 
-  const showHeader = !props.isEmbed || props.modalHeader;
+  // hide the header for embed - unless it's customized
+  const showHeader = !props.hideHeader || props.modalHeader;
 
   return (
     <Container
@@ -515,7 +516,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
               }
         }
       >
-        {!props.modalHeader && props.isEmbed && isWalletGroupExpanded && (
+        {!showHeader && isWalletGroupExpanded && (
           <Container
             flex="row"
             center="y"
@@ -593,6 +594,7 @@ const WalletSelection: React.FC<{
     <WalletList
       style={{
         minHeight: "100%",
+        maxHeight: "370px",
       }}
     >
       {wallets.map((wallet) => {

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts

@@ -155,7 +155,7 @@ export async function getTransactionGasCost(
     // Note: get tx.value AFTER estimateGasCost
     // add 10% extra gas cost to the estimate to ensure user buys enough to cover the tx cost
     return gasCost.wei + bufferCost;
-  } catch (e) {
+  } catch {
     if (from) {
       // try again without passing from
       return await getTransactionGasCost(tx);

package/src/react/web/ui/ConnectWallet/screens/ViewNFTs.tsx

@@ -108,10 +108,6 @@ export function ViewNFTsContent(props: {
   const activeAccount = useActiveAccount();
   const activeChain = useActiveWalletChain();
 
-  if (!activeChain?.id || !activeAccount?.address) {
-    return null;
-  }
-
   const nftList = useMemo(() => {
     const nfts = [];
     if (!props.supportedNFTs) return [];
@@ -131,11 +127,25 @@ export function ViewNFTsContent(props: {
   const results = useQueries({
     queries: nftList.map((nft) => ({
       queryKey: ["readContract", nft.chain.id, nft.address],
-      queryFn: () =>
-        fetchNFTs(props.client, nft.chain, nft.address, activeAccount?.address),
+      queryFn: () => {
+        if (!activeAccount) {
+          throw new Error("No active account");
+        }
+        return fetchNFTs(
+          props.client,
+          nft.chain,
+          nft.address,
+          activeAccount.address,
+        );
+      },
+      enabled: !!activeAccount,
     })),
   });
 
+  if (!activeChain?.id || !activeAccount?.address) {
+    return null;
+  }
+
   return (
     <>
       <Container

package/src/react/web/ui/ConnectWallet/screens/WalletConnectReceiverScreen.tsx

@@ -60,7 +60,7 @@ export function WalletConnectReceiverScreen(props: {
           },
         });
         return client;
-      } catch (e) {
+      } catch {
         setErrorConnecting("Failed to establish WalletConnect connection");
         return;
       }
@@ -164,7 +164,7 @@ export function WalletConnectReceiverScreen(props: {
                           uri: value,
                           walletConnectClient,
                         });
-                      } catch (e) {
+                      } catch {
                         setErrorConnecting(
                           "Error creating WalletConnect session",
                         );

package/src/react/web/ui/ConnectWallet/screens/WalletSwitcherConnectionScreen.tsx

@@ -54,7 +54,7 @@ export function WalletSwitcherConnectionScreen(
       chains={props.chains}
       client={props.client}
       connectLocale={props.connectLocale}
-      isEmbed={props.isEmbed}
+      hideHeader={props.isEmbed}
       isOpen={true}
       meta={{
         showThirdwebBranding: false,

package/src/react/web/ui/ConnectWallet/useConnectModal.tsx

@@ -137,7 +137,6 @@ function Modal(
         meta={meta}
         size={size}
         welcomeScreen={props.welcomeScreen}
-        isEmbed={false}
         localeId={props.locale || "en_US"}
         onConnect={props.onConnect}
         recommendedWallets={props.recommendedWallets}

package/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -103,7 +103,7 @@ export function WalletAuth(props: {
         setModalVisibility={() => {}}
         client={props.client}
         connectLocale={props.locale}
-        isEmbed={false}
+        hideHeader={false}
         recommendedWallets={undefined}
         chain={wallet.getChain()}
         showAllWallets={true}

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -34,6 +34,7 @@ import {
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
 import { Img } from "../../ui/components/Img.js";
+import { Spacer } from "../../ui/components/Spacer.js";
 import { TextDivider } from "../../ui/components/TextDivider.js";
 import { Container } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
@@ -90,6 +91,13 @@ export const ConnectWalletSocialOptions = (
   ) => void;
 
   const themeObj = useCustomTheme();
+  const optionalImageMetadata = useMemo(
+    () =>
+      props.wallet.id === "inApp"
+        ? props.wallet.getConfig()?.metadata?.image
+        : undefined,
+    [props.wallet],
+  );
 
   const loginMethodsLabel = {
     google: locale.signInWithGoogle,
@@ -261,6 +269,19 @@ export const ConnectWalletSocialOptions = (
         position: "relative",
       }}
     >
+      {optionalImageMetadata && (
+        <>
+          <Img
+            client={props.client}
+            src={optionalImageMetadata.src}
+            alt={optionalImageMetadata.alt}
+            width={`${optionalImageMetadata.width}`}
+            height={`${optionalImageMetadata.height}`}
+            style={{ margin: "auto" }}
+          />
+          <Spacer y="xxs" />
+        </>
+      )}
       {/* Social Login */}
       {hasSocialLogins && (
         <Container

package/src/storage/upload/mobile.ts

@@ -77,7 +77,7 @@ export async function uploadBatchMobile(
           let body: any;
           try {
             body = JSON.parse(xhr.responseText);
-          } catch (err) {
+          } catch {
             return reject(
               new Error("Failed to parse JSON from upload response"),
             );

package/src/transaction/read-contract.test.ts

@@ -31,4 +31,34 @@ describe.runIf(process.env.TW_SECRET_KEY)("transaction: read", () => {
       );
     }
   });
+
+  it("should work with string and number, not just bigint", async () => {
+    /**
+     * The following 3 readContracts all result in the same value because
+     * the param is still parsed and encoded properly downstream by `numberToHex`
+     * See this docs for more context: "../utils/encoding/hex.test.js"
+     */
+    const [bigintResult, numberResult, stringResult] = await Promise.all([
+      readContract({
+        contract: DOODLES_CONTRACT,
+        method: "function ownerOf(uint256 tokenId) view returns (address)",
+        params: [1n],
+      }),
+      readContract({
+        contract: DOODLES_CONTRACT,
+        method: "function ownerOf(uint256 tokenId) view returns (address)",
+        // @ts-ignore Intentional
+        params: [1], // <- supposed to be a bigint
+      }),
+      readContract({
+        contract: DOODLES_CONTRACT,
+        method: "function ownerOf(uint256 tokenId) view returns (address)",
+        // @ts-ignore Intentional
+        params: ["1"], // <- supposed to be a bigint
+      }),
+    ]);
+
+    expect(bigintResult === numberResult).toBe(true);
+    expect(bigintResult === stringResult).toBe(true);
+  });
 });

package/src/utils/contract/parse-abi-params.test.ts

@@ -156,5 +156,17 @@ describe("parseAbiParams", () => {
       const result = parseAbiParams(["bytes64"], [value]);
       expect(result).toStrictEqual([value]);
     });
+
+    it("should return a string for type string", () => {
+      const value = "this is a string";
+      const result = parseAbiParams(["string"], [value]);
+      expect(result).toStrictEqual(["this is a string"]);
+    });
+
+    it("should return the value itself if it falls through to the end", () => {
+      const value = { whatever: true };
+      const result = parseAbiParams(["non-existent-type"], [value]);
+      expect(result).toStrictEqual([{ whatever: true }]);
+    });
   });
 });

package/src/utils/contract/parse-abi-params.ts

@@ -32,6 +32,17 @@ export function parseAbiParams(
   constructorParamTypes: string[],
   constructorParamValues: unknown[],
 ): Array<string | bigint | boolean> {
+  /**
+   * Internal Solidity type checklist
+   * 1. tuple, array -> JSON.parse | todo: Recursively parse the content
+   * 2. uint, int -> bigint
+   * 3. address -> string
+   * 4. string -> string
+   * 5. bytes, bytes32 etc. -> string
+   * 6. bool -> boolean
+   * >>> Make sure to return the original value at the end of the function <<<
+   */
+
   // Make sure they have the same length
   if (constructorParamTypes.length !== constructorParamValues.length) {
     throw new Error(
@@ -46,6 +57,9 @@ export function parseAbiParams(
       }
       return value;
     }
+    if (type === "string") {
+      return String(value);
+    }
     if (type === "bytes32") {
       if (!isHex(value)) {
         throw new Error(`${value} is not a valid hex string`);
@@ -86,5 +100,8 @@ export function parseAbiParams(
         "Invalid boolean value. Expecting either 'true' or 'false'",
       );
     }
+
+    // Return the value here if none of the types match
+    return value;
   });
 }

package/src/utils/encoding/hex.test.ts

@@ -8,4 +8,44 @@ describe("hex.ts", () => {
       "0x0000000000000000000000000000000000000000000000000000000000000064",
     );
   });
+
+  /**
+   * This test is put here as a docs for the method `numberToHex` because:
+   *
+   * `numberToHex` can still work with number-convertible strings - even tho it only accepts number or bigint
+   * because there's is one line of code that's converting the param into bigint anyway
+   * ```ts
+   * const value = BigInt(value_);
+   * ```
+   *
+   * As a side effect, the following 3 return the same result:
+   * ```ts
+   * readContract({
+   *   contract,
+   *   method: "function tokenURI(uint256 tokenId) returns (string)",
+   *   params: [1n],
+   * })
+   *
+   * readContract({
+   *   contract,
+   *   method: "function tokenURI(uint256 tokenId) returns (string)",
+   *   // @ts-ignore
+   *   params: [1],
+   * })
+   *
+   * readContract({
+   *   contract,
+   *   method: "function tokenURI(uint256 tokenId) returns (string)",
+   *   // @ts-ignore
+   *   params: ["1"],
+   * })
+   * ```
+   */
+  it("should work with string !!!!", () => {
+    // @ts-ignore Intentional
+    const result = numberToHex("100", { size: 32, signed: false });
+    expect(result).toBe(
+      "0x0000000000000000000000000000000000000000000000000000000000000064",
+    );
+  });
 });

package/src/utils/extensions/airdrop/fetch-proofs-erc1155.ts

@@ -81,7 +81,7 @@ export async function fetchProofsERC1155(options: {
       uri: constructedShardUri,
     });
     shardData = await shard.json();
-  } catch (e) {
+  } catch {
     // if the file can't be fetched it means claimer not in merkle tree
     return null;
   }

package/src/utils/extensions/airdrop/fetch-proofs-erc20.ts

@@ -83,7 +83,7 @@ export async function fetchProofsERC20(options: {
       uri: constructedShardUri,
     });
     shardData = await shard.json();
-  } catch (e) {
+  } catch {
     // if the file can't be fetched it means claimer not in merkle tree
     return null;
   }

package/src/utils/extensions/airdrop/fetch-proofs-erc721.ts

@@ -81,7 +81,7 @@ export async function fetchProofsERC721(options: {
       uri: constructedShardUri,
     });
     shardData = await shard.json();
-  } catch (e) {
+  } catch {
     // if the file can't be fetched it means claimer not in merkle tree
     return null;
   }

package/src/utils/extensions/drops/fetch-proofs-for-claimers.ts

@@ -53,7 +53,7 @@ export async function fetchProofsForClaimer(options: {
       uri: constructedShardUri,
     });
     shardData = await shard.json();
-  } catch (e) {
+  } catch {
     // if the file can't be fetched it means claimer not in merkle tree
     return null;
   }

package/src/utils/nft/fetchTokenMetadata.ts

@@ -63,7 +63,7 @@ export async function fetchTokenMetadata(
           ),
         })
       ).json();
-    } catch (err) {
+    } catch {
       // otherwise attempt the second format
       return await (
         await download({

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.48.0";
+export const version = "5.48.1-nightly-7ef1c721ef693584d153554d46f2e70e8015b261-20240822000343";

package/src/wallets/in-app/native/helpers/auth/middleware.ts

@@ -64,7 +64,7 @@ export async function postAuth({
     try {
       // existing device share
       await getDeviceShare(client.clientId);
-    } catch (e) {
+    } catch {
       const _recoveryCode = await getRecoveryCode(
         storedToken,
         client,
@@ -116,7 +116,7 @@ export async function postAuthUserManaged(
     try {
       // existing device share
       await getDeviceShare(client.clientId);
-    } catch (e) {
+    } catch {
       // trying to recreate device share from recovery code to derive wallet
       try {
         await setUpShareForNewDevice({
@@ -155,7 +155,7 @@ async function getRecoveryCode(
     }
     try {
       return await getCognitoRecoveryPasswordV2(client);
-    } catch (e) {
+    } catch {
       return await getCognitoRecoveryPasswordV1(client).catch(() => {
         throw new Error("Something went wrong getting cognito recovery code");
       });

package/src/wallets/in-app/native/helpers/storage/local.ts

@@ -131,7 +131,7 @@ export async function getWalletUserDetails(
   try {
     const parsed = JSON.parse(result);
     return parsed;
-  } catch (e) {
+  } catch {
     return undefined;
   }
 }

package/src/wallets/in-app/native/helpers/wallet/retrieval.ts

@@ -152,7 +152,7 @@ async function getShares<
     deviceShareToReturn = deviceShare.toRetrieve
       ? (await getDeviceShare(client.clientId)).deviceShare
       : undefined;
-  } catch (e) {
+  } catch {
     throw new Error(DEVICE_SHARE_MISSING_MESSAGE);
   }
 

package/src/wallets/smart/index.ts

@@ -261,7 +261,7 @@ async function createSmartAccount(
           params: [originalMsgHash],
         });
         factorySupports712 = true;
-      } catch (e) {
+      } catch {
         // ignore
       }
 
@@ -349,7 +349,7 @@ async function createSmartAccount(
           params: [originalMsgHash],
         });
         factorySupports712 = true;
-      } catch (e) {
+      } catch {
         // ignore
       }
 

package/src/wallets/utils/chains.ts

@@ -16,7 +16,7 @@ export function getValidPublicRPCUrl(chain: ChainMetadata) {
         url.search = "";
       }
       return url.toString();
-    } catch (e) {
+    } catch {
       return rpc;
     }
   });

package/src/wallets/wallet-connect/receiver/index.ts

@@ -344,7 +344,7 @@ export async function disconnectWalletConnectSession(options: {
         message: "Disconnected",
       },
     });
-  } catch (error) {
+  } catch {
     // ignore, the session doesn't exist already
   }
 }