feat: Sort chains based on user relevance (#6915)

* sort chains based on user relevance

* test.each

* remove unnecessary comment and add chainId to test name

src/components/NavBar/ChainSelector.tsx

@@ -7,7 +7,13 @@ import { getConnection } from 'connection'
 import { ConnectionType } from 'connection/types'
 import { WalletConnectV2 } from 'connection/WalletConnectV2'
 import { getChainInfo } from 'constants/chainInfo'
-import { L1_CHAIN_IDS, L2_CHAIN_IDS, TESTNET_CHAIN_IDS, UniWalletSupportedChains } from 'constants/chains'
+import {
+  getChainPriority,
+  L1_CHAIN_IDS,
+  L2_CHAIN_IDS,
+  TESTNET_CHAIN_IDS,
+  UniWalletSupportedChains,
+} from 'constants/chains'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useSelectChain from 'hooks/useSelectChain'
 import useSyncChainQuery from 'hooks/useSyncChainQuery'
@@ -59,17 +65,19 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
   const [supportedChains, unsupportedChains] = useMemo(() => {
     const { supported, unsupported } = NETWORK_SELECTOR_CHAINS.filter(
       (chain: number) => showTestnets || !TESTNET_CHAIN_IDS.includes(chain)
-    ).reduce(
-      (acc, chain) => {
-        if (walletSupportsChain.includes(chain)) {
-          acc.supported.push(chain)
-        } else {
-          acc.unsupported.push(chain)
-        }
-        return acc
-      },
-      { supported: [], unsupported: [] } as Record<string, ChainId[]>
     )
+      .sort((a, b) => getChainPriority(a) - getChainPriority(b))
+      .reduce(
+        (acc, chain) => {
+          if (walletSupportsChain.includes(chain)) {
+            acc.supported.push(chain)
+          } else {
+            acc.unsupported.push(chain)
+          }
+          return acc
+        },
+        { supported: [], unsupported: [] } as Record<string, ChainId[]>
+      )
     return [supported, unsupported]
   }, [showTestnets, walletSupportsChain])
 

src/constants/chains.test.ts

+import { ChainId } from '@uniswap/sdk-core'
+
+import { getChainPriority } from './chains'
+
+// Define an array of test cases with chainId and expected priority
+const chainPriorityTestCases: [ChainId, number][] = [
+  [ChainId.MAINNET, 0],
+  [ChainId.GOERLI, 0],
+  [ChainId.SEPOLIA, 0],
+  [ChainId.POLYGON, 1],
+  [ChainId.POLYGON_MUMBAI, 1],
+  [ChainId.ARBITRUM_ONE, 2],
+  [ChainId.ARBITRUM_GOERLI, 2],
+  [ChainId.OPTIMISM, 3],
+  [ChainId.OPTIMISM_GOERLI, 3],
+  [ChainId.BNB, 4],
+  [ChainId.AVALANCHE, 5],
+  [ChainId.CELO, 6],
+  [ChainId.CELO_ALFAJORES, 6],
+]
+
+test.each(chainPriorityTestCases)(
+  'getChainPriority returns expected priority for a given ChainId %O',
+  (chainId: ChainId, expectedPriority: number) => {
+    const priority = getChainPriority(chainId)
+    expect(priority).toBe(expectedPriority)
+  }
+)

src/constants/chains.ts

@@ -91,6 +91,38 @@ export function isPolygonChain(chainId: number): chainId is ChainId.POLYGON | Ch
   return chainId === ChainId.POLYGON || chainId === ChainId.POLYGON_MUMBAI
 }
 
+/**
+ * Get the priority of a chainId based on its relevance to the user.
+ * @param {ChainId} chainId - The chainId to determine the priority for.
+ * @returns {number} The priority of the chainId, the lower the priority, the earlier it should be displayed, with base of MAINNET=0.
+ */
+export function getChainPriority(chainId: ChainId): number {
+  switch (chainId) {
+    case ChainId.MAINNET:
+    case ChainId.GOERLI:
+    case ChainId.SEPOLIA:
+      return 0
+    case ChainId.POLYGON:
+    case ChainId.POLYGON_MUMBAI:
+      return 1
+    case ChainId.ARBITRUM_ONE:
+    case ChainId.ARBITRUM_GOERLI:
+      return 2
+    case ChainId.OPTIMISM:
+    case ChainId.OPTIMISM_GOERLI:
+      return 3
+    case ChainId.BNB:
+      return 4
+    case ChainId.AVALANCHE:
+      return 5
+    case ChainId.CELO:
+    case ChainId.CELO_ALFAJORES:
+      return 6
+    default:
+      return 7
+  }
+}
+
 export function isUniswapXSupportedChain(chainId: number) {
   return chainId === ChainId.MAINNET
 }

src/graphql/data/util.tsx

@@ -180,8 +180,8 @@ export function logSentryErrorForUnsupportedChain({
 export const BACKEND_SUPPORTED_CHAINS = [
   Chain.Ethereum,
   Chain.Polygon,
-  Chain.Optimism,
   Chain.Arbitrum,
+  Chain.Optimism,
   Chain.Celo,
 ] as const
 export const BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS = [ChainId.BNB, ChainId.AVALANCHE] as const