From 08844376e7abc83b9c8bab09d375eccade92f570 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Dan?= <sebastien.dan@gmail.com>
Date: Fri, 19 Jan 2024 14:12:46 +0100
Subject: [PATCH] fix: better handle token registration errors (#44)

---
 packages/frontend/src/App.tsx                 |  2 +-
 .../frontend/src/components/RegisterToken.tsx | 22 +++++----
 .../src/hooks/useRegisterToken.test.ts        |  4 +-
 .../frontend/src/hooks/useRegisterToken.ts    | 48 ++++++-------------
 4 files changed, 31 insertions(+), 45 deletions(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index a1cc798..2a06bb0 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -61,7 +61,7 @@ const App = () => {
             const subnetId = await contract.networkSubnetId()
 
             toposSubnet = {
-              chainId: chainId,
+              chainId,
               endpointHttp: toposSubnetEndpointHttp,
               endpointWs: toposSubnetEndpointWs,
               currencySymbol: 'TOPOS',
diff --git a/packages/frontend/src/components/RegisterToken.tsx b/packages/frontend/src/components/RegisterToken.tsx
index 4091bc4..b73acf4 100644
--- a/packages/frontend/src/components/RegisterToken.tsx
+++ b/packages/frontend/src/components/RegisterToken.tsx
@@ -11,6 +11,7 @@ import { ERROR, SUCCESS } from '../constants/wordings'
 import { MultiStepFormContext } from '../contexts/multiStepForm'
 import useRegisterToken from '../hooks/useRegisterToken'
 import TestId from '../utils/testId'
+import { ErrorsContext } from '../contexts/errors'
 
 export interface Values {
   cap: number
@@ -26,10 +27,10 @@ interface RegisterTokenFormProps {
 }
 
 const RegisterTokenForm = ({ open, setOpen }: RegisterTokenFormProps) => {
-  const [loading, setLoading] = useState(false)
+  const { setErrors } = useContext(ErrorsContext)
   const { registeredTokens } = useContext(MultiStepFormContext)
   const [form] = Form.useForm()
-  const { registerToken } = useRegisterToken()
+  const { loading, registerToken } = useRegisterToken()
 
   const onCancel = useCallback(() => {
     setOpen(false)
@@ -51,14 +52,15 @@ const RegisterTokenForm = ({ open, setOpen }: RegisterTokenFormProps) => {
         form
           .validateFields()
           .then((values) => {
-            setLoading(true)
-
-            registerToken(values).then(() => {
-              message.success(SUCCESS.REGISTERED_TOKEN)
-              setLoading(false)
-              form.resetFields()
-              setOpen(false)
-            })
+            registerToken(values)
+              .then(() => {
+                message.success(SUCCESS.REGISTERED_TOKEN)
+                form.resetFields()
+                setOpen(false)
+              })
+              .catch((error) => {
+                setErrors((e) => [...e, error])
+              })
           })
           .catch((info) => {
             console.log('Validate Failed:', info)
diff --git a/packages/frontend/src/hooks/useRegisterToken.test.ts b/packages/frontend/src/hooks/useRegisterToken.test.ts
index 4f7b14a..c463bc0 100644
--- a/packages/frontend/src/hooks/useRegisterToken.test.ts
+++ b/packages/frontend/src/hooks/useRegisterToken.test.ts
@@ -59,7 +59,9 @@ describe('registerToken', () => {
         supply,
       })
       .then(() => {
-        expect(deployTokenMock).toHaveBeenCalledWith(params)
+        expect(deployTokenMock).toHaveBeenCalledWith(params, {
+          gasLimit: 5_000_000,
+        })
       })
       .finally(() => {
         expect(result.current.loading).toBe(false)
diff --git a/packages/frontend/src/hooks/useRegisterToken.ts b/packages/frontend/src/hooks/useRegisterToken.ts
index 9c023fb..3ceabc2 100644
--- a/packages/frontend/src/hooks/useRegisterToken.ts
+++ b/packages/frontend/src/hooks/useRegisterToken.ts
@@ -1,16 +1,14 @@
 import { ERC20Messaging__factory } from '@topos-protocol/topos-smart-contracts/typechain-types'
 import { AbiCoder, BrowserProvider, parseUnits } from 'ethers'
-import { useCallback, useContext, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import { Values } from '../components/RegisterToken'
-import { ErrorsContext } from '../contexts/errors'
 import useEthers from './useEthers'
 
 export default function useRegisterToken() {
   const { provider } = useEthers({
     viaMetaMask: true,
   })
-  const { setErrors } = useContext(ErrorsContext)
   const [loading, setLoading] = useState(false)
 
   const registerToken = useCallback(
@@ -35,36 +33,20 @@ export default function useRegisterToken() {
         ]
       )
 
-      return new Promise((resolve, reject) => {
-        erc20Messaging
-          .deployToken(params)
-          .then((tx) =>
-            tx
-              .wait()
-              .then((receipt) => {
-                resolve(receipt)
-              })
-              .catch((error: Error) => {
-                console.error(error)
-                setErrors((e) => [
-                  ...e,
-                  { message: `Error when registering the token` },
-                ])
-                reject(error)
-              })
-          )
-          .catch((error: Error) => {
-            console.error(JSON.stringify(error))
-            setErrors((e) => [
-              ...e,
-              { message: `Error when registering the token` },
-            ])
-            reject(error)
-          })
-          .finally(() => {
-            setLoading(false)
-          })
-      })
+      try {
+        const tx = await erc20Messaging.deployToken(params, {
+          gasLimit: 5_000_000,
+        })
+        const receipt = await tx.wait()
+        setLoading(false)
+        return receipt
+      } catch (error: any) {
+        console.error(error)
+        setLoading(false)
+        throw Error(
+          `Error when registering the token (reason: ${error.reason})`
+        )
+      }
     },
     [provider]
   )