@onepercentio/one-ui 0.28.7 → 0.28.9

package/src/components/WalletConnectionWrapper/WalletConnectionWrapper.tsx

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

@@ -0,0 +1 @@
+export { default, BaseWalletConnectionWrapper } from './WalletConnectionWrapper';

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

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

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

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

@@ -0,0 +1 @@
+export { default } from './ScrollAndFocusLock';

package/src/context/AsyncProcess.tsx

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

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

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