Store the default chain key as a shareable const

Author: mondoreale

src/components/ChainSelector.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
 import { SimpleDropdown, SimpleListDropdownMenu } from '~/components/SimpleDropdown'
+import { defaultChainKey } from '~/consts'
 import { getEnvironmentConfig } from '~/getters/getEnvironmentConfig'
 import UnstyledNetworkIcon from '~/shared/components/NetworkIcon'
 import SvgIcon from '~/shared/components/SvgIcon'
@@ -49,7 +50,7 @@ const Menu = ({ chains, selectedChain, toggle }: MenuProps) => {
                             setSearchParams((prev) => {
                                 const { chain: _, ...rest } = Object.fromEntries(prev)
 
-                                return chainName === 'polygon'
+                                return chainName === defaultChainKey
                                     ? rest
                                     : { ...rest, chain: chainName }
                             })

src/consts.tsx

@@ -1,3 +1,5 @@
+import { ChainKey } from '@streamr/config'
+
 export const MaxSearchPhraseLength = 250
 
 export const address0 = '0x0000000000000000000000000000000000000000'
@@ -10,3 +12,5 @@ export const StreamGptApiUrl = process.env.STREAM_GPT_API_URL
 export const Minute = 60000
 
 export const DayInSeconds = 86400
+
+export const defaultChainKey: ChainKey = 'polygon'

src/getters/getEnvironmentConfig.ts

@@ -1,5 +1,6 @@
 import { z } from 'zod'
 import config from '~/config/environments.toml'
+import { defaultChainKey } from '~/consts'
 import { getChainConfig } from '~/utils/chains'
 
 const EnvironmentConfig = z
@@ -37,7 +38,7 @@ const EnvironmentConfig = z
 type EnvironmentConfig = z.infer<typeof EnvironmentConfig>
 
 const fallbackEnvironmentConfig: EnvironmentConfig = EnvironmentConfig.parse({
-    availableChains: ['polygon'],
+    availableChains: [defaultChainKey],
 })
 
 const parsedConfig = z

src/utils/chains.ts

@@ -3,6 +3,7 @@ import { produce } from 'immer'
 import { useMemo } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { ethereumNetworks } from '~/shared/utils/constants'
+import { defaultChainKey } from '~/consts'
 import {
     ChainConfigExtension,
     fallbackChainConfigExtension,
@@ -23,12 +24,12 @@ function getChainConfigWithFallback(chainName: string): Chain {
         return getChainConfig(chainName)
     } catch (_) {}
 
-    return getChainConfig('polygon')
+    return getChainConfig(defaultChainKey)
 }
 
 export function getCurrentChain() {
     return getChainConfigWithFallback(
-        new URLSearchParams(window.location.search).get('chain') || 'polygon',
+        new URLSearchParams(window.location.search).get('chain') || defaultChainKey,
     )
 }
 
@@ -37,7 +38,7 @@ export function getCurrentChainId() {
 }
 
 export function useCurrentChain() {
-    const chainName = useSearchParams()[0].get('chain') || 'polygon'
+    const chainName = useSearchParams()[0].get('chain') || defaultChainKey
 
     return useMemo(() => getChainConfigWithFallback(chainName), [chainName])
 }

src/utils/routes.ts

@@ -1,4 +1,5 @@
 import queryString from 'query-string'
+import { defaultChainKey } from '~/consts'
 import { getSymbolicChainName } from './chains'
 
 interface RouteOptions {
@@ -27,7 +28,7 @@ function withSuffix<P extends string>(pathname: P, options: RouteOptions = {}) {
 
     const qs = options.search
         ? queryString.stringify(
-              chain === 'polygon'
+              chain === defaultChainKey
                   ? search
                   : {
                         ...search,