feat: migrate ethers to v6 (#41)

packages/frontend/cypress/e2e/step1.cy.ts

@@ -295,13 +295,6 @@ describe('Multistep form step-1 with Incal', () => {
         .parents('.ant-form-item')
         .should('not.have.class', 'ant-form-item-has-error')
       cy.get('#recipientAddress').clear()
-      cy.get('#recipientAddress').type(
-        '4aab25b4fad0beaac466050f3a7142a502f4cf0a'
-      )
-      cy.get('#recipientAddress')
-        .parents('.ant-form-item')
-        .should('not.have.class', 'ant-form-item-has-error')
-      cy.get('#recipientAddress').clear()
     })
 
     it('should not be able to input a larger amount than current balance (default supply)', () => {

packages/frontend/cypress/e2e/step2.cy.ts

@@ -31,7 +31,9 @@ describe('Multistep form step-2', () => {
       .find('.ant-select-item-option-content')
       .contains('Incal')
       .click()
-    cy.get('#recipientAddress').type('4aab25b4fad0beaac466050f3a7142a502f4cf0a')
+    cy.get('#recipientAddress').type(
+      '0x4aab25b4fad0beaac466050f3a7142a502f4cf0a'
+    )
     cy.get('#amount').type('1')
     cy.get('#nextButton').click()
   })
@@ -42,7 +44,7 @@ describe('Multistep form step-2', () => {
     cy.get('#summary1Token').should('have.text', 'TST')
     cy.get('#summary1RecipientAddress').should(
       'have.text',
-      shortenAddress('4aab25b4fad0beaac466050f3a7142a502f4cf0a')
+      shortenAddress('0x4aab25b4fad0beaac466050f3a7142a502f4cf0a')
     )
   })
 

packages/frontend/package.json

@@ -21,20 +21,19 @@
     "@ethereumjs/rlp": "^4.0.1",
     "@ethereumjs/trie": "^5.0.4",
     "@ethereumjs/util": "^8.0.5",
-    "@ethersproject/abstract-provider": "^5.7.0",
     "@opentelemetry/api": "^1.6.0",
     "@opentelemetry/context-zone": "^1.17.1",
     "@opentelemetry/exporter-metrics-otlp-proto": "^0.45.0",
     "@opentelemetry/exporter-trace-otlp-proto": "^0.45.0",
     "@opentelemetry/sdk-metrics": "^1.17.1",
     "@opentelemetry/sdk-trace-web": "^1.17.1",
-    "@topos-protocol/topos-smart-contracts": "^3.0.0",
+    "@topos-protocol/topos-smart-contracts": "^3.1.0-rc1",
     "@types/event-source-polyfill": "^1.0.1",
     "antd": "^5.4.0",
     "axios": "^1.0.0",
     "buffer": "^6.0.3",
     "bull": "^4.10.4",
-    "ethers": "^5.7.2",
+    "ethers": "^6.9.0",
     "event-source-polyfill": "^1.0.31",
     "metamask-react": "^2.6.0",
     "react": "18.2.0",

packages/frontend/src/App.tsx

@@ -1,7 +1,8 @@
 import { ThemeProvider } from '@emotion/react'
 import styled from '@emotion/styled'
+import { ToposCore__factory } from '@topos-protocol/topos-smart-contracts/typechain-types'
 import { Alert, Layout as _Layout } from 'antd'
-import { BigNumber, ethers } from 'ethers'
+import { JsonRpcProvider } from 'ethers'
 import { useEffect, useState } from 'react'
 
 import Header from './components/Header'
@@ -10,7 +11,6 @@ import { Error, ErrorsContext } from './contexts/errors'
 import { SubnetsContext } from './contexts/subnets'
 import useRegisteredSubnets from './hooks/useRegisteredSubnets'
 import useTheme from './hooks/useTheme'
-import { toposCoreContract } from './contracts'
 import { SubnetWithId } from './types'
 
 const { Content: _Content } = _Layout
@@ -49,17 +49,18 @@ const App = () => {
           let toposSubnet: SubnetWithId | undefined
 
           if (toposSubnetEndpointHttp && toposSubnetEndpointWs) {
-            const provider = new ethers.providers.JsonRpcProvider(
-              toposSubnetEndpointHttp
-            )
+            const provider = new JsonRpcProvider(toposSubnetEndpointHttp)
             const network = await provider.getNetwork()
             const chainId = network.chainId
 
-            const contract = toposCoreContract.connect(provider)
+            const contract = ToposCore__factory.connect(
+              import.meta.env.VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS,
+              provider
+            )
             const subnetId = await contract.networkSubnetId()
 
             toposSubnet = {
-              chainId: BigNumber.from(chainId.toString()),
+              chainId: chainId,
               endpointHttp: toposSubnetEndpointHttp,
               endpointWs: toposSubnetEndpointWs,
               currencySymbol: 'TOPOS',

packages/frontend/src/components/Header.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Col, Layout, Row, Space } from 'antd'
 
 import logo from '../logo.svg'

packages/frontend/src/components/Progress.tsx

@@ -1,5 +1,4 @@
 import { Progress as AntdProgress } from 'antd'
-import React from 'react'
 
 interface Props {
   progress: number

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

@@ -3,12 +3,11 @@ import { describe, it, expect, vi } from 'vitest'
 
 import SubnetSelect from './SubnetSelect'
 import { SubnetWithId } from '../types'
-import { BigNumber } from 'ethers'
 import { userEvent } from '../utils/tests'
 
 const subnetsMock: SubnetWithId[] = [
   {
-    chainId: BigNumber.from(1),
+    chainId: BigInt(1),
     currencySymbol: 'TST',
     endpointHttp: '',
     endpointWs: '',

packages/frontend/src/components/SubnetSelect.tsx

@@ -1,8 +1,6 @@
 import { Avatar, Select, SelectProps, Space, Typography } from 'antd'
-import React from 'react'
 
 import { SubnetWithId } from '../types'
-import TestId from '../utils/testId'
 
 const { Option } = Select
 const { Text } = Typography

packages/frontend/src/components/steps/Step1.tsx

@@ -13,7 +13,7 @@ import {
   message,
 } from 'antd'
 import { SegmentedValue } from 'antd/lib/segmented'
-import { ethers } from 'ethers'
+import { isAddress } from 'ethers'
 import { useCallback, useContext, useEffect, useMemo } from 'react'
 
 import { MultiStepFormContext } from '../../contexts/multiStepForm'
@@ -216,7 +216,7 @@ const Step1 = ({ onFinish, onPrev }: StepProps) => {
             {
               validator: (_, value) =>
                 new Promise<void>((resolve, reject) => {
-                  if (ethers.utils.isAddress(value) || !value) {
+                  if ((isAddress(value) && value.startsWith('0x')) || !value) {
                     resolve()
                   }
 

packages/frontend/src/components/steps/Step2.tsx

@@ -9,7 +9,14 @@ import {
 import * as ERC20MessagingJSON from '@topos-protocol/topos-smart-contracts/artifacts/contracts/examples/ERC20Messaging.sol/ERC20Messaging.json'
 import { Avatar, List, Spin } from 'antd'
 import { Job } from 'bull'
-import { BigNumber, ContractReceipt, ContractTransaction, ethers } from 'ethers'
+import {
+  ContractTransactionReceipt,
+  ContractTransactionResponse,
+  EventLog,
+  hexlify,
+  Interface,
+  parseUnits,
+} from 'ethers'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import { lastValueFrom, tap } from 'rxjs'
 
@@ -91,7 +98,7 @@ const Step2 = ({ onFinish }: StepProps) => {
       if (isReady) {
         try {
           mainSpan = useTracingCreateSpan('Step2', 'main', stepSpan)
-          const parsedAmount = ethers.utils.parseUnits(amount.toString())
+          const parsedAmount = parseUnits(amount.toString())
 
           await processTokenAllowance(parsedAmount, token)
           setActiveProgressStep((s) => s + 1)
@@ -104,48 +111,53 @@ const Step2 = ({ onFinish }: StepProps) => {
           )
           setActiveProgressStep((s) => s + 1)
 
-          const merkleProofOutput = await processMerkleProofCreation(
-            sendTokenOutput!.sendTokenReceipt,
-            sendTokenOutput!.sendTokenTx
-          )
-
-          const tokenSentLogIndex = await processSentTokenLogIndex(
-            sendTokenOutput!.sendTokenReceipt
-          )
-
-          const executorServiceJob = await processExecutorServiceExecute(
-            receivingSubnet,
-            tokenSentLogIndex,
-            merkleProofOutput.proof,
-            merkleProofOutput.trieRoot
-          )
+          if (sendTokenOutput.sendTokenReceipt) {
+            const merkleProofOutput = await processMerkleProofCreation(
+              sendTokenOutput.sendTokenReceipt,
+              sendTokenOutput.sendTokenTx
+            )
 
-          if (executorServiceJob) {
-            const observable = await processExecutorServiceObserveJob(
-              executorServiceJob
+            const tokenSentLogIndex = await processSentTokenLogIndex(
+              sendTokenOutput!.sendTokenReceipt
             )
-            await lastValueFrom(observable)
-              .then(() => {
-                setActiveProgressStep((s) => s + 1)
-              })
-              .catch((error) => {
-                throw error
-              })
 
-            mainSpan?.setStatus({
-              code: SpanStatusCode.OK,
-            })
-            stepSpan.setStatus({
-              code: SpanStatusCode.OK,
-            })
-            rootSpan?.setStatus({
-              code: SpanStatusCode.OK,
-            })
-            mainSpan?.end()
-            stepSpan?.end()
-            rootSpan?.end()
+            if (merkleProofOutput) {
+              const executorServiceJob = await processExecutorServiceExecute(
+                receivingSubnet,
+                tokenSentLogIndex,
+                merkleProofOutput.proof,
+                merkleProofOutput.trieRoot
+              )
+
+              if (executorServiceJob) {
+                const observable = await processExecutorServiceObserveJob(
+                  executorServiceJob
+                )
+                await lastValueFrom(observable)
+                  .then(() => {
+                    setActiveProgressStep((s) => s + 1)
+                  })
+                  .catch((error) => {
+                    throw error
+                  })
+
+                mainSpan?.setStatus({
+                  code: SpanStatusCode.OK,
+                })
+                stepSpan.setStatus({
+                  code: SpanStatusCode.OK,
+                })
+                rootSpan?.setStatus({
+                  code: SpanStatusCode.OK,
+                })
+                mainSpan?.end()
+                stepSpan?.end()
+                rootSpan?.end()
+              }
+            }
           }
         } catch (error: any) {
+          console.error(error)
           setErrors((e) => [
             ...e,
             {
@@ -184,10 +196,10 @@ const Step2 = ({ onFinish }: StepProps) => {
       }
     }
 
-    function processTokenAllowance(parsedAmount: BigNumber, token: Token) {
+    function processTokenAllowance(parsedAmount: bigint, token: Token) {
       return getCurrentAllowance(token)
         .then((currentAllowance) => {
-          if (currentAllowance.lt(parsedAmount)) {
+          if (currentAllowance < parsedAmount) {
             const span = useTracingCreateSpan(
               'Step2',
               'processTokenAllowance',
@@ -219,7 +231,7 @@ const Step2 = ({ onFinish }: StepProps) => {
       receivingSubnet: SubnetWithId,
       token: Token,
       recipientAddress: string,
-      parsedAmount: BigNumber
+      parsedAmount: bigint
     ) {
       const span = useTracingCreateSpan(
         'Step2',
@@ -251,37 +263,43 @@ const Step2 = ({ onFinish }: StepProps) => {
     }
 
     function processMerkleProofCreation(
-      sendTokenReceipt: ContractReceipt,
-      sendTokenTx: ContractTransaction
+      sendTokenReceipt: ContractTransactionReceipt,
+      sendTokenTx: ContractTransactionResponse
     ) {
       const span = useTracingCreateSpan(
         'Step2',
         'processMerkleProofCreation',
         mainSpan
       )
+
+      const prefectTxs = true
+
       return provider
-        .getBlockWithTransactions(sendTokenReceipt.blockHash)
+        .getBlock(sendTokenReceipt.blockHash, prefectTxs)
         .then((block) => {
           span.addEvent('got block', { block: JSON.stringify(block) })
-          return createMerkleProof(block, sendTokenTx)
-            .then(({ proof, trie }) => {
-              const trieRoot = ethers.utils.hexlify(trie.root())
-              span.addEvent('got proof and trie', {
-                proof,
-                trie: JSON.stringify(trie),
-                trieRoot,
+
+          if (block) {
+            return createMerkleProof(block, sendTokenTx)
+              .then(({ proof, trie }) => {
+                const trieRoot = hexlify(trie.root())
+                span.addEvent('got proof and trie', {
+                  proof,
+                  trie: JSON.stringify(trie),
+                  trieRoot,
+                })
+                span.setStatus({ code: SpanStatusCode.OK })
+                return { proof, trie, trieRoot }
               })
-              span.setStatus({ code: SpanStatusCode.OK })
-              return { proof, trie, trieRoot }
-            })
-            .catch((error) => {
-              const message = getErrorMessage(error)
-              span.setStatus({
-                code: SpanStatusCode.ERROR,
-                message,
+              .catch((error) => {
+                const message = getErrorMessage(error)
+                span.setStatus({
+                  code: SpanStatusCode.ERROR,
+                  message,
+                })
+                throw error
               })
-              throw error
-            })
+          }
         })
         .catch((error) => {
           const message = getErrorMessage(error)
@@ -296,22 +314,24 @@ const Step2 = ({ onFinish }: StepProps) => {
         })
     }
 
-    function processSentTokenLogIndex(sendTokenReceipt: ContractReceipt) {
+    function processSentTokenLogIndex(
+      sendTokenReceipt: ContractTransactionReceipt
+    ) {
       const span = useTracingCreateSpan(
         'Step2',
         'processSentTokenLogIndex',
         mainSpan
       )
 
-      const iface = new ethers.utils.Interface(ERC20MessagingJSON.abi)
+      const iface = new Interface(ERC20MessagingJSON.abi)
       let tokenSentLogIndex: number | undefined = undefined
 
       for (let log of sendTokenReceipt.logs) {
         try {
-          const logDescription = iface.parseLog(log)
+          const logDescription = iface.parseLog(log as any)
 
-          if (logDescription.name === 'TokenSent') {
-            tokenSentLogIndex = log.logIndex
+          if (logDescription && logDescription.name === 'TokenSent') {
+            tokenSentLogIndex = log.index
             break
           }
         } catch {