add ids to wallets

packages/thirdweb/src/adapters/ethers5.ts

@@ -207,6 +207,7 @@ async function fromEthersSigner(signer: ethers5.Signer): Promise<Wallet> {
         transactionHash: result.hash as Hex,
       };
     },
+    id: "ethers5-wallet", // TODO: figure this out
   } satisfies Wallet;
 }
 

packages/thirdweb/src/adapters/ethers6.ts

@@ -196,7 +196,6 @@ async function fromEthersSigner(signer: ethers6.Signer): Promise<Wallet> {
   const address = await signer.getAddress();
   return {
     address,
-
     signMessage: async ({ message }) => {
       return signer.signMessage(
         typeof message === "string" ? message : message.raw,
@@ -212,6 +211,7 @@ async function fromEthersSigner(signer: ethers6.Signer): Promise<Wallet> {
         transactionHash,
       };
     },
+    id: "ethers6-wallet", // TODO figure this out
   } satisfies Wallet;
 }
 

packages/thirdweb/src/react/providers/wallet-provider.tsx

@@ -4,8 +4,6 @@ import { useCallback, useState, useSyncExternalStore } from "react";
 import type { Wallet } from "../../wallets/interfaces/wallet.js";
 import { connectionManager } from "../../wallets/manager/index.js";
 
-export type WalletWithId = Wallet & { _id: string };
-
 /**
  * A hook that returns the active wallet.
  * @returns The active wallet or null if no active wallet.
@@ -92,21 +90,17 @@ export function useConnect() {
       // reset error state
       setError(null);
       if (typeof options !== "function") {
-        const walletWithId = options as WalletWithId;
-        walletWithId._id = fakeUuid();
-        connectWallet(walletWithId);
-        return walletWithId as Wallet;
+        connectWallet(options);
+        return options;
       }
 
       setIsConnecting(true);
       try {
         const wallet = await options();
         // add the uuid for this wallet
-        const walletWithId = wallet as WalletWithId;
-        walletWithId._id = fakeUuid();
-        connectWallet(walletWithId);
-        setActiveWalletId(walletWithId._id);
-        return walletWithId as Wallet;
+        connectWallet(wallet);
+        setActiveWalletId(wallet.id);
+        return wallet;
       } catch (e) {
         setError(e as Error);
       } finally {
@@ -137,14 +131,3 @@ export function useDisconnect() {
   const disconnectWallet = connectionManager.disconnectWallet;
   return { disconnectWallet };
 }
-
-// helpers //
-
-// TODO replace with more realiable uuid generator
-/**
- *
- * @internal
- */
-function fakeUuid() {
-  return Math.random().toString(36).substring(2) + Date.now().toString(36);
-}

packages/thirdweb/src/reactive/effect.ts

@@ -0,0 +1,26 @@
+import type { ReadonlyStore } from "./computedStore.js";
+import { type Store } from "./store.js";
+
+/**
+ * Run a function whenever dependencies change
+ * @param effectFn - Side effect function to run
+ * @param dependencies - The stores it depends on
+ * @example
+ * ```ts
+ * const foo = computed(() => bar.getValue() + baz.getValue(), [bar, baz]);
+ * ```
+ */
+export function effect<T>(
+  // pass the values of the dependencies to the computation function
+  effectFn: () => T,
+  dependencies: (Store<any> | ReadonlyStore<any>)[],
+) {
+  // run the effect function on first run
+  effectFn();
+  // when any of the dependencies change, recompute the value and set it
+  dependencies.forEach((store) => {
+    store.subscribe(() => {
+      effectFn();
+    });
+  });
+}

packages/thirdweb/src/wallets/injected.ts

@@ -160,6 +160,7 @@ export async function injectedWallet(
       };
     },
     switchChain,
+    id: "injected",
   };
 }
 

packages/thirdweb/src/wallets/injectedWallets.ts

@@ -13,11 +13,13 @@ export type SpecificInjectedWalletOptions = {
  * ```
  * @returns A Promise that resolves to a Wallet instance.
  */
-export function metamaskWallet(options?: SpecificInjectedWalletOptions) {
-  return injectedWallet({
+export async function metamaskWallet(options?: SpecificInjectedWalletOptions) {
+  const wallet = await injectedWallet({
     walletId: "io.metamask",
     chainId: options?.chainId,
   });
+  wallet.id = "metamask";
+  return wallet;
 }
 
 /**
@@ -29,11 +31,13 @@ export function metamaskWallet(options?: SpecificInjectedWalletOptions) {
  * ```
  * @returns A Promise that resolves to a Wallet instance.
  */
-export function rainbowWallet(options?: SpecificInjectedWalletOptions) {
-  return injectedWallet({
+export async function rainbowWallet(options?: SpecificInjectedWalletOptions) {
+  const wallet = await injectedWallet({
     walletId: "me.rainbow",
     chainId: options?.chainId,
   });
+  wallet.id = "rainbow";
+  return wallet;
 }
 
 /**
@@ -45,9 +49,11 @@ export function rainbowWallet(options?: SpecificInjectedWalletOptions) {
  * ```
  * @returns A Promise that resolves to a Wallet instance.
  */
-export function zerionWallet(options?: SpecificInjectedWalletOptions) {
-  return injectedWallet({
+export async function zerionWallet(options?: SpecificInjectedWalletOptions) {
+  const wallet = await injectedWallet({
     walletId: "io.zerion.wallet",
     chainId: options?.chainId,
   });
+  wallet.id = "zerion";
+  return wallet;
 }

packages/thirdweb/src/wallets/interfaces/wallet.ts

@@ -30,4 +30,5 @@ export type Wallet<T extends object = object> = {
   estimateGas?: (
     tx: TransactionSerializable & { chainId: number },
   ) => Promise<bigint>;
+  id: string;
 } & T;

packages/thirdweb/src/wallets/manager/index.ts

@@ -1,9 +1,11 @@
 import { createStore } from "../../reactive/store.js";
 import type { Wallet } from "../index.js";
 import { computedStore } from "../../reactive/computedStore.js";
+import { effect } from "../../reactive/effect.js";
 
-export type WalletWithId = Wallet & { _id: string };
-export type ConnectedWalletsMap = Map<string, WalletWithId>;
+export type ConnectedWalletsMap = Map<string, Wallet>;
+
+const CONNECTED_WALLET_IDS = "thirdweb:connected-wallet-ids";
 
 /**
  * Create a connection manager for Wallet connections
@@ -26,16 +28,16 @@ function createConnectionManager() {
   }, [activeWalletId, connectedWalletsMap]);
 
   const connectedWallets = computedStore(() => {
-    return Array.from(connectedWalletsMap.getValue().values());
+    const value = Array.from(connectedWalletsMap.getValue().values());
+    return value;
   }, [connectedWalletsMap]);
 
   // actions
-  const connectWallet = (wallet: WalletWithId) => {
+  const connectWallet = (wallet: Wallet) => {
     const currentMap = connectedWalletsMap.getValue();
     const newMap = new Map(currentMap);
-    newMap.set(wallet._id, wallet);
+    newMap.set(wallet.id, wallet);
     connectedWalletsMap.setValue(newMap);
-    // activeWalletId.setValue(wallet._id); -> should we also set is as active wallet?
   };
 
   const disconnectWallet = (walletId: string) => {
@@ -54,6 +56,14 @@ function createConnectionManager() {
     activeWalletId.setValue(walletId);
   };
 
+  // side effects
+  effect(() => {
+    const value = connectedWallets.getValue();
+    const ids = value.map((wallet) => wallet.id);
+    console.log("connected wallets are", ids);
+    localStorage.setItem(CONNECTED_WALLET_IDS, JSON.stringify(ids));
+  }, [connectedWallets]);
+
   return {
     activeWalletId,
     activeWallet,

packages/thirdweb/src/wallets/private-key.ts

@@ -49,5 +49,6 @@ export function privateKeyWallet(options: PrivateKeyWalletOptions) {
     signTransaction: account.signTransaction,
     signMessage: account.signMessage,
     signTypedData: account.signTypedData,
+    id: "private-key",
   } satisfies Wallet;
 }