Claimed amount on success screen (#2253)

* Updated redux type for claimedAmount and resetting with other props as well * Moved helper function out of hook callback body * Returning claimed vCow amount from the claim callback * Updating claimedAmount after claim callback is called * Displaying claimed amount on success page * Claim callback won't return undefined Co-authored-by: Leandro <[email protected]>
gnosis · Jan 24, 2022 · f4ae160 · f4ae160
1 parent f5fe248
commit f4ae160
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 31 deletions.
diff --git a/src/custom/pages/Claim/ClaimingStatus.tsx b/src/custom/pages/Claim/ClaimingStatus.tsx
@@ -8,11 +8,10 @@ import CowProtocolLogo from 'components/CowProtocolLogo'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 import { useAllClaimingTransactions } from 'state/enhancedTransactions/hooks'
 import { useMemo } from 'react'
-// import { formatSmartLocationAware } from 'utils/format'
 
 export default function ClaimingStatus() {
   const { chainId } = useActiveWeb3React()
-  const { activeClaimAccount, claimStatus /* , claimedAmount */ } = useClaimState()
+  const { activeClaimAccount, claimStatus, claimedAmount } = useClaimState()
 
   const allClaimTxs = useAllClaimingTransactions()
   const lastClaimTx = useMemo(() => {
@@ -39,17 +38,15 @@ export default function ClaimingStatus() {
         )}
       </ConfirmedIcon>
       <h3>{isConfirmed ? 'Claimed!' : 'Claiming'}</h3>
-      {/* TODO: fix this in new pr */}
-      {!isConfirmed && <Trans>{/* formatSmartLocationAware(claimedAmount) || '0' */} vCOW</Trans>}
+      {!isConfirmed && <Trans>{claimedAmount} vCOW</Trans>}
 
       {isConfirmed && (
         <>
           <Trans>
             <h3>You have successfully claimed</h3>
           </Trans>
           <Trans>
-            {/* TODO: fix this in new pr */}
-            <p>{/* formatSmartLocationAware(claimedAmount) || '0' */} vCOW</p>
+            <p>{claimedAmount} vCOW</p>
           </Trans>
           <Trans>
             <span role="img" aria-label="party-hat">

diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx
@@ -68,7 +68,7 @@ export default function Claim() {
     setIsSearchUsed,
     // claiming
     setClaimStatus,
-    // setClaimedAmount, // TODO: uncomment when used
+    setClaimedAmount,
     // investing
     setIsInvestFlowActive,
     // claim row selection
@@ -126,8 +126,9 @@ export default function Claim() {
     const sendTransaction = (inputData: ClaimInput[]) => {
       setClaimStatus(ClaimStatus.ATTEMPTING)
       claimCallback(inputData)
-        .then((/* res */) => {
+        .then((vCowAmount) => {
           setClaimStatus(ClaimStatus.SUBMITTED)
+          setClaimedAmount(vCowAmount)
         })
         .catch((error) => {
           setClaimStatus(ClaimStatus.DEFAULT)
@@ -159,6 +160,7 @@ export default function Claim() {
     investFlowStep,
     setClaimStatus,
     claimCallback,
+    setClaimedAmount,
     handleSetError,
     investFlowData,
     setIsInvestFlowActive,

diff --git a/src/custom/state/claim/actions.ts b/src/custom/state/claim/actions.ts
@@ -18,7 +18,7 @@ export type ClaimActions = {
 
   // claiming
   setClaimStatus: (payload: ClaimStatus) => void
-  setClaimedAmount: (payload: number) => void
+  setClaimedAmount: (payload: string) => void
 
   // investing
   setIsInvestFlowActive: (payload: boolean) => void
@@ -41,7 +41,7 @@ export const setActiveClaimAccountENS = createAction<string>('claim/setActiveCla
 export const setIsSearchUsed = createAction<boolean>('claim/setIsSearchUsed')
 
 // claiming
-export const setClaimedAmount = createAction<number>('claim/setClaimedAmount')
+export const setClaimedAmount = createAction<string>('claim/setClaimedAmount')
 export const setClaimStatus = createAction<ClaimStatus>('claim/setClaimStatus')
 
 // investing

diff --git a/src/custom/state/claim/hooks/index.ts b/src/custom/state/claim/hooks/index.ts
@@ -15,7 +15,7 @@ import { useTransactionAdder } from 'state/enhancedTransactions/hooks'
 
 import { GpEther, V_COW } from 'constants/tokens'
 
-import { formatSmart } from 'utils/format'
+import { formatSmartLocaleAware } from 'utils/format'
 import { calculateGasMargin } from 'utils/calculateGasMargin'
 import { isAddress } from 'utils'
 
@@ -57,6 +57,7 @@ import {
 } from '../actions'
 import { EnhancedUserClaimData } from 'pages/Claim/types'
 import { supportedChainId } from 'utils/supportedChainId'
+import { AMOUNT_PRECISION } from 'constants/index'
 
 const CLAIMS_REPO_BRANCH = '2022-01-22-test-deployment-all-networks'
 export const CLAIMS_REPO = `https://raw.githubusercontent.com/gnosis/cow-merkle-drop/${CLAIMS_REPO_BRANCH}/`
@@ -413,7 +414,7 @@ function _validateClaimable(
  * @param account
  */
 export function useClaimCallback(account: string | null | undefined): {
-  claimCallback: (claimInputs: ClaimInput[]) => Promise<string | undefined>
+  claimCallback: (claimInputs: ClaimInput[]) => Promise<string>
 } {
   // get claim data for given account
   const { chainId, account: connectedAccount } = useActiveWeb3React()
@@ -441,21 +442,13 @@ export function useClaimCallback(account: string | null | undefined): {
     },
   })
 
-  /**
-   * Extend the Payable optional param
-   */
-  function _extendFinalArg(args: ClaimManyFnArgs, extendedArg: Record<any, any>) {
-    const lastArg = args.pop()
-    args.push({
-      ...lastArg, // add back whatever is already there
-      ...extendedArg,
-    })
-
-    return args
-  }
-
   const claimCallback = useCallback(
-    async function (claimInput: ClaimInput[]) {
+    /**
+     * Claim callback that sends tx to wallet to claim whatever user selected
+     *
+     * Returns a string with the formatted vCow amount being claimed
+     */
+    async function (claimInput: ClaimInput[]): Promise<string> {
       if (
         claims.length === 0 ||
         claimInput.length === 0 ||
@@ -484,6 +477,7 @@ export function useClaimCallback(account: string | null | undefined): {
       }
 
       const vCowAmount = CurrencyAmount.fromRawAmount(vCowToken, totalClaimedAmount)
+      const formattedVCowAmount = formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || '0'
 
       return vCowContract.estimateGas.claimMany(...args).then((estimatedGas) => {
         // Last item in the array contains the call overrides
@@ -495,10 +489,10 @@ export function useClaimCallback(account: string | null | undefined): {
         return vCowContract.claimMany(...extendedArgs).then((response: TransactionResponse) => {
           addTransaction({
             hash: response.hash,
-            summary: `Claim ${formatSmart(vCowAmount)} vCOW`,
+            summary: `Claim ${formattedVCowAmount} vCOW`,
             claim: { recipient: account, indices: args[0] as number[] },
           })
-          return response.hash
+          return formattedVCowAmount
         })
       })
     },
@@ -670,6 +664,19 @@ function _getClaimValue(claim: UserClaimData, vCowAmount: string, nativeTokenPri
   return JSBI.divide(claimValueInAtomsSquared, DENOMINATOR).toString()
 }
 
+/**
+ * Extend the Payable optional param
+ */
+function _extendFinalArg(args: ClaimManyFnArgs, extendedArg: Record<any, any>) {
+  const lastArg = args.pop()
+  args.push({
+    ...lastArg, // add back whatever is already there
+    ...extendedArg,
+  })
+
+  return args
+}
+
 type LastAddress = string
 type ClaimAddressMapping = { [firstAddress: string]: LastAddress }
 const FETCH_CLAIM_MAPPING_PROMISES: Record<number, Promise<ClaimAddressMapping> | null> = {}
@@ -766,7 +773,7 @@ export function useClaimDispatchers() {
       setIsSearchUsed: (payload: boolean) => dispatch(setIsSearchUsed(payload)),
       // claiming
       setClaimStatus: (payload: ClaimStatus) => dispatch(setClaimStatus(payload)),
-      setClaimedAmount: (payload: number) => dispatch(setClaimedAmount(payload)),
+      setClaimedAmount: (payload: string) => dispatch(setClaimedAmount(payload)),
       // investing
       setIsInvestFlowActive: (payload: boolean) => dispatch(setIsInvestFlowActive(payload)),
       setInvestFlowStep: (payload: number) => dispatch(setInvestFlowStep(payload)),

diff --git a/src/custom/state/claim/reducer.ts b/src/custom/state/claim/reducer.ts
@@ -27,7 +27,7 @@ export const initialState: ClaimState = {
   isSearchUsed: false,
   // claiming
   claimStatus: ClaimStatus.DEFAULT,
-  claimedAmount: 0,
+  claimedAmount: '',
   // investment
   isInvestFlowActive: false,
   investFlowStep: 0,
@@ -53,7 +53,7 @@ export type ClaimState = {
   isSearchUsed: boolean
   // claiming
   claimStatus: ClaimStatus
-  claimedAmount: number
+  claimedAmount: string
   // investment
   isInvestFlowActive: boolean
   investFlowStep: number
@@ -117,5 +117,6 @@ export default createReducer(initialState, (builder) =>
       state.selectedAll = initialState.selectedAll
       state.investFlowStep = initialState.investFlowStep
       state.isInvestFlowActive = initialState.isInvestFlowActive
+      state.claimedAmount = initialState.claimedAmount
     })
 )