feat: display chains error handling

src/app/sections/DisplayChainsSetting.tsx

@@ -14,9 +14,9 @@ const DisplayChainsSetting = () => {
 
   const onChange = (value: string) => {
     if (isTerraChain(value)) return
-    const newDisplayChains = displayChains.includes(value)
-      ? displayChains.filter((chainID) => chainID !== value)
-      : [...displayChains, value]
+    const newDisplayChains = displayChains?.includes(value)
+      ? displayChains?.filter((chainID) => chainID !== value)
+      : [...(displayChains || []), value]
     changeDisplayChains(newDisplayChains)
     if (value === selectedDisplayChain) {
       changeSelectedDisplayChain(undefined)
@@ -42,7 +42,7 @@ const DisplayChainsSetting = () => {
             )
             .map((chainID) => ({
               value: chainID,
-              selected: displayChains.includes(chainID),
+              selected: displayChains?.includes(chainID),
               label: network[chainID].name,
               icon: network[chainID].icon,
             }))

src/components/layout/ChainFilter.tsx

@@ -51,7 +51,7 @@ const ChainFilter = ({
     () =>
       sortedDisplayChains
         .map((id) => network[id])
-        .filter((n) => displayChains.includes(n?.chainID)),
+        .filter((n) => displayChains?.includes(n?.chainID)),
     [network, sortedDisplayChains, displayChains]
   )
 

src/components/layout/OtherChainsButton.tsx

@@ -21,7 +21,7 @@ const OtherChainsButton = ({ list, handleSetChain }: Props) => {
   const closePopover = () => setKey((key) => key + 1)
 
   const onClick = (chainID: string) => {
-    if (displayChains.includes(chainID)) {
+    if (displayChains?.includes(chainID)) {
       changeSelectedDisplayChain(chainID)
       handleSetChain(chainID)
     } else {

src/components/layout/SimpleChainList.tsx

@@ -12,9 +12,10 @@ const cx = classNames.bind(styles)
 const SimpleChainList = ({ list, onClick }: Props) => {
   const { displayChains } = useDisplayChains()
   const sortedList = list.sort((a, b) =>
-    displayChains.includes(a.chainID) && !displayChains.includes(b.chainID)
+    displayChains?.includes(a.chainID) && !displayChains?.includes(b.chainID)
       ? -1
-      : !displayChains.includes(a.chainID) && displayChains.includes(b.chainID)
+      : !displayChains?.includes(a.chainID) &&
+        displayChains?.includes(b.chainID)
       ? 1
       : 0
   )
@@ -25,7 +26,7 @@ const SimpleChainList = ({ list, onClick }: Props) => {
         <button
           key={chainID}
           className={cx(styles.button, {
-            [styles.active]: displayChains.includes(chainID),
+            [styles.active]: displayChains?.includes(chainID),
           })}
           onClick={() => onClick(chainID)}
         >

src/utils/chain.ts

@@ -45,7 +45,7 @@ export const useSortedDisplayChains = () => {
   const chains = useChainsByAssetValue()
   const { displayChains } = useDisplayChains()
   const sorted = chains
-    .filter((c) => displayChains.includes(c.chain))
+    .filter((c) => displayChains?.includes(c.chain))
     .filter((c) => isTerraChain(c.chain))
     .concat(
       chains.filter((c) => isOsmosisChain(c.chain)),

src/utils/localStorage/hooks.ts

@@ -60,15 +60,18 @@ export const useDisplayChains = () => {
   const [displayChains, setDisplayChains] = useRecoilState(displayChainsState)
   const changeDisplayChains = useCallback(
     (newChains: string[]) => {
-      const newDisplayChains = { ...displayChains, [networkName]: newChains }
+      const newDisplayChains = {
+        ...(displayChains || []),
+        [networkName]: newChains,
+      }
       setLocalSetting(SettingKey.DisplayChains, newDisplayChains)
       setDisplayChains(newDisplayChains)
     },
     [setDisplayChains, networkName, displayChains]
   )
   return {
     all: displayChains,
-    displayChains: displayChains[networkName].filter((c) => c !== ""),
+    displayChains: displayChains[networkName]?.filter((c) => c !== ""),
     changeDisplayChains,
   }
 }