PR updates

src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx

@@ -12,7 +12,7 @@ import { InvestOptionProps } from '.'
 import { ApprovalState } from 'hooks/useApproveCallback'
 import { useCurrencyBalance } from 'state/wallet/hooks'
 import { useActiveWeb3React } from 'hooks/web3'
-import { useClaimDispatchers } from 'state/claim/hooks'
+import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
 
 import { ButtonConfirmed } from 'components/Button'
 import { ButtonSize } from 'theme'
@@ -49,9 +49,12 @@ const InvestMaxBalance = styled.button`
 
 const INVESTMENT_STEPS = [0, 25, 50, 75, 100]
 
-export default function InvestOption({ approveData, claim }: InvestOptionProps) {
-  const { currencyAmount, price, cost: maxCost, investedAmount } = claim
+export default function InvestOption({ approveData, claim, optionIndex }: InvestOptionProps) {
+  const { currencyAmount, price, cost: maxCost } = claim
   const { updateInvestAmount } = useClaimDispatchers()
+  const { investFlowData } = useClaimState()
+
+  const investedAmount = useMemo(() => investFlowData[optionIndex].investedAmount, [investFlowData, optionIndex])
 
   const [percentage, setPercentage] = useState<number>(0)
 
@@ -61,23 +64,39 @@ export default function InvestOption({ approveData, claim }: InvestOptionProps)
 
   const balance = useCurrencyBalance(account || undefined, token)
 
-  const scaleValue = useCallback((number: number, inMin: number, inMax: number, outMin: number, outMax: number) => {
-    return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin
-  }, [])
+  const decimals = balance?.currency?.decimals
+
+  const scaleValue = useCallback(
+    (maxValue: string, value: number) => {
+      if (value === 0) {
+        return parseUnits('0', decimals)
+      }
+
+      // parse percent to string, example 25% -> 4 or 50% -> 2
+      const parsedValue = parseUnits((100 / value).toFixed(decimals), decimals)
+
+      // parse maxValue to string
+      const parsedMaxValue = parseUnits(maxValue, decimals)
+
+      // divide parsedMax with parsed value to get invest amount
+      return parsedMaxValue.div(parsedValue).toString()
+    },
+    [decimals]
+  )
 
   const handleStepChange = useCallback(
     (value: number) => {
       if (!maxCost || !balance) {
         return
       }
 
-      const maxInvestAmount = formatUnits(maxCost.quotient.toString(), balance.currency.decimals)
-      const newInvestAmount = scaleValue(value, 0, 100, 0, Number(maxInvestAmount))
+      const scaled = scaleValue(maxCost.quotient.toString(), value)
+      const amount = formatUnits(scaled, decimals)
 
-      updateInvestAmount({ index: claim.index, amount: String(newInvestAmount) })
+      updateInvestAmount({ index: optionIndex, amount })
       setPercentage(value)
     },
-    [balance, claim.index, maxCost, scaleValue, updateInvestAmount]
+    [balance, decimals, maxCost, optionIndex, scaleValue, updateInvestAmount]
   )
 
   const onMaxClick = useCallback(() => {
@@ -87,11 +106,11 @@ export default function InvestOption({ approveData, claim }: InvestOptionProps)
 
     const amount = maxCost.greaterThan(balance) ? balance : maxCost
     // store the value as a string to prevent unnecessary re-renders
-    const investAmount = formatUnits(amount.quotient.toString(), balance.currency.decimals)
+    const investAmount = formatUnits(amount.quotient.toString(), decimals)
 
-    updateInvestAmount({ index: claim.index, amount: investAmount })
+    updateInvestAmount({ index: optionIndex, amount: investAmount })
     setPercentage(100)
-  }, [balance, claim.index, maxCost, updateInvestAmount])
+  }, [balance, decimals, maxCost, optionIndex, updateInvestAmount])
 
   // Cache approveData methods
   const approveCallback = approveData?.approveCallback
@@ -113,11 +132,12 @@ export default function InvestOption({ approveData, claim }: InvestOptionProps)
   }, [approveCallback, token?.symbol])
 
   const vCowAmount = useMemo(() => {
-    if (!token || !price) {
+    if (!token || !price || !investedAmount) {
       return
     }
 
-    const investA = CurrencyAmount.fromRawAmount(token, parseUnits(investedAmount, token.decimals).toString())
+    const parsedA = parseUnits(investedAmount, token.decimals).toString()
+    const investA = CurrencyAmount.fromRawAmount(token, parsedA)
     return investA.multiply(price)
   }, [investedAmount, price, token])
 

src/custom/pages/Claim/InvestmentFlow/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import {
   InvestFlow,
   InvestContent,
@@ -14,12 +14,9 @@ import { useActiveWeb3React } from 'hooks/web3'
 import { ApprovalState, OptionalApproveCallbackParams } from 'hooks/useApproveCallback'
 import InvestOption from './InvestOption'
 
-export type InvestmentClaimProps = EnhancedUserClaimData & {
-  investedAmount: string
-}
-
 export type InvestOptionProps = {
-  claim: InvestmentClaimProps
+  claim: EnhancedUserClaimData
+  optionIndex: number
   approveData:
     | { approveState: ApprovalState; approveCallback: (optionalParams?: OptionalApproveCallbackParams) => void }
     | undefined
@@ -50,10 +47,14 @@ function _claimToTokenApproveData(claimType: ClaimType, tokenApproveData: TokenA
 
 export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenApproveData }: InvestmentFlowProps) {
   const { account } = useActiveWeb3React()
-  const { activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep, investFlowData } = useClaimState()
+  const { selected, activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep } = useClaimState()
   const { initInvestFlowData } = useClaimDispatchers()
   const claimData = useUserEnhancedClaimData(activeClaimAccount)
 
+  const selectedClaims = useMemo(() => {
+    return claimData.filter(({ index }) => selected.includes(index))
+  }, [claimData, selected])
+
   useEffect(() => {
     initInvestFlowData(isInvestFlowActive ? claimData : [])
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -93,9 +94,10 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
             up to a predefined maximum amount of tokens{' '}
           </p>
 
-          {investFlowData.map((claim) => (
+          {selectedClaims.map((claim, index) => (
             <InvestOption
               key={claim.index}
+              optionIndex={index}
               approveData={_claimToTokenApproveData(claim.type, tokenApproveData)}
               claim={claim}
             />

src/custom/pages/Claim/index.tsx

@@ -177,7 +177,7 @@ export default function Claim() {
   // on account change
   useEffect(() => {
     if (!isSearchUsed && account) {
-      setActiveClaimAccount('0xD5e900280Eb1aDe4E583c2bF2414be247E298435')
+      setActiveClaimAccount(account)
     }
 
     if (!account) {

src/custom/state/claim/reducer.ts

@@ -14,7 +14,6 @@ import {
   setSelectedAll,
   ClaimStatus,
 } from './actions'
-import { InvestmentClaimProps } from 'pages/Claim/InvestmentFlow'
 
 export const initialState: ClaimState = {
   // address/ENS address
@@ -36,6 +35,13 @@ export const initialState: ClaimState = {
   selectedAll: false,
 }
 
+export type InvestClaim = {
+  index: number
+  inputAmount?: string
+  investedAmount?: string
+  vCowAmount?: string
+}
+
 export type ClaimState = {
   // address/ENS address
   inputAddress: string
@@ -50,7 +56,7 @@ export type ClaimState = {
   // investment
   isInvestFlowActive: boolean
   investFlowStep: number
-  investFlowData: InvestmentClaimProps[]
+  investFlowData: InvestClaim[]
   // table select change
   selected: number[]
   selectedAll: boolean
@@ -85,24 +91,14 @@ export default createReducer(initialState, (builder) =>
     .addCase(initInvestFlowData, (state, { payload }) => {
       const { selected } = current(state)
 
-      const data = payload.reduce<InvestmentClaimProps[]>((acc, claim) => {
-        if (selected.includes(claim.index)) {
-          acc.push({ ...claim, investedAmount: '0' })
-        }
-
-        return acc
-      }, [])
+      const data = payload
+        .filter(({ index }) => selected.includes(index))
+        .map(({ index }) => ({ index, investedAmount: '0' }))
 
       state.investFlowData.push(...data)
     })
     .addCase(updateInvestAmount, (state, { payload: { index, amount } }) => {
-      const { investFlowData } = current(state)
-
-      const claimIndex = investFlowData.findIndex((claim) => claim.index === index)
-
-      if (claimIndex !== -1) {
-        state.investFlowData[claimIndex].investedAmount = amount
-      }
+      state.investFlowData[index].investedAmount = amount
     })
     .addCase(setSelected, (state, { payload }) => {
       state.selected = payload