@multiplatform.one/connectkit 6.0.0

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

@@ -0,0 +1,80 @@
+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/components/Common/Tooltip/types.ts

@@ -0,0 +1,10 @@
+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/components/ConnectKit.tsx

@@ -0,0 +1,242 @@
+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 { routes } from "../routes";
+import { ScreenRegistryProvider } from "../registry";
+
+// Re-exported for back-compat; the source of truth lives in ../routes (kept
+// standalone to avoid an import cycle with screen-registering plugin modules).
+export { routes };
+
+// The connect/disconnect callback contract. Defined in the agnostic core (was the
+// wagmi-flavoured `useConnectCallbackProps`) so the provider names no signer; the
+// signer bridge wires these to wallet events.
+export type ConnectCallbackProps = {
+  onConnect?: (params: { address?: string; connectorId?: string }) => void;
+  onDisconnect?: () => void;
+};
+
+// Agnostic default bridge: a pass-through that registers no screens and injects no
+// ModalState (useModalState falls back to `{}`). web3 supplies Web3ModalBridge (its
+// own ConnectKitProvider wrapper passes it); a gpg-only host passes a GPG bridge.
+const PassthroughBridge: React.FC<{ children?: React.ReactNode } & ConnectCallbackProps> = ({
+  children,
+}) => <>{children}</>;
+
+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;
+  debugMode?: boolean;
+  log: (...props: any) => void;
+  displayError: (message: string | React.ReactNode | null, code?: any) => void;
+  resize: number;
+  triggerResize: () => void;
+} & ConnectCallbackProps;
+
+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;
+  /**
+   * The signer bridge: a component rendered inside the provider (above the modal)
+   * that registers screens + injects ModalState. Defaults to web3's wallet bridge.
+   * A gpg-only app passes a thin bridge that registers just the GPG screen.
+   */
+  bridge?: React.ComponentType<{ children: React.ReactNode } & ConnectCallbackProps>;
+} & ConnectCallbackProps;
+
+export const ConnectKitProvider = ({
+  children,
+  theme = "auto",
+  mode = "auto",
+  customTheme,
+  options,
+  onConnect,
+  onDisconnect,
+  debugMode = false,
+  bridge,
+}: ConnectKitProviderProps) => {
+  // 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.");
+  }
+
+  const Bridge = bridge ?? PassthroughBridge;
+
+  // 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,
+    // The wallet-chain default (formerly chains[0].id) is supplied by the signer
+    // bridge / wagmi config; the agnostic core doesn't read chains.
+    initialChainId: undefined,
+    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]);
+
+  const log = debugMode ? console.log : () => {};
+
+  const value = {
+    theme: ckTheme,
+    setTheme,
+    mode: ckMode,
+    setMode,
+    customTheme,
+    setCustomTheme,
+    lang: ckLang,
+    setLang,
+    open,
+    setOpen,
+    route,
+    setRoute,
+    connector,
+    setConnector,
+    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 },
+    <>
+      <ScreenRegistryProvider>
+        {/* The signer bridge registers screens + injects ModalState above the modal. */}
+        <Bridge onConnect={onConnect} onDisconnect={onDisconnect}>
+          <ThemeProvider theme={defaultTheme}>
+            {children}
+            <ConnectKitModal
+              lang={ckLang}
+              theme={ckTheme}
+              mode={mode}
+              customTheme={ckCustomTheme}
+            />
+          </ThemeProvider>
+        </Bridge>
+      </ScreenRegistryProvider>
+    </>,
+  );
+};
+
+export const useContext = () => {
+  const context = React.useContext(Context);
+  if (!context) throw Error("ConnectKit Hook must be inside a Provider.");
+  return context;
+};

package/src/components/ConnectKitThemeProvider/ConnectKitThemeProvider.tsx

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

@@ -0,0 +1,109 @@
+import { useEffect } from "react";
+import { routes, useContext } from "../ConnectKit";
+import { CustomTheme, Languages, Mode, Theme } from "../../types";
+import Modal from "../Common/Modal";
+
+import { getAppName } from "../../appMeta";
+import { ConnectKitThemeProvider } from "../ConnectKitThemeProvider/ConnectKitThemeProvider";
+import { ScreenApi, resolveShowBack, useModalState, useScreenRegistry } from "../../registry";
+
+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();
+
+  // Registry-driven + signer-agnostic: the modal renders whatever screens the
+  // mounted plugin(s) registered, and reads connection state from the injected
+  // ModalState (web3's bridge supplies it) — never from wagmi directly.
+  const { screens } = useScreenRegistry();
+  const modalState = useModalState();
+  const isConnected = !!modalState.connected;
+  const chainIsSupported = modalState.chainIsSupported !== false;
+
+  const currentDef = screens.get(context.route);
+  const homeRoute = isConnected ? routes.PROFILE : routes.CONNECTORS;
+  const isHome = context.route === homeRoute;
+
+  //if chain is unsupported we enforce a "switch chain" prompt
+  const closeable = !(context.options?.enforceSupportedChains && isConnected && !chainIsSupported);
+
+  const showBackButton =
+    closeable && !!currentDef && resolveShowBack(currentDef, modalState, isHome);
+
+  const showInfoButton = closeable && !!currentDef && (currentDef.showInfo ?? true);
+
+  const screenApi: ScreenApi = {
+    setRoute: context.setRoute,
+    setOpen: context.setOpen,
+    close: () => context.setOpen(false),
+  };
+
+  // Each ScreenDef owns its back behaviour; default is "return to the home screen".
+  const onBack = () => {
+    if (currentDef?.onBack) currentDef.onBack(screenApi);
+    else context.setRoute(homeRoute);
+  };
+
+  const pages: Record<string, React.ReactNode> = {};
+  screens.forEach((def, id) => {
+    pages[id] = <def.component />;
+  });
+
+  function hide() {
+    context.setOpen(false);
+  }
+
+  // (The on-connect → SIWE/close redirect now lives in web3's bridge, which owns
+  // the wagmi connection state.)
+
+  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;

package/src/constants/defaultTheme.ts

@@ -0,0 +1,3 @@
+export default {
+  mobileWidth: 560,
+};

package/src/hooks/useFitText.tsx

@@ -0,0 +1,171 @@
+// https://github.com/saltycrane/use-fit-text
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import ResizeObserver from "resize-observer-polyfill";
+
+export type TLogLevel = "debug" | "info" | "warn" | "error" | "none";
+
+export type TOptions = {
+  logLevel?: TLogLevel;
+  maxFontSize?: number;
+  minFontSize?: number;
+  onFinish?: (fontSize: number) => void;
+  onStart?: () => void;
+  resolution?: number;
+};
+
+const LOG_LEVEL: Record<TLogLevel, number> = {
+  debug: 10,
+  info: 20,
+  warn: 30,
+  error: 40,
+  none: 100,
+};
+
+// Suppress `useLayoutEffect` warning when rendering on the server
+// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+const useIsoLayoutEffect =
+  typeof window !== "undefined" && window.document && window.document.createElement !== undefined
+    ? useLayoutEffect
+    : useEffect;
+
+const useFitText = ({
+  logLevel: logLevelOption = "info",
+  maxFontSize = 100,
+  minFontSize = 20,
+  onFinish,
+  onStart,
+  resolution = 5,
+}: TOptions = {}) => {
+  const logLevel = LOG_LEVEL[logLevelOption];
+
+  const initState = useCallback(() => {
+    return {
+      calcKey: 0,
+      fontSize: maxFontSize,
+      fontSizePrev: minFontSize,
+      fontSizeMax: maxFontSize,
+      fontSizeMin: minFontSize,
+    };
+  }, [maxFontSize, minFontSize]);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const innerHtmlPrevRef = useRef<string | null>(null);
+  const isCalculatingRef = useRef(false);
+  const [state, setState] = useState(initState);
+  const { calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev } = state;
+
+  // Montior div size changes and recalculate on resize
+  let animationFrameId: number | null = null;
+  const [ro] = useState(
+    () =>
+      new ResizeObserver(() => {
+        animationFrameId = window.requestAnimationFrame(() => {
+          if (isCalculatingRef.current) {
+            return;
+          }
+          onStart && onStart();
+          isCalculatingRef.current = true;
+          // `calcKey` is used in the dependencies array of
+          // `useIsoLayoutEffect` below. It is incremented so that the font size
+          // will be recalculated even if the previous state didn't change (e.g.
+          // when the text fit initially).
+          setState({
+            ...initState(),
+            calcKey: calcKey + 1,
+          });
+        });
+      }),
+  );
+
+  useEffect(() => {
+    if (ref.current) {
+      ro.observe(ref.current);
+    }
+    return () => {
+      animationFrameId && window.cancelAnimationFrame(animationFrameId);
+      ro.disconnect();
+    };
+  }, [animationFrameId, ro]);
+
+  // Recalculate when the div contents change
+  const innerHtml = ref.current && ref.current.innerHTML;
+  useEffect(() => {
+    if (calcKey === 0 || isCalculatingRef.current) return;
+
+    if (innerHtml !== innerHtmlPrevRef.current) {
+      onStart && onStart();
+      setState({
+        ...initState(),
+        calcKey: calcKey + 1,
+      });
+    }
+    innerHtmlPrevRef.current = innerHtml;
+  }, [calcKey, initState, innerHtml, onStart]);
+
+  // Check overflow and resize font
+  useIsoLayoutEffect(() => {
+    // Don't start calculating font size until the `resizeKey` is incremented
+    // above in the `ResizeObserver` callback. This avoids an extra resize
+    // on initialization.
+    if (calcKey === 0) {
+      return;
+    }
+
+    const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
+    const isOverflow =
+      !!ref.current &&
+      (ref.current.scrollHeight > ref.current.offsetHeight ||
+        ref.current.scrollWidth > ref.current.offsetWidth);
+    const isFailed = isOverflow && fontSize === fontSizePrev;
+    const isAsc = fontSize > fontSizePrev;
+
+    // Return if the font size has been adjusted "enough" (change within `resolution`)
+    // reduce font size by one increment if it's overflowing.
+    if (isWithinResolution) {
+      if (isFailed) {
+        isCalculatingRef.current = false;
+        if (logLevel <= LOG_LEVEL.info) {
+          console.info(
+            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`,
+          );
+        }
+      } else if (isOverflow) {
+        setState({
+          fontSize: isAsc ? fontSizePrev : fontSizeMin,
+          fontSizeMax,
+          fontSizeMin,
+          fontSizePrev,
+          calcKey,
+        });
+      } else {
+        isCalculatingRef.current = false;
+        onFinish && onFinish(fontSize);
+      }
+      return;
+    }
+
+    // Binary search to adjust font size
+    let delta: number;
+    let newMax = fontSizeMax;
+    let newMin = fontSizeMin;
+    if (isOverflow) {
+      delta = isAsc ? fontSizePrev - fontSize : fontSizeMin - fontSize;
+      newMax = Math.min(fontSizeMax, fontSize);
+    } else {
+      delta = isAsc ? fontSizeMax - fontSize : fontSizePrev - fontSize;
+      newMin = Math.max(fontSizeMin, fontSize);
+    }
+    setState({
+      calcKey,
+      fontSize: fontSize + delta / 2,
+      fontSizeMax: newMax,
+      fontSizeMin: newMin,
+      fontSizePrev: fontSize,
+    });
+  }, [calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev, onFinish, ref, resolution]);
+
+  return { fontSize, ref };
+};
+
+export default useFitText;