@multiplatform.one/web3 5.1.0 → 6.0.0

package/src/connectkit/web3Bridge.tsx

@@ -0,0 +1,130 @@
+import React, { useContext as useReactContext, useEffect, useMemo } from "react";
+import { useAccount, useConfig } from "wagmi";
+
+import {
+  ModalState,
+  ModalStateProvider,
+  routes,
+  useContext,
+  isWalletConnectConnector,
+} from "@multiplatform.one/connectkit";
+import { Web3ContextProvider } from "./components/contexts/web3";
+import { Web3ScreenRegistrar } from "./screens";
+import { ensureSiwwConnectors } from "./connectors/ensureSiwwConnectors";
+import { useChainIsSupported } from "./hooks/useChainIsSupported";
+import { useConnectCallback, useConnectCallbackProps } from "./hooks/useConnectCallback";
+import { SIWEContext } from "./siwe/SIWEContext";
+import { GpgContext } from "@multiplatform.one/gpg";
+import { useWallet } from "./wallets/useWallets";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// The web3 ⇄ connectkit bridge: the ONE place that knows both wagmi and the
+// agnostic modal. connectkit's <ConnectKitProvider> renders this (when web3 is the
+// active signer) inside its Context + ScreenRegistryProvider but above the modal.
+//
+// It (a) registers web3's wallet screens, (b) runs the wallet-only side effects
+// (late siww connector discovery, unsupported-chain redirect, on-connect → SIWE
+// redirect, connect/disconnect callbacks), and (c) projects wagmi/SIWE/GPG state
+// into the plugin-agnostic `ModalState` the modal reads via useModalState().
+//
+// A gpg-only host renders no bridge → connectkit's default empty ModalState → no
+// viem anywhere in the tree.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type Web3ModalBridgeProps = {
+  children: React.ReactNode;
+} & useConnectCallbackProps;
+
+export const Web3ModalBridge: React.FC<Web3ModalBridgeProps> = ({
+  children,
+  onConnect,
+  onDisconnect,
+}) => {
+  const context = useContext();
+
+  useConnectCallback({ onConnect, onDisconnect });
+
+  const { isConnected, chain } = useAccount();
+  const chainIsSupported = useChainIsSupported(chain?.id);
+
+  const signInWithEthereum = useReactContext(SIWEContext)?.enabled ?? false;
+  const signInWithGpg = useReactContext(GpgContext)?.enabled ?? false;
+  const { isSignedIn } = useSIWESignedIn();
+
+  // Wallet-derived bits the modal headings need (which connector, QR vs injector).
+  const wallet = useWallet(context.connector?.id ?? "");
+  const useQrcode = wallet ? !(!wallet.getWalletConnectDeeplink || wallet.isInstalled) : false;
+
+  // siww: wallet extensions (notably UniSat) inject their window globals AFTER the
+  // wagmi config is built, so getDefaultConfig's one-shot discovery misses them and
+  // Bitcoin never appears. Re-discover on mount + a few times after.
+  const ckConfig = useConfig();
+  useEffect(() => {
+    ensureSiwwConnectors(ckConfig);
+    const timers = [300, 800, 1500, 3000].map((d) =>
+      setTimeout(() => ensureSiwwConnectors(ckConfig), d),
+    );
+    return () => timers.forEach((t) => clearTimeout(t));
+  }, [ckConfig]);
+
+  // Unsupported chain → force the switch-network screen.
+  useEffect(() => {
+    if (isConnected && context.options?.enforceSupportedChains && !chainIsSupported) {
+      context.setOpen(true);
+      context.setRoute(routes.SWITCHNETWORKS);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected, chainIsSupported, chain]);
+
+  // On connect: redirect to SIWE (when enabled) or close the modal.
+  useEffect(() => {
+    if (isConnected) {
+      if (context.route !== routes.PROFILE || context.route !== routes.SIGNINWITHETHEREUM) {
+        if (signInWithEthereum && !context.options?.disableSiweRedirect) {
+          context.setRoute(routes.SIGNINWITHETHEREUM);
+        } else {
+          context.setOpen(false);
+        }
+      }
+    } else {
+      context.setOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected]);
+
+  const modalState = useMemo<ModalState>(
+    () => ({
+      connected: isConnected,
+      chainIsSupported,
+      isSignedIn,
+      signInWithEthereum,
+      signInWithGpg,
+      walletName: wallet?.name,
+      useQrcode,
+      isWalletConnect: isWalletConnectConnector(wallet?.connector?.id),
+    }),
+    [
+      isConnected,
+      chainIsSupported,
+      isSignedIn,
+      signInWithEthereum,
+      signInWithGpg,
+      wallet,
+      useQrcode,
+    ],
+  );
+
+  return (
+    <Web3ContextProvider enabled={context.open}>
+      <Web3ScreenRegistrar />
+      <ModalStateProvider value={modalState}>{children}</ModalStateProvider>
+    </Web3ContextProvider>
+  );
+};
+
+// Local copy of the SIWE signed-in read (avoids importing the full useSIWE
+// surface; the bridge only needs the boolean).
+function useSIWESignedIn(): { isSignedIn: boolean } {
+  const ctx = useReactContext(SIWEContext);
+  return { isSignedIn: !!ctx?.session?.data?.address };
+}

package/src/connectkit/web3Provider.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ConnectKitProvider as BaseProvider } from "@multiplatform.one/connectkit";
+import { Web3ModalBridge } from "./web3Bridge";
+
+type Props = React.ComponentProps<typeof BaseProvider>;
+
+// web3's ConnectKitProvider = connectkit's agnostic provider pre-wired with the wagmi
+// bridge. Consumers importing ConnectKitProvider from @multiplatform.one/web3 get the
+// full wallet behaviour (screen registration + wagmi/SIWE/GPG ModalState) without
+// passing a bridge; a caller can still override `bridge` to opt out.
+export const ConnectKitProvider: React.FC<Props> = ({ bridge, ...props }) => (
+  <BaseProvider bridge={bridge ?? Web3ModalBridge} {...props} />
+);

package/src/providers/WalletProvider.native.tsx

@@ -60,7 +60,8 @@ export function WalletProvider({
   // WebView signals `sys/ready`, then flushed (the connect request often fires first).
   const { bridge, solana, transport } = useMemo(() => {
     const t = createPostMessageTransport((raw) => {
-      if (readyRef.current && webRef.current) webRef.current.injectJavaScript(buildInjectScript(raw));
+      if (readyRef.current && webRef.current)
+        webRef.current.injectJavaScript(buildInjectScript(raw));
       else outboundQueue.current.push(raw);
     });
     const client = new BridgeClient(t);
@@ -130,7 +131,8 @@ export function WalletProvider({
   const onMessage = (event: WebViewMessageEvent) => transport.receive(event.nativeEvent.data);
 
   // No inline HTML fallback: the bundle is too large for WKWebView source={{html}}.
-  const resolvedSource = webViewSource ?? (web3Config.webViewUrl ? { uri: web3Config.webViewUrl } : null);
+  const resolvedSource =
+    webViewSource ?? (web3Config.webViewUrl ? { uri: web3Config.webViewUrl } : null);
   if (!resolvedSource) {
     throw new Error(
       "WalletProvider (native): set config.webViewUrl (or pass webViewSource) to a served copy of @multiplatform.one/web3/assets/webview.html",

package/src/siws/message.ts

@@ -21,12 +21,17 @@ export interface SiwsMessageParams {
  * signature against, so the server must rebuild this from the same params.
  */
 export function createSiwsMessage(params: SiwsMessageParams): string {
-  const { domain, address, statement, uri, version = "1", chainId = "solana:mainnet", nonce, issuedAt } = params;
-  const lines = [
-    `${domain} wants you to sign in with your Solana account:`,
+  const {
+    domain,
     address,
-    "",
-  ];
+    statement,
+    uri,
+    version = "1",
+    chainId = "solana:mainnet",
+    nonce,
+    issuedAt,
+  } = params;
+  const lines = [`${domain} wants you to sign in with your Solana account:`, address, ""];
   if (statement) {
     lines.push(statement, "");
   }

package/dist/cjs/connectkit/assets/ScanIconWithLogos.cjs

@@ -1,295 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var ScanIconWithLogos_exports = {};
-__export(ScanIconWithLogos_exports, {
-  default: () => ScanIconWithLogos_default
-});
-module.exports = __toCommonJS(ScanIconWithLogos_exports);
-var import_framer_motion = require("framer-motion");
-var import_styled = __toESM(require("./../styles/styled/index.cjs"));
-var import_logos = __toESM(require("./logos.cjs"));
-var import_jsx_runtime = require("react/jsx-runtime");
-const IconContainer = (0, import_styled.default)(import_framer_motion.motion.div)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 47px;
-  height: 52px;
-  min-width: 47px;
-  min-height: 52px;
-  svg {
-    display: block;
-    max-width: 100%;
-    height: auto;
-  }
-`;
-const ScanIconWithLogos = ({
-  logo
-}) => {
-  const logoList = [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logos.default.MetaMask, {
-    background: true
-  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logos.default.Coinbase, {
-    background: true
-  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logos.default.Crypto, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logos.default.ImToken, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logos.default.Argent, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_logos.default.Trust, {})];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconContainer, {
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
-      "aria-hidden": "true",
-      width: "47",
-      height: "52",
-      viewBox: "0 0 47 52",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("g", {
-        mask: "url(#gradient-mask)",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: "M7 14.5C7 11.4624 9.46243 9 12.5 9H31.5C34.5376 9 37 11.4624 37 14.5V47H7V14.5Z",
-          fill: "var(--ck-graphic-scaniconwithlogos-04)"
-        }), logo ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("foreignObject", {
-          x: "13",
-          y: "21",
-          width: "18",
-          height: "18",
-          rx: "5",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-            style: {
-              overflow: "hidden",
-              borderRadius: 5
-            },
-            children: logo
-          })
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("foreignObject", {
-            x: "12",
-            y: "15",
-            width: "9",
-            height: "9",
-            rx: "2.5",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-              style: {
-                overflow: "hidden",
-                borderRadius: 2.5
-              },
-              children: logoList[0]
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("foreignObject", {
-            x: "23",
-            y: "15",
-            width: "9",
-            height: "9",
-            rx: "2.5",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-              style: {
-                overflow: "hidden",
-                borderRadius: 2.5
-              },
-              children: logoList[1]
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("foreignObject", {
-            x: "12",
-            y: "26",
-            width: "9",
-            height: "9",
-            rx: "2.5",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-              style: {
-                overflow: "hidden",
-                borderRadius: 2.5
-              },
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-                style: {
-                  overflow: "hidden",
-                  borderRadius: 2.5
-                },
-                children: logoList[2]
-              })
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("foreignObject", {
-            x: "23",
-            y: "26",
-            width: "9",
-            height: "9",
-            rx: "2.5",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-              style: {
-                overflow: "hidden",
-                borderRadius: 2.5
-              },
-              children: logoList[3]
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("foreignObject", {
-            x: "12",
-            y: "37",
-            width: "9",
-            height: "9",
-            rx: "2.5",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-              style: {
-                overflow: "hidden",
-                borderRadius: 2.5
-              },
-              children: logoList[4]
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("foreignObject", {
-            x: "23",
-            y: "37",
-            width: "9",
-            height: "9",
-            rx: "2.5",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-              style: {
-                overflow: "hidden",
-                borderRadius: 2.5
-              },
-              children: logoList[5]
-            })
-          })]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: "M36 47V13.7143C36 11.1107 33.8893 9 31.2857 9H12.7143C10.1107 9 8 11.1107 8 13.7143V47",
-          stroke: "url(#paint0_linear_924_12568)",
-          strokeWidth: "2"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: "M15 10H29C29 11.1046 28.1046 12 27 12H17C15.8954 12 15 11.1046 15 10Z",
-          fill: "var(--ck-graphic-scaniconwithlogos-01)"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-          x: "1",
-          y: "47",
-          width: "43",
-          height: "5",
-          fill: "var(--ck-tooltip-background)"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-          x: "22",
-          y: "1",
-          width: "24",
-          height: "24",
-          rx: "12",
-          fill: "var(--ck-graphic-scaniconwithlogos-03)",
-          stroke: "var(--ck-tooltip-background)",
-          strokeWidth: "2"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-          x: "34.5",
-          y: "10",
-          width: "2.5",
-          height: "2.5",
-          rx: "0.75",
-          fill: "#373737"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-          x: "31",
-          y: "10",
-          width: "2.5",
-          height: "2.5",
-          rx: "0.75",
-          fill: "#373737"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-          x: "31",
-          y: "13.5",
-          width: "2.5",
-          height: "2.5",
-          rx: "0.75",
-          fill: "#373737"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-          x: "34.5",
-          y: "13.5",
-          width: "2.5",
-          height: "2.5",
-          rx: "0.75",
-          fill: "#373737"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: "M28.5 10.5V9C28.5 8.17157 29.1716 7.5 30 7.5H31.5",
-          stroke: "#373737",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: "M36.5 7.5L38 7.5C38.8284 7.5 39.5 8.17157 39.5 9L39.5 10.5",
-          stroke: "#373737",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: "M39.5 15.5L39.5 17C39.5 17.8284 38.8284 18.5 38 18.5L36.5 18.5",
-          stroke: "#373737",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: "M31.5 18.5L30 18.5C29.1716 18.5 28.5 17.8284 28.5 17L28.5 15.5",
-          stroke: "#373737",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("defs", {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("linearGradient", {
-          id: "paint0_linear_924_12568",
-          x1: "22",
-          y1: "8.2549",
-          x2: "22",
-          y2: "47",
-          gradientUnits: "userSpaceOnUse",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("stop", {
-            stopColor: "var(--ck-graphic-scaniconwithlogos-01)"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("stop", {
-            offset: "1",
-            stopColor: "var(--ck-graphic-scaniconwithlogos-02)"
-          })]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("linearGradient", {
-          id: "linear-gradient-mask",
-          x1: "47",
-          y1: "42",
-          x2: "47",
-          y2: "47",
-          gradientUnits: "userSpaceOnUse",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("stop", {
-            stopColor: "white"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("stop", {
-            offset: "1",
-            stopColor: "black",
-            stopOpacity: "0"
-          })]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("mask", {
-          id: "gradient-mask",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-            x: "0",
-            y: "0",
-            width: "47",
-            height: "52",
-            fill: "url(#linear-gradient-mask)"
-          })
-        })]
-      })]
-    })
-  });
-};
-var ScanIconWithLogos_default = ScanIconWithLogos;