@multiplatform.one/web3 7.26.0 → 7.28.0

package/src/wagmi/host.spec.tsx

@@ -0,0 +1,416 @@
+// @vitest-environment happy-dom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import { connect, createConnector, disconnect } from "@wagmi/core";
+import { StrictMode, type ReactNode } from "react";
+import { getAddress, verifyMessage, type Hex } from "viem";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { WagmiProvider, type Config } from "wagmi";
+import { createWallets } from "../../tests/core/driverContract";
+import { deferred, testDriver } from "../../tests/core/testDriver";
+import { accountFor, keys, scriptedConnector, wagmiConfig } from "../../tests/core/wagmiWallets";
+import { walletAdapterConnector } from "../connectkit/connectors/walletAdapterConnector";
+import { defineWalletFamily } from "../core/family";
+import { useConnection, useConnectionStore } from "../core/react";
+import type { ConnectionStore } from "../core/store";
+import type { ConnectionState } from "../core/types";
+import { eth, gpg, sol } from "../families";
+import { WagmiConnectionHost, hostFamiliesOnWagmi } from "./host";
+
+const signers = Object.values(keys).map(accountFor);
+const byAddress = Object.fromEntries(signers.map((signer) => [signer.address, signer]));
+const [one, two, three] = signers as [
+  (typeof signers)[number],
+  (typeof signers)[number],
+  (typeof signers)[number],
+];
+const phantomAddress = "7EcDhSYGxXyscszYEp35KHN8vvw3svAuLKTzXwCFLtV";
+
+function solanaAdapter() {
+  const adapter = {
+    chain: "solana",
+    address: null as string | null,
+    networkId: null,
+    isConnected: false,
+    connect: vi.fn(async () => {
+      adapter.address = phantomAddress;
+      adapter.isConnected = true;
+    }),
+    disconnect: vi.fn(async () => {
+      adapter.address = null;
+      adapter.isConnected = false;
+    }),
+    buildMessage: async () => "",
+    signMessage: vi.fn(async (message: string) => `signed:${message}`),
+  };
+  return adapter;
+}
+
+function setup() {
+  const wallets = createWallets({
+    "wallet.one": one.address,
+    "wallet.two": two.address,
+    "wallet.three": three.address,
+  });
+  const adapter = solanaAdapter();
+  const config = wagmiConfig([
+    scriptedConnector(wallets, "wallet.one", byAddress),
+    scriptedConnector(wallets, "wallet.two", byAddress),
+    walletAdapterConnector({
+      id: "wallet:solana:phantom",
+      name: "Phantom",
+      ecosystem: "solana",
+      adapter,
+    }) as ReturnType<typeof scriptedConnector>,
+  ]);
+  const connector = (id: string) => config.connectors.find((entry) => entry.id === id)!;
+  return { wallets, adapter, config, connector };
+}
+
+/** Like setup(), but wallet.one's close hangs until `closeOne.resolve()`, as a relay wallet's can. */
+function slowSetup() {
+  const wallets = createWallets({ "wallet.one": one.address, "wallet.two": two.address });
+  const adapter = solanaAdapter();
+  const closeOne = deferred<void>();
+  const inner = scriptedConnector(wallets, "wallet.one", byAddress);
+  const slowOne = createConnector((config) => {
+    const connector = inner(config as never);
+    return {
+      ...connector,
+      async disconnect() {
+        await closeOne.promise;
+        await connector.disconnect();
+      },
+    };
+  }) as ReturnType<typeof scriptedConnector>;
+  const config = wagmiConfig([
+    slowOne,
+    scriptedConnector(wallets, "wallet.two", byAddress),
+    walletAdapterConnector({
+      id: "wallet:solana:phantom",
+      name: "Phantom",
+      ecosystem: "solana",
+      adapter,
+    }) as ReturnType<typeof scriptedConnector>,
+  ]);
+  const connector = (id: string) => config.connectors.find((entry) => entry.id === id)!;
+  const ids = () => [...config.state.connections.values()].map((entry) => entry.connector.id);
+  return { wallets, adapter, config, connector, closeOne, ids };
+}
+
+const pause = (ms: number) => act(() => new Promise<void>((resolve) => setTimeout(resolve, ms)));
+
+type Live = { state?: ConnectionState; store?: ConnectionStore };
+
+function Probe({ live }: { live: Live }) {
+  live.state = useConnection();
+  live.store = useConnectionStore();
+  return null;
+}
+
+const queryClient = new QueryClient();
+
+function Tree({ config, children }: { config: Config; children: ReactNode }) {
+  return (
+    <WagmiProvider config={config} reconnectOnMount={false}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+function mount(config: Config, families = [eth(), sol(), gpg()]) {
+  const live: Live = {};
+  render(
+    <Tree config={config}>
+      <WagmiConnectionHost families={families}>
+        <Probe live={live} />
+      </WagmiConnectionHost>
+    </Tree>,
+  );
+  return live;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("hostFamiliesOnWagmi", () => {
+  it("puts the built-in families on the wagmi config and leaves the app's own and GPG alone", () => {
+    const { config } = setup();
+    const own = testDriver("gpg", [{ id: "own", name: "Own" }], {});
+    const custom = defineWalletFamily({
+      id: "cosmos",
+      label: "Cosmos",
+      message: { header: "wants you to sign in:", statement: null, chainId: null },
+      driver: () => own,
+    });
+    const hosted = hostFamiliesOnWagmi([eth(), sol(), custom, gpg()], config);
+    expect(hosted.map((family) => family.id)).toEqual(["eth", "sol", "cosmos", "gpg"]);
+    expect(
+      hosted[0]!.driver!()
+        .connectors()
+        .map((entry) => entry.id),
+    ).toEqual(["wallet.one", "wallet.two"]);
+    expect(
+      hosted[1]!.driver!()
+        .connectors()
+        .map((entry) => entry.id),
+    ).toEqual(["wallet:solana:phantom"]);
+    expect(hosted[2]).toBe(custom);
+    expect(hosted[3]!.connectionless).toBe(true);
+  });
+});
+
+describe("WagmiConnectionHost", () => {
+  it("takes the connection wagmi opens, with no second prompt, and signs through it", async () => {
+    const { wallets, config, connector } = setup();
+    const live = mount(config);
+    expect(live.state?.status).toBe("disconnected");
+    await act(() => connect(config, { connector: connector("wallet.one") }));
+    await waitFor(() =>
+      expect(live.state).toMatchObject({
+        status: "connected",
+        family: "eth",
+        connector: { id: "wallet.one" },
+        address: getAddress(one.address),
+        chainId: 1,
+      }),
+    );
+    expect(wallets.get("wallet.one").prompts).toBe(1);
+    await waitFor(() => expect(live.state?.client).not.toBeNull());
+    const signature = await live.state!.client!.signMessage("hello");
+    expect(
+      await verifyMessage({ address: one.address, message: "hello", signature: signature as Hex }),
+    ).toBe(true);
+  });
+
+  it("follows a wallet from another family, closing the first connection", async () => {
+    const { wallets, adapter, config, connector } = setup();
+    const live = mount(config);
+    await act(() => connect(config, { connector: connector("wallet.one") }));
+    await waitFor(() => expect(live.state?.family).toBe("eth"));
+    await act(() => connect(config, { connector: connector("wallet:solana:phantom") }));
+    await waitFor(() =>
+      expect(live.state).toMatchObject({
+        status: "connected",
+        family: "sol",
+        connector: { id: "wallet:solana:phantom" },
+        address: phantomAddress,
+        chainId: "solana:mainnet",
+      }),
+    );
+    expect(adapter.connect).toHaveBeenCalledTimes(1);
+    expect([...config.state.connections.values()].map((entry) => entry.connector.id)).toEqual([
+      "wallet:solana:phantom",
+    ]);
+    expect(wallets.get("wallet.one").open).toBe(false);
+    await waitFor(() => expect(live.state?.client).not.toBeNull());
+    expect(await live.state!.client!.signMessage("hi")).toBe("signed:hi");
+  });
+
+  it("follows a switch between two wallets of one family without closing either", async () => {
+    const { wallets, config, connector } = setup();
+    const live = mount(config);
+    await act(() => connect(config, { connector: connector("wallet.one") }));
+    await waitFor(() => expect(live.state?.connector?.id).toBe("wallet.one"));
+    await act(() => connect(config, { connector: connector("wallet.two") }));
+    await waitFor(() =>
+      expect(live.state).toMatchObject({
+        family: "eth",
+        connector: { id: "wallet.two" },
+        address: getAddress(two.address),
+      }),
+    );
+    expect(config.state.connections.size).toBe(2);
+    expect(wallets.get("wallet.one").open).toBe(true);
+  });
+
+  it("clears when wagmi disconnects", async () => {
+    const { config, connector } = setup();
+    const live = mount(config);
+    await act(() => connect(config, { connector: connector("wallet.one") }));
+    await waitFor(() => expect(live.state?.status).toBe("connected"));
+    await act(() => disconnect(config));
+    await waitFor(() => expect(live.state?.status).toBe("disconnected"));
+  });
+
+  it("a connect through the store is wagmi's, so the modal sees it", async () => {
+    const { wallets, config, connector } = setup();
+    const live = mount(config);
+    await act(async () => {
+      await live.store!.connect("eth", "wallet.two");
+    });
+    expect(config.state.status).toBe("connected");
+    expect(config.state.current).toBe(connector("wallet.two").uid);
+    expect(live.state).toMatchObject({ family: "eth", connector: { id: "wallet.two" } });
+    expect(wallets.get("wallet.two").prompts).toBe(1);
+    await act(() => live.store!.disconnect());
+    expect(config.state.status).toBe("disconnected");
+  });
+
+  it("takes a connection wagmi already holds when it mounts", async () => {
+    const { config, connector } = setup();
+    await connect(config, { connector: connector("wallet.one") });
+    const live = mount(config);
+    await waitFor(() =>
+      expect(live.state).toMatchObject({ status: "connected", connector: { id: "wallet.one" } }),
+    );
+  });
+
+  it("leaves a wallet of a family the app did not register alone", async () => {
+    const { config, connector } = setup();
+    const live = mount(config, [eth()]);
+    await act(() => connect(config, { connector: connector("wallet:solana:phantom") }));
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
+    expect(live.state?.status).toBe("disconnected");
+    expect(config.state.status).toBe("connected");
+  });
+
+  it("an inner host on the same config shares the outer store; one on another config has its own", async () => {
+    const { config } = setup();
+    const other = setup().config;
+    const outer: Live = {};
+    const same: Live = {};
+    const nested: Live = {};
+    render(
+      <Tree config={config}>
+        <WagmiConnectionHost>
+          <Probe live={outer} />
+          <WagmiConnectionHost>
+            <Probe live={same} />
+          </WagmiConnectionHost>
+          <Tree config={other}>
+            <WagmiConnectionHost>
+              <Probe live={nested} />
+            </WagmiConnectionHost>
+          </Tree>
+        </WagmiConnectionHost>
+      </Tree>,
+    );
+    expect(same.store).toBe(outer.store);
+    expect(nested.store).not.toBe(outer.store);
+    expect(outer.store?.registry.families.map((family) => family.id)).toEqual([
+      "eth",
+      "sol",
+      "sui",
+      "btc",
+      "gpg",
+    ]);
+  });
+
+  it("survives StrictMode's unmount and remount with a live store", async () => {
+    const { config, connector } = setup();
+    const live: Live = {};
+    render(
+      <StrictMode>
+        <Tree config={config}>
+          <WagmiConnectionHost>
+            <Probe live={live} />
+          </WagmiConnectionHost>
+        </Tree>
+      </StrictMode>,
+    );
+    await act(() => connect(config, { connector: connector("wallet.one") }));
+    await waitFor(() =>
+      expect(live.state).toMatchObject({ status: "connected", connector: { id: "wallet.one" } }),
+    );
+    await act(() => live.store!.disconnect());
+    expect(live.state?.status).toBe("disconnected");
+  });
+
+  it("leaves wagmi's connection open when the store cannot take it", async () => {
+    const { wallets, config } = setup();
+    const live = mount(config);
+    // wagmi's connect({ connector: injected() }) form: a connector the config does not list.
+    await act(() =>
+      connect(config, { connector: scriptedConnector(wallets, "wallet.three", byAddress) }),
+    );
+    await act(() => new Promise((resolve) => setTimeout(resolve, 50)));
+
+    expect(live.state?.status).toBe("disconnected");
+    expect(config.state.status).toBe("connected");
+    expect(wallets.get("wallet.three").open).toBe(true);
+  });
+
+  it("closes a wallet the modal opened while the store's own connect was on its way", async () => {
+    const { wallets, adapter, config, connector } = setup();
+    const live = mount(config);
+    const gate = wallets.hold("wallet.two");
+    let storeConnect!: Promise<unknown>;
+    act(() => {
+      storeConnect = live.store!.connect("eth", "wallet.two");
+    });
+    await act(() => new Promise((resolve) => setTimeout(resolve, 10)));
+    await act(() => connect(config, { connector: connector("wallet:solana:phantom") }));
+    gate.approve();
+    await act(async () => {
+      await storeConnect;
+    });
+
+    await waitFor(() => expect(adapter.isConnected).toBe(false));
+    expect(live.state).toMatchObject({ status: "connected", family: "eth" });
+    await act(() => live.store!.disconnect());
+    await act(() => new Promise((resolve) => setTimeout(resolve, 50)));
+    expect(live.state?.status).toBe("disconnected");
+    expect(config.state.status).toBe("disconnected");
+  });
+
+  it("lets go of such a wallet at once, however long its close takes", async () => {
+    const { adapter, config, connector, closeOne, ids } = slowSetup();
+    const live = mount(config);
+    const prompt = deferred<void>();
+    const connectPhantom = adapter.connect.getMockImplementation()!;
+    adapter.connect.mockImplementationOnce(async () => {
+      await prompt.promise;
+      await connectPhantom();
+    });
+    let storeConnect!: Promise<unknown>;
+    act(() => {
+      storeConnect = live.store!.connect("sol", "wallet:solana:phantom");
+    });
+    await pause(10);
+    await act(() => connect(config, { connector: connector("wallet.one") }));
+    prompt.resolve();
+    await act(async () => {
+      await storeConnect;
+    });
+
+    await waitFor(() => expect(ids()).toEqual(["wallet:solana:phantom"]));
+    expect(live.state).toMatchObject({ status: "connected", family: "sol" });
+
+    await act(() => live.store!.disconnect());
+    await pause(30);
+    closeOne.resolve();
+    await pause(50);
+    expect(live.state?.status).toBe("disconnected");
+    expect(ids()).toEqual([]);
+    expect(adapter.isConnected).toBe(false);
+  });
+
+  it("a wallet picked while a handover waits on a slow close takes over, and the older one goes", async () => {
+    const { wallets, adapter, config, connector, closeOne, ids } = slowSetup();
+    const live = mount(config);
+    await act(() => connect(config, { connector: connector("wallet.one") }));
+    await waitFor(() =>
+      expect(live.state).toMatchObject({ status: "connected", connector: { id: "wallet.one" } }),
+    );
+
+    // Phantom from the modal: the handover waits on wallet.one's close.
+    await act(() => connect(config, { connector: connector("wallet:solana:phantom") }));
+    await pause(10);
+    expect(live.state?.status).toBe("connecting");
+    // wallet.two from the modal while it waits: the user's latest pick.
+    await act(() => connect(config, { connector: connector("wallet.two") }));
+    closeOne.resolve();
+
+    await waitFor(() =>
+      expect(live.state).toMatchObject({ status: "connected", connector: { id: "wallet.two" } }),
+    );
+    await waitFor(() => expect(adapter.isConnected).toBe(false));
+    expect(ids()).toEqual(["wallet.two"]);
+    expect(wallets.get("wallet.two").open).toBe(true);
+    expect(wallets.get("wallet.one").open).toBe(false);
+  });
+});

package/src/wagmi/host.tsx

@@ -0,0 +1,260 @@
+import type { Connector } from "@wagmi/core";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { type Config, useConfig } from "wagmi";
+import { connectorAdapter } from "../clients/adapter";
+import { clientForConnector } from "../clients/connector";
+import { defineWalletFamily, type WalletFamily } from "../core/family";
+import { ConnectionProvider, useOptionalConnectionStore } from "../core/react";
+import { createConnectionStore, type ConnectionStore } from "../core/store";
+import type { ConnectionDriver } from "../core/types";
+import { walletFamilies } from "../families";
+import { wagmiHosting, type HostedEcosystem } from "../families/host";
+import { wagmiDriver } from "./driver";
+
+const ecosystemOf = (connector: Connector): HostedEcosystem =>
+  connectorAdapter(connector) === null
+    ? "evm"
+    : (connector as unknown as { ecosystem: HostedEcosystem }).ecosystem;
+
+/**
+ * Puts the built-in families on one wagmi config: eth over its EVM
+ * connectors, sol, sui and btc over the Solana, Sui and Bitcoin shims the
+ * config lists, each reporting its own chain id and signing through its
+ * shim's adapter. GPG and a family of the app's own keep what they have.
+ * While the ConnectKit modal connects every wallet through wagmi, this makes
+ * the connection store and the modal see one connection (MPO-385 step 5).
+ */
+export function hostFamiliesOnWagmi(
+  families: readonly WalletFamily[],
+  config: Config,
+): WalletFamily[] {
+  return families.map((family) => {
+    const hosting = wagmiHosting(family);
+    if (!hosting) return family;
+    const { ecosystem, chainId, solanaChain } = hosting;
+    if (ecosystem === "evm")
+      return defineWalletFamily({ ...family, driver: () => wagmiDriver(config) });
+    return defineWalletFamily({
+      ...family,
+      driver: () =>
+        wagmiDriver(config, {
+          filter: (connector) => connectorAdapter(connector, ecosystem) !== null,
+          ...(chainId === undefined ? {} : { chainId }),
+          client: (connector) => clientForConnector(connector, solanaChain ? { solanaChain } : {}),
+        }),
+    });
+  });
+}
+
+const HostedConfig = createContext<Config | null>(null);
+const destroyed = new WeakSet<ConnectionStore>();
+
+interface Owned {
+  readonly config: Config;
+  readonly families: readonly WalletFamily[];
+  readonly store: ConnectionStore;
+}
+
+function own(config: Config, families: readonly WalletFamily[]): Owned {
+  // wagmi remembers and restores the connection, so the store keeps nothing.
+  const store = createConnectionStore({
+    families: hostFamiliesOnWagmi(families, config),
+    storage: null,
+  });
+  return { config, families, store };
+}
+
+/**
+ * One store per config and families, destroyed on unmount. StrictMode's
+ * rehearsal unmount destroys the first, so the remount builds another.
+ */
+function useOwnedStore(config: Config, families: readonly WalletFamily[]): ConnectionStore {
+  const [owned, setOwned] = useState(() => own(config, families));
+  let current = owned;
+  if (owned.config !== config || owned.families !== families) {
+    current = own(config, families);
+    setOwned(current);
+  }
+  useEffect(() => {
+    if (destroyed.has(current.store)) {
+      setOwned(own(current.config, current.families));
+      return;
+    }
+    return () => {
+      destroyed.add(current.store);
+      current.store.destroy();
+    };
+  }, [current]);
+  return current.store;
+}
+
+/**
+ * Hands the store every connection wagmi opens outside it: the ConnectKit
+ * modal's, a wagmi hook's, wagmi's own restore on load. Only a wallet of
+ * another family is taken over, which closes the family that was active; the
+ * active family's own driver follows a switch between its wallets. A wallet
+ * the store just let go of is not taken back while wagmi is still closing it,
+ * and a handover the wallet refuses is not asked again until wagmi's
+ * connection changes. A wallet wagmi opens while a handover waits is the
+ * user's later pick and takes over from it.
+ */
+function useWagmiHandover(
+  config: Config,
+  store: ConnectionStore,
+  families: readonly WalletFamily[],
+) {
+  useEffect(() => {
+    const hosted = new Map<HostedEcosystem, string>();
+    for (const family of families) {
+      const hosting = wagmiHosting(family);
+      if (hosting && !hosted.has(hosting.ecosystem)) hosted.set(hosting.ecosystem, family.id);
+    }
+    const held = () => {
+      const { status, family, connector } = store.getState();
+      return status === "connected" && family && connector ? `${family}\n${connector.id}` : null;
+    };
+    let holding = held();
+    let released: string | null = null;
+    let pending: string | null = null;
+    // What the pending handover asked the store for, and the connections wagmi
+    // held when it asked: one wagmi opens after that is newer.
+    let asked: { family: string; connectorId: string; known: Set<string> } | null = null;
+    let refused: string | null = null;
+    const check = () => {
+      const { current, connections, status } = config.state;
+      const connection = status === "connected" && current ? connections.get(current) : undefined;
+      const address = connection?.accounts[0];
+      const family = connection && hosted.get(ecosystemOf(connection.connector));
+      const wallet = connection && family ? `${family}\n${connection.connector.id}` : null;
+      if (wallet !== released) released = null;
+      if (!connection || !address) refused = null;
+      if (!connection || !address || !family || wallet === released) return;
+      const state = store.getState();
+      if (state.status === "connecting" || state.status === "reconnecting") {
+        const waiting =
+          asked !== null &&
+          state.family === asked.family &&
+          state.connector?.id === asked.connectorId;
+        if (!waiting || asked!.known.has(connection.connector.uid)) return;
+      } else if (state.status === "connected" && state.family === family) return;
+      const key = `${wallet}\n${connection.connector.uid}\n${address}`;
+      if (key === pending || key === refused) return;
+      pending = key;
+      asked = {
+        family,
+        connectorId: connection.connector.id,
+        known: new Set(connections.keys()),
+      };
+      store.connect(family, connection.connector.id, { silent: true }).then(
+        () => {
+          if (pending !== key) return;
+          pending = null;
+          asked = null;
+        },
+        () => {
+          refused = key;
+          if (pending !== key) return;
+          pending = null;
+          asked = null;
+        },
+      );
+    };
+    // A wallet of another family that wagmi still holds once the store's own
+    // connect lands, such as one the modal opened while that connect was on
+    // its way: one connection at a time, so it goes. It closes the way the
+    // driver closes, out of wagmi's state first, since wagmi's own disconnect
+    // action keeps a wallet whose close hangs and later writes back
+    // connections that closed meanwhile.
+    const closers = new Map<HostedEcosystem, ConnectionDriver>();
+    const closerFor = (ecosystem: HostedEcosystem) => {
+      let closer = closers.get(ecosystem);
+      if (!closer) {
+        closer = wagmiDriver(config, {
+          filter: (connector) => ecosystemOf(connector) === ecosystem,
+        });
+        closers.set(ecosystem, closer);
+      }
+      return closer;
+    };
+    const closeLeftovers = () => {
+      const { status, family } = store.getState();
+      if (status !== "connected" || !family) return;
+      const others = new Set<HostedEcosystem>();
+      for (const connection of config.state.connections.values()) {
+        const ecosystem = ecosystemOf(connection.connector);
+        const other = hosted.get(ecosystem);
+        if (other && other !== family) others.add(ecosystem);
+      }
+      for (const ecosystem of others) {
+        void closerFor(ecosystem)
+          .disconnect()
+          .catch(() => undefined);
+      }
+    };
+    const onStore = () => {
+      const now = held();
+      if (holding !== null && now !== holding) released = holding;
+      if (now !== null && now !== holding) closeLeftovers();
+      holding = now;
+      check();
+    };
+    check();
+    const stopConfig = config.subscribe((state) => state, check);
+    const stopStore = store.subscribe(onStore);
+    return () => {
+      stopConfig();
+      stopStore();
+    };
+  }, [config, store, families]);
+}
+
+function OwnedHost({
+  config,
+  families,
+  children,
+}: {
+  config: Config;
+  families: readonly WalletFamily[];
+  children?: ReactNode;
+}) {
+  const store = useOwnedStore(config, families);
+  useWagmiHandover(config, store, families);
+  return (
+    <HostedConfig.Provider value={config}>
+      <ConnectionProvider store={store}>{children}</ConnectionProvider>
+    </HostedConfig.Provider>
+  );
+}
+
+export interface WagmiConnectionHostProps {
+  /**
+   * The families to register, in the connect list's order. Kept by identity:
+   * pass a stable array. Left out, the host reuses the store of a host above
+   * on the same wagmi config, or any ConnectionProvider the app mounted, and
+   * otherwise registers every built-in family.
+   */
+  families?: readonly WalletFamily[];
+  children?: ReactNode;
+}
+
+/**
+ * Mounts a connection store over the WagmiProvider above it, so
+ * `useConnection()` reports what the ConnectKit modal and wagmi's hooks
+ * connect, and `useConnectionStore().connect()` goes through wagmi where the
+ * modal sees it. Web3Provider mounts one; so does ConnectKitProvider when no
+ * store is above it.
+ */
+export function WagmiConnectionHost({ families, children }: WagmiConnectionHostProps) {
+  const config = useConfig();
+  const hostedConfig = useContext(HostedConfig);
+  const above = useOptionalConnectionStore();
+  const [implicit] = useState(walletFamilies);
+  if (families === undefined && (hostedConfig === config || (hostedConfig === null && above))) {
+    return <>{children}</>;
+  }
+  return (
+    <OwnedHost config={config} families={families ?? implicit}>
+      {children}
+    </OwnedHost>
+  );
+}

package/src/wagmi/index.ts

@@ -0,0 +1 @@
+export { wagmiDriver, type WagmiDriverOptions } from "./driver";