@multiplatform.one/web3 5.0.27

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

@@ -0,0 +1,217 @@
+import { motion } from 'framer-motion';
+import styled from './../../../styles/styled';
+import { css, keyframes } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme';
+
+const spinKeyframes = keyframes`
+  from{ transform: rotate(0deg); }
+  to{   transform: rotate(360deg); }
+`;
+const lineKeyframes = keyframes`
+  from{ background-position: 0 0; }
+  to{ background-position: 100% 0; }
+`;
+
+export const ContentContainer = styled.div`
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    margin: 5px auto 24px;
+    padding: 16px 16px;
+    border-radius: var(--ck-tertiary-border-radius, 24px);
+    box-shadow: var(--ck-tertiary-box-shadow, none);
+    background: var(--ck-body-background-tertiary);
+  }
+`;
+
+export const LogoContainer = styled(motion.div)`
+  z-index: 2;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 100%;
+  transition: inherit;
+  background: var(--ck-body-background-secondary);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+  svg,
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    width: 64px;
+    height: 64px;
+  }
+`;
+
+export const StatusIcon = styled(motion.div)`
+  z-index: 2;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  color: currentColor;
+  border-radius: 100%;
+  transition: inherit;
+  svg {
+    z-index: 3;
+    position: relative;
+    transform: scale(0.89);
+    transition: inherit;
+    opacity: 0.5;
+  }
+  &:before {
+    z-index: 1;
+    content: '';
+    position: absolute;
+    inset: 10px;
+    border-radius: inherit;
+    border: 1px dashed var(--border-color);
+    background: var(--ck-body-background);
+    transition: inherit;
+    animation: ${spinKeyframes} 10s linear infinite;
+  }
+  &:after {
+    z-index: 2;
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: #34c759;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+    transform: scale(0);
+    transition: inherit;
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    width: 64px;
+    height: 64px;
+    svg {
+      transform: scale(1.1);
+    }
+  }
+`;
+
+export const StatusGraphicBgSvg = styled(motion.svg)`
+  display: block;
+  position: relative;
+  margin: 0 auto;
+  transition: inherit;
+  overflow: visible;
+  rect {
+    stroke: var(--border-color);
+    rx: var(--ck-border-radius);
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    display: none;
+  }
+`;
+
+export const StatusGraphic = styled(motion.div)<{ $connected?: boolean }>`
+  --border-color: var(--ck-siwe-border, var(--ck-body-divider));
+  --border-size: 0;
+  --border-style: dashed;
+
+  user-select: none;
+  pointer-events: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  width: 100%;
+  margin: 12px auto;
+  padding: 42px 32px;
+  transition: all 320ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
+  border: var(--border-size) var(--border-style) var(--border-color);
+  border-radius: var(--ck-border-radius);
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    --border-size: 1px;
+    margin: 0 auto 20px;
+    padding: 38px 0;
+    gap: 18px;
+    + div {
+      // easier than wrapping in another styled component
+      padding-bottom: 10px;
+    }
+  }
+
+  > div {
+    z-index: 2;
+    position: relative;
+    transition: inherit;
+  }
+
+  &:before,
+  &:after {
+    z-index: 1;
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 120px;
+    height: 1px;
+    margin-left: -60px;
+    transition: inherit;
+    animation: ${lineKeyframes} 10s linear infinite;
+    background: linear-gradient(
+      90deg,
+      var(--border-color),
+      var(--border-color) 50%,
+      transparent 50%,
+      transparent 100%
+    );
+    background-size: 6px 1px;
+  }
+
+  &:after {
+    background: var(--border-color);
+    transform: scaleX(0);
+  }
+
+  ${({ $connected }) =>
+    $connected &&
+    css`
+      &:before {
+        opacity: 0;
+      }
+      &:after {
+        transform: none;
+      }
+      ${StatusGraphicBgSvg} {
+        rect {
+          stroke-dasharray: 0 0;
+        }
+      }
+      ${LogoContainer} {
+        transform: scale(0.62);
+      }
+      ${StatusIcon} {
+        svg {
+          transform: scale(1.5);
+          opacity: 1;
+          color: #fff;
+        }
+        &:before {
+          transform: scale(0);
+        }
+        &:after {
+          transform: scale(1);
+        }
+      }
+      @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+        --border-size: 1px;
+        --border-style: solid;
+        ${StatusIcon} {
+          svg {
+            transform: scale(1.75);
+          }
+        }
+      }
+    `};
+`;

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

@@ -0,0 +1,63 @@
+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';
+
+const SwitchNetworks: React.FC = () => {
+  const { reset } = useConnect();
+  const { disconnect } = useDisconnect();
+  const { connector, chain } = useAccount();
+  const isChainSupported = useChainIsSupported(chain?.id);
+
+  const locales = useLocales({});
+
+  const onDisconnect = () => {
+    disconnect();
+    reset();
+  };
+
+  return (
+    <PageContent style={{ width: 278 }}>
+      <ModalContent style={{ padding: 0, marginTop: -10 }}>
+        {!isChainSupported && (
+          <ModalBody>
+            {locales.warnings_chainUnsupported}{' '}
+            {locales.warnings_chainUnsupportedResolve}
+          </ModalBody>
+        )}
+
+        <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}
+            >
+              {locales.disconnect}
+            </Button>
+          </div>
+        )}
+      </ModalContent>
+    </PageContent>
+  );
+};
+
+export default SwitchNetworks;

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

@@ -0,0 +1,119 @@
+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';
+
+type ButtonProps = {
+  showSignOutButton?: boolean;
+  onSignIn?: (data?: SIWESession) => void;
+  onSignOut?: () => void;
+};
+
+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 { 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 (isReady) return locales.signIn;
+    return locales.signIn;
+  }
+
+  if (!isMounted) {
+    return <Button key="loading" style={{ margin: 0 }} disabled />;
+  }
+
+  if (showSignOutButton && isSignedIn) {
+    return (
+      <Button
+        key="button"
+        style={{ margin: 0 }}
+        onClick={signOut}
+        icon={<DisconnectIcon />}
+      >
+        {locales.signOut}
+      </Button>
+    );
+  }
+
+  if (!connectedAddress) {
+    // TODO: discuss non-connected wallet developer expectations
+    return (
+      <Button
+        key="button"
+        style={{ margin: 0 }}
+        onClick={() => setOpen(true)}
+        arrow
+      >
+        {locales.walletNotConnected}
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      key="button"
+      style={{ margin: 0 }}
+      arrow={!isSignedIn ? !isLoading && !isRejected : false}
+      onClick={!isLoading && !isSuccess ? signIn : undefined}
+      disabled={isLoading}
+      waiting={isLoading}
+      icon={
+        isRejected && (
+          <motion.div
+            initial={{
+              rotate: -270,
+            }}
+            animate={{
+              rotate: 0,
+            }}
+            transition={{
+              duration: 1,
+              ease: [0.175, 0.885, 0.32, 0.98],
+            }}
+          >
+            <RetryIcon style={{ opacity: 0.4 }} />
+          </motion.div>
+        )
+      }
+    >
+      {getButtonLabel()}
+    </Button>
+  );
+};
+
+export const SIWEButtonComponent: React.FC<ButtonProps> = ({ ...props }) => (
+  <ResetContainer>
+    <SIWEButton {...props} />
+  </ResetContainer>
+);
+export default SIWEButtonComponent;

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

@@ -0,0 +1,17 @@
+import { keyframes } from 'styled-components';
+import styled from './../../../styles/styled';
+import { motion } from 'framer-motion';
+
+const Spin = keyframes`
+  0%{ transform: rotate(0deg); }
+  100%{ transform: rotate(360deg); }
+`;
+export const SpinnerContainer = styled(motion.div)`
+  position: relative;
+  animation: ${Spin} 1s linear infinite;
+  svg {
+    display: block;
+    position: relative;
+    animation: ${Spin} 1s ease-in-out infinite;
+  }
+`;

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

@@ -0,0 +1,74 @@
+/**
+ * This provider is responsible for handling reusable web3 logic across the app.
+ */
+
+import React from 'react';
+
+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';
+
+type Web3Context = {
+  connect: {
+    getUri: (id?: string) => string;
+  };
+  dapp: {
+    chains: Chain[];
+  };
+  account?: {
+    chain: Chain;
+    chainIsSupported: boolean;
+    address: Address;
+  };
+};
+
+const Web3Context = React.createContext({
+  connect: {
+    getUri: () => '',
+  },
+  dapp: {
+    chains: [],
+  },
+  account: undefined,
+} as Web3Context);
+
+export const Web3ContextProvider = ({
+  enabled,
+  children,
+}: {
+  enabled?: boolean;
+  children: React.ReactNode;
+}) => {
+  const { uri: walletConnectUri } = useWalletConnectUri({
+    enabled,
+  });
+
+  const { address: currentAddress, chain } = useAccount();
+  const chainIsSupported = useChainIsSupported(chain?.id);
+  const chains = useChains();
+
+  const value = {
+    connect: {
+      getUri: (id?: string) => {
+        return walletConnectUri;
+      },
+    },
+    dapp: {
+      chains,
+    },
+    account: currentAddress
+      ? {
+          chain,
+          chainIsSupported,
+          address: currentAddress,
+        }
+      : undefined,
+  } as Web3Context;
+
+  return <Web3Context.Provider value={value}>{children}</Web3Context.Provider>;
+};
+
+export const useWeb3 = () => React.useContext(Web3Context);

package/src/connectkit/connectors/createSiwwMessage.ts

@@ -0,0 +1,39 @@
+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';
+}
+
+export interface CreateSiwwMessageArgs {
+  address: string;
+  chainId: number;
+  nonce: string;
+  domain?: string;
+  uri?: string;
+  statement?: string;
+}
+
+/**
+ * Chain-agnostic `createMessage` for ConnectKit's SIWEConfig: derives the signer
+ * family from the active connector's chainId (synthetic for non-EVM) and builds the
+ * matching SIWx message. Plug this straight into `SIWEConfig.createMessage` so
+ * EVERY family — MetaMask, Coinbase, Phantom, Sui, Unisat (and, later, GPG) — signs
+ * in through ConnectKit's single signIn(): one path, no per-chain branching in the
+ * consumer.
+ */
+export function createSiwwMessage(args: CreateSiwwMessageArgs): string {
+  const family = familyFromChainId(args.chainId);
+  return buildSiwwMessage(family, {
+    address: args.address,
+    nonce: args.nonce,
+    domain: args.domain,
+    uri: args.uri,
+    statement: args.statement,
+    chainId: args.chainId,
+  });
+}

package/src/connectkit/connectors/ensureSiwwConnectors.ts

@@ -0,0 +1,46 @@
+import type { Config, Connector, CreateConnectorFn } from "wagmi";
+
+import { discoverWallets } from "../adapters/discover";
+import { walletAdapterConnector } from "./walletAdapterConnector";
+
+/**
+ * Re-discover non-EVM (siww) wallets and register connectors for any not already present.
+ *
+ * `getDefaultConfig` runs `discoverWallets()` ONCE when the wagmi config is built, but wallet
+ * extensions inject their `window` globals at different times — notably UniSat injects
+ * `window.unisat` AFTER config creation, so a one-shot discovery misses it and Bitcoin never
+ * appears in the modal. This adds the missing connectors to the live config (mirroring how wagmi
+ * registers EIP-6963 connectors as wallets announce). Idempotent — skips ids already registered.
+ *
+ * @returns the number of connectors added (0 when nothing new was found).
+ */
+export function ensureSiwwConnectors(config: Config): number {
+  const internal = (
+    config as unknown as {
+      _internal?: {
+        connectors: {
+          setup: (fn: CreateConnectorFn) => Connector;
+          setState: (updater: (prev: readonly Connector[]) => Connector[]) => void;
+        };
+      };
+    }
+  )._internal;
+  if (!internal) return 0;
+
+  const existing = new Set(config.connectors.map((c) => c.id));
+  let added = 0;
+  for (const entry of discoverWallets()) {
+    if (existing.has(entry.id)) continue;
+    const fn = walletAdapterConnector({
+      id: entry.id,
+      name: entry.name,
+      ecosystem: entry.ecosystem,
+      adapter: entry.adapter,
+    });
+    const connector = internal.connectors.setup(fn);
+    internal.connectors.setState((prev) => [...prev, connector]);
+    existing.add(entry.id);
+    added++;
+  }
+  return added;
+}

package/src/connectkit/connectors/getSiwwConnectors.ts

@@ -0,0 +1,21 @@
+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[] {
+  return entries.map((e) =>
+    walletAdapterConnector({
+      id: e.id,
+      name: e.name,
+      ecosystem: e.ecosystem,
+      adapter: e.adapter,
+    })
+  );
+}

package/src/connectkit/connectors/syntheticChains.ts

@@ -0,0 +1,51 @@
+// Synthetic viem `Chain`s + numeric chainId constants for the non-EVM ecosystems
+// siww supports. wagmi/ConnectKit are built around numeric EVM chainIds; to let a
+// Solana/Sui/Bitcoin wallet ride the same connector + useAccount/useChainId
+// plumbing, each non-EVM ecosystem gets a STABLE reserved synthetic chainId
+// (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';
+
+// 0x534f4c="SOL", 0x535549="SUI", 0x425443="BTC" — reserved, collision-free vs
+// real EVM chainIds.
+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
+> = {
+  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',
+};
+
+export const isSyntheticChainId = (chainId?: number): boolean =>
+  chainId != null && chainId in ecosystemBySyntheticChainId;
+
+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 syntheticChains: Chain[] = [solanaChain, suiChain, bitcoinChain];