Merge pull request #1976 from streamr-dev/amoy-to-polygonAmoy

Add chain "slug"; use proper chain key for Polygon Amoy (in local configs)

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/config/chains.toml

@@ -19,15 +19,16 @@ address = "0xde1112f631486CfC759A50196853011528bC5FA0"
 chainId = 31337
 name = "streamr-dev/dataunion"
 
-[amoy]
+[polygonAmoy]
 dataUnionJoinServerUrl = "https://join.dataunions.org/"
-marketplaceChains = ['amoy']
+marketplaceChains = ['polygonAmoy']
+slug = 'amoy'
 
-[[amoy.storageNodes]]
+[[polygonAmoy.storageNodes]]
 name = "Streamr Germany"
 address = "0x31546eEA76F2B2b3C5cC06B1c93601dc35c9D916"
 
-[[amoy.dataunionGraphNames]]
+[[polygonAmoy.dataunionGraphNames]]
 chainId = 80002
 name = "samt1803/dataunion-subgraphs"
 

src/config/environments.toml

@@ -1,12 +1,12 @@
 [development]
-availableChains = ['dev2', 'polygon', 'amoy']
+availableChains = ['dev2', 'polygon', 'polygonAmoy']
 platformOriginUrl = ""
 streamrUrl = ""
 
-[amoy]
-availableChains = ['amoy', 'polygon']
+[polygonAmoy]
+availableChains = ['polygonAmoy', 'polygon']
 platformOriginUrl = "https://staging.streamr.network"
 streamrUrl = "https://staging.streamr.network"
 
 [production]
-availableChains = ['polygon', 'amoy']
+availableChains = ['polygon', 'polygonAmoy']

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
+
+                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
+        }
+    }
 
-function getChainConfigWithFallback(chainName: string): Chain {
-    try {
-        return getChainConfig(chainName)
-    } catch (_) {}
+    console.warn(
+        `Could not find a proper chain key for "${candidate}". Using default key (${defaultChainKey}).`,
+    )
+
+    lowerCasedChainKeyToChainKeyMap[key] = null
 
-    return getChainConfig(defaultChainKey)
+    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,75 @@ 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 [rawChainKey, config] = source
-
-            const chainKey = getPreferredChainName(rawChainKey)
+const chainKeyToChainEntryMap: Partial<Record<ChainKey, ChainEntry | null>> = {}
 
-            const configExtension =
-                parsedChainConfigExtension[chainKey] || fallbackChainConfigExtension
+function getChainEntry(chainKey: ChainKey): ChainEntry {
+    if (chainKeyToChainEntryMap[chainKey]) {
+        return chainKeyToChainEntryMap[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,
     }
 
+    chainKeyToChainEntryMap[chainKey] = entry
+
     return entry
 }
 
 export function getChainConfig(chainIdOrChainKey: string | number): Chain {
-    return getChainEntry(chainIdOrChainKey).config
+    return getChainEntry(getChainKey(chainIdOrChainKey)).config
+}
+
+export function getChainConfigExtension(chainId: number): ChainConfigExtension {
+    return getChainEntry(getChainKey(chainId)).configExtension
 }
 
-export function getChainKey(chainId: number) {
-    return getChainEntry(chainId).chainKey
+export function getChainSlug(chainIdOrChainKey: ChainKey | number): string {
+    const chainEntry = getChainEntry(getChainKey(chainIdOrChainKey))
+
+    return chainEntry.configExtension.slug || chainEntry.chainKey
 }
 
-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,21 +1,22 @@
+import { ChainKey } from '@streamr/config'
 import queryString from 'query-string'
 import { defaultChainKey } from '~/consts'
-import { getChainKey } from './chains'
+import { getChainSlug } from './chains'
 
 interface RouteOptions {
     search?: Record<'chain', string> & Record<string, any>
     hash?: string
 }
 
 export function routeOptions(
-    chain: string | number,
+    chainIdOrChainKey: ChainKey | number,
     search: Record<string, any> = {},
     hash = '',
 ): RouteOptions {
     return {
         search: {
             ...search,
-            chain: typeof chain === 'string' ? chain : getChainKey(chain),
+            chain: getChainSlug(chainIdOrChainKey),
         },
         hash,
     }