fix: show queued tx message in confirmation

opynfinance · Feb 2, 2023 · a563815 · a563815
1 parent 4626ccd
commit a563815
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 27 deletions.
diff --git a/packages/frontend/src/components/Strategies/Bull/BullTrade/Deposit.tsx b/packages/frontend/src/components/Strategies/Bull/BullTrade/Deposit.tsx
@@ -47,8 +47,7 @@ import { BULL_EVENTS } from '@utils/amplitude'
 import useExecuteOnce from '@hooks/useExecuteOnce'
 import useAmplitude from '@hooks/useAmplitude'
 import { useZenBullStyles } from './styles'
-import { BullTradeType, BullTransactionConfirmation } from './index'
-import { OngoingTransaction } from './types'
+import { OngoingTransaction, BullTradeTransactionType, BullTradeType, BullTransactionConfirmation } from './types'
 
 const OTC_PRICE_IMPACT_THRESHOLD = Number(process.env.NEXT_PUBLIC_OTC_PRICE_IMPACT_THRESHOLD) || 1
 
@@ -165,6 +164,9 @@ const BullDeposit: React.FC<{ onTxnConfirm: (txn: BullTransactionConfirmation) =
         status: true,
         amount: transaction.amount,
         tradeType: BullTradeType.Deposit,
+        transactionType: transaction.queuedTransaction
+          ? BullTradeTransactionType.Queued
+          : BullTradeTransactionType.Instant,
         txId: id,
       })
       onInputChange('0')

diff --git a/packages/frontend/src/components/Strategies/Bull/BullTrade/Withdraw.tsx b/packages/frontend/src/components/Strategies/Bull/BullTrade/Withdraw.tsx
@@ -60,8 +60,7 @@ import { BULL_EVENTS } from '@utils/amplitude'
 import useExecuteOnce from '@hooks/useExecuteOnce'
 import useTrackTransactionFlow from '@hooks/useTrackTransactionFlow'
 import { useZenBullStyles } from './styles'
-import { BullTradeType, BullTransactionConfirmation } from './index'
-import { OngoingTransaction } from './types'
+import { OngoingTransaction, BullTradeType, BullTransactionConfirmation, BullTradeTransactionType } from './types'
 
 enum WithdrawSteps {
   APPROVE = 'Approve ZenBull',
@@ -211,6 +210,9 @@ const BullWithdraw: React.FC<{ onTxnConfirm: (txn: BullTransactionConfirmation)
         status: true,
         amount: transaction.amount,
         tradeType: BullTradeType.Withdraw,
+        transactionType: transaction.queuedTransaction
+          ? BullTradeTransactionType.Queued
+          : BullTradeTransactionType.Instant,
         txId: id,
       })
       onInputChange('0')
@@ -313,7 +315,7 @@ const BullWithdraw: React.FC<{ onTxnConfirm: (txn: BullTransactionConfirmation)
   }, [useQueue, bullQueueAllowance, withdrawZenBullAmount, bullAllowance])
 
   const minZenBullAmount = toTokenAmount(minZenBullAmountValue, ZENBULL_TOKEN_DECIMALS)
-  const isWithdrawZenBullLessThanMin = withdrawAmountBN.lt(minZenBullAmount)
+  const isWithdrawZenBullLessThanMin = withdrawZenBullAmount.lt(minZenBullAmount)
 
   useEffect(() => {
     if (isNettingAuctionLive || isWithdrawZenBullLessThanMin) {

diff --git a/packages/frontend/src/components/Strategies/Bull/BullTrade/index.tsx b/packages/frontend/src/components/Strategies/Bull/BullTrade/index.tsx
@@ -1,6 +1,6 @@
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState, useMemo } from 'react'
 import { useAtomValue } from 'jotai'
 
 import { PrimaryButtonNew } from '@components/Button'
@@ -12,6 +12,7 @@ import { addressAtom } from '@state/wallet/atoms'
 import { bullEthValuePerShareAtom } from '@state/bull/atoms'
 import BullDeposit from './Deposit'
 import BullWithdraw from './Withdraw'
+import { BullTradeType, BullTransactionConfirmation, BullTradeTransactionType } from './types'
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -57,18 +58,6 @@ const useStyles = makeStyles((theme) =>
   }),
 )
 
-export enum BullTradeType {
-  Deposit = 'Deposit',
-  Withdraw = 'Withdraw',
-}
-
-export interface BullTransactionConfirmation {
-  status: boolean
-  amount: BigNumber
-  tradeType: BullTradeType
-  txId?: string
-}
-
 const TxConfirmation: React.FC<{ txnData: BullTransactionConfirmation; txnHash: string; onClose: () => void }> = ({
   txnData,
   txnHash,
@@ -77,16 +66,31 @@ const TxConfirmation: React.FC<{ txnData: BullTransactionConfirmation; txnHash:
   const bullEthValue = useAtomValue(bullEthValuePerShareAtom)
 
   const isDepositTx = txnData?.tradeType === BullTradeType.Deposit
+  const isQueuedTx = txnData?.transactionType === BullTradeTransactionType.Queued
+
   const txAmount = txnData?.amount
   const txAmountInEth = isDepositTx ? txAmount : new BigNumber(txAmount).times(bullEthValue)
+  const formattedTxAmount = txAmountInEth.toFixed(4)
+
+  const confirmationMessage = useMemo(() => {
+    if (isDepositTx) {
+      if (isQueuedTx) {
+        return `Initiated ${formattedTxAmount} ETH deposit`
+      } else {
+        return `Deposited ${formattedTxAmount} ETH`
+      }
+    } else {
+      if (isQueuedTx) {
+        return `Initiated ${formattedTxAmount} ETH withdraw`
+      } else {
+        return `Withdrawn ${formattedTxAmount} ETH`
+      }
+    }
+  }, [isDepositTx, isQueuedTx, formattedTxAmount])
 
   return (
     <>
-      <Confirmed
-        confirmationMessage={`${isDepositTx ? `Deposited` : `Withdrawn`} ${txAmountInEth.toFixed(4)} ETH`}
-        txnHash={txnHash}
-        confirmType={ConfirmType.BULL}
-      />
+      <Confirmed confirmationMessage={confirmationMessage} txnHash={txnHash} confirmType={ConfirmType.BULL} />
       <PrimaryButtonNew fullWidth id="bull-close-btn" variant="contained" onClick={onClose}>
         Close
       </PrimaryButtonNew>

diff --git a/packages/frontend/src/components/Strategies/Bull/BullTrade/types.ts b/packages/frontend/src/components/Strategies/Bull/BullTrade/types.ts
@@ -1,6 +1,24 @@
 import BigNumber from 'bignumber.js'
 
+export enum BullTradeType {
+  Deposit = 'Deposit',
+  Withdraw = 'Withdraw',
+}
+
+export enum BullTradeTransactionType {
+  Instant = 'Instant',
+  Queued = 'Queued',
+}
+
 export interface OngoingTransaction {
   amount: BigNumber
   queuedTransaction: boolean
 }
+
+export interface BullTransactionConfirmation {
+  status: boolean
+  amount: BigNumber
+  tradeType: BullTradeType
+  transactionType: BullTradeTransactionType
+  txId?: string
+}
diff --git a/packages/frontend/src/components/Strategies/Crab/CrabTradeV2/Withdraw.tsx b/packages/frontend/src/components/Strategies/Crab/CrabTradeV2/Withdraw.tsx
@@ -294,8 +294,10 @@ const CrabWithdraw: React.FC<{ onTxnConfirm: (txn: CrabTransactionConfirmation)
     (id?: string) => {
       if (!ongoingTransaction.current) return
       const transaction = ongoingTransaction.current
-      if (transaction.queuedTransaction)
+      if (transaction.queuedTransaction) {
         setCrabQueued(crabQueued.plus(fromTokenAmount(transaction.amount, CRAB_TOKEN_DECIMALS)))
+      }
+
       onTxnConfirm({
         status: true,
         amount: transaction.amount,

diff --git a/packages/frontend/src/components/Strategies/Crab/CrabTradeV2/index.tsx b/packages/frontend/src/components/Strategies/Crab/CrabTradeV2/index.tsx
@@ -45,9 +45,11 @@ const CrabTradeV2: React.FC<{ refetchCrabTokenBalance: (cb?: (newBalance: BigNum
     }, [resetTransactionData, setConfirmedTransactionData])
 
     const onTxnConfirm = useCallback(
-      (confirm?: CrabTransactionConfirmation) => {
-        setConfirmedTransactionData(confirm)
-        confirm?.id ? pollForNewTx(confirm?.id) : null
+      (data?: CrabTransactionConfirmation) => {
+        setConfirmedTransactionData(data)
+        if (data?.id) {
+          pollForNewTx(data?.id)
+        }
         refetchCrabTokenBalance()
       },
       [setConfirmedTransactionData, pollForNewTx, refetchCrabTokenBalance],