@multiplatform.one/web3 5.0.27

package/src/connectkit/components/ConnectButton/styles.ts

@@ -0,0 +1,49 @@
+import { motion } from 'framer-motion';
+import styled from './../../styles/styled';
+
+export const TextContainer = styled(motion.div)`
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+`;
+
+export const ChainContainer = styled(motion.div)`
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  overflow: hidden;
+  svg {
+    display: block;
+  }
+`;
+export const IconContainer = styled(motion.div)`
+  pointer-events: none;
+  user-select: none;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+`;
+
+export const UnsupportedNetworkContainer = styled(motion.div)`
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+  background: var(--ck-body-color-danger, red);
+  color: #fff;
+  svg {
+    display: block;
+    position: relative;
+    top: -1px;
+  }
+`;

package/src/connectkit/components/ConnectKit.tsx

@@ -0,0 +1,262 @@
+import React, { createContext, createElement, useEffect, useState, ReactNode } from "react";
+import { Buffer } from "buffer";
+import { CustomTheme, Languages, Mode, Theme, CustomAvatarProps } from "../types";
+
+import defaultTheme from "../styles/defaultTheme";
+
+import ConnectKitModal from "../components/ConnectModal";
+import { ThemeProvider } from "styled-components";
+import { useThemeFont } from "../hooks/useGoogleFont";
+import { SIWEContext } from "./../siwe";
+import { useChains } from "../hooks/useChains";
+import { useConnectCallback, useConnectCallbackProps } from "../hooks/useConnectCallback";
+import { useConnector } from "../hooks/useConnectors";
+import { ensureSiwwConnectors } from "../connectors/ensureSiwwConnectors";
+import { WagmiContext, useAccount, useConfig } from "wagmi";
+import { Web3ContextProvider } from "./contexts/web3";
+import { useChainIsSupported } from "../hooks/useChainIsSupported";
+
+export const routes = {
+  ONBOARDING: "onboarding",
+  ABOUT: "about",
+  CONNECTORS: "connectors",
+  MOBILECONNECTORS: "mobileConnectors",
+  CONNECT: "connect",
+  DOWNLOAD: "download",
+  PROFILE: "profile",
+  SWITCHNETWORKS: "switchNetworks",
+  SIGNINWITHETHEREUM: "signInWithEthereum",
+};
+
+type Connector = {
+  id: string;
+};
+type Error = string | React.ReactNode | null;
+
+type ContextValue = {
+  theme: Theme;
+  setTheme: React.Dispatch<React.SetStateAction<Theme>>;
+  mode: Mode;
+  setMode: React.Dispatch<React.SetStateAction<Mode>>;
+  customTheme: CustomTheme | undefined;
+  setCustomTheme: React.Dispatch<React.SetStateAction<CustomTheme | undefined>>;
+  lang: Languages;
+  setLang: React.Dispatch<React.SetStateAction<Languages>>;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  route: string;
+  setRoute: React.Dispatch<React.SetStateAction<string>>;
+  connector: Connector;
+  setConnector: React.Dispatch<React.SetStateAction<Connector>>;
+  errorMessage: Error;
+  options?: ConnectKitOptions;
+  signInWithEthereum: boolean;
+  debugMode?: boolean;
+  log: (...props: any) => void;
+  displayError: (message: string | React.ReactNode | null, code?: any) => void;
+  resize: number;
+  triggerResize: () => void;
+} & useConnectCallbackProps;
+
+export const Context = createContext<ContextValue | null>(null);
+
+export type ConnectKitOptions = {
+  language?: Languages;
+  hideBalance?: boolean;
+  hideTooltips?: boolean;
+  hideQuestionMarkCTA?: boolean;
+  hideNoWalletCTA?: boolean;
+  hideRecentBadge?: boolean;
+  walletConnectCTA?: "link" | "modal" | "both";
+  avoidLayoutShift?: boolean; // Avoids layout shift when the ConnectKit modal is open by adding padding to the body
+  embedGoogleFonts?: boolean; // Automatically embeds Google Font of the current theme. Does not work with custom themes
+  truncateLongENSAddress?: boolean;
+  walletConnectName?: string;
+  reducedMotion?: boolean;
+  disclaimer?: ReactNode | string;
+  bufferPolyfill?: boolean;
+  customAvatar?: React.FC<CustomAvatarProps>;
+  initialChainId?: number;
+  enforceSupportedChains?: boolean;
+  ethereumOnboardingUrl?: string;
+  walletOnboardingUrl?: string;
+  disableSiweRedirect?: boolean; // Disable redirect to SIWE page after a wallet is connected
+  overlayBlur?: number; // Blur the background when the modal is open
+};
+
+type ConnectKitProviderProps = {
+  children?: React.ReactNode;
+  theme?: Theme;
+  mode?: Mode;
+  customTheme?: CustomTheme;
+  options?: ConnectKitOptions;
+  debugMode?: boolean;
+} & useConnectCallbackProps;
+
+export const ConnectKitProvider = ({
+  children,
+  theme = "auto",
+  mode = "auto",
+  customTheme,
+  options,
+  onConnect,
+  onDisconnect,
+  debugMode = false,
+}: ConnectKitProviderProps) => {
+  // ConnectKitProvider must be within a WagmiProvider
+  if (!React.useContext(WagmiContext)) {
+    throw Error("ConnectKitProvider must be within a WagmiProvider");
+  }
+
+  // Only allow for mounting ConnectKitProvider once, so we avoid weird global
+  // state collisions.
+  if (React.useContext(Context)) {
+    throw new Error("Multiple, nested usages of ConnectKitProvider detected. Please use only one.");
+  }
+
+  useConnectCallback({
+    onConnect,
+    onDisconnect,
+  });
+
+  const chains = useChains();
+
+  const injectedConnector = useConnector("injected");
+
+  // Default config options
+  const defaultOptions: ConnectKitOptions = {
+    language: "en-US",
+    hideBalance: false,
+    hideTooltips: false,
+    hideQuestionMarkCTA: false,
+    hideNoWalletCTA: false,
+    walletConnectCTA: "link",
+    hideRecentBadge: false,
+    avoidLayoutShift: true,
+    embedGoogleFonts: false,
+    truncateLongENSAddress: true,
+    walletConnectName: undefined,
+    reducedMotion: false,
+    disclaimer: null,
+    bufferPolyfill: true,
+    customAvatar: undefined,
+    initialChainId: chains?.[0]?.id,
+    enforceSupportedChains: false,
+    ethereumOnboardingUrl: undefined,
+    walletOnboardingUrl: undefined,
+    disableSiweRedirect: false,
+  };
+
+  const opts: ConnectKitOptions = Object.assign({}, defaultOptions, options);
+
+  if (typeof window !== "undefined") {
+    // Buffer Polyfill, needed for bundlers that don't provide Node polyfills (e.g CRA, Vite, etc.)
+    if (opts.bufferPolyfill) window.Buffer = window.Buffer ?? Buffer;
+
+    // Some bundlers may need `global` and `process.env` polyfills as well
+    // Not implemented here to avoid unexpected behaviors, but leaving example here for future reference
+    /*
+     * window.global = window.global ?? window;
+     * window.process = window.process ?? { env: {} };
+     */
+  }
+
+  const [ckTheme, setTheme] = useState<Theme>(theme);
+  const [ckMode, setMode] = useState<Mode>(mode);
+  const [ckCustomTheme, setCustomTheme] = useState<CustomTheme | undefined>(customTheme ?? {});
+  const [ckLang, setLang] = useState<Languages>("en-US");
+  const [open, setOpen] = useState<boolean>(false);
+  const [connector, setConnector] = useState<ContextValue["connector"]>({
+    id: "",
+  });
+  const [route, setRoute] = useState<string>(routes.CONNECTORS);
+  const [errorMessage, setErrorMessage] = useState<Error>("");
+
+  const [resize, onResize] = useState<number>(0);
+
+  // Include Google Font that is needed for a themes
+  if (opts.embedGoogleFonts) useThemeFont(theme);
+
+  // Other Configuration
+  useEffect(() => setTheme(theme), [theme]);
+  useEffect(() => setLang(opts.language || "en-US"), [opts.language]);
+  useEffect(() => setErrorMessage(null), [route, open]);
+
+  // siww: wallet extensions (notably UniSat) inject their window globals AFTER the wagmi config
+  // is built, so getDefaultConfig's one-shot discovery misses them and Bitcoin never appears in
+  // the modal. Re-discover on mount and a few times after, registering any late-injecting non-EVM
+  // wallet on the live config so it shows up.
+  const ckConfig = useConfig();
+  useEffect(() => {
+    ensureSiwwConnectors(ckConfig);
+    const timers = [300, 800, 1500, 3000].map((d) =>
+      setTimeout(() => ensureSiwwConnectors(ckConfig), d),
+    );
+    return () => timers.forEach((t) => clearTimeout(t));
+  }, [ckConfig]);
+
+  // Check if chain is supported, elsewise redirect to switches page
+  const { chain, isConnected } = useAccount();
+  const isChainSupported = useChainIsSupported(chain?.id);
+
+  useEffect(() => {
+    if (isConnected && opts.enforceSupportedChains && !isChainSupported) {
+      setOpen(true);
+      setRoute(routes.SWITCHNETWORKS);
+    }
+  }, [isConnected, isChainSupported, chain, route, open]);
+
+  const log = debugMode ? console.log : () => {};
+
+  const value = {
+    theme: ckTheme,
+    setTheme,
+    mode: ckMode,
+    setMode,
+    customTheme,
+    setCustomTheme,
+    lang: ckLang,
+    setLang,
+    open,
+    setOpen,
+    route,
+    setRoute,
+    connector,
+    setConnector,
+    signInWithEthereum: React.useContext(SIWEContext)?.enabled ?? false,
+    onConnect,
+    // Other configuration
+    options: opts,
+    errorMessage,
+    debugMode,
+    log,
+    displayError: (message: string | React.ReactNode | null, code?: any) => {
+      setErrorMessage(message);
+      console.log("---------CONNECTKIT DEBUG---------");
+      console.log(message);
+      if (code) console.table(code);
+      console.log("---------/CONNECTKIT DEBUG---------");
+    },
+    resize,
+    triggerResize: () => onResize((prev) => prev + 1),
+  };
+
+  return createElement(
+    Context.Provider,
+    { value },
+    <>
+      <Web3ContextProvider enabled={open}>
+        <ThemeProvider theme={defaultTheme}>
+          {children}
+          <ConnectKitModal lang={ckLang} theme={ckTheme} mode={mode} customTheme={ckCustomTheme} />
+        </ThemeProvider>
+      </Web3ContextProvider>
+    </>,
+  );
+};
+
+export const useContext = () => {
+  const context = React.useContext(Context);
+  if (!context) throw Error("ConnectKit Hook must be inside a Provider.");
+  return context;
+};

package/src/connectkit/components/ConnectKitThemeProvider/ConnectKitThemeProvider.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, createElement } from 'react';
+import { CustomTheme, Mode, Theme } from './../../types';
+
+type ContextValue = {
+  theme?: Theme;
+  mode?: Mode;
+  customTheme?: CustomTheme;
+};
+
+const Context = createContext<ContextValue | null>(null);
+
+type ConnectKitThemeProviderProps = {
+  children?: React.ReactNode;
+  theme?: Theme;
+  mode?: Mode;
+  customTheme?: CustomTheme;
+};
+
+export const ConnectKitThemeProvider: React.FC<
+  ConnectKitThemeProviderProps
+> = ({ children, theme = 'auto', mode = 'auto', customTheme }) => {
+  const value = {
+    theme,
+    mode,
+    customTheme,
+  };
+
+  return createElement(Context.Provider, { value }, <>{children}</>);
+};
+
+export const useThemeContext = () => {
+  const context = React.useContext(Context);
+  if (!context)
+    throw Error('ConnectKitThemeProvider must be inside a Provider.');
+  return context;
+};

package/src/connectkit/components/ConnectModal/ConnectUsing.tsx

@@ -0,0 +1,88 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+
+import { useContext } from '../ConnectKit';
+import { useWallet } from '../../wallets/useWallets';
+
+import ConnectWithInjector from './ConnectWithInjector';
+import ConnectWithQRCode from './ConnectWithQRCode';
+
+import { contentVariants } from '../Common/Modal';
+import Alert from '../Common/Alert';
+
+const states = {
+  QRCODE: 'qrcode',
+  INJECTOR: 'injector',
+};
+
+const ConnectUsing = () => {
+  const context = useContext();
+  const wallet = useWallet(context.connector.id);
+
+  // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it.
+  // siww non-EVM wallets are always injected/extension (no WalletConnect URI) → never QR.
+  const isQrCode =
+    (wallet?.ecosystem ?? 'evm') === 'evm' &&
+    !wallet?.isInstalled &&
+    wallet?.getWalletConnectDeeplink;
+
+  const [status, setStatus] = useState(
+    isQrCode ? states.QRCODE : states.INJECTOR
+  );
+
+  useEffect(() => {
+    // if no provider, change to qrcode
+    const checkProvider = async () => {
+      const res = await wallet?.connector.getProvider();
+      if (!res) {
+        setStatus(states.QRCODE);
+        setTimeout(context.triggerResize, 10); // delay required here for modal to resize
+      }
+    };
+    if (status === states.INJECTOR && (wallet?.ecosystem ?? 'evm') === 'evm')
+      checkProvider();
+  }, []);
+
+  if (!wallet) return <Alert>Connector not found {context.connector.id}</Alert>;
+
+  return (
+    <AnimatePresence>
+      {status === states.QRCODE && (
+        <motion.div
+          key={states.QRCODE}
+          initial={'initial'}
+          animate={'animate'}
+          exit={'exit'}
+          variants={contentVariants}
+        >
+          <ConnectWithQRCode
+            switchConnectMethod={(id?: string) => {
+              //if (id) setId(id);
+              setStatus(states.INJECTOR);
+              setTimeout(context.triggerResize, 10); // delay required here for modal to resize
+            }}
+          />
+        </motion.div>
+      )}
+      {status === states.INJECTOR && (
+        <motion.div
+          key={states.INJECTOR}
+          initial={'initial'}
+          animate={'animate'}
+          exit={'exit'}
+          variants={contentVariants}
+        >
+          <ConnectWithInjector
+            switchConnectMethod={(id?: string) => {
+              //if (id) setId(id);
+              setStatus(states.QRCODE);
+              setTimeout(context.triggerResize, 10); // delay required here for modal to resize
+            }}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default ConnectUsing;

package/src/connectkit/components/ConnectModal/ConnectWithInjector/CircleSpinner/index.tsx

@@ -0,0 +1,102 @@
+import {
+  LogoContainer,
+  Logo,
+  Spinner,
+  SpinnerContainer,
+  ExpiringSpinner,
+} from './styles';
+
+import { AnimatePresence } from 'framer-motion';
+import React from 'react';
+
+const CircleSpinner = ({
+  logo,
+  smallLogo,
+  connecting = true,
+  unavailable = false,
+  countdown = false,
+}: {
+  logo?: React.ReactNode;
+  smallLogo?: boolean;
+  connecting?: boolean;
+  unavailable?: boolean;
+  countdown?: boolean;
+}) => {
+  return (
+    <LogoContainer
+      transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}
+    >
+      <Logo
+        $small={!unavailable && smallLogo}
+        style={unavailable ? { borderRadius: 0 } : undefined}
+      >
+        {logo}
+      </Logo>
+      <SpinnerContainer>
+        <AnimatePresence>
+          {connecting && (
+            <Spinner
+              key="Spinner"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{
+                opacity: 0,
+                transition: {
+                  duration: countdown ? 1 : 0,
+                },
+              }}
+            >
+              <svg
+                aria-hidden="true"
+                width="102"
+                height="102"
+                viewBox="0 0 102 102"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M52 100C24.3858 100 2 77.6142 2 50"
+                  stroke="url(#paint0_linear_1943_4139)"
+                  strokeWidth="3.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <defs>
+                  <linearGradient
+                    id="paint0_linear_1943_4139"
+                    x1="2"
+                    y1="48.5"
+                    x2="53"
+                    y2="100"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop stopColor="var(--ck-spinner-color)" />
+                    <stop
+                      offset="1"
+                      stopColor="var(--ck-spinner-color)"
+                      stopOpacity="0"
+                    />
+                  </linearGradient>
+                </defs>
+              </svg>
+            </Spinner>
+          )}
+          {countdown && (
+            <ExpiringSpinner
+              key="ExpiringSpinner"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25 }}
+            >
+              <div />
+              <div />
+            </ExpiringSpinner>
+          )}
+        </AnimatePresence>
+      </SpinnerContainer>
+    </LogoContainer>
+  );
+};
+
+export default CircleSpinner;

package/src/connectkit/components/ConnectModal/ConnectWithInjector/CircleSpinner/styles.ts

@@ -0,0 +1,117 @@
+import styled from './../../../../styles/styled';
+import { css } from 'styled-components';
+import { motion } from 'framer-motion';
+
+export const LogoContainer = styled(motion.div)`
+  z-index: 4;
+  position: relative;
+  width: 100px;
+  height: 100px;
+  svg {
+    z-index: 3;
+    position: relative;
+    display: block;
+  }
+`;
+export const Logo = styled(motion.div)<{ $small?: boolean }>`
+  z-index: 2;
+  position: absolute;
+  overflow: hidden;
+  inset: 6px;
+  border-radius: 50px;
+  background: var(--ck-body-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg,
+  img {
+    pointer-events: none;
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    ${(props) =>
+      props.$small &&
+      css`
+        width: 85%;
+        height: 85%;
+      `}
+  }
+`;
+
+export const SpinnerContainer = styled(motion.div)`
+  position: absolute;
+  inset: -5px;
+`;
+export const ExpiringSpinner = styled(motion.div)`
+  pointer-events: none;
+  user-select: none;
+  z-index: 1;
+  position: absolute;
+  inset: -25%;
+  background: var(--ck-body-background);
+  div:first-child {
+    position: absolute;
+    left: 50%;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    &:before {
+      position: absolute;
+      content: '';
+      inset: 0;
+      background: var(--ck-spinner-color);
+      transform-origin: 0% 50%;
+      animation: rotateExpiringSpinner 5000ms ease-in both;
+    }
+  }
+  div:last-child {
+    position: absolute;
+    left: 0;
+    right: 50%;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    &:before {
+      position: absolute;
+      content: '';
+      inset: 0;
+      background: var(--ck-spinner-color);
+      transform-origin: 100% 50%;
+      animation: rotateExpiringSpinner 5000ms ease-out 5000ms both;
+    }
+  }
+  @keyframes rotateExpiringSpinner {
+    0% {
+      transform: rotate(-180deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+`;
+export const Spinner = styled(motion.div)`
+  pointer-events: none;
+  user-select: none;
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  svg {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    animation: rotateSpinner 1200ms linear infinite;
+  }
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;