@multiplatform.one/connectkit 6.0.0

package/src/hooks/useFocusTrap.tsx

@@ -0,0 +1,71 @@
+// Based on https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element
+
+import { useRef, useEffect } from "react";
+
+const KEYCODE_TAB = 9;
+
+function useFocusTrap() {
+  const elRef = useRef<any>(null);
+
+  function handleFocus(e: any) {
+    if (!elRef.current) return;
+    var focusableEls = elRef.current.querySelectorAll(`
+        a[href]:not(:disabled),
+        button:not(:disabled),
+        textarea:not(:disabled),
+        input[type="text"]:not(:disabled),
+        input[type="radio"]:not(:disabled),
+        input[type="checkbox"]:not(:disabled),
+        select:not(:disabled)
+      `),
+      firstFocusableEl = focusableEls[0],
+      lastFocusableEl = focusableEls[focusableEls.length - 1];
+
+    var isTabPressed = e.key === "Tab" || e.keyCode === KEYCODE_TAB;
+
+    if (!isTabPressed) {
+      return;
+    }
+
+    if (e.shiftKey) {
+      /* shift + tab */ if (document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus();
+        e.preventDefault();
+      }
+    } /* tab */ else {
+      if (document.activeElement === lastFocusableEl) {
+        firstFocusableEl.focus();
+        e.preventDefault();
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (elRef.current) {
+      elRef.current.addEventListener("keydown", handleFocus);
+      elRef.current.focus({ preventScroll: true });
+    }
+    return () => {
+      if (elRef.current) {
+        elRef.current.removeEventListener("keydown", handleFocus);
+      }
+    };
+  }, []);
+
+  return elRef;
+}
+
+export default function FocusTrap(props: any) {
+  const elRef = useFocusTrap();
+
+  useEffect(() => {
+    if (!elRef.current) return;
+    elRef.current.focus({ preventScroll: true });
+  }, []);
+
+  return (
+    <div ref={elRef} tabIndex={0}>
+      {props.children}
+    </div>
+  );
+}

package/src/hooks/useGoogleFont.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+import { Theme } from "../types";
+
+export function useGoogleFont(font: string) {
+  useEffect(() => {
+    if (!font) return;
+    font = font.replace(/ /g, "+");
+
+    const googleapis = document.createElement("link");
+    googleapis.href = `https://fonts.googleapis.com`;
+    googleapis.rel = "preconnect";
+
+    const gstatic = document.createElement("link");
+    gstatic.href = `https://fonts.gstatic.com`;
+    gstatic.rel = "preconnect";
+    gstatic.crossOrigin = "true";
+
+    const link = document.createElement("link");
+    link.href = `https://fonts.googleapis.com/css2?family=${font}:wght@400;500;600&display=swap`;
+    link.rel = "stylesheet";
+
+    document.head.appendChild(googleapis);
+    document.head.appendChild(gstatic);
+    document.head.appendChild(link);
+    return () => {
+      document.head.removeChild(googleapis);
+      document.head.removeChild(gstatic);
+      document.head.removeChild(link);
+    };
+  }, [font]);
+}
+
+// TODO: This could be dynamic if theming wasn't set up as css variables
+export function useThemeFont(theme: Theme) {
+  const themeFonts: any = {
+    web95: "Lato",
+    retro: "Nunito",
+    midnight: "Inter",
+    minimal: "Inter",
+    rounded: "Nunito",
+  };
+  const font: string = themeFonts[theme] ?? null;
+  useGoogleFont(font ?? "");
+}

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+import { isMobile } from "../utils";
+
+export default function useIsMobile() {
+  const [mobile, setMobile] = useState(isMobile());
+
+  useEffect(() => {
+    const handleResize = () => {
+      setMobile(isMobile());
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return mobile;
+}

package/src/hooks/useIsMounted.tsx

@@ -0,0 +1,7 @@
+import { useState, useEffect } from "react";
+
+export default function useIsMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import * as LocalStorage from "../utils/localstorage";
+
+export const useLocalStorage = (storageKey: string) => {
+  const [data, setData] = useState(LocalStorage.get(storageKey));
+
+  const add = (item: any) => {
+    const newItems = LocalStorage.add(storageKey, item);
+    setData(newItems);
+  };
+
+  const update = (items: any) => {
+    const newItems = LocalStorage.save(storageKey, items);
+    setData(newItems);
+  };
+
+  const remove = (item: any) => {
+    const newItems = LocalStorage.remove(storageKey, item);
+    setData(newItems);
+  };
+
+  const clear = () => {
+    const newItems = LocalStorage.save(storageKey, []);
+    setData(newItems);
+  };
+
+  return { data, add, remove, update, clear };
+};

package/src/hooks/useLocales.tsx

@@ -0,0 +1,86 @@
+import React, { useMemo } from "react";
+import Logos from "../assets/logos";
+
+import { useContext } from "../components/ConnectKit";
+
+import { getLocale } from "./../localizations";
+import { LocaleProps } from "../localizations/locales";
+
+export default function useLocales(replacements?: any): LocaleProps {
+  const context = useContext();
+  const language = context.options?.language ?? "en-US";
+
+  const translations = useMemo(() => {
+    return getLocale(language);
+  }, [language]);
+
+  if (!translations) {
+    console.error(`Missing translations for: ${language}`);
+    throw new Error(`Missing translations for: ${language}`);
+  }
+
+  const translated = {};
+  Object.keys(translations).map((key) => {
+    const string = translations[key];
+    return (translated[key] = localize(string, replacements));
+  });
+
+  return translated as LocaleProps;
+}
+
+const localize = (text: string, replacements?: any[string]) => {
+  let parsedText: string = text;
+  if (replacements) {
+    Object.keys(replacements).forEach((key) => {
+      // use `replace` instead of `replaceAll` to support Node 14
+      parsedText = parsedText.replace(
+        new RegExp(`({{ ${key} }})`, "g"),
+        replacements[key as keyof typeof replacements],
+      );
+    });
+  }
+  return replaceMarkdown(parsedText);
+};
+
+const replaceMarkdown = (markdownText: string) => {
+  let text: any = markdownText;
+  text = text.split("\n");
+  text = text.map((t: string, i: number) => {
+    return (
+      <React.Fragment key={i}>
+        {wrapTags(t)}
+        {i < text.length - 1 && <br />}
+      </React.Fragment>
+    );
+  });
+  return text;
+};
+
+const wrapTags = (text: string) => {
+  // Bold markdown handling
+  const textArray = text.split(/(\*\*[^\*]*\*\*)/g);
+  let result = textArray.map((str, i) => {
+    if (/(\*\*.*\*\*)/g.test(str)) {
+      // use `replace` instead of `replaceAll` to support Node 14
+      return <strong key={i}>{str.replace(/\*\*/g, "")}</strong>;
+    }
+    return `${str}`;
+  });
+
+  // Replace text with logo
+  return result.map((r) => {
+    if (typeof r === "string") {
+      return r.split(/(\[WALLETCONNECTLOGO\])/g).map((s) => {
+        if (s === "[WALLETCONNECTLOGO]") {
+          return (
+            <span key={s} className="ck-tt-logo">
+              <Logos.WalletConnect />
+            </span>
+          );
+        }
+        return s;
+      });
+    }
+    return r;
+  });
+};

package/src/hooks/useLockBodyScroll.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState, useLayoutEffect } from "react";
+import { useContext } from "../components/ConnectKit";
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export default function useLockBodyScroll(initialLocked: boolean) {
+  const [locked, setLocked] = useState(initialLocked);
+
+  const context = useContext();
+
+  useIsomorphicLayoutEffect(() => {
+    if (!locked) return;
+
+    const original = {
+      overflow: document.body.style.overflow,
+      position: document.body.style.position,
+      touchAction: document.body.style.touchAction,
+      paddingRight: document.body.style.paddingRight,
+      //htmlOverflow: document.documentElement.style.overflow,
+    };
+
+    const style = getComputedStyle(document.body);
+    const offsetX =
+      parseInt(style.marginRight) +
+      parseInt(style.paddingRight) +
+      parseInt(style.borderRight) +
+      parseInt(style.marginLeft) +
+      parseInt(style.paddingLeft) +
+      parseInt(style.borderLeft);
+
+    const scrollBarWidth = window.innerWidth - document.body.offsetWidth - offsetX;
+    document.documentElement.style.setProperty("--ck-scrollbar-width", `${scrollBarWidth}px`);
+
+    document.body.style.overflow = "hidden";
+    document.body.style.position = "relative";
+    document.body.style.touchAction = "none";
+    //document.documentElement.style.overflow = 'hidden'; // overflow:hidden; on <html> breaks position:sticky;
+    if (context.options?.avoidLayoutShift) {
+      document.body.style.paddingRight = `${scrollBarWidth}px`;
+    }
+
+    return () => {
+      document.documentElement.style.removeProperty("--ck-scrollbar-width");
+
+      document.body.style.overflow = original.overflow;
+      document.body.style.position = original.position;
+      document.body.style.touchAction = original.touchAction;
+      //document.documentElement.style.overflow = original.htmlOverflow;
+      if (context.options?.avoidLayoutShift) {
+        document.body.style.paddingRight = original.paddingRight;
+      }
+    };
+  }, [locked]);
+
+  useEffect(() => {
+    if (locked !== initialLocked) setLocked(initialLocked);
+  }, [initialLocked]);
+
+  return [locked, setLocked];
+}

package/src/hooks/useModal.ts

@@ -0,0 +1,52 @@
+import { routes, useContext } from "../components/ConnectKit";
+import { ModalState, useModalState, useScreenRegistry } from "../registry";
+
+// connectkit's signer-agnostic modal controller: open/close + a generic
+// openScreen(id). Signer plugins (web3, gpg) wrap this and re-export the named
+// openers (openSIWE, openProfile, openGpg, …) — see web3's useWeb3Modal.
+export const useModal = () => {
+  const context = useContext();
+  const { screens } = useScreenRegistry();
+  const modalState = useModalState();
+  const isConnected = !!modalState.connected;
+
+  const close = () => {
+    context.setOpen(false);
+  };
+  const open = () => {
+    context.setOpen(true);
+  };
+
+  /**
+   * Navigate to a registered screen if it exists and is reachable in the current
+   * host state, otherwise fall back to the home screen. Subsumes the old per-name
+   * openers + the static `safeRoutes` allowlist (each screen's `availableWhen` now
+   * declares when it's reachable).
+   */
+  const openScreen = (id: string) => {
+    const homeRoute = isConnected ? routes.PROFILE : routes.CONNECTORS;
+    const state: ModalState = { connected: isConnected };
+    const def = screens.get(id);
+
+    let target = id;
+    if (!def || (def.availableWhen && !def.availableWhen(state))) {
+      target = homeRoute;
+      context.log(`Route ${id} is not reachable right now, navigating to ${target} instead.`);
+    }
+
+    context.setRoute(target);
+    open();
+  };
+
+  return {
+    open: context.open,
+    setOpen: (show: boolean) => {
+      if (show) {
+        openScreen(isConnected ? routes.PROFILE : routes.CONNECTORS);
+      } else {
+        close();
+      }
+    },
+    openScreen,
+  };
+};

package/src/hooks/usePrevious.tsx

@@ -0,0 +1,13 @@
+import { useRef } from "react";
+
+export default function usePrevious(value: any, initial?: any) {
+  const ref = useRef({ target: value, previous: initial });
+
+  if (ref.current.target !== value) {
+    // The value changed.
+    ref.current.previous = ref.current.target;
+    ref.current.target = value;
+  }
+
+  return ref.current.previous;
+}

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+export default function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowSize;
+}

package/src/index.ts

@@ -0,0 +1,76 @@
+// @multiplatform.one/connectkit — the signer-agnostic wallet-modal UI kit.
+//
+// The modal shell, routing, theming, Common UI primitives, the generic useModal,
+// and the screen-registration + ModalState injection API. Contains NO wagmi/viem.
+// web3 (+viem/wallets) and gpg (+gpg screen) register their own screens into this kit.
+
+export const CONNECTKIT_VERSION = "1.9.2";
+
+// ── Core provider + context ────────────────────────────────────────────────────
+export { ConnectKitProvider, Context, useContext, routes } from "./components/ConnectKit";
+export type { ConnectKitOptions, ConnectCallbackProps } from "./components/ConnectKit";
+export { default as ConnectKitModal } from "./components/ConnectModal";
+
+// ── Screen registry + ModalState injection ─────────────────────────────────────
+export * from "./registry";
+
+// ── App metadata hint (WalletConnect og:title) ─────────────────────────────────
+export { getAppName, getAppIcon, setAppMeta } from "./appMeta";
+
+// ── Types ───────────────────────────────────────────────────────────────────────
+export * as Types from "./types";
+export type { Theme, Mode, CustomTheme, Languages, All, CustomAvatarProps } from "./types";
+
+// ── Theming ──────────────────────────────────────────────────────────────────────
+// `defaultTheme` here is the layout-constants theme (mobileWidth, …) that screens'
+// styled components read; the styled-components ThemeProvider theme stays internal.
+export { default as defaultTheme } from "./constants/defaultTheme";
+export { default as styled } from "./styles/styled";
+export { ResetContainer } from "./styles";
+export {
+  ConnectKitThemeProvider,
+  useThemeContext,
+} from "./components/ConnectKitThemeProvider/ConnectKitThemeProvider";
+
+// ── Hooks (UI) ─────────────────────────────────────────────────────────────────
+export { useModal } from "./hooks/useModal";
+export { default as useLocales } from "./hooks/useLocales";
+export { default as useIsMounted } from "./hooks/useIsMounted";
+export { default as useIsMobile } from "./hooks/useIsMobile";
+export { default as FocusTrap } from "./hooks/useFocusTrap";
+export { default as useLockBodyScroll } from "./hooks/useLockBodyScroll";
+export { default as usePrevious } from "./hooks/usePrevious";
+export { default as useWindowSize } from "./hooks/useWindowSize";
+export { useThemeFont } from "./hooks/useGoogleFont";
+
+// ── Utils ──────────────────────────────────────────────────────────────────────
+export * from "./utils";
+
+// ── Common UI components ─────────────────────────────────────────────────────────
+export { default as Button } from "./components/Common/Button";
+export { default as Alert } from "./components/Common/Alert";
+export { default as Tooltip } from "./components/Common/Tooltip";
+export { default as BrowserIcon } from "./components/Common/BrowserIcon";
+export { default as CopyToClipboard } from "./components/Common/CopyToClipboard";
+export { default as CustomQRCode } from "./components/Common/CustomQRCode";
+export { default as DynamicContainer } from "./components/Common/DynamicContainer";
+export { default as FitText } from "./components/Common/FitText";
+export { default as LazyImage } from "./components/Common/LazyImage";
+export { default as Logo } from "./components/Common/Logo";
+export { default as Portal } from "./components/Common/Portal";
+export { ScrollArea } from "./components/Common/ScrollArea";
+export { Spinner } from "./components/Common/Spinner";
+export { default as ThemedButton, ThemeContainer } from "./components/Common/ThemedButton";
+export { ContinueWithAaveButton } from "./components/Common/ContinueWithAaveButton";
+
+// The modal shell + its layout/typography styled atoms (used by registered screens)
+export { default as Modal, OrDivider, contentVariants } from "./components/Common/Modal";
+export * from "./components/Common/Modal/styles";
+
+// ── Assets ──────────────────────────────────────────────────────────────────────
+export * from "./assets/icons";
+export { default as Logos } from "./assets/logos";
+export { default as wave } from "./assets/wave";
+export { default as WalletIcon } from "./assets/wallet";
+export { default as ScanIconWithLogos } from "./assets/ScanIconWithLogos";
+export { default as browsers } from "./assets/browsers";

package/src/localizations/index.tsx

@@ -0,0 +1,71 @@
+export type Languages =
+  | "ar-AE"
+  | "en-US"
+  | "ee-EE"
+  | "es-ES"
+  | "fa-IR"
+  | "fr-FR"
+  | "ja-JP"
+  | "pt-BR"
+  | "zh-CN"
+  | "ca-AD"
+  | "ru-RU"
+  | "zh-CN"
+  | "tr-TR"
+  | "vi-VN";
+
+import { default as arAE } from "./locales/ar-AE";
+import { default as enUS } from "./locales/en-US";
+import { default as eeEE } from "./locales/ee-EE";
+import { default as esES } from "./locales/es-ES";
+import { default as faIR } from "./locales/fa-IR";
+import { default as frFR } from "./locales/fr-FR";
+import { default as jaJP } from "./locales/ja-JP";
+import { default as ptBR } from "./locales/pt-BR";
+import { default as ruRU } from "./locales/ru-RU";
+import { default as zhCN } from "./locales/zh-CN";
+import { default as caAD } from "./locales/ca-AD";
+import { default as trTR } from "./locales/tr-TR";
+import { default as viVN } from "./locales/vi-VN";
+
+// TODO: tree-shaking
+export const getLocale = (lang: Languages) => {
+  switch (lang) {
+    case "ee-EE":
+      return eeEE;
+    case "ar-AE":
+      return arAE;
+    case "es-ES":
+      return esES;
+    case "fa-IR":
+      return faIR;
+    case "fr-FR":
+      return frFR;
+    case "ja-JP":
+      return jaJP;
+    case "pt-BR":
+      return ptBR;
+    case "ru-RU":
+      return ruRU;
+    case "zh-CN":
+      return zhCN;
+    case "ca-AD":
+      return caAD;
+    case "tr-TR":
+      return trTR;
+    case "vi-VN":
+      return viVN;
+    default:
+      return enUS;
+  }
+};
+
+/*
+// Could be useful for locale files to use these keys rather than hard-coded into the objects
+export const keys = {
+  connectorName: '{{ CONNECTORNAME }}',
+  connectorShortName: '{{ CONNECTORSHORTNAME }}',
+  suggestedExtensionBrowser: '{{ SUGGESTEDEXTENSIONBROWSER }}',
+  walletConnectLogo: '{{ WALLETCONNECTLOGO }}',
+};
+*/