@multiplatform.one/web3 5.1.0 → 6.0.0

package/src/connectkit/components/Common/Tooltip/index.tsx

@@ -1,155 +0,0 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useContext } from '../../ConnectKit';
-import useMeasure from 'react-use-measure';
-
-import { TooltipProps, TooltipSizeProps } from './types';
-import { TooltipWindow, TooltipContainer, TooltipTail } from './styles';
-
-import { AnimatePresence, motion } from 'framer-motion';
-import { ResetContainer } from '../../../styles';
-import Portal from '../Portal';
-import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider';
-
-const Tooltip: React.FC<TooltipProps> = ({
-  children,
-  message,
-  open,
-  xOffset = 0,
-  yOffset = 0,
-  delay,
-}) => {
-  const context = useContext();
-  const themeContext = useThemeContext();
-
-  if (context.options?.hideTooltips) return <>{children}</>;
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [outOfBounds, setOutOfBounds] = useState(false);
-  const [size, setSize] = useState<TooltipSizeProps>('small');
-
-  const [ready, setReady] = useState(false);
-
-  const [currentRoute] = useState(context.route);
-
-  const targetRef = useRef<any>(null);
-  const [ref, bounds] = useMeasure({
-    debounce: !ready ? 220 : 0, // fix alignment initial state
-    offsetSize: true,
-    scroll: true,
-  });
-
-  const checkBounds = () => {
-    let flag = false;
-    const x = xOffset + bounds.left + bounds.width;
-    const y = yOffset + bounds.top + bounds.height * 0.5;
-    if (x > window.innerWidth || x < 0 || y > window.innerHeight || y < 0) {
-      flag = true;
-    }
-    return flag;
-  };
-
-  const useIsomorphicLayoutEffect =
-    typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-  const refreshLayout = () => {
-    if (
-      !targetRef.current ||
-      bounds.top +
-        bounds.bottom +
-        bounds.left +
-        bounds.right +
-        bounds.height +
-        bounds.width ===
-        0
-    )
-      return;
-    const x = xOffset + bounds.left + bounds.width;
-    const y = yOffset + bounds.top + bounds.height * 0.5;
-    if (!ready && x !== 0 && y !== 0) setReady(true);
-    targetRef.current.style.left = `${x}px`;
-    targetRef.current.style.top = `${y}px`;
-    setSize(targetRef.current.offsetHeight <= 40 ? 'small' : 'large');
-    setOutOfBounds(checkBounds());
-  };
-  useIsomorphicLayoutEffect(refreshLayout, [bounds, open, isOpen]);
-
-  useEffect(() => {
-    if (!context.open) setIsOpen(false);
-  }, [context.open]);
-
-  useEffect(() => {
-    setIsOpen(!!open);
-  }, [open]);
-
-  return (
-    <>
-      <motion.div
-        ref={ref}
-        style={
-          open === undefined
-            ? {
-                cursor: 'help',
-              }
-            : {}
-        }
-        onHoverStart={() => setIsOpen(true)}
-        onHoverEnd={() => setIsOpen(false)}
-        onClick={() => setIsOpen(false)}
-      >
-        {children}
-      </motion.div>
-      <Portal>
-        <AnimatePresence>
-          {currentRoute === context.route && !outOfBounds && isOpen && (
-            <ResetContainer
-              $useTheme={themeContext.theme}
-              $useMode={themeContext.mode}
-              $customTheme={themeContext.customTheme}
-            >
-              <TooltipWindow>
-                <TooltipContainer
-                  role="tooltip"
-                  $size={size}
-                  ref={targetRef}
-                  initial={'collapsed'}
-                  animate={ready ? 'open' : {}}
-                  exit={'collapsed'}
-                  variants={{
-                    collapsed: {
-                      transformOrigin: '20px 50%',
-                      opacity: 0,
-                      scale: 0.9,
-                      z: 0.01,
-                      y: '-50%',
-                      x: 20,
-                      transition: {
-                        duration: 0.1,
-                      },
-                    },
-                    open: {
-                      willChange: 'opacity,transform',
-                      opacity: 1,
-                      scale: 1,
-                      z: 0.01,
-                      y: '-50%',
-                      x: 20,
-                      transition: {
-                        ease: [0.76, 0, 0.24, 1],
-                        duration: 0.15,
-                        delay: delay ? delay : 0.5,
-                      },
-                    },
-                  }}
-                >
-                  {message}
-                  <TooltipTail $size={size} />
-                </TooltipContainer>
-              </TooltipWindow>
-            </ResetContainer>
-          )}
-        </AnimatePresence>
-      </Portal>
-    </>
-  );
-};
-export default Tooltip;

package/src/connectkit/components/Common/Tooltip/styles.ts

@@ -1,80 +0,0 @@
-import { motion } from 'framer-motion';
-import styled from './../../../styles/styled';
-import { TooltipSizeProps } from './types';
-
-export const TooltipWindow = styled(motion.div)`
-  z-index: 2147483647;
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-`;
-export const TooltipContainer = styled(motion.div)<{ $size: TooltipSizeProps }>`
-  --shadow: var(--ck-tooltip-shadow);
-  z-index: 2147483647;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  gap: 8px;
-  width: fit-content;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(
-    --ck-tooltip-border-radius,
-    ${(props) => (props.$size === 'small' ? 11 : 14)}px
-  );
-  border-radius: ;
-  padding: 10px 16px 10px 12px;
-  font-size: 14px;
-  line-height: 19px;
-  font-weight: 500;
-  letter-spacing: -0.1px;
-  color: var(--ck-tooltip-color);
-  background: var(--ck-tooltip-background);
-  box-shadow: var(--shadow);
-  > span {
-    z-index: 3;
-    position: relative;
-  }
-  > div {
-    margin: -4px 0; // offset for icon
-  }
-  strong {
-    color: var(--ck-spinner-color);
-  }
-
-  .ck-tt-logo {
-    display: inline-block;
-    vertical-align: text-bottom;
-    height: 1em;
-    width: 1.25em;
-    svg {
-      display: block;
-      height: 100%;
-      transform: translate(0.5px, -1px) scale(1.75);
-    }
-  }
-`;
-
-export const TooltipTail = styled(motion.div)<{ $size: TooltipSizeProps }>`
-  z-index: 2;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
-  right: 100%;
-  top: 0;
-  bottom: 0;
-  overflow: hidden;
-  &:before {
-    content: '';
-    position: absolute;
-    box-shadow: var(--shadow);
-    width: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
-    height: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
-    transform: translate(75%, 0) rotate(45deg);
-    background: var(--ck-tooltip-background);
-    border-radius: ${(props) => (props.$size === 'small' ? 2 : 3)}px 0 0 0;
-  }
-`;

package/src/connectkit/components/Common/Tooltip/types.ts

@@ -1,10 +0,0 @@
-export type TooltipSizeProps = 'small' | 'large';
-
-export type TooltipProps = {
-  message?: string | React.ReactNode;
-  children?: React.ReactNode;
-  open?: boolean;
-  xOffset?: number;
-  yOffset?: number;
-  delay?: number;
-};

package/src/connectkit/components/ConnectKit.tsx

@@ -1,266 +0,0 @@
-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 { GpgContext } from "./../gpg";
-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",
-  SIGNINWITHGPG: "signInWithGpg",
-};
-
-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;
-  signInWithGpg: 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,
-    signInWithGpg: React.useContext(GpgContext)?.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

@@ -1,36 +0,0 @@
-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/index.tsx

@@ -1,159 +0,0 @@
-import { useEffect } from 'react';
-import { useAccount } from 'wagmi';
-import { routes, useContext } from '../ConnectKit';
-import { CustomTheme, Languages, Mode, Theme } from '../../types';
-import Modal from '../Common/Modal';
-
-import Onboarding from '../Pages/Onboarding';
-import About from '../Pages/About';
-import Connectors from '../Pages/Connectors';
-import MobileConnectors from '../Pages/MobileConnectors';
-import ConnectUsing from './ConnectUsing';
-import DownloadApp from '../Pages/DownloadApp';
-import Profile from '../Pages/Profile';
-import SwitchNetworks from '../Pages/SwitchNetworks';
-import SignInWithEthereum from '../Pages/SignInWithEthereum';
-import SignInWithGpg from '../Pages/SignInWithGpg';
-
-import { getAppIcon, getAppName } from '../../defaultConfig';
-import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitThemeProvider';
-import { useChainIsSupported } from '../../hooks/useChainIsSupported';
-
-const customThemeDefault: object = {};
-
-const ConnectModal: React.FC<{
-  mode?: Mode;
-  theme?: Theme;
-  customTheme?: CustomTheme;
-  lang?: Languages;
-}> = ({
-  mode = 'auto',
-  theme = 'auto',
-  customTheme = customThemeDefault,
-  lang = 'en-US',
-}) => {
-  const context = useContext();
-  const { isConnected, chain } = useAccount();
-  const chainIsSupported = useChainIsSupported(chain?.id);
-
-  //if chain is unsupported we enforce a "switch chain" prompt
-  const closeable = !(
-    context.options?.enforceSupportedChains &&
-    isConnected &&
-    !chainIsSupported
-  );
-
-  const showBackButton =
-    closeable &&
-    context.route !== routes.CONNECTORS &&
-    context.route !== routes.PROFILE &&
-    // GPG is a standalone, connection-free screen reached via its own trigger, not a
-    // sub-screen of the wallet list — so it gets a plain close, no back-to-wallets.
-    context.route !== routes.SIGNINWITHGPG;
-
-  const showInfoButton =
-    closeable &&
-    context.route !== routes.PROFILE &&
-    context.route !== routes.SIGNINWITHGPG;
-
-  const onBack = () => {
-    if (context.route === routes.SIGNINWITHETHEREUM) {
-      context.setRoute(routes.PROFILE);
-    } else if (context.route === routes.SWITCHNETWORKS) {
-      context.setRoute(routes.PROFILE);
-    } else if (context.route === routes.DOWNLOAD) {
-      context.setRoute(routes.CONNECT);
-    } else {
-      context.setRoute(routes.CONNECTORS);
-    }
-  };
-
-  const pages: any = {
-    onboarding: <Onboarding />,
-    about: <About />,
-    download: <DownloadApp />,
-    connectors: <Connectors />,
-    mobileConnectors: <MobileConnectors />,
-    connect: <ConnectUsing />,
-    profile: <Profile />,
-    switchNetworks: <SwitchNetworks />,
-    signInWithEthereum: <SignInWithEthereum />,
-    signInWithGpg: <SignInWithGpg />,
-  };
-
-  function hide() {
-    context.setOpen(false);
-  }
-
-  useEffect(() => {
-    if (isConnected) {
-      if (
-        context.route !== routes.PROFILE ||
-        context.route !== routes.SIGNINWITHETHEREUM
-      ) {
-        if (
-          context.signInWithEthereum &&
-          !context.options?.disableSiweRedirect
-        ) {
-          context.setRoute(routes.SIGNINWITHETHEREUM);
-        } else {
-          hide(); // Hide on connect
-        }
-      }
-    } else {
-      hide(); // Hide on connect
-    }
-  }, [isConnected]);
-
-  useEffect(() => context.setMode(mode), [mode]);
-  useEffect(() => context.setTheme(theme), [theme]);
-  useEffect(() => context.setCustomTheme(customTheme), [customTheme]);
-  useEffect(() => context.setLang(lang), [lang]);
-
-  /* When pulling data into WalletConnect, it prioritises the og:title tag over the title tag */
-  useEffect(() => {
-    const appName = getAppName();
-    if (!appName || !context.open) return;
-
-    const title = document.createElement('meta');
-    title.setAttribute('property', 'og:title');
-    title.setAttribute('content', appName);
-    document.head.prepend(title);
-
-    /*
-    // TODO:  When pulling data into WalletConnect, figure out which icon gets used and replace with appIcon if available 
-    const appIcon = getAppIcon();
-    const icon = document.createElement('link');
-    if (appIcon) {
-      icon.setAttribute('rel', 'icon');
-      icon.setAttribute('href', appIcon);
-      document.head.prepend(icon);
-    }*/
-
-    return () => {
-      document.head.removeChild(title);
-      //if (appIcon) document.head.removeChild(icon);
-    };
-  }, [context.open]);
-
-  return (
-    <ConnectKitThemeProvider
-      theme={theme}
-      customTheme={customTheme}
-      mode={mode}
-    >
-      <Modal
-        open={context.open}
-        pages={pages}
-        pageId={context.route}
-        onClose={closeable ? hide : undefined}
-        onInfo={
-          showInfoButton ? () => context.setRoute(routes.ABOUT) : undefined
-        }
-        onBack={showBackButton ? onBack : undefined}
-      />
-    </ConnectKitThemeProvider>
-  );
-};
-
-export default ConnectModal;