Merge pull request #205 from skalenetwork/hotfix-transfers

Hotfix: handle transfer errors

README.md

@@ -15,6 +15,13 @@ See https://docs.skale.network/metaport/1.1.x/
 
 ## Development
 
+### Storybook preview
+
+```
+bash prepare_meta.sh && bun install && bun build:lib
+bun dev
+```
+
 ### Debug mode
 
 To enable debug mode, set `debug` environment variable to `true`:

src/components/AmountInput.tsx

@@ -12,6 +12,7 @@ import { useCollapseStore } from '../store/Store'
 export default function AmountInput() {
   const { address } = useAccount()
   const transferInProgress = useMetaportStore((state) => state.transferInProgress)
+  const currentStep = useMetaportStore((state) => state.currentStep)
   const setAmount = useMetaportStore((state) => state.setAmount)
   const amount = useMetaportStore((state) => state.amount)
   const expandedTokens = useCollapseStore((state) => state.expandedTokens)
@@ -21,6 +22,13 @@ export default function AmountInput() {
       setAmount('', address)
       return
     }
+    if (event.target.value.length > 12) {
+      let initialSize = 22 - event.target.value.length / 3
+      initialSize = initialSize <= 12 ? 12 : initialSize
+      event.target.style.fontSize = initialSize + 'px'
+    } else {
+      event.target.style.fontSize = '22px'
+    }
     setAmount(event.target.value, address)
   }
 
@@ -34,7 +42,8 @@ export default function AmountInput() {
             placeholder="0.00"
             value={amount}
             onChange={handleChange}
-            disabled={transferInProgress}
+            disabled={transferInProgress || currentStep !== 0}
+            style={{ width: '100%' }}
           />
         </div>
       )}

src/components/Debug.tsx

@@ -21,21 +21,19 @@
  * @copyright SKALE Labs 2023-Present
  */
 
-import Grid from '@mui/material/Grid';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
 
 import { useMetaportStore } from '../store/MetaportStore'
 import { cls, cmn } from '../core/css'
 
-
 export default function Debug() {
-
   const debug = useMetaportStore((state) => state.mpc.config.debug)
   const chainName1 = useMetaportStore((state) => state.chainName1)
   const chainName2 = useMetaportStore((state) => state.chainName2)
@@ -46,15 +44,14 @@ export default function Debug() {
     { name: 'chainName1', value: chainName1 },
     { name: 'chainName2', value: chainName2 },
     { name: 'amount', value: amount },
-    { name: 'stepsMetadata', value: JSON.stringify(stepsMetadata) },
+    { name: 'stepsMetadata', value: JSON.stringify(stepsMetadata) }
   ]
 
   if (!debug) return
   return (
     <div className={cls(cmn.flex, cmn.flexcv)}>
       <Grid container spacing={3}>
-        <Grid item sm={6} xs={12}
-        >
+        <Grid item sm={6} xs={12}>
           <TableContainer component={Paper}>
             <Table aria-label="simple table">
               <TableHead>
@@ -80,7 +77,6 @@ export default function Debug() {
           </TableContainer>
         </Grid>
       </Grid>
-
     </div>
   )
 }

src/components/ErrorMessage.tsx

@@ -13,26 +13,26 @@ import LinkOffRoundedIcon from '@mui/icons-material/LinkOffRounded'
 import PublicOffRoundedIcon from '@mui/icons-material/PublicOffRounded'
 import SentimentDissatisfiedRoundedIcon from '@mui/icons-material/SentimentDissatisfiedRounded'
 import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded'
-import HourglassTopRoundedIcon from '@mui/icons-material/HourglassTopRounded';
-import CrisisAlertRoundedIcon from '@mui/icons-material/CrisisAlertRounded';
+import HourglassTopRoundedIcon from '@mui/icons-material/HourglassTopRounded'
+import CrisisAlertRoundedIcon from '@mui/icons-material/CrisisAlertRounded'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import TextSnippetRoundedIcon from '@mui/icons-material/TextSnippetRounded';
-import HourglassBottomRoundedIcon from '@mui/icons-material/HourglassBottomRounded';
-import AvTimerRoundedIcon from '@mui/icons-material/AvTimerRounded';
-
+import HourglassBottomRoundedIcon from '@mui/icons-material/HourglassBottomRounded'
+import AvTimerRoundedIcon from '@mui/icons-material/AvTimerRounded'
+import RestartAltRoundedIcon from '@mui/icons-material/RestartAltRounded';
+import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';
+import SortRoundedIcon from '@mui/icons-material/SortRounded';
 import { DEFAULT_ERROR_MSG } from '../core/constants'
 
 const ERROR_ICONS = {
   'link-off': <LinkOffRoundedIcon />,
   'public-off': <PublicOffRoundedIcon />,
   sentiment: <SentimentDissatisfiedRoundedIcon />,
-  warning: <CrisisAlertRoundedIcon color='warning' />,
+  warning: <CrisisAlertRoundedIcon color="warning" />,
   error: <ErrorRoundedIcon />,
   time: <HourglassTopRoundedIcon />
 }
 
 export default function Error(props: { errorMessage: ErrorMessage }) {
-
   const [expanded, setExpanded] = useState<string | false>(false)
 
   const handleChange = (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
@@ -54,28 +54,79 @@ 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" />
-        </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" />
+      {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)}>
+              <HourglassBottomRoundedIcon color="info" />
+            </div>
+            <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
+              Transfers might occasionally delay, but all tokens will be sent.
+            </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)}>
+              <RestartAltRoundedIcon color="info" />
+            </div>
+            <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
+              If a transfer is interrupted, you can continue from where you stopped.
+            </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)}>
+              <AvTimerRoundedIcon color="info" />
+            </div>
+            <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
+              Transfers from SKALE to Ethereum Mainnet have frequency limits.
+            </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)}>
+              <HelpOutlineRoundedIcon color="info" />
+            </div>
+            <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
+              If you still have questions, consult FAQ or contact the support team.
+            </p>
+          </div>
         </div>
-        <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.pPrim, cmn.mri10)}>
-          Sometimes transfers may take more time than expected.
-        </p>
-      </div>
-
-      <Accordion
-        expanded={expanded === 'panel1'}
-        onChange={handleChange('panel1')}
-      >
+      ) : null}
+      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
         <AccordionSummary
           className={cls(styles.accordionSummarySm, styles.accordionSm)}
           expandIcon={<ExpandMoreIcon />}
@@ -84,7 +135,7 @@ export default function Error(props: { errorMessage: ErrorMessage }) {
         >
           <div className={cls(cmn.flex, cmn.fullWidth, cmn.flexcv)}>
             <div className={cls(cmn.flex, cmn.flexc, cmn.mri10)}>
-              <TextSnippetRoundedIcon color="warning" />
+              <SortRoundedIcon />
             </div>
             <p className={cls(cmn.p, cmn.p3, cmn.p600, cmn.cap, cmn.pPrim, cmn.mri10)}>
               {expanded === 'panel1' ? 'Hide' : 'Show'} error details
@@ -95,13 +146,20 @@ export default function Error(props: { errorMessage: ErrorMessage }) {
           <div className={cmn.mbott20}>
             <code
               style={{ wordBreak: 'break-all' }}
-              className={cls(cmn.p4, cmn.p, cmn.pPrim, cmn.flexg,
-                cmn.pCent, cmn.mleft10, cmn.mri10, cmn.mbott20)}
+              className={cls(
+                cmn.p4,
+                cmn.p,
+                cmn.pPrim,
+                cmn.flexg,
+                cmn.pCent,
+                cmn.mleft10,
+                cmn.mri10,
+                cmn.mbott20
+              )}
             >
               {props.errorMessage.text}
             </code>
           </div>
-
         </AccordionDetails>
       </Accordion>
       {props.errorMessage.fallback ? (

src/components/Stepper/SkStepper.tsx

@@ -74,6 +74,10 @@ export default function SkStepper(props: { skaleNetwork: SkaleNetwork }) {
   }, [transactionsHistory])
 
   if (stepsMetadata.length === 0) return <div></div>
+
+  const actionDisabled =
+    amountErrorMessage || loading || amount == '' || Number(amount) === 0 || !cpData.exitGasOk
+
   return (
     <Collapse in={stepsMetadata && stepsMetadata.length !== 0}>
       <Box className={cls()}>
@@ -121,9 +125,7 @@ export default function SkStepper(props: { skaleNetwork: SkaleNetwork }) {
                           size="medium"
                           className={cls(styles.btnAction, cmn.mtop5)}
                           onClick={() => execute(address, switchNetworkAsync, walletClient)}
-                          disabled={
-                            !!(amountErrorMessage || loading || amount == '' || !cpData.exitGasOk)
-                          }
+                          disabled={!!actionDisabled}
                         >
                           {step.btnText}
                         </Button>

src/components/WidgetUI/WidgetUI.tsx

@@ -89,7 +89,7 @@ export function WidgetUI(props: { config: MetaportConfig }) {
       <div className={props.config.openButton ? cmn.mbott20 : null}>
         {fabTop ? fabButton : null}
       </div>
-      <Collapse in={isOpen} >
+      <Collapse in={isOpen}>
         <SkPaper className={cls(styles.popper, styles.contentHeight)}>
           <Collapse in={!!errorMessage}>
             <ErrorMessage errorMessage={errorMessage} />

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,