thirdweb 5.32.1 → 5.32.2-nightly-a6ed6e66dae7f2fa239c76a57e93b545e5d8da8d-20240704000330

package/dist/types/react/native/ui/connect/WalletLoadingThumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletLoadingThumbnail.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/ui/connect/WalletLoadingThumbnail.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAQlE,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iBAAS,sBAAsB,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,KAAK,8CA8DP;AAYD,eAAe,sBAAsB,CAAC"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.32.1";
+export declare const version = "5.32.2-nightly-a6ed6e66dae7f2fa239c76a57e93b545e5d8da8d-20240704000330";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,2EAA2E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.32.1",
+  "version": "5.32.2-nightly-a6ed6e66dae7f2fa239c76a57e93b545e5d8da8d-20240704000330",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/adapters/ethers5.ts

@@ -339,7 +339,7 @@ export async function toEthersSigner(
       if (!account.sendTransaction) {
         throw new Error("Account does not support sendTransaction");
       }
-      const awaitedTx = await ethers.utils.resolveProperties(transaction);
+      const awaitedTx = await this.populateTransaction(transaction);
       const alignedTx = await alignTxFromEthers(awaitedTx, ethers);
       const tx = prepareTransaction({
         client: client,
@@ -364,7 +364,7 @@ export async function toEthersSigner(
         chainId: tx.chain.id,
         from: account.address,
         data: alignedTx.data ?? "0x",
-        nonce: alignedTx.nonce ?? -1,
+        nonce: alignedTx.nonce ?? 0,
         value: ethers.BigNumber.from(alignedTx.value ?? 0),
         gasLimit: ethers.BigNumber.from(alignedTx.gas ?? 0),
         // biome-ignore lint/style/noNonNullAssertion: TODO: fix later

package/src/contract/verification/index.ts

@@ -16,6 +16,7 @@ type VerifyContractOptions = {
   explorerApiUrl: string;
   explorerApiKey: string;
   encodedConstructorArgs?: string;
+  type?: "etherscan" | "blockscoutV1" | "blockscoutV2" | "routescan";
 };
 
 /**
@@ -105,39 +106,71 @@ export async function verifyContract(
   const targets = Object.keys(compilationTarget);
   const contractPath = targets[0];
 
-  const encodedArgs = options.encodedConstructorArgs
-    ? options.encodedConstructorArgs
-    : await fetchConstructorParams({
-        abi: compilerMetadata?.metadata?.output?.abi || [],
-        contract: options.contract,
-        explorerApiUrl: options.explorerApiUrl,
-        explorerApiKey: options.explorerApiKey,
-      });
-
-  const requestBody: Record<string, string> = {
-    apikey: options.explorerApiKey,
-    module: "contract",
-    action: "verifysourcecode",
-    contractaddress: options.contract.address,
-    sourceCode: JSON.stringify(compilerInput),
-    codeformat: "solidity-standard-json-input",
-    contractname: `${contractPath}:${compilerMetadata.name}`,
-    compilerversion: `v${compilerMetadata.metadata.compiler.version}`,
-    constructorArguements: encodedArgs,
-  };
+  if (options.type === "blockscoutV2") {
+    const metadataBlob = new Blob([JSON.stringify(compilerInput)], {
+      type: "application/json",
+    });
+    const formData = new FormData();
+    formData.append("address_hash", options.contract.address);
+    formData.append(
+      "contract_name",
+      `${contractPath}:${compilerMetadata.name}`,
+    );
+    formData.append(
+      "compiler_version",
+      `v${compilerMetadata.metadata.compiler.version}`,
+    );
+    formData.append("autodetect_constructor_args", "true");
+    formData.append("files[0]", metadataBlob, "metadata.json");
+
+    const result = await fetch(
+      `${options.explorerApiUrl}/v2/smart-contracts/${options.contract.address.toLowerCase()}/verification/via/standard-input`,
+      {
+        method: "POST",
+        body: formData,
+      },
+    );
+    const data = await result.json();
 
-  const parameters = new URLSearchParams({ ...requestBody });
-  const result = await fetch(options.explorerApiUrl, {
-    method: "POST",
-    headers: { "Content-Type": "application/x-www-form-urlencoded" },
-    body: parameters.toString(),
-  });
+    if (data.message) {
+      return data.message;
+    } else {
+      throw new Error(`${data}`);
+    }
+  } else {
+    const encodedArgs = options.encodedConstructorArgs
+      ? options.encodedConstructorArgs
+      : await fetchConstructorParams({
+          abi: compilerMetadata?.metadata?.output?.abi || [],
+          contract: options.contract,
+          explorerApiUrl: options.explorerApiUrl,
+          explorerApiKey: options.explorerApiKey,
+        });
 
-  const data = await result.json();
-  if (data.status === RequestStatus.OK) {
-    return data.result;
+    const requestBody: Record<string, string> = {
+      apikey: options.explorerApiKey,
+      module: "contract",
+      action: "verifysourcecode",
+      contractaddress: options.contract.address,
+      sourceCode: JSON.stringify(compilerInput),
+      codeformat: "solidity-standard-json-input",
+      contractname: `${contractPath}:${compilerMetadata.name}`,
+      compilerversion: `v${compilerMetadata.metadata.compiler.version}`,
+      constructorArguements: encodedArgs,
+    };
+
+    const parameters = new URLSearchParams({ ...requestBody });
+    const result = await fetch(options.explorerApiUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: parameters.toString(),
+    });
+    const data = await result.json();
+    if (data.status === RequestStatus.OK) {
+      return data.result;
+    }
+    throw new Error(`${data.result}`);
   }
-  throw new Error(`${data.result}`);
 }
 
 const VerificationStatus = {

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

@@ -18,13 +18,13 @@ export function useConnectCore(
       // reset error state
       setError(null);
       if (typeof walletOrFn !== "function") {
-        return connect(walletOrFn, options);
+        return await connect(walletOrFn, options);
       }
 
       setIsConnecting(true);
       try {
         const w = await walletOrFn();
-        return connect(w, options);
+        return await connect(w, options);
       } catch (e) {
         console.error(e);
         setError(e as Error);

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

@@ -42,26 +42,7 @@ export const WalletImage = (props: {
         (wallet.id === "inApp" || wallet.id === "smart")
       ) {
         const lastAuthProvider = await getLastAuthProvider(nativeLocalStorage);
-        switch (lastAuthProvider) {
-          case "phone":
-            imageData = PHONE_ICON;
-            break;
-          case "email":
-            imageData = EMAIL_ICON;
-            break;
-          case "google":
-            imageData = GOOGLE_ICON;
-            break;
-          case "apple":
-            imageData = APPLE_ICON;
-            break;
-          case "facebook":
-            imageData = FACEBOOK_ICON;
-            break;
-          default:
-            imageData = WALLET_ICON;
-            break;
-        }
+        imageData = getAuthProviderImage(lastAuthProvider);
         return imageData;
       }
       try {
@@ -79,3 +60,20 @@ export const WalletImage = (props: {
   const data = ensAvatar || imageData || WALLET_ICON;
   return <RNImage theme={props.theme} data={data} size={size} />;
 };
+
+export function getAuthProviderImage(lastAuthProvider: string | null): string {
+  switch (lastAuthProvider) {
+    case "phone":
+      return PHONE_ICON;
+    case "email":
+      return EMAIL_ICON;
+    case "google":
+      return GOOGLE_ICON;
+    case "apple":
+      return APPLE_ICON;
+    case "facebook":
+      return FACEBOOK_ICON;
+    default:
+      return WALLET_ICON;
+  }
+}

package/src/react/native/ui/connect/ConnectButton.tsx

@@ -138,17 +138,6 @@ export function ConnectButton(props: ConnectButtonProps) {
                   wallet={wallet}
                   account={account}
                 />
-              ) : status === "connecting" ? (
-                <View
-                  style={{
-                    flexDirection: "column",
-                    flex: 1,
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
-                  <ThemedSpinner color={theme.colors.primaryText} size={32} />
-                </View>
               ) : (
                 <ConnectModal
                   {...props}

package/src/react/native/ui/connect/ConnectModal.tsx

@@ -1,28 +1,39 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { SvgXml } from "react-native-svg";
 import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/type.js";
+import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEmbedProps.js";
 import { genericWalletIcon } from "../../../core/utils/socialIcons.js";
+import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useConnect } from "../../hooks/wallets/useConnect.js";
+import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 import { type ContainerType, Header } from "../components/Header.js";
+import { RNImage } from "../components/RNImage.js";
+import {
+  WalletImage,
+  getAuthProviderImage,
+} from "../components/WalletImage.js";
 import { ThemedButtonWithIcon } from "../components/button.js";
 import { Spacer } from "../components/spacer.js";
 import { ThemedText } from "../components/text.js";
 import { ThemedView } from "../components/view.js";
 import { TW_ICON } from "../icons/svgs.js";
+import { ErrorView } from "./ErrorView.js";
 import { ExternalWalletsList } from "./ExternalWalletsList.js";
 import { InAppWalletUI, OtpLogin } from "./InAppWalletUI.js";
+import WalletLoadingThumbnail from "./WalletLoadingThumbnail.js";
 
 export type ModalState =
   | { screen: "base" }
+  | { screen: "connecting"; wallet: Wallet; authMethod?: InAppWalletAuth }
+  | { screen: "error"; error: string }
   | { screen: "otp"; auth: MultiStepAuthProviderType; wallet: Wallet<"inApp"> }
   | { screen: "external_wallets" };
 
@@ -63,17 +74,44 @@ export function ConnectModal(
     containerType: ContainerType;
   },
 ) {
-  const { theme, client, containerType, accountAbstraction, onConnect } = props;
-  const connectMutation = useConnect({
+  const {
+    theme,
     client,
+    containerType,
     accountAbstraction,
-    onConnect: (wallet) => {
-      props.onClose?.();
-      onConnect?.(wallet);
+    onConnect,
+    onClose,
+  } = props;
+  const [modalState, setModalState] = useState<ModalState>({ screen: "base" });
+  const connector = useCallback(
+    async (args: {
+      wallet: Wallet;
+      connectFn: () => Promise<Wallet>;
+      authMethod?: InAppWalletAuth;
+    }) => {
+      setModalState({
+        screen: "connecting",
+        wallet: args.wallet,
+        authMethod: args.authMethod,
+      });
+      try {
+        const w = await args.connectFn();
+        await connectionManager.connect(w, {
+          client,
+          accountAbstraction,
+          onConnect,
+        });
+        onClose?.();
+      } catch (error) {
+        setModalState({
+          screen: "error",
+          error: (error as Error)?.message || "unknown error",
+        });
+      }
     },
-  });
+    [client, accountAbstraction, onConnect, onClose],
+  );
   const wallets = props.wallets || getDefaultWallets(props);
-  const [modalState, setModalState] = useState<ModalState>({ screen: "base" });
   const inAppWallet = wallets.find((wallet) => wallet.id === "inApp") as
     | Wallet<"inApp">
     | undefined;
@@ -105,7 +143,7 @@ export function ConnectModal(
               client={client}
               setScreen={setModalState}
               theme={theme}
-              connectMutation={connectMutation}
+              connector={connector}
             />
           </View>
           {containerType === "modal" ? (
@@ -131,9 +169,61 @@ export function ConnectModal(
             theme={theme}
             externalWallets={externalWallets}
             client={client}
-            connectMutation={connectMutation}
+            connector={connector}
+            containerType={containerType}
+          />
+        </>
+      );
+      break;
+    }
+    case "connecting": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
             containerType={containerType}
+            onBack={() => setModalState({ screen: "base" })}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="lg" />
+          )}
+          <LoadingView
+            theme={theme}
+            wallet={modalState.wallet}
+            authProvider={modalState.authMethod}
           />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="md" />
+          )}
+        </>
+      );
+      break;
+    }
+    case "error": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+            onBack={() => setModalState({ screen: "base" })}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="lg" />
+          )}
+          <ErrorView theme={theme} title={modalState.error} />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="md" />
+          )}
         </>
       );
       break;
@@ -165,7 +255,7 @@ export function ConnectModal(
                   setScreen={setModalState}
                   client={client}
                   theme={theme}
-                  connectMutation={connectMutation}
+                  connector={connector}
                 />
                 {externalWallets.length > 0 ? (
                   <>
@@ -199,7 +289,7 @@ export function ConnectModal(
                   theme={theme}
                   externalWallets={externalWallets}
                   client={client}
-                  connectMutation={connectMutation}
+                  connector={connector}
                   containerType={containerType}
                 />
               </View>
@@ -225,6 +315,56 @@ export function ConnectModal(
   );
 }
 
+function LoadingView({
+  theme,
+  wallet,
+  authProvider,
+}: { theme: Theme; wallet: Wallet; authProvider?: InAppWalletAuth }) {
+  const walletInfo = useWalletInfo(wallet.id);
+  return (
+    <View
+      style={{
+        flexDirection: "column",
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: spacing.xl,
+      }}
+    >
+      <WalletLoadingThumbnail theme={theme} imageSize={100}>
+        {authProvider ? (
+          <View
+            style={{
+              borderRadius: spacing.md,
+              padding: spacing.xs,
+            }}
+          >
+            <RNImage
+              theme={theme}
+              size={90}
+              data={getAuthProviderImage(authProvider)}
+            />
+          </View>
+        ) : (
+          <WalletImage theme={theme} size={90} wallet={wallet} />
+        )}
+      </WalletLoadingThumbnail>
+      <Spacer size="xl" />
+      <ThemedText theme={theme} type="subtitle">
+        {authProvider
+          ? `Connecting with ${capitalizeFirstLetter(authProvider)}`
+          : "Awaiting confirmation"}
+      </ThemedText>
+      <Spacer size="sm" />
+      <ThemedText theme={theme} type="subtext">
+        {authProvider
+          ? `Sign into your ${capitalizeFirstLetter(authProvider)} account`
+          : `Accept the connection request in ${walletInfo.data?.name}`}
+      </ThemedText>
+    </View>
+  );
+}
+
 function OrDivider({ theme }: { theme: Theme }) {
   return (
     <View
@@ -284,6 +424,11 @@ function PoweredByThirdweb({ theme }: { theme: Theme }) {
   );
 }
 
+function capitalizeFirstLetter(str: string): string {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,

package/src/react/native/ui/connect/ExternalWalletsList.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   Image,
   Linking,
@@ -12,32 +11,33 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useWalletImage, useWalletInfo } from "../../../core/utils/wallet.js";
 import { spacing } from "../../design-system/index.js";
-import type { useConnect } from "../../hooks/wallets/useConnect.js";
 import type { ContainerType } from "../components/Header.js";
 import { Skeleton } from "../components/Skeleton.js";
-import { ThemedSpinner } from "../components/spinner.js";
 import { ThemedText } from "../components/text.js";
 
 export type ExternalWalletsUiProps = {
   theme: Theme;
   client: ThirdwebClient;
-  connectMutation: ReturnType<typeof useConnect>;
+  connector: (args: {
+    wallet: Wallet;
+    connectFn: () => Promise<Wallet>;
+  }) => Promise<void>;
   containerType: ContainerType;
 };
 
 export function ExternalWalletsList(
   props: ExternalWalletsUiProps & { externalWallets: Wallet[] },
 ) {
-  const { connectMutation, client, theme } = props;
-  const [selectedWallet, setSelectedWallet] = useState<Wallet>();
-
+  const { connector, client, theme } = props;
   const connectWallet = (wallet: Wallet) => {
-    setSelectedWallet(wallet);
-    connectMutation.connect(async () => {
-      await wallet.connect({
-        client,
-      });
-      return wallet;
+    connector({
+      wallet,
+      connectFn: async () => {
+        await wallet.connect({
+          client,
+        });
+        return wallet;
+      },
     });
   };
 
@@ -57,9 +57,6 @@ export function ExternalWalletsList(
               wallet={wallet}
               connectWallet={connectWallet}
               theme={theme}
-              isConnecting={
-                connectMutation.isConnecting && wallet.id === selectedWallet?.id
-              }
             />
           ))}
         </View>
@@ -72,32 +69,18 @@ export function ExternalWalletsList(
 function ExternalWalletRow(props: {
   theme: Theme;
   wallet: Wallet;
-  isConnecting: boolean;
   connectWallet: (wallet: Wallet) => void;
 }) {
-  const { wallet, theme, isConnecting, connectWallet } = props;
+  const { wallet, theme, connectWallet } = props;
   const imageQuery = useWalletImage(wallet.id);
   const infoQuery = useWalletInfo(wallet.id);
   return (
     <TouchableOpacity style={styles.row} onPress={() => connectWallet(wallet)}>
       {imageQuery.data ? (
-        isConnecting ? (
-          <View
-            style={{
-              width: 52,
-              height: 52,
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <ThemedSpinner color={theme.colors.primaryText} />
-          </View>
-        ) : (
-          <Image
-            source={{ uri: imageQuery.data ?? "" }}
-            style={{ width: 52, height: 52, borderRadius: 6 }}
-          />
-        )
+        <Image
+          source={{ uri: imageQuery.data ?? "" }}
+          style={{ width: 52, height: 52, borderRadius: 6 }}
+        />
       ) : (
         <Skeleton
           theme={theme}