diff --git a/packages/chronos/src/index.tsx b/packages/chronos/src/index.tsx index 3bf4792e..60f44ca5 100644 --- 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,7 +359,28 @@ const Listener = () => { return <>; }; +const useProvider = (props: ChronosTWAPProps) => { + const [provider, setProvider] = useState(); + + 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]); @@ -366,12 +388,12 @@ const TWAP = (props: ChronosTWAPProps) => { return ( {}} + 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 index b2ea7b2f..920264c4 100644 --- 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}