From 644fd2668e0ff5a63b6618c27768cfbbebd95d93 Mon Sep 17 00:00:00 2001
From: Dmytro <dmitry.tkk@gmail.com>
Date: Mon, 23 Oct 2023 16:41:09 +0100
Subject: [PATCH] metaport#192 handle small transfer amounts

---
 src/components/ErrorMessage.tsx | 32 +++++++++++------------
 src/core/actions/action.ts      |  8 ++----
 src/core/actions/checks.ts      | 12 ++++++++-
 src/core/actions/erc20.ts       |  5 ++--
 src/store/MetaportStore.ts      | 45 ++++++++++++++++++++++-----------
 5 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 88b4ac7..0912fed 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -54,24 +54,24 @@ export default function Error(props: { errorMessage: ErrorMessage }) {
       <p className={cls(cmn.p4, cmn.p, cmn.p500, cmn.pSec, cmn.flexg, cmn.pCent, cmn.mbott10)}>
         Logs are available in your browser's developer console
       </p>
-
-      <div className={cls(cmn.flex, cmn.fullWidth, cmn.flexcv, cmn.mtop20, cmn.mbott10, cmn.mleft10)}>
-        <div className={cls(cmn.flex, cmn.flexc, cmn.mri10)}>
-          <AvTimerRoundedIcon color="primary" />
+      {props.errorMessage.showTips ? <div>
+        <div className={cls(cmn.flex, cmn.fullWidth, cmn.flexcv, cmn.mtop20, cmn.mbott10, cmn.mleft10)}>
+          <div className={cls(cmn.flex, cmn.flexc, cmn.mri10)}>
+            <AvTimerRoundedIcon color="primary" />
+          </div>
+          <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
+            When transferring from SKALE to Ethereum Mainnet, there are frequency limitations.
+          </p>
         </div>
-        <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
-          When transferring from SKALE to Ethereum Mainnet, there are frequency limitations.
-        </p>
-      </div>
-      <div className={cls(cmn.flex, cmn.fullWidth, cmn.flexcv, cmn.mtop20, cmn.mbott10, cmn.mleft10)}>
-        <div className={cls(cmn.flex, cmn.flexc, cmn.mri10)}>
-          <HourglassBottomRoundedIcon color="primary" />
+        <div className={cls(cmn.flex, cmn.fullWidth, cmn.flexcv, cmn.mtop20, cmn.mbott10, cmn.mleft10)}>
+          <div className={cls(cmn.flex, cmn.flexc, cmn.mri10)}>
+            <HourglassBottomRoundedIcon color="primary" />
+          </div>
+          <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
+            Sometimes transfers may take more time than expected.
+          </p>
         </div>
-        <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
-          Sometimes transfers may take more time than expected.
-        </p>
-      </div>
-
+      </div> : null}
       <Accordion
         expanded={expanded === 'panel1'}
         onChange={handleChange('panel1')}
diff --git a/src/core/actions/action.ts b/src/core/actions/action.ts
index 4a72f92..2a2163f 100644
--- a/src/core/actions/action.ts
+++ b/src/core/actions/action.ts
@@ -64,7 +64,6 @@ export class Action {
   chainName2: string
   address: string
   amount: string
-  amountWei: bigint
   tokenId: number
   token: TokenData
 
@@ -86,9 +85,6 @@ export class Action {
 
   constructor(
     mpc: MetaportCore,
-    // mainnet: MainnetChain,
-    // sChain1: SChain,
-    // sChain2: SChain,
     chainName1: string,
     chainName2: string,
     address: string,
@@ -106,7 +102,6 @@ export class Action {
     this.chainName2 = chainName2
     this.address = address
     this.amount = amount
-    if (amount) this.amountWei = toWei(amount, token.meta.decimals)
     this.tokenId = Number(tokenId)
 
     this.token = createTokenData(token.keyname, chainName1, token.type, this.mpc.config)
@@ -167,6 +162,7 @@ export class Action {
   updateState(currentState: interfaces.ActionState, transactionHash?: string, timestamp?: number) {
     log(`actionStateUpd: ${this.constructor.name} - ${currentState} - ${this.token.keyname} \
 - ${this.chainName1} -> ${this.chainName2}`)
+    const amountWei = toWei(this.amount, this.token.meta.decimals)
     externalEvents.actionStateUpdated({
       actionName: this.constructor.name,
       actionState: currentState,
@@ -175,7 +171,7 @@ export class Action {
         chainName2: this.chainName2,
         address: this.address,
         amount: this.amount,
-        amountWei: this.amountWei,
+        amountWei: amountWei,
         tokenId: this.tokenId
       },
       transactionHash,
diff --git a/src/core/actions/checks.ts b/src/core/actions/checks.ts
index 1470b8b..97bed94 100644
--- a/src/core/actions/checks.ts
+++ b/src/core/actions/checks.ts
@@ -25,7 +25,7 @@ import debug from 'debug'
 import { Contract } from 'ethers'
 import { MainnetChain, SChain } from '@skalenetwork/ima-js'
 
-import { fromWei } from '../convertation'
+import { fromWei, toWei } from '../convertation'
 import { TokenData } from '../dataclasses/TokenData'
 import * as interfaces from '../interfaces'
 import { addressesEqual } from '../helper'
@@ -73,6 +73,16 @@ export async function checkERC20Balance(
 ): Promise<interfaces.CheckRes> {
   const checkRes: interfaces.CheckRes = { res: false }
   if (!amount || Number(amount) === 0) return checkRes
+  try {
+    toWei(amount, tokenData.meta.decimals)
+  } catch (err) {
+    if (err.fault && err.fault === 'underflow') {
+      checkRes.msg = 'The amount is too small'
+    } else {
+      checkRes.msg = 'Incorrect amount'
+    }
+    return checkRes
+  }
   try {
     const balance = await tokenContract.balanceOf(address)
     log(`address: ${address}, balanceWei: ${balance}, amount: ${amount}`)
diff --git a/src/core/actions/erc20.ts b/src/core/actions/erc20.ts
index 5985f32..a1a13d7 100644
--- a/src/core/actions/erc20.ts
+++ b/src/core/actions/erc20.ts
@@ -116,9 +116,10 @@ export class WrapSFuelERC20S extends Action {
   async execute() {
     log('WrapSFuelERC20S:execute - starting')
     this.updateState('wrap')
+    const amountWei = toWei(this.amount, this.token.meta.decimals)
     const tx = await this.sChain1.erc20.fundExit(this.token.keyname, {
       address: this.address,
-      value: this.amountWei
+      value: amountWei
     })
     const block = await this.sChain1.provider.getBlock(tx.blockNumber)
     this.updateState('wrapDone', tx.hash, block.timestamp)
@@ -212,7 +213,7 @@ export class UnWrapERC20 extends Action {
     this.updateState('unwrapDone', tx.hash, block.timestamp)
   }
 
-  async preAction() {}
+  async preAction() { }
 }
 
 export class UnWrapERC20S extends Action {
diff --git a/src/store/MetaportStore.ts b/src/store/MetaportStore.ts
index f8e05c0..934ab9b 100644
--- a/src/store/MetaportStore.ts
+++ b/src/store/MetaportStore.ts
@@ -191,21 +191,36 @@ export const useMetaportStore = create<MetaportState>()((set, get) => ({
         loading: true,
         btnText: 'Checking balance...'
       })
-      const stepMetadata = get().stepsMetadata[get().currentStep]
-      const actionClass = ACTIONS[stepMetadata.type]
-      await new actionClass(
-        get().mpc,
-        stepMetadata.from,
-        stepMetadata.to,
-        address,
-        amount,
-        get().tokenId,
-        get().token,
-        get().setAmountErrorMessage,
-        get().setBtnText,
-        null,
-        null
-      ).preAction()
+      try {
+        const stepMetadata = get().stepsMetadata[get().currentStep]
+        const actionClass = ACTIONS[stepMetadata.type]
+        await new actionClass(
+          get().mpc,
+          stepMetadata.from,
+          stepMetadata.to,
+          address,
+          amount,
+          get().tokenId,
+          get().token,
+          get().setAmountErrorMessage,
+          get().setBtnText,
+          null,
+          null
+        ).preAction()
+      } catch (err) {
+        console.error(err)
+        const msg = err.code && err.fault ? `${err.code} - ${err.fault}` : 'Something went wrong'
+        set({
+          errorMessage: new dataclasses.TransactionErrorMessage(
+            err.message,
+            get().errorMessageClosedFallback,
+            msg,
+            false
+          )
+        })
+      } finally {
+        set({ loading: false })
+      }
     }
     set({ loading: false })
   },