chronos provider changes

orbs-network · Jul 24, 2023 · 3dc4dc6 · 3dc4dc6
1 parent 80518e9
commit 3dc4dc6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/packages/chronos/src/index.tsx b/packages/chronos/src/index.tsx
@@ -81,6 +81,7 @@ interface ChronosTWAPProps extends TWAPProps {
   dappTokens: any[];
   connect?: () => void;
   swapAnimationStart: boolean;
+  connector?: { getProvider: () => any };
 }
 
 const uiPreferences: TwapContextUIPreferences = {
@@ -358,20 +359,41 @@ const Listener = () => {
   return <></>;
 };
 
+const useProvider = (props: ChronosTWAPProps) => {
+  const [provider, setProvider] = useState<any>();
+
+  const chainId = props.connectedChainId;
+  const account = props.account;
+
+  const _getProvider = useCallback(async () => {
+    if (!props.connector) return;
+    const provider = await props.connector.getProvider();
+    setProvider(provider);
+  }, [account, chainId, setProvider, props.connector]);
+
+  useEffect(() => {
+    setProvider(undefined);
+    _getProvider();
+  }, [account, chainId, _getProvider, setProvider]);
+
+  return provider;
+};
+
 const TWAP = (props: ChronosTWAPProps) => {
+  const provider = useProvider(props);
   const theme = useMemo(() => {
     return props.isDarkTheme ? darkTheme : lightTheme;
   }, [props.isDarkTheme]);
 
   return (
     <Box className="adapter-wrapper">
       <TwapAdapter
-        connect={props.connect ? props.connect : () => {}}
+        connect={props.connect}
         config={config}
         maxFeePerGas={props.maxFeePerGas}
         priorityFeePerGas={props.priorityFeePerGas}
         translations={translations as Translations}
-        provider={props.provider}
+        provider={provider}
         account={props.account}
         dappTokens={props.dappTokens}
         parseToken={(rawToken) => parseToken(props.getTokenLogoURL, rawToken)}

diff --git a/packages/dapp-example/src/Chronos.tsx b/packages/dapp-example/src/Chronos.tsx
@@ -84,6 +84,10 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
   const { data: dappTokens = [] } = useDappTokens();
   const { isDarkTheme } = useTheme();
 
+  const connector = {
+    getProvider: () => library,
+  };
+
   const getTokenLogoURL = useCallback(
     (symbol: string) => {
       return dappTokens.find((t) => t.symbol === symbol)?.logoURI;
@@ -99,7 +103,7 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
       dstToken={erc20sData.arb.USDC.address}
       dappTokens={dappTokens}
       TokenSelectModal={TokenSelectModal}
-      provider={library}
+      connector={connector}
       getTokenLogoURL={getTokenLogoURL}
       limit={limit}
       isDarkTheme={isDarkTheme}