New approach for the error handling

packages/core/src/notify.ts

@@ -33,8 +33,12 @@ function temporaryInfo(message: string, toastId?: string | number) {
     toast.info(message, { duration: DEFAULT_DURATION, id: toastId, className: "text-sky-500! dark:text-blue-400! bg-sky-100! dark:bg-blue-400/15! backdrop-blur-md!" })
 }
 
-function permanentError(message: string, toastId?: string | number) {
-    toast.error(message, { duration: Infinity, id: toastId, className: "text-red-500! dark:text-red-400! bg-red-100! dark:bg-red-400/15! backdrop-blur-md!" })
+const ERROR_DESCRIPTION = 'Check browser\'s developer console'
+
+function permanentError(message: string, toastId?: string | number, showDescription = true) {
+    const trimmed = message.split(/[.\n(]/)[0].trim().slice(0, 80) || message.slice(0, 80)
+    const short = trimmed.charAt(0).toUpperCase() + trimmed.slice(1)
+    toast.error(short, { duration: Infinity, id: toastId, description: showDescription ? ERROR_DESCRIPTION : undefined, className: "text-red-500! dark:text-red-400! bg-red-100! dark:bg-red-400/15! backdrop-blur-md!" })
 }
 
 function temporaryError(message: string, toastId?: string | number) {

packages/metaport/src/components/AddToken.tsx

@@ -92,10 +92,10 @@ export default function AddToken(props: {
       if (wasAdded) {
         notify.temporarySuccess('Token added to wallet')
       } else {
-        notify.permanentError('Token was not added')
+        notify.permanentError('Token was not added', undefined, false)
       }
     } catch (error) {
-      notify.permanentError('Failed to add token')
+      notify.permanentError('Failed to add token', undefined, false)
     } finally {
       setLoading(false)
     }

packages/metaport/src/components/ErrorMessage.tsx

@@ -43,6 +43,7 @@ import {
 } from 'lucide-react'
 
 import { DEFAULT_ERROR_MSG } from '../core/constants'
+import { extractFirstSentence } from '../utils/helper'
 
 const ERROR_ICONS = {
   'link-off': <Link2Off />,
@@ -70,7 +71,7 @@ export default function Error(props: { errorMessage: dc.ErrorMessage }) {
         style={{ wordBreak: 'break-word' }}
         className="text-base text-orange-600 font-semibold grow text-center mt-2.5"
       >
-        {props.errorMessage.headline ?? DEFAULT_ERROR_MSG}
+        {extractFirstSentence(props.errorMessage.headline ?? DEFAULT_ERROR_MSG)}
       </p>
       <p className="text-xs text-secondary-foreground font-medium grow text-center mb-2.5">
         Logs are available in your browser's developer console
@@ -133,7 +134,7 @@ export default function Error(props: { errorMessage: dc.ErrorMessage }) {
               style={{ wordBreak: 'break-all' }}
               className="text-xs text-muted-foreground grow text-center ml-2.5 mr-2.5 mb-5"
             >
-              {props.errorMessage.text}
+              {extractFirstSentence(props.errorMessage.text)}
             </code>
           </div>
         </AccordionDetails>

packages/metaport/src/components/SFuelWarning.tsx

@@ -167,7 +167,7 @@ export default function SFuelWarning(props: {}) {
       if (fromPowRes) log.info(chainName1, fromPowRes.message)
       if (toPowRes) log.info(chainName2, toPowRes.message)
       if (hubPowRes) log.info(hubChain, hubPowRes.message)
-      notify.permanentError('Failed to get sFUEL', toastId)
+      notify.permanentError('Failed to get sFUEL', toastId, false)
     } else {
       notify.temporarySuccess('sFUEL received', toastId)
     }

packages/metaport/src/core/actions/bridge_balance.ts

@@ -143,7 +143,7 @@ export async function withdraw(
     setLoading(false)
   } catch (err) {
     const msg = err.message ? err.message : DEFAULT_ERROR_MSG
-    notify.permanentError(msg, toastId)
+    notify.permanentError(msg, toastId, false)
     setErrorMessage(new dc.TransactionErrorMessage(msg, errorMessageClosedFallback))
   }
 }
@@ -197,7 +197,7 @@ export async function recharge(
     notify.temporarySuccess('Bridge balance topped up', toastId)
   } catch (err) {
     const msg = err.message ? err.message : DEFAULT_ERROR_MSG
-    notify.permanentError(msg, toastId)
+    notify.permanentError(msg, toastId, false)
     setErrorMessage(new dc.TransactionErrorMessage(msg, errorMessageClosedFallback))
   } finally {
     setLoading(false)

packages/metaport/src/core/network.ts

@@ -182,13 +182,14 @@ export async function enforceNetwork(
   }
   try {
     // tmp fix for coinbase wallet
-    _networkSwitch(chainId, currentChainId, switchChain)
+    await _networkSwitch(chainId, currentChainId, switchChain)
   } catch (e) {
+    if (e.code === 'ACTION_REJECTED' || e.code === 4001) throw e
     log.info('Failed to switch network, retrying...')
     await helper.sleep(constants.DEFAULT_SLEEP)
-    _networkSwitch(chainId, currentChainId, switchChain)
+    await _networkSwitch(chainId, currentChainId, switchChain)
   }
-  await waitForNetworkChange(walletClient, currentChainId, chainId)
+  await waitForNetworkChange(walletClient, currentChainId, chainId, 2000, 15)
   await helper.sleep(constants.DEFAULT_SLEEP)
   log.info(`Network switched to ${chainId}`)
   return chainId

packages/metaport/src/store/MetaportStore.ts

@@ -37,6 +37,7 @@ import { ActionConstructor } from '../core/actions/action'
 import { isTrailsAction } from '../core/actions/trails'
 import { isMesonAction } from '../core/actions/meson'
 import { getEmptyCommunityPoolData, getCommunityPoolData } from '../core/community_pool'
+import { TimeoutException } from '../core/exceptions'
 
 const log = new Logger<ILogObj>({ name: 'metaport:core:state' })
 let checkRequestId = 0
@@ -191,7 +192,9 @@ export const useMetaportStore = create<MetaportState>()((set, get) => ({
         console.error(err)
         const msg = err.message
         let headline
-        if (err.code && err.code === 'ACTION_REJECTED') {
+        if (err instanceof TimeoutException) {
+          headline = 'Network switch timed out'
+        } else if (err.code && err.code === 'ACTION_REJECTED') {
           headline = 'Transaction signing was rejected'
         } else {
           headline = TRANSFER_ERROR_MSG
@@ -202,6 +205,7 @@ export const useMetaportStore = create<MetaportState>()((set, get) => ({
         if (err.shortMessage) {
           headline = err.shortMessage
         }
+        headline = headline.split(/[.\n(]/)[0].trim()
         headline = headline.charAt(0).toUpperCase() + headline.slice(1)
 
         notify.permanentError(headline)

src/components/GetSFuel.tsx

@@ -53,7 +53,7 @@ function SingleChainSFuel({ chainName, mpc }: { chainName: string; mpc: Metaport
       try {
         const { ok: mined } = await station.doPoW(addr)
         if (!mined) {
-          notify.permanentError('Failed to get sFUEL', toastId)
+          notify.permanentError('Failed to get sFUEL', toastId, false)
           return
         }
         await new Promise((r) => setTimeout(r, 3000))
@@ -63,7 +63,7 @@ function SingleChainSFuel({ chainName, mpc }: { chainName: string; mpc: Metaport
         if (ok) {
           notify.temporarySuccess('sFUEL received', toastId)
         } else {
-          notify.permanentError('Failed to get sFUEL', toastId)
+          notify.permanentError('Failed to get sFUEL', toastId, false)
         }
       } finally {
         setLoading(false)

src/components/MonthSelector.tsx

@@ -35,7 +35,6 @@ export default function MonthSelector(props: {
   max: number
   topupPeriod: number
   setTopupPeriod: any
-  setErrorMsg: (errorMsg: string | undefined) => void
   className?: string
 }) {
   const [monthRecommendations, setMonthRecommendations] = useState<number[]>(MONTH_RECOMMENDATIONS)
@@ -99,21 +98,18 @@ export default function MonthSelector(props: {
                   !Number.isInteger(Number(textPeriod)) ||
                   Number(textPeriod) <= 0
                 ) {
-                  notify.temporaryError('Incorrect top-up period')
-                  props.setErrorMsg('Incorrect top-up period')
+                  notify.permanentError('Incorrect top-up period', undefined, false)
                   return
                 }
                 if (props.max < Number(textPeriod)) {
-                  notify.temporaryError(`Max topup amount: ${formatTimePeriod(props.max, 'month')}`)
-                  props.setErrorMsg(`Max topup amount: ${formatTimePeriod(props.max, 'month')}`)
+                  notify.permanentError(`Max topup amount: ${formatTimePeriod(props.max, 'month')}`, undefined, false)
                   return
                 }
                 setOpenCustom(false)
                 if (!monthRecommendations.includes(Number(textPeriod))) {
                   setCustomPeriod(Number(textPeriod))
                 }
                 props.setTopupPeriod(Number(textPeriod))
-                props.setErrorMsg(undefined)
               }}
             >
               <p className=" text-foreground! ml-1.5">Apply</p>

src/components/Paymaster.tsx

@@ -57,7 +57,6 @@ export default function Paymaster(props: {
   const paymasterChain = contracts.paymaster.getPaymasterChain(network)
 
   const [btnText, setBtnText] = useState<string | undefined>()
-  const [errorMsg, setErrorMsg] = useState<string | undefined>()
   const [loading, setLoading] = useState<boolean>(false)
   const [inited, setInited] = useState<boolean>(false)
 
@@ -105,13 +104,11 @@ export default function Paymaster(props: {
   async function topupChain() {
     if (!paymaster) return
     if (!paymaster.runner?.provider || !walletClient || !switchChainAsync) {
-      setErrorMsg('Something is wrong with your wallet, try again')
-      notify.permanentError('Something is wrong with your wallet, try again')
+      notify.permanentError('Something is wrong with your wallet, try again', undefined, false)
       return
     }
     setLoading(true)
     setBtnText(`Switch network to ${metadata.getAlias(network, props.chainsMeta, paymasterChain)}`)
-    setErrorMsg(undefined)
     try {
       const { chainId } = await paymaster.runner.provider.getNetwork()
       const paymasterAddress = contracts.paymaster.getPaymasterAddress(network)
@@ -139,7 +136,6 @@ export default function Paymaster(props: {
       await loadPaymasterInfo()
     } catch (e: any) {
       const errMsg = e.toString()
-      setErrorMsg(errMsg)
       notify.permanentError(errMsg)
     } finally {
       setLoading(false)
@@ -198,8 +194,6 @@ export default function Paymaster(props: {
           topupChain={topupChain}
           btnText={btnText}
           loading={loading}
-          errorMsg={errorMsg}
-          setErrorMsg={setErrorMsg}
         />
       )}
     </div>

src/components/SchainDetails.tsx

@@ -95,8 +95,12 @@ export default function SchainDetails(props: {
       })
       setAdded(true)
       notify.temporarySuccess(`Connected to ${networkParams.chainName}`)
-    } catch (e) {
-      console.error(e)
+    } catch (e: any) {
+      if (e?.code === 4001) {
+        notify.permanentError('Connect to chain cancelled', undefined, false)
+      } else {
+        notify.permanentError('Failed to connect chain', undefined, false)
+      }
     } finally {
       setLoading(false)
     }

src/components/Topup.tsx

@@ -32,7 +32,6 @@ import { ClockPlus } from 'lucide-react'
 import SkStack from './SkStack'
 import MonthSelector from './MonthSelector'
 import Loader from './Loader'
-import ErrorTile from './ErrorTile'
 import { formatTimePeriod, monthsBetweenNowAndTimestamp } from '../core/timeHelper'
 
 export default function Topup(props: {
@@ -44,8 +43,6 @@ export default function Topup(props: {
   tokenBalance: bigint | undefined
   topupChain: () => Promise<void>
   btnText: string | undefined
-  errorMsg: string | undefined
-  setErrorMsg: (errorMsg: string | undefined) => void
   loading: boolean
 }) {
   if (props.tokenBalance === undefined) return <Loader text="Loading balance info" />
@@ -80,7 +77,6 @@ export default function Topup(props: {
               max={maxTopupPeriod}
               topupPeriod={props.topupPeriod}
               setTopupPeriod={props.setTopupPeriod}
-              setErrorMsg={props.setErrorMsg}
             />
           }
           className="w-full!"
@@ -112,7 +108,6 @@ export default function Topup(props: {
           color={balanceOk ? undefined : 'error'}
         />
       </SkStack>
-      <ErrorTile errorMsg={props.errorMsg} setErrorMsg={props.setErrorMsg} />
       <div className="mt-5 mb-2.5 ml-1.5">
         <div className="flex flex-col md:flex-row gap-2.5">
           <Button

src/components/credits/ChainCreditsTile.tsx

@@ -68,7 +68,6 @@ interface ChainCreditsTileProps {
   creditStation: Contract | undefined
   tokenPrices: Record<string, bigint>
   tokenBalances: types.mp.TokenBalancesMap | undefined
-  setErrorMsg: (msg: string | undefined) => void
 }
 
 const ChainCreditsTile: React.FC<ChainCreditsTileProps> = ({
@@ -77,8 +76,7 @@ const ChainCreditsTile: React.FC<ChainCreditsTileProps> = ({
   schain,
   creditStation,
   tokenPrices,
-  tokenBalances,
-  setErrorMsg
+  tokenBalances
 }) => {
   const [openModal, setOpenModal] = useState(false)
   const [loading, setLoading] = useState<boolean>(false)
@@ -148,13 +146,11 @@ const ChainCreditsTile: React.FC<ChainCreditsTileProps> = ({
   async function buyCredits() {
     if (!creditStation || !token) return
     if (!creditStation.runner?.provider || !walletClient || !switchChainAsync) {
-      setErrorMsg('Something is wrong with your wallet, try again')
-      notify.permanentError('Something is wrong with your wallet, try again')
+      notify.permanentError('Something is wrong with your wallet, try again', undefined, false)
       setOpenModal(false)
       return
     }
     setLoading(true)
-    setErrorMsg(undefined)
 
     try {
       const tokenAddress = tokens[token].address
@@ -191,7 +187,6 @@ const ChainCreditsTile: React.FC<ChainCreditsTileProps> = ({
       notify.temporarySuccess(`Credits purchased for ${chainAlias}`)
     } catch (e: any) {
       const errMsg = e.toString()
-      setErrorMsg(errMsg)
       notify.permanentError(errMsg)
     } finally {
       setLoading(false)

src/components/credits/CreditStationStatusTile.tsx

@@ -38,13 +38,11 @@ import { Badge, BadgeCheck, ToggleLeft, ToggleRight } from 'lucide-react'
 interface CreditStationStatusTileProps {
   mpc: MetaportCore
   creditStation: Contract | undefined
-  setErrorMsg: (msg: string) => void
 }
 
 const CreditStationStatusTile: React.FC<CreditStationStatusTileProps> = ({
   mpc,
-  creditStation,
-  setErrorMsg
+  creditStation
 }) => {
   const [isPaused, setIsPaused] = useState<boolean>(false)
   const [loading, setLoading] = useState<boolean>(false)
@@ -71,8 +69,7 @@ const CreditStationStatusTile: React.FC<CreditStationStatusTileProps> = ({
   async function togglePause() {
     if (!creditStation) return
     if (!creditStation.runner?.provider || !walletClient || !switchChainAsync) {
-      setErrorMsg('Something is wrong with your wallet, try again')
-      notify.permanentError('Something is wrong with your wallet, try again')
+      notify.permanentError('Something is wrong with your wallet, try again', undefined, false)
       return
     }
     setLoading(true)
@@ -93,8 +90,7 @@ const CreditStationStatusTile: React.FC<CreditStationStatusTileProps> = ({
       notify.temporarySuccess(`Credit station ${action}d`)
       await loadPausedStatus()
     } catch (error) {
-      setErrorMsg('Transaction failed')
-      notify.permanentError('Transaction failed')
+      notify.permanentError('Transaction failed', undefined, false)
     } finally {
       setLoading(false)
     }

src/components/credits/CreditsPaymentTile.tsx

@@ -57,7 +57,6 @@ interface CreditsPaymentTileProps {
   ledgerContract: Contract | undefined
   creditStation: Contract | undefined
   isAdmin?: boolean
-  setErrorMsg: (msg: string | undefined) => void
 }
 
 const CreditsPaymentTile: React.FC<CreditsPaymentTileProps> = ({
@@ -66,8 +65,7 @@ const CreditsPaymentTile: React.FC<CreditsPaymentTileProps> = ({
   chainsMeta,
   ledgerContract,
   creditStation,
-  isAdmin = false,
-  setErrorMsg
+  isAdmin = false
 }) => {
   const network = mpc.config.skaleNetwork
   const chainAlias = metadata.getAlias(network, chainsMeta, payment.schainName)
@@ -94,7 +92,7 @@ const CreditsPaymentTile: React.FC<CreditsPaymentTileProps> = ({
         if (!provider) return
         const block = await provider.getBlock(payment.blockNumber)
         if (block) setTxTimestamp(block.timestamp)
-      } catch (error) {}
+      } catch (error) { }
     }
     fetchTimestamp()
   }, [creditStation, payment])
@@ -104,7 +102,7 @@ const CreditsPaymentTile: React.FC<CreditsPaymentTileProps> = ({
     const checkFulfillment = async () => {
       try {
         setIsFulfilled(await ledgerContract.isFulfilled(payment.id))
-      } catch (error) {}
+      } catch (error) { }
     }
     checkFulfillment()
     const interval = setInterval(checkFulfillment, 10000)
@@ -114,7 +112,6 @@ const CreditsPaymentTile: React.FC<CreditsPaymentTileProps> = ({
   async function fulfillPayment() {
     if (!ledgerContract) return
     setLoading(true)
-    setErrorMsg(undefined)
 
     try {
       const signer = await cs.prepareSignerForWrite(
@@ -136,7 +133,6 @@ const CreditsPaymentTile: React.FC<CreditsPaymentTileProps> = ({
       notify.temporarySuccess('Payment fulfilled')
     } catch (e: any) {
       const errMsg = e.toString()
-      setErrorMsg(errMsg)
       notify.permanentError(errMsg)
     } finally {
       setLoading(false)