thirdweb 5.34.4-nightly-88fa60d4ad7ee6ce0a8305ce35e023d1a858ea85-20240716000333 → 5.35.0-nightly-39b329a56e9eb031e1799524d827fdf69a92c854-20240717000718

package/dist/types/utils/extensions/airdrop/fetch-proofs-erc20.d.ts

@@ -1,6 +1,6 @@
 import type { ThirdwebContract } from "../../../contract/contract.js";
 import type { ClaimProofERC20 } from "./types.js";
-export declare function fetchProofsrERC20(options: {
+export declare function fetchProofsERC20(options: {
     contract: ThirdwebContract;
     recipient: string;
     merkleRoot: string;

package/dist/types/utils/extensions/airdrop/fetch-proofs-erc20.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-proofs-erc20.d.ts","sourceRoot":"","sources":["../../../../../src/utils/extensions/airdrop/fetch-proofs-erc20.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAOtE,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,YAAY,CAAC;AAEpB,wBAAsB,iBAAiB,CAAC,OAAO,EAAE;IAC/C,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,CA2ElC"}
+{"version":3,"file":"fetch-proofs-erc20.d.ts","sourceRoot":"","sources":["../../../../../src/utils/extensions/airdrop/fetch-proofs-erc20.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAOtE,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,YAAY,CAAC;AAoCpB,wBAAsB,gBAAgB,CAAC,OAAO,EAAE;IAC9C,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,CA2ElC"}

package/dist/types/utils/extensions/airdrop/fetch-proofs-erc721.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-proofs-erc721.d.ts","sourceRoot":"","sources":["../../../../../src/utils/extensions/airdrop/fetch-proofs-erc721.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMtE,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,YAAY,CAAC;AAEpB,wBAAsB,iBAAiB,CAAC,OAAO,EAAE;IAC/C,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAoEnC"}
+{"version":3,"file":"fetch-proofs-erc721.d.ts","sourceRoot":"","sources":["../../../../../src/utils/extensions/airdrop/fetch-proofs-erc721.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMtE,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,YAAY,CAAC;AAoCpB,wBAAsB,iBAAiB,CAAC,OAAO,EAAE;IAC/C,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAoEnC"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.34.4-nightly-88fa60d4ad7ee6ce0a8305ce35e023d1a858ea85-20240716000333";
+export declare const version = "5.35.0-nightly-39b329a56e9eb031e1799524d827fdf69a92c854-20240717000718";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/wallets/in-app/web/lib/in-app-account.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"in-app-account.d.ts","sourceRoot":"","sources":["../../../../../../src/wallets/in-app/web/lib/in-app-account.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"in-app-account.d.ts","sourceRoot":"","sources":["../../../../../../src/wallets/in-app/web/lib/in-app-account.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.34.4-nightly-88fa60d4ad7ee6ce0a8305ce35e023d1a858ea85-20240716000333",
+  "version": "5.35.0-nightly-39b329a56e9eb031e1799524d827fdf69a92c854-20240717000718",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/exports/extensions/airdrop.ts

@@ -13,6 +13,9 @@ export {
   tokenMerkleRoot,
   type TokenMerkleRootParams,
 } from "../../extensions/airdrop/__generated__/Airdrop/read/tokenMerkleRoot.js";
+export { fetchProofsERC721 } from "../../utils/extensions/airdrop/fetch-proofs-erc721.js";
+export { fetchProofsERC20 } from "../../utils/extensions/airdrop/fetch-proofs-erc20.js";
+export { fetchProofsERC1155 } from "../../utils/extensions/airdrop/fetch-proofs-erc1155.js";
 
 /**
  * Write

package/src/exports/thirdweb.ts

@@ -277,3 +277,8 @@ export {
 
 // re-exports of types
 export type { AbiParameterToPrimitiveType } from "abitype";
+
+export {
+  type VerifyTypedDataParams,
+  verifyTypedData,
+} from "../auth/verify-typed-data.js";

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/pay/buyWithFiat/getPostOnRampQuote.ts

@@ -67,11 +67,8 @@ export async function getPostOnRampQuote({
   return getBuyWithCryptoQuote({
     client,
     intentId: buyWithFiatStatus.intentId,
-    // setting the fromAddress and toAddress same - because post onramp swap can only be done if payer wallet is same as the receiver wallet
-    // TODO: in future - if fromAddress and toAddress are different, we will onramp to payer wallet and then swap to receiver wallet
-    // fiat endpoint should assume this flow and return the quote/status/history accordingly
-    // but for now - we will just not allow doing a fiat flow in Pay UI if payer and receiver wallets are different + requires a swap
-    fromAddress: buyWithFiatStatus.toAddress,
+    // onramp always happens to fromAddress, and then swap is done from - fromAddress to toAddress
+    fromAddress: buyWithFiatStatus.fromAddress,
     toAddress: buyWithFiatStatus.toAddress,
     fromChainId: buyWithFiatStatus.quote.onRampToken.chainId,
     fromTokenAddress: buyWithFiatStatus.quote.onRampToken.tokenAddress,

package/src/pay/buyWithFiat/getStatus.ts

@@ -70,9 +70,16 @@ export type BuyWithFiatStatus =
         | "CRYPTO_SWAP_IN_PROGRESS"
         | "CRYPTO_SWAP_FAILED";
       /**
-       * The wallet address to which the tokens are sent to
+       * The wallet address to which the desired tokens are sent to
        */
       toAddress: string;
+      /**
+       * The wallet address that started the transaction.
+       *
+       * If onramp provider supports buying the destination token directly, the tokens are sent to "toAddress" directly.
+       * Otherwise, the tokens are sent to "fromAddress" and a swap is performed by the payer wallet and the tokens are converted to the desired token and sent to "toAddress".
+       */
+      fromAddress: string;
       /**
        * The quote object for the transaction
        */

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -84,6 +84,13 @@ export type PayUIOptions = {
    * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
    */
   purchaseData?: object;
+
+  /**
+   * The address of the recipient of the purchase.
+   *
+   * This address will be used to send the purchased tokens to.
+   */
+  recipientAddress?: string;
 };
 
 /**

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

@@ -3,12 +3,20 @@ import {
   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";
 
+export type UseWalletBalanceOptions = Prettify<
+  Omit<GetWalletBalanceOptions, "address" | "chain"> & {
+    address: string | undefined;
+    chain: Chain | undefined;
+  }
+>;
 export type UseWalletBalanceQueryOptions = Omit<
   UseQueryOptions<GetWalletBalanceResult>,
   "queryFn" | "queryKey" | "enabled"
@@ -33,7 +41,7 @@ export type UseWalletBalanceQueryOptions = Omit<
  * @wallet
  */
 export function useWalletBalance(
-  options: Partial<GetWalletBalanceOptions>,
+  options: UseWalletBalanceOptions,
   queryOptions?: UseWalletBalanceQueryOptions,
 ): UseQueryResult<GetWalletBalanceResult> {
   const { chain, address, tokenAddress, client } = options;

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/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