Moved invest data redux

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

@@ -12,6 +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 { ButtonConfirmed } from 'components/Button'
 import { ButtonSize } from 'theme'
@@ -35,8 +36,9 @@ const RangeStep = styled.button`
 
 const INVESTMENT_STEPS = [0, 25, 50, 75, 100]
 
-export default function InvestOption({ approveData, updateInvestAmount, claim }: InvestOptionProps) {
+export default function InvestOption({ approveData, claim }: InvestOptionProps) {
   const { currencyAmount, price, cost: maxCost, investedAmount } = claim
+  const { updateInvestAmount } = useClaimDispatchers()
 
   const { account } = useActiveWeb3React()
 
@@ -61,7 +63,7 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
     // store the value as a string to prevent unnecessary re-renders
     const investAmount = formatUnits(amount.quotient.toString(), balance.currency.decimals)
 
-    updateInvestAmount(claim.index, investAmount)
+    updateInvestAmount({ index: claim.index, amount: investAmount })
   }, [balance, claim.index, maxCost, updateInvestAmount])
 
   // Cache approveData methods

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

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect } from 'react'
 import {
   InvestFlow,
   InvestContent,
@@ -7,7 +7,7 @@ import {
   StepIndicator,
   Steps,
 } from 'pages/Claim/styled'
-import { ClaimType, useClaimState, useUserEnhancedClaimData } from 'state/claim/hooks'
+import { ClaimType, useClaimState, useUserEnhancedClaimData, useClaimDispatchers } from 'state/claim/hooks'
 import { ClaimCommonTypes, EnhancedUserClaimData } from '../types'
 import { ClaimStatus } from 'state/claim/actions'
 import { useActiveWeb3React } from 'hooks/web3'
@@ -20,7 +20,6 @@ export type InvestmentClaimProps = EnhancedUserClaimData & {
 
 export type InvestOptionProps = {
   claim: InvestmentClaimProps
-  updateInvestAmount: (idx: number, investAmount: string) => void
   approveData:
     | { approveState: ApprovalState; approveCallback: (optionalParams?: OptionalApproveCallbackParams) => void }
     | undefined
@@ -51,33 +50,14 @@ function _claimToTokenApproveData(claimType: ClaimType, tokenApproveData: TokenA
 
 export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenApproveData }: InvestmentFlowProps) {
   const { account } = useActiveWeb3React()
-  const { activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep, selected } = useClaimState()
-
+  const { activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep, investFlowData } = useClaimState()
+  const { initInvestFlowData } = useClaimDispatchers()
   const claimData = useUserEnhancedClaimData(activeClaimAccount)
 
-  const [investData, setInvestData] = useState<InvestmentClaimProps[]>([])
-
   useEffect(() => {
-    if (claimData) {
-      const data = claimData.reduce<InvestmentClaimProps[]>((acc, claim) => {
-        if (selected.includes(claim.index)) {
-          acc.push({ ...claim, investedAmount: '0' })
-        }
-
-        return acc
-      }, [])
-
-      setInvestData(data)
-    }
-  }, [selected, claimData])
-
-  const updateInvestAmount = useCallback(
-    (idx: number, investedAmount: string) => {
-      const update = investData.map((claim) => (claim.index === idx ? { ...claim, investedAmount } : claim))
-      setInvestData(update)
-    },
-    [investData]
-  )
+    initInvestFlowData(isInvestFlowActive ? claimData : [])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isInvestFlowActive])
 
   if (
     !activeClaimAccount || // no connected account
@@ -113,11 +93,10 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
             up to a predefined maximum amount of tokens{' '}
           </p>
 
-          {investData.map((claim) => (
+          {investFlowData.map((claim) => (
             <InvestOption
               key={claim.index}
               approveData={_claimToTokenApproveData(claim.type, tokenApproveData)}
-              updateInvestAmount={updateInvestAmount}
               claim={claim}
             />
           ))}

src/custom/state/claim/actions.ts

@@ -1,4 +1,5 @@
 import { createAction } from '@reduxjs/toolkit'
+import { EnhancedUserClaimData } from 'pages/Claim/types'
 
 export enum ClaimStatus {
   DEFAULT = 'DEFAULT',
@@ -12,14 +13,20 @@ export type ClaimActions = {
   setInputAddress: (payload: string) => void
   setActiveClaimAccount: (payload: string) => void
   setActiveClaimAccountENS: (payload: string) => void
+
   // search
   setIsSearchUsed: (payload: boolean) => void
+
   // claiming
   setClaimStatus: (payload: ClaimStatus) => void
   setClaimedAmount: (payload: number) => void
+
   // investing
   setIsInvestFlowActive: (payload: boolean) => void
   setInvestFlowStep: (payload: number) => void
+  initInvestFlowData: (payload: EnhancedUserClaimData[]) => void
+  updateInvestAmount: (payload: { index: number; amount: string }) => void
+
   // claim row selection
   setSelected: (payload: number[]) => void
   setSelectedAll: (payload: boolean) => void
@@ -40,6 +47,11 @@ export const setClaimStatus = createAction<ClaimStatus>('claim/setClaimStatus')
 // investing
 export const setIsInvestFlowActive = createAction<boolean>('claim/setIsInvestFlowActive')
 export const setInvestFlowStep = createAction<number>('claim/setInvestFlowStep')
+export const initInvestFlowData = createAction<EnhancedUserClaimData[]>('claim/initInvestFlowData')
+export const updateInvestAmount = createAction<{
+  index: number
+  amount: string
+}>('claim/updateInvestAmount')
 
 // claim row selection
 export const setSelected = createAction<number[]>('claim/setSelected')

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

@@ -46,6 +46,8 @@ import {
   setClaimedAmount,
   setIsInvestFlowActive,
   setInvestFlowStep,
+  initInvestFlowData,
+  updateInvestAmount,
   setSelected,
   setSelectedAll,
   ClaimStatus,
@@ -720,6 +722,8 @@ export function useClaimDispatchers() {
       // investing
       setIsInvestFlowActive: (payload: boolean) => dispatch(setIsInvestFlowActive(payload)),
       setInvestFlowStep: (payload: number) => dispatch(setInvestFlowStep(payload)),
+      initInvestFlowData: (payload: EnhancedUserClaimData[]) => dispatch(initInvestFlowData(payload)),
+      updateInvestAmount: (payload: { index: number; amount: string }) => dispatch(updateInvestAmount(payload)),
       // claim row selection
       setSelected: (payload: number[]) => dispatch(setSelected(payload)),
       setSelectedAll: (payload: boolean) => dispatch(setSelectedAll(payload)),

src/custom/state/claim/reducer.ts

@@ -1,4 +1,4 @@
-import { createReducer } from '@reduxjs/toolkit'
+import { createReducer, current } from '@reduxjs/toolkit'
 import {
   setActiveClaimAccount,
   setActiveClaimAccountENS,
@@ -7,11 +7,14 @@ import {
   setInputAddress,
   setInvestFlowStep,
   setIsInvestFlowActive,
+  initInvestFlowData,
+  updateInvestAmount,
   setIsSearchUsed,
   setSelected,
   setSelectedAll,
   ClaimStatus,
 } from './actions'
+import { InvestmentClaimProps } from 'pages/Claim/InvestmentFlow'
 
 export const initialState: ClaimState = {
   // address/ENS address
@@ -27,6 +30,7 @@ export const initialState: ClaimState = {
   // investment
   isInvestFlowActive: false,
   investFlowStep: 0,
+  investFlowData: [],
   // table select change
   selected: [],
   selectedAll: false,
@@ -46,6 +50,7 @@ export type ClaimState = {
   // investment
   isInvestFlowActive: boolean
   investFlowStep: number
+  investFlowData: InvestmentClaimProps[]
   // table select change
   selected: number[]
   selectedAll: boolean
@@ -77,6 +82,28 @@ export default createReducer(initialState, (builder) =>
     .addCase(setInvestFlowStep, (state, { payload }) => {
       state.investFlowStep = payload
     })
+    .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
+      }, [])
+
+      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
+      }
+    })
     .addCase(setSelected, (state, { payload }) => {
       state.selected = payload
     })