@multiplatform.one/web3 5.1.0 → 6.0.0

package/src/connectkit/hooks/connectors/useWalletConnectUri.ts

@@ -1,9 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import { Connector, useAccount } from 'wagmi';
-import { useContext } from '../../components/ConnectKit';
-import { useConnect } from '../useConnect';
-import { useWalletConnectConnector } from './../useConnectors';
+import { Connector, useAccount } from "wagmi";
+import { useContext } from "@multiplatform.one/connectkit";
+import { useConnect } from "../useConnect";
+import { useWalletConnectConnector } from "./../useConnectors";
 
 type Props = {
   enabled?: boolean;
@@ -12,7 +12,7 @@ type Props = {
 export function useWalletConnectUri(
   { enabled }: Props = {
     enabled: true,
-  }
+  },
 ) {
   const { log } = useContext();
 
@@ -28,8 +28,8 @@ export function useWalletConnectUri(
 
     async function handleMessage(message) {
       const { type, data } = message;
-      log('WC Message', type, data);
-      if (type === 'display_uri') {
+      log("WC Message", type, data);
+      if (type === "display_uri") {
         setUri(data);
       }
       /*
@@ -42,7 +42,7 @@ export function useWalletConnectUri(
         */
     }
     async function handleDisconnect() {
-      log('WC Disconnect');
+      log("WC Disconnect");
 
       if (connector) connectWallet(connector);
     }
@@ -57,21 +57,21 @@ export function useWalletConnectUri(
       try {
         await connectWallet(connector);
       } catch (error: any) {
-        log('catch error');
+        log("catch error");
         log(error);
         if (error.code) {
           switch (error.code) {
             case 4001:
-              log('error.code - User rejected');
+              log("error.code - User rejected");
               connectWalletConnect(connector); // Regenerate QR code
               break;
             default:
-              log('error.code - Unknown Error');
+              log("error.code - Unknown Error");
               break;
           }
         } else {
           // Sometimes the error doesn't respond with a code
-          log('WalletConnect cannot connect.', error);
+          log("WalletConnect cannot connect.", error);
         }
       }
     }
@@ -81,13 +81,13 @@ export function useWalletConnectUri(
       if (!connector || uri) return;
       if (connector && !isConnected) {
         connectWalletConnect(connector);
-        log('add wc listeners');
-        connector.emitter.on('message', handleMessage);
-        connector.emitter.on('disconnect', handleDisconnect);
+        log("add wc listeners");
+        connector.emitter.on("message", handleMessage);
+        connector.emitter.on("disconnect", handleDisconnect);
         return () => {
-          log('remove wc listeners');
-          connector.emitter.off('message', handleMessage);
-          connector.emitter.off('disconnect', handleDisconnect);
+          log("remove wc listeners");
+          connector.emitter.off("message", handleMessage);
+          connector.emitter.off("disconnect", handleDisconnect);
         };
       }
     }

package/src/connectkit/hooks/useChainIsSupported.ts

@@ -1,5 +1,5 @@
-import { useConfig } from 'wagmi';
-import { isSyntheticChainId } from '../connectors/syntheticChains';
+import { useConfig } from "wagmi";
+import { isSyntheticChainId } from "../connectors/syntheticChains";
 
 export function useChainIsSupported(chainId?: number): boolean | null {
   const { chains } = useConfig();

package/src/connectkit/hooks/useChains.ts

@@ -1,5 +1,5 @@
-import { Chain } from 'viem';
-import { useConfig } from 'wagmi';
+import { Chain } from "viem";
+import { useConfig } from "wagmi";
 
 export function useChains() {
   const wagmi = useConfig();

package/src/connectkit/hooks/useConnect.tsx

@@ -8,9 +8,9 @@ import {
   useConnect as wagmiUseConnect,
   CreateConnectorFn,
   Connector,
-} from 'wagmi';
-import { useContext } from '../components/ConnectKit';
-import { isSiwwConnector } from '../utils';
+} from "wagmi";
+import { useContext } from "@multiplatform.one/connectkit";
+import { isSiwwConnector } from "@multiplatform.one/connectkit";
 
 export function useConnect({ ...props }: UseConnectParameters = {}) {
   const context = useContext();
@@ -21,7 +21,7 @@ export function useConnect({ ...props }: UseConnectParameters = {}) {
       ...props.mutation,
       onError(err) {
         if (err.message) {
-          if (err.message !== 'User rejected request') {
+          if (err.message !== "User rejected request") {
             context.log(err.message, err);
           }
         } else {
@@ -39,18 +39,15 @@ export function useConnect({ ...props }: UseConnectParameters = {}) {
     }: {
       connector: CreateConnectorFn | Connector;
       chainId?: number;
-      mutation?: UseConnectParameters['mutation'];
+      mutation?: UseConnectParameters["mutation"];
     }) => {
       return connect(
         {
           connector,
           chainId:
-            chainId ??
-            (isSiwwConnector(connector)
-              ? undefined
-              : context.options?.initialChainId),
+            chainId ?? (isSiwwConnector(connector) ? undefined : context.options?.initialChainId),
         },
-        mutation
+        mutation,
       );
     },
     connectAsync: async ({
@@ -60,18 +57,15 @@ export function useConnect({ ...props }: UseConnectParameters = {}) {
     }: {
       connector: CreateConnectorFn | Connector;
       chainId?: number;
-      mutation?: UseConnectParameters['mutation'];
+      mutation?: UseConnectParameters["mutation"];
     }) => {
       return connectAsync(
         {
           connector,
           chainId:
-            chainId ??
-            (isSiwwConnector(connector)
-              ? undefined
-              : context.options?.initialChainId),
+            chainId ?? (isSiwwConnector(connector) ? undefined : context.options?.initialChainId),
         },
-        mutation
+        mutation,
       );
     },
     connectors,

package/src/connectkit/hooks/useConnectCallback.ts

@@ -1,20 +1,11 @@
-import { useAccountEffect } from 'wagmi';
+import { useAccountEffect } from "wagmi";
 
 export type useConnectCallbackProps = {
-  onConnect?: ({
-    address,
-    connectorId,
-  }: {
-    address?: string;
-    connectorId?: string;
-  }) => void;
+  onConnect?: ({ address, connectorId }: { address?: string; connectorId?: string }) => void;
   onDisconnect?: () => void;
 };
 
-export const useConnectCallback = ({
-  onConnect,
-  onDisconnect,
-}: useConnectCallbackProps) => {
+export const useConnectCallback = ({ onConnect, onDisconnect }: useConnectCallbackProps) => {
   useAccountEffect({
     onConnect: ({ address, connector, isReconnected }) => {
       if (!isReconnected) {

package/src/connectkit/hooks/useConnectors.ts

@@ -1,4 +1,4 @@
-import { type Connector, useConnectors as useWagmiConnectors } from 'wagmi';
+import { type Connector, useConnectors as useWagmiConnectors } from "wagmi";
 
 export function useConnectors() {
   const connectors = useWagmiConnectors();
@@ -7,18 +7,16 @@ export function useConnectors() {
 
 export function useConnector(id: string, uuid?: string) {
   const connectors = useConnectors();
-  if (id === 'injected' && uuid) {
+  if (id === "injected" && uuid) {
     return connectors.find((c) => c.id === id && c.name === uuid) as Connector;
-  } else if (id === 'injected') {
-    return connectors.find(
-      (c) => c.id === id && c.name.includes('Injected')
-    ) as Connector;
+  } else if (id === "injected") {
+    return connectors.find((c) => c.id === id && c.name.includes("Injected")) as Connector;
   }
   return connectors.find((c) => c.id === id);
 }
 
 export function useAaveAccountConnector() {
-  return useConnector('aaveAccountProvider');
+  return useConnector("aaveAccountProvider");
 }
 
 export function useInjectedConnector(uuid?: string) {
@@ -35,7 +33,7 @@ export function useInjectedConnector(uuid?: string) {
       })`,
   }
   */
-  return useConnector('injected', uuid);
+  return useConnector("injected", uuid);
 }
 export function useWalletConnectConnector() {
   /*
@@ -45,7 +43,7 @@ export function useWalletConnectConnector() {
     showQrModal: false,
   }
   */
-  return useConnector('walletConnect');
+  return useConnector("walletConnect");
 }
 export function useCoinbaseWalletConnector() {
   /*
@@ -53,7 +51,7 @@ export function useCoinbaseWalletConnector() {
     headlessMode: true,
   }
   */
-  return useConnector('coinbaseWalletSDK');
+  return useConnector("coinbaseWalletSDK");
 }
 export function useMetaMaskConnector() {
   /*
@@ -63,5 +61,5 @@ export function useMetaMaskConnector() {
     UNSTABLE_shimOnConnectSelectAccount: true,
   }
   */
-  return useConnector('metaMask');
+  return useConnector("metaMask");
 }

package/src/connectkit/hooks/useEnsFallbackConfig.ts

@@ -1,7 +1,7 @@
-import type { Config } from '@wagmi/core';
-import { http, createConfig } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
-import { useChainIsSupported } from '../hooks/useChainIsSupported';
+import type { Config } from "@wagmi/core";
+import { http, createConfig } from "wagmi";
+import { mainnet } from "wagmi/chains";
+import { useChainIsSupported } from "../hooks/useChainIsSupported";
 
 const ensFallbackConfig = createConfig({
   chains: [mainnet],

package/src/connectkit/hooks/useLastConnector.ts

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { useConfig } from 'wagmi';
+import { useEffect, useState } from "react";
+import { useConfig } from "wagmi";
 
 export const useLastConnector = () => {
   const { storage } = useConfig();
@@ -7,14 +7,14 @@ export const useLastConnector = () => {
 
   useEffect(() => {
     const init = async () => {
-      const id = await storage?.getItem('recentConnectorId');
-      setLastConnectorId(id ?? '');
+      const id = await storage?.getItem("recentConnectorId");
+      setLastConnectorId(id ?? "");
     };
     init();
   }, []);
 
   const update = (id: string) => {
-    storage?.setItem('recentConnectorId', id);
+    storage?.setItem("recentConnectorId", id);
   };
 
   return {

package/src/connectkit/hooks/useWalletConnectModal.tsx

@@ -1,10 +1,8 @@
-import { useState } from 'react';
-import { Connector, CreateConnectorFn } from 'wagmi';
-import { walletConnect } from 'wagmi/connectors';
-import { useContext } from '../components/ConnectKit';
-
-import { isWalletConnectConnector } from '../utils';
-import { useConnect } from './useConnect';
+import { useState } from "react";
+import { Connector, CreateConnectorFn } from "wagmi";
+import { walletConnect } from "wagmi/connectors";
+import { useContext, isWalletConnectConnector } from "@multiplatform.one/connectkit";
+import { useConnect } from "./useConnect";
 
 export function useWalletConnectModal() {
   const { log } = useContext();
@@ -15,12 +13,12 @@ export function useWalletConnectModal() {
     isOpen,
     open: async () => {
       // add modal styling because wagmi does not let you add styling to the modal
-      const w3mcss = document.createElement('style');
-      w3mcss.innerHTML = `w3m-modal, wcm-modal{ --wcm-z-index: 2147483647; --w3m-z-index:2147483647; }`;
+      const w3mcss = document.createElement("style");
+      w3mcss.textContent = `w3m-modal, wcm-modal{ --wcm-z-index: 2147483647; --w3m-z-index:2147483647; }`;
       document.head.appendChild(w3mcss);
 
       const clientConnector: Connector | undefined = connectors.find((c) =>
-        isWalletConnectConnector(c.id)
+        isWalletConnectConnector(c.id),
       );
 
       if (clientConnector) {
@@ -37,17 +35,17 @@ export function useWalletConnectModal() {
           try {
             await connectAsync({ connector: connector });
           } catch (err) {
-            log('WalletConnect', err);
+            log("WalletConnect", err);
           }
           setIsOpen(false);
 
           // remove modal styling
           document.head.removeChild(w3mcss);
         } catch (err) {
-          log('Could not get WalletConnect provider', err);
+          log("Could not get WalletConnect provider", err);
         }
       } else {
-        log('No WalletConnect connector available');
+        log("No WalletConnect connector available");
       }
     },
   };

package/src/connectkit/index.ts

@@ -1,18 +1,15 @@
-export const CONNECTKIT_VERSION = '1.9.2';
+export const CONNECTKIT_VERSION = "1.9.2";
 
-export * as Types from './types';
-export { default as getDefaultConfig } from './defaultConfig';
-export { default as getDefaultConnectors } from './defaultConnectors';
-export { wallets } from './wallets';
+export { Types } from "@multiplatform.one/connectkit";
+export { default as getDefaultConfig } from "./defaultConfig";
+export { default as getDefaultConnectors } from "./defaultConnectors";
+export { wallets } from "./wallets";
 
-export { useModal } from './hooks/useModal';
-export {
-  SIWEProvider,
-  useSIWE,
-  SIWE_NONCE_QUERY_KEY,
-  SIWE_SESSION_QUERY_KEY,
-} from './siwe';
-export type { SIWESession, SIWEConfig } from './siwe';
+// web3's wrapper (generic connectkit useModal + wallet/SIWE openers) keeps the
+// consumer-facing `useModal` API. The agnostic base lives in ./hooks/useModal.
+export { useWeb3Modal as useModal } from "./useWeb3Modal";
+export { SIWEProvider, useSIWE, SIWE_NONCE_QUERY_KEY, SIWE_SESSION_QUERY_KEY } from "./siwe";
+export type { SIWESession, SIWEConfig } from "./siwe";
 
 // Sign-In With GPG (SIWG) — a separate, connection-free signer that opens the SAME
 // modal to a GPG screen. Pulls in NO wagmi/viem; destined for a standalone gpg package.
@@ -21,26 +18,27 @@ export {
   useGpg,
   GpgStatusState,
   GPG_NONCE_QUERY_KEY,
-} from './gpg';
-export type { GpgConfig } from './gpg';
+  SignInWithGpgButton,
+} from "@multiplatform.one/gpg";
+export type { GpgConfig } from "@multiplatform.one/gpg";
 
-export { ConnectKitProvider, Context } from './components/ConnectKit';
-export { ConnectKitButton } from './components/ConnectButton';
-export { default as SIWEButton } from './components/Standard/SIWE';
-export { default as SignInWithGpgButton } from './components/Standard/GPG';
+export { ConnectKitProvider } from "./web3Provider";
+export { Context } from "@multiplatform.one/connectkit";
+export { ConnectKitButton } from "./components/ConnectButton";
+export { default as SIWEButton } from "./components/Standard/SIWE";
 
 //export { default as NetworkButton } from './components/NetworkButton';
 //export { default as BalanceButton, Balance } from './components/BalanceButton';
-export { default as Avatar } from './components/Common/Avatar';
-export { default as ChainIcon } from './components/Common/Chain';
+export { default as Avatar } from "./components/Common/Avatar";
+export { default as ChainIcon } from "./components/Common/Chain";
 
 // Hooks
-export { default as useIsMounted } from './hooks/useIsMounted'; // Useful for apps that use SSR
-export { useChains } from './hooks/useChains';
-export { useChainIsSupported } from './hooks/useChainIsSupported';
+export { useIsMounted } from "@multiplatform.one/connectkit"; // Useful for apps that use SSR
+export { useChains } from "./hooks/useChains";
+export { useChainIsSupported } from "./hooks/useChainIsSupported";
 
 // TODO: Make this private
-export { default as ConnectKitModalDemo } from './components/ConnectModal/demo';
+export { default as ConnectKitModalDemo } from "./components/ConnectModal/demo";
 
 // ── siww multi-chain (Solana / Sui / Bitcoin) ──────────────────────────────────
 // The vendored WalletAdapters + the wagmi connector shims that let ConnectKit's
@@ -54,12 +52,12 @@ export {
   type WalletAdapter,
   type WalletEntry,
   type SiwwEcosystem,
-} from './adapters';
-export { getSiwwConnectors } from './connectors/getSiwwConnectors';
+} from "./adapters";
+export { getSiwwConnectors } from "./connectors/getSiwwConnectors";
 export {
   walletAdapterConnector,
   type SiwwConnectorEntry,
-} from './connectors/walletAdapterConnector';
+} from "./connectors/walletAdapterConnector";
 export {
   syntheticChains,
   solanaChain,
@@ -69,22 +67,18 @@ export {
   SUI_CHAIN_ID,
   BITCOIN_CHAIN_ID,
   isSyntheticChainId,
-} from './connectors/syntheticChains';
+} from "./connectors/syntheticChains";
 export {
   getConnectorEcosystem,
   isSiwwConnector,
   type Ecosystem,
-} from './utils';
+} from "@multiplatform.one/connectkit";
 // The unified sign-in message layer: ONE source of truth for the SIWx message per
 // signer family, and a chain-agnostic createMessage to plug into SIWEConfig so all
 // chains sign in through ConnectKit's single signIn().
-export {
-  buildSiwwMessage,
-  type SignerFamily,
-  type SiwwMessageOptions,
-} from './adapters/messages';
+export { buildSiwwMessage, type SignerFamily, type SiwwMessageOptions } from "./adapters/messages";
 export {
   createSiwwMessage,
   familyFromChainId,
   type CreateSiwwMessageArgs,
-} from './connectors/createSiwwMessage';
+} from "./connectors/createSiwwMessage";

package/src/connectkit/profileHeaderAction.tsx

@@ -0,0 +1,105 @@
+import React, { useContext as useReactContext } from "react";
+import { motion } from "framer-motion";
+
+import {
+  HeaderActionProps,
+  routes,
+  useContext,
+  SiweButton,
+  SignInTooltip,
+  AuthIcon,
+  useLocales,
+} from "@multiplatform.one/connectkit";
+import { useSIWE } from "./siwe";
+import { SIWEContext } from "./siwe/SIWEContext";
+
+// web3's profile-screen header action — the "Sign In With Ethereum" shortcut that
+// connectkit's modal used to render inline. Lives here (not in the agnostic shell)
+// because it depends on SIWE. Self-gates: renders nothing unless SIWE is enabled,
+// mirroring the old `route === PROFILE && signInWithEthereum` condition.
+
+const ProfileIcon = ({ isSignedIn }: { isSignedIn?: boolean }) => (
+  <div style={{ position: "relative" }}>
+    {isSignedIn ? (
+      <AuthIcon style={{ bottom: -1, right: -1 }} />
+    ) : (
+      <div
+        style={{
+          zIndex: 2,
+          position: "absolute",
+          top: -2,
+          right: -2,
+          background: "#1A88F8",
+          borderRadius: 8,
+          boxShadow: "0 0 0 2px var(--ck-body-background)",
+          width: 8,
+          height: 8,
+        }}
+      />
+    )}
+    <svg
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ overflow: "visible" }}
+    >
+      <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M16.5 16.775C14.8618 15.0649 12.5552 14 10 14C7.44477 14 5.13825 15.0649 3.5 16.775"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <circle cx="10" cy="8" r="3" stroke="currentColor" strokeWidth="2" />
+    </svg>
+  </div>
+);
+
+export const ProfileSiweHeaderAction: React.FC<HeaderActionProps> = ({ mobile, inTransition }) => {
+  const context = useContext();
+  const siweEnabled = useReactContext(SIWEContext)?.enabled ?? false;
+  const { isSignedIn, reset } = useSIWE();
+  const locales = useLocales();
+
+  if (!siweEnabled) return null;
+
+  return (
+    <>
+      {!isSignedIn && !context.options?.hideTooltips && (
+        <motion.div
+          style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{
+            opacity: 1,
+            scale: 1,
+            transition: { delay: 0.5, duration: 0.2 },
+          }}
+          exit={{
+            opacity: 0,
+            scale: 0.6,
+            transition: { delay: 0, duration: mobile ? 0 : 0.1 },
+          }}
+        >
+          <SignInTooltip>{locales.signInWithEthereumScreen_tooltip}</SignInTooltip>
+        </motion.div>
+      )}
+      <SiweButton
+        disabled={inTransition}
+        aria-label={locales.signInWithEthereumScreen_signedOut_heading}
+        key="siweButton"
+        onClick={() => {
+          reset();
+          context.setRoute(routes.SIGNINWITHETHEREUM);
+        }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: mobile ? 0 : 0.1, delay: mobile ? 0.01 : 0 }}
+      >
+        <ProfileIcon isSignedIn={isSignedIn} />
+      </SiweButton>
+    </>
+  );
+};