Merge pull request #8 from kadena-io/fix/chain-select

Fix/chain select

Author: alber70g

.env

@@ -36,22 +36,17 @@ NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_API_BASE_PATH=/
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_HOMEPAGE_CHARTS=["daily_txs"]
-# NEXT_PUBLIC_HOMEPAGE_STATS=["total_blocks","average_block_time","total_txs","wallet_addresses","gas_tracker","btc_locked"]
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 NEXT_PUBLIC_AD_BANNER_PROVIDER=none
 NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE=false
 NEXT_PUBLIC_AD_TEXT_PROVIDER=none
 NEXT_PUBLIC_NETWORK_LOGO=https://www.kadena.io/_next/static/media/logo_sm.76a6235e.svg
 NEXT_PUBLIC_NETWORK_ICON=https://www.kadena.io/_next/static/media/logo_sm.76a6235e.svg
-NEXT_PUBLIC_APP_NAME=Chainweb EVM Explorer
-NEXT_PUBLIC_APP_SHORT_NAME=EVM Explorer
+NEXT_PUBLIC_APP_NAME="Chainweb EVM Explorer"
+NEXT_PUBLIC_APP_SHORT_NAME="EVM Explorer"
 NEXT_PUBLIC_APP_VERSION=0.1.0
 
-NEXT_PUBLIC_FEATURED_BASE_NETWORK=mainnet
-# [{"title":"Mainnet","id":"mainnet","url":"http://chain-%s.evm.kadena.internal:8000/","isActive":true,"icon":"https://www.kadena.io/favicon.ico"},{"title":"Devnet","id":"devnet","url":"http://chain-%s.evm.kadena.internal:8000/","isActive":true,"icon":"https://www.kadena.io/favicon.ico"},{"title":"Testnet","id":"testnet","url":"http://chain-%s.evm.kadena.internal:8000/","isActive":false,"icon":"https://www.kadena.io/favicon.ico"}]
-NEXT_PUBLIC_FEATURED_NETWORKS=/assets/configs/networks.json
-# [{"title":"Chain 20","url":"http://chain-20.evm.kadena.internal:8000/","group":"mainnet","icon":"https://www.kadena.io/favicon.ico"},{"title":"Chain 21","url":"http://chain-21.evm-devnet.kadena.internal:8000/","group":"devnet","icon":"https://www.kadena.io/favicon.ico"},{"title":"Chain 22","url":"http://chain-22.evm-mainnet.kadena.internal:8000/","group":"mainnet","icon":"https://www.kadena.io/favicon.ico"},{"title":"Chain 23","url":"http://chain-23.evm.kadena.internal:8000/","group":"mainnet","icon":"https://www.kadena.io/favicon.ico"},{"title":"Chain 24","url":"http://chain-24.evm-testnet.kadena.internal:8000/","group":"testnet","icon":"https://www.kadena.io/favicon.ico"}]
-NEXT_PUBLIC_FEATURED_CHAINS=/assets/configs/chains.json
+NEXT_PUBLIC_FEATURED_NETWORKS=[{"title":"chain20","url":"http://chain-20.evm.kadena.internal:8008/","group":"Testnet","icon":"http://chain-20.evm.kadena.internal:8008/assets/configs/network_icon.svg"},{"title":"chain21","url":"http://chain-21.evm.kadena.internal:8008/","group":"Testnet","icon":"http://chain-21.evm.kadena.internal:8008/assets/configs/network_icon.svg"},{"title":"chain22","url":"http://chain-22.evm.kadena.internal:8008/","group":"Testnet","icon":"http://chain-22.evm.kadena.internal:8008/assets/configs/network_icon.svg"},{"title":"chain23","url":"http://chain-23.evm.kadena.internal:8008/","group":"Testnet","icon":"http://chain-23.evm.kadena.internal:8008/assets/configs/network_icon.svg"},{"title":"chain24","url":"http://chain-24.evm.kadena.internal:8008/","group":"Testnet","icon":"http://chain-24.evm.kadena.internal:8008/assets/configs/network_icon.svg"}]
 
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=123456
 NEXT_PUBLIC_NETWORK_RPC_URL=https://evm-testnet.chainweb.com/chainweb/0.0/evm-testnet/${CHAINWEB_CHAIN_ID}/evm/rpc/

configs/app/ui.ts

@@ -65,9 +65,7 @@ const UI = Object.freeze({
     hiddenLinks,
     highlightedRoutes,
     otherLinks: parseEnvJson<Array<NavItemExternal>>(getEnvValue('NEXT_PUBLIC_OTHER_LINKS')) || [],
-    baseNetwork: getEnvValue('NEXT_PUBLIC_FEATURED_BASE_NETWORK') || 'mainnet',
-    baseChain: getEnvValue('CHAINWEB_CHAIN_ID') || 20,
-    featuredNetworks: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS') ?? '/assets/configs/networks.json',
+    featuredNetworks: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS') ?? '/assets/configs/featured_networks.json',
     layout: (getEnvValue('NEXT_PUBLIC_NAVIGATION_LAYOUT') || 'vertical') as NavigationLayout,
   },
   footer: {

types/networks.ts

@@ -1,10 +1,4 @@
-import type { ArrayElement } from 'types/utils';
-
-export const NETWORK_GROUPS = [
-  'Mainnets', 'Testnets', 'Other',
-  'mainnet', 'testnet', 'devnet',
-] as const;
-export type NetworkGroup = ArrayElement<typeof NETWORK_GROUPS>;
+export type NetworkGroup = 'Mainnet' | 'Testnet' | 'Devnet' | string & {} ;
 
 export interface FeaturedNetwork {
   title: string;

ui/shared/HomeChainSelector.tsx

@@ -9,8 +9,6 @@ import type { FormEventHandler } from 'react';
 
 import type { FeaturedNetwork } from '../../types/networks';
 
-import config from 'configs/app';
-
 import { Select, CompactSelect, InlineSelect } from '../../toolkit/chakra/select';
 import type { SelectOption, SelectProps } from '../../toolkit/chakra/select';
 import { useNetworkMenu } from '../snippets/networkMenu/useNetworkMenu';
@@ -65,10 +63,7 @@ export const useHomeChainSelector = () => {
     }));
 
     if (networkItems && networkItems.length > 0 && !activeNetwork) {
-      let currentNetwork = networkItems.find((network) => currentUrl.includes(network.group));
-
-      currentNetwork ??= networkItems.find((network) => network.group === config.UI.navigation.baseNetwork) ?? networkItems[0];
-
+      const currentNetwork = networkItems.find((network) => currentUrl === network.url) ?? networkItems[0];
       setActiveNetwork({ label: capitalize(currentNetwork.title), value: currentNetwork.group });
       setNetworks(createListCollection({
         items: _networks,
@@ -90,7 +85,7 @@ export const useHomeChainSelector = () => {
 
       if (!currentChain) {
         const availableChains = _chains.filter((chain) => chain);
-        currentChain = _chains.find((chain) => chain.value.includes(`chain-${ config.UI.navigation.baseChain }`)) ?? availableChains[0];
+        currentChain = availableChains[0];
       }
 
       if (currentChain && !currentUrl.startsWith(currentChain.value)) {

ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import type { FeaturedNetwork, NetworkGroup } from 'types/networks';
 
-import config from 'configs/app';
 import { PopoverBody, PopoverContent } from 'toolkit/chakra/popover';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tabs';
@@ -16,7 +15,7 @@ interface Props {
 }
 
 const NetworkMenuPopup = ({ items, tabs }: Props) => {
-  const [ defaultTab ] = tabs ?? [ config.UI.navigation.baseNetwork as NetworkGroup ];
+  const [ defaultTab ] = tabs ?? [ ];
   const selectedNetwork = items?.find(({ url }) => url === window.location.href) ?? items?.[0];
   const selectedTab = tabs.find((tab) => selectedNetwork?.group === tab) ?? defaultTab;
 

ui/snippets/networkMenu/NetworkMenuContentMobile.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 
 import type { NetworkGroup, FeaturedNetwork } from 'types/networks';
 
-import config from 'configs/app';
 import type { SelectOption } from 'toolkit/chakra/select';
 import { Select } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -16,7 +15,7 @@ interface Props {
 }
 
 const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
-  const [ defaultTab ] = tabs ?? [ config.UI.navigation.baseNetwork ];
+  const [ defaultTab ] = tabs ?? [ ];
   const selectedNetwork = items?.find(({ url }) => url === window.location.href) ?? items?.[0];
   const [ selectedTab, setSelectedTab ] = React.useState<NetworkGroup>(defaultTab);
 

ui/snippets/networkMenu/useNetworkMenu.tsx

@@ -2,7 +2,6 @@ import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import type { FeaturedNetwork } from 'types/networks';
-import { NETWORK_GROUPS } from 'types/networks';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
@@ -28,6 +27,10 @@ export function useNetworkMenu() {
     onOpenChange(details);
   }, [ onOpenChange ]);
 
+  const networkGroups = React.useMemo(
+    () => data?.map(({ group }) => group).filter((group, index, self) => self.indexOf(group) === index) || []
+    , [ data ]);
+
   return React.useMemo(() => ({
     open,
     onClose,
@@ -36,6 +39,6 @@ export function useNetworkMenu() {
     onOpenChange: handleOpenChange,
     isPending,
     data,
-    availableTabs: NETWORK_GROUPS.filter((tab) => data?.some(({ group }) => group === tab)),
-  }), [ open, onClose, onOpen, onToggle, handleOpenChange, data, isPending ]);
+    availableTabs: networkGroups,
+  }), [ open, onClose, onOpen, onToggle, handleOpenChange, data, isPending, networkGroups ]);
 }