Define getChainSlug for URLs

Author: mondoreale

src/components/ChainSelector.tsx

@@ -9,7 +9,7 @@ import UnstyledNetworkIcon from '~/shared/components/NetworkIcon'
 import SvgIcon from '~/shared/components/SvgIcon'
 import { COLORS, LAPTOP } from '~/shared/utils/styled'
 import { StreamDraft } from '~/stores/streamDraft'
-import { getChainKey, useCurrentChain } from '~/utils/chains'
+import { getChainSlug, useCurrentChain } from '~/utils/chains'
 
 type MenuItemProps = {
     chain: Chain
@@ -45,14 +45,14 @@ const Menu = ({ chains, selectedChain, toggle }: MenuProps) => {
                         onClick={() => {
                             toggle(false)
 
-                            const chainKey = getChainKey(c.id)
+                            const slug = getChainSlug(c.id)
 
                             setSearchParams((prev) => {
                                 const { chain: _, ...rest } = Object.fromEntries(prev)
 
-                                return chainKey === defaultChainKey
+                                return slug === getChainSlug(defaultChainKey)
                                     ? rest
-                                    : { ...rest, chain: chainKey }
+                                    : { ...rest, chain: slug }
                             })
                         }}
                     />

src/utils/chains.ts

@@ -159,6 +159,12 @@ export function getChainConfigExtension(chainId: number): ChainConfigExtension {
     return getChainEntry(getChainKey(chainId)).configExtension
 }
 
+export function getChainSlug(chainIdOrChainKey: ChainKey | number): string {
+    const chainEntry = getChainEntry(getChainKey(chainIdOrChainKey))
+
+    return chainEntry.configExtension.slug || chainEntry.chainKey
+}
+
 /**
  * Checks if a given string is a `ChainKey`.
  * @param candidate Any string.

src/utils/routes.ts

@@ -1,8 +1,7 @@
 import { ChainKey } from '@streamr/config'
 import queryString from 'query-string'
 import { defaultChainKey } from '~/consts'
-import { parsedChainConfigExtension } from '~/utils/chainConfigExtension'
-import { getChainKey } from './chains'
+import { getChainSlug } from './chains'
 
 interface RouteOptions {
     search?: Record<'chain', string> & Record<string, any>
@@ -14,15 +13,10 @@ export function routeOptions(
     search: Record<string, any> = {},
     hash = '',
 ): RouteOptions {
-    const chain =
-        typeof chainIdOrChainKey === 'number'
-            ? getChainKey(chainIdOrChainKey)
-            : parsedChainConfigExtension[chainIdOrChainKey]?.slug || chainIdOrChainKey
-
     return {
         search: {
             ...search,
-            chain,
+            chain: getChainSlug(chainIdOrChainKey),
         },
         hash,
     }