fix: chain can't be selected if it is tenth on the list (#243)

lifinance · May 8, 2024 · bc75cba · bc75cba
1 parent 646d9ba
commit bc75cba
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 37 deletions.
diff --git a/packages/widget/src/components/ChainSelect/ChainSelect.tsx b/packages/widget/src/components/ChainSelect/ChainSelect.tsx
@@ -3,7 +3,10 @@ import type { EVMChain } from '@lifi/sdk';
 import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { maxChainToOrder } from '../../stores/chains/createChainOrderStore.js';
+import {
+  maxChainsToOrder,
+  maxChainsToShow,
+} from '../../stores/chains/createChainOrderStore.js';
 import type { FormTypeProps } from '../../stores/form/types.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
@@ -39,17 +42,19 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
   };
 
   // We check if we can accommodate all the chains on the grid
-  // If there are more chains we slice the last one to show the number of hidden chains
+  // If there are more than 10 chains we show the number of hidden chains as the last one tile
   const chainsToHide =
-    chains?.length === maxChainToOrder
+    chains?.length === maxChainsToShow
       ? 0
-      : (chains?.length ?? 0) - (maxChainToOrder - 1);
-  const sliceValue = chainsToHide > 0 ? -1 : maxChainToOrder;
+      : (chains?.length ?? 0) - maxChainsToOrder;
+
+  // When there is less than 10 chains we don't care about the order
+  const chainsToShow = chainsToHide > 0 ? getChains() : chains;
 
   return (
     <ChainContainer>
       {isLoading
-        ? Array.from({ length: maxChainToOrder }).map((_, index) => (
+        ? Array.from({ length: maxChainsToOrder }).map((_, index) => (
             <Skeleton
               key={index}
               variant="rectangular"
@@ -58,34 +63,32 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
               sx={{ borderRadius: 1 }}
             />
           ))
-        : getChains()
-            .slice(0, sliceValue)
-            .map((chain: EVMChain) => (
-              <Tooltip
-                key={chain.id}
-                title={chain.name}
-                placement="top"
-                enterDelay={400}
-                enterNextDelay={100}
-                disableInteractive
-                arrow
+        : chainsToShow?.map((chain: EVMChain) => (
+            <Tooltip
+              key={chain.id}
+              title={chain.name}
+              placement="top"
+              enterDelay={400}
+              enterNextDelay={100}
+              disableInteractive
+              arrow
+            >
+              <ChainCard
+                component="button"
+                onClick={() => setCurrentChain(chain.id)}
+                type={chainId === chain.id ? 'selected' : 'default'}
+                selectionColor="primary"
               >
-                <ChainCard
-                  component="button"
-                  onClick={() => setCurrentChain(chain.id)}
-                  type={chainId === chain.id ? 'selected' : 'default'}
-                  selectionColor="primary"
+                <Avatar
+                  src={chain.logoURI}
+                  alt={chain.key}
+                  sx={{ width: 40, height: 40 }}
                 >
-                  <Avatar
-                    src={chain.logoURI}
-                    alt={chain.key}
-                    sx={{ width: 40, height: 40 }}
-                  >
-                    {chain.name[0]}
-                  </Avatar>
-                </ChainCard>
-              </Tooltip>
-            ))}
+                  {chain.name[0]}
+                </Avatar>
+              </ChainCard>
+            </Tooltip>
+          ))}
       {chainsToHide > 0 ? (
         <ChainCard component="button" onClick={showAllChains}>
           <Box

diff --git a/packages/widget/src/stores/chains/createChainOrderStore.ts b/packages/widget/src/stores/chains/createChainOrderStore.ts
@@ -4,7 +4,8 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import type { PersistStoreProps } from '../types.js';
 import type { ChainOrderState } from './types.js';
 
-export const maxChainToOrder = 10;
+export const maxChainsToOrder = 9;
+export const maxChainsToShow = 10;
 const defaultChainState = {
   from: [],
   to: [],
@@ -24,7 +25,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
             const chainsToAdd = chainIds.filter(
               (chainId) => !chainOrder.includes(chainId),
             );
-            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+            if (chainOrder.length === maxChainsToOrder || !chainsToAdd.length) {
               return {
                 availableChains: {
                   ...state.availableChains,
@@ -36,7 +37,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
                 },
               };
             }
-            const chainsToAddLength = maxChainToOrder - chainOrder.length;
+            const chainsToAddLength = maxChainsToOrder - chainOrder.length;
             for (let index = 0; index < chainsToAddLength; index++) {
               chainOrder.push(chainsToAdd[index]);
             }
@@ -64,7 +65,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
           set((state: ChainOrderState) => {
             const chainOrder = state.chainOrder[type].slice();
             chainOrder.unshift(chainId);
-            if (chainOrder.length > maxChainToOrder) {
+            if (chainOrder.length > maxChainsToOrder) {
               chainOrder.pop();
             }
             return {
@@ -78,7 +79,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-chains-order`,
-        version: 1,
+        version: 2,
         partialize: (state) => ({ chainOrder: state.chainOrder }),
       },
     ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,