abstract wallet support

Author: joaquim-verges

packages/thirdweb/scripts/wallets/extra-wallet-icons/abstract.png

@@ -91,5 +91,33 @@
       "native": null,
       "universal": null
     }
+  },
+  {
+    "id": "abstract",
+    "name": "Abstract Global Wallet",
+    "homepage": "https://abs.xyz/",
+    "image_id": "abstract.png",
+    "app": {
+      "browser": null,
+      "ios": null,
+      "android": null,
+      "mac": null,
+      "windows": null,
+      "linux": null,
+      "chrome": null,
+      "firefox": null,
+      "safari": null,
+      "edge": null,
+      "opera": null
+    },
+    "rdns": "xyz.abs",
+    "mobile": {
+      "native": null,
+      "universal": null
+    },
+    "desktop": {
+      "native": null,
+      "universal": null
+    }
   }
 ]

packages/thirdweb/scripts/wallets/extra-wallets.json

@@ -0,0 +1,136 @@
+import type { EIP1193Provider } from "viem";
+import { trackConnect } from "../analytics/track/connect.js";
+import type { Chain } from "../chains/types.js";
+import { getCachedChainIfExists } from "../chains/utils.js";
+import type { ThirdwebClient } from "../client/client.js";
+import {
+  autoConnectEip1193Wallet,
+  connectEip1193Wallet,
+} from "../wallets/injected/index.js";
+import type { Account, Wallet } from "../wallets/interfaces/wallet.js";
+import { createWalletEmitter } from "../wallets/wallet-emitter.js";
+import type { WalletId } from "../wallets/wallet-types.js";
+
+export type Eip1193AdapterOptions = {
+  client: ThirdwebClient;
+  provider: EIP1193Provider | (() => Promise<EIP1193Provider>);
+  walletId?: WalletId;
+  chain?: Chain;
+};
+
+/**
+ * Converts an EIP1193 provider to a Thirdweb wallet.
+ * @param options - The options for converting an EIP1193 provider to a Thirdweb wallet.
+ * @returns A Thirdweb wallet.
+ * @example
+ * ```ts
+ * import { fromEip1193Provider } from "thirdweb/wallets";
+ * const wallet = fromEip1193Provider({ provider, client, walletId });
+ * ```
+ * @walletUtils
+ */
+export function fromEip1193Provider(options: Eip1193AdapterOptions): Wallet {
+  const id: WalletId = options.walletId ?? "adapter";
+  const emitter = createWalletEmitter();
+  let account: Account | undefined = undefined;
+  let chain: Chain | undefined = undefined;
+  let provider: EIP1193Provider | undefined = undefined;
+  const getProvider = async () => {
+    if (!provider) {
+      provider =
+        typeof options.provider === "function"
+          ? await options.provider()
+          : options.provider;
+    }
+    return provider;
+  };
+
+  const unsubscribeChain = emitter.subscribe("chainChanged", (newChain) => {
+    chain = newChain;
+  });
+
+  function reset() {
+    account = undefined;
+    chain = undefined;
+  }
+
+  let handleDisconnect = async () => {};
+
+  const unsubscribeDisconnect = emitter.subscribe("disconnect", () => {
+    reset();
+    unsubscribeChain();
+    unsubscribeDisconnect();
+  });
+
+  emitter.subscribe("accountChanged", (_account) => {
+    account = _account;
+  });
+
+  let handleSwitchChain: (chain: Chain) => Promise<void> = async () => {
+    throw new Error("Not implemented");
+  };
+
+  return {
+    id: options.walletId as WalletId,
+    subscribe: emitter.subscribe,
+    getConfig: () => undefined,
+    getChain() {
+      if (!chain) {
+        return undefined;
+      }
+
+      chain = getCachedChainIfExists(chain.id) || chain;
+      return chain;
+    },
+    getAccount: () => account,
+    connect: async () => {
+      const [connectedAccount, connectedChain, doDisconnect, doSwitchChain] =
+        await connectEip1193Wallet({
+          id,
+          provider: await getProvider(),
+          client: options.client,
+          chain: options.chain,
+          emitter,
+        });
+      // set the states
+      account = connectedAccount;
+      chain = connectedChain;
+      handleDisconnect = doDisconnect;
+      handleSwitchChain = doSwitchChain;
+      trackConnect({
+        client: options.client,
+        walletType: id,
+        walletAddress: account.address,
+      });
+      // return account
+      return account;
+    },
+    autoConnect: async () => {
+      const [connectedAccount, connectedChain, doDisconnect, doSwitchChain] =
+        await autoConnectEip1193Wallet({
+          id,
+          provider: await getProvider(),
+          emitter,
+          chain: options.chain,
+          client: options.client,
+        });
+      // set the states
+      account = connectedAccount;
+      chain = connectedChain;
+      handleDisconnect = doDisconnect;
+      handleSwitchChain = doSwitchChain;
+      trackConnect({
+        client: options.client,
+        walletType: id,
+        walletAddress: account.address,
+      });
+      // return account
+      return account;
+    },
+    disconnect: async () => {
+      reset();
+      await handleDisconnect();
+    },
+    switchChain: (c) => handleSwitchChain(c),
+  };
+}

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

@@ -9,7 +9,7 @@ type TransactionEvent = {
   ecosystem?: Ecosystem;
   transactionHash?: string;
   walletAddress?: string;
-  walletType?: WalletId;
+  walletType?: WalletId | ({} & string);
   chainId?: number;
   contractAddress?: string;
   functionName?: string;

packages/thirdweb/src/analytics/track/transaction.ts

@@ -134,6 +134,9 @@ export type {
   WalletConnectSession,
 } from "../wallets/wallet-connect/receiver/types.js";
 
+// eip1193
+export { fromEip1193Provider } from "../adapters/eip1193-adapter.js";
+
 // NOT SUPPORTED
 
 export const injectedProvider = () => {

packages/thirdweb/src/exports/wallets.native.ts

@@ -144,6 +144,9 @@ export type {
   WalletConnectSession,
 } from "../wallets/wallet-connect/receiver/types.js";
 
+// eip1193
+export { fromEip1193Provider } from "../adapters/eip1193-adapter.js";
+
 // WEB ONLY EXPORTS
 
 // injected

packages/thirdweb/src/exports/wallets.ts

@@ -5,6 +5,7 @@ import { useConnectedWallets } from "./useConnectedWallets.js";
  * Get the admin wallet for the active wallet
  * Useful for smart wallets to get the underlying personal account
  * @returns The admin wallet for the active wallet, or the active wallet if it doesn't have an admin account
+ * @walletConnection
  */
 export function useAdminWallet() {
   const activeWallet = useActiveWallet();

packages/thirdweb/src/react/core/hooks/wallets/useAdminWallet.ts

@@ -9,7 +9,6 @@ import type {
   InjectedSupportedWalletIds,
   WCSupportedWalletIds,
 } from "../../../../../wallets/__generated__/wallet-ids.js";
-import { COINBASE } from "../../../../../wallets/constants.js";
 import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { getInstalledWalletProviders } from "../../../../../wallets/injected/mipdStore.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
@@ -197,27 +196,6 @@ export function AnyWalletConnectUI(props: {
     );
   }
 
-  // coinbase wallet sdk
-  if (props.wallet.id === COINBASE) {
-    return (
-      <Suspense fallback={<LoadingScreen />}>
-        <CoinbaseSDKWalletConnectUI
-          locale={locale}
-          onGetStarted={() => {
-            setScreen("get-started");
-          }}
-          onBack={props.onBack}
-          done={props.done}
-          wallet={props.wallet as Wallet<typeof COINBASE>}
-          walletInfo={walletInfo.data}
-          chain={props.chain}
-          client={props.client}
-          size={props.size}
-        />
-      </Suspense>
-    );
-  }
-
   // wallet connect
   if (walletInfo.data.mobile.native || walletInfo.data.mobile.universal) {
     return (
@@ -294,6 +272,27 @@ export function AnyWalletConnectUI(props: {
     );
   }
 
+  // any other known wallet
+  if (props.wallet.id) {
+    return (
+      <Suspense fallback={<LoadingScreen />}>
+        <CoinbaseSDKWalletConnectUI
+          locale={locale}
+          onGetStarted={() => {
+            setScreen("get-started");
+          }}
+          onBack={props.onBack}
+          done={props.done}
+          wallet={props.wallet}
+          walletInfo={walletInfo.data}
+          chain={props.chain}
+          client={props.client}
+          size={props.size}
+        />
+      </Suspense>
+    );
+  }
+
   // if can't connect in any way - show get started screen
   return (
     <GetStartedScreen

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

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
-import type { COINBASE } from "../../../../wallets/constants.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../../wallets/wallet-info.js";
 import type { InjectedWalletLocale } from "../injected/locale/types.js";
@@ -10,12 +9,12 @@ import { ConnectingScreen } from "./ConnectingScreen.js";
 /**
  * @internal
  */
-function CoinbaseSDKWalletConnectUI(props: {
+function ExternalWalletConnectUI(props: {
   onBack?: () => void;
   onGetStarted: () => void;
   done: () => void;
   locale: InjectedWalletLocale;
-  wallet: Wallet<typeof COINBASE>;
+  wallet: Wallet;
   walletInfo: WalletInfo;
   client: ThirdwebClient;
   chain: Chain | undefined;
@@ -70,4 +69,4 @@ function CoinbaseSDKWalletConnectUI(props: {
   );
 }
 
-export default CoinbaseSDKWalletConnectUI;
+export default ExternalWalletConnectUI;

packages/thirdweb/src/react/web/wallets/shared/CoinbaseSDKConnection.tsx

@@ -1,6 +1,8 @@
 import type { TransactionSerializable } from "viem";
 import { getGasOverridesForTransaction } from "../../gas/fee-data.js";
 import { getRpcClient } from "../../rpc/rpc.js";
+import { getAddress } from "../../utils/address.js";
+import { isZkSyncChain } from "../../utils/any-evm/zksync/isZkSyncChain.js";
 import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
 import type { PreparedTransaction } from "../prepare-transaction.js";
 import { encode } from "./encode.js";
@@ -45,6 +47,25 @@ export type ToSerializableTransactionOptions = {
 export async function toSerializableTransaction(
   options: ToSerializableTransactionOptions,
 ) {
+  // zk chains require a different rpc method for gas estimation and gas fees
+  const isZkSync = await isZkSyncChain(options.transaction.chain);
+  if (isZkSync) {
+    const { getZkGasFees } = await import(
+      "./zksync/send-eip712-transaction.js"
+    );
+    const { gas, maxFeePerGas, maxPriorityFeePerGas } = await getZkGasFees({
+      transaction: options.transaction,
+      from: options.from ? getAddress(options.from) : undefined,
+    });
+    // passing these values here will avoid re-fetching them below
+    options.transaction = {
+      ...options.transaction,
+      gas,
+      maxFeePerGas,
+      maxPriorityFeePerGas,
+    };
+  }
+
   const rpcRequest = getRpcClient(options.transaction);
   const chainId = options.transaction.chain.id;
   const from = options.from;