@multiplatform.one/web3 5.1.0 → 6.0.0

package/src/connectkit/components/Pages/SignInWithEthereum/index.tsx

@@ -1,34 +1,34 @@
-import React, { useEffect, useState } from 'react';
-
-import { useContext } from '../../ConnectKit';
+import React, { useEffect, useState } from "react";
 
 import {
+  useContext,
   PageContent,
   ModalBody,
   ModalContent,
-} from '../../Common/Modal/styles';
+  TickIcon,
+  LazyImage,
+  isMobile,
+  flattenChildren,
+  useLocales,
+  FitText,
+} from "@multiplatform.one/connectkit";
 import {
   StatusGraphic,
   LogoContainer,
   StatusIcon,
   StatusGraphicBgSvg,
   ContentContainer,
-} from './styles';
+} from "./styles";
 
-import { useAccount } from 'wagmi';
-import { SIWEButton } from '../../Standard/SIWE';
-import { useSIWE } from '../../../siwe';
+import { useAccount } from "wagmi";
+import { SIWEButton } from "../../Standard/SIWE";
+import { useSIWE } from "../../../siwe";
 
-import { TickIcon } from '../../../assets/icons';
-import Chains from '../../../assets/chains';
-import Avatar from '../../Common/Avatar';
-import { getAppIcon } from '../../../defaultConfig';
+import Chains from "../../../assets/chains";
+import Avatar from "../../Common/Avatar";
+import { getAppIcon } from "../../../defaultConfig";
 
-import { AnimatePresence, motion } from 'framer-motion';
-import LazyImage from '../../Common/LazyImage';
-import { isMobile, flattenChildren } from '../../../utils';
-import useLocales from '../../../hooks/useLocales';
-import FitText from '../../Common/FitText';
+import { AnimatePresence, motion } from "framer-motion";
 
 const transition = { duration: 0.2, ease: [0.26, 0.08, 0.25, 1] };
 const copyTransition = { duration: 0.16, ease: [0.26, 0.08, 0.25, 1] };
@@ -38,13 +38,13 @@ const SignInWithEthereum: React.FC = () => {
   const { isSignedIn } = useSIWE();
   const mobile = isMobile();
 
-  const [status, setStatus] = useState<'signedOut' | 'signedIn'>(
-    isSignedIn ? 'signedIn' : 'signedOut'
+  const [status, setStatus] = useState<"signedOut" | "signedIn">(
+    isSignedIn ? "signedIn" : "signedOut",
   );
 
   const locales = useLocales({});
   const copy =
-    status === 'signedIn'
+    status === "signedIn"
       ? {
           heading: locales.signInWithEthereumScreen_signedIn_heading,
           h1: locales.signInWithEthereumScreen_signedIn_h1,
@@ -59,11 +59,11 @@ const SignInWithEthereum: React.FC = () => {
         };
 
   useEffect(() => {
-    if (isSignedIn) setStatus('signedIn');
+    if (isSignedIn) setStatus("signedIn");
   }, []);
 
   useEffect(() => {
-    if (!isSignedIn) setStatus('signedOut');
+    if (!isSignedIn) setStatus("signedOut");
   }, [isSignedIn]);
 
   const { address } = useAccount();
@@ -75,18 +75,16 @@ const SignInWithEthereum: React.FC = () => {
       svg: null,
       default: null,
     };
-    const nodeList: HTMLCollectionOf<HTMLLinkElement> =
-      document.getElementsByTagName('link');
+    const nodeList: HTMLCollectionOf<HTMLLinkElement> = document.getElementsByTagName("link");
     Array.from(nodeList).forEach((node) => {
       if (
-        (node.getAttribute('rel') === 'icon' ||
-          node.getAttribute('rel') === 'shortcut icon') &&
-        node.getAttribute('href')
+        (node.getAttribute("rel") === "icon" || node.getAttribute("rel") === "shortcut icon") &&
+        node.getAttribute("href")
       ) {
-        if (node.getAttribute('type') === 'image/svg+xml') {
-          favicons.svg = node.getAttribute('href');
+        if (node.getAttribute("type") === "image/svg+xml") {
+          favicons.svg = node.getAttribute("href");
         } else {
-          favicons.default = node.getAttribute('href');
+          favicons.default = node.getAttribute("href");
         }
       }
     });
@@ -114,7 +112,7 @@ const SignInWithEthereum: React.FC = () => {
           </AnimatePresence>
         </ContentContainer>
         <StatusGraphic $connected={isSignedIn} key="status">
-          <div style={{ position: 'absolute', inset: 0 }}>
+          <div style={{ position: "absolute", inset: 0 }}>
             <StatusGraphicBgSvg
               width="262"
               height="134"
@@ -134,7 +132,7 @@ const SignInWithEthereum: React.FC = () => {
                 }}
                 transition={{
                   duration: 0.4,
-                  ease: 'linear',
+                  ease: "linear",
                   repeat: Infinity,
                 }}
               />
@@ -204,11 +202,7 @@ const SignInWithEthereum: React.FC = () => {
             }}
           >
             <LogoContainer>
-              {favicon ? (
-                <LazyImage src={favicon} alt={'app'} />
-              ) : (
-                <Chains.UnknownChain />
-              )}
+              {favicon ? <LazyImage src={favicon} alt={"app"} /> : <Chains.UnknownChain />}
             </LogoContainer>
           </motion.div>
         </StatusGraphic>
@@ -227,7 +221,7 @@ const SignInWithEthereum: React.FC = () => {
           </motion.div>
         </AnimatePresence>
         <SIWEButton
-          showSignOutButton={status === 'signedIn'}
+          showSignOutButton={status === "signedIn"}
           onSignIn={() => {
             setTimeout(() => {
               context.setOpen(false);

package/src/connectkit/components/Pages/SignInWithEthereum/styles.ts

@@ -1,7 +1,7 @@
-import { motion } from 'framer-motion';
-import styled from './../../../styles/styled';
-import { css, keyframes } from 'styled-components';
-import defaultTheme from '../../../constants/defaultTheme';
+import { motion } from "framer-motion";
+import { styled } from "@multiplatform.one/connectkit";
+import { css, keyframes } from "styled-components";
+import { defaultTheme } from "@multiplatform.one/connectkit";
 
 const spinKeyframes = keyframes`
   from{ transform: rotate(0deg); }
@@ -67,7 +67,7 @@ export const StatusIcon = styled(motion.div)`
   }
   &:before {
     z-index: 1;
-    content: '';
+    content: "";
     position: absolute;
     inset: 10px;
     border-radius: inherit;
@@ -78,7 +78,7 @@ export const StatusIcon = styled(motion.div)`
   }
   &:after {
     z-index: 2;
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
@@ -150,7 +150,7 @@ export const StatusGraphic = styled(motion.div)<{ $connected?: boolean }>`
   &:before,
   &:after {
     z-index: 1;
-    content: '';
+    content: "";
     position: absolute;
     top: 50%;
     left: 50%;

package/src/connectkit/components/Pages/SwitchNetworks/index.tsx

@@ -1,20 +1,18 @@
-import React from 'react';
+import React from "react";
 
 import {
   PageContent,
   ModalContent,
   ModalBody,
-} from '../../Common/Modal/styles';
-import ChainSelectList from '../../Common/ChainSelectList';
-import { useAccount, useConnect, useDisconnect } from 'wagmi';
-
-import useLocales from '../../../hooks/useLocales';
-
-import Button from '../../Common/Button';
-import { DisconnectIcon } from '../../../assets/icons';
-import { isSafeConnector } from '../../../utils';
-import { OrDivider } from '../../Common/Modal';
-import { useChainIsSupported } from '../../../hooks/useChainIsSupported';
+  useLocales,
+  Button,
+  DisconnectIcon,
+  isSafeConnector,
+  OrDivider,
+} from "@multiplatform.one/connectkit";
+import ChainSelectList from "../../Common/ChainSelectList";
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { useChainIsSupported } from "../../../hooks/useChainIsSupported";
 
 const SwitchNetworks: React.FC = () => {
   const { reset } = useConnect();
@@ -34,23 +32,18 @@ const SwitchNetworks: React.FC = () => {
       <ModalContent style={{ padding: 0, marginTop: -10 }}>
         {!isChainSupported && (
           <ModalBody>
-            {locales.warnings_chainUnsupported}{' '}
-            {locales.warnings_chainUnsupportedResolve}
+            {locales.warnings_chainUnsupported} {locales.warnings_chainUnsupportedResolve}
           </ModalBody>
         )}
 
-        <div style={{ padding: '6px 8px' }}>
+        <div style={{ padding: "6px 8px" }}>
           <ChainSelectList variant="secondary" />
         </div>
 
         {!isChainSupported && !isSafeConnector(connector?.id) && (
           <div style={{ paddingTop: 12 }}>
             <OrDivider />
-            <Button
-              icon={<DisconnectIcon />}
-              variant="secondary"
-              onClick={onDisconnect}
-            >
+            <Button icon={<DisconnectIcon />} variant="secondary" onClick={onDisconnect}>
               {locales.disconnect}
             </Button>
           </div>

package/src/connectkit/components/Standard/SIWE/index.tsx

@@ -1,12 +1,15 @@
-import Button from '../../Common/Button';
-import { DisconnectIcon, RetryIcon } from '../../../assets/icons';
-import { ResetContainer } from '../../../styles';
-import { motion } from 'framer-motion';
-import useIsMounted from '../../../hooks/useIsMounted';
-import useLocales from '../../../hooks/useLocales';
-import { SIWESession, useSIWE } from './../../../siwe';
-import { useAccount } from 'wagmi';
-import { useModal } from '../../../hooks/useModal';
+import {
+  Button,
+  DisconnectIcon,
+  RetryIcon,
+  ResetContainer,
+  useIsMounted,
+  useLocales,
+  useModal,
+} from "@multiplatform.one/connectkit";
+import { motion } from "framer-motion";
+import { SIWESession, useSIWE } from "./../../../siwe";
+import { useAccount } from "wagmi";
 
 type ButtonProps = {
   showSignOutButton?: boolean;
@@ -14,36 +17,23 @@ type ButtonProps = {
   onSignOut?: () => void;
 };
 
-export const SIWEButton: React.FC<ButtonProps> = ({
-  showSignOutButton,
-  onSignIn,
-  onSignOut,
-}) => {
+export const SIWEButton: React.FC<ButtonProps> = ({ showSignOutButton, onSignIn, onSignOut }) => {
   const isMounted = useIsMounted();
   const locales = useLocales();
   const { setOpen } = useModal();
 
-  const {
-    isSignedIn,
-    isReady,
-    isLoading,
-    isRejected,
-    isSuccess,
-    isError,
-    signIn,
-    signOut,
-    error,
-  } = useSIWE({
-    onSignIn: (data) => onSignIn?.(data),
-    onSignOut: () => onSignOut?.(),
-  });
+  const { isSignedIn, isReady, isLoading, isRejected, isSuccess, isError, signIn, signOut, error } =
+    useSIWE({
+      onSignIn: (data) => onSignIn?.(data),
+      onSignOut: () => onSignOut?.(),
+    });
   const { address: connectedAddress } = useAccount();
 
   function getButtonLabel() {
     if (isSuccess) return locales.signedIn;
     if (isRejected) return locales.tryAgain;
     if (isLoading) return locales.awaitingConfirmation;
-    if (isError) return error ?? 'Unknown Error';
+    if (isError) return error ?? "Unknown Error";
     if (isReady) return locales.signIn;
     return locales.signIn;
   }
@@ -54,12 +44,7 @@ export const SIWEButton: React.FC<ButtonProps> = ({
 
   if (showSignOutButton && isSignedIn) {
     return (
-      <Button
-        key="button"
-        style={{ margin: 0 }}
-        onClick={signOut}
-        icon={<DisconnectIcon />}
-      >
+      <Button key="button" style={{ margin: 0 }} onClick={signOut} icon={<DisconnectIcon />}>
         {locales.signOut}
       </Button>
     );
@@ -68,12 +53,7 @@ export const SIWEButton: React.FC<ButtonProps> = ({
   if (!connectedAddress) {
     // TODO: discuss non-connected wallet developer expectations
     return (
-      <Button
-        key="button"
-        style={{ margin: 0 }}
-        onClick={() => setOpen(true)}
-        arrow
-      >
+      <Button key="button" style={{ margin: 0 }} onClick={() => setOpen(true)} arrow>
         {locales.walletNotConnected}
       </Button>
     );

package/src/connectkit/components/Standard/SIWE/styles.ts

@@ -1,6 +1,6 @@
-import { keyframes } from 'styled-components';
-import styled from './../../../styles/styled';
-import { motion } from 'framer-motion';
+import { keyframes } from "styled-components";
+import { styled } from "@multiplatform.one/connectkit";
+import { motion } from "framer-motion";
 
 const Spin = keyframes`
   0%{ transform: rotate(0deg); }

package/src/connectkit/components/contexts/web3/index.tsx

@@ -2,14 +2,14 @@
  * This provider is responsible for handling reusable web3 logic across the app.
  */
 
-import React from 'react';
+import React from "react";
 
-import { Address, Chain } from 'viem';
-import { useAccount } from 'wagmi';
+import { Address, Chain } from "viem";
+import { useAccount } from "wagmi";
 
-import { useChains } from '../../../hooks/useChains';
-import { useWalletConnectUri } from '../../../hooks/connectors/useWalletConnectUri';
-import { useChainIsSupported } from '../../../hooks/useChainIsSupported';
+import { useChains } from "../../../hooks/useChains";
+import { useWalletConnectUri } from "../../../hooks/connectors/useWalletConnectUri";
+import { useChainIsSupported } from "../../../hooks/useChainIsSupported";
 
 type Web3Context = {
   connect: {
@@ -27,7 +27,7 @@ type Web3Context = {
 
 const Web3Context = React.createContext({
   connect: {
-    getUri: () => '',
+    getUri: () => "",
   },
   dapp: {
     chains: [],

package/src/connectkit/connectors/createSiwwMessage.ts

@@ -1,12 +1,12 @@
-import { buildSiwwMessage, type SignerFamily } from '../adapters/messages';
-import { ecosystemBySyntheticChainId } from './syntheticChains';
+import { buildSiwwMessage, type SignerFamily } from "../adapters/messages";
+import { ecosystemBySyntheticChainId } from "./syntheticChains";
 
 /** Derive the signer family from the (possibly synthetic) chainId of the active connector. */
 export function familyFromChainId(chainId?: number): SignerFamily {
   if (chainId != null && ecosystemBySyntheticChainId[chainId]) {
     return ecosystemBySyntheticChainId[chainId];
   }
-  return 'evm';
+  return "evm";
 }
 
 export interface CreateSiwwMessageArgs {

package/src/connectkit/connectors/getSiwwConnectors.ts

@@ -1,21 +1,19 @@
-import type { CreateConnectorFn } from 'wagmi';
-import { discoverWallets, type WalletEntry } from '../adapters/discover';
-import { walletAdapterConnector } from './walletAdapterConnector';
+import type { CreateConnectorFn } from "wagmi";
+import { discoverWallets, type WalletEntry } from "../adapters/discover";
+import { walletAdapterConnector } from "./walletAdapterConnector";
 
 /**
  * Map siww `discoverWallets()` output → wagmi `CreateConnectorFn[]`, ready to spread
  * into `createConfig({ connectors: [...evmConnectors, ...getSiwwConnectors()] })`.
  * Defaults to probing the page; pass a curated list to override.
  */
-export function getSiwwConnectors(
-  entries: WalletEntry[] = discoverWallets()
-): CreateConnectorFn[] {
+export function getSiwwConnectors(entries: WalletEntry[] = discoverWallets()): CreateConnectorFn[] {
   return entries.map((e) =>
     walletAdapterConnector({
       id: e.id,
       name: e.name,
       ecosystem: e.ecosystem,
       adapter: e.adapter,
-    })
+    }),
   );
 }

package/src/connectkit/connectors/syntheticChains.ts

@@ -5,8 +5,8 @@
 // (derived from the ASCII of its ticker, far outside any real EVM chainId range)
 // plus a minimal `Chain`. These IDs are NEVER used as real EVM networks — they
 // only give wagmi something consistent to return for a connected non-EVM account.
-import type { Chain } from 'viem';
-import type { Ecosystem } from '../utils';
+import type { Chain } from "viem";
+import type { Ecosystem } from "@multiplatform.one/connectkit";
 
 // 0x534f4c="SOL", 0x535549="SUI", 0x425443="BTC" — reserved, collision-free vs
 // real EVM chainIds.
@@ -14,38 +14,30 @@ export const SOLANA_CHAIN_ID = 0x534f4c; // 5_459_788
 export const SUI_CHAIN_ID = 0x535549; // 5_461_321
 export const BITCOIN_CHAIN_ID = 0x425443; // 4_347_459
 
-export const syntheticChainIdByEcosystem: Record<
-  Exclude<Ecosystem, 'evm'>,
-  number
-> = {
+export const syntheticChainIdByEcosystem: Record<Exclude<Ecosystem, "evm">, number> = {
   solana: SOLANA_CHAIN_ID,
   sui: SUI_CHAIN_ID,
   bitcoin: BITCOIN_CHAIN_ID,
 };
 
 export const ecosystemBySyntheticChainId: Record<number, Ecosystem> = {
-  [SOLANA_CHAIN_ID]: 'solana',
-  [SUI_CHAIN_ID]: 'sui',
-  [BITCOIN_CHAIN_ID]: 'bitcoin',
+  [SOLANA_CHAIN_ID]: "solana",
+  [SUI_CHAIN_ID]: "sui",
+  [BITCOIN_CHAIN_ID]: "bitcoin",
 };
 
 export const isSyntheticChainId = (chainId?: number): boolean =>
   chainId != null && chainId in ecosystemBySyntheticChainId;
 
-const makeChain = (
-  id: number,
-  name: string,
-  symbol: string,
-  decimals: number
-): Chain => ({
+const makeChain = (id: number, name: string, symbol: string, decimals: number): Chain => ({
   id,
   name,
   nativeCurrency: { name, symbol, decimals },
   rpcUrls: { default: { http: [] } },
 });
 
-export const solanaChain = makeChain(SOLANA_CHAIN_ID, 'Solana', 'SOL', 9);
-export const suiChain = makeChain(SUI_CHAIN_ID, 'Sui', 'SUI', 9);
-export const bitcoinChain = makeChain(BITCOIN_CHAIN_ID, 'Bitcoin', 'BTC', 8);
+export const solanaChain = makeChain(SOLANA_CHAIN_ID, "Solana", "SOL", 9);
+export const suiChain = makeChain(SUI_CHAIN_ID, "Sui", "SUI", 9);
+export const bitcoinChain = makeChain(BITCOIN_CHAIN_ID, "Bitcoin", "BTC", 8);
 
 export const syntheticChains: Chain[] = [solanaChain, suiChain, bitcoinChain];

package/src/connectkit/connectors/walletAdapterConnector.ts

@@ -1,8 +1,8 @@
-import { createConnector } from 'wagmi';
-import type { Address } from 'viem';
-import type { WalletAdapter } from '../adapters/types';
-import { syntheticChainIdByEcosystem } from './syntheticChains';
-import type { Ecosystem } from '../utils';
+import { createConnector } from "wagmi";
+import type { Address } from "viem";
+import type { WalletAdapter } from "../adapters/types";
+import { syntheticChainIdByEcosystem } from "./syntheticChains";
+import type { Ecosystem } from "@multiplatform.one/connectkit";
 
 export interface SiwwConnectorEntry {
   /** Stable id, e.g. "siww:solana:phantom" — also the walletConfigs key. */
@@ -10,7 +10,7 @@ export interface SiwwConnectorEntry {
   /** Display name, e.g. "Phantom" / "UniSat". */
   name: string;
   /** Non-EVM ecosystem this wallet signs for. */
-  ecosystem: Exclude<Ecosystem, 'evm'>;
+  ecosystem: Exclude<Ecosystem, "evm">;
   /** Ready-to-drive siww adapter. */
   adapter: WalletAdapter;
   /** Optional icon (data-uri/url). walletConfigs usually supplies this instead. */
@@ -40,17 +40,17 @@ export function walletAdapterConnector(entry: SiwwConnectorEntry) {
     const provider = {
       async request({ method, params }: { method: string; params?: unknown[] }) {
         switch (method) {
-          case 'eth_requestAccounts':
-          case 'eth_accounts':
+          case "eth_requestAccounts":
+          case "eth_accounts":
             return entry.adapter.address ? [entry.adapter.address] : [];
-          case 'eth_chainId':
+          case "eth_chainId":
             return `0x${chainId.toString(16)}`;
-          case 'personal_sign':
-          case 'eth_sign': {
-            const raw = (params?.[0] as string) ?? '';
+          case "personal_sign":
+          case "eth_sign": {
+            const raw = (params?.[0] as string) ?? "";
             return entry.adapter.signMessage(decodeMaybeHex(raw));
           }
-          case 'wallet_switchEthereumChain':
+          case "wallet_switchEthereumChain":
             return null;
           default:
             throw new Error(`siww provider: unsupported method ${method}`);
@@ -67,7 +67,7 @@ export function walletAdapterConnector(entry: SiwwConnectorEntry) {
     const connector = {
       id: entry.id,
       name: entry.name,
-      type: 'siww' as const,
+      type: "siww" as const,
       icon: entry.icon,
       // custom tag read by getConnectorEcosystem()/WalletProps.ecosystem
       ecosystem: entry.ecosystem,
@@ -85,8 +85,7 @@ export function walletAdapterConnector(entry: SiwwConnectorEntry) {
       },
       async connect() {
         await entry.adapter.connect();
-        if (!entry.adapter.address)
-          throw new Error(`${entry.name} returned no account`);
+        if (!entry.adapter.address) throw new Error(`${entry.name} returned no account`);
         return {
           accounts: [entry.adapter.address as Address] as readonly Address[],
           chainId,
@@ -99,36 +98,33 @@ export function walletAdapterConnector(entry: SiwwConnectorEntry) {
         return entry.adapter.isConnected && !!entry.adapter.address;
       },
       onAccountsChanged(accounts: string[]) {
-        if (accounts.length === 0) config.emitter.emit('disconnect');
+        if (accounts.length === 0) config.emitter.emit("disconnect");
         else
-          config.emitter.emit('change', {
+          config.emitter.emit("change", {
             accounts: accounts as readonly Address[],
           });
       },
       onChainChanged() {
-        config.emitter.emit('change', { chainId });
+        config.emitter.emit("change", { chainId });
       },
       onDisconnect() {
-        config.emitter.emit('disconnect');
+        config.emitter.emit("disconnect");
       },
     };
 
     // Same cast rationale as bridgeConnector: the shape is exact except for wagmi's
     // EIP-5792 capabilities generic, which a non-EVM wallet does not implement.
-    return connector as unknown as ReturnType<
-      Parameters<typeof createConnector>[0]
-    >;
+    return connector as unknown as ReturnType<Parameters<typeof createConnector>[0]>;
   });
 }
 
 /** EVM `personal_sign` hex-encodes the message; decode back to UTF-8 if it's 0x-hex. */
 function decodeMaybeHex(raw: string): string {
-  if (typeof raw === 'string' && raw.startsWith('0x')) {
+  if (typeof raw === "string" && raw.startsWith("0x")) {
     try {
       const hex = raw.slice(2);
       const bytes = new Uint8Array(hex.length / 2);
-      for (let i = 0; i < bytes.length; i++)
-        bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
+      for (let i = 0; i < bytes.length; i++) bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
       return new TextDecoder().decode(bytes);
     } catch {
       return raw;