Merge pull request #302 from oasisprotocol/lw/wrap-short-error

Show shorter error messages (e.g. if user rejects a tx)

Author: lukaw3d

.changelog/302.bugfix.md

@@ -0,0 +1 @@
+Show shorter error messages (e.g. if user rejects a tx)

move/src/withdraw/Withdraw.tsx

@@ -23,6 +23,7 @@ import { amountPattern, consensusConfig, multiplyConsensusToSapphire } from '../
 import { withdrawFeeAmount, minimalWithdrawableAmount } from './withdrawToConsensus.ts'
 import { ExistingBalance } from './ExistingBalance.tsx'
 import { ConsensusAccount, SapphireAccount } from './useGenerateSapphireAccount.ts'
+import { BaseError } from 'wagmi'
 
 interface FormItem<T = string> {
   value: T | undefined
@@ -205,7 +206,10 @@ export function Withdraw({
       try {
         await step3(amount.value * multiplyConsensusToSapphire)
       } catch (err) {
-        setDestinationForm(prevState => ({ ...prevState, error: (err as Error).message }))
+        setDestinationForm(prevState => ({
+          ...prevState,
+          error: (err as BaseError).shortMessage || (err as Error).message,
+        }))
         return
       }
     }

ui/src/stake/utils/errors.ts

@@ -1,13 +1,8 @@
-export const toErrorString = (error: Error = new Error('Unknown error')) => {
-  let errorString = ''
+import { BaseError } from 'viem'
 
-  if (Object.prototype.hasOwnProperty.call(error, 'message')) {
-    errorString = (error as Error).message
-  } else if (typeof error === 'object') {
-    errorString = JSON.stringify(errorString)
-  } else {
-    errorString = error
-  }
-
-  return errorString
+export const toErrorString = (error: Error | BaseError = new Error('Unknown error')) => {
+  if ('shortMessage' in error) return error?.shortMessage
+  if ('message' in error) return error?.message
+  if (typeof error === 'object') return JSON.stringify(error)
+  return error
 }

wrap/src/components/WrapForm/index.tsx

@@ -7,7 +7,7 @@ import { WrapFormType } from '../../utils/types'
 import { useInterval } from '../../hooks/useInterval'
 import { NumberUtils } from '../../utils/number.utils'
 import { WrapFeeWarningModal } from '../WrapFeeWarningModal'
-import { formatEther, parseEther } from 'viem'
+import { BaseError, formatEther, parseEther } from 'viem'
 import BigNumber from 'bignumber.js'
 
 const AMOUNT_PATTERN = '^[0-9]*[.,]?[0-9]*$'
@@ -79,7 +79,10 @@ export const WrapForm: FC = () => {
 
       navigate(`/wrap/tx/${txHash}?amount=${value}&action=${formType}`)
     } catch (ex) {
-      setError((ex as Error)?.message || JSON.stringify(ex))
+      // E.g. ex.shortMessage: 'User rejected the request.'
+      // ex.message: 'User rejected the request.\n\nRequest Arguments:\n  from: ...'
+      // ex.cause.cause.code: 4001
+      setError((ex as BaseError)?.shortMessage || (ex as Error)?.message || JSON.stringify(ex))
     }
   }