From f4ae1602c9dfd9117680e129ffe2a27b16d7ea94 Mon Sep 17 00:00:00 2001
From: Leandro Boscariol <alfetopito@users.noreply.github.com>
Date: Mon, 24 Jan 2022 06:58:44 -0800
Subject: [PATCH] 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 <leandro.boscariol@gnosis.io>
---
 src/custom/pages/Claim/ClaimingStatus.tsx |  9 ++---
 src/custom/pages/Claim/index.tsx          |  6 ++-
 src/custom/state/claim/actions.ts         |  4 +-
 src/custom/state/claim/hooks/index.ts     | 45 +++++++++++++----------
 src/custom/state/claim/reducer.ts         |  5 ++-
 5 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/custom/pages/Claim/ClaimingStatus.tsx b/src/custom/pages/Claim/ClaimingStatus.tsx
index 62a5e4f59..63eae9033 100644
--- 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,8 +38,7 @@ 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 && (
         <>
@@ -48,8 +46,7 @@ export default function ClaimingStatus() {
             <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
index 95f200851..5f60da79e 100644
--- 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
index 01bd3582d..619ef58fa 100644
--- 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
index 2a69095e2..bf4a6ee5d 100644
--- 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
index 6f48b3cdb..a273c19f1 100644
--- 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
     })
 )