feat: createWalletAdapter for interop with other libraries (#2997)

Co-authored-by: Manan Tank <manantankm@gmail.com>

Author: joaquim-verges

.changeset/three-news-melt.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+added `createWalletAdapter` helper for interop with diff libraries

packages/thirdweb/src/adapters/wallet-adapter.ts

@@ -0,0 +1,49 @@
+import type { Chain } from "../chains/types.js";
+import type { ThirdwebClient } from "../client/client.js";
+import type { Account, Wallet } from "../wallets/interfaces/wallet.js";
+import { createWalletEmitter } from "../wallets/wallet-emitter.js";
+
+export type AdapterWalletOptions = {
+  client: ThirdwebClient;
+  adaptedAccount: Account;
+  chain: Chain;
+  onDisconnect: () => Promise<void> | void;
+  switchChain: (chain: Chain) => Promise<void> | void;
+};
+
+export function createWalletAdapter(
+  options: AdapterWalletOptions,
+): Wallet<"adapter"> {
+  const emitter = createWalletEmitter<"adapter">();
+  let _chain = options.chain;
+  return {
+    id: "adapter",
+    subscribe: emitter.subscribe,
+    connect: async () => {
+      emitter.emit("onConnect", options);
+      return options.adaptedAccount;
+    },
+    autoConnect: async () => {
+      emitter.emit("onConnect", options);
+      return options.adaptedAccount;
+    },
+    disconnect: async () => {
+      await options.onDisconnect();
+      emitter.emit("disconnect", undefined);
+    },
+    getAccount() {
+      return options.adaptedAccount;
+    },
+    getChain() {
+      return _chain;
+    },
+    getConfig() {
+      return options;
+    },
+    switchChain: async (chain) => {
+      await options.switchChain(chain);
+      _chain = chain;
+      emitter.emit("chainChanged", chain);
+    },
+  };
+}

packages/thirdweb/src/exports/wallets.ts

@@ -96,3 +96,5 @@ export type {
 
 export { getAllWalletsList } from "../wallets/getAllWalletsList.js";
 export { getWalletInfo } from "../wallets/__generated__/getWalletInfo.js";
+
+export { createWalletAdapter } from "../adapters/wallet-adapter.js";

packages/thirdweb/src/react/web/ui/ConnectWallet/icons/dataUris.ts

@@ -12,3 +12,6 @@ export const smartWalletIcon =
 
 export const genericTokenIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQwNDhfNDIzMSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNTg0IDQuODU1NjZDNy43MTA2OSA0Ljc4MjUyIDcuODU0MzkgNC43NDQwMiA4LjAwMDY3IDQuNzQ0MDJDOC4xNDY5NSA0Ljc0NDAyIDguMjkwNjUgNC43ODI1MiA4LjQxNzM0IDQuODU1NjZMMTAuNTE1MyA2LjA2NjY2QzEwLjY0MiA2LjEzOTggMTAuNzQ3MiA2LjI0NSAxMC44MjA0IDYuMzcxNjhDMTAuODkzNSA2LjQ5ODM1IDEwLjkzMiA2LjY0MjA1IDEwLjkzMiA2Ljc4ODMzVjkuMjExQzEwLjkzMiA5LjM1NzI3IDEwLjg5MzUgOS41MDA5NyAxMC44MjA0IDkuNjI3NjVDMTAuNzQ3MiA5Ljc1NDMzIDEwLjY0MiA5Ljg1OTUzIDEwLjUxNTMgOS45MzI2Nkw4LjQxNzM0IDExLjE0NEM4LjI5MDY1IDExLjIxNzEgOC4xNDY5NSAxMS4yNTU2IDguMDAwNjcgMTEuMjU1NkM3Ljg1NDM5IDExLjI1NTYgNy43MTA2OSAxMS4yMTcxIDcuNTg0IDExLjE0NEw1LjQ4NiA5LjkzMjY2QzUuMzU5MzIgOS44NTk1MyA1LjI1NDEzIDkuNzU0MzMgNS4xODA5OSA5LjYyNzY1QzUuMTA3ODUgOS41MDA5NyA1LjA2OTM0IDkuMzU3MjcgNS4wNjkzNCA5LjIxMVY2Ljc4ODY2QzUuMDY5MjggNi42NDIzMyA1LjEwNzc2IDYuNDk4NTYgNS4xODA5IDYuMzcxODJDNS4yNTQwNSA2LjI0NTA4IDUuMzU5MjcgNi4xMzk4MyA1LjQ4NiA2LjA2NjY2TDcuNTg0IDQuODU1NjZaTTguMDg0IDUuNDMzQzguMDU4NjcgNS40MTgzNyA4LjAyOTkzIDUuNDEwNjcgOC4wMDA2NyA1LjQxMDY3QzcuOTcxNDEgNS40MTA2NyA3Ljk0MjY3IDUuNDE4MzcgNy45MTczNCA1LjQzM0w1LjgxOTM0IDYuNjQ0MzNDNS43OTQgNi42NTg5NiA1Ljc3Mjk2IDYuNjggNS43NTgzMyA2LjcwNTMzQzUuNzQzNyA2LjczMDY3IDUuNzM2IDYuNzU5NDEgNS43MzYgNi43ODg2NlY5LjIxMTMzQzUuNzM2IDkuMjQwNTkgNS43NDM3IDkuMjY5MzMgNS43NTgzMyA5LjI5NDY2QzUuNzcyOTYgOS4zMiA1Ljc5NCA5LjM0MTA0IDUuODE5MzQgOS4zNTU2Nkw3LjkxNzM0IDEwLjU2NjdDNy45NDI2NyAxMC41ODEzIDcuOTcxNDEgMTAuNTg5IDguMDAwNjcgMTAuNTg5QzguMDI5OTMgMTAuNTg5IDguMDU4NjcgMTAuNTgxMyA4LjA4NCAxMC41NjY3TDEwLjE4MiA5LjM1NTMzQzEwLjIwNzMgOS4zNDA3IDEwLjIyODQgOS4zMTk2NiAxMC4yNDMgOS4yOTQzM0MxMC4yNTc2IDkuMjY4OTkgMTAuMjY1MyA5LjI0MDI1IDEwLjI2NTMgOS4yMTFWNi43ODg2NkMxMC4yNjUzIDYuNzU5NDEgMTAuMjU3NiA2LjczMDY3IDEwLjI0MyA2LjcwNTMzQzEwLjIyODQgNi42OCAxMC4yMDczIDYuNjU4OTYgMTAuMTgyIDYuNjQ0MzNMOC4wODQgNS40MzNaIiBmaWxsPSIjNUM1QzVDIi8+CjwvZz4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjcuNjkyMzEiIHN0cm9rZT0iIzVDNUM1QyIgc3Ryb2tlLXdpZHRoPSIwLjYxNTM4NSIvPgo8Y2lyY2xlIGN4PSI3Ljk5OTU1IiBjeT0iOC4wMDAwNCIgcj0iNS44NDYxNSIgc3Ryb2tlPSIjNUM1QzVDIiBzdHJva2Utd2lkdGg9IjAuNjE1Mzg1Ii8+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQwNDhfNDIzMSI+CjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==";
+
+export const genericWalletIcon =
+  "data:image/svg+xml;base64,PHN2ZwogICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgIGZpbGw9Im5vbmUiCiAgICAgIHZpZXdCb3g9IjAgMCAxOCAxOCIKICAgICAgd2lkdGg9IjIwIgogICAgICBoZWlnaHQ9IjIwIgogICAgICByb2xlPSJwcmVzZW50YXRpb24iCiAgICA+CiAgICAgIDxwYXRoCiAgICAgICAgZmlsbD0iI2FhYSIKICAgICAgICBkPSJNMTUuNiA0LjZIMS44NXYtLjU1bDEyLjEtLjk2OHYuOTY4aDEuNjVWMi40YzAtMS4yMS0uOTgtMi4wNTktMi4xNzctMS44ODhMMi4zNzggMi4wODlDMS4xOCAyLjI2LjIgMy4zOS4yIDQuNnYxMWEyLjIgMi4yIDAgMDAyLjIgMi4yaDEzLjJhMi4yIDIuMiAwIDAwMi4yLTIuMlY2LjhhMi4yIDIuMiAwIDAwLTIuMi0yLjJ6bS0xLjY1IDcuNzA3YTEuNjUgMS42NSAwIDAxLS42My0zLjE3NiAxLjY1IDEuNjUgMCAxMS42MyAzLjE3NnoiCiAgICAgIC8+CiAgICA8L3N2Zz4=";

packages/thirdweb/src/react/web/ui/components/WalletImage.tsx

@@ -7,7 +7,11 @@ import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/wallet-hooks.js";
 import { getStorage } from "../../../core/storage.js";
 import { getLastAuthProvider } from "../../wallets/in-app/storage.js";
-import { emailIcon, phoneIcon } from "../ConnectWallet/icons/dataUris.js";
+import {
+  emailIcon,
+  genericWalletIcon,
+  phoneIcon,
+} from "../ConnectWallet/icons/dataUris.js";
 import {
   appleIconUri,
   facebookIconUri,
@@ -81,6 +85,7 @@ export function WalletImage(props: {
     return (
       <Img
         src={image}
+        fallbackImage={genericWalletIcon}
         width={props.size}
         height={props.size}
         loading="eager"
@@ -108,6 +113,7 @@ function WalletImageQuery(props: {
     <Img
       client={props.client}
       src={walletImage.data}
+      fallbackImage={genericWalletIcon}
       width={props.size}
       height={props.size}
       loading="eager"

packages/thirdweb/src/wallets/wallet-types.ts

@@ -1,3 +1,4 @@
+import type { AdapterWalletOptions } from "../adapters/wallet-adapter.js";
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
 import type {
@@ -28,6 +29,7 @@ export type WalletId =
   | "inApp"
   | "embedded" // deprecated
   | "smart"
+  | "adapter"
   | WCSupportedWalletIds
   | InjectedSupportedWalletIds;
 
@@ -116,7 +118,9 @@ export type WalletCreationOptions<T extends WalletId> = T extends "smart"
     ? InAppWalletCreationOptions
     : T extends typeof COINBASE
       ? CoinbaseWalletCreationOptions
-      : undefined;
+      : T extends "adapter"
+        ? AdapterWalletOptions
+        : undefined;
 
 /**
  * Generic type for getting the tuple type of arguments that the `createWallet` function takes.