Refactor getChainKey; add chain "slugs"

Slug is a piece to be used in urls. In our case `?chain=polygonAmoy` is gonna be `?chain=amoy`.

Author: mondoreale

src/config/chains.toml

@@ -22,6 +22,7 @@ name = "streamr-dev/dataunion"
 [polygonAmoy]
 dataUnionJoinServerUrl = "https://join.dataunions.org/"
 marketplaceChains = ['polygonAmoy']
+slug = 'amoy'
 
 [[polygonAmoy.storageNodes]]
 name = "Streamr Germany"

src/utils/chainConfigExtension.ts

@@ -32,6 +32,7 @@ const ChainConfigExtension = z.object({
         }),
     marketplaceChains: z.array(z.string()).optional().default([]),
     networkSubgraphUrl: z.string().optional(),
+    slug: z.string().optional(),
     sponsorshipPaymentToken: z.string().optional().default('DATA'),
     storageNodes: z
         .array(

src/utils/chains.ts

@@ -1,4 +1,4 @@
-import { Chain, config as configs } from '@streamr/config'
+import { Chain, ChainKey, config as configs } from '@streamr/config'
 import { produce } from 'immer'
 import { useMemo } from 'react'
 import { useSearchParams } from 'react-router-dom'
@@ -11,24 +11,64 @@ import {
 } from '~/utils/chainConfigExtension'
 import formatConfigUrl from './formatConfigUrl'
 
-function getPreferredChainName(chainName: string) {
-    if (/amoy/i.test(chainName)) {
-        return 'amoy'
+const lowerCasedChainKeyToChainKeyMap: Record<string, ChainKey | null | undefined> = {}
+
+/**
+ * @param candidate Chain key or chain slug (from config extension) or chain number. Defaults
+ * to the default chain key (currently 'polygon').
+ */
+export function getChainKey(candidate: string | number): ChainKey {
+    const key = typeof candidate === 'number' ? candidate : candidate.toLowerCase()
+
+    if (lowerCasedChainKeyToChainKeyMap[key] === null) {
+        return defaultChainKey
     }
 
-    return chainName.toLowerCase()
-}
+    if (lowerCasedChainKeyToChainKeyMap[key]) {
+        return lowerCasedChainKeyToChainKeyMap[key]
+    }
+
+    for (const chainKey in configs) {
+        if (!isChainKey(chainKey)) {
+            continue
+        }
+
+        if (typeof key === 'number') {
+            if (configs[chainKey].id === key) {
+                lowerCasedChainKeyToChainKeyMap[key] = chainKey
 
-function getChainConfigWithFallback(chainName: string): Chain {
-    try {
-        return getChainConfig(chainName)
-    } catch (_) {}
+                return chainKey
+            }
+
+            continue
+        }
+
+        if (chainKey.toLowerCase() === key) {
+            lowerCasedChainKeyToChainKeyMap[key] = chainKey
+
+            return chainKey
+        }
+
+        const slug = parsedChainConfigExtension[chainKey]?.slug?.toLowerCase()
+
+        if (key === slug) {
+            lowerCasedChainKeyToChainKeyMap[key] = chainKey
+
+            return chainKey
+        }
+    }
 
-    return getChainConfig(defaultChainKey)
+    console.warn(
+        `Could not find a proper chain key for "${candidate}". Using default key (${defaultChainKey}).`,
+    )
+
+    lowerCasedChainKeyToChainKeyMap[key] = null
+
+    return defaultChainKey
 }
 
 export function getCurrentChain() {
-    return getChainConfigWithFallback(
+    return getChainConfig(
         new URLSearchParams(window.location.search).get('chain') || defaultChainKey,
     )
 }
@@ -40,7 +80,7 @@ export function getCurrentChainId() {
 export function useCurrentChain() {
     const chainName = useSearchParams()[0].get('chain') || defaultChainKey
 
-    return useMemo(() => getChainConfigWithFallback(chainName), [chainName])
+    return useMemo(() => getChainConfig(chainName), [chainName])
 }
 
 export function useCurrentChainId() {
@@ -61,95 +101,69 @@ export function useCurrentChainFullName() {
 interface ChainEntry {
     config: Chain
     configExtension: ChainConfigExtension
-    chainKey: string
+    chainKey: ChainKey
 }
 
-const chainEntriesByIdOrName: Partial<Record<string | number, ChainEntry | null>> = {}
-
-function getChainEntry(chainIdOrName: string | number) {
-    const key =
-        typeof chainIdOrName === 'string'
-            ? getPreferredChainName(chainIdOrName)
-            : chainIdOrName
-
-    let entry = chainEntriesByIdOrName[key]
-
-    if (typeof entry === 'undefined') {
-        entry = (() => {
-            const source = Object.entries<Chain>(configs).find(([chainKey, config]) =>
-                typeof chainIdOrName === 'string'
-                    ? getPreferredChainName(chainIdOrName) ===
-                      getPreferredChainName(chainKey)
-                    : chainIdOrName === config.id,
-            )
-
-            if (!source) {
-                return null
-            }
+const chainEntriesByIdOrName: Partial<Record<ChainKey, ChainEntry | null>> = {}
 
-            const [rawChainKey, config] = source
-
-            const chainKey = getPreferredChainName(rawChainKey)
-
-            const configExtension =
-                parsedChainConfigExtension[chainKey] || fallbackChainConfigExtension
+function getChainEntry(chainKey: ChainKey): ChainEntry {
+    if (chainEntriesByIdOrName[chainKey]) {
+        return chainEntriesByIdOrName[chainKey]
+    }
 
-            const { dockerHost } = configExtension
+    const config: Chain = configs[chainKey]
 
-            const sanitizedConfig = produce(config, (draft) => {
-                draft.name = ethereumNetworks[config.id] || config.name
+    const configExtension =
+        parsedChainConfigExtension[chainKey] || fallbackChainConfigExtension
 
-                for (const rpc of draft.rpcEndpoints) {
-                    rpc.url = formatConfigUrl(rpc.url, {
-                        dockerHost,
-                    })
-                }
+    const { dockerHost } = configExtension
 
-                if (draft.entryPoints) {
-                    for (const entrypoint of draft.entryPoints) {
-                        entrypoint.websocket.host = formatConfigUrl(
-                            entrypoint.websocket.host,
-                            {
-                                dockerHost,
-                            },
-                        )
-                    }
-                }
+    const sanitizedConfig = produce(config, (draft) => {
+        draft.name = ethereumNetworks[config.id] || config.name
 
-                if (draft.theGraphUrl) {
-                    draft.theGraphUrl = formatConfigUrl(draft.theGraphUrl, { dockerHost })
-                }
+        for (const rpc of draft.rpcEndpoints) {
+            rpc.url = formatConfigUrl(rpc.url, {
+                dockerHost,
             })
+        }
 
-            return {
-                chainKey,
-                config: sanitizedConfig,
-                configExtension,
+        if (draft.entryPoints) {
+            for (const entrypoint of draft.entryPoints) {
+                entrypoint.websocket.host = formatConfigUrl(entrypoint.websocket.host, {
+                    dockerHost,
+                })
             }
-        })()
+        }
 
-        chainEntriesByIdOrName[key] = entry
-    }
+        if (draft.theGraphUrl) {
+            draft.theGraphUrl = formatConfigUrl(draft.theGraphUrl, { dockerHost })
+        }
+    })
 
-    if (!entry) {
-        throw new Error(
-            `Could not find config for "${chainIdOrName}" (${
-                typeof chainIdOrName === 'string' ? 'chain name' : 'chain id'
-            })`,
-        )
+    const entry: ChainEntry = {
+        chainKey,
+        config: sanitizedConfig,
+        configExtension,
     }
 
+    chainEntriesByIdOrName[chainKey] = entry
+
     return entry
 }
 
 export function getChainConfig(chainIdOrChainKey: string | number): Chain {
-    return getChainEntry(chainIdOrChainKey).config
+    return getChainEntry(getChainKey(chainIdOrChainKey)).config
 }
 
-export function getChainKey(chainId: number) {
-    return getChainEntry(chainId).chainKey
+export function getChainConfigExtension(chainId: number): ChainConfigExtension {
+    return getChainEntry(getChainKey(chainId)).configExtension
 }
 
-export function getChainConfigExtension(chainId: number) {
-    return getChainEntry(chainId).configExtension
+/**
+ * Checks if a given string is a `ChainKey`.
+ * @param candidate Any string.
+ * @returns `true` if the given string is config's own key.
+ */
+function isChainKey(candidate: string): candidate is ChainKey {
+    return Object.prototype.hasOwnProperty.call(configs, candidate)
 }

src/utils/routes.ts

@@ -1,5 +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'
 
 interface RouteOptions {
@@ -8,14 +10,19 @@ interface RouteOptions {
 }
 
 export function routeOptions(
-    chain: string | number,
+    chainIdOrChainKey: ChainKey | number,
     search: Record<string, any> = {},
     hash = '',
 ): RouteOptions {
+    const chain =
+        typeof chainIdOrChainKey === 'number'
+            ? getChainKey(chainIdOrChainKey)
+            : parsedChainConfigExtension[chainIdOrChainKey]?.slug || chainIdOrChainKey
+
     return {
         search: {
             ...search,
-            chain: typeof chain === 'string' ? chain : getChainKey(chain),
+            chain,
         },
         hash,
     }