@multiplatform.one/web3 5.0.27

package/src/bridge/eip1193.ts

@@ -0,0 +1,46 @@
+import type { BridgeClient } from "./BridgeClient";
+
+export interface Eip1193RequestArgs {
+  method: string;
+  params?: unknown;
+}
+
+export type ProviderListener = (payload?: unknown) => void;
+
+/**
+ * Minimal EIP-1193 provider whose `request` is forwarded over the bridge to the
+ * WebView's real wallet provider, and whose events (`accountsChanged`,
+ * `chainChanged`, `connect`, `disconnect`) are fed from the bridge's `evm` events.
+ * This is the object the wagmi connector wraps — wagmi sees an ordinary provider.
+ */
+export interface BridgeProvider {
+  request(args: Eip1193RequestArgs): Promise<unknown>;
+  on(event: string, listener: ProviderListener): void;
+  removeListener(event: string, listener: ProviderListener): void;
+}
+
+export function createBridgeProvider(bridge: BridgeClient): BridgeProvider {
+  const listeners = new Map<string, Set<ProviderListener>>();
+
+  bridge.on((ns, method, params) => {
+    if (ns !== "evm") return;
+    const set = listeners.get(method);
+    if (!set) return;
+    for (const l of Array.from(set)) l(params);
+  });
+
+  return {
+    request: ({ method, params }) => bridge.request("evm", method, params),
+    on(event, listener) {
+      let set = listeners.get(event);
+      if (!set) {
+        set = new Set();
+        listeners.set(event, set);
+      }
+      set.add(listener);
+    },
+    removeListener(event, listener) {
+      listeners.get(event)?.delete(listener);
+    },
+  };
+}

package/src/bridge/index.spec.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import * as bridge from "./index";
+
+describe("bridge barrel", () => {
+  it("exports the public surface", () => {
+    expect(typeof bridge.BridgeClient).toBe("function");
+    expect(typeof bridge.createMemoryTransportPair).toBe("function");
+    expect(typeof bridge.isBridgeMessage).toBe("function");
+  });
+});

package/src/bridge/index.ts

@@ -0,0 +1,9 @@
+export * from "./protocol";
+export * from "./transport";
+export { createPostMessageTransport, type PostMessageTransport } from "./postMessageTransport";
+export { BridgeClient, type EventHandler, type RequestOptions } from "./BridgeClient";
+export { BridgeHost, type RequestHandler } from "./BridgeHost";
+export { createBridgeProvider, type BridgeProvider, type Eip1193RequestArgs } from "./eip1193";
+export { createBridgeConnector } from "./bridgeConnector";
+export { bytesToBase64, base64ToBytes } from "./base64";
+export { SolanaBridge } from "./SolanaBridge";

package/src/bridge/postMessageTransport.spec.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from "vitest";
+import { BridgeClient } from "./BridgeClient";
+import { BridgeHost } from "./BridgeHost";
+import { createPostMessageTransport } from "./postMessageTransport";
+import type { BridgeMessage } from "./protocol";
+
+describe("createPostMessageTransport", () => {
+  it("post() serializes the message through send()", () => {
+    const send = vi.fn();
+    const t = createPostMessageTransport(send);
+    const msg: BridgeMessage = { id: "1", ns: "evm", kind: "req", method: "eth_chainId" };
+    t.post(msg);
+    expect(send).toHaveBeenCalledTimes(1);
+    expect(JSON.parse(send.mock.calls[0][0])).toEqual(msg);
+  });
+
+  it("receive() parses raw JSON and dispatches to subscribers", () => {
+    const t = createPostMessageTransport(vi.fn());
+    const seen: BridgeMessage[] = [];
+    t.subscribe((m) => seen.push(m));
+    t.receive(JSON.stringify({ id: "9", ns: "solana", kind: "res", result: { publicKey: "Fg" } }));
+    expect(seen).toEqual([{ id: "9", ns: "solana", kind: "res", result: { publicKey: "Fg" } }]);
+  });
+
+  it("drops malformed JSON and non-bridge payloads without throwing", () => {
+    const t = createPostMessageTransport(vi.fn());
+    const seen: BridgeMessage[] = [];
+    t.subscribe((m) => seen.push(m));
+    expect(() => t.receive("{not json")).not.toThrow();
+    expect(() => t.receive(JSON.stringify({ foo: "bar" }))).not.toThrow();
+    expect(() => t.receive(JSON.stringify({ ns: "evm" }))).not.toThrow(); // missing kind
+    expect(seen).toEqual([]);
+  });
+
+  it("subscribe() returns a working unsubscribe", () => {
+    const t = createPostMessageTransport(vi.fn());
+    const seen: BridgeMessage[] = [];
+    const off = t.subscribe((m) => seen.push(m));
+    off();
+    t.receive(JSON.stringify({ ns: "sys", kind: "event", method: "ready" }));
+    expect(seen).toEqual([]);
+  });
+
+  it("two transports wired send<->receive round-trip a request/response", async () => {
+    // native side posts -> webview side receives, and vice versa
+    let webview: ReturnType<typeof createPostMessageTransport>;
+    const native = createPostMessageTransport((raw) => webview.receive(raw));
+    webview = createPostMessageTransport((raw) => native.receive(raw));
+
+    const client = new BridgeClient(native);
+    const host = new BridgeHost(webview);
+    host.register("evm", (method) => (method === "eth_chainId" ? "0x1" : null));
+
+    await expect(client.request("evm", "eth_chainId")).resolves.toBe("0x1");
+  });
+});

package/src/bridge/postMessageTransport.ts

@@ -0,0 +1,44 @@
+import { type BridgeMessage, isBridgeMessage } from "./protocol";
+import type { Transport } from "./transport";
+
+export interface PostMessageTransport extends Transport {
+  /** Feed an inbound raw string (a serialized BridgeMessage) into the bridge. */
+  receive(raw: string): void;
+}
+
+/**
+ * The single symmetric transport over react-native-webview's postMessage channel.
+ * `post()` serializes and hands the string to `send`; `receive()` parses, validates,
+ * and dispatches. Both sides differ only in how `send`/`receive` are wired:
+ *
+ *   Native:  send = (raw) => webViewRef.injectJavaScript(`window.__bridgeReceive(${JSON.stringify(raw)});true;`)
+ *            onMessage = (e) => transport.receive(e.nativeEvent.data)
+ *   WebView: send = (raw) => window.ReactNativeWebView.postMessage(raw)
+ *            window.__bridgeReceive = (raw) => transport.receive(raw)
+ */
+export function createPostMessageTransport(send: (raw: string) => void): PostMessageTransport {
+  const listeners = new Set<(m: BridgeMessage) => void>();
+
+  return {
+    post(message) {
+      send(JSON.stringify(message));
+    },
+    receive(raw) {
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        return; // not JSON — drop
+      }
+      if (!isBridgeMessage(parsed)) return;
+      // snapshot: a handler may (un)subscribe during delivery
+      for (const h of Array.from(listeners)) h(parsed);
+    },
+    subscribe(handler) {
+      listeners.add(handler);
+      return () => {
+        listeners.delete(handler);
+      };
+    },
+  };
+}

package/src/bridge/protocol.spec.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { isBridgeMessage, newRequestId, type BridgeMessage } from "./protocol";
+
+describe("protocol", () => {
+  it("accepts a well-formed req", () => {
+    const m: BridgeMessage = { id: "1", ns: "evm", kind: "req", method: "eth_chainId" };
+    expect(isBridgeMessage(m)).toBe(true);
+  });
+  it("accepts an event without id", () => {
+    expect(isBridgeMessage({ ns: "solana", kind: "event", method: "connect" })).toBe(true);
+  });
+  it("rejects unknown namespace", () => {
+    expect(isBridgeMessage({ ns: "btc", kind: "req", method: "x" })).toBe(false);
+  });
+  it("rejects unknown kind and non-objects", () => {
+    expect(isBridgeMessage({ ns: "evm", kind: "nope" })).toBe(false);
+    expect(isBridgeMessage(null)).toBe(false);
+    expect(isBridgeMessage("x")).toBe(false);
+  });
+  it("newRequestId is unique and string", () => {
+    const a = newRequestId();
+    const b = newRequestId();
+    expect(typeof a).toBe("string");
+    expect(a).not.toBe(b);
+  });
+});

package/src/bridge/protocol.ts

@@ -0,0 +1,38 @@
+export const NAMESPACES = ["evm", "solana", "sys"] as const;
+export type Namespace = (typeof NAMESPACES)[number];
+
+export const KINDS = ["req", "res", "event"] as const;
+export type Kind = (typeof KINDS)[number];
+
+export interface BridgeError {
+  code: number;
+  message: string;
+}
+
+export interface BridgeMessage {
+  /** present on req/res, absent on event */
+  id?: string;
+  ns: Namespace;
+  kind: Kind;
+  method?: string;
+  params?: unknown;
+  result?: unknown;
+  error?: BridgeError;
+}
+
+export function isBridgeMessage(value: unknown): value is BridgeMessage {
+  if (typeof value !== "object" || value === null) return false;
+  const m = value as Record<string, unknown>;
+  if (!NAMESPACES.includes(m.ns as Namespace)) return false;
+  if (!KINDS.includes(m.kind as Kind)) return false;
+  if (m.id !== undefined && typeof m.id !== "string") return false;
+  if (m.method !== undefined && typeof m.method !== "string") return false;
+  return true;
+}
+
+let counter = 0;
+export function newRequestId(): string {
+  // monotonic + a derived suffix; avoid Date.now() (Hermes/sandbox constraints)
+  counter += 1;
+  return `${counter}-${Math.floor((globalThis.performance?.now?.() ?? counter) * 1000)}`;
+}

package/src/bridge/transport.spec.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it, vi } from "vitest";
+import { createMemoryTransportPair } from "./transport";
+import type { BridgeMessage } from "./protocol";
+
+describe("memory transport pair", () => {
+  it("delivers a message posted on one side to the other side's subscriber", () => {
+    const { a, b } = createMemoryTransportPair();
+    const received: BridgeMessage[] = [];
+    b.subscribe((m) => received.push(m));
+    a.post({ ns: "sys", kind: "event", method: "ready" });
+    expect(received).toEqual([{ ns: "sys", kind: "event", method: "ready" }]);
+  });
+  it("does not echo a message back to its own sender", () => {
+    const { a } = createMemoryTransportPair();
+    const onA = vi.fn();
+    a.subscribe(onA);
+    a.post({ ns: "sys", kind: "event", method: "ready" });
+    expect(onA).not.toHaveBeenCalled();
+  });
+  it("unsubscribe stops delivery", () => {
+    const { a, b } = createMemoryTransportPair();
+    const onB = vi.fn();
+    const off = b.subscribe(onB);
+    off();
+    a.post({ ns: "evm", kind: "event", method: "connect" });
+    expect(onB).not.toHaveBeenCalled();
+  });
+});

package/src/bridge/transport.ts

@@ -0,0 +1,39 @@
+import type { BridgeMessage } from "./protocol";
+
+/**
+ * The single seam between the bridge and the world. On native, an adapter wraps
+ * react-native-webview's `postMessage` + `onMessage`; in the WebView, an adapter
+ * wraps `window.ReactNativeWebView.postMessage` + a `message` listener. Tests use
+ * the in-memory pair below. The bridge layer knows nothing else about platforms.
+ */
+export interface Transport {
+  post(message: BridgeMessage): void;
+  /** Returns an unsubscribe function. */
+  subscribe(handler: (message: BridgeMessage) => void): () => void;
+}
+
+/**
+ * Two linked in-memory transports: posting on `a` delivers to `b`'s subscribers
+ * and vice-versa, never to the sender's own subscribers. Models the
+ * native<->webview channel for unit tests.
+ */
+export function createMemoryTransportPair(): { a: Transport; b: Transport } {
+  const aHandlers = new Set<(m: BridgeMessage) => void>();
+  const bHandlers = new Set<(m: BridgeMessage) => void>();
+  const make = (
+    own: Set<(m: BridgeMessage) => void>,
+    peer: Set<(m: BridgeMessage) => void>,
+  ): Transport => ({
+    post(message) {
+      // snapshot: a handler may (un)subscribe during delivery
+      for (const h of Array.from(peer)) h(message);
+    },
+    subscribe(handler) {
+      own.add(handler);
+      return () => {
+        own.delete(handler);
+      };
+    },
+  });
+  return { a: make(aHandlers, bHandlers), b: make(bHandlers, aHandlers) };
+}

package/src/components/ConnectKitButton.native.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import { Button, Text } from "tamagui";
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+
+/**
+ * Native stand-in for ConnectKit's button. ConnectKit is web-only and lives in
+ * the WebView; on native, connecting goes through the bridge connector (the sole
+ * connector in the native wagmi config), which makes the WebView show the real
+ * ConnectKit modal. Mirrors the slice of ConnectKit's API the app uses
+ * (`<ConnectKitButton />` and `<ConnectKitButton.Custom>`).
+ */
+export interface ConnectKitButtonProps {
+  showBalance?: boolean;
+  showAvatar?: boolean;
+  label?: string;
+}
+
+export interface ConnectKitCustomRenderProps {
+  isConnected: boolean;
+  isConnecting: boolean;
+  show: () => void;
+  hide: () => void;
+  address?: string;
+  ensName?: string;
+  truncatedAddress?: string;
+}
+
+function useConnectKitState(): ConnectKitCustomRenderProps {
+  const { address, isConnected } = useAccount();
+  const { connect, connectors, isPending } = useConnect();
+  const { disconnect } = useDisconnect();
+  return {
+    isConnected,
+    isConnecting: isPending,
+    address,
+    truncatedAddress: address ? `${address.slice(0, 6)}…${address.slice(-4)}` : undefined,
+    show: () => {
+      if (isConnected) disconnect();
+      else if (connectors[0]) connect({ connector: connectors[0] });
+    },
+    hide: () => undefined,
+  };
+}
+
+export function ConnectKitButton({ label = "Connect Wallet" }: ConnectKitButtonProps) {
+  const state = useConnectKitState();
+  return (
+    <Button onPress={state.show} disabled={state.isConnecting}>
+      <Text>
+        {state.isConnecting ? "Connecting…" : state.isConnected ? state.truncatedAddress : label}
+      </Text>
+    </Button>
+  );
+}
+
+ConnectKitButton.Custom = function ConnectKitButtonCustom({
+  children,
+}: {
+  children: (props: ConnectKitCustomRenderProps) => ReactNode;
+}) {
+  return <>{children(useConnectKitState())}</>;
+};

package/src/components/ConnectKitButton.tsx

@@ -0,0 +1,3 @@
+// Web/default: the real ConnectKit button. Split out of `index.ts` so the bare
+// `connectkit` import lives in a platform file and never reaches the native graph.
+export { ConnectKitButton } from "../connectkit";

package/src/components/NetworkSwitcher.tsx

@@ -0,0 +1,102 @@
+import { Button, Popover, Text, XStack, YStack, type ButtonProps } from "tamagui";
+import { useState } from "react";
+import { useAccount, useChains, useSwitchChain } from "wagmi";
+
+export interface NetworkSwitcherProps extends Omit<ButtonProps, "children"> {
+  showTestnets?: boolean;
+}
+
+export function NetworkSwitcher({ showTestnets = false, ...buttonProps }: NetworkSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const { chain, isConnected } = useAccount();
+  const chains = useChains();
+  const { switchChain, isPending } = useSwitchChain();
+
+  if (!isConnected) {
+    return null;
+  }
+
+  const availableChains = showTestnets ? chains : chains.filter((c) => !c.testnet);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button {...buttonProps} disabled={isPending}>
+          <XStack alignItems="center" gap="$2">
+            <NetworkIcon />
+            <Text>{isPending ? "Switching..." : chain?.name || "Unknown"}</Text>
+          </XStack>
+        </Button>
+      </Popover.Trigger>
+
+      <Popover.Content
+        borderWidth={1}
+        borderColor="$borderColor"
+        enterStyle={{ y: -10, opacity: 0 }}
+        exitStyle={{ y: -10, opacity: 0 }}
+        elevation="$4"
+      >
+        <YStack gap="$2" padding="$2" minWidth={200}>
+          <Text fontWeight="bold" fontSize="$3" paddingBottom="$2">
+            Select Network
+          </Text>
+          {availableChains.map((c) => (
+            <Button
+              key={c.id}
+              size="$3"
+              backgroundColor={c.id === chain?.id ? "$backgroundFocus" : undefined}
+              onPress={() => {
+                switchChain({ chainId: c.id });
+                setOpen(false);
+              }}
+            >
+              <XStack alignItems="center" gap="$2" flex={1}>
+                <Text flex={1}>{c.name}</Text>
+                {c.id === chain?.id && <CheckIcon />}
+              </XStack>
+            </Button>
+          ))}
+        </YStack>
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+function NetworkIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}