@multiplatform.one/web3 7.18.0 → 7.20.0

package/src/connectkit/defaultConnectors.ts

@@ -1,12 +1,16 @@
 import { CreateConnectorFn } from "wagmi";
-import { walletConnect, coinbaseWallet, CoinbaseWalletParameters, safe } from "@wagmi/connectors";
-import { metaMaskSdk } from "./connectors/metaMaskSdkConnector";
+// Per-connector subpaths: the package root re-exports every wagmi connector, and a
+// bundler that doesn't tree-shake (the webview, the login bundles) ships them all.
+import { coinbaseWallet, type CoinbaseWalletParameters } from "@wagmi/connectors/coinbaseWallet";
+import { safe } from "@wagmi/connectors/safe";
+import { metaMaskConnect } from "./connectors/metaMaskConnectConnector";
 import {
   isEmbeddedDesktopWebview,
   metaMaskOptionsForEmbeddedDesktop,
 } from "./connectors/embeddedDesktop";
 
-import { EthereumProviderOptions as AaveAccountOptions, aaveAccountConnector } from "@aave/account";
+import type { EthereumProviderOptions as AaveAccountOptions } from "@aave/account";
+import { aaveAccountConnector } from "./connectors/aaveAccountConnector";
 
 type DefaultConnectorsProps = {
   app: {
@@ -15,7 +19,6 @@ type DefaultConnectorsProps = {
     description?: string;
     url?: string;
   };
-  walletConnectProjectId?: string;
   coinbaseWalletPreference?: CoinbaseWalletParameters<"4">["preference"];
   enableAaveAccount?: boolean;
   aaveAccountOptions?: AaveAccountOptions;
@@ -23,12 +26,10 @@ type DefaultConnectorsProps = {
 
 const defaultConnectors = ({
   app,
-  walletConnectProjectId,
   coinbaseWalletPreference,
   enableAaveAccount,
   aaveAccountOptions,
 }: DefaultConnectorsProps): CreateConnectorFn[] => {
-  const hasAllAppData = app.name && app.icon && app.description && app.url;
   const shouldUseSafeConnector = !(typeof window === "undefined") && window?.parent !== window;
 
   const connectors: CreateConnectorFn[] = enableAaveAccount
@@ -44,53 +45,31 @@ const defaultConnectors = ({
     );
   }
 
-  // Add the rest of the connectors
   connectors.push(
-    // MetaMask rides its OWN SDK (id `metaMaskSDK`) — never WalletConnect.
-    // This is the CLASSIC @metamask/sdk connector (see metaMaskSdkConnector.ts for
-    // why not @wagmi/connectors' MWP-based one): mobile browser = deeplink over the
-    // SDK's persistent socket.io relay, which survives the tab being frozen or
-    // discarded during the wallet bounce; desktop = extension; MetaMask in-app
-    // browser = injected; desktop without the extension = the SDK's own QR/install
-    // modal (ConnectKit's QR page is WalletConnect-only, so let the SDK render it).
-    //
-    // Tauri/WebView2/WKWebView: no extension injection. SDK InstallModal custom
-    // elements + `location.href = metamask://` are hostile there — use headless
-    // remote connect and let ConnectKit render the display_uri QR instead.
-    // Mobile options are untouched (useDeeplink stays default true).
-    metaMaskSdk({
-      dappMetadata: {
+    // MetaMask rides MetaMask Connect (id `metaMaskSDK`): the extension on desktop,
+    // the MetaMask app over MetaMask's own relay on mobile, its install/QR modal on
+    // a desktop without the extension. Tauri/WebView2/WKWebView get no extension and
+    // must not navigate to metamask://, so they run headless and the modal renders
+    // the display_uri QR instead.
+    metaMaskConnect({
+      dapp: {
         name: app.name,
         url: app.url,
         iconUrl: app.icon,
       },
-      enableAnalytics: false,
-      checkInstallationImmediately: false,
       ...(isEmbeddedDesktopWebview() ? metaMaskOptionsForEmbeddedDesktop() : {}),
     }),
     coinbaseWallet({
       appName: app.name,
       appLogoUrl: app.icon,
-      preference: coinbaseWalletPreference,
+      preference: {
+        options: "all",
+        ...coinbaseWalletPreference,
+        telemetry: false,
+      },
     }),
   );
 
-  if (walletConnectProjectId) {
-    connectors.push(
-      walletConnect({
-        showQrModal: false,
-        projectId: walletConnectProjectId,
-        metadata: hasAllAppData
-          ? {
-              name: app.name,
-              description: app.description!,
-              url: app.url!,
-              icons: [app.icon!],
-            }
-          : undefined,
-      }),
-    );
-  }
   /*
   connectors.push(
     injected({

package/src/connectkit/hooks/useConnectors.ts

@@ -35,16 +35,6 @@ export function useInjectedConnector(uuid?: string) {
   */
   return useConnector("injected", uuid);
 }
-export function useWalletConnectConnector() {
-  /*
-  options: {
-    qrcode: false,
-    // or
-    showQrModal: false,
-  }
-  */
-  return useConnector("walletConnect");
-}
 export function useCoinbaseWalletConnector() {
   /*
   options: {

package/src/connectkit/index.ts

@@ -4,6 +4,10 @@ export { Types } from "@multiplatform.one/connectkit";
 export { default as getDefaultConfig } from "./defaultConfig";
 export { default as getDefaultConnectors } from "./defaultConnectors";
 export { wallets } from "./wallets";
+export {
+  metaMaskConnect,
+  type MetaMaskConnectParameters,
+} from "./connectors/metaMaskConnectConnector";
 
 // web3's wrapper (generic connectkit useModal + wallet/SIWE openers) keeps the
 // consumer-facing `useModal` API. The agnostic base lives in ./hooks/useModal.

package/src/connectkit/screens.tsx

@@ -12,7 +12,6 @@ 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";
@@ -41,10 +40,6 @@ export type Web3ModalState = ModalState & {
   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] ?? "";
@@ -75,25 +70,10 @@ export const web3Screens: readonly ScreenDef[] = [
     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 ?? "";
-    },
+    heading: (s) => (s as Web3ModalState).walletName ?? "",
     // Reached internally (after picking a connector), never via openScreen.
     availableWhen: () => false,
     onBack: (api) => api.setRoute(routes.CONNECTORS),

package/src/connectkit/siwe/SIWEProvider.spec.tsx

@@ -0,0 +1,180 @@
+// @vitest-environment happy-dom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, render, waitFor } from "@testing-library/react";
+import { createContext, useContext } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getBase58Decoder } from "@solana/kit";
+
+const { mockUseAccount, mockSignMessageAsync } = vi.hoisted(() => ({
+  mockUseAccount: vi.fn(),
+  mockSignMessageAsync: vi.fn(async () => "0xsigned"),
+}));
+
+vi.mock("wagmi", () => ({
+  useAccount: mockUseAccount,
+  useAccountEffect: () => undefined,
+  useSignMessage: () => ({ signMessageAsync: mockSignMessageAsync }),
+}));
+
+vi.mock("@multiplatform.one/connectkit", () => ({
+  Context: createContext(null),
+  isWalletConnector: (c?: { type?: string }) => c?.type === "wallet",
+}));
+
+import { SIWEContext, type SIWEContextValue } from "./SIWEContext";
+import { SIWEProvider } from "./SIWEProvider";
+
+const evmAddress = "0x0000000000000000000000000000000000000001";
+const solanaAddress = getBase58Decoder().decode(new Uint8Array(32).fill(7));
+const b64 = (s: string) => window.btoa(unescape(encodeURIComponent(s)));
+
+function renderSignIn() {
+  const createMessage = vi.fn(({ chainId }: { chainId: number }) => `sign in on ${chainId}`);
+  const onSign = vi.fn(() => true);
+  let ctx: SIWEContextValue | null = null;
+  const Probe = () => {
+    ctx = useContext(SIWEContext);
+    return null;
+  };
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <SIWEProvider
+        getNonce={async () => "nonce123"}
+        createMessage={createMessage}
+        verifyMessage={async () => true}
+        getSession={async () => null}
+        signOut={async () => true}
+        onSign={onSign}
+      >
+        <Probe />
+      </SIWEProvider>
+    </QueryClientProvider>,
+  );
+  return { createMessage, onSign, ctx: () => ctx! };
+}
+
+function signInWith(connector: object, address: string, chainId: number) {
+  mockUseAccount.mockReturnValue({ address, chain: { id: chainId }, connector });
+  const onSign = vi.fn(async () => undefined);
+  let signIn: (() => Promise<unknown>) | undefined;
+  let nonceReady = false;
+  function Probe() {
+    const ctx = useContext(SIWEContext);
+    signIn = ctx?.signIn;
+    nonceReady = !!ctx?.nonce.data;
+    return null;
+  }
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <SIWEProvider
+        getNonce={async () => "nonce123"}
+        createMessage={({ address: a, nonce }) => `example.com login ${a} ${nonce}`}
+        verifyMessage={async () => true}
+        getSession={async () => null}
+        signOut={async () => true}
+        onSign={onSign}
+      >
+        <Probe />
+      </SIWEProvider>
+    </QueryClientProvider>,
+  );
+  return {
+    onSign,
+    async run() {
+      await waitFor(() => expect(nonceReady).toBe(true));
+      await act(async () => {
+        await signIn?.();
+      });
+    },
+  };
+}
+
+describe("SIWEProvider signIn", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("signs with the connected chain id when the wallet sits on a chain the config does not list", async () => {
+    // MetaMask on Base while the config lists mainnet/polygon: wagmi reports the
+    // connection's chainId but no `chain` object.
+    mockUseAccount.mockReturnValue({ address: evmAddress, chain: undefined, chainId: 8453 });
+    const { createMessage, onSign, ctx } = renderSignIn();
+    await waitFor(() => expect(ctx().nonce.data).toBe("nonce123"));
+
+    let result: unknown;
+    await act(async () => {
+      result = await ctx().signIn();
+    });
+
+    expect(createMessage).toHaveBeenCalledWith({
+      address: evmAddress,
+      chainId: 8453,
+      nonce: "nonce123",
+    });
+    expect(mockSignMessageAsync).toHaveBeenCalledWith({ message: "sign in on 8453" });
+    expect(onSign).toHaveBeenCalledOnce();
+    expect(result).not.toBe(false);
+  });
+
+  it("uses the configured chain when wagmi knows it", async () => {
+    mockUseAccount.mockReturnValue({ address: evmAddress, chain: { id: 137 }, chainId: 137 });
+    const { createMessage, ctx } = renderSignIn();
+    await waitFor(() => expect(ctx().nonce.data).toBe("nonce123"));
+
+    await act(async () => {
+      await ctx().signIn();
+    });
+
+    expect(createMessage).toHaveBeenCalledWith({
+      address: evmAddress,
+      chainId: 137,
+      nonce: "nonce123",
+    });
+  });
+});
+
+describe("SIWEProvider signing", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("signs a non-EVM wallet through its client, never the shim provider", async () => {
+    const adapter = { address: solanaAddress, signMessage: vi.fn(async () => "1112") };
+    const getProvider = vi.fn();
+    const connector = {
+      id: "wallet:solana:phantom",
+      type: "wallet",
+      ecosystem: "solana",
+      adapter,
+      getProvider,
+    };
+    const { onSign, run } = signInWith(connector, solanaAddress, 0x534f4c);
+    await run();
+    const message = `example.com login ${solanaAddress} nonce123`;
+    expect(adapter.signMessage).toHaveBeenCalledWith(message);
+    expect(getProvider).not.toHaveBeenCalled();
+    expect(onSign).toHaveBeenCalledWith({ username: "1112", password: b64(message), message });
+  });
+
+  it("signs Sui and Bitcoin wallets through their clients", async () => {
+    for (const [ecosystem, address, chainId] of [
+      ["sui", "0xsui", 0x535549],
+      ["bitcoin", "bc1qexample", 0x425443],
+    ] as const) {
+      const adapter = { address, signMessage: vi.fn(async () => `${ecosystem}-sig`) };
+      const connector = { id: `wallet:${ecosystem}`, type: "wallet", ecosystem, adapter };
+      const { onSign, run } = signInWith(connector, address, chainId);
+      await run();
+      expect(onSign).toHaveBeenCalledWith(
+        expect.objectContaining({ username: `${ecosystem}-sig` }),
+      );
+    }
+  });
+
+  it("keeps EVM wallets on wagmi's signMessage", async () => {
+    mockSignMessageAsync.mockResolvedValue("0xevmsig");
+    const address = "0x1111111111111111111111111111111111111111";
+    const { onSign, run } = signInWith({ id: "metaMask", type: "injected" }, address, 1);
+    await run();
+    expect(mockSignMessageAsync).toHaveBeenCalledWith({
+      message: `example.com login ${address} nonce123`,
+    });
+    expect(onSign).toHaveBeenCalledWith(expect.objectContaining({ username: "0xevmsig" }));
+  });
+});

package/src/connectkit/siwe/SIWEProvider.tsx

@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Context as ConnectKitContext } from "@multiplatform.one/connectkit";
 import { SIWEContext, SIWEConfig, StatusState, SIWESession } from "./SIWEContext";
 import { isWalletConnector } from "@multiplatform.one/connectkit";
+import { clientForConnector } from "../../clients/connector";
 
 type Props = SIWEConfig & {
   children: ReactNode;
@@ -89,13 +90,13 @@ export const SIWEProvider = ({
     },
   });
 
-  const { address, chain, connector } = useAccount();
+  const { address, chain, chainId: connectedChainId, connector } = useAccount();
   const { signMessageAsync } = useSignMessage();
 
   const onError = (error: any) => {
     console.error("signIn error", error, error.message);
     switch (error.code) {
-      case -32000: // WalletConnect: user rejected
+      case -32000: // user rejected, as some wallets report it
       case 4001: // MetaMask: user rejected
       case "ACTION_REJECTED": // MetaMask: user rejected
         setStatus(StatusState.REJECTED);
@@ -111,7 +112,9 @@ export const SIWEProvider = ({
         throw new Error("SIWE not configured");
       }
 
-      const chainId = chain?.id;
+      // `chain` is undefined when the wallet sits on a network the config does not
+      // list (MetaMask on Base or BSC); the message still names the chain it signs on.
+      const chainId = chain?.id ?? connectedChainId;
       if (!address) throw new Error("No address found");
       if (!chainId) throw new Error("No chainId found");
 
@@ -129,18 +132,13 @@ export const SIWEProvider = ({
 
       // Ask user to sign message with their wallet. wallet (non-EVM) connectors can't
       // go through viem's signMessage — it validates the account as a 20-byte EVM
-      // address (bc1…/base58/sui-0x all fail). Sign through the connector's provider
-      // directly: our shim routes personal_sign → adapter.signMessage and returns the
-      // chain-native signature (base58/base64) untouched.
+      // address (bc1…/base58/sui-0x all fail). Sign through the wallet's per-chain
+      // client instead, which returns the chain-native signature (base58/base64).
       let signature: string;
       if (connector && isWalletConnector(connector)) {
-        const provider = (await connector.getProvider()) as {
-          request: (args: { method: string; params?: unknown[] }) => Promise<unknown>;
-        };
-        signature = (await provider.request({
-          method: "personal_sign",
-          params: [message, address],
-        })) as string;
+        const client = clientForConnector(connector);
+        if (!client) throw new Error("The connected wallet has no signing client");
+        signature = await client.signMessage(message);
       } else {
         signature = await signMessageAsync({ message });
       }

package/src/connectkit/wallets/index.ts

@@ -1,16 +1,19 @@
 import { CreateConnectorFn } from "wagmi";
-import { injected } from "@wagmi/connectors";
+import { injected } from "@wagmi/connectors/injected";
 
 import { walletConfigs } from "./walletConfigs";
 
 type WalletIds = Extract<keyof typeof walletConfigs, string>;
 
+// Injected connectors for the browser-extension wallets the modal knows by name.
+// MetaMask is left out: it connects through metaMaskConnect.
 export const wallets: {
   [key: WalletIds]: CreateConnectorFn;
 } = Object.keys(walletConfigs).reduce((acc, key) => {
   const config = walletConfigs[key];
-  if (!config?.getWalletConnectDeeplink) return acc;
+  if (!config?.name || !config.downloadUrls) return acc;
   const target = key.split(",")[0].trim();
+  if (target === "injected" || target.toLowerCase().startsWith("metamask")) return acc;
   const flag =
     config.name?.replace("Wallet", "").replace(" ", "") ??
     target[0].toUpperCase() + target.slice(1);

package/src/connectkit/wallets/useWallets.tsx

@@ -2,7 +2,6 @@ import { Connector } from "wagmi";
 
 import { useConnectors } from "../hooks/useConnectors";
 import { walletConfigs, WalletConfigProps } from "./walletConfigs";
-import { useContext } from "@multiplatform.one/connectkit";
 import {
   isCoinbaseWalletConnector,
   isInjectedConnector,
@@ -27,7 +26,6 @@ export const useWallet = (id: string): WalletProps | null => {
 };
 export const useWallets = (): WalletProps[] => {
   const connectors = useConnectors();
-  const context = useContext();
 
   const wallets = connectors.map((connector): WalletProps => {
     // use overrides
@@ -51,7 +49,7 @@ export const useWallets = (): WalletProps[] => {
         connector.type === "mock" ||
         connector.type === "wallet" || // non-EVM wallets are only listed when detected present
         (connector.type === "injected" && connector.id !== "metaMask") ||
-        isMetaMaskConnector(connector.id) || // always run the MetaMask SDK (extension, mobile deeplink, or SDK modal)
+        isMetaMaskConnector(connector.id) || // always run MetaMask Connect (extension, mobile deeplink, or its install modal)
         isCoinbaseWalletConnector(connector.id), // always run coinbase wallet SDK
     };
 
@@ -73,17 +71,6 @@ export const useWallets = (): WalletProps[] => {
     wallets
       // remove duplicate ids
       .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") {
-          return {
-            ...wallet,
-            name: context.options?.walletConnectName || wallet.name,
-            shortName: context.options?.walletConnectName || wallet.shortName,
-          };
-        }
-        return wallet;
-      })
       // remove wallet with id coinbaseWalletSDK if wallet with id 'com.coinbase.wallet' exists
       .filter(
         (wallet, _index, self) =>
@@ -106,11 +93,5 @@ export const useWallets = (): WalletProps[] => {
         if (!AisInstalled && BisInstalled) return 1;
         return 0;
       })
-      // move walletConnect to the end
-      .sort((a, b) => {
-        if (a.id === "walletConnect") return 1;
-        if (b.id === "walletConnect") return -1;
-        return 0;
-      })
   );
 };