fix: switch to using chain ids

packages/widget/src/components/SelectTokenDrawer/ChainSelect.tsx

@@ -17,7 +17,7 @@ import { Select } from '../Select';
 export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
   const { setValue } = useFormContext();
   const { supportedChains, fromChain, toChain } = useWidgetConfig();
-  const [fromChainKey, toChainKey] = useWatch({
+  const [fromChainId, toChainId] = useWatch({
     name: [SwapFormKey.FromChain, SwapFormKey.ToChain],
   });
 
@@ -28,7 +28,7 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
   };
 
   const menuItems = supportedChains.map((chain) => (
-    <MenuItem key={chain.key} value={chain.key}>
+    <MenuItem key={chain.key} value={chain.id}>
       <ListItemIcon>
         <Avatar
           src={chain.logoURI}
@@ -51,7 +51,7 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
         <Select
           MenuProps={{ elevation: 2 }}
           defaultValue={fromChain}
-          value={fromChainKey}
+          value={fromChainId}
           onChange={handleChain}
         >
           {menuItems}
@@ -64,7 +64,7 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
         <Select
           MenuProps={{ elevation: 2 }}
           defaultValue={toChain}
-          value={toChainKey}
+          value={toChainId}
           onChange={handleChain}
         >
           {menuItems}

packages/widget/src/components/SwapChainButton/SwapChainButton.tsx

@@ -12,14 +12,14 @@ export const SwapChainButton: React.FC<SwapChainButtonProps> = ({
 }) => {
   const { t } = useTranslation();
   const { isSubmitting } = useFormState();
-  const [chainKey, tokenAddress] = useWatch({
+  const [chainId, tokenAddress] = useWatch({
     name: [
       SwapFormKeyHelper.getChainKey(formType),
       SwapFormKeyHelper.getTokenKey(formType),
     ],
   });
 
-  const { chain, token } = useToken(chainKey, tokenAddress);
+  const { chain, token } = useToken(chainId, tokenAddress);
 
   return (
     <Button

packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx

@@ -18,14 +18,14 @@ export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
 }) => {
   const { t } = useTranslation();
   const { setValue } = useFormContext();
-  const [chainKey, tokenAddress] = useWatch({
+  const [chainId, tokenAddress] = useWatch({
     name: [
       SwapFormKeyHelper.getChainKey(formType),
       SwapFormKeyHelper.getTokenKey(formType),
     ],
   });
   const { token, tokenWithBalance, isLoading } = useTokenBalance(
-    chainKey,
+    chainId,
     tokenAddress,
   );
 

packages/widget/src/components/TokenList/TokenList.tsx

@@ -32,7 +32,7 @@ export const TokenList: React.FC<TokenListProps> = ({
   const { t } = useTranslation();
   const account = usePriorityAccount();
   const { setValue } = useFormContext();
-  const [selectedChain, myTokensFilter] = useWatch({
+  const [selectedChainId, myTokensFilter] = useWatch({
     name: [SwapFormKeyHelper.getChainKey(formType), SwapFormKey.MyTokensFilter],
   });
   const [fromSearchTokensFilter, toSearchTokensFilter]: string[] =
@@ -44,15 +44,15 @@ export const TokenList: React.FC<TokenListProps> = ({
     formType === 'from' ? fromSearchTokensFilter : toSearchTokensFilter;
 
   const { tokens, tokensWithBalance, isLoading, isBalancesLoading } =
-    useTokens(selectedChain);
+    useTokens(selectedChainId);
 
   const filteredChainTokens =
     myTokensFilter === TokenFilterType.My ? tokensWithBalance : tokens;
   const isFilteredChainTokensLoading =
     myTokensFilter === TokenFilterType.My ? isBalancesLoading : isLoading;
 
   const chainTokens = useMemo(() => {
-    let chainTokens = filteredChainTokens?.[selectedChain] ?? [];
+    let chainTokens = filteredChainTokens?.[selectedChainId] ?? [];
     const searchFilter = debouncedSearchTokensFilter?.toUpperCase() ?? '';
     chainTokens = isFilteredChainTokensLoading
       ? [tokenAmountMock, ...createTokenAmountSkeletons()]
@@ -72,7 +72,7 @@ export const TokenList: React.FC<TokenListProps> = ({
     debouncedSearchTokensFilter,
     filteredChainTokens,
     isFilteredChainTokensLoading,
-    selectedChain,
+    selectedChainId,
   ]);
 
   const parentRef = useRef<HTMLUListElement | null>(null);

packages/widget/src/hooks/useToken.ts

@@ -1,17 +1,17 @@
-import { ChainKey, getChainByKey } from '@lifinance/sdk';
+import { getChainById } from '@lifinance/sdk';
 import { useMemo } from 'react';
 import { useSwapPossibilities } from './useSwapPossibilities';
 
-export const useToken = (chainKey: ChainKey, tokenAddress: string) => {
+export const useToken = (chainId: number, tokenAddress: string) => {
   const { data: possibilities, isLoading } = useSwapPossibilities();
 
   const [chain, token] = useMemo(() => {
-    const chain = getChainByKey(chainKey);
+    const chain = getChainById(chainId);
     const token = possibilities?.tokens.find(
       (token) => token.address === tokenAddress && token.chainId === chain.id,
     );
     return [chain, token];
-  }, [chainKey, possibilities?.tokens, tokenAddress]);
+  }, [chainId, possibilities?.tokens, tokenAddress]);
 
   return {
     chain,

packages/widget/src/hooks/useTokenBalance.ts

@@ -1,11 +1,11 @@
-import Lifi, { ChainKey } from '@lifinance/sdk';
+import Lifi from '@lifinance/sdk';
 import { useQuery } from 'react-query';
 import { usePriorityAccount } from './connectorHooks';
 import { useToken } from './useToken';
 
-export const useTokenBalance = (chainKey: ChainKey, tokenAddress: string) => {
+export const useTokenBalance = (chainId: number, tokenAddress: string) => {
   const account = usePriorityAccount();
-  const { token } = useToken(chainKey, tokenAddress);
+  const { token } = useToken(chainId, tokenAddress);
 
   const { data: tokenWithBalance, isLoading } = useQuery(
     ['token', token?.symbol, account],

packages/widget/src/hooks/useTokens.ts

@@ -1,9 +1,4 @@
-import Lifi, {
-  ChainKey,
-  getChainById,
-  Token,
-  TokenAmount,
-} from '@lifinance/sdk';
+import Lifi, { getChainById, Token, TokenAmount } from '@lifinance/sdk';
 import { useCallback, useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { useWidgetConfig } from '../providers/WidgetProvider';
@@ -12,10 +7,10 @@ import { usePriorityAccount } from './connectorHooks';
 import { useSwapPossibilities } from './useSwapPossibilities';
 
 interface TokenAmountList {
-  [ChainKey: string]: Array<TokenAmount>;
+  [chainId: number]: Array<TokenAmount>;
 }
 
-export const useTokens = (selectedChain: ChainKey) => {
+export const useTokens = (selectedChainId: number) => {
   const { supportedChains } = useWidgetConfig();
   const account = usePriorityAccount();
   const { data: possibilities, isLoading } = useSwapPossibilities();
@@ -25,13 +20,13 @@ export const useTokens = (selectedChain: ChainKey) => {
       const tokenAmountList: TokenAmountList = tokens.reduce<TokenAmountList>(
         (tokenAmountList, token) => {
           const chain = getChainById(token.chainId);
-          if (!tokenAmountList[chain.key]) {
-            tokenAmountList[chain.key] = [];
+          if (!tokenAmountList[chain.id]) {
+            tokenAmountList[chain.id] = [];
           }
           (token as TokenAmount).amount = formatTokenAmount(
             (token as TokenAmount).amount,
           );
-          tokenAmountList[chain.key].push({ amount: '0', ...token });
+          tokenAmountList[chain.id].push({ amount: '0', ...token });
           return tokenAmountList;
         },
         {},
@@ -40,9 +35,9 @@ export const useTokens = (selectedChain: ChainKey) => {
         Array<TokenAmountList>
       >(
         (tokens, chain) => {
-          if (tokenAmountList[chain.key]) {
-            tokens[0][chain.key] = tokenAmountList[chain.key];
-            tokens[1][chain.key] = tokenAmountList[chain.key].filter(
+          if (tokenAmountList[chain.id]) {
+            tokens[0][chain.id] = tokenAmountList[chain.id];
+            tokens[1][chain.id] = tokenAmountList[chain.id].filter(
               (token) => token.amount !== '0',
             );
           }
@@ -66,20 +61,18 @@ export const useTokens = (selectedChain: ChainKey) => {
     isLoading: isBalancesLoading,
     refetch,
   } = useQuery(
-    ['tokens', selectedChain, account],
-    async ({ queryKey: [_, chainKey, account] }) => {
+    ['tokens', selectedChainId, account],
+    async ({ queryKey: [_, chainId, account] }) => {
       if (!account || !possibilities) {
         return [];
       }
       const tokenBalances = await Lifi.getTokenBalances(
-        account,
-        tokens[chainKey as ChainKey],
+        account as string,
+        tokens[chainId as number],
       );
 
       const formatedTokens = formatTokens(
-        tokenBalances.length === 0
-          ? tokens[chainKey as ChainKey]
-          : tokenBalances,
+        tokenBalances.length === 0 ? tokens[chainId as number] : tokenBalances,
       );
       return formatedTokens;
     },

packages/widget/src/providers/SwapFormProvider/types.ts

@@ -1,5 +1,3 @@
-import { ChainKey } from '@lifinance/sdk';
-
 export enum SwapFormKey {
   BridgePrioritization = 'bridgePrioritization',
   EnabledBridges = 'enabledBridges',
@@ -26,7 +24,7 @@ export type SwapFormValues = {
   [SwapFormKey.EnabledBridges]: string[];
   [SwapFormKey.EnabledExchanges]: string[];
   [SwapFormKey.FromAmount]: string;
-  [SwapFormKey.FromChain]: ChainKey;
+  [SwapFormKey.FromChain]: number;
   [SwapFormKey.FromSearchTokensFilter]: string;
   [SwapFormKey.FromToken]: string;
   [SwapFormKey.GasPrice]: string;
@@ -37,7 +35,7 @@ export type SwapFormValues = {
   [SwapFormKey.RoutePriority]: string;
   [SwapFormKey.Slippage]: string;
   [SwapFormKey.ToAmount]: string;
-  [SwapFormKey.ToChain]: ChainKey;
+  [SwapFormKey.ToChain]: number;
   [SwapFormKey.ToSearchTokensFilter]: string;
   [SwapFormKey.ToToken]: string;
 };

packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -1,4 +1,4 @@
-import { ChainKey, getChainById, getChainByKey } from '@lifinance/sdk';
+import { ChainId, ChainKey, getChainById, getChainByKey } from '@lifinance/sdk';
 import { createContext, useContext, useMemo } from 'react';
 import type { WidgetContextProps, WidgetProviderProps } from './types';
 
@@ -26,18 +26,18 @@ export const WidgetProvider: React.FC<WidgetProviderProps> = ({
         supportedChains: chainIds.map(getChainById),
         fromChain:
           typeof fromChain === 'number'
-            ? getChainById(fromChain).key
+            ? fromChain
             : typeof fromChain === 'string'
-            ? getChainByKey(fromChain as ChainKey).key
-            : ChainKey.ETH,
+            ? getChainByKey(fromChain as ChainKey).id
+            : ChainId.ETH,
         fromToken,
         fromAmount,
         toChain:
           typeof toChain === 'number'
-            ? getChainById(toChain).key
+            ? toChain
             : typeof toChain === 'string'
-            ? getChainByKey(toChain as ChainKey).key
-            : ChainKey.ETH,
+            ? getChainByKey(toChain as ChainKey).id
+            : ChainId.ETH,
         toToken,
       };
     } catch (e) {

packages/widget/src/providers/WidgetProvider/types.ts

@@ -1,12 +1,12 @@
-import { Chain, ChainKey } from '@lifinance/sdk';
+import { Chain } from '@lifinance/sdk';
 import { WidgetConfig } from '../../types';
 
 export interface WidgetContextProps {
   fromAmount?: number;
-  fromChain?: ChainKey;
+  fromChain?: number;
   fromToken?: string;
   supportedChains: Chain[];
-  toChain?: ChainKey;
+  toChain?: number;
   toToken?: string;
 }