@multiplatform.one/web3 7.26.0 → 7.28.0

package/src/providers/WalletProvider.native.spec.tsx

@@ -0,0 +1,288 @@
+// @vitest-environment happy-dom
+import { act, cleanup, render } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { forwardRef, useEffect, useImperativeHandle } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { NativeBridgeErrorCode } from "../bridge/nativeHost";
+import type { WalletBridgeContextValue } from "./walletBridge";
+
+// react-native and react-native-webview stand-ins: the sheet is a div that
+// reports whether it takes touches, and the WebView records its props so the
+// spec can play the page's side.
+const rn = vi.hoisted(() => ({
+  appState: new Set<(state: string) => void>(),
+  webview: {
+    props: null as null | Record<string, (event: unknown) => void>,
+    mounts: 0,
+    mounted: false,
+    injected: [] as string[],
+    reloads: 0,
+  },
+}));
+
+vi.mock("react-native", () => ({
+  AppState: {
+    addEventListener(_type: string, listener: (state: string) => void) {
+      rn.appState.add(listener);
+      return { remove: () => rn.appState.delete(listener) };
+    },
+  },
+  Linking: {
+    openURL: async () => undefined,
+    addEventListener: () => ({ remove: () => undefined }),
+    getInitialURL: async () => null,
+  },
+  StyleSheet: { create: <T,>(styles: T) => styles, absoluteFillObject: {} },
+  View: ({ children, pointerEvents }: { children?: ReactNode; pointerEvents?: string }) => (
+    <div data-testid="sheet" data-pointer-events={pointerEvents}>
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock("react-native-webview", () => ({
+  WebView: forwardRef(function WebView(props: Record<string, (event: unknown) => void>, ref) {
+    rn.webview.props = props;
+    useImperativeHandle(ref, () => ({
+      injectJavaScript: (script: string) => rn.webview.injected.push(script),
+      reload: () => {
+        rn.webview.reloads += 1;
+      },
+    }));
+    useEffect(() => {
+      rn.webview.mounts += 1;
+      rn.webview.mounted = true;
+      return () => {
+        rn.webview.mounted = false;
+      };
+    }, []);
+    return null;
+  }),
+}));
+
+const { WalletProvider, Web3Provider, useWalletBridge } = await import("./WalletProvider.native");
+const { useConnection, useConnectionStore } = await import("../core/react");
+const { eth, gpg } = await import("../families");
+const { useOptionalSignIn } = await import("../core/signIn");
+
+const pageUrl = "https://wallet.example.com/webview.html";
+const foreign = "https://evil.example/";
+
+function setup() {
+  let bridge: WalletBridgeContextValue | null = null;
+  function Probe() {
+    bridge = useWalletBridge();
+    return <div>app</div>;
+  }
+  const view = render(
+    <WalletProvider config={{ appName: "spec", webViewUrl: pageUrl }}>
+      <Probe />
+    </WalletProvider>,
+  );
+  const webview = () => {
+    if (!rn.webview.props) throw new Error("no WebView mounted");
+    return rn.webview.props;
+  };
+  const post = (method: string, params?: unknown, from = pageUrl) =>
+    act(() =>
+      webview().onMessage({
+        nativeEvent: {
+          data: JSON.stringify({ ns: "sys", kind: "event", method, params }),
+          url: from,
+        },
+      }),
+    );
+  return {
+    client: () => bridge!.client,
+    sheet: () => view.getByTestId("sheet").getAttribute("data-pointer-events"),
+    ready: () => post("ready", { protocol: 1, namespaces: ["sys", "evm"] }),
+    modalOpen: () => post("modalOpen"),
+    loadStart: (url: string) => act(() => webview().onLoadStart({ nativeEvent: { url } })),
+    foreground: () => act(() => rn.appState.forEach((listener) => listener("active"))),
+  };
+}
+
+beforeEach(() => {
+  rn.appState.clear();
+  rn.webview = { props: null, mounts: 0, mounted: false, injected: [], reloads: 0 };
+});
+afterEach(cleanup);
+
+describe("WalletProvider (native)", () => {
+  it("past the remount cap, releases the sheet and fails requests at once", async () => {
+    const page = setup();
+    page.ready();
+    page.modalOpen();
+    expect(page.sheet()).toBe("auto");
+    page.loadStart(foreign);
+    expect(page.sheet()).toBe("none");
+    expect(rn.webview.mounts).toBe(2);
+    page.loadStart(pageUrl);
+    page.loadStart(foreign);
+    expect(rn.webview.mounts).toBe(3);
+    page.loadStart(pageUrl);
+    // The page opens its sheet again, then a foreign document replaces it past the cap.
+    page.modalOpen();
+    expect(page.sheet()).toBe("auto");
+    page.loadStart(foreign);
+    expect(page.sheet()).toBe("none");
+    expect(rn.webview.mounts).toBe(3);
+    await expect(
+      page.client().request("evm", "eth_requestAccounts", undefined, { timeoutMs: 600_000 }),
+    ).rejects.toMatchObject({ code: NativeBridgeErrorCode.pageStranded });
+  });
+
+  it("an Android pushState on a foreign document before the remount lands remounts once", () => {
+    const page = setup();
+    page.ready();
+    page.loadStart(foreign);
+    page.loadStart(`${foreign}next`);
+    expect(rn.webview.mounts).toBe(2);
+  });
+
+  it("recovers a stranded page when the app returns to the foreground", async () => {
+    const page = setup();
+    page.ready();
+    for (const url of [foreign, pageUrl, foreign, pageUrl, foreign]) page.loadStart(url);
+    // The foreign document is not kept alive behind the app.
+    expect(rn.webview.mounted).toBe(false);
+    expect(rn.webview.mounts).toBe(3);
+    page.foreground();
+    expect(rn.webview.mounted).toBe(true);
+    expect(rn.webview.mounts).toBe(4);
+    const next = page.client().request("evm", "eth_chainId");
+    page.loadStart(pageUrl);
+    const before = rn.webview.injected.length;
+    page.ready();
+    expect(rn.webview.injected.length).toBe(before + 1);
+    expect(rn.webview.injected.at(-1)).toContain("eth_chainId");
+    page.client().rejectPending(new Error("done"));
+    await expect(next).rejects.toThrow("done");
+  });
+
+  it("releases the sheet when the WebView content process dies", () => {
+    const page = setup();
+    page.ready();
+    page.modalOpen();
+    expect(page.sheet()).toBe("auto");
+    act(() => rn.webview.props!.onContentProcessDidTerminate({ nativeEvent: {} }));
+    expect(page.sheet()).toBe("none");
+    expect(rn.webview.reloads).toBe(1);
+  });
+});
+
+describe("Web3Provider (native)", () => {
+  it("is WalletProvider, and puts the bridge's EVM wallet in the connection store", () => {
+    expect(WalletProvider).toBe(Web3Provider);
+    let seen: { status?: string; connectors?: string[]; families?: string[] } = {};
+    function Probe() {
+      const store = useConnectionStore();
+      seen = {
+        status: useConnection().status,
+        connectors: store.connectors().map((entry) => `${entry.family}:${entry.connector.id}`),
+        families: store.registry.families.map((family) => family.id),
+      };
+      return null;
+    }
+    render(
+      <Web3Provider config={{ appName: "native store", webViewUrl: pageUrl }}>
+        <Probe />
+      </Web3Provider>,
+    );
+    expect(seen).toEqual({
+      status: "disconnected",
+      connectors: ["eth:webViewBridge", "sol:webViewSolana", "sui:webViewSui"],
+      families: ["eth", "sol", "sui", "btc", "gpg"],
+    });
+  });
+
+  it("connects a Solana wallet across the bridge's solana namespace", async () => {
+    let store: ReturnType<typeof useConnectionStore> | undefined;
+    let state: ReturnType<typeof useConnection> | undefined;
+    function Probe() {
+      store = useConnectionStore();
+      state = useConnection();
+      return null;
+    }
+    render(
+      <Web3Provider config={{ appName: "native sol", webViewUrl: pageUrl }}>
+        <Probe />
+      </Web3Provider>,
+    );
+    const fromPage = (message: Record<string, unknown>) =>
+      act(() =>
+        rn.webview.props!.onMessage({
+          nativeEvent: { data: JSON.stringify(message), url: pageUrl },
+        }),
+      );
+    fromPage({
+      ns: "sys",
+      kind: "event",
+      method: "ready",
+      params: { protocol: 1, namespaces: ["sys", "evm", "solana"] },
+    });
+
+    let connecting!: Promise<unknown>;
+    act(() => {
+      connecting = store!.connect("sol", "webViewSolana");
+    });
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+    const sent = rn.webview.injected
+      .map((script) => /__bridgeReceive\((".*")\);true;$/.exec(script)?.[1])
+      .filter((raw): raw is string => raw !== undefined)
+      .map((raw) => JSON.parse(JSON.parse(raw)) as { id: string; ns: string; method: string });
+    const request = sent.find((message) => message.ns === "solana" && message.method === "connect");
+    expect(request).toBeDefined();
+    const publicKey = "7EcDhSYGxXyscszYEp35KHN8vvw3svAuLKTzXwCFLtV";
+    fromPage({ id: request!.id, ns: "solana", kind: "res", result: { publicKey } });
+    await act(async () => {
+      await connecting;
+    });
+    expect(state).toMatchObject({
+      status: "connected",
+      family: "sol",
+      address: publicKey,
+      chainId: "solana:mainnet",
+    });
+
+    fromPage({
+      ns: "solana",
+      kind: "event",
+      method: "accountChanged",
+      params: { publicKey: null },
+    });
+    expect(state?.status).toBe("disconnected");
+  });
+
+  it("registers the families it is given", () => {
+    let families: string[] = [];
+    function Probe() {
+      families = useConnectionStore().registry.families.map((family) => family.id);
+      return null;
+    }
+    render(
+      <Web3Provider config={{ appName: "native families" }} families={[eth(), gpg()]}>
+        <Probe />
+      </Web3Provider>,
+    );
+    expect(families).toEqual(["eth", "gpg"]);
+  });
+
+  it("mounts a SignInProvider on its store when given signIn", () => {
+    const onSign = async () => true;
+    let seen: unknown = "unset";
+    function Probe() {
+      seen = useOptionalSignIn()?.onSign;
+      return null;
+    }
+    render(
+      <Web3Provider
+        config={{ appName: "native sign-in" }}
+        signIn={{ getNonce: async () => "n", onSign, domain: "wallet.example.com" }}
+      >
+        <Probe />
+      </Web3Provider>,
+    );
+    expect(seen).toBe(onSign);
+  });
+});

package/src/providers/WalletProvider.native.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from "react";
 import { createContext, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { AppState, Linking, StyleSheet, View } from "react-native";
 import { WebView, type WebViewMessageEvent, type WebViewProps } from "react-native-webview";
-import { http, WagmiProvider, createConfig } from "wagmi";
+import { WagmiProvider, createConfig } from "wagmi";
 import { AuthBridge } from "../bridge/AuthBridge";
 import { BridgeClient } from "../bridge/BridgeClient";
 import { GpgBridge } from "../bridge/GpgBridge";
@@ -11,7 +11,7 @@ import { SolanaBridge } from "../bridge/SolanaBridge";
 import { SuiBridge } from "../bridge/SuiBridge";
 import { createBridgeConnector } from "../bridge/bridgeConnector";
 import { queryParams } from "../bridge/hosting";
-import { createNativeBridge } from "../bridge/nativeHost";
+import { createNativeBridge, type NativeBridge } from "../bridge/nativeHost";
 import { createMemoryTransportPair } from "../bridge/transport";
 import {
   decideNavigation,
@@ -21,8 +21,13 @@ import {
 } from "./native/deepLink";
 import { buildConfigInjection } from "./native/inject";
 import { initialVisibility, nextVisibility } from "./native/visibility";
+import { defineWalletFamily, type WalletFamily } from "../core/family";
+import { SignInProvider, type SignInConfig } from "../core/signIn";
+import { walletFamilies } from "../families";
+import { WagmiConnectionHost } from "../wagmi/host";
+import { familiesKey, withFamilyProviders } from "./families";
 import { WalletBridgeContext, type WalletBridgeContextValue } from "./walletBridge";
-import { type Web3Config, Web3ConfigContext, resolveChains } from "./walletConfig";
+import { type Web3Config, Web3ConfigContext, chainTransports, resolveChains } from "./walletConfig";
 
 type WebViewSource = NonNullable<WebViewProps["source"]>;
 
@@ -30,13 +35,29 @@ type WebViewSource = NonNullable<WebViewProps["source"]>;
 // sign-in message's domain and the Keycloak nonce cookie belong to the page's
 // host, so a file:// or inline page can never sign in, and WKWebView will not
 // render the multi-MB bundle inline anyway.
-export interface WalletProviderProps extends PropsWithChildren {
+export interface Web3ProviderProps extends PropsWithChildren {
   config: Web3Config;
+  /**
+   * The wallet families, as on web: `[eth(), sol(), gpg()]`. Defaults to
+   * every built-in family. Their wallets connect through the hosted page's
+   * bridge, each on the family's bridge namespace; `config.families` is web
+   * only and ignored here.
+   */
+  families?: readonly WalletFamily[];
   queryClient?: QueryClient;
+  /**
+   * Mounts a SignInProvider on the connection store, e.g.
+   * `kc.signInConfig(grant.onSign)` for `useDirectLogin`. Pass the hosted
+   * page's `domain` to `keycloakWallet`: a native app has no page host.
+   */
+  signIn?: SignInConfig;
   /** Override the WebView content (defaults to `config.webViewUrl`); must be a hosted `{ uri }`. */
   webViewSource?: WebViewSource;
 }
 
+/** Web3Provider's props under the provider's first name. */
+export type WalletProviderProps = Web3ProviderProps;
+
 /** Native Solana surface, mirroring the operations web's wallet-adapter exposes. */
 export interface SolanaWalletContextValue {
   bridge: SolanaBridge;
@@ -65,14 +86,33 @@ function pageUrlOf(config: Web3Config, source: WebViewSource | undefined): strin
   return uri;
 }
 
-export function WalletProvider({
+/**
+ * The native wallet provider: the connection store over the hosted wallet
+ * page, whose WebView runs the wallets and signs across the bridge. Each
+ * family connects on its own bridge namespace: eth through the bridge's
+ * wagmi connector, sol and sui through their bridge drivers, so
+ * `useConnection()` reports whichever the store connected. sol and sui connect
+ * only where the page has that wallet, the mock wallet page today. Bitcoin
+ * has no bridge namespace and lists no wallet here. A wallet connected straight
+ * through `useSolanaWallet()` or `useWalletBridge()` stays outside the store.
+ */
+export function Web3Provider({
   children,
   config: web3Config,
+  families,
   queryClient = defaultQueryClient,
+  signIn,
   webViewSource,
-}: WalletProviderProps) {
+}: Web3ProviderProps) {
+  const listedKey = families ? familiesKey(families) : "";
+  const listed = useMemo(
+    () => families ?? walletFamilies(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listedKey],
+  );
   const webRef = useRef<WebView>(null);
   const [pageLoad, setPageLoad] = useState(0);
+  const [strandedHost, setStrandedHost] = useState<NativeBridge | null>(null);
   const [visibility, dispatchVisibility] = useReducer(nextVisibility, initialVisibility);
   const [publicKey, setPublicKey] = useState<string | null>(null);
 
@@ -90,10 +130,14 @@ export function WalletProvider({
             pageUrl,
             allowDevHosts: typeof __DEV__ !== "undefined" && __DEV__,
             inject: (script) => webRef.current?.injectJavaScript(script),
+            // The page that comes back starts with its sheet closed; one left
+            // open would cover the app with a page that never closes it.
+            onPageLost: () => dispatchVisibility("modalClose"),
           })
         : null,
     [pageUrl],
   );
+  const stranded = host !== null && strandedHost === host;
 
   const authDefaults = JSON.stringify(web3Config.auth ?? null);
   const bridge = useMemo<WalletBridgeContextValue>(() => {
@@ -124,12 +168,14 @@ export function WalletProvider({
   }, [client]);
 
   // On app foreground (e.g. return from a wallet deep link) ask the WebView to
-  // re-report account/chain state.
+  // re-report account/chain state, or load a stranded page back.
   useEffect(() => {
     const sub = AppState.addEventListener("change", (state) => {
-      if (state === "active" && host?.peer) {
-        void client.request("sys", "resync").catch(() => undefined);
-      }
+      if (state !== "active" || !host) return;
+      if (host.recover()) {
+        setStrandedHost(null);
+        setPageLoad((n) => n + 1);
+      } else if (host.peer) void client.request("sys", "resync").catch(() => undefined);
     });
     return () => sub.remove();
   }, [client, host]);
@@ -163,7 +209,7 @@ export function WalletProvider({
     // chain) -- on native, pass localnetRpcUrl with the host address the
     // device/emulator can reach (e.g. http://10.0.2.2:8545 on Android).
     const chains = resolveChains(web3Config);
-    const transports = Object.fromEntries(chains.map((chain) => [chain.id, http()]));
+    const transports = chainTransports(chains);
     return createConfig({
       chains,
       transports,
@@ -179,6 +225,17 @@ export function WalletProvider({
     web3Config.localnetRpcUrl,
   ]);
 
+  // The families as the store drives them here: one with a bridge driver
+  // connects across its bridge namespace, the rest as they are.
+  const storeFamilies = useMemo(
+    () =>
+      listed.map((family) => {
+        const driver = family.bridge?.driver;
+        return driver ? defineWalletFamily({ ...family, driver: () => driver(client) }) : family;
+      }),
+    [listed, client],
+  );
+
   const solanaValue = useMemo<SolanaWalletContextValue>(
     () => ({ bridge: bridge.solana, publicKey, connected: publicKey !== null }),
     [bridge.solana, publicKey],
@@ -193,59 +250,75 @@ export function WalletProvider({
     <Web3ConfigContext.Provider value={web3Config}>
       <WagmiProvider config={wagmiConfig}>
         <QueryClientProvider client={queryClient}>
-          <WalletBridgeContext.Provider value={bridge}>
-            <SolanaWalletContext.Provider value={solanaValue}>
-              {children}
-              {host && pageUrl && (
-                <View
-                  style={visibility.sheetOpen ? styles.visible : styles.hidden}
-                  pointerEvents={visibility.sheetOpen ? "auto" : "none"}
-                >
-                  <WebView
-                    key={pageLoad}
-                    ref={webRef}
-                    source={webViewSource ?? { uri: pageUrl }}
-                    originWhitelist={["*"]}
-                    javaScriptEnabled
-                    domStorageEnabled
-                    javaScriptCanOpenWindowsAutomatically
-                    onMessage={onMessage}
-                    onLoadStart={(event) => {
-                      if (host.navigated(event.nativeEvent.url)) setPageLoad((n) => n + 1);
-                    }}
-                    onShouldStartLoadWithRequest={(req) => {
-                      const decision = decideNavigation(req.url, host.pageOrigin, req.isTopFrame);
-                      if (decision === "external") openExternally(req.url);
-                      return decision === "load";
-                    }}
-                    onOpenWindow={(event) => {
-                      const url = event.nativeEvent.targetUrl;
-                      if (decideNewWindow(url) === "external") openExternally(url);
-                    }}
-                    onContentProcessDidTerminate={() => {
-                      host.pageGone();
-                      webRef.current?.reload();
-                    }}
-                    onRenderProcessGone={() => {
-                      host.pageGone();
-                      webRef.current?.reload();
-                    }}
-                    injectedJavaScriptBeforeContentLoaded={buildConfigInjection({
-                      ...web3Config,
-                      appUrl: web3Config.appUrl ?? "",
-                    })}
-                    style={styles.webview}
-                  />
-                </View>
-              )}
-            </SolanaWalletContext.Provider>
-          </WalletBridgeContext.Provider>
+          <WagmiConnectionHost families={storeFamilies}>
+            <WalletBridgeContext.Provider value={bridge}>
+              <SolanaWalletContext.Provider value={solanaValue}>
+                {withFamilyProviders(
+                  listed,
+                  signIn ? <SignInProvider {...signIn}>{children}</SignInProvider> : children,
+                )}
+                {host && pageUrl && (
+                  <View
+                    style={visibility.sheetOpen ? styles.visible : styles.hidden}
+                    pointerEvents={visibility.sheetOpen ? "auto" : "none"}
+                  >
+                    {/* A stranded page's foreign document is dropped, not kept running behind the app. */}
+                    {!stranded && (
+                      <WebView
+                        key={pageLoad}
+                        ref={webRef}
+                        source={webViewSource ?? { uri: pageUrl }}
+                        originWhitelist={["*"]}
+                        javaScriptEnabled
+                        domStorageEnabled
+                        javaScriptCanOpenWindowsAutomatically
+                        onMessage={onMessage}
+                        onLoadStart={(event) => {
+                          if (host.navigated(event.nativeEvent.url)) setPageLoad((n) => n + 1);
+                          else if (host.stranded) setStrandedHost(host);
+                        }}
+                        onShouldStartLoadWithRequest={(req) => {
+                          const decision = decideNavigation(
+                            req.url,
+                            host.pageOrigin,
+                            req.isTopFrame,
+                          );
+                          if (decision === "external") openExternally(req.url);
+                          return decision === "load";
+                        }}
+                        onOpenWindow={(event) => {
+                          const url = event.nativeEvent.targetUrl;
+                          if (decideNewWindow(url) === "external") openExternally(url);
+                        }}
+                        onContentProcessDidTerminate={() => {
+                          host.pageGone();
+                          webRef.current?.reload();
+                        }}
+                        onRenderProcessGone={() => {
+                          host.pageGone();
+                          webRef.current?.reload();
+                        }}
+                        injectedJavaScriptBeforeContentLoaded={buildConfigInjection({
+                          ...web3Config,
+                          appUrl: web3Config.appUrl ?? "",
+                        })}
+                        style={styles.webview}
+                      />
+                    )}
+                  </View>
+                )}
+              </SolanaWalletContext.Provider>
+            </WalletBridgeContext.Provider>
+          </WagmiConnectionHost>
         </QueryClientProvider>
       </WagmiProvider>
     </Web3ConfigContext.Provider>
   );
 }
 
+/** Web3Provider under its first name. */
+export const WalletProvider = Web3Provider;
+
 const styles = StyleSheet.create({
   // Kept mounted but offscreen so the bridge/ConnectKit/wagmi state persists.
   hidden: { position: "absolute", width: 1, height: 1, top: -1000, left: -1000, opacity: 0 },
@@ -256,4 +329,4 @@ const styles = StyleSheet.create({
 
 export { useWalletBridge, type WalletBridgeContextValue } from "./walletBridge";
 export { defaultChains } from "./walletConfig";
-export { useWeb3Config, type Web3Config } from "./walletConfig";
+export { useWeb3Config, type ConnectorFamily, type Web3Config } from "./walletConfig";