fix: scroll to top after changing chain

lifinance · May 2, 2022 · bc772ab · bc772ab
1 parent 167dd4b
commit bc772ab
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx
@@ -1,6 +1,6 @@
 import { TokenAmount } from '@lifinance/sdk';
 import { Box, List, Typography } from '@mui/material';
-import { FC, useCallback, useMemo, useRef } from 'react';
+import { FC, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useVirtual } from 'react-virtual';
@@ -50,7 +50,7 @@ export const TokenList: FC<TokenListProps> = ({
 
   const parentRef = useRef<HTMLUListElement | null>(null);
 
-  const { virtualItems, totalSize } = useVirtual({
+  const { virtualItems, totalSize, scrollToIndex } = useVirtual({
     size: chainTokens.length,
     parentRef,
     overscan: 3,
@@ -59,6 +59,10 @@ export const TokenList: FC<TokenListProps> = ({
     keyExtractor: (index) => chainTokens[index].address ?? index,
   });
 
+  useEffect(() => {
+    scrollToIndex(0);
+  }, [scrollToIndex, selectedChainId]);
+
   const handleTokenClick = useCallback(
     (tokenAddress: string) => {
       setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);