feat: use new subnet endpoint fields (#31)

.github/workflows/docker_build_push.yml

@@ -58,7 +58,8 @@ jobs:
           VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS=${{ vars.SUBNET_REGISTRATOR_CONTRACT_ADDRESS }}
           VITE_ERC20_MESSAGING_CONTRACT_ADDRESS=${{ vars.ERC20_MESSAGING_CONTRACT_ADDRESS }}
           VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS=${{ vars.TOPOS_CORE_PROXY_CONTRACT_ADDRESS }}
-          VITE_TOPOS_SUBNET_ENDPOINT=${{ vars.TOPOS_SUBNET_ENDPOINT }}
+          VITE_TOPOS_SUBNET_ENDPOINT_WS=${{ vars.TOPOS_SUBNET_ENDPOINT_WS }}
+          VITE_TOPOS_SUBNET_ENDPOINT_HTTP=${{ vars.TOPOS_SUBNET_ENDPOINT_HTTP }}
           VITE_ELASTIC_APM_ENDPOINT=${{ secrets.ELASTIC_APM_ENDPOINT }}
           VITE_TRACING_SERVICE_NAME=${{ vars.TRACING_SERVICE_NAME }}
           VITE_TRACING_SERVICE_VERSION=${{ vars.TRACING_SERVICE_VERSION }}

Dockerfile

@@ -4,7 +4,8 @@ ARG VITE_EXECUTOR_SERVICE_ENDPOINT
 ARG VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS
 ARG VITE_ERC20_MESSAGING_CONTRACT_ADDRESS
 ARG VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS
-ARG VITE_TOPOS_SUBNET_ENDPOINT
+ARG VITE_TOPOS_SUBNET_ENDPOINT_WS
+ARG VITE_TOPOS_SUBNET_ENDPOINT_HTTP
 ARG VITE_ELASTIC_APM_ENDPOINT
 ARG VITE_TRACING_SERVICE_NAME
 ARG VITE_TRACING_SERVICE_VERSION

Dockerfile.ci

@@ -4,7 +4,8 @@ ARG VITE_EXECUTOR_SERVICE_ENDPOINT
 ARG VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS
 ARG VITE_ERC20_MESSAGING_CONTRACT_ADDRESS
 ARG VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS
-ARG VITE_TOPOS_SUBNET_ENDPOINT
+ARG VITE_TOPOS_SUBNET_ENDPOINT_WS
+ARG VITE_TOPOS_SUBNET_ENDPOINT_HTTP
 ARG VITE_ELASTIC_APM_ENDPOINT
 ARG VITE_TRACING_SERVICE_NAME
 ARG VITE_TRACING_SERVICE_VERSION

docker-compose.ci.yml

@@ -10,7 +10,8 @@ services:
         - VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS=${VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS}
         - VITE_ERC20_MESSAGING_CONTRACT_ADDRESS=${VITE_ERC20_MESSAGING_CONTRACT_ADDRESS}
         - VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS=${VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS}
-        - VITE_TOPOS_SUBNET_ENDPOINT=${VITE_TOPOS_SUBNET_ENDPOINT}
+        - VITE_TOPOS_SUBNET_ENDPOINT_WS=${VITE_TOPOS_SUBNET_ENDPOINT_WS}
+        - VITE_TOPOS_SUBNET_ENDPOINT_HTTP=${VITE_TOPOS_SUBNET_ENDPOINT_HTTP}
         - VITE_ELASTIC_APM_ENDPOINT=${VITE_ELASTIC_APM_ENDPOINT}
         - VITE_TRACING_SERVICE_NAME=${VITE_TRACING_SERVICE_NAME}
         - VITE_TRACING_SERVICE_VERSION=${VITE_TRACING_SERVICE_VERSION}

packages/frontend/.env.example

@@ -2,7 +2,8 @@ VITE_ERC20_MESSAGING_CONTRACT_ADDRESS=
 VITE_EXECUTOR_SERVICE_ENDPOINT=
 VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS=
 VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS=
-VITE_TOPOS_SUBNET_ENDPOINT=
+VITE_TOPOS_SUBNET_ENDPOINT_HTTP=
+VITE_TOPOS_SUBNET_ENDPOINT_WS=
 VITE_ELASTIC_APM_ENDPOINT=
 VITE_TRACING_SERVICE_NAME=
 VITE_TRACING_SERVICE_VERSION=

packages/frontend/package.json

@@ -23,7 +23,7 @@
     "@ethereumjs/trie": "^5.0.4",
     "@ethereumjs/util": "^8.0.5",
     "@ethersproject/abstract-provider": "^5.7.0",
-    "@topos-protocol/topos-smart-contracts": "^1.2.2",
+    "@topos-protocol/topos-smart-contracts": "^2.0.0",
     "@types/event-source-polyfill": "^1.0.1",
     "antd": "^5.4.0",
     "axios": "^1.0.0",

packages/frontend/src/App.tsx

@@ -12,7 +12,6 @@ import useRegisteredSubnets from './hooks/useRegisteredSubnets'
 import useTheme from './hooks/useTheme'
 import { toposCoreContract } from './contracts'
 import { SubnetWithId } from './types'
-import { sanitizeURLProtocol } from './utils'
 
 const { Content: _Content } = _Layout
 
@@ -43,12 +42,15 @@ const App = () => {
     function onRegisteredSubnetsChange() {
       async function _() {
         if (registeredSubnets) {
-          const toposSubnetEndpoint = import.meta.env.VITE_TOPOS_SUBNET_ENDPOINT
+          const toposSubnetEndpointHttp = import.meta.env
+            .VITE_TOPOS_SUBNET_ENDPOINT_HTTP
+          const toposSubnetEndpointWs = import.meta.env
+            .VITE_TOPOS_SUBNET_ENDPOINT_WS
           let toposSubnet: SubnetWithId | undefined
 
-          if (toposSubnetEndpoint) {
+          if (toposSubnetEndpointHttp && toposSubnetEndpointWs) {
             const provider = new ethers.providers.JsonRpcProvider(
-              sanitizeURLProtocol('http', toposSubnetEndpoint)
+              toposSubnetEndpointHttp
             )
             const network = await provider.getNetwork()
             const chainId = network.chainId
@@ -58,7 +60,8 @@ const App = () => {
 
             toposSubnet = {
               chainId: BigNumber.from(chainId.toString()),
-              endpoint: toposSubnetEndpoint,
+              endpointHttp: toposSubnetEndpointHttp,
+              endpointWs: toposSubnetEndpointWs,
               currencySymbol: 'TOPOS',
               id: subnetId,
               logoURL: '/logo.svg',

packages/frontend/src/components/SubnetSelect.test.tsx

@@ -10,7 +10,8 @@ const subnetsMock: SubnetWithId[] = [
   {
     chainId: BigNumber.from(1),
     currencySymbol: 'TST',
-    endpoint: '',
+    endpointHttp: '',
+    endpointWs: '',
     id: '',
     logoURL: '',
     name: 'subnetMock',

packages/frontend/src/hooks/useCheckTokenOnReceivingSubnet.test.ts

@@ -18,7 +18,8 @@ const subnetsMock: SubnetWithId[] = [
     chainId: BigNumber.from(1),
     currencySymbol: '',
     id: 'id',
-    endpoint: 'endpoint',
+    endpointHttp: 'http://endpoint',
+    endpointWs: 'ws://endpoint',
     logoURL: '',
     name: '',
   },
@@ -59,9 +60,7 @@ describe('useCheckTokenOnReceivingSubnet', () => {
         .checkTokenOnSubnet(tokenMock, subnetsMock[0].id)
         .then(() => {
           expect(result.current.loading).toBe(true)
-          expect(providerSpy).toHaveBeenCalledWith(
-            `ws://${subnetsMock[0].endpoint}/ws`
-          )
+          expect(providerSpy).toHaveBeenCalledWith(subnetsMock[0].endpointWs)
 
           expect(contractSpy).toHaveBeenCalled()
           expect(getCodeMock).toHaveBeenCalledWith(contractMock.address)

packages/frontend/src/hooks/useCheckTokenOnReceivingSubnet.ts

@@ -1,11 +1,10 @@
-import { ethers } from 'ethers'
+import { providers } from 'ethers'
 import { useCallback, useContext, useState } from 'react'
 
 import { ErrorsContext } from '../contexts/errors'
 import { SubnetsContext } from '../contexts/subnets'
 import { erc20MessagingContract } from '../contracts'
 import { Token } from '../types'
-import { sanitizeURLProtocol } from '../utils'
 
 export default function useCheckTokenOnSubnet() {
   const { setErrors } = useContext(ErrorsContext)
@@ -19,33 +18,35 @@ export default function useCheckTokenOnSubnet() {
 
         const subnet = subnets?.find((s) => s.id === subnetId)
 
-        const subnetProvider = subnet?.endpoint
-          ? new ethers.providers.WebSocketProvider(
-              sanitizeURLProtocol('ws', `${subnet?.endpoint}/ws`)
-            )
-          : null
-
-        if (subnet && subnetProvider && token) {
-          if (
-            (await subnetProvider.getCode(erc20MessagingContract.address)) ===
-            '0x'
-          ) {
-            setLoading(false)
-            return Promise.reject(
-              `ToposCore contract could not be found on ${subnet.name}!`
-            )
-          } else {
-            const contract = erc20MessagingContract.connect(subnetProvider)
-
-            const onChainToken = await contract
-              .getTokenByAddress(token.addr)
-              .finally(() => {
-                setLoading(false)
-              })
-
-            if (!onChainToken.symbol) {
+        if (subnet && token) {
+          const endpoint = subnet?.endpointWs || subnet?.endpointHttp
+          const url = new URL(endpoint)
+          const subnetProvider = url.protocol.startsWith('ws')
+            ? new providers.WebSocketProvider(endpoint)
+            : new providers.JsonRpcProvider(endpoint)
+
+          if (subnetProvider) {
+            if (
+              (await subnetProvider.getCode(erc20MessagingContract.address)) ===
+              '0x'
+            ) {
               setLoading(false)
-              reject(`${token.symbol} is not registered on ${subnet.name}!`)
+              return Promise.reject(
+                `ToposCore contract could not be found on ${subnet.name}!`
+              )
+            } else {
+              const contract = erc20MessagingContract.connect(subnetProvider)
+
+              const onChainToken = await contract
+                .getTokenByAddress(token.addr)
+                .finally(() => {
+                  setLoading(false)
+                })
+
+              if (!onChainToken.symbol) {
+                setLoading(false)
+                reject(`${token.symbol} is not registered on ${subnet.name}!`)
+              }
             }
           }
         }

packages/frontend/src/hooks/useEthers.test.ts

@@ -7,15 +7,15 @@ import useEthers from './useEthers'
 import React from 'react'
 
 const existingChainIds = ['1', '2'].map((x) => BigNumber.from(x))
-const subnetMock = { chainId: existingChainIds[0], endpoint: 'endpoint' }
+const subnetMock = { chainId: existingChainIds[0], endpointWs: 'ws://endpoint' }
 const subnetOtherMock = {
   chainId: existingChainIds[1],
-  endpoint: 'other-endpoint',
+  endpointWs: 'ws://other-endpoint',
 }
 const newSubnetMock = {
   chainId: BigNumber.from('3'),
   currencySymbol: '',
-  endpoint: 'other-other-endpoint',
+  endpointWs: 'ws://other-other-endpoint',
   name: '',
 }
 
@@ -53,17 +53,15 @@ describe('useEthers', () => {
   it('should use webSocket provider with Topos Subnet if not requested to use metaMask and no subnet', () => {
     renderHook(() => useEthers({ viaMetaMask: false }))
     expect(webSocketProviderSpy).toHaveBeenCalledWith(
-      `ws://${import.meta.env.VITE_TOPOS_SUBNET_ENDPOINT}/ws`
+      import.meta.env.VITE_TOPOS_SUBNET_ENDPOINT_WS
     )
   })
 
   it('should use webSocket provider with passed subnet if not requested to use metaMask and no subnet', () => {
     renderHook(() =>
       useEthers({ subnet: subnetMock as any, viaMetaMask: false })
     )
-    expect(webSocketProviderSpy).toHaveBeenCalledWith(
-      `ws://${subnetMock.endpoint}/ws`
-    )
+    expect(webSocketProviderSpy).toHaveBeenCalledWith(subnetMock.endpointWs)
   })
 
   it('should use web3 provider if not requested to use metaMask', () => {

packages/frontend/src/hooks/useEthers.ts

@@ -1,9 +1,8 @@
-import { ethers } from 'ethers'
+import { providers, utils } from 'ethers'
 import { useEffect, useMemo } from 'react'
 import { useMetaMask } from 'metamask-react'
 
 import { Subnet } from '../types'
-import { sanitizeURLProtocol } from '../utils'
 
 interface Args {
   subnet?: Subnet
@@ -15,29 +14,31 @@ export default function useEthers({ subnet, viaMetaMask }: Args = {}) {
     useMetaMask()
 
   const provider = useMemo<
-    ethers.providers.Web3Provider | ethers.providers.JsonRpcProvider
-  >(
-    () =>
-      viaMetaMask && ethereum
-        ? new ethers.providers.Web3Provider(ethereum)
-        : new ethers.providers.WebSocketProvider(
-            sanitizeURLProtocol(
-              'ws',
-              `${
-                subnet?.endpoint || import.meta.env.VITE_TOPOS_SUBNET_ENDPOINT
-              }/ws`
-            )
-          ),
-    [subnet, viaMetaMask, ethereum]
-  )
+    providers.Web3Provider | providers.JsonRpcProvider
+  >(() => {
+    if (viaMetaMask && ethereum) {
+      return new providers.Web3Provider(ethereum)
+    }
+
+    if (!subnet) {
+      const toposSubnetEndpointWs = import.meta.env
+        .VITE_TOPOS_SUBNET_ENDPOINT_WS
+      return new providers.WebSocketProvider(toposSubnetEndpointWs)
+    }
+
+    const endpoint = subnet.endpointWs || subnet.endpointHttp
+    const url = new URL(endpoint)
+
+    return url.protocol.startsWith('ws')
+      ? new providers.WebSocketProvider(endpoint)
+      : new providers.JsonRpcProvider(endpoint)
+  }, [subnet, viaMetaMask, ethereum])
 
   useEffect(
     function switchNetworkAndConnect() {
       const _ = async () => {
         if (subnet && viaMetaMask && ethereum) {
-          const chainId = ethers.utils.hexStripZeros(
-            subnet.chainId.toHexString()
-          )
+          const chainId = utils.hexStripZeros(subnet.chainId.toHexString())
 
           if (ethereum.networkVersion !== chainId) {
             try {
@@ -53,7 +54,7 @@ export default function useEthers({ subnet, viaMetaMask }: Args = {}) {
                     symbol: subnet.currencySymbol,
                     decimals: 18,
                   },
-                  rpcUrls: [sanitizeURLProtocol('http', subnet.endpoint)],
+                  rpcUrls: [subnet.endpointHttp, subnet.endpointWs],
                 })
               }
             }

packages/frontend/src/hooks/useRegisteredSubnets.test.ts

@@ -10,21 +10,24 @@ const registeredSubnets: { [x: string]: Subnet } = {
   subnet1: {
     chainId: BigNumber.from(1),
     currencySymbol: 'TST',
-    endpoint: '',
+    endpointHttp: '',
+    endpointWs: '',
     logoURL: '',
     name: 'subnetMock',
   },
   subnet2: {
     chainId: BigNumber.from(2),
     currencySymbol: 'TST2',
-    endpoint: '',
+    endpointHttp: '',
+    endpointWs: '',
     logoURL: '',
     name: 'subnetMock',
   },
   incal: {
     chainId: BigNumber.from(2),
     currencySymbol: 'TST2',
-    endpoint: '',
+    endpointHttp: '',
+    endpointWs: '',
     logoURL: '',
     name: 'Incal',
   },

packages/frontend/src/hooks/useRegisteredTokens.test.ts

@@ -9,7 +9,8 @@ import { BigNumber } from 'ethers'
 const subnetMock = {
   chainId: BigNumber.from(1),
   currencySymbol: 'TST',
-  endpoint: '',
+  endpointHttp: '',
+  endpointWs: '',
   logoURL: '',
   name: 'subnetMock',
 }