@multiplatform.one/web3 5.0.27

package/src/connectkit/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/connectkit/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/connectkit/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/connectkit/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/connectkit/hooks/useLastConnector.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useConfig } from 'wagmi';
+
+export const useLastConnector = () => {
+  const { storage } = useConfig();
+  const [lastConnectorId, setLastConnectorId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      const id = await storage?.getItem('recentConnectorId');
+      setLastConnectorId(id ?? '');
+    };
+    init();
+  }, []);
+
+  const update = (id: string) => {
+    storage?.setItem('recentConnectorId', id);
+  };
+
+  return {
+    lastConnectorId,
+    updateLastConnectorId: update,
+  };
+};

package/src/connectkit/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/connectkit/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/connectkit/hooks/useLockBodyScroll.ts

@@ -0,0 +1,65 @@
+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/connectkit/hooks/useModal.ts

@@ -0,0 +1,101 @@
+import { useAccount } from 'wagmi';
+import { routes, useContext } from '../components/ConnectKit';
+import { useSIWE } from '../siwe';
+import {
+  useConnectCallback,
+  useConnectCallbackProps,
+} from './useConnectCallback';
+
+type ModalRoutes = (typeof routes)[keyof typeof routes];
+
+const safeRoutes: {
+  connected: ModalRoutes[];
+  disconnected: ModalRoutes[];
+} = {
+  disconnected: [
+    routes.CONNECTORS,
+    routes.ABOUT,
+    routes.ONBOARDING,
+    routes.MOBILECONNECTORS,
+    routes.ONBOARDING,
+  ],
+  connected: [routes.PROFILE, routes.SWITCHNETWORKS, routes.SIGNINWITHETHEREUM],
+};
+const allRoutes: ModalRoutes[] = [
+  ...safeRoutes.connected,
+  ...safeRoutes.disconnected,
+];
+
+type ValidRoutes = ModalRoutes;
+
+type UseModalProps = {} & useConnectCallbackProps;
+
+export const useModal = ({ onConnect, onDisconnect }: UseModalProps = {}) => {
+  const context = useContext();
+
+  useConnectCallback({
+    onConnect,
+    onDisconnect,
+  });
+
+  const { isConnected } = useAccount();
+  const { signIn } = useSIWE();
+
+  const close = () => {
+    context.setOpen(false);
+  };
+  const open = () => {
+    context.setOpen(true);
+  };
+
+  const gotoAndOpen = (route: ValidRoutes) => {
+    let validRoute: ValidRoutes = route;
+
+    if (!allRoutes.includes(route)) {
+      validRoute = isConnected ? routes.PROFILE : routes.CONNECTORS;
+      context.log(
+        `Route ${route} is not a valid route, navigating to ${validRoute} instead.`
+      );
+    } else {
+      if (isConnected) {
+        if (!safeRoutes.connected.includes(route)) {
+          validRoute = routes.PROFILE;
+          context.log(
+            `Route ${route} is not a valid route when connected, navigating to ${validRoute} instead.`
+          );
+        }
+      } else {
+        if (!safeRoutes.disconnected.includes(route)) {
+          validRoute = routes.CONNECTORS;
+          context.log(
+            `Route ${route} is not a valid route when disconnected, navigating to ${validRoute} instead.`
+          );
+        }
+      }
+    }
+
+    context.setRoute(validRoute);
+    open();
+  };
+
+  return {
+    open: context.open,
+    setOpen: (show: boolean) => {
+      if (show) {
+        gotoAndOpen(isConnected ? routes.PROFILE : routes.CONNECTORS);
+      } else {
+        close();
+      }
+    },
+    // Disconnected Routes
+    openAbout: () => gotoAndOpen(routes.ABOUT),
+    openOnboarding: () => gotoAndOpen(routes.ONBOARDING),
+    // Connected Routes
+    openProfile: () => gotoAndOpen(routes.PROFILE),
+    openSwitchNetworks: () => gotoAndOpen(routes.SWITCHNETWORKS),
+    openSIWE: (triggerSIWE?: boolean) => {
+      gotoAndOpen(routes.SIGNINWITHETHEREUM);
+      if (triggerSIWE) signIn();
+    },
+  };
+};

package/src/connectkit/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/connectkit/hooks/useWalletConnectModal.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { Connector, CreateConnectorFn } from 'wagmi';
+import { walletConnect } from 'wagmi/connectors';
+import { useContext } from '../components/ConnectKit';
+
+import { isWalletConnectConnector } from '../utils';
+import { useConnect } from './useConnect';
+
+export function useWalletConnectModal() {
+  const { log } = useContext();
+  const { connectAsync, connectors } = useConnect();
+  const [isOpen, setIsOpen] = useState(false);
+
+  return {
+    isOpen,
+    open: async () => {
+      // add modal styling because wagmi does not let you add styling to the modal
+      const w3mcss = document.createElement('style');
+      w3mcss.innerHTML = `w3m-modal, wcm-modal{ --wcm-z-index: 2147483647; --w3m-z-index:2147483647; }`;
+      document.head.appendChild(w3mcss);
+
+      const clientConnector: Connector | undefined = connectors.find((c) =>
+        isWalletConnectConnector(c.id)
+      );
+
+      if (clientConnector) {
+        try {
+          const provider: any = await clientConnector.getProvider();
+          const projectId = provider.rpc.projectId;
+
+          const connector: CreateConnectorFn = walletConnect({
+            projectId,
+            showQrModal: true,
+          });
+
+          setIsOpen(true);
+          try {
+            await connectAsync({ connector: connector });
+          } catch (err) {
+            log('WalletConnect', err);
+          }
+          setIsOpen(false);
+
+          // remove modal styling
+          document.head.removeChild(w3mcss);
+        } catch (err) {
+          log('Could not get WalletConnect provider', err);
+        }
+      } else {
+        log('No WalletConnect connector available');
+      }
+    },
+  };
+}

package/src/connectkit/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/connectkit/index.ts

@@ -0,0 +1,79 @@
+export const CONNECTKIT_VERSION = '1.9.2';
+
+export * as Types from './types';
+export { default as getDefaultConfig } from './defaultConfig';
+export { default as getDefaultConnectors } from './defaultConnectors';
+export { wallets } from './wallets';
+
+export { useModal } from './hooks/useModal';
+export {
+  SIWEProvider,
+  useSIWE,
+  SIWE_NONCE_QUERY_KEY,
+  SIWE_SESSION_QUERY_KEY,
+} from './siwe';
+export type { SIWESession, SIWEConfig } from './siwe';
+
+export { ConnectKitProvider, Context } from './components/ConnectKit';
+export { ConnectKitButton } from './components/ConnectButton';
+export { default as SIWEButton } from './components/Standard/SIWE';
+
+//export { default as NetworkButton } from './components/NetworkButton';
+//export { default as BalanceButton, Balance } from './components/BalanceButton';
+export { default as Avatar } from './components/Common/Avatar';
+export { default as ChainIcon } from './components/Common/Chain';
+
+// Hooks
+export { default as useIsMounted } from './hooks/useIsMounted'; // Useful for apps that use SSR
+export { useChains } from './hooks/useChains';
+export { useChainIsSupported } from './hooks/useChainIsSupported';
+
+// TODO: Make this private
+export { default as ConnectKitModalDemo } from './components/ConnectModal/demo';
+
+// ── siww multi-chain (Solana / Sui / Bitcoin) ──────────────────────────────────
+// The vendored WalletAdapters + the wagmi connector shims that let ConnectKit's
+// modal list & connect non-EVM wallets alongside the native EVM connectors.
+export {
+  discoverWallets,
+  EthereumAdapter,
+  SolanaAdapter,
+  SuiAdapter,
+  BitcoinAdapter,
+  type WalletAdapter,
+  type WalletEntry,
+  type SiwwEcosystem,
+} from './adapters';
+export { getSiwwConnectors } from './connectors/getSiwwConnectors';
+export {
+  walletAdapterConnector,
+  type SiwwConnectorEntry,
+} from './connectors/walletAdapterConnector';
+export {
+  syntheticChains,
+  solanaChain,
+  suiChain,
+  bitcoinChain,
+  SOLANA_CHAIN_ID,
+  SUI_CHAIN_ID,
+  BITCOIN_CHAIN_ID,
+  isSyntheticChainId,
+} from './connectors/syntheticChains';
+export {
+  getConnectorEcosystem,
+  isSiwwConnector,
+  type Ecosystem,
+} from './utils';
+// The unified sign-in message layer: ONE source of truth for the SIWx message per
+// signer family, and a chain-agnostic createMessage to plug into SIWEConfig so all
+// chains sign in through ConnectKit's single signIn().
+export {
+  buildSiwwMessage,
+  type SignerFamily,
+  type SiwwMessageOptions,
+} from './adapters/messages';
+export {
+  createSiwwMessage,
+  familyFromChainId,
+  type CreateSiwwMessageArgs,
+} from './connectors/createSiwwMessage';

package/src/connectkit/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 }}',
+};
+*/