feat: handle tx success and error states

Author: nikkaroraa

packages/frontend/src/components/Lp/MintAndLp/DepositPreviewModal.tsx

@@ -27,7 +27,7 @@ const useWaitForConfirmationStyles = makeStyles((theme) =>
   }),
 )
 
-const WaitForConfirmation: React.FC<{ onComplete: () => void }> = ({ onComplete }) => {
+const WaitForConfirmation: React.FC = () => {
   const classes = useWaitForConfirmationStyles()
 
   return (
@@ -39,11 +39,6 @@ const WaitForConfirmation: React.FC<{ onComplete: () => void }> = ({ onComplete
       </div>
 
       <Typography className={classes.title}>Confirm transaction in your wallet</Typography>
-      <Box>
-        <AltPrimaryButton id="confirm-tx-btn" onClick={onComplete} fullWidth>
-          Simulate confirm transaction
-        </AltPrimaryButton>
-      </Box>
     </Box>
   )
 }
@@ -87,6 +82,9 @@ const useTxStatusStyles = makeStyles({
     fontWeight: 700,
     letterSpacing: '-0.01em',
   },
+  errorMessage: {
+    fontSize: '18px',
+  },
   stepLabel: {
     fontSize: '16px',
     color: 'rgba(255, 255, 255, 0.7)',
@@ -96,9 +94,12 @@ const useTxStatusStyles = makeStyles({
     fontWeight: 700,
     color: 'rgba(255, 255, 255, 1)',
   },
+  buttonMargin: {
+    marginTop: '32px',
+  },
 })
 
-const TxStatus: React.FC<{ onComplete: () => void }> = ({ onComplete }) => {
+const TxStatusSuccess: React.FC<{ onComplete: () => void }> = ({ onComplete }) => {
   const classes = useTxStatusStyles()
   const stepperClasses = useStepperStyles()
 
@@ -131,6 +132,23 @@ const TxStatus: React.FC<{ onComplete: () => void }> = ({ onComplete }) => {
   )
 }
 
+const TxStatusFail: React.FC<{ message: string; onBackClick: () => void }> = ({ message, onBackClick }) => {
+  const classes = useTxStatusStyles()
+
+  return (
+    <Box display="flex" flexDirection="column" gridGap="24px">
+      <Typography className={classes.title}>Deposit failed!</Typography>
+      <Typography variant="body1" className={classes.errorMessage}>
+        {message}
+      </Typography>
+
+      <AltPrimaryButton id="go-back-btn" onClick={onBackClick} fullWidth className={classes.buttonMargin}>
+        Go back
+      </AltPrimaryButton>
+    </Box>
+  )
+}
+
 const useModalStyles = makeStyles((theme) =>
   createStyles({
     container: {
@@ -154,23 +172,48 @@ type DepositPreviewModalProps = {
 
 const DepositPreviewModal: React.FC<DepositPreviewModalProps> = ({ isOpen, onClose, squeethToMint }) => {
   const [activeStep, setActiveStep] = React.useState(0)
+  const [txError, setTxError] = React.useState('')
 
-  const handleNext = () => setActiveStep((prevActiveStep) => prevActiveStep + 1)
+  const toConfirmationStep = () => setActiveStep(1)
+  const toTxStatusStep = () => setActiveStep(2)
   const resetStep = () => setActiveStep(0)
 
   const handleClose = () => {
+    setTxError('')
     resetStep()
     onClose()
   }
 
+  const handleTxFail = (message: string) => {
+    setTxError(message)
+    toTxStatusStep()
+  }
+
+  const resetErrorAndGoBack = () => {
+    setTxError('')
+    resetStep
+  }
+
   const classes = useModalStyles()
 
   return (
     <Modal open={isOpen} onClose={handleClose} aria-labelledby="modal-title">
       <Box className={classes.container}>
-        {activeStep === 0 && <LpSettings onComplete={handleNext} squeethToMint={squeethToMint} />}
-        {activeStep === 1 && <WaitForConfirmation onComplete={handleNext} />}
-        {activeStep === 2 && <TxStatus onComplete={handleClose} />}
+        {activeStep === 0 && (
+          <LpSettings
+            squeethToMint={squeethToMint}
+            onConfirm={toConfirmationStep}
+            onTxSuccess={toTxStatusStep}
+            onTxFail={(message) => handleTxFail(message)}
+          />
+        )}
+        {activeStep === 1 && <WaitForConfirmation />}
+        {activeStep === 2 &&
+          (!!txError ? (
+            <TxStatusFail message={txError} onBackClick={resetErrorAndGoBack} />
+          ) : (
+            <TxStatusSuccess onComplete={handleClose} />
+          ))}
       </Box>
     </Modal>
   )

packages/frontend/src/components/Lp/MintAndLp/LpSettings.tsx

@@ -17,6 +17,7 @@ import { useGetDepositAmounts, useGetTicksFromPriceRange, useOpenPositionDeposit
 import { slippageAmountAtom } from '@state/trade/atoms'
 import { toTokenAmount } from '@utils/calculations'
 import { formatNumber } from '@utils/formatter'
+import { getErrorMessage } from '@utils/error'
 import { OSQUEETH_DECIMALS } from '@constants/index'
 
 import InfoBox from './InfoBox'
@@ -113,7 +114,12 @@ const formatTokenAmount = (amount: string | number) => {
   return Number(withPrecision).toFixed(2)
 }
 
-const LpSettings: React.FC<{ onComplete: () => void; squeethToMint: string }> = ({ onComplete, squeethToMint }) => {
+const LpSettings: React.FC<{
+  squeethToMint: string
+  onConfirm: () => void
+  onTxSuccess: () => void
+  onTxFail: (message: string) => void
+}> = ({ squeethToMint, onConfirm, onTxSuccess, onTxFail }) => {
   const { oSqueeth } = useAtomValue(addressesAtom)
   const { value: squeethBalance } = useTokenBalance(oSqueeth, 15, OSQUEETH_DECIMALS)
   const ethPrice = useETHPrice()
@@ -188,16 +194,29 @@ const LpSettings: React.FC<{ onComplete: () => void; squeethToMint: string }> =
         collatRatioVal,
         slippageAmountVal,
         0,
+        () => {
+          onConfirm()
+        },
         () => {
           console.log('successfully deposited')
-          onComplete()
+          onTxSuccess()
         },
       )
-    } catch (e) {
-      console.log('transaction failed')
-      console.log(e)
+    } catch (error: unknown) {
+      console.log('deposit failed', error)
+      onTxFail(getErrorMessage(error))
     }
-  }, [squeethToMint, lowerTick, upperTick, collatRatioVal, slippageAmountVal, openLpPosition, onComplete])
+  }, [
+    squeethToMint,
+    lowerTick,
+    upperTick,
+    collatRatioVal,
+    slippageAmountVal,
+    openLpPosition,
+    onConfirm,
+    onTxSuccess,
+    onTxFail,
+  ])
 
   return (
     <>

packages/frontend/src/state/lp/hooks.ts

@@ -110,6 +110,7 @@ export const useOpenPositionDeposit = () => {
       collatRatio: number,
       slippage: number,
       withdrawAmount: number,
+      onTxRequested?: () => void,
       onTxConfirmed?: () => void,
     ) => {
       if (!squeethPoolContract || !contract || !address) return null
@@ -157,6 +158,8 @@ export const useOpenPositionDeposit = () => {
         }),
         onTxConfirmed,
       )
+
+      onTxRequested && onTxRequested()
       return txHash
     },
     [address, squeethPool, contract, handleTransaction, squeethPoolContract, isWethToken0, getDepositAmounts],

packages/frontend/src/utils/error.ts

@@ -0,0 +1,28 @@
+type ErrorWithMessage = {
+  message: string
+}
+
+function isErrorWithMessage(error: unknown): error is ErrorWithMessage {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'message' in error &&
+    typeof (error as Record<string, unknown>).message === 'string'
+  )
+}
+
+function toErrorWithMessage(maybeError: unknown): ErrorWithMessage {
+  if (isErrorWithMessage(maybeError)) return maybeError
+
+  try {
+    return new Error(JSON.stringify(maybeError))
+  } catch {
+    // fallback in case there's an error stringifying the maybeError
+    // like with circular references for example.
+    return new Error(String(maybeError))
+  }
+}
+
+export function getErrorMessage(error: unknown) {
+  return toErrorWithMessage(error).message
+}