[SDK] feat: Allow custom storage for inApp and ecosystem wallets

Author: joaquim-verges

.changeset/gentle-books-begin.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Allow overriding storage for inApp and ecosystem wallets

packages/thirdweb/src/exports/storage.ts

@@ -10,3 +10,4 @@ export {
   resolveArweaveScheme,
   type ResolveArweaveSchemeOptions,
 } from "../utils/arweave.js";
+export type { AsyncStorage } from "../utils/storage/AsyncStorage.js";

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -300,7 +300,6 @@ export function ConnectButton(props: ConnectButtonProps) {
 
   usePreloadWalletProviders({
     wallets,
-    client: props.client,
   });
 
   // Add props.chain and props.chains to defined chains store

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -215,7 +215,6 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
 
   usePreloadWalletProviders({
     wallets,
-    client: props.client,
   });
 
   const modalSize = useMemo(() => {

packages/thirdweb/src/react/web/utils/usePreloadWalletProviders.ts

@@ -1,15 +1,10 @@
 import { useQueries } from "@tanstack/react-query";
-import type { ThirdwebClient } from "../../../client/client.js";
 import { COINBASE } from "../../../wallets/constants.js";
 import { isEcosystemWallet } from "../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { CreateWalletArgs } from "../../../wallets/wallet-types.js";
-import type { EcosystemWalletId } from "../../../wallets/wallet-types.js";
 
-export function usePreloadWalletProviders({
-  client,
-  wallets,
-}: { client: ThirdwebClient; wallets: Wallet[] }) {
+export function usePreloadWalletProviders({ wallets }: { wallets: Wallet[] }) {
   useQueries({
     queries: wallets
       .filter(
@@ -29,49 +24,6 @@ export function usePreloadWalletProviders({
               // return _something_
               return true;
             }
-            case "inApp" === w.id: {
-              const [
-                { InAppWebConnector },
-                { getOrCreateInAppWalletConnector },
-              ] = await Promise.all([
-                import("../../../wallets/in-app/web/lib/web-connector.js"),
-                import("../../../wallets/in-app/core/wallet/in-app-core.js"),
-              ]);
-              await getOrCreateInAppWalletConnector(client, async (client) => {
-                return new InAppWebConnector({
-                  client,
-                });
-              });
-              // return _something_
-              return true;
-            }
-            case isEcosystemWallet(w.id): {
-              const [
-                { InAppWebConnector },
-                { getOrCreateInAppWalletConnector },
-              ] = await Promise.all([
-                import("../../../wallets/in-app/web/lib/web-connector.js"),
-                import("../../../wallets/in-app/core/wallet/in-app-core.js"),
-              ]);
-              const ecosystemWallet = w as Wallet<EcosystemWalletId>; // we know this is an ecosystem wallet
-              await getOrCreateInAppWalletConnector(
-                client,
-                async (client) => {
-                  return new InAppWebConnector({
-                    client,
-                    ecosystem: {
-                      id: ecosystemWallet.id,
-                      partnerId: ecosystemWallet.getConfig()?.partnerId,
-                    },
-                  });
-                },
-                {
-                  id: ecosystemWallet.id,
-                  partnerId: ecosystemWallet.getConfig()?.partnerId,
-                },
-              );
-              return true;
-            }
             // potentially add more wallets here
             default: {
               return false;

packages/thirdweb/src/wallets/ecosystem/types.ts

@@ -1,4 +1,5 @@
 import type { SupportedSmsCountry } from "../../react/web/wallets/in-app/supported-sms-countries.js";
+import type { AsyncStorage } from "../../utils/storage/AsyncStorage.js";
 import type {
   InAppWalletAutoConnectOptions,
   InAppWalletConnectionOptions,
@@ -23,6 +24,10 @@ export type EcosystemWalletCreationOptions = {
    * The partnerId of the ecosystem wallet to connect to
    */
   partnerId?: string;
+  /**
+   * The storage to use for storing wallet state
+   */
+  storage?: AsyncStorage;
 };
 
 export type EcosystemWalletConnectionOptions = InAppWalletConnectionOptions;

packages/thirdweb/src/wallets/in-app/core/wallet/types.ts

@@ -1,6 +1,7 @@
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { SupportedSmsCountry } from "../../../../react/web/wallets/in-app/supported-sms-countries.js";
+import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
 import type { SmartWalletOptions } from "../../../smart/types.js";
 import type {
@@ -87,5 +88,9 @@ export type InAppWalletCreationOptions =
        * Whether to hide the private key export button in the Connect Modal
        */
       hidePrivateKeyExport?: boolean;
+      /**
+       * The storage to use for storing wallet state
+       */
+      storage?: AsyncStorage;
     }
   | undefined;

packages/thirdweb/src/wallets/in-app/native/auth/passkeys.ts

@@ -3,6 +3,7 @@ import { concat } from "viem";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { toBytes } from "../../../../utils/encoding/to-bytes.js";
 import { keccak256 } from "../../../../utils/hashing/keccak256.js";
+import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
 import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
 import {
   base64ToString,
@@ -121,13 +122,14 @@ export class PasskeyNativeClient implements PasskeyClient {
 export async function hasStoredPasskey(
   client: ThirdwebClient,
   ecosystemId?: EcosystemWalletId,
+  storage?: AsyncStorage,
 ) {
-  const storage = new ClientScopedStorage({
-    storage: nativeLocalStorage,
+  const clientStorage = new ClientScopedStorage({
+    storage: storage ?? nativeLocalStorage,
     clientId: client.clientId,
     ecosystem: ecosystemId ? { id: ecosystemId } : undefined,
   });
-  const credId = await storage.getPasskeyCredentialId();
+  const credId = await clientStorage.getPasskeyCredentialId();
   return !!credId;
 }
 

packages/thirdweb/src/wallets/in-app/native/ecosystem.ts

@@ -83,6 +83,7 @@ export function ecosystemWallet(
       return new InAppNativeConnector({
         client,
         ecosystem,
+        storage: createOptions?.storage,
         // TODO (enclave): passkeyDomain for ecosystem wallets
       });
     },

packages/thirdweb/src/wallets/in-app/native/in-app.ts

@@ -65,6 +65,7 @@ export function inAppWallet(
       return new InAppNativeConnector({
         client,
         passkeyDomain: createOptions?.auth?.passkeyDomain,
+        storage: createOptions?.storage,
       });
     },
   }) as Wallet<"inApp">;