Use SDK config with custom RPCs

The first one (polygon's own) is the most solid. Others are flimsy and tend to break, hit timeouts, etc.

Matthew asked if we can go with the "default" main one. Here it is.

package.json

@@ -7,6 +7,7 @@
     "@ethersproject/hdnode": "^5.7.0",
     "@ethersproject/providers": "^5.5.3",
     "@ibm/plex": "^5.1.3",
+    "@streamr/config": "^5.4.0",
     "@streamr/sdk": "^101.1.2",
     "@streamr/utils": "^101.1.2",
     "@tanstack/react-query": "^5.28.4",

src/components/StreamrClientProvider.tsx

@@ -1,12 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Provider from 'streamr-client-react'
+import { getStreamrClientConfig } from '../utils/streams'
 
 interface Props {
   children: React.ReactNode
 }
 
 const StreamrClientProvider = ({ children }: Props) => {
-  return <Provider>{children}</Provider>
+  const [config] = useState(getStreamrClientConfig())
+
+  return <Provider {...config}>{children}</Provider>
 }
 
 export default StreamrClientProvider

src/utils/streams.ts

@@ -1,4 +1,4 @@
-import { ResendOptions, StreamDefinition, StreamMessage } from '@streamr/sdk'
+import { ResendOptions, StreamDefinition, StreamMessage, StreamrClientConfig } from '@streamr/sdk'
 import { keyToArrayIndex } from '@streamr/utils'
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -13,6 +13,7 @@ import {
   GetStreamsQueryVariables,
 } from '../generated/gql/indexer'
 import { getIndexerClient } from './queries'
+import { config } from '@streamr/config'
 
 function getLimitedStreamsQueryKey(phrase: string, limit: number) {
   return ['useLimitedStreamsQuery', phrase, limit]
@@ -191,10 +192,22 @@ export function useRecentOperatorNodeMetricEntry(nodeId: string) {
   return recent
 }
 
+export function getStreamrClientConfig(): StreamrClientConfig {
+  return {
+    metrics: false,
+    contracts: {
+      ethereumNetwork: {
+        chainId: config.polygon.id,
+      },
+      rpcs: config.polygon.rpcEndpoints.slice(0, 1)
+    },
+  }
+}
+
 async function getStreamrClientInstance() {
   const StreamrClient = (await import('@streamr/sdk')).default
 
-  return new StreamrClient()
+  return new StreamrClient(getStreamrClientConfig())
 }
 
 export function useStreamFromClient(streamId: string) {