@multiplatform.one/web3 7.26.0 → 7.28.1

package/src/providers/WalletProvider.tsx

@@ -1,23 +1,47 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ConnectKitProvider, SIWEProvider, type SIWEConfig, getDefaultConfig } from "../connectkit";
-import { isWeb } from "@multiplatform.one/platform";
-import type { PropsWithChildren } from "react";
+import type { ComponentProps, PropsWithChildren } from "react";
 import { useMemo } from "react";
-import { WagmiProvider, createConfig, http } from "wagmi";
+import { WagmiProvider, createConfig } from "wagmi";
+import type { WalletFamily } from "../core/family";
+import { SignInProvider, type SignInConfig } from "../core/signIn";
+import { walletFamilies } from "../families";
+import { wagmiHosting, type HostedEcosystem } from "../families/host";
+import { WagmiConnectionHost } from "../wagmi/host";
 import { createMockConnector } from "./mockConnector";
-import { type Web3Config, Web3ConfigContext, resolveChains } from "./walletConfig";
+import { familiesKey, withFamilyProviders } from "./families";
+import { type Web3Config, Web3ConfigContext, chainTransports, resolveChains } from "./walletConfig";
 
-export interface WalletProviderProps extends PropsWithChildren {
+export interface Web3ProviderProps extends PropsWithChildren {
   config: Web3Config;
+  /**
+   * The wallet families, in the connect list's order:
+   * `[eth(), sol(), gpg()]`. Defaults to the ones `config.families` names, or
+   * every built-in family; pass one or the other, not both. Read once per set
+   * of families, so an inline array is fine.
+   */
+  families?: readonly WalletFamily[];
   queryClient?: QueryClient;
+  /**
+   * Mounts a SignInProvider on the connection store, e.g.
+   * `kc.signInConfig(grant.onSign)` for `useDirectLogin`: the connected
+   * wallet, of whichever family, signs its own message.
+   */
+  signIn?: SignInConfig;
   /**
    * Mounts a SIWEProvider around the ConnectKit modal, e.g.
    * `kc.siweConfig(grant.onSign)` for `useDirectLogin`. It has to sit outside
    * ConnectKitProvider, so a child cannot add its own.
+   * @deprecated SIWEProvider goes in 8.0.0; pass `signIn={kc.signInConfig(onSign)}`.
    */
-  siwe?: SIWEConfig;
+  siwe?: SIWEConfig & Pick<ComponentProps<typeof SIWEProvider>, "onSignIn" | "onSignOut">;
+  /** Props for the ConnectKitProvider it mounts, e.g. `{ options: { disableSiweRedirect: true } }`. */
+  connectKit?: Omit<ComponentProps<typeof ConnectKitProvider>, "children">;
 }
 
+/** Web3Provider's props under the provider's first name. */
+export type WalletProviderProps = Web3ProviderProps;
+
 const defaultQueryClient = new QueryClient();
 
 // Build the wagmi config once per process. useMemo only dedupes within a single
@@ -27,24 +51,55 @@ const defaultQueryClient = new QueryClient();
 type WagmiConfigResult = ReturnType<typeof createConfig>;
 const wagmiConfigCache = new Map<string, WagmiConfigResult>();
 
-export function WalletProvider({
+const walletEcosystems = ["solana", "sui", "bitcoin"] as const;
+
+function hosts(families: readonly WalletFamily[], ecosystem: HostedEcosystem) {
+  return families.some((family) => wagmiHosting(family)?.ecosystem === ecosystem);
+}
+
+/**
+ * The wallet families an app registers, with the connection store, the
+ * ConnectKit modal and wagmi underneath: `<Web3Provider config={...}
+ * families={[eth(), sol(), gpg()]}>`. `useConnection()` reports the one
+ * active connection whichever family holds it, and the modal lists the
+ * wallets of the families registered. Until the modal reads the connection
+ * store (MPO-385 step 6), eth, sol, sui and btc connect through the modal's
+ * wagmi config, so both see the same connection.
+ */
+export function Web3Provider({
   children,
   config: web3Config,
+  families,
   queryClient = defaultQueryClient,
+  signIn,
   siwe,
-}: WalletProviderProps) {
+  connectKit,
+}: Web3ProviderProps) {
   const {
     walletConnectProjectId,
     appName,
     appDescription = "Connect your wallet",
-    appUrl = isWeb && typeof window !== "undefined" ? window.location.origin : "",
+    // Not @multiplatform.one/platform's isWeb: that package reads process.env
+    // at load, which a plain web bundle lacks (MPO-418).
+    appUrl = typeof window !== "undefined" ? (window.location?.origin ?? "") : "",
     appIcon,
     chains,
     enableTestnets = false,
     localnet = false,
     localnetRpcUrl,
     mockWallet = false,
+    families: familyNames,
   } = web3Config;
+  if (families && familyNames) {
+    throw new Error("Web3Provider takes families or config.families, not both");
+  }
+  const namesKey = familyNames?.join(",");
+  const listedKey = families ? familiesKey(families) : `names:${namesKey ?? ""}`;
+  const listed = useMemo(
+    () => families ?? walletFamilies(familyNames),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listedKey],
+  );
 
   // Testnet filter + optional localnet dev chain (prepended -> default chain).
   const activeChains = useMemo(
@@ -54,6 +109,12 @@ export function WalletProvider({
   );
 
   const wagmiConfig = useMemo(() => {
+    const provided = listed
+      .map((family) => wagmiHosting(family))
+      .find((hosting) => hosting?.ecosystem === "evm")?.config;
+    if (provided) return provided;
+    const evm = hosts(listed, "evm");
+    const ecosystems = walletEcosystems.filter((ecosystem) => hosts(listed, ecosystem));
     const chainIds = activeChains.map((chain) => chain.id).join(",");
     const cacheKey = JSON.stringify({
       appName,
@@ -63,11 +124,13 @@ export function WalletProvider({
       chainIds,
       localnetRpcUrl,
       mockWallet,
+      evm,
+      ecosystems,
     });
     const cached = wagmiConfigCache.get(cacheKey);
     if (cached) return cached;
 
-    const transports = Object.fromEntries(activeChains.map((chain) => [chain.id, http()]));
+    const transports = chainTransports(activeChains);
 
     const defaultConfig = getDefaultConfig({
       appName,
@@ -77,6 +140,8 @@ export function WalletProvider({
       walletConnectProjectId,
       chains: activeChains,
       transports,
+      enableWallet: ecosystems,
+      ...(evm ? {} : { connectors: [], multiInjectedProviderDiscovery: false }),
     });
 
     // E2E only: make the deterministic mock the first connector so headless
@@ -88,25 +153,31 @@ export function WalletProvider({
     const created = createConfig(defaultConfig);
     wagmiConfigCache.set(cacheKey, created);
     return created;
-  }, [appName, appDescription, appUrl, appIcon, activeChains, mockWallet]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appName, appDescription, appUrl, appIcon, activeChains, mockWallet, listed]);
+
+  const modal = <ConnectKitProvider {...connectKit}>{children}</ConnectKitProvider>;
+  const signed = signIn ? <SignInProvider {...signIn}>{modal}</SignInProvider> : modal;
 
   return (
     <Web3ConfigContext.Provider value={web3Config}>
       <WagmiProvider config={wagmiConfig}>
         <QueryClientProvider client={queryClient}>
-          {siwe ? (
-            <SIWEProvider {...siwe}>
-              <ConnectKitProvider>{children}</ConnectKitProvider>
-            </SIWEProvider>
-          ) : (
-            <ConnectKitProvider>{children}</ConnectKitProvider>
-          )}
+          <WagmiConnectionHost families={listed}>
+            {withFamilyProviders(
+              listed,
+              siwe ? <SIWEProvider {...siwe}>{signed}</SIWEProvider> : signed,
+            )}
+          </WagmiConnectionHost>
         </QueryClientProvider>
       </WagmiProvider>
     </Web3ConfigContext.Provider>
   );
 }
 
+/** Web3Provider under its first name. */
+export const WalletProvider = Web3Provider;
+
 export { useWalletBridge, type WalletBridgeContextValue } from "./walletBridge";
 export { defaultChains } from "./walletConfig";
-export { useWeb3Config, type Web3Config } from "./walletConfig";
+export { useWeb3Config, type ConnectorFamily, type Web3Config } from "./walletConfig";

package/src/providers/families.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import type { WalletFamily } from "../core/family";
+import { wagmiHosting } from "../families/host";
+
+const ids = new WeakMap<object, number>();
+let next = 0;
+const idOf = (value: object) => {
+  let id = ids.get(value);
+  if (id === undefined) {
+    id = ++next;
+    ids.set(value, id);
+  }
+  return id;
+};
+
+/**
+ * What decides whether a provider's families changed: each family's id and,
+ * for a built-in one, how it is set up, so `families={[eth(), sol()]}`
+ * written inline keeps one connection store across renders. A family of the
+ * app's own is read once per id.
+ */
+export function familiesKey(families: readonly WalletFamily[]): string {
+  return families
+    .map((family) => {
+      const hosting = wagmiHosting(family);
+      if (!hosting) return `${family.id}:own`;
+      const config = hosting.config ? idOf(hosting.config) : 0;
+      return `${family.id}:${hosting.ecosystem}:${hosting.chainId ?? ""}:${config}`;
+    })
+    .join(",");
+}
+
+/** The families' own providers around the app, the first family's outermost. */
+export function withFamilyProviders(families: readonly WalletFamily[], children: ReactNode) {
+  return families.reduceRight<ReactNode>(
+    (inner, family) => (family.Provider ? <family.Provider>{inner}</family.Provider> : inner),
+    children,
+  );
+}

package/src/providers/index.ts

@@ -1,9 +1,12 @@
 export {
   WalletProvider,
+  Web3Provider,
   useWeb3Config,
   defaultChains,
   useWalletBridge,
   type WalletBridgeContextValue,
+  type ConnectorFamily,
   type WalletProviderProps,
   type Web3Config,
+  type Web3ProviderProps,
 } from "./WalletProvider";

package/src/providers/walletConfig.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { hardhat, mainnet, sepolia } from "wagmi/chains";
-import { defaultChains, resolveChains, type Web3Config } from "./walletConfig";
+import { chainTransports, defaultChains, resolveChains, type Web3Config } from "./walletConfig";
 
 const base: Web3Config = { appName: "test" };
 
@@ -40,3 +40,21 @@ describe("resolveChains", () => {
     expect(resolveChains(base).map((c) => c.id)).not.toContain(hardhat.id);
   });
 });
+
+describe("chainTransports", () => {
+  it("gives every chain an http transport on its default RPC, localnet included", () => {
+    const chains = resolveChains({
+      ...base,
+      localnet: true,
+      localnetRpcUrl: "http://10.0.2.2:8545",
+    });
+    const transports = chainTransports(chains);
+    expect(Object.keys(transports).map(Number).sort()).toEqual(chains.map((c) => c.id).sort());
+    for (const chain of chains) {
+      const transport = transports[chain.id]({ chain });
+      expect(transport.config.type).toBe("http");
+      expect(transport.value?.url).toBe(chain.rpcUrls.default.http[0]);
+    }
+    expect(transports[hardhat.id]({ chain: chains[0] }).value?.url).toBe("http://10.0.2.2:8545");
+  });
+});

package/src/providers/walletConfig.ts

@@ -1,7 +1,9 @@
+import type { Ecosystem } from "@multiplatform.one/connectkit";
 import { createContext, useContext } from "react";
-import type { Chain } from "viem";
+import { http, type Chain, type Transport } from "viem";
 import { arbitrum, base, hardhat, mainnet, optimism, polygon, sepolia } from "wagmi/chains";
 import type { AuthKeycloakConfig, AuthOnboardingConfig } from "../bridge/authTypes";
+import { toWalletMessageFamily, type SignerFamily } from "../message/buildWalletMessage";
 
 /**
  * Shared config seam for both platform variants of WalletProvider. Keeping the
@@ -18,6 +20,9 @@ export const defaultChains: readonly [Chain, ...Chain[]] = [
   sepolia,
 ];
 
+/** A family the connect modal can list: `eth` (or `evm`), `sol` (`solana`), `sui`, `btc` (`bitcoin`). */
+export type ConnectorFamily = Exclude<SignerFamily, "gpg">;
+
 export interface Web3Config {
   /** @deprecated Ignored: no connector needs a project id. Removed in the next major. */
   walletConnectProjectId?: string;
@@ -38,6 +43,12 @@ export interface Web3Config {
    * http://10.0.2.2:8545 on Android).
    */
   localnetRpcUrl?: string;
+  /**
+   * Web: the wallet families the connect modal lists, e.g. `["eth"]` on a page
+   * that can only use an EVM wallet. Defaults to every family, which lists the
+   * EVM wallets and any Solana, Sui or Bitcoin wallet found on the page.
+   */
+  families?: readonly ConnectorFamily[];
   /** Solana JSON-RPC endpoint (native bridge + web). */
   solanaRpcUrl?: string;
   /** Sui JSON-RPC endpoint (native bridge + web). */
@@ -61,13 +72,19 @@ export interface Web3Config {
   auth?: { keycloak?: AuthKeycloakConfig; onboarding?: AuthOnboardingConfig };
 }
 
+/** The part of a Web3Config that picks the EVM chains and where they are read. */
+export type Web3ChainConfig = Pick<
+  Web3Config,
+  "chains" | "enableTestnets" | "localnet" | "localnetRpcUrl"
+>;
+
 /**
  * Resolve the active chain list for a Web3Config: apply the testnet filter,
  * then (when `localnet` is on) prepend the hardhat dev chain so it becomes
  * wagmi's default chain. Shared by the web and native WalletProviders so both
  * platforms point at the same networks.
  */
-export function resolveChains(config: Web3Config): readonly [Chain, ...Chain[]] {
+export function resolveChains(config: Web3ChainConfig): readonly [Chain, ...Chain[]] {
   const {
     chains = defaultChains,
     enableTestnets = false,
@@ -85,6 +102,67 @@ export function resolveChains(config: Web3Config): readonly [Chain, ...Chain[]]
   return active as unknown as readonly [Chain, ...Chain[]];
 }
 
+/**
+ * The transport each chain is read over: http on the chain's default RPC,
+ * which resolveChains points at localnetRpcUrl for the dev chain. The
+ * WalletProviders and evmReadClients share it, so reads before a wallet
+ * connects go where the wallet side's do.
+ */
+export function chainTransports(chains: readonly Chain[]): Record<number, Transport> {
+  return Object.fromEntries(chains.map((chain) => [chain.id, http()]));
+}
+
+type WalletEcosystem = Exclude<Ecosystem, "evm">;
+
+const walletEcosystems: [family: string, ecosystem: WalletEcosystem][] = [
+  ["sol", "solana"],
+  ["sui", "sui"],
+  ["btc", "bitcoin"],
+];
+
+const connectorFamilies = new Set(["eth", "sol", "sui", "btc"]);
+
+function shortFamily(family: string): string | undefined {
+  try {
+    const short: unknown = toWalletMessageFamily(family as SignerFamily);
+    return typeof short === "string" && connectorFamilies.has(short) ? short : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Resolve `families` to whether the EVM wallets are listed and which non-EVM
+ * ecosystems are. Throws on `gpg`, which has no wallet connector, on a name it
+ * does not know, and on an empty list.
+ */
+export function resolveFamilies(config: Pick<Web3Config, "families">): {
+  evm: boolean;
+  ecosystems: WalletEcosystem[];
+} {
+  const { families } = config;
+  if (!families) return { evm: true, ecosystems: ["solana", "sui", "bitcoin"] };
+  if (families.length === 0) {
+    throw new Error("Web3Config.families lists no family; leave it out to list every family");
+  }
+  const short = new Set<string>();
+  for (const family of families) {
+    const resolved = shortFamily(family);
+    if (!resolved) {
+      throw new Error(
+        `Web3Config.families: ${JSON.stringify(family)} is not a wallet family; use eth, sol, sui or btc`,
+      );
+    }
+    short.add(resolved);
+  }
+  return {
+    evm: short.has("eth"),
+    ecosystems: walletEcosystems
+      .filter(([family]) => short.has(family))
+      .map(([, ecosystem]) => ecosystem),
+  };
+}
+
 export const Web3ConfigContext = createContext<Web3Config | null>(null);
 
 export function useWeb3Config(): Web3Config {