@multiplatform.one/web3 5.0.28 → 6.0.0

package/src/connectkit/hooks/useFitText.tsx

@@ -1,188 +0,0 @@
-// 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;

package/src/connectkit/hooks/useFocusTrap.tsx

@@ -1,71 +0,0 @@
-// 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

@@ -1,44 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

package/src/connectkit/hooks/useLocalStorage.ts

@@ -1,28 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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/useWindowSize.ts

@@ -1,25 +0,0 @@
-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;
-}