Merge pull request #1977 from streamr-dev/chain-display-name

Chain's display name done right

Author: mondoreale

src/components/ChainSelector.tsx

@@ -9,18 +9,18 @@ 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 { getChainSlug, useCurrentChain } from '~/utils/chains'
+import { getChainDisplayName, getChainSlug, useCurrentChain } from '~/utils/chains'
 
 type MenuItemProps = {
-    chain: Chain
+    chainId: number
     isSelected: boolean
     onClick: () => void
 }
 
-const MenuItem = ({ chain, isSelected, onClick }: MenuItemProps) => (
+const MenuItem = ({ chainId, isSelected, onClick }: MenuItemProps) => (
     <MenuItemContainer onClick={onClick}>
-        <NetworkIcon chainId={chain.id} />
-        <div>{chain.name}</div>
+        <NetworkIcon chainId={chainId} />
+        <div>{getChainDisplayName(chainId)}</div>
         {isSelected ? <SvgIcon name="tick" /> : <div />}
     </MenuItemContainer>
 )
@@ -40,7 +40,7 @@ const Menu = ({ chains, selectedChain, toggle }: MenuProps) => {
                 {chains.map((c) => (
                     <MenuItem
                         key={c.id}
-                        chain={c}
+                        chainId={c.id}
                         isSelected={c.id === selectedChain.id}
                         onClick={() => {
                             toggle(false)
@@ -67,7 +67,7 @@ interface Props {
 }
 
 export const ChainSelector = ({ menuAlignment = 'left', ...props }: Props) => {
-    const availableChains = getEnvironmentConfig().availableChains
+    const { availableChains } = getEnvironmentConfig()
 
     const selectedChain = useCurrentChain()
 
@@ -89,7 +89,7 @@ export const ChainSelector = ({ menuAlignment = 'left', ...props }: Props) => {
             {(toggle, isOpen) => (
                 <Toggle $isOpen={isOpen} onClick={() => toggle((v) => !v)}>
                     <NetworkIcon chainId={selectedChain.id} />
-                    <div>{selectedChain.name}</div>
+                    <div>{getChainDisplayName(selectedChain.id)}</div>
                     <Caret name="caretUp" $isOpen={isOpen} />
                 </Toggle>
             )}

src/components/SalePointSelector/SalePointOption.tsx

@@ -1,17 +1,16 @@
+import { produce } from 'immer'
 import React, { ComponentProps, ReactNode, useEffect, useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 import { z } from 'zod'
-import { produce } from 'immer'
-import SvgIcon from '~/shared/components/SvgIcon'
-import { SalePoint } from '~/shared/types'
-import { COLORS } from '~/shared/utils/styled'
+import { getDataUnion, getDataUnionsOwnedByInChain } from '~/getters/du'
+import { SelectField2 } from '~/marketplace/components/SelectField2'
 import { Tick as PrestyledTick } from '~/shared/components/Checkbox'
 import NetworkIcon from '~/shared/components/NetworkIcon'
-import { formatChainName } from '~/utils'
+import SvgIcon from '~/shared/components/SvgIcon'
 import { useWalletAccount } from '~/shared/stores/wallet'
-import { SelectField2 } from '~/marketplace/components/SelectField2'
-import { getDataUnion, getDataUnionsOwnedByInChain } from '~/getters/du'
-import { getChainConfig } from '~/utils/chains'
+import { SalePoint } from '~/shared/types'
+import { COLORS } from '~/shared/utils/styled'
+import { getChainDisplayName } from '~/utils/chains'
 import { Root as SalePointTokenSelectorRoot } from './SalePointTokenSelector'
 
 export interface OptionProps {
@@ -32,10 +31,6 @@ export default function SalePointOption({
 }: SalePointOptionProps) {
     const { chainId, enabled, readOnly } = salePoint
 
-    const chain = getChainConfig(chainId)
-
-    const formattedChainName = formatChainName(chain.name)
-
     return (
         <DropdownWrap $open={enabled}>
             <DropdownToggle
@@ -56,7 +51,7 @@ export default function SalePointOption({
                     <RadioCircle $checked={enabled} $disabled={readOnly} />
                 )}
                 <ChainIcon chainId={chainId} />
-                <ToggleText>{formattedChainName}</ToggleText>
+                <ToggleText>{getChainDisplayName(chainId)}</ToggleText>
                 {multiSelect && <PlusSymbol />}
             </DropdownToggle>
             <DropdownOuter>

src/config/chains.toml

@@ -1,11 +1,28 @@
+[ethereum]
+displayName = "Ethereum Mainnet"
+
+[binance]
+coingeckoNetworkId = "binance-smart-chain"
+displayName = "BNB Smart Chain"
+
+[gnosis]
+coingeckoNetworkId = "xdai"
+displayName = "Gnosis"
+
 [dev0]
+coingeckoNetworkId = "ethereum"
 dockerHost = "localhost"
+displayName = "Dev0"
 
 [dev1]
+coingeckoNetworkId = "ethereum"
 dockerHost = "localhost"
+displayName = "Dev1"
 
 [dev2]
+coingeckoNetworkId = "ethereum"
 dataUnionJoinServerUrl = ":5555"
+displayName = "Dev2"
 dockerHost = "localhost"
 marketplaceChains = ['dev2']
 networkSubgraphUrl = ":8800/subgraphs/name/streamr-dev/network-subgraphs"
@@ -21,6 +38,7 @@ name = "streamr-dev/dataunion"
 
 [polygonAmoy]
 dataUnionJoinServerUrl = "https://join.dataunions.org/"
+displayName = "Amoy"
 marketplaceChains = ['polygonAmoy']
 slug = 'amoy'
 

src/modals/AccessPeriodModal.tsx

@@ -10,9 +10,8 @@ import Text from '~/shared/components/Ui/Text'
 import useIsMounted from '~/shared/hooks/useIsMounted'
 import { COLORS, LIGHT, MEDIUM } from '~/shared/utils/styled'
 import { TimeUnit, timeUnits } from '~/shared/utils/timeUnit'
-import { formatChainName } from '~/utils'
 import { toFloat } from '~/utils/bn'
-import { getChainConfig } from '~/utils/chains'
+import { getChainDisplayName } from '~/utils/chains'
 import { RejectionReason } from '~/utils/exceptions'
 import { convertPrice } from '~/utils/price'
 import ProjectModal, { Actions } from './ProjectModal'
@@ -202,8 +201,6 @@ export default function AccessPeriodModal({
         setSelectedUnit(unit)
     }, [unit])
 
-    const chainName = formatChainName(getChainConfig(chainId).name)
-
     const total = ((a: bigint) => (a > 0n ? a : 0n))(
         convertPrice(pricePerSecond, [length, selectedUnit]),
     )
@@ -289,7 +286,7 @@ export default function AccessPeriodModal({
                 <DetailsContainer>
                     <Chain>
                         <ChainIcon chainId={chainId} />
-                        <ChainName>{chainName}</ChainName>
+                        <ChainName>{getChainDisplayName(chainId)}</ChainName>
                     </Chain>
                     <AmountBox>
                         <AmountBar>

src/modals/ChainSelectorModal.tsx

@@ -6,9 +6,8 @@ import NetworkIcon from '~/shared/components/NetworkIcon'
 import useIsMounted from '~/shared/hooks/useIsMounted'
 import { getUsdRate } from '~/shared/utils/coingecko'
 import { MEDIUM } from '~/shared/utils/styled'
-import { formatChainName } from '~/utils'
 import { getBalance } from '~/utils/balance'
-import { getChainConfig } from '~/utils/chains'
+import { getChainDisplayName } from '~/utils/chains'
 import { RejectionReason } from '~/utils/exceptions'
 import networkPreflight from '~/utils/networkPreflight'
 import { getTokenInfo } from '~/utils/tokens'
@@ -241,9 +240,7 @@ export default function ChainSelectorModal({
                                     }
                                 >
                                     <ChainIcon chainId={chainId} />
-                                    <ChainName>
-                                        {formatChainName(getChainConfig(chainId).name)}
-                                    </ChainName>
+                                    <ChainName>{getChainDisplayName(chainId)}</ChainName>
                                     <Radio $selected={selectedChainId === chainId} />
                                 </Item>
                             </li>

src/modals/SwitchNetworkModal.tsx

@@ -2,28 +2,26 @@ import React from 'react'
 import styled from 'styled-components'
 import { Buttons } from '~/components/Buttons'
 import PngIcon from '~/shared/components/PngIcon'
-import { getChainConfig } from '~/utils/chains'
+import { getChainDisplayName, getChainKey, isKnownChainId } from '~/utils/chains'
 import { RejectionReason } from '~/utils/exceptions'
 import { Footer } from './BaseModal'
 import Modal, { ModalProps } from './Modal'
 
 interface Props extends Pick<ModalProps, 'onReject' | 'darkBackdrop'> {
-    expectedNetwork: number | string
-    actualNetwork: number | string
+    expectedChainId: number
+    actualChainId: number
     onResolve?: () => void
 }
 
-function getChainName(chainId: number | string) {
-    try {
-        return getChainConfig(chainId).name
-    } catch (_) {
-        return `#${chainId}`
-    }
+function getChainName(chainId: number) {
+    return isKnownChainId(chainId)
+        ? getChainDisplayName(getChainKey(chainId))
+        : `#${chainId}`
 }
 
 export default function SwitchNetworkModal({
-    expectedNetwork,
-    actualNetwork,
+    expectedChainId,
+    actualChainId,
     onReject,
     onResolve,
     ...props
@@ -47,9 +45,9 @@ export default function SwitchNetworkModal({
                     <PngIcon name="wallet" alt="Switch network" />
                 </IconWrap>
                 <P>
-                    Please switch to the <em>{getChainName(expectedNetwork)}</em> network
+                    Please switch to the <em>{getChainName(expectedChainId)}</em> network
                     in your Ethereum wallet. It&apos;s currently in{' '}
-                    <em>{getChainName(actualNetwork)}</em>
+                    <em>{getChainName(actualChainId)}</em>
                     &nbsp;network.
                 </P>
             </Content>

src/pages/ProjectPage/AccessManifest.tsx

@@ -13,8 +13,11 @@ import { ProjectType, SalePoint } from '~/shared/types'
 import { REGULAR, TABLET } from '~/shared/utils/styled'
 import { timeUnits } from '~/shared/utils/timeUnit'
 import { useIsAccessibleByCurrentWallet } from '~/stores/projectDraft'
-import { formatChainName } from '~/utils'
-import { getChainConfig, useCurrentChainId, useCurrentChainKey } from '~/utils/chains'
+import {
+    getChainDisplayName,
+    useCurrentChainId,
+    useCurrentChainKey,
+} from '~/utils/chains'
 import { Route as R, routeOptions } from '~/utils/routes'
 import { errorToast } from '~/utils/toast'
 
@@ -65,7 +68,7 @@ export function AccessManifest({
                             timeUnit={timeUnits.hour}
                         />
                     </strong>{' '}
-                    on <strong>{formatChainName(getChainConfig(chainId).name)}</strong>
+                    on <strong>{getChainDisplayName(chainId)}</strong>
                     {count > 0 && (
                         <>
                             {' '}

src/pages/ProjectPage/GetAccess.tsx

@@ -12,8 +12,7 @@ import {
 import { ProjectType, SalePoint } from '~/shared/types'
 import { MEDIUM } from '~/shared/utils/styled'
 import { timeUnits } from '~/shared/utils/timeUnit'
-import { formatChainName } from '~/utils'
-import { getChainConfig, useCurrentChainId } from '~/utils/chains'
+import { getChainDisplayName, useCurrentChainId } from '~/utils/chains'
 import { errorToast } from '~/utils/toast'
 
 const GetAccessContainer = styled.div`
@@ -90,7 +89,7 @@ export default function GetAccess({
                             timeUnit={timeUnits.hour}
                         />
                     </strong>{' '}
-                    on <strong>{formatChainName(getChainConfig(chainId).name)}</strong>
+                    on <strong>{getChainDisplayName(chainId)}</strong>
                     {count > 0 && (
                         <>
                             and on {count} other chain{count > 1 && 's'}

src/pages/ProjectPage/ProjectEditorPage.tsx

@@ -25,10 +25,10 @@ import useIsMounted from '~/shared/hooks/useIsMounted'
 import { ProjectType, SalePoint } from '~/shared/types'
 import { ProjectDraft } from '~/stores/projectDraft'
 import { SalePointsPayload } from '~/types/projects'
-import { formatChainName } from '~/utils'
 import {
-    getChainConfig,
-    getChainConfigExtension,
+    getChainDisplayName,
+    getChainKey,
+    getMarketplaceChainConfigs,
     useCurrentChainId,
 } from '~/utils/chains'
 import { Route as R, routeOptions } from '~/utils/routes'
@@ -59,15 +59,13 @@ export default function ProjectEditorPage() {
 
     const chainId = useCurrentChainId()
 
-    const availableChains = useMemo<Chain[]>(
-        () => getChainConfigExtension(chainId).marketplaceChains.map(getChainConfig),
+    const availableChainConfigs = useMemo<Chain[]>(
+        () => getMarketplaceChainConfigs(chainId),
         [chainId],
     )
 
-    const salePoints = availableChains
-        .map<SalePoint | undefined>(
-            ({ name: chainName }) => existingSalePoints[chainName],
-        )
+    const salePoints = availableChainConfigs
+        .map<SalePoint | undefined>(({ id }) => existingSalePoints[getChainKey(id)])
         .filter(Boolean) as SalePoint[]
 
     function onSalePointChange(value: SalePoint) {
@@ -76,16 +74,16 @@ export default function ProjectEditorPage() {
         }
 
         update((draft) => {
-            const { name: chainName } = getChainConfig(value.chainId)
+            const chainKey = getChainKey(value.chainId)
 
-            if (draft.salePoints[chainName]?.readOnly) {
+            if (draft.salePoints[chainKey]?.readOnly) {
                 /**
                  * Read-only sale point must not be updated.
                  */
                 return
             }
 
-            draft.salePoints[chainName] = value
+            draft.salePoints[chainKey] = value
 
             if (draft.type !== ProjectType.DataUnion) {
                 return
@@ -151,14 +149,15 @@ export default function ProjectEditorPage() {
                                     </Content>
                                     <Content $desktopMaxWidth={728}>
                                         {salePoints.map((salePoint) => {
-                                            const chainName = getChainConfig(
+                                            const chainKey = getChainKey(
                                                 salePoint.chainId,
-                                            ).name
+                                            )
 
-                                            const formattedChainName =
-                                                formatChainName(chainName)
+                                            const chainName = getChainDisplayName(
+                                                salePoint.chainId,
+                                            )
 
-                                            const beneficiaryErrorKey = `salePoints.${chainName}.beneficiaryAddress`
+                                            const beneficiaryErrorKey = `salePoints.${chainKey}.beneficiaryAddress`
 
                                             const beneficiaryInvalid =
                                                 !!errors[beneficiaryErrorKey]
@@ -172,7 +171,7 @@ export default function ProjectEditorPage() {
                                                 >
                                                     <h4>
                                                         Set the payment token and price on
-                                                        the {formattedChainName} chain
+                                                        the {chainName} chain
                                                     </h4>
                                                     <p>
                                                         You can set a price for others to
@@ -191,7 +190,7 @@ export default function ProjectEditorPage() {
                                                     <p>
                                                         This wallet address receives the
                                                         payments for this product on{' '}
-                                                        {formattedChainName} chain.
+                                                        {chainName} chain.
                                                     </p>
                                                     <BeneficiaryAddressEditor
                                                         invalid={beneficiaryInvalid}
@@ -325,10 +324,8 @@ export default function ProjectEditorPage() {
                                                             <>
                                                                 Set the payment token and
                                                                 price on&nbsp;the&nbsp;
-                                                                {formatChainName(
-                                                                    getChainConfig(
-                                                                        salePoint.chainId,
-                                                                    ).name,
+                                                                {getChainDisplayName(
+                                                                    salePoint.chainId,
                                                                 )}{' '}
                                                                 chain
                                                             </>