Claim partial investments (#2234)

* Implementation to claim with invest options

* Uncomment

* Modify investedAmounts to vCowAmount for partial claiming

* Fixed bug with check for free claims

Co-authored-by: Leandro <leandro.boscariol@gnosis.io>

src/custom/pages/Claim/index.tsx

@@ -4,7 +4,7 @@ import { useActiveWeb3React } from 'hooks/web3'
 import { useUserEnhancedClaimData, useUserUnclaimedAmount, useClaimCallback, ClaimInput } from 'state/claim/hooks'
 import { PageWrapper } from 'pages/Claim/styled'
 import EligibleBanner from './EligibleBanner'
-import { getFreeClaims, hasPaidClaim, getIndexes, hasFreeClaim } from 'state/claim/hooks/utils'
+import { getFreeClaims, hasPaidClaim, hasFreeClaim, prepareInvestClaims } from 'state/claim/hooks/utils'
 import { useWalletModalToggle } from 'state/application/hooks'
 import Confetti from 'components/Confetti'
 
@@ -28,7 +28,6 @@ import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationMod
 import { GNO, USDC_BY_CHAIN } from 'constants/tokens'
 import { isSupportedChain } from 'utils/supportedChainId'
 import { useErrorModal } from 'hooks/useErrorMessageAndModal'
-import { EnhancedUserClaimData } from './types'
 import FooterNavButtons from './FooterNavButtons'
 
 const GNO_CLAIM_APPROVE_MESSAGE = 'Approving GNO for investing in vCOW'
@@ -50,6 +49,8 @@ export default function Claim() {
     investFlowStep,
     // table select change
     selected,
+    // investFlowData
+    investFlowData,
   } = useClaimState()
 
   const {
@@ -119,9 +120,7 @@ export default function Claim() {
     const sendTransaction = (inputData: ClaimInput[]) => {
       setClaimStatus(ClaimStatus.ATTEMPTING)
       claimCallback(inputData)
-        // this is not right currently
         .then((/* res */) => {
-          // I don't really understand what to expect or do here ¯\_(ツ)_/¯
           setClaimStatus(ClaimStatus.SUBMITTED)
         })
         .catch((error) => {
@@ -131,38 +130,31 @@ export default function Claim() {
         })
     }
 
+    const inputData = freeClaims.map(({ index }) => ({ index }))
+
     // check if there are any selected (paid) claims
-    let inputData
     if (!selected.length) {
-      inputData = freeClaims.map(({ index }) => ({ index }))
       console.log('Starting claiming with', inputData)
       sendTransaction(inputData)
     } else if (investFlowStep == 2) {
       // Free claimings + selected investment oportunities
-      const selectedIndex = [...getIndexes(freeClaims), ...selected]
-      inputData = selectedIndex.reduce<EnhancedUserClaimData[]>((acc, idx: number) => {
-        const claim = userClaimData.find(({ index }) => idx === index)
-        if (claim) {
-          // TODO: @nenadV91, here you can modify the amounts to use the partial investments
-          acc.push(claim)
-        }
-        return acc
-      }, [])
-
-      console.log('Starting Investment Flow', inputData)
+      const investClaims = prepareInvestClaims(investFlowData, userClaimData)
+      inputData.push(...investClaims)
+      console.log('Starting claiming with', inputData)
       sendTransaction(inputData)
     } else {
       setIsInvestFlowActive(true)
     }
   }, [
+    handleCloseError,
     activeClaimAccount,
-    investFlowStep,
-    selected,
     userClaimData,
+    selected.length,
+    investFlowStep,
+    setClaimStatus,
     claimCallback,
-    handleCloseError,
     handleSetError,
-    setClaimStatus,
+    investFlowData,
     setIsInvestFlowActive,
   ])
 

src/custom/state/claim/hooks/index.ts

@@ -616,7 +616,7 @@ type GetClaimedAmountParams = Pick<GetClaimManyArgsParams, 'account' | 'connecte
 function _getClaimedAmount({ claim, input, account, connectedAccount }: GetClaimedAmountParams): string {
   if (
     _isClaimForOther(account, connectedAccount, claim) ||
-    _isFreeClaim(claim) ||
+    isFreeClaim(claim.type) ||
     _hasNoInputOrInputIsGreaterThanClaimAmount(input, claim) ||
     // had to duplicate this check because I can't get TS to understand input.amount is not undefined in the else clause
     !input.amount
@@ -633,14 +633,7 @@ function _getClaimedAmount({ claim, input, account, connectedAccount }: GetClaim
  * Claim 100% when claiming investment for someone else
  */
 function _isClaimForOther(account: string, connectedAccount: string, claim: UserClaimData) {
-  return account !== connectedAccount && claim.type in PAID_CLAIM_TYPES
-}
-
-/**
- * Claim 100% when it's a free claim
- */
-function _isFreeClaim(claim: UserClaimData) {
-  return claim.type in FREE_CLAIM_TYPES
+  return account !== connectedAccount && !isFreeClaim(claim.type)
 }
 
 /**

src/custom/state/claim/hooks/utils.ts

@@ -17,6 +17,8 @@ import {
 } from 'state/claim/hooks/index'
 
 import { EnhancedUserClaimData, InvestmentAmounts } from 'pages/Claim/types'
+import { InvestClaim } from 'state/claim/reducer'
+import { ClaimInput } from 'state/claim/hooks/index'
 
 /**
  * Helper function to check whether any claim is an investment option
@@ -213,3 +215,20 @@ export function calculateInvestmentAmounts(
   const amount = CurrencyAmount.fromRawAmount(currencyAmount.currency, investedAmount)
   return { vCowAmount: price.quote(amount), investmentCost: amount }
 }
+
+/**
+ * Helper function that prepares investFlowData for claiming by calculating vCowAmount from investedAmounts
+ */
+export function prepareInvestClaims(investFlowData: InvestClaim[], userClaimData: EnhancedUserClaimData[]) {
+  return investFlowData.reduce<ClaimInput[]>((acc, { index, investedAmount }) => {
+    const claim = userClaimData.find(({ index: idx }) => idx === index)
+
+    if (claim) {
+      const { vCowAmount } = calculateInvestmentAmounts(claim, investedAmount)
+
+      acc.push({ index, amount: vCowAmount?.quotient.toString() })
+    }
+
+    return acc
+  }, [])
+}

src/custom/state/claim/reducer.ts

@@ -38,9 +38,7 @@ export const initialState: ClaimState = {
 
 export type InvestClaim = {
   index: number
-  inputAmount?: string
-  investedAmount?: string
-  vCowAmount?: string
+  investedAmount: string
 }
 
 export type ClaimState = {