Merge pull request #1974 from streamr-dev/front-1978-update-streamrconfig-to-the-typed-version-v550-clean-up

FRONT-1978: Update `@streamr/config` to the "typed" version (v5.5.0) + clean up

Author: mondoreale

package-lock.json

@@ -45,7 +45,7 @@
     "@metamask/providers": "^17.1.2",
     "@sambego/storybook-styles": "^1.0.0",
     "@sentry/react": "^8.34.0",
-    "@streamr/config": "^5.4.0",
+    "@streamr/config": "^5.5.0",
     "@streamr/hub-contracts": "^1.1.2",
     "@streamr/sdk": "^102.0.0",
     "@streamr/streamr-icons": "^0.1.9",

package.json

@@ -1,14 +1,15 @@
+import { Chain } from '@streamr/config'
 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'
-import { getSymbolicChainName, useCurrentChain } from '~/utils/chains'
 import { COLORS, LAPTOP } from '~/shared/utils/styled'
 import { StreamDraft } from '~/stores/streamDraft'
-import { Chain } from '~/types'
+import { getSymbolicChainName, useCurrentChain } from '~/utils/chains'
 
 type MenuItemProps = {
     chain: Chain
@@ -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/components/ChainSelector.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/consts.tsx

@@ -17,7 +17,7 @@ export default function getClientConfig(
     if (chainConfig.entryPoints && chainConfig.entryPoints.length > 0) {
         config.network = {
             controlLayer: {
-                entryPoints: chainConfig.entryPoints,
+                entryPoints: [...chainConfig.entryPoints],
             },
         }
     }

src/getters/getClientConfig.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/getters/getEnvironmentConfig.ts

@@ -1,3 +1,4 @@
+import { Chain } from '@streamr/config'
 import React, { useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled, { css } from 'styled-components'
@@ -21,18 +22,17 @@ import { deleteProject } from '~/services/projects'
 import { DetailsPageHeader } from '~/shared/components/DetailsPageHeader'
 import LoadingIndicator from '~/shared/components/LoadingIndicator'
 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,
     useCurrentChainId,
 } from '~/utils/chains'
-import { ProjectType, SalePoint } from '~/shared/types'
-import { ProjectDraft } from '~/stores/projectDraft'
-import { Chain } from '~/types'
-import { SalePointsPayload } from '~/types/projects'
-import { formatChainName } from '~/utils'
-import { toastedOperation } from '~/utils/toastedOperation'
 import { Route as R, routeOptions } from '~/utils/routes'
+import { toastedOperation } from '~/utils/toastedOperation'
 import DataUnionFee from './DataUnionFee'
 import DataUnionPayment from './DataUnionPayment'
 import EditorHero from './EditorHero'

src/pages/ProjectPage/ProjectEditorPage.tsx

@@ -1,3 +1,4 @@
+import { Chain } from '@streamr/config'
 import { z } from 'zod'
 import { address0 } from '~/consts'
 import { getProjectImageUrl } from '~/getters'
@@ -9,7 +10,6 @@ import {
     timeUnitSecondsMultiplierMap,
     timeUnits,
 } from '~/shared/utils/timeUnit'
-import { Chain } from '~/types'
 import { toBigInt } from '~/utils/bn'
 import {
     getChainConfig,

src/parsers/ProjectParser.ts

@@ -1,4 +1,3 @@
-import { config as configs } from '@streamr/config'
 import { MessageID } from '@streamr/sdk'
 import { TheGraph } from '~/shared/types'
 
@@ -42,32 +41,6 @@ export type ChainConfigKey =
     | 'minimumDelegationWei'
     | 'earlyLeaverPenaltyWei'
 
-type ContractAddressKey = typeof configs extends Record<
-    any,
-    Record<'contracts', Partial<Record<infer K, string>>>
->
-    ? K
-    : never
-
-export interface Chain {
-    name: string
-    id: number
-    theGraphUrl?: string
-    rpcEndpoints: { url: string }[]
-    contracts: Partial<Record<ContractAddressKey | (string & {}), string>>
-    entryPoints?: {
-        nodeId: string
-        websocket: {
-            host: string
-            port: number
-            tls: boolean
-        }
-    }[]
-    nativeCurrency: { symbol: string; name: string; decimals: number }
-    blockExplorerUrl?: string
-    adminPrivateKey?: string
-}
-
 export type OrderDirection = 'asc' | 'desc'
 
 export interface DataPoint {

src/types/index.ts

@@ -1,14 +1,14 @@
-import { config as configs } from '@streamr/config'
+import { Chain, config as configs } from '@streamr/config'
 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,
     parsedChainConfigExtension,
 } from '~/utils/chainConfigExtension'
-import { Chain } from '~/types'
-import { ethereumNetworks } from '~/shared/utils/constants'
 import formatConfigUrl from './formatConfigUrl'
 
 function getPreferredChainName(chainName: string) {
@@ -24,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,
     )
 }
 
@@ -38,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])
 }