@onepercentio/one-ui 0.29.4 → 0.29.6

package/src/components/WalletConnectionWrapper/WalletConnectionWrapper.tsx

@@ -1,212 +0,0 @@
-import React, {
-  createRef,
-  ForwardedRef,
-  forwardRef,
-  PropsWithChildren,
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from "react";
-import { useWallet, UseWalletProvider } from "use-wallet";
-import useAsyncControl from "../../hooks/useAsyncControl";
-
-export type WalletConnectionProps = PropsWithChildren<
-  Omit<ReturnType<typeof useAsyncControl>, "process"> & {
-    chainId?: number;
-    isChainIdValid: boolean | undefined;
-    isProviderAvailable: boolean;
-    isConnectedAndValidChain: boolean;
-    isConnected: boolean;
-    wallet?: string;
-
-    connect: () => Promise<void>;
-    disconnect: () => void;
-    changeChainId: () => Promise<void>;
-  }
->;
-
-type Props = {
-  /**
-   * The chain id that the user is expected to connect to
-   */
-  chain?: {
-    id: number;
-    rpcUrl: string;
-    explorerUrl: string;
-    name: string;
-    currency: string;
-  };
-
-  /**
-   * When the user doesn't have a provider like metamask available
-   */
-  ProviderUnavailable?: React.FunctionComponent;
-
-  /**
-   * This is invoked when the chain ID is not available
-   */
-  ChainIdInvalid?: React.FunctionComponent<{
-    changeChainId: () => void;
-  }>;
-
-  /**
-   * This renders the content that is shown inside the wallet content
-   */
-  Content: (props: WalletConnectionProps) => ReactElement;
-};
-function _WalletConnectionWrapper(
-  props: PropsWithChildren<Props>,
-  ref: ForwardedRef<{
-    connect: () => Promise<void>;
-    disconnect: () => void;
-  }>
-) {
-  return (
-    <UseWalletProvider>
-      <Content compRef={ref || createRef()} {...props} />
-    </UseWalletProvider>
-  );
-}
-/**
- * This component handles a lot of cenarios when dealing with the wallet connection to different providers (ex: Metamask)
- **/
-function _BaseWalletConnectionWrapper(
-  props: Props & {
-    children?: any;
-  },
-  ref: ForwardedRef<{
-    connect: () => Promise<void>;
-    disconnect: () => void;
-  }>
-) {
-  return <Content compRef={ref || createRef()} {...props} />;
-}
-
-function Content({
-  ProviderUnavailable,
-  ChainIdInvalid,
-  chain,
-  Content: ProvidedContentWrapper,
-  compRef,
-  children,
-}: PropsWithChildren<
-  Props & {
-    compRef: ForwardedRef<{
-      connect: () => Promise<void>;
-      disconnect: () => void;
-    }>;
-  }
->) {
-  const wallet = useWallet();
-  const connectionAsyncWrapper = useAsyncControl();
-  const connect = async () => {
-    await connectionAsyncWrapper.process(async () => {
-      await wallet.connect("injected");
-      localStorage.setItem("auto_connect", "true");
-    });
-  };
-  const disconnect = () => {
-    wallet.reset();
-    localStorage.removeItem("auto_connect");
-  };
-  useEffect(() => {
-    const autoConnect = !!localStorage.getItem("auto_connect");
-    if (autoConnect && !wallet.account) connect();
-  }, []);
-  useImperativeHandle(
-    compRef,
-    () => ({
-      connect,
-      disconnect,
-    }),
-    [wallet]
-  );
-  const [isProviderAvailable] = useState(() => !!window.ethereum);
-  /**
-   * true - Mostrar o conteudo (ex: form de transferencia)
-   * false - Mostrar o botão de trocar a chain
-   *
-   * undefined ???
-   */
-  const isChainIdValid = useMemo(
-    () =>
-      chain
-        ? wallet.isConnected()
-          ? wallet.chainId === chain.id
-          : true
-        : undefined,
-    [wallet, chain?.id]
-  );
-
-  async function changeChainId() {
-    try {
-      await window.ethereum!.request({
-        method: "wallet_switchEthereumChain",
-        params: [
-          {
-            chainId: `0x${chain!.id.toString(16).padStart(2, "0")}`,
-          },
-        ],
-      });
-    } catch (e: any) {
-      switch (e.code) {
-        case 4902:
-          await window.ethereum!.request({
-            method: "wallet_addEthereumChain",
-            params: [
-              {
-                chainId: `0x${chain!.id.toString(16).padStart(2, "0")}`,
-                chainName: chain!.name,
-                rpcUrls: [chain!.rpcUrl],
-                blockExplorerUrls: [chain!.explorerUrl],
-                nativeCurrency: {
-                  symbol: chain!.currency,
-                  decimals: 18,
-                },
-              },
-            ],
-          });
-        default:
-          throw e;
-      }
-    }
-  }
-  const ContentWrapper = ProvidedContentWrapper as any;
-  return (
-    <>
-      {ProviderUnavailable && !isProviderAvailable && <ProviderUnavailable />}
-      {ChainIdInvalid && !isChainIdValid && (
-        <ChainIdInvalid changeChainId={changeChainId} />
-      )}
-      {
-        <ContentWrapper
-          {...connectionAsyncWrapper}
-          isChainIdValid={isChainIdValid}
-          isProviderAvailable={isProviderAvailable}
-          isConnectedAndValidChain={isChainIdValid && wallet.isConnected()}
-          connect={connect}
-          disconnect={disconnect}
-          changeChainId={changeChainId}
-          chainId={wallet.chainId}
-          isConnected={wallet.isConnected()}
-          wallet={wallet.account}
-        >
-          {children}
-        </ContentWrapper>
-      }
-    </>
-  );
-}
-
-/**
- * This component handles some cenarios when dealing with the wallet connection to different providers (ex: Metamask)
- **/
-const WalletConnectionWrapper = forwardRef(_WalletConnectionWrapper);
-export default WalletConnectionWrapper;
-
-export const BaseWalletConnectionWrapper = forwardRef(
-  _BaseWalletConnectionWrapper
-);

package/src/components/WalletConnectionWrapper/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./WalletConnectionWrapper";
-export * from "./WalletConnectionWrapper";

package/src/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.module.scss

@@ -1,5 +0,0 @@
-.lockClass {
-    @media screen and (max-width: 639px) {
-        overflow: hidden;
-    }
-}

package/src/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.tsx

@@ -1,52 +0,0 @@
-import React, { PropsWithChildren, useEffect, useRef } from "react";
-import Styles from "./ScrollAndFocusLock.module.scss";
-/**
- * This utilitary component shall be used to lock the focus and disable scroll over the wrapped component
- **/
-export default function ScrollAndFocusLock({
-  open,
-  children,
-}: PropsWithChildren<{
-  open: boolean;
-}>) {
-  const firstAnchor = useRef<HTMLDivElement>(null);
-  const lastAnchor = useRef<HTMLDivElement>(null);
-  const startOfModal = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (open) startOfModal.current!.focus();
-  }, []);
-  useEffect(() => {
-    if (open) {
-      startOfModal.current!.focus();
-      document.body.classList.add(Styles.lockClass)
-
-      return () => {
-        document.body.classList.remove(Styles.lockClass)
-      };
-    }
-  }, [open]);
-
-  function onFocusAnchors(e: React.FocusEvent<HTMLDivElement>) {
-    const focusOnStartOfModal = () => {
-      const nextSibling = firstAnchor.current!.nextElementSibling;
-      if (nextSibling instanceof HTMLDivElement) nextSibling.focus();
-    };
-    if (e.target === firstAnchor.current) {
-      if (e.relatedTarget === startOfModal.current) lastAnchor.current!.focus();
-      else focusOnStartOfModal();
-    } else if (
-      e.target === lastAnchor.current &&
-      e.relatedTarget !== firstAnchor.current
-    ) {
-      focusOnStartOfModal();
-    }
-  }
-  return (
-    <>
-      <div ref={firstAnchor} tabIndex={0} onFocus={onFocusAnchors} />
-      <div ref={startOfModal} tabIndex={0} />
-      {children}
-      <div ref={lastAnchor} tabIndex={0} onFocus={onFocusAnchors} />
-    </>
-  );
-}

package/src/components/utilitary/ScrollAndFocusLock/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./ScrollAndFocusLock";
-export * from "./ScrollAndFocusLock";

package/src/context/AsyncProcess.tsx

@@ -1,107 +0,0 @@
-import React, { useMemo } from "react";
-import {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-} from "react";
-import useEvents from "../hooks/utility/useEvents";
-
-const AsyncProcessContext = createContext<{
-  _subscriber: ReturnType<typeof useEvents>["subscriber"];
-  _wrappedFunctions: {
-    [k in keyof OnepercentUtility.AsyncQueue.Processes]: (
-      ...args: OnepercentUtility.AsyncQueue.Processes[k]
-    ) => Promise<void>;
-  };
-}>(null as any);
-
-type PersistedIdentifier = string;
-
-export default function AsyncProcessProvider({
-  children,
-  triggers,
-  persistence,
-}: PropsWithChildren<{
-  /** Functions that will be provided to those that use the async process */
-  triggers: {
-    [k in keyof OnepercentUtility.AsyncQueue.Processes]: (
-      ...args: OnepercentUtility.AsyncQueue.Processes[k]
-    ) => Promise<void>;
-  };
-  /** This will persist the data required for restoring the async processes when required */
-  persistence: {
-    write: <K extends keyof OnepercentUtility.AsyncQueue.Processes>(
-      k: K,
-      ...args: OnepercentUtility.AsyncQueue.Processes[K]
-    ) => PersistedIdentifier;
-    remove: (id: PersistedIdentifier) => void;
-    recover: () => [PersistedIdentifier, Promise<void>][];
-  };
-}>) {
-  const { subscriber, dispatcher } = useEvents();
-
-  const wrappedFunctions = useMemo(() => {
-    return Object.keys(triggers).reduce(
-      (r, k) => ({
-        ...r,
-        [k]: (
-          ...args: OnepercentUtility.AsyncQueue.Processes[keyof OnepercentUtility.AsyncQueue.Processes]
-        ) => {
-          let persisted = persistence.write(k as any, ...args);
-          return (triggers as any)[k as any](...args).finally(() => {
-            persistence.remove(persisted);
-            dispatcher(k as any);
-          });
-        },
-      }),
-      {} as typeof triggers
-    );
-  }, []);
-
-  useEffect(() => {
-    const recoveries = persistence.recover();
-    for (let [recoveryId, recoveryProcess] of recoveries)
-      recoveryProcess.finally(() => {
-        persistence.remove(recoveryId);
-      });
-  }, []);
-
-  return (
-    <AsyncProcessContext.Provider
-      value={{ _subscriber: subscriber, _wrappedFunctions: wrappedFunctions }}
-    >
-      {children}
-    </AsyncProcessContext.Provider>
-  );
-}
-
-export function useAsyncProcess(): {
-  [k in keyof OnepercentUtility.AsyncQueue.Processes]: (
-    ...args: OnepercentUtility.AsyncQueue.Processes[k]
-  ) => Promise<void>;
-} & {
-  on: (
-    k: keyof OnepercentUtility.AsyncQueue.Processes,
-    whatToDo: () => void
-  ) => void;
-} {
-  const { _subscriber: subscriber, _wrappedFunctions } =
-    useContext(AsyncProcessContext);
-  const subscriptions = useRef<Function[]>([]);
-
-  useEffect(
-    () => () => {
-      for (let unsubscribe of subscriptions.current) unsubscribe();
-    },
-    []
-  );
-
-  return {
-    on: (k, whatToDo) => {
-      subscriptions.current.push(subscriber(k, whatToDo));
-    },
-    ..._wrappedFunctions,
-  };
-}

package/src/context/ContextAsyncControl.tsx

@@ -1,89 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  PropsWithChildren,
-  useInsertionEffect,
-  useMemo,
-  useEffect,
-  useState,
-} from "react";
-import { FunctionMap, useRawAsynControl } from "../hooks/useAsyncControl";
-
-type CB = (...args: any[]) => void;
-class Subscriber {
-  private sharedCbs: { [id: string]: Function[] } = {};
-  private latest: {
-    [id: string]: any;
-  } = {};
-
-  register<C extends CB>(cbId: string, cb: C) {
-    if (!this.sharedCbs[cbId]) this.sharedCbs[cbId] = [];
-    this.sharedCbs[cbId].push(cb);
-    return (...args: Parameters<C>) => {
-      this.latest[cbId] = args;
-      for (let cb of this.sharedCbs[cbId]) cb(...args);
-    };
-  }
-  unregister<C extends CB>(cbId: string, cb: C) {
-    const cbIdx = this.sharedCbs[cbId].indexOf(cb);
-    this.sharedCbs[cbId].splice(cbIdx, 1);
-  }
-  current(cbId: string) {
-    return this.latest[cbId];
-  }
-}
-
-export type ContextAsyncControlContextShape = {
-  [controlId: string]: Subscriber;
-};
-export const ContextAsyncControlContext =
-  createContext<ContextAsyncControlContextShape>(null as any);
-
-export default function ContextAsyncControlProvider({
-  children,
-}: PropsWithChildren<{}>) {
-  return (
-    <ContextAsyncControlContext.Provider value={{}}>
-      {children}
-    </ContextAsyncControlContext.Provider>
-  );
-}
-
-export function useShareState<E>(controlId: string, stateId: string) {
-  const ctx = useContext(ContextAsyncControlContext);
-  const [state, setLocalState] = useState<E>(() => {
-    if (!ctx[controlId]) ctx[controlId] = new Subscriber();
-    const initAs = ctx[controlId].current(stateId)?.[0] as E;
-    return initAs;
-  });
-
-  const wrappedSetState = useMemo(() => {
-    return ctx[controlId].register(stateId, setLocalState);
-  }, []);
-
-  useInsertionEffect(
-    () => () => {
-      ctx[controlId].unregister(stateId, setLocalState);
-    },
-    []
-  );
-
-  return [state, wrappedSetState] as const;
-}
-
-export function useContextControl<E, F extends FunctionMap>(
-  controlId: string,
-  functionsToWrap: F
-) {
-  const [error, setError] = useShareState<E | Error | undefined>(
-    controlId,
-    "error"
-  );
-  const [loading, setLoading] = useShareState<boolean>(controlId, "loading");
-
-  return useRawAsynControl(
-    functionsToWrap,
-    [error, setError],
-    [loading, setLoading]
-  );
-}

package/src/context/CustomBrowserRouter.tsx

@@ -1,55 +0,0 @@
-import { Router, useHistory } from "react-router-dom";
-import { createBrowserHistory } from "history";
-import React, {
-  PropsWithChildren,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from "react";
-
-export type CustomState = {
-  internalNavigation?: boolean;
-};
-
-export default function CustomBrowserRouter({
-  children,
-  beforeRouteChange = (s) => s,
-}: PropsWithChildren<{
-  /**
-   * Allows the dev to modify the route before commiting the route change
-   *
-   * @returns The new route
-   */
-  beforeRouteChange?: (
-    newRoute: string,
-    history: ReturnType<typeof createBrowserHistory>
-  ) => string;
-}>) {
-  const { current: historyCustom } = useRef(createBrowserHistory<any>());
-  useLayoutEffect(() => {
-    function overrideFunction(name: keyof typeof historyCustom) {
-      const orig = historyCustom[name] as any;
-      (historyCustom as any)[name] = (
-        route: string,
-        state: CustomState | null,
-        ...args: any[]
-      ) => {
-        const isReplacingAnInternalNavigation =
-          name === "replace" && history.state?.state?.internalNavigation;
-        const isARouteChange = name !== "replace";
-        if ((isARouteChange || isReplacingAnInternalNavigation) && !state)
-          state = {};
-        if (state)
-          state.internalNavigation =
-            name === "replace"
-              ? history.state?.state?.internalNavigation
-              : true;
-        const modifiedRoute = beforeRouteChange(route, historyCustom);
-        return orig(modifiedRoute, state, ...args);
-      };
-    }
-    overrideFunction("push");
-    overrideFunction("replace");
-  }, [historyCustom]);
-  return <Router history={historyCustom}>{children as any}</Router>;
-}