thirdweb 5.34.4-nightly-b67519aecba8dba28dc87faea72e16d0ce6a4ab8-20240715000324 → 5.35.0-nightly-aadbd33e9d696bd7dd77561fa3f3a0a0fa7747f5-20240716082511

package/src/extensions/airdrop/write/claimERC20.ts

@@ -4,7 +4,7 @@ import {
 } from "../../../constants/addresses.js";
 import type { BaseTransactionOptions } from "../../../transaction/types.js";
 import type { Address } from "../../../utils/address.js";
-import { fetchProofsrERC20 } from "../../../utils/extensions/airdrop/fetch-proofs-erc20.js";
+import { fetchProofsERC20 } from "../../../utils/extensions/airdrop/fetch-proofs-erc20.js";
 import { tokenMerkleRoot } from "../__generated__/Airdrop/read/tokenMerkleRoot.js";
 import { claimERC20 as generatedClaimERC20 } from "../__generated__/Airdrop/write/claimERC20.js";
 
@@ -67,7 +67,7 @@ export function claimERC20(options: BaseTransactionOptions<ClaimERC20Params>) {
         return await getDecimals({ contract: tokenContract });
       })();
 
-      const merkleProof = await fetchProofsrERC20({
+      const merkleProof = await fetchProofsERC20({
         contract: options.contract,
         recipient: options.recipient,
         merkleRoot,

package/src/react/core/hooks/others/useWalletBalance.ts

@@ -1,10 +1,26 @@
-import { queryOptions, useQuery } from "@tanstack/react-query";
+import {
+  type UseQueryOptions,
+  type UseQueryResult,
+  useQuery,
+} from "@tanstack/react-query";
+import type { Chain } from "../../../../chains/types.js";
+import type { Prettify } from "../../../../utils/type-utils.js";
 import {
   type GetWalletBalanceOptions,
+  type GetWalletBalanceResult,
   getWalletBalance,
 } from "../../../../wallets/utils/getWalletBalance.js";
 
-// NOTE: Do not use useConnectUI here - because this hook is also used outside of Connect UI context
+export type UseWalletBalanceOptions = Prettify<
+  Omit<GetWalletBalanceOptions, "address" | "chain"> & {
+    address: string | undefined;
+    chain: Chain | undefined;
+  }
+>;
+export type UseWalletBalanceQueryOptions = Omit<
+  UseQueryOptions<GetWalletBalanceResult>,
+  "queryFn" | "queryKey" | "enabled"
+>;
 
 /**
  * Fetch the balance of a wallet for a specific token.
@@ -24,9 +40,13 @@ import {
  * ```
  * @wallet
  */
-export function useWalletBalance(options: Partial<GetWalletBalanceOptions>) {
+export function useWalletBalance(
+  options: UseWalletBalanceOptions,
+  queryOptions?: UseWalletBalanceQueryOptions,
+): UseQueryResult<GetWalletBalanceResult> {
   const { chain, address, tokenAddress, client } = options;
-  const query = queryOptions({
+  return useQuery({
+    ...queryOptions,
     queryKey: [
       "walletBalance",
       chain?.id || -1,
@@ -43,9 +63,13 @@ export function useWalletBalance(options: Partial<GetWalletBalanceOptions>) {
       if (!address) {
         throw new Error("address is required");
       }
-      return getWalletBalance({ chain, client, address, tokenAddress });
+      return getWalletBalance({
+        chain,
+        client,
+        address,
+        tokenAddress,
+      });
     },
     enabled: !!chain && !!client && !!address,
   });
-  return useQuery(query);
 }

package/src/react/core/hooks/transaction/transaction-button-utils.ts

@@ -100,6 +100,13 @@ export type TransactionButtonProps = {
    * The theme to use for the button
    */
   theme?: "dark" | "light" | Theme;
+
+  /**
+   * Set the type attribute of the button element.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/type)
+   */
+  type?: HTMLButtonElement["type"];
 };
 
 export const useTransactionButtonMutation = (

package/src/react/core/utils/wallet.ts

@@ -72,15 +72,19 @@ export function useConnectedWalletDetails(
  * Returns the wallet info for the provided wallet id.
  * @wallet
  */
-export function useWalletInfo(id: WalletId) {
+export function useWalletInfo(id: WalletId | undefined) {
   return useQuery<WalletInfo>({
     queryKey: ["wallet-info", id],
     queryFn: () => {
+      if (!id) {
+        throw new Error("Wallet id is required");
+      }
       return getWalletInfo(id, false);
     },
     retry: false,
     refetchOnWindowFocus: false,
     refetchOnMount: false,
+    enabled: !!id,
   });
 }
 
@@ -88,14 +92,18 @@ export function useWalletInfo(id: WalletId) {
  * Returns the wallet image for the provided wallet id.
  * @wallet
  */
-export function useWalletImage(id: WalletId) {
+export function useWalletImage(id: WalletId | undefined) {
   return useQuery({
     queryKey: ["wallet-image", id],
     queryFn: () => {
+      if (!id) {
+        throw new Error("Wallet id is required");
+      }
       return getWalletInfo(id, true);
     },
     retry: false,
     refetchOnWindowFocus: false,
     refetchOnMount: false,
+    enabled: !!id,
   });
 }

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

@@ -7,8 +7,6 @@ import { genericTokenIcon } from "../../../core/utils/socialIcons.js";
 import { ChainIcon } from "./ChainIcon.js";
 import { RNImage } from "./RNImage.js";
 
-// Note: Must not use useConnectUI here
-
 /**
  * @internal
  */

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

@@ -10,6 +10,7 @@ import {
   View,
 } from "react-native";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
@@ -43,6 +44,7 @@ export function ConnectButton(props: ConnectButtonProps) {
   const wallet = useActiveWallet();
   const account = useActiveAccount();
   const status = useActiveWalletConnectionStatus();
+  const siweAuth = useSiweAuth(wallet, props.auth);
   useAutoConnect(props);
 
   const fadeAnim = useRef(new Animated.Value(0)); // For background opacity
@@ -84,10 +86,14 @@ export function ConnectButton(props: ConnectButtonProps) {
       slideAnim.current.setValue(screenHeight);
     });
   }, []);
+  const needsAuth = siweAuth.requiresAuth && !siweAuth.isLoggedIn;
+  const isConnected = wallet && account;
+  const isConnectedAndNotAuth = isConnected && needsAuth;
+  const isConnectedAndAuth = isConnected && !needsAuth;
 
   return (
     <View>
-      {wallet && account ? (
+      {isConnectedAndAuth ? (
         <ConnectedButton
           openModal={() => openModal()}
           onClose={closeModal}
@@ -97,7 +103,10 @@ export function ConnectButton(props: ConnectButtonProps) {
         />
       ) : (
         <ThemedButton theme={theme} onPress={() => openModal()}>
-          {status === "connecting" ? (
+          {status === "connecting" ||
+          siweAuth.isLoggingIn ||
+          siweAuth.isLoading ||
+          siweAuth.isLoggingOut ? (
             <>
               <ThemedSpinner color={theme.colors.primaryButtonText} />
             </>
@@ -107,7 +116,9 @@ export function ConnectButton(props: ConnectButtonProps) {
               type="defaultSemiBold"
               style={{ color: theme.colors.primaryButtonText }}
             >
-              {props.connectButton?.label || "Connect Wallet"}
+              {isConnectedAndNotAuth
+                ? props.signInButton?.label || "Sign In"
+                : props.connectButton?.label || "Connect Wallet"}
             </ThemedText>
           )}
         </ThemedButton>
@@ -129,7 +140,7 @@ export function ConnectButton(props: ConnectButtonProps) {
           >
             <Pressable style={styles.dismissArea} onPress={closeModal} />
             <View style={styles.bottomSheetContainer}>
-              {wallet && account ? (
+              {isConnectedAndAuth ? (
                 <ConnectedModal
                   {...props}
                   theme={theme}
@@ -144,6 +155,7 @@ export function ConnectButton(props: ConnectButtonProps) {
                   theme={theme}
                   onClose={closeModal}
                   containerType="modal"
+                  siweAuth={siweAuth}
                 />
               )}
             </View>

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

@@ -6,11 +6,13 @@ import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/typ
 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 { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEmbedProps.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
+import { useDisconnect } from "../../hooks/wallets/useDisconnect.js";
 import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 import { type ContainerType, Header } from "../components/Header.js";
@@ -19,7 +21,7 @@ import {
   WalletImage,
   getAuthProviderImage,
 } from "../components/WalletImage.js";
-import { ThemedButtonWithIcon } from "../components/button.js";
+import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
 import { Spacer } from "../components/spacer.js";
 import { ThemedText } from "../components/text.js";
 import { ThemedView } from "../components/view.js";
@@ -34,7 +36,8 @@ export type ModalState =
   | { screen: "connecting"; wallet: Wallet; authMethod?: InAppWalletAuth }
   | { screen: "error"; error: string }
   | { screen: "otp"; auth: MultiStepAuthProviderType; wallet: Wallet<"inApp"> }
-  | { screen: "external_wallets" };
+  | { screen: "external_wallets" }
+  | { screen: "auth" };
 
 /**
  * A component that allows the user to connect their wallet.
@@ -57,12 +60,20 @@ export type ModalState =
 export function ConnectEmbed(props: ConnectEmbedProps) {
   const theme = parseTheme(props.theme);
   const wallet = useActiveWallet();
+  const siweAuth = useSiweAuth(wallet, props.auth);
+  const needsAuth = siweAuth.requiresAuth && !siweAuth.isLoggedIn;
+  const isConnected = wallet && !needsAuth;
   const adaptedProps = {
     ...props,
     connectModal: { ...props },
   } as ConnectButtonProps;
-  return wallet ? null : (
-    <ConnectModal {...adaptedProps} theme={theme} containerType="embed" />
+  return isConnected ? null : (
+    <ConnectModal
+      {...adaptedProps}
+      theme={theme}
+      containerType="embed"
+      siweAuth={siweAuth}
+    />
   );
 }
 
@@ -71,6 +82,7 @@ export function ConnectModal(
     theme: Theme;
     onClose?: () => void;
     containerType: ContainerType;
+    siweAuth: ReturnType<typeof useSiweAuth>;
   },
 ) {
   const {
@@ -80,8 +92,20 @@ export function ConnectModal(
     accountAbstraction,
     onConnect,
     onClose,
+    siweAuth,
   } = props;
-  const [modalState, setModalState] = useState<ModalState>({ screen: "base" });
+  const wallet = useActiveWallet();
+  const needsAuth = wallet && siweAuth.requiresAuth && !siweAuth.isLoggedIn;
+  const [modalState, setModalState] = useState<ModalState>(
+    needsAuth ? { screen: "auth" } : { screen: "base" },
+  );
+  const wallets = props.wallets || getDefaultWallets(props);
+  const inAppWallet = wallets.find((wallet) => wallet.id === "inApp") as
+    | Wallet<"inApp">
+    | undefined;
+  const externalWallets = wallets.filter((wallet) => wallet.id !== "inApp");
+  const showBranding = props.connectModal?.showThirdwebBranding !== false;
+
   const connector = useCallback(
     async (args: {
       wallet: Wallet;
@@ -100,22 +124,30 @@ export function ConnectModal(
           accountAbstraction,
           onConnect,
         });
-        onClose?.();
+        if (siweAuth.requiresAuth && !siweAuth.isLoggedIn) {
+          // if in-app wallet, signin headlessly
+          // TODO (rn) handle signless smart wallets as well
+          if (w.id === "inApp") {
+            await siweAuth.doLogin();
+            onClose?.();
+          } else {
+            setModalState({
+              screen: "auth",
+            });
+          }
+        } else {
+          onClose?.();
+        }
       } catch (error) {
         setModalState({
           screen: "error",
-          error: (error as Error)?.message || "unknown error",
+          error: (error as Error)?.message || "Unknown error",
         });
       }
     },
-    [client, accountAbstraction, onConnect, onClose],
+    [client, accountAbstraction, onConnect, onClose, siweAuth],
   );
-  const wallets = props.wallets || getDefaultWallets(props);
-  const inAppWallet = wallets.find((wallet) => wallet.id === "inApp") as
-    | Wallet<"inApp">
-    | undefined;
-  const externalWallets = wallets.filter((wallet) => wallet.id !== "inApp");
-  const showBranding = props.connectModal?.showThirdwebBranding !== false;
+
   let content: JSX.Element;
 
   switch (modalState.screen) {
@@ -192,7 +224,7 @@ export function ConnectModal(
           ) : (
             <Spacer size="lg" />
           )}
-          <LoadingView
+          <WalletLoadingView
             theme={theme}
             wallet={modalState.wallet}
             authProvider={modalState.authMethod}
@@ -206,6 +238,37 @@ export function ConnectModal(
       );
       break;
     }
+    case "auth": {
+      content = (
+        <>
+          <Header
+            theme={theme}
+            onClose={props.onClose}
+            containerType={containerType}
+            onBack={props.onClose}
+            title={props.connectModal?.title || "Sign in"}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="lg" />
+          )}
+          <SignInView
+            theme={theme}
+            siweAuth={siweAuth}
+            onSignIn={() => props.onClose?.()}
+            onError={(error) => setModalState({ screen: "error", error })}
+            onDisconnect={() => setModalState({ screen: "base" })}
+          />
+          {containerType === "modal" ? (
+            <View style={{ flex: 1 }} />
+          ) : (
+            <Spacer size="md" />
+          )}
+        </>
+      );
+      break;
+    }
     case "error": {
       content = (
         <>
@@ -319,11 +382,15 @@ export function ConnectModal(
   );
 }
 
-function LoadingView({
+function WalletLoadingView({
   theme,
   wallet,
   authProvider,
-}: { theme: Theme; wallet: Wallet; authProvider?: InAppWalletAuth }) {
+}: {
+  theme: Theme;
+  wallet: Wallet;
+  authProvider?: InAppWalletAuth;
+}) {
   const walletInfo = useWalletInfo(wallet.id);
   return (
     <View
@@ -335,7 +402,7 @@ function LoadingView({
         paddingVertical: spacing.xl,
       }}
     >
-      <WalletLoadingThumbnail theme={theme} imageSize={100}>
+      <WalletLoadingThumbnail theme={theme} imageSize={100} animate={true}>
         {authProvider ? (
           <View
             style={{
@@ -363,13 +430,108 @@ function LoadingView({
       <Spacer size="sm" />
       <ThemedText theme={theme} type="subtext">
         {authProvider
-          ? `Sign into your ${capitalizeFirstLetter(authProvider)} account`
+          ? `Signing into your ${capitalizeFirstLetter(authProvider)} account`
           : `Accept the connection request in ${walletInfo.data?.name}`}
       </ThemedText>
     </View>
   );
 }
 
+function SignInView({
+  theme,
+  siweAuth,
+  onSignIn,
+  onError,
+  onDisconnect,
+}: {
+  theme: Theme;
+  siweAuth: ReturnType<typeof useSiweAuth>;
+  onSignIn: () => void;
+  onError: (error: string) => void;
+  onDisconnect: () => void;
+}) {
+  const wallet = useActiveWallet();
+  const walletInfo = useWalletInfo(wallet?.id);
+  const { disconnect } = useDisconnect();
+  const isSigningIn = siweAuth.isLoggingIn || siweAuth.isLoading;
+  return (
+    wallet && (
+      <View
+        style={{
+          flexDirection: "column",
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          padding: spacing.xl,
+        }}
+      >
+        <WalletLoadingThumbnail
+          theme={theme}
+          imageSize={100}
+          animate={isSigningIn}
+        >
+          <WalletImage theme={theme} size={90} wallet={wallet} />
+        </WalletLoadingThumbnail>
+        <Spacer size="xl" />
+        <ThemedText theme={theme} type="subtitle">
+          {"Complete sign in"}
+        </ThemedText>
+        <Spacer size="xs" />
+        <ThemedText theme={theme} type="subtext">
+          Sign login request in {walletInfo.data?.name} to continue
+        </ThemedText>
+        <Spacer size="xl" />
+        <ThemedButton
+          theme={theme}
+          variant="accent"
+          disabled={isSigningIn}
+          style={{ width: "100%" }}
+          onPress={async () => {
+            try {
+              await siweAuth.doLogin();
+              onSignIn();
+            } catch (e) {
+              onError((e as Error)?.message || "Unknown error");
+            }
+          }}
+        >
+          <ThemedText
+            theme={theme}
+            type="defaultSemiBold"
+            style={{
+              color: theme.colors.accentButtonText,
+            }}
+          >
+            Sign Login Request
+          </ThemedText>
+        </ThemedButton>
+        <Spacer size="md" />
+        <ThemedButton
+          theme={theme}
+          variant="secondary"
+          disabled={isSigningIn}
+          style={{ width: "100%" }}
+          onPress={async () => {
+            disconnect(wallet);
+            siweAuth.doLogout();
+            onDisconnect();
+          }}
+        >
+          <ThemedText
+            theme={theme}
+            type="defaultSemiBold"
+            style={{
+              color: theme.colors.accentButtonText,
+            }}
+          >
+            Disconnect
+          </ThemedText>
+        </ThemedButton>
+      </View>
+    )
+  );
+}
+
 function OrDivider({ theme }: { theme: Theme }) {
   return (
     <View

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

@@ -5,6 +5,7 @@ import { getContract } from "../../../../contract/contract.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
+import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainName } from "../../../core/hooks/others/useChainQuery.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
@@ -290,12 +291,14 @@ const ViewFunds = (props: ConnectedModalPropsInner) => {
 const DisconnectWallet = (props: ConnectedModalProps) => {
   const { wallet, theme, onClose } = props;
   const { disconnect } = useDisconnect();
+  const siweAuth = useSiweAuth(wallet, props.auth);
   return (
     <TouchableOpacity
       style={styles.walletMenuRow}
       onPress={() => {
         onClose?.();
         disconnect(wallet);
+        siweAuth.doLogout();
       }}
     >
       <RNImage

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

@@ -14,6 +14,7 @@ interface Props {
   children?: React.ReactNode;
   imageSize: number;
   showError?: boolean;
+  animate: boolean;
 }
 
 function WalletLoadingThumbnail({
@@ -21,10 +22,12 @@ function WalletLoadingThumbnail({
   children,
   showError,
   imageSize,
+  animate,
 }: Props) {
   const spinValue = useRef(new Animated.Value(0));
 
   useEffect(() => {
+    if (!animate) return;
     const animation = Animated.timing(spinValue.current, {
       toValue: 1,
       duration: 1150,
@@ -38,7 +41,7 @@ function WalletLoadingThumbnail({
     return () => {
       loop.stop();
     };
-  }, []);
+  }, [animate]);
 
   const spin = spinValue.current.interpolate({
     inputRange: [0, 1],
@@ -53,18 +56,20 @@ function WalletLoadingThumbnail({
         viewBox={`0 0 ${imageSize + PADDING} ${imageSize + PADDING}`}
         style={styles.loader}
       >
-        <AnimatedRect
-          x="2"
-          y="2"
-          width={imageSize + INTERNAL_PADDING}
-          height={imageSize + INTERNAL_PADDING}
-          rx={15}
-          stroke={showError ? "transparent" : theme.colors.accentButtonBg}
-          strokeWidth={3}
-          fill="transparent"
-          strokeDasharray={"100 300"}
-          strokeDashoffset={spin}
-        />
+        {animate && (
+          <AnimatedRect
+            x="2"
+            y="2"
+            width={imageSize + INTERNAL_PADDING}
+            height={imageSize + INTERNAL_PADDING}
+            rx={15}
+            stroke={showError ? "transparent" : theme.colors.accentButtonBg}
+            strokeWidth={3}
+            fill="transparent"
+            strokeDasharray={"100 300"}
+            strokeDashoffset={spin}
+          />
+        )}
       </Svg>
       {showError && (
         <View

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

@@ -536,7 +536,9 @@ function DetailsModal(props: {
           >
             <CoinsIcon size={iconSize.md} />
             <Text color="primaryText">
-              {props.supportedNFTs ? "View Assets" : "View Funds"}
+              {props.supportedNFTs
+                ? locale.viewFunds.viewAssets
+                : locale.viewFunds.title}
             </Text>
           </MenuButton>
 
@@ -550,7 +552,7 @@ function DetailsModal(props: {
             }}
           >
             <OutlineWalletIcon size={iconSize.md} />
-            <Text color="primaryText">Manage Wallet</Text>
+            <Text color="primaryText">{props.locale.manageWallet.title}</Text>
           </MenuButton>
 
           {/* Switch to Personal Wallet  */}
@@ -702,6 +704,7 @@ function DetailsModal(props: {
           }}
           setScreen={setScreen}
           client={client}
+          connectLocale={locale}
         />
       );
     } else {
@@ -713,6 +716,7 @@ function DetailsModal(props: {
             setScreen("main");
           }}
           client={client}
+          connectLocale={locale}
         />
       );
     }
@@ -725,6 +729,7 @@ function DetailsModal(props: {
           setScreen("main");
         }}
         client={client}
+        connectLocale={locale}
       />
     );
   } else if (screen === "view-tokens") {
@@ -735,6 +740,7 @@ function DetailsModal(props: {
           setScreen("main");
         }}
         client={client}
+        connectLocale={locale}
       />
     );
   } else if (screen === "private-key") {

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

@@ -330,8 +330,6 @@ export function NetworkSelectorContent(props: NetworkSelectorContentProps) {
             chains: [c],
           });
         }
-
-        return filteredChainSectionsValue;
       }
 
       return filteredChainSectionsValue;
@@ -464,6 +462,7 @@ export function NetworkSelectorContent(props: NetworkSelectorContentProps) {
               variant="link"
               onClick={() => {
                 onCustomClick();
+                props.closeModal();
               }}
               style={{
                 display: "flex",