@multiplatform.one/web3 5.1.0 → 6.0.1

package/src/connectkit/screens.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+
+import {
+  ModalState,
+  ScreenApi,
+  ScreenDef,
+  useRegisterScreens,
+  routes,
+} from "@multiplatform.one/connectkit";
+import { ProfileSiweHeaderAction } from "./profileHeaderAction";
+
+import Onboarding from "./components/Pages/Onboarding";
+import About from "./components/Pages/About";
+import Connectors from "./components/Pages/Connectors";
+import MobileConnectors from "./components/Pages/MobileConnectors";
+import ConnectUsing from "./components/ConnectModal/ConnectUsing";
+import DownloadApp from "./components/Pages/DownloadApp";
+import Profile from "./components/Pages/Profile";
+import SwitchNetworks from "./components/Pages/SwitchNetworks";
+import SignInWithEthereum from "./components/Pages/SignInWithEthereum";
+import { SignInWithGpg } from "@multiplatform.one/gpg";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// web3's screen catalogue — the wallet (+ the legacy GPG) screens contributed to
+// connectkit's signer-agnostic modal via the registry. This is the step-2 seam:
+// the modal core no longer hardcodes a `pages` map or enumerates routes by name;
+// it renders whatever the mounted plugin registers here.
+//
+// (In step 5 the GPG entry moves to @multiplatform.one/gpg and the wallet entries
+// stay in @multiplatform.one/web3 — both registering against the same registry.)
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * The host modal state web3 feeds connectkit. Headings that vary by connection /
+ * SIWE / wallet read these fields; connectkit itself stays agnostic and only calls
+ * `resolveHeading(def, state)`.
+ */
+export type Web3ModalState = ModalState & {
+  isSignedIn?: boolean;
+  /** Resolved localisation strings (web3 owns the locale catalogue). */
+  locales?: Record<string, string>;
+  /** Display name of the connector currently being connected. */
+  walletName?: string;
+  /** Whether the connect screen is showing a QR code (vs the injector flow). */
+  useQrcode?: boolean;
+  /** Whether the active connector is WalletConnect. */
+  isWalletConnect?: boolean;
+};
+
+const l = (s: ModalState, key: string): string => (s as Web3ModalState).locales?.[key] ?? "";
+
+export const web3Screens: readonly ScreenDef[] = [
+  {
+    id: routes.CONNECTORS,
+    component: Connectors,
+    heading: (s) => l(s, "connectorsScreen_heading"),
+    depth: 0,
+    // Home screen when disconnected; not directly openable once connected.
+    availableWhen: (s) => !s.connected,
+    showBack: false,
+    showInfo: true,
+    onBack: (api) => api.setRoute(routes.CONNECTORS),
+  },
+  {
+    id: routes.ABOUT,
+    component: About,
+    heading: (s) => l(s, "aboutScreen_heading"),
+    availableWhen: (s) => !s.connected,
+    onBack: (api) => api.setRoute(routes.CONNECTORS),
+  },
+  {
+    id: routes.ONBOARDING,
+    component: Onboarding,
+    heading: (s) => l(s, "onboardingScreen_heading"),
+    availableWhen: (s) => !s.connected,
+    onBack: (api) => api.setRoute(routes.CONNECTORS),
+  },
+  {
+    id: routes.MOBILECONNECTORS,
+    component: MobileConnectors,
+    heading: (s) => l(s, "mobileConnectorsScreen_heading"),
+    availableWhen: (s) => !s.connected,
+    onBack: (api) => api.setRoute(routes.CONNECTORS),
+  },
+  {
+    id: routes.CONNECT,
+    component: ConnectUsing,
+    heading: (s) => {
+      const st = s as Web3ModalState;
+      if (st.useQrcode) {
+        return st.isWalletConnect
+          ? l(s, "scanScreen_heading")
+          : l(s, "scanScreen_heading_withConnector");
+      }
+      return st.walletName ?? "";
+    },
+    // Reached internally (after picking a connector), never via openScreen.
+    availableWhen: () => false,
+    onBack: (api) => api.setRoute(routes.CONNECTORS),
+  },
+  {
+    id: routes.DOWNLOAD,
+    component: DownloadApp,
+    heading: (s) => l(s, "downloadAppScreen_heading"),
+    depth: 2,
+    availableWhen: () => false,
+    onBack: (api) => api.setRoute(routes.CONNECT),
+  },
+  {
+    id: routes.PROFILE,
+    component: Profile,
+    heading: (s) => l(s, "profileScreen_heading"),
+    // Home screen when connected.
+    availableWhen: (s) => !!s.connected,
+    showBack: false,
+    showInfo: false,
+    // The SIWE shortcut button (self-gates on SIWE being enabled).
+    headerAction: ProfileSiweHeaderAction,
+  },
+  {
+    id: routes.SWITCHNETWORKS,
+    component: SwitchNetworks,
+    heading: (s) => l(s, "switchNetworkScreen_heading"),
+    availableWhen: (s) => !!s.connected,
+    onBack: (api) => api.setRoute(routes.PROFILE),
+  },
+  {
+    id: routes.SIGNINWITHETHEREUM,
+    component: SignInWithEthereum,
+    heading: (s) =>
+      (s as Web3ModalState).isSignedIn
+        ? l(s, "signInWithEthereumScreen_signedIn_heading")
+        : l(s, "signInWithEthereumScreen_signedOut_heading"),
+    availableWhen: (s) => !!s.connected,
+    onBack: (api) => api.setRoute(routes.PROFILE),
+  },
+  {
+    id: routes.SIGNINWITHGPG,
+    component: SignInWithGpg,
+    // Hardcoded (vs a locale key) to avoid touching every locale file for Phase 1.
+    heading: "Sign in with GPG",
+    // GPG has no connect step — valid in both connected and disconnected states.
+    availableWhen: () => true,
+    showBack: false,
+    showInfo: false,
+  },
+];
+
+/**
+ * Mount inside ConnectKitProvider (under ScreenRegistryProvider) to publish web3's
+ * screens to the modal. Renders nothing.
+ */
+export const Web3ScreenRegistrar: React.FC = () => {
+  useRegisterScreens(web3Screens);
+  return null;
+};
+
+export type { ScreenApi };

package/src/connectkit/siwe/SIWEContext.tsx

@@ -1,13 +1,13 @@
-import { createContext } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { Address } from 'viem';
+import { createContext } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Address } from "viem";
 
 export enum StatusState {
-  READY = 'ready',
-  LOADING = 'loading',
-  SUCCESS = 'success',
-  REJECTED = 'rejected',
-  ERROR = 'error',
+  READY = "ready",
+  LOADING = "loading",
+  SUCCESS = "success",
+  REJECTED = "rejected",
+  ERROR = "error",
 }
 
 export type SIWESession = {
@@ -23,10 +23,7 @@ export type SIWEConfig = {
     address: Address;
     chainId: number;
   }) => Promise<string> | string;
-  verifyMessage: (args: {
-    message: string;
-    signature: string;
-  }) => Promise<boolean>;
+  verifyMessage: (args: { message: string; signature: string }) => Promise<boolean>;
   getSession: () => Promise<SIWESession | null>;
   signOut: () => Promise<boolean>;
 

package/src/connectkit/siwe/SIWEProvider.tsx

@@ -1,16 +1,11 @@
-import { ReactNode, useContext, useEffect, useState } from 'react';
-import { useAccount, useAccountEffect, useSignMessage } from 'wagmi';
-import { getAddress } from 'viem';
-import { useQuery } from '@tanstack/react-query';
-
-import { Context as ConnectKitContext } from './../components/ConnectKit';
-import {
-  SIWEContext,
-  SIWEConfig,
-  StatusState,
-  SIWESession,
-} from './SIWEContext';
-import { isSiwwConnector } from '../utils';
+import { ReactNode, useContext, useEffect, useState } from "react";
+import { useAccount, useAccountEffect, useSignMessage } from "wagmi";
+import { getAddress } from "viem";
+import { useQuery } from "@tanstack/react-query";
+
+import { Context as ConnectKitContext } from "@multiplatform.one/connectkit";
+import { SIWEContext, SIWEConfig, StatusState, SIWESession } from "./SIWEContext";
+import { isSiwwConnector } from "@multiplatform.one/connectkit";
 
 type Props = SIWEConfig & {
   children: ReactNode;
@@ -18,8 +13,8 @@ type Props = SIWEConfig & {
   onSignOut?: () => void;
 };
 
-export const SIWE_NONCE_QUERY_KEY = 'ckSiweNonce';
-export const SIWE_SESSION_QUERY_KEY = 'ckSiweSession';
+export const SIWE_NONCE_QUERY_KEY = "ckSiweNonce";
+export const SIWE_SESSION_QUERY_KEY = "ckSiweSession";
 
 export const SIWEProvider = ({
   children,
@@ -39,14 +34,12 @@ export const SIWEProvider = ({
   // Only allow for mounting SIWEProvider once, so we avoid weird global state
   // collisions.
   if (useContext(SIWEContext)) {
-    throw new Error(
-      'Multiple, nested usages of SIWEProvider detected. Please use only one.'
-    );
+    throw new Error("Multiple, nested usages of SIWEProvider detected. Please use only one.");
   }
   // SIWEProvider must be wrapped outside of ConnectKitProvider so that the
   // ConnectKitButton and other UI can use SIWE context values.
   if (useContext(ConnectKitContext)) {
-    throw new Error('ConnectKitProvider must be mounted inside SIWEProvider.');
+    throw new Error("ConnectKitProvider must be mounted inside SIWEProvider.");
   }
 
   const nonce = useQuery({
@@ -67,7 +60,7 @@ export const SIWEProvider = ({
     if (!sessionData) return false; // No session to sign out of
     setStatus(StatusState.LOADING);
     if (!(await siweConfig.signOut())) {
-      throw new Error('Failed to sign out.');
+      throw new Error("Failed to sign out.");
     }
     await Promise.all([session.refetch(), nonce.refetch()]);
     setStatus(StatusState.READY);
@@ -89,11 +82,11 @@ export const SIWEProvider = ({
   const { signMessageAsync } = useSignMessage();
 
   const onError = (error: any) => {
-    console.error('signIn error', error, error.message);
+    console.error("signIn error", error, error.message);
     switch (error.code) {
       case -32000: // WalletConnect: user rejected
       case 4001: // MetaMask: user rejected
-      case 'ACTION_REJECTED': // MetaMask: user rejected
+      case "ACTION_REJECTED": // MetaMask: user rejected
         setStatus(StatusState.REJECTED);
         break;
       default:
@@ -104,15 +97,15 @@ export const SIWEProvider = ({
   const signIn = async () => {
     try {
       if (!siweConfig) {
-        throw new Error('SIWE not configured');
+        throw new Error("SIWE not configured");
       }
 
       const chainId = chain?.id;
-      if (!address) throw new Error('No address found');
-      if (!chainId) throw new Error('No chainId found');
+      if (!address) throw new Error("No address found");
+      if (!chainId) throw new Error("No chainId found");
 
       if (!nonce.data) {
-        throw new Error('Could not fetch nonce');
+        throw new Error("Could not fetch nonce");
       }
 
       setStatus(StatusState.LOADING);
@@ -131,13 +124,10 @@ export const SIWEProvider = ({
       let signature: string;
       if (connector && isSiwwConnector(connector)) {
         const provider = (await connector.getProvider()) as {
-          request: (args: {
-            method: string;
-            params?: unknown[];
-          }) => Promise<unknown>;
+          request: (args: { method: string; params?: unknown[] }) => Promise<unknown>;
         };
         signature = (await provider.request({
-          method: 'personal_sign',
+          method: "personal_sign",
           params: [message, address],
         })) as string;
       } else {
@@ -146,7 +136,7 @@ export const SIWEProvider = ({
 
       // Verify signature
       if (!(await siweConfig.verifyMessage({ message, signature }))) {
-        throw new Error('Error verifying SIWE signature');
+        throw new Error("Error verifying SIWE signature");
       }
 
       const data = await session.refetch().then((res) => {
@@ -173,7 +163,7 @@ export const SIWEProvider = ({
       signOutOnAccountChange &&
       getAddress(sessionData.address) !== getAddress(connectedAddress)
     ) {
-      console.warn('Wallet account changed, signing out of SIWE session');
+      console.warn("Wallet account changed, signing out of SIWE session");
       signOutAndRefetch();
     }
     // The SIWE spec includes a chainId parameter for contract-based accounts,
@@ -181,7 +171,7 @@ export const SIWEProvider = ({
     // connected account/network in sync. But this can be disabled when
     // configuring the SIWEProvider.
     else if (signOutOnNetworkChange && sessionData.chainId !== chain.id) {
-      console.warn('Wallet network changed, signing out of SIWE session');
+      console.warn("Wallet network changed, signing out of SIWE session");
       signOutAndRefetch();
     }
   }, [sessionData, connectedAddress, chain]);

package/src/connectkit/siwe/index.ts

@@ -1,8 +1,4 @@
-export { useSIWE } from './useSIWE';
-export {
-  SIWEProvider,
-  SIWE_SESSION_QUERY_KEY,
-  SIWE_NONCE_QUERY_KEY,
-} from './SIWEProvider';
-export { SIWEContext } from './SIWEContext';
-export type { SIWEConfig, SIWESession } from './SIWEContext';
+export { useSIWE } from "./useSIWE";
+export { SIWEProvider, SIWE_SESSION_QUERY_KEY, SIWE_NONCE_QUERY_KEY } from "./SIWEProvider";
+export { SIWEContext } from "./SIWEContext";
+export type { SIWEConfig, SIWESession } from "./SIWEContext";

package/src/connectkit/siwe/useSIWE.ts

@@ -1,5 +1,5 @@
-import { useContext } from 'react';
-import { SIWEContext, StatusState, SIWESession } from './SIWEContext';
+import { useContext } from "react";
+import { SIWEContext, StatusState, SIWESession } from "./SIWEContext";
 
 type HookProps = {
   isSignedIn: boolean;
@@ -23,9 +23,7 @@ type UseSIWEConfig = {
 };
 
 // Consumer-facing hook
-export const useSIWE = ({ onSignIn, onSignOut }: UseSIWEConfig = {}):
-  | HookProps
-  | any => {
+export const useSIWE = ({ onSignIn, onSignOut }: UseSIWEConfig = {}): HookProps | any => {
   const siweContextValue = useContext(SIWEContext);
   if (!siweContextValue) {
     // If we throw an error here then this will break non-SIWE apps, so best to just respond with not signed in.
@@ -34,7 +32,7 @@ export const useSIWE = ({ onSignIn, onSignOut }: UseSIWEConfig = {}):
       isSignedIn: false,
       data: undefined,
       status: StatusState.ERROR,
-      error: new Error('useSIWE hook must be inside a SIWEProvider.'),
+      error: new Error("useSIWE hook must be inside a SIWEProvider."),
       isRejected: false,
       isError: true,
       isLoading: false,
@@ -46,15 +44,14 @@ export const useSIWE = ({ onSignIn, onSignOut }: UseSIWEConfig = {}):
     };
   }
 
-  const { session, nonce, status, signOut, signIn, resetStatus } =
-    siweContextValue;
+  const { session, nonce, status, signOut, signIn, resetStatus } = siweContextValue;
   const { address, chainId } = session.data || {};
 
   const currentStatus = address
     ? StatusState.SUCCESS
     : session.isLoading || nonce.isLoading
-    ? StatusState.LOADING
-    : status;
+      ? StatusState.LOADING
+      : status;
 
   const isLoading = currentStatus === StatusState.LOADING;
   const isSuccess = currentStatus === StatusState.SUCCESS;

package/src/connectkit/useWeb3Modal.ts

@@ -0,0 +1,31 @@
+import { routes, useModal } from "@multiplatform.one/connectkit";
+import { useSIWE } from "./siwe";
+import { useConnectCallback, useConnectCallbackProps } from "./hooks/useConnectCallback";
+
+type UseModalProps = {} & useConnectCallbackProps;
+
+// web3's modal controller: connectkit's generic useModal + the wallet/SIWE-specific
+// openers (and the connect/disconnect callbacks) it used to bundle. Re-exported as
+// `useModal` from the web3 barrel so existing consumers keep their API.
+export const useWeb3Modal = ({ onConnect, onDisconnect }: UseModalProps = {}) => {
+  const base = useModal();
+  const { signIn } = useSIWE();
+
+  useConnectCallback({ onConnect, onDisconnect });
+
+  return {
+    ...base,
+    // Disconnected routes
+    openAbout: () => base.openScreen(routes.ABOUT),
+    openOnboarding: () => base.openScreen(routes.ONBOARDING),
+    // Connected routes
+    openProfile: () => base.openScreen(routes.PROFILE),
+    openSwitchNetworks: () => base.openScreen(routes.SWITCHNETWORKS),
+    openSIWE: (triggerSIWE?: boolean) => {
+      base.openScreen(routes.SIGNINWITHETHEREUM);
+      if (triggerSIWE) signIn();
+    },
+    // Open the SAME modal straight to the GPG screen — no wallet connect step.
+    openGpg: () => base.openScreen(routes.SIGNINWITHGPG),
+  };
+};

package/src/connectkit/wallets/index.ts

@@ -1,7 +1,7 @@
-import { CreateConnectorFn } from 'wagmi';
-import { injected } from '@wagmi/connectors';
+import { CreateConnectorFn } from "wagmi";
+import { injected } from "@wagmi/connectors";
 
-import { walletConfigs } from './walletConfigs';
+import { walletConfigs } from "./walletConfigs";
 
 type WalletIds = Extract<keyof typeof walletConfigs, string>;
 
@@ -10,9 +10,9 @@ export const wallets: {
 } = Object.keys(walletConfigs).reduce((acc, key) => {
   const config = walletConfigs[key];
   if (!config?.getWalletConnectDeeplink) return acc;
-  const target = key.split(',')[0].trim();
+  const target = key.split(",")[0].trim();
   const flag =
-    config.name?.replace('Wallet', '').replace(' ', '') ??
+    config.name?.replace("Wallet", "").replace(" ", "") ??
     target[0].toUpperCase() + target.slice(1);
 
   const connector = injected({
@@ -27,7 +27,7 @@ export const wallets: {
     // capitalize first letter
     .replace(/(?:^|\s)\S/g, (a) => a.toUpperCase())
     // remove spaces
-    .replace(/\s/g, '')
+    .replace(/\s/g, "")
     // lowercase first letter
     .replace(/(?:^|\s)\S/g, (a) => a.toLowerCase());
 

package/src/connectkit/wallets/useWallets.tsx

@@ -1,14 +1,14 @@
-import { Connector } from 'wagmi';
+import { Connector } from "wagmi";
 
-import { useConnectors } from '../hooks/useConnectors';
-import { walletConfigs, WalletConfigProps } from './walletConfigs';
-import { useContext } from '../components/ConnectKit';
+import { useConnectors } from "../hooks/useConnectors";
+import { walletConfigs, WalletConfigProps } from "./walletConfigs";
+import { useContext } from "@multiplatform.one/connectkit";
 import {
   isCoinbaseWalletConnector,
   isInjectedConnector,
   getConnectorEcosystem,
   type Ecosystem,
-} from '../utils';
+} from "@multiplatform.one/connectkit";
 
 export type WalletProps = {
   id: string;
@@ -34,29 +34,22 @@ export const useWallets = (): WalletProps[] => {
       // where id is comma seperated list
       (id) =>
         id
-          .split(',')
+          .split(",")
           .map((i) => i.trim())
-          .indexOf(connector.id) !== -1
+          .indexOf(connector.id) !== -1,
     );
 
     const c: WalletProps = {
       id: connector.id,
       ecosystem: getConnectorEcosystem(connector),
       name: connector.name ?? connector.id ?? connector.type,
-      icon: (
-        <img
-          src={connector.icon}
-          alt={connector.name}
-          width={'100%'}
-          height={'100%'}
-        />
-      ),
+      icon: <img src={connector.icon} alt={connector.name} width={"100%"} height={"100%"} />,
       connector,
-      iconShape: 'squircle',
+      iconShape: "squircle",
       isInstalled:
-        connector.type === 'mock' ||
-        connector.type === 'siww' || // siww wallets are only listed when detected present
-        (connector.type === 'injected' && connector.id !== 'metaMask') ||
+        connector.type === "mock" ||
+        connector.type === "siww" || // siww wallets are only listed when detected present
+        (connector.type === "injected" && connector.id !== "metaMask") ||
         isCoinbaseWalletConnector(connector.id), // always run coinbase wallet SDK
     };
 
@@ -65,12 +58,7 @@ export const useWallets = (): WalletProps[] => {
       return {
         ...c,
         iconConnector: connector.icon ? (
-          <img
-            src={connector.icon}
-            alt={connector.name}
-            width={'100%'}
-            height={'100%'}
-          />
+          <img src={connector.icon} alt={connector.name} width={"100%"} height={"100%"} />
         ) : undefined,
         ...wallet,
       };
@@ -82,13 +70,10 @@ export const useWallets = (): WalletProps[] => {
   return (
     wallets
       // remove duplicate ids
-      .filter(
-        (wallet, index, self) =>
-          self.findIndex((w) => w.id === wallet.id) === index
-      )
+      .filter((wallet, index, self) => self.findIndex((w) => w.id === wallet.id) === index)
       // Replace walletConnect's name with the one from options
       .map((wallet) => {
-        if (wallet.id === 'walletConnect') {
+        if (wallet.id === "walletConnect") {
           return {
             ...wallet,
             name: context.options?.walletConnectName || wallet.name,
@@ -100,27 +85,20 @@ export const useWallets = (): WalletProps[] => {
       // remove wallet with id coinbaseWalletSDK if wallet with id 'com.coinbase.wallet' exists
       .filter(
         (wallet, _index, self) =>
-          !(
-            wallet.id === 'coinbaseWalletSDK' &&
-            self.find((w) => w.id === 'com.coinbase.wallet')
-          )
+          !(wallet.id === "coinbaseWalletSDK" && self.find((w) => w.id === "com.coinbase.wallet")),
       )
       // remove wallet with id io.metamask if wallet with id 'metaMask' exists
       .filter(
         (wallet, _index, self) =>
           !(
-            (wallet.id === 'metaMaskSDK' || wallet.id === 'metaMask') &&
-            self.find(
-              (w) => w.id === 'io.metamask' || w.id === 'io.metamask.mobile'
-            )
-          )
+            (wallet.id === "metaMaskSDK" || wallet.id === "metaMask") &&
+            self.find((w) => w.id === "io.metamask" || w.id === "io.metamask.mobile")
+          ),
       )
       // order by isInstalled injected connectors first
       .sort((a, b) => {
-        const AisInstalled =
-          a.isInstalled && isInjectedConnector(a.connector.type);
-        const BisInstalled =
-          b.isInstalled && isInjectedConnector(b.connector.type);
+        const AisInstalled = a.isInstalled && isInjectedConnector(a.connector.type);
+        const BisInstalled = b.isInstalled && isInjectedConnector(b.connector.type);
 
         if (AisInstalled && !BisInstalled) return -1;
         if (!AisInstalled && BisInstalled) return 1;
@@ -128,8 +106,8 @@ export const useWallets = (): WalletProps[] => {
       })
       // move walletConnect to the end
       .sort((a, b) => {
-        if (a.id === 'walletConnect') return 1;
-        if (b.id === 'walletConnect') return -1;
+        if (a.id === "walletConnect") return 1;
+        if (b.id === "walletConnect") return -1;
         return 0;
       })
   );