Add base account sdk

.changeset/add-base-account-sdk.md

@@ -0,0 +1,11 @@
+---
+"thirdweb": minor
+---
+
+Add Base Account SDK integration with `@base-org/account`
+
+- Add @base-org/account 2.5.0 dependency
+- Introduce Base Account SDK wallet connector
+- Add base-account-web.ts with EIP-1193 provider implementation
+- Add base-account-wallet.ts with core wallet logic
+- Add types and helper function exports

packages/thirdweb/package.json

@@ -11,6 +11,7 @@
     "url": "https://github.com/thirdweb-dev/js/issues"
   },
   "dependencies": {
+    "@base-org/account": "2.5.0",
     "@coinbase/wallet-sdk": "4.3.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",

packages/thirdweb/src/exports/wallets.ts

@@ -11,6 +11,11 @@ export type {
   InjectedSupportedWalletIds,
   WCSupportedWalletIds,
 } from "../wallets/__generated__/wallet-ids.js";
+export type {
+  BaseAccountSDKWalletConnectionOptions,
+  BaseAccountWalletCreationOptions,
+} from "../wallets/base-account/base-account-web.js";
+export { isBaseAccountSDKWallet } from "../wallets/base-account/base-account-web.js";
 export type {
   CoinbaseSDKWalletConnectionOptions,
   CoinbaseWalletCreationOptions,

packages/thirdweb/src/wallets/base-account/base-account-wallet.ts

@@ -0,0 +1,116 @@
+/**
+ * internal helper functions for Base Account SDK wallet
+ */
+
+import type { ProviderInterface } from "@base-org/account";
+import { trackConnect } from "../../analytics/track/connect.js";
+import type { Chain } from "../../chains/types.js";
+import { getCachedChainIfExists } from "../../chains/utils.js";
+import { BASE_ACCOUNT } from "../constants.js";
+import type { Account, Wallet } from "../interfaces/wallet.js";
+import { createWalletEmitter } from "../wallet-emitter.js";
+import type { CreateWalletArgs } from "../wallet-types.js";
+
+/**
+ * @internal
+ */
+export function baseAccountWalletSDK(args: {
+  createOptions?: CreateWalletArgs<typeof BASE_ACCOUNT>[1];
+  providerFactory: () => Promise<ProviderInterface>;
+}): Wallet<typeof BASE_ACCOUNT> {
+  const { createOptions } = args;
+  const emitter = createWalletEmitter<typeof BASE_ACCOUNT>();
+  let account: Account | undefined;
+  let chain: Chain | undefined;
+
+  function reset() {
+    account = undefined;
+    chain = undefined;
+  }
+
+  let handleDisconnect = async () => {};
+
+  let handleSwitchChain = async (newChain: Chain) => {
+    chain = newChain;
+  };
+
+  const unsubscribeChainChanged = emitter.subscribe(
+    "chainChanged",
+    (newChain) => {
+      chain = newChain;
+    },
+  );
+
+  const unsubscribeDisconnect = emitter.subscribe("disconnect", () => {
+    reset();
+    unsubscribeChainChanged();
+    unsubscribeDisconnect();
+  });
+
+  emitter.subscribe("accountChanged", (_account) => {
+    account = _account;
+  });
+
+  return {
+    autoConnect: async (options) => {
+      const { autoConnectBaseAccountSDK } = await import(
+        "./base-account-web.js"
+      );
+      const provider = await args.providerFactory();
+      const [connectedAccount, connectedChain, doDisconnect, doSwitchChain] =
+        await autoConnectBaseAccountSDK(options, emitter, provider);
+      // set the states
+      account = connectedAccount;
+      chain = connectedChain;
+      handleDisconnect = doDisconnect;
+      handleSwitchChain = doSwitchChain;
+      trackConnect({
+        chainId: chain.id,
+        client: options.client,
+        walletAddress: account.address,
+        walletType: BASE_ACCOUNT,
+      });
+      // return account
+      return account;
+    },
+    connect: async (options) => {
+      const { connectBaseAccountSDK } = await import("./base-account-web.js");
+      const provider = await args.providerFactory();
+      const [connectedAccount, connectedChain, doDisconnect, doSwitchChain] =
+        await connectBaseAccountSDK(options, emitter, provider);
+
+      // set the states
+      account = connectedAccount;
+      chain = connectedChain;
+      handleDisconnect = doDisconnect;
+      handleSwitchChain = doSwitchChain;
+      trackConnect({
+        chainId: chain.id,
+        client: options.client,
+        walletAddress: account.address,
+        walletType: BASE_ACCOUNT,
+      });
+      // return account
+      return account;
+    },
+    disconnect: async () => {
+      reset();
+      await handleDisconnect();
+    },
+    getAccount: () => account,
+    getChain() {
+      if (!chain) {
+        return undefined;
+      }
+
+      chain = getCachedChainIfExists(chain.id) || chain;
+      return chain;
+    },
+    getConfig: () => createOptions,
+    id: BASE_ACCOUNT,
+    subscribe: emitter.subscribe,
+    switchChain: async (newChain) => {
+      await handleSwitchChain(newChain);
+    },
+  };
+}

packages/thirdweb/src/wallets/base-account/base-account-web.test.ts

@@ -0,0 +1,177 @@
+import type { ProviderInterface } from "@base-org/account";
+import * as ox__Hex from "ox/Hex";
+import * as ox__TypedData from "ox/TypedData";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { BASE_ACCOUNT } from "../constants.js";
+import type { Wallet } from "../interfaces/wallet.js";
+import {
+  autoConnectBaseAccountSDK,
+  connectBaseAccountSDK,
+  isBaseAccountSDKWallet,
+} from "./base-account-web.js";
+
+// Mock dependencies
+vi.mock("@base-org/account", () => ({
+  createBaseAccountSDK: vi.fn(() => ({
+    getProvider: () => ({
+      disconnect: vi.fn(),
+      emit: vi.fn(),
+      off: vi.fn(),
+      on: vi.fn(),
+      request: vi.fn(),
+    }),
+  })),
+}));
+
+vi.mock("../../utils/address.js", () => ({
+  getAddress: vi.fn((address) => address),
+}));
+
+vi.mock("../../chains/utils.js", () => ({
+  getCachedChain: vi.fn((chainId) => ({ id: chainId })),
+  getChainMetadata: vi.fn(async (_chain) => ({
+    explorers: [{ url: "https://explorer.test" }],
+    name: "Test Chain",
+    nativeCurrency: { decimals: 18, name: "Test Coin", symbol: "TC" },
+  })),
+}));
+
+vi.mock("../utils/normalizeChainId.js", () => ({
+  normalizeChainId: vi.fn((chainId) => Number(chainId)),
+}));
+
+vi.mock("ox/Hex", async () => {
+  const actualModule = await vi.importActual("ox/Hex");
+  return {
+    ...actualModule,
+    toNumber: vi.fn((hex) => Number.parseInt(hex, 16)),
+    validate: vi.fn(() => true),
+  };
+});
+
+vi.mock("ox/TypedData", () => ({
+  extractEip712DomainTypes: vi.fn(() => []),
+  serialize: vi.fn(() => "serializedData"),
+  validate: vi.fn(),
+}));
+
+describe("Base Account Web", () => {
+  let provider: ProviderInterface;
+
+  beforeEach(async () => {
+    // Reset module to clear cached provider
+    vi.resetModules();
+    const module = await import("./base-account-web.js");
+    provider = await module.getBaseAccountWebProvider();
+  });
+
+  test("getBaseAccountWebProvider initializes provider", async () => {
+    expect(provider).toBeDefined();
+    expect(provider.request).toBeInstanceOf(Function);
+  });
+
+  test("isBaseAccountSDKWallet returns true for Base Account wallet", () => {
+    const wallet: Wallet = { id: BASE_ACCOUNT } as Wallet;
+    expect(isBaseAccountSDKWallet(wallet)).toBe(true);
+  });
+
+  test("isBaseAccountSDKWallet returns false for non-Base Account wallet", () => {
+    const wallet: Wallet = { id: "other" } as unknown as Wallet;
+    expect(isBaseAccountSDKWallet(wallet)).toBe(false);
+  });
+
+  test("connectBaseAccountSDK connects to the wallet", async () => {
+    provider.request = vi
+      .fn()
+      .mockResolvedValueOnce(["0x123"])
+      .mockResolvedValueOnce("0x1");
+    const emitter = { emit: vi.fn() };
+    const options = { client: {} };
+
+    const [account, chain] = await connectBaseAccountSDK(
+      // biome-ignore lint/suspicious/noExplicitAny: Inside tests
+      options as any,
+      // biome-ignore lint/suspicious/noExplicitAny: Inside tests
+      emitter as any,
+      provider,
+    );
+
+    expect(account.address).toBe("0x123");
+    expect(chain.id).toBe(1);
+  });
+
+  test("autoConnectBaseAccountSDK auto-connects to the wallet", async () => {
+    provider.request = vi
+      .fn()
+      .mockResolvedValueOnce(["0x123"])
+      .mockResolvedValueOnce("0x1");
+    const emitter = { emit: vi.fn() };
+    const options = { client: {} };
+
+    const [account, chain] = await autoConnectBaseAccountSDK(
+      // biome-ignore lint/suspicious/noExplicitAny: Inside tests
+      options as any,
+      // biome-ignore lint/suspicious/noExplicitAny: Inside tests
+      emitter as any,
+      provider,
+    );
+
+    expect(account.address).toBe("0x123");
+    expect(chain.id).toBe(1);
+  });
+
+  test("signMessage uses ox__Hex for validation", async () => {
+    const account = {
+      address: "0x123",
+      signMessage: async ({ message }: { message: string }) => {
+        const messageToSign = `0x${ox__Hex.fromString(message)}`;
+        const res = await provider.request({
+          method: "personal_sign",
+          params: [messageToSign, account.address],
+        });
+        expect(ox__Hex.validate(res)).toBe(true);
+        return res;
+      },
+    };
+
+    provider.request = vi.fn().mockResolvedValue("0xsignature");
+    const signature = await account.signMessage({ message: "hello" });
+    expect(signature).toBe("0xsignature");
+  });
+
+  test("signTypedData uses ox__TypedData for serialization", async () => {
+    const account = {
+      address: "0x123",
+      // biome-ignore lint/suspicious/noExplicitAny: Inside tests
+      signTypedData: async (typedData: any) => {
+        const { domain, message, primaryType } = typedData;
+        const types = {
+          EIP712Domain: ox__TypedData.extractEip712DomainTypes(domain),
+          ...typedData.types,
+        };
+        ox__TypedData.validate({ domain, message, primaryType, types });
+        const stringifiedData = ox__TypedData.serialize({
+          domain: domain ?? {},
+          message,
+          primaryType,
+          types,
+        });
+        const res = await provider.request({
+          method: "eth_signTypedData_v4",
+          params: [account.address, stringifiedData],
+        });
+        expect(ox__Hex.validate(res)).toBe(true);
+        return res;
+      },
+    };
+
+    provider.request = vi.fn().mockResolvedValue("0xsignature");
+    const signature = await account.signTypedData({
+      domain: {},
+      message: {},
+      primaryType: "EIP712Domain",
+      types: {},
+    });
+    expect(signature).toBe("0xsignature");
+  });
+});