Add Amoy support

streamr-dev · Nov 12, 2024 · 03e0989 · 03e0989
1 parent a484f69
commit 03e0989
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 55 deletions.
diff --git a/src/Store.tsx b/src/Store.tsx
@@ -17,8 +17,10 @@ import { ActiveView, ConnectionsMode, OperatorNode } from './types'
 import { useHud } from './utils'
 import { useOperatorNodesForStreamQuery } from './utils/nodes'
 import { truncate } from './utils/text'
+import { POLYGON_CHAIN_ID } from './utils/chains'
 
 interface Store {
+  chainId: number
   activeView: ActiveView
   connectionsMode: ConnectionsMode
   displaySearchPhrase: string
@@ -29,13 +31,15 @@ interface Store {
   publishers: Record<string, string | undefined>
   searchPhrase: string
   selectedNode: OperatorNode | null
+  setChainId(value: number): void
   setActiveView(value: ActiveView): void
   setConnectionsMode: Dispatch<SetStateAction<ConnectionsMode>>
   setPublishers: Dispatch<SetStateAction<Record<string, string | undefined>>>
   setSearchPhrase(value: string): void
 }
 
 const StoreContext = createContext<Store>({
+  chainId: POLYGON_CHAIN_ID,
   activeView: ActiveView.Map,
   connectionsMode: ConnectionsMode.Auto,
   displaySearchPhrase: '',
@@ -46,6 +50,7 @@ const StoreContext = createContext<Store>({
   publishers: {},
   searchPhrase: '',
   selectedNode: null,
+  setChainId: () => {},
   setActiveView: () => {},
   setConnectionsMode: () => {},
   setPublishers: () => ({}),
@@ -72,6 +77,8 @@ export function StoreProvider(props: StoreProviderProps) {
     })
   })
 
+  const [chainId, setChainId] = useState(POLYGON_CHAIN_ID)
+
   const [activeView, setActiveView] = useState<ActiveView>(ActiveView.Map)
 
   const [rawSearchPhrase, setRawSearchPhrase] = useState('')
@@ -99,10 +106,15 @@ export function StoreProvider(props: StoreProviderProps) {
     [showConnections],
   )
 
+  useEffect(() => {
+    console.log('Store: Chain ID changed:', chainId)
+  }, [chainId])
+
   return (
     <StoreContext.Provider
       {...props}
       value={{
+        chainId,
         activeView,
         connectionsMode,
         displaySearchPhrase,
@@ -113,6 +125,7 @@ export function StoreProvider(props: StoreProviderProps) {
         publishers,
         searchPhrase: rawSearchPhrase,
         selectedNode,
+        setChainId,
         setActiveView,
         setConnectionsMode,
         setPublishers,

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -41,7 +41,7 @@ function Page() {
   const { showNetworkSelector, showSearch, compact } = useHud()
 
   return (
-    <StoreProvider>
+    <>
       <PublisherDetector />
       <Map />
       <MapAutoUpdater />
@@ -56,7 +56,7 @@ function Page() {
         <Backdrop />
         <Sidebar />
       </ErrorBoundary>
-    </StoreProvider>
+    </>
   )
 }
 
@@ -126,18 +126,20 @@ export function App() {
   return (
     <BrowserRouter basename={process.env.REACT_APP_BASENAME}>
       <QueryClientProvider client={getQueryClient()}>
-        <StreamrClientProvider>
-          <MapProvider>
-            <Routes>
-              <Route element={<Page />}>
-                <Route path="/streams/:streamId/nodes/:nodeId" element={<StreamTopologyList />} />
-                <Route path="/streams/:streamId" element={<StreamTopologyList />} />
-                <Route path="/nodes/:nodeId" element={<NodeTopologyList />} />
-                <Route index element={<NodeTopologyList />} />
-              </Route>
-            </Routes>
-          </MapProvider>
-        </StreamrClientProvider>
+        <StoreProvider>
+          <StreamrClientProvider>
+            <MapProvider>
+              <Routes>
+                <Route element={<Page />}>
+                  <Route path="/streams/:streamId/nodes/:nodeId" element={<StreamTopologyList />} />
+                  <Route path="/streams/:streamId" element={<StreamTopologyList />} />
+                  <Route path="/nodes/:nodeId" element={<NodeTopologyList />} />
+                  <Route index element={<NodeTopologyList />} />
+                </Route>
+              </Routes>
+            </MapProvider>
+          </StreamrClientProvider>
+        </StoreProvider>
       </QueryClientProvider>
     </BrowserRouter>
   )

diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx
@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { SANS } from '../../utils/styled'
 import { Tooltip } from '../Tooltip'
+import { useStore } from '../../Store'
+import { POLYGON_CHAIN_ID, POLYGON_AMOY_CHAIN_ID } from '../../utils/chains'
 
 const GlobeIcon = () => (
   <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -31,6 +33,10 @@ const MainnetTheme = {
   color: '#0EAC1B',
 }
 
+const AmoyTheme = {
+  color: '#FF6B00',
+}
+
 const NetworkIndicator = styled.div`
   border-radius: 50%;
   width: 8px;
@@ -120,6 +126,8 @@ const NetworkSelectorRoot = styled.div`
 `
 
 export default function NetworkSelector() {
+  const { chainId, setChainId } = useStore()
+
   const [open, setOpen] = useState<boolean>(false)
 
   const containerRef = useRef<HTMLDivElement>(null)
@@ -166,17 +174,28 @@ export default function NetworkSelector() {
       <Tooltip value={!open ? 'Network selector' : undefined}>
         <Button type="button" onClick={toggleOpen}>
           <GlobeIcon />
-          <NetworkIndicator theme={MainnetTheme} />
+          <NetworkIndicator theme={chainId === POLYGON_AMOY_CHAIN_ID ? AmoyTheme : MainnetTheme} />
         </Button>
       </Tooltip>
       {!!open && (
         <NetworkList>
-          <NetworkItem type="button">
+          <NetworkItem type="button" onClick={() => setChainId(POLYGON_CHAIN_ID)}>
             <NetworkIndicator theme={MainnetTheme} />
             <NetworkName>Mainnet</NetworkName>
-            <div>
-              <TickIcon />
-            </div>
+            {chainId === POLYGON_CHAIN_ID && (
+              <div>
+                <TickIcon />
+              </div>
+            )}
+          </NetworkItem>
+          <NetworkItem type="button" onClick={() => setChainId(POLYGON_AMOY_CHAIN_ID)}>
+            <NetworkIndicator theme={AmoyTheme} />
+            <NetworkName>Amoy</NetworkName>
+            {chainId === POLYGON_AMOY_CHAIN_ID && (
+              <div>
+                <TickIcon />
+              </div>
+            )}
           </NetworkItem>
         </NetworkList>
       )}

diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
@@ -28,6 +28,7 @@ import { Graphs } from './Graphs'
 import { Interval } from './Graphs/Graphs'
 import { Intervals } from './Graphs/Intervals'
 import { TimeSeries } from './Graphs/TimeSeries'
+import { useStore } from '../Store'
 
 type StatProps = {
   id: string
@@ -242,12 +243,13 @@ export const Stats = styled(UnstyledStats)`
 `
 
 function useStreamStatsQuery(streamId: string) {
+  const { chainId } = useStore()
   return useQuery({
-    queryKey: ['useStreamStatsQuery', streamId],
+    queryKey: ['useStreamStatsQuery', streamId, chainId],
     queryFn: async () => {
       const {
         data: { streams },
-      } = await getIndexerClient().query<GetStreamsQuery, GetStreamsQueryVariables>({
+      } = await getIndexerClient(chainId).query<GetStreamsQuery, GetStreamsQueryVariables>({
         query: GetStreamsDocument,
         variables: {
           ids: [streamId],

diff --git a/src/components/StreamrClientProvider.tsx b/src/components/StreamrClientProvider.tsx
@@ -1,13 +1,15 @@
-import React, { useState } from 'react'
+import React, { useMemo } from 'react'
 import Provider from 'streamr-client-react'
 import { getStreamrClientConfig } from '../utils/streams'
+import { useStore } from '../Store'
 
 interface Props {
   children: React.ReactNode
 }
 
 const StreamrClientProvider = ({ children }: Props) => {
-  const [config] = useState(getStreamrClientConfig())
+  const { chainId } = useStore()
+  const config = useMemo(() => getStreamrClientConfig(chainId), [chainId])
 
   return <Provider {...config}>{children}</Provider>
 }

diff --git a/src/getters.tsx b/src/getters.tsx
@@ -13,12 +13,13 @@ import { getIndexerClient } from './utils/queries'
 interface GetOperatorNodesParams {
   ids?: string[]
   streamId?: string
+  chainId: number
 }
 
 export async function getOperatorNodes(params: GetOperatorNodesParams): Promise<OperatorNode[]> {
   const pageSize = 500
 
-  const { ids, streamId } = params
+  const { ids, streamId, chainId } = params
 
   const items: OperatorNode[] = []
 
@@ -27,7 +28,7 @@ export async function getOperatorNodes(params: GetOperatorNodesParams): Promise<
   for (;;) {
     const {
       data: { nodes },
-    } = await getIndexerClient().query<GetNodesQuery, GetNodesQueryVariables>({
+    } = await getIndexerClient(chainId).query<GetNodesQuery, GetNodesQueryVariables>({
       fetchPolicy: 'network-only',
       query: GetNodesDocument,
       variables: {
@@ -70,12 +71,13 @@ interface GetNeighborsParams {
   node?: string
   streamId?: string
   streamPartitionId?: string
+  chainId: number
 }
 
 export async function getNeighbors(params: GetNeighborsParams): Promise<Neighbour[]> {
   const pageSize = 1000
 
-  const { node, streamPartitionId } = params
+  const { node, streamPartitionId, chainId } = params
 
   const items: Neighbour[] = []
 
@@ -86,7 +88,7 @@ export async function getNeighbors(params: GetNeighborsParams): Promise<Neighbou
   for (;;) {
     const {
       data: { neighbors },
-    } = await getIndexerClient().query<GetNeighborsQuery, GetNeighborsQueryVariables>({
+    } = await getIndexerClient(chainId).query<GetNeighborsQuery, GetNeighborsQueryVariables>({
       fetchPolicy: 'network-only',
       query: GetNeighborsDocument,
       variables: {

diff --git a/src/utils/chains.ts b/src/utils/chains.ts
@@ -0,0 +1,17 @@
+import { config } from '@streamr/config'
+
+export const POLYGON_CHAIN_ID = config.polygon.id
+export const POLYGON_AMOY_CHAIN_ID = config.polygonAmoy.id
+
+const INDEXER_URLS: Record<number, string> = {
+  [POLYGON_CHAIN_ID]: 'https://stream-metrics.streamr.network/api',
+  [POLYGON_AMOY_CHAIN_ID]: 'https://stream-metrics-polygonAmoy.streamr.network/api',
+}
+
+export function getIndexerUrl(chainId: number): string {
+  const uri = INDEXER_URLS[chainId]
+  if (!uri) {
+    throw new Error(`No indexer URL configured for chain ID ${chainId}`)
+  }
+  return uri
+}
diff --git a/src/utils/neighbors.tsx b/src/utils/neighbors.tsx
@@ -1,9 +1,10 @@
 import { useQuery } from '@tanstack/react-query'
 import { MinuteMs } from '../consts'
 import { getNeighbors } from '../getters'
+import { useStore } from '../Store'
 
-function getOperatorNodeNeighborsQueryKey(nodeId: string | undefined) {
-  return ['useOperatorNodeNeighborsQuery', nodeId || '']
+function getOperatorNodeNeighborsQueryKey(nodeId: string | undefined, chainId: number) {
+  return ['useOperatorNodeNeighborsQuery', nodeId || '', chainId]
 }
 
 interface UseOperatorNodeNeighborsQueryOptions {
@@ -15,13 +16,15 @@ export function useOperatorNodeNeighborsQuery(
   options: UseOperatorNodeNeighborsQueryOptions = {},
 ) {
   const { streamId } = options
+  const { chainId } = useStore()
 
   return useQuery({
-    queryKey: getOperatorNodeNeighborsQueryKey(nodeId),
+    queryKey: getOperatorNodeNeighborsQueryKey(nodeId, chainId),
     queryFn: async () => {
       const neighbours = await getNeighbors({
         node: nodeId,
         streamId,
+        chainId,
       })
 
       if (!streamId) {

diff --git a/src/utils/nodes.ts b/src/utils/nodes.ts
@@ -1,26 +1,31 @@
 import { useIsFetching, useQuery } from '@tanstack/react-query'
 import { MinuteMs } from '../consts'
 import { getOperatorNodes } from '../getters'
+import { useStore } from '../Store'
 
-function getOperatorNodesForStreamQueryKey(streamId: string | undefined) {
-  return ['useOperatorNodesForStreamQuery', streamId || '']
+function getOperatorNodesForStreamQueryKey(streamId: string | undefined, chainId: number) {
+  return ['useOperatorNodesForStreamQuery', streamId || '', chainId]
 }
 
 export function useOperatorNodesForStreamQuery(streamId: string | undefined) {
+  const { chainId } = useStore()
+
   return useQuery({
-    queryKey: getOperatorNodesForStreamQueryKey(streamId),
+    queryKey: getOperatorNodesForStreamQueryKey(streamId, chainId),
     queryFn: () =>
       getOperatorNodes({
         streamId,
+        chainId,
       }),
     staleTime: 5 * MinuteMs,
   })
 }
 
 export function useIsFetchingOperatorNodesForStream(streamId: string | undefined) {
+  const { chainId } = useStore()
   const queryCount = useIsFetching({
     exact: true,
-    queryKey: getOperatorNodesForStreamQueryKey(streamId),
+    queryKey: getOperatorNodesForStreamQueryKey(streamId, chainId),
   })
 
   return queryCount > 0