@multiplatform.one/web3 7.25.0 → 7.28.0

package/src/providers/WalletProvider.spec.tsx

@@ -0,0 +1,521 @@
+// @vitest-environment happy-dom
+import { useContext as useConnectKitContext } from "@multiplatform.one/connectkit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import { connect as wagmiConnect } from "@wagmi/core";
+import { verifyMessage, type Address } from "viem";
+import { createContext, useContext } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { type Config, WagmiProvider, createConfig, http, useAccount, useConfig } from "wagmi";
+import { mainnet } from "wagmi/chains";
+import { ConnectKitProvider } from "../connectkit";
+import { defineWalletFamily } from "../core/family";
+import { useConnection, useConnectionStore } from "../core/react";
+import { useSignIn, type SignIn, type SignInCredential } from "../core/signIn";
+import type { ConnectionStore } from "../core/store";
+import type { ConnectionState } from "../core/types";
+import { eth, gpg, sol } from "../families";
+import { createMockConnector } from "./mockConnector";
+import { SiweHost, hostChains } from "../../tests/fixtures/siweHost";
+import * as web3 from "../index";
+import type { SIWEConfig } from "../connectkit";
+import { SIWEContext, type SIWEContextValue } from "../connectkit/siwe/SIWEContext";
+import { SolanaAdapter } from "../connectkit/adapters/SolanaAdapter";
+import { ensureWalletConnectors } from "../connectkit/connectors/ensureWalletConnectors";
+import {
+  SOLANA_CHAIN_ID,
+  BITCOIN_CHAIN_ID,
+  bitcoinChain,
+} from "../connectkit/connectors/syntheticChains";
+import { walletAdapterConnector } from "../connectkit/connectors/walletAdapterConnector";
+import { useWallets } from "../connectkit/wallets/useWallets";
+import { WalletProvider, Web3Provider } from "./WalletProvider";
+import type { Web3Config } from "./walletConfig";
+
+type Seen = {
+  wallets: { id: string; name: string }[];
+  chainIds: number[];
+};
+
+function ListProbe({ seen }: { seen: Seen }) {
+  seen.wallets = useWallets().map((w) => ({ id: w.id, name: w.name ?? w.id }));
+  seen.chainIds = useConfig().chains.map((c) => c.id);
+  return null;
+}
+
+let app = 0;
+function list(config: Omit<Web3Config, "appName">) {
+  const seen: Seen = { wallets: [], chainIds: [] };
+  app += 1;
+  render(
+    <WalletProvider config={{ appName: `families ${app}`, ...config }}>
+      <ListProbe seen={seen} />
+    </WalletProvider>,
+  );
+  return seen;
+}
+
+type Injected = { phantom?: unknown; solana?: unknown; unisat?: unknown };
+
+// EIP-6963 announcements, as MetaMask and Phantom's EVM side make on a real page.
+function announceEvmWallets() {
+  const announce = () => {
+    for (const [rdns, name] of [
+      ["io.metamask", "MetaMask"],
+      ["app.phantom", "Phantom"],
+    ]) {
+      const provider = { request: async () => null, on: () => {}, removeListener: () => {} };
+      window.dispatchEvent(
+        new CustomEvent("eip6963:announceProvider", {
+          detail: Object.freeze({ info: { uuid: rdns, name, icon: "data:,", rdns }, provider }),
+        }),
+      );
+    }
+  };
+  window.addEventListener("eip6963:requestProvider", announce);
+  announce();
+  return () => window.removeEventListener("eip6963:requestProvider", announce);
+}
+
+let unannounce: (() => void) | undefined;
+
+beforeEach(() => {
+  const w = window as unknown as Injected;
+  w.phantom = { solana: { isPhantom: true } };
+  w.unisat = {};
+});
+
+afterEach(() => {
+  cleanup();
+  unannounce?.();
+  unannounce = undefined;
+  const w = window as unknown as Injected;
+  delete w.phantom;
+  delete w.solana;
+  delete w.unisat;
+});
+
+describe("WalletProvider families", () => {
+  it("lists every family's wallets when families is left out", async () => {
+    const seen = list({});
+    await waitFor(() =>
+      expect(seen.wallets.map((w) => w.id)).toEqual(
+        expect.arrayContaining(["metaMaskSDK", "wallet:solana:phantom", "wallet:bitcoin:unisat"]),
+      ),
+    );
+    expect(seen.chainIds).toEqual(expect.arrayContaining([SOLANA_CHAIN_ID, BITCOIN_CHAIN_ID]));
+  });
+
+  it("lists only MetaMask and Coinbase Wallet for eth, with Phantom and UniSat on the page", async () => {
+    const seen = list({ families: ["eth"] });
+    await waitFor(() => expect(seen.wallets.length).toBeGreaterThan(0));
+    // The bridge re-discovers wallets on mount and on timers after it; let one pass run.
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 400));
+    });
+    expect(seen.wallets.map((w) => w.name).sort()).toEqual(["Coinbase Wallet", "MetaMask"]);
+    expect(seen.chainIds).not.toContain(SOLANA_CHAIN_ID);
+    expect(seen.chainIds).not.toContain(BITCOIN_CHAIN_ID);
+  });
+
+  it("takes the ecosystem names as aliases and lists only the families asked for", async () => {
+    const seen = list({ families: ["evm", "solana"] });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 400));
+    });
+    const ids = seen.wallets.map((w) => w.id);
+    expect(ids).toEqual(expect.arrayContaining(["metaMaskSDK", "wallet:solana:phantom"]));
+    expect(ids).not.toContain("wallet:bitcoin:unisat");
+    expect(seen.chainIds).toContain(SOLANA_CHAIN_ID);
+    expect(seen.chainIds).not.toContain(BITCOIN_CHAIN_ID);
+  });
+
+  it("keeps a wallet's EIP-6963 EVM provider under eth, and drops its Solana side", async () => {
+    unannounce = announceEvmWallets();
+    const seen = list({ families: ["eth"] });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 400));
+    });
+    expect(seen.wallets.map((w) => w.name).sort()).toEqual([
+      "Coinbase Wallet",
+      "MetaMask",
+      "Phantom",
+    ]);
+    expect(seen.wallets.map((w) => w.id)).toContain("app.phantom");
+  });
+
+  it("leaves the EVM wallets out when eth is not listed, announced ones included", async () => {
+    unannounce = announceEvmWallets();
+    const seen = list({ families: ["sol"] });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 400));
+    });
+    expect(seen.wallets.map((w) => w.id)).toEqual(["wallet:solana:phantom"]);
+  });
+
+  it("refuses gpg, an unknown family and an empty list", () => {
+    for (const families of [["gpg"], ["doge"], []]) {
+      expect(() =>
+        render(
+          <WalletProvider config={{ appName: "refused", families: families as never }}>
+            {null}
+          </WalletProvider>,
+        ),
+      ).toThrow(/families/);
+    }
+  });
+});
+
+describe("late wallet discovery", () => {
+  it("adds only the ecosystems a config lists, through a synthetic chain or a wallet connector", () => {
+    const phantom = walletAdapterConnector({
+      id: "wallet:solana:phantom",
+      name: "Phantom",
+      ecosystem: "solana",
+      adapter: new SolanaAdapter(),
+    });
+    const handBuilt = createConfig({
+      chains: [mainnet],
+      connectors: [phantom],
+      transports: { [mainnet.id]: http() },
+    });
+    expect(ensureWalletConnectors(handBuilt)).toBe(0);
+    expect(handBuilt.connectors.map((c) => c.id)).not.toContain("wallet:bitcoin:unisat");
+
+    const withBitcoin: Config = createConfig({
+      chains: [mainnet, bitcoinChain],
+      transports: { [mainnet.id]: http(), [bitcoinChain.id]: http() },
+    });
+    expect(ensureWalletConnectors(withBitcoin)).toBe(1);
+    expect(withBitcoin.connectors.map((c) => c.id)).toEqual(["wallet:bitcoin:unisat"]);
+  });
+});
+
+describe("WalletProvider connectKit", () => {
+  it("hands its props to the ConnectKitProvider it mounts", async () => {
+    let options: { disableSiweRedirect?: boolean } | undefined;
+    function Probe() {
+      options = useConnectKitContext().options as typeof options;
+      return null;
+    }
+    render(
+      <WalletProvider
+        config={{ appName: "connectKit options" }}
+        connectKit={{ options: { disableSiweRedirect: true } }}
+      >
+        <Probe />
+      </WalletProvider>,
+    );
+    await waitFor(() => expect(options?.disableSiweRedirect).toBe(true));
+  });
+});
+
+describe("a SIWE host on WalletProvider", () => {
+  it("gets BSC and the testnets from the package root", () => {
+    expect(web3.bsc.id).toBe(56);
+    expect(web3.bscTestnet.id).toBe(97);
+    expect(web3.baseSepolia.id).toBe(84532);
+    expect(web3.polygonAmoy.id).toBe(80002);
+    expect(web3.optimismSepolia.id).toBe(11155420);
+    expect(web3.arbitrumSepolia.id).toBe(421614);
+  });
+
+  it("signs in through the SIWEProvider WalletProvider mounts", async () => {
+    let issued = 0;
+    let current: string | undefined;
+    let signer: Address | undefined;
+    let session: { address: Address; chainId: number } | null = null;
+    const verified: string[] = [];
+    const siwe: SIWEConfig = {
+      getNonce: async () => {
+        issued += 1;
+        current = `nonce${issued}`;
+        return current;
+      },
+      createMessage: ({ address, chainId, nonce }) => {
+        signer = address;
+        return web3.buildWalletMessage("eth", {
+          address,
+          chainId,
+          nonce,
+          domain: "app.example.com",
+          uri: "https://app.example.com",
+        });
+      },
+      verifyMessage: async ({ message, signature }) => {
+        const nonce = message.match(/\nNonce: (\S+)\n/)?.[1];
+        if (!nonce || nonce !== current || !signer) return false;
+        current = undefined;
+        if (!(await verifyMessage({ address: signer, message, signature: signature as never })))
+          return false;
+        verified.push(nonce);
+        session = { address: signer, chainId: 1 };
+        return true;
+      },
+      getSession: async () => session,
+      signOut: async () => {
+        session = null;
+        return true;
+      },
+    };
+
+    const live: { connector?: string; siwe?: SIWEContextValue | null } = {};
+    function Probe() {
+      live.connector = useAccount().connector?.id;
+      live.siwe = useContext(SIWEContext);
+      return null;
+    }
+    const onSignIn = vi.fn();
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    render(
+      <SiweHost appName="siwe host" siwe={{ ...siwe, onSignIn }} queryClient={queryClient}>
+        <Probe />
+      </SiweHost>,
+    );
+    // The mock wallet is always authorized, so wagmi reconnects it on mount.
+    await waitFor(() => expect(live.connector).toBe("mockWallet"));
+
+    let result: unknown;
+    await act(async () => {
+      result = await live.siwe!.signIn();
+    });
+    expect(result).toMatchObject({ address: signer, chainId: 1 });
+    expect(onSignIn).toHaveBeenCalledWith({ address: signer, chainId: 1 });
+    expect(verified).toHaveLength(1);
+    expect(hostChains.map((c) => c.id)).toContain(56);
+  });
+});
+
+describe("Web3Provider and the connection store", () => {
+  type Live = { state?: ConnectionState; store?: ConnectionStore; config?: Config };
+  function StoreProbe({ live }: { live: Live }) {
+    live.state = useConnection();
+    live.store = useConnectionStore();
+    live.config = useConfig();
+    return null;
+  }
+
+  it("is WalletProvider, and useConnection reports the wallet wagmi restores", async () => {
+    expect(WalletProvider).toBe(Web3Provider);
+    const live: Live = {};
+    render(
+      <WalletProvider config={{ appName: "store restore", families: ["eth"], mockWallet: true }}>
+        <StoreProbe live={live} />
+      </WalletProvider>,
+    );
+    await waitFor(() =>
+      expect(live.state).toMatchObject({
+        status: "connected",
+        family: "eth",
+        connector: { id: "mockWallet" },
+        chainId: 1,
+      }),
+    );
+    expect(live.store?.registry.families.map((family) => family.id)).toEqual(["eth"]);
+    await waitFor(() => expect(live.state?.client).not.toBeNull());
+    const signature = await live.state!.client!.signMessage("hello");
+    expect(
+      await verifyMessage({
+        address: live.state!.address as Address,
+        message: "hello",
+        signature: signature as `0x${string}`,
+      }),
+    ).toBe(true);
+  });
+
+  it("signs in on the connection store through the SignInProvider signIn mounts", async () => {
+    const live: Live & { signIn?: SignIn } = {};
+    function Probe() {
+      live.signIn = useSignIn();
+      return <StoreProbe live={live} />;
+    }
+    const onSign = vi.fn<(credential: SignInCredential) => boolean>(() => true);
+    render(
+      <Web3Provider
+        config={{ appName: "store sign-in", families: ["eth"], mockWallet: true }}
+        signIn={{ getNonce: async () => "nonce-7", onSign, domain: "app.example.com" }}
+      >
+        <Probe />
+      </Web3Provider>,
+    );
+    await waitFor(() => expect(live.state?.status).toBe("connected"));
+
+    let accepted: boolean | undefined;
+    await act(async () => {
+      accepted = await live.signIn!.signIn();
+    });
+
+    expect(accepted).toBe(true);
+    expect(live.signIn!.status).toBe("success");
+    const [{ username, message }] = onSign.mock.calls[0];
+    expect(message.split("\n")[0]).toBe(
+      "app.example.com wants you to sign in with your Ethereum account:",
+    );
+    expect(message).toContain("Nonce: nonce-7");
+    expect(
+      await verifyMessage({
+        address: live.state!.address as Address,
+        message,
+        signature: username as `0x${string}`,
+      }),
+    ).toBe(true);
+  });
+
+  it("registers every built-in family, GPG included, when given none", () => {
+    const live: Live = {};
+    render(
+      <Web3Provider config={{ appName: "store defaults" }}>
+        <StoreProbe live={live} />
+      </Web3Provider>,
+    );
+    expect(live.store?.registry.families.map((family) => family.id)).toEqual([
+      "eth",
+      "sol",
+      "sui",
+      "btc",
+      "gpg",
+    ]);
+    expect(live.store?.registry.messages.build("gpg", { nonce: "n", domain: "a.example" })).toMatch(
+      /^a\.example wants you to sign in with your GPG key\./,
+    );
+  });
+
+  it("lists only the wallets of the families it is given", async () => {
+    const seen: Seen = { wallets: [], chainIds: [] };
+    const live: Live = {};
+    render(
+      <Web3Provider config={{ appName: "families prop" }} families={[eth()]}>
+        <ListProbe seen={seen} />
+        <StoreProbe live={live} />
+      </Web3Provider>,
+    );
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 400));
+    });
+    expect(seen.wallets.map((w) => w.name).sort()).toEqual(["Coinbase Wallet", "MetaMask"]);
+    expect(seen.chainIds).not.toContain(SOLANA_CHAIN_ID);
+    expect(live.store?.registry.families.map((family) => family.id)).toEqual(["eth"]);
+  });
+
+  it("refuses families together with config.families", () => {
+    expect(() =>
+      render(
+        <Web3Provider config={{ appName: "both", families: ["eth"] }} families={[eth()]}>
+          {null}
+        </Web3Provider>,
+      ),
+    ).toThrow(/families or config.families/);
+  });
+
+  it("runs on the wagmi config eth() is given", async () => {
+    const given = createConfig({
+      chains: [mainnet],
+      connectors: [createMockConnector()],
+      transports: { [mainnet.id]: http() },
+    });
+    const live: Live = {};
+    render(
+      <Web3Provider config={{ appName: "given config" }} families={[eth({ config: given })]}>
+        <StoreProbe live={live} />
+      </Web3Provider>,
+    );
+    expect(live.config).toBe(given);
+    await waitFor(() =>
+      expect(live.state).toMatchObject({ family: "eth", connector: { id: "mockWallet" } }),
+    );
+  });
+
+  it("keeps one store while families written inline re-render", () => {
+    const live: Live = {};
+    const tree = () => (
+      <Web3Provider config={{ appName: "inline families" }} families={[eth(), sol(), gpg()]}>
+        <StoreProbe live={live} />
+      </Web3Provider>
+    );
+    const { rerender } = render(tree());
+    const first = live.store;
+    rerender(tree());
+    expect(live.store).toBe(first);
+  });
+
+  it("mounts each family's Provider around the app", () => {
+    const Marker = createContext<string>("none");
+    const cosmos = defineWalletFamily({
+      id: "cosmos",
+      label: "Cosmos",
+      message: { header: "wants you to sign in:", statement: null, chainId: null },
+      connectionless: true,
+      Provider: ({ children }) => <Marker.Provider value="cosmos">{children}</Marker.Provider>,
+    });
+    let seen = "";
+    function MarkerProbe() {
+      seen = useContext(Marker);
+      return null;
+    }
+    render(
+      <Web3Provider config={{ appName: "family providers" }} families={[eth(), cosmos]}>
+        <MarkerProbe />
+      </Web3Provider>,
+    );
+    expect(seen).toBe("cosmos");
+  });
+
+  it("a Solana wallet the modal connects is the store's sol connection", async () => {
+    const publicKey = { toString: () => "7EcDhSYGxXyscszYEp35KHN8vvw3svAuLKTzXwCFLtV" };
+    const signature = new Uint8Array(64).fill(7);
+    (window as unknown as Injected).phantom = {
+      solana: {
+        isPhantom: true,
+        publicKey: null,
+        connect: vi.fn(async () => ({ publicKey })),
+        disconnect: vi.fn(async () => {}),
+        signMessage: vi.fn(async () => ({ signature })),
+      },
+    };
+    const live: Live = {};
+    render(
+      <Web3Provider config={{ appName: "solana handover" }}>
+        <StoreProbe live={live} />
+      </Web3Provider>,
+    );
+    const phantom = await waitFor(() => {
+      const found = live.config?.connectors.find((entry) => entry.id === "wallet:solana:phantom");
+      if (!found) throw new Error("no Phantom yet");
+      return found;
+    });
+    await act(async () => {
+      await wagmiConnect(live.config!, { connector: phantom });
+    });
+    await waitFor(() =>
+      expect(live.state).toMatchObject({
+        status: "connected",
+        family: "sol",
+        address: publicKey.toString(),
+        chainId: "solana:mainnet",
+      }),
+    );
+    await waitFor(() => expect(live.state?.client?.family).toBe("solana"));
+    expect(await live.state!.client!.signMessage("hi")).toMatch(/^[1-9A-HJ-NP-Za-km-z]+$/);
+  });
+
+  it("ConnectKitProvider under a bare WagmiProvider mounts a store of its own", async () => {
+    const given = createConfig({
+      chains: [mainnet],
+      connectors: [createMockConnector()],
+      transports: { [mainnet.id]: http() },
+    });
+    const live: Live = {};
+    render(
+      <WagmiProvider config={given}>
+        <QueryClientProvider client={new QueryClient()}>
+          <ConnectKitProvider>
+            <StoreProbe live={live} />
+          </ConnectKitProvider>
+        </QueryClientProvider>
+      </WagmiProvider>,
+    );
+    await waitFor(() =>
+      expect(live.state).toMatchObject({ family: "eth", connector: { id: "mockWallet" } }),
+    );
+  });
+});