2082/no success on failure (#2355)

* New ClaimStatus state: FAILED * Set claim tx status to ClaimStatus.FAILED when tx is not successful * Showing a new 'isFailed' UI on status component for when tx fails * Added go back button on failure to get back to claiming state * Go back button also available for successful claims * Do not count as pending txs that have been executed (have a receipt) Co-authored-by: Leandro <[email protected]>
gnosis · Jan 31, 2022 · 954d790 · 954d790
1 parent f86ed9f
commit 954d790
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 12 deletions.
diff --git a/src/custom/pages/Claim/ClaimingStatus.tsx b/src/custom/pages/Claim/ClaimingStatus.tsx
@@ -9,7 +9,7 @@ import {
   SuccessBanner,
 } from 'pages/Claim/styled'
 import { ClaimStatus } from 'state/claim/actions'
-import { useClaimState } from 'state/claim/hooks'
+import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
 import { useActiveWeb3React } from 'hooks/web3'
 import CowProtocolLogo from 'components/CowProtocolLogo'
 import { useAllClaimingTransactions } from 'state/enhancedTransactions/hooks'
@@ -28,6 +28,7 @@ import { formatMax, formatSmartLocaleAware } from 'utils/format'
 import { AMOUNT_PRECISION } from 'constants/index'
 import { shortenAddress } from 'utils'
 import CopyHelper from 'components/Copy'
+import { ButtonSecondary } from 'components/Button'
 
 const COW_TWEET_TEMPLATE =
   'I just joined the 🐮 CoWmunity @MEVprotection and claimed my first vCOW tokens! Join me at https://cowswap.exchange/'
@@ -36,6 +37,8 @@ export default function ClaimingStatus() {
   const { chainId, account } = useActiveWeb3React()
   const { activeClaimAccount, claimStatus, claimedAmount } = useClaimState()
 
+  const { setClaimStatus } = useClaimDispatchers()
+
   const allClaimTxs = useAllClaimingTransactions()
   const lastClaimTx = useMemo(() => {
     const numClaims = allClaimTxs.length
@@ -46,6 +49,7 @@ export default function ClaimingStatus() {
   const isConfirmed = claimStatus === ClaimStatus.CONFIRMED
   const isAttempting = claimStatus === ClaimStatus.ATTEMPTING
   const isSubmitted = claimStatus === ClaimStatus.SUBMITTED
+  const isFailure = claimStatus === ClaimStatus.FAILED
   const isSelfClaiming = account === activeClaimAccount
 
   if (!account || !chainId || !activeClaimAccount || claimStatus === ClaimStatus.DEFAULT) return null
@@ -60,15 +64,15 @@ export default function ClaimingStatus() {
   return (
     <ConfirmOrLoadingWrapper activeBG={true}>
       <ConfirmedIcon isConfirmed={isConfirmed}>
-        {!isConfirmed ? (
+        {!isConfirmed && !isFailure ? (
           <CowSpinner>
             <CowProtocolLogo />
           </CowSpinner>
         ) : (
           <CowProtocolLogo size={100} />
         )}
       </ConfirmedIcon>
-      <h3>{isConfirmed ? 'Claim successful!' : 'Claiming'}</h3>
+      <h3>{isConfirmed ? 'Claim successful!' : isFailure ? 'Failed to claim' : 'Claiming'}</h3>
       {!isConfirmed && (
         <Trans>
           <span title={formattedMaxVCowAmount && `${formattedMaxVCowAmount} vCOW`}>{formattedVCowAmount} vCOW</span>
@@ -146,6 +150,20 @@ export default function ClaimingStatus() {
         </AttemptFooter>
       )}
       {isSubmitted && chainId && lastClaimTx?.hash && <EnhancedTransactionLink tx={lastClaimTx} />}
+
+      {isFailure && (
+        <>
+          {chainId && lastClaimTx?.hash && <EnhancedTransactionLink tx={lastClaimTx} />}
+          <AttemptFooter>
+            <p>The claim transaction failed. Please check the network parameters and try again.</p>
+          </AttemptFooter>
+        </>
+      )}
+      {(isConfirmed || isFailure) && (
+        <ButtonSecondary onClick={() => setClaimStatus(ClaimStatus.DEFAULT)}>
+          <Trans>Go back</Trans>
+        </ButtonSecondary>
+      )}
     </ConfirmOrLoadingWrapper>
   )
 }
diff --git a/src/custom/state/claim/actions.ts b/src/custom/state/claim/actions.ts
@@ -6,6 +6,7 @@ export enum ClaimStatus {
   ATTEMPTING = 'ATTEMPTING',
   SUBMITTED = 'SUBMITTED',
   CONFIRMED = 'CONFIRMED',
+  FAILED = 'FAILED',
 }
 
 export type ClaimActions = {

diff --git a/src/custom/state/claim/middleware.ts b/src/custom/state/claim/middleware.ts
@@ -1,8 +1,8 @@
-import { Middleware, isAnyOf } from '@reduxjs/toolkit'
-import { getCowSoundSuccess, getCowSoundSend } from 'utils/sound'
+import { isAnyOf, Middleware } from '@reduxjs/toolkit'
+import { getCowSoundSend, getCowSoundSuccess } from 'utils/sound'
 import { AppState } from 'state'
-import { finalizeTransaction, addTransaction } from '../enhancedTransactions/actions'
-import { setClaimStatus, ClaimStatus } from './actions'
+import { addTransaction, finalizeTransaction } from '../enhancedTransactions/actions'
+import { ClaimStatus, setClaimStatus } from './actions'
 
 const isFinalizeTransaction = isAnyOf(finalizeTransaction)
 const isAddTransaction = isAnyOf(addTransaction)
@@ -25,9 +25,20 @@ export const claimMinedMiddleware: Middleware<Record<string, unknown>, AppState>
     const transaction = store.getState().transactions[chainId][hash]
 
     if (transaction.claim) {
-      console.debug('[stat:claim:middleware] Claim transaction finalized', transaction.hash, transaction.claim)
-      store.dispatch(setClaimStatus(ClaimStatus.CONFIRMED))
-      cowSound = getCowSoundSuccess()
+      const status = transaction.receipt?.status
+      console.debug(
+        `[stat:claim:middleware] Claim transaction finalized withs status ${status}`,
+        transaction.hash,
+        transaction.claim
+      )
+      if (status === 1) {
+        // success
+        store.dispatch(setClaimStatus(ClaimStatus.CONFIRMED))
+        cowSound = getCowSoundSuccess()
+      } else {
+        // not success...
+        store.dispatch(setClaimStatus(ClaimStatus.FAILED))
+      }
     }
   }
 

diff --git a/src/custom/state/enhancedTransactions/hooks/index.ts b/src/custom/state/enhancedTransactions/hooks/index.ts
@@ -131,8 +131,8 @@ export function useAllClaimingTransactions() {
 export function useAllClaimingTransactionIndices() {
   const claimingTransactions = useAllClaimingTransactions()
   return useMemo(() => {
-    const flattenedClaimingTransactions = claimingTransactions.reduce<number[]>((acc, { claim }) => {
-      if (claim && claim.indices) {
+    const flattenedClaimingTransactions = claimingTransactions.reduce<number[]>((acc, { claim, receipt }) => {
+      if (claim && claim.indices && !receipt) {
         acc.push(...claim.indices)
       }
       return acc