Using claimIndex instead of positional index for claim options

gnosis · Feb 15, 2022 · 33f9cc6 · 33f9cc6
1 parent db30f24
commit 33f9cc6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 20 deletions.
diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -62,13 +62,12 @@ const WarningMessages = {
 
 type InvestOptionProps = {
   claim: EnhancedUserClaimData
-  optionIndex: number
   openModal: InvestmentFlowProps['modalCbs']['openModal']
   closeModal: InvestmentFlowProps['modalCbs']['closeModal']
 }
 
-export default function InvestOption({ claim, optionIndex, openModal, closeModal }: InvestOptionProps) {
-  const { currencyAmount, price, cost: maxCost } = claim
+export default function InvestOption({ claim, openModal, closeModal }: InvestOptionProps) {
+  const { currencyAmount, price, cost: maxCost, index } = claim
 
   const { account, chainId } = useActiveWeb3React()
   const { updateInvestAmount, updateInvestError, setIsTouched } = useClaimDispatchers()
@@ -93,26 +92,20 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
   const [typedValue, setTypedValue] = useState<string>('')
   const [inputWarnings, setInputWarnings] = useState<string[]>([])
 
-  const investedAmount = investFlowData[optionIndex].investedAmount
-  const inputError = investFlowData[optionIndex].error
-  const isTouched = investFlowData[optionIndex].isTouched
+  const investedAmount = investFlowData[index].investedAmount
+  const inputError = investFlowData[index].error
+  const isTouched = investFlowData[index].isTouched
 
   // Syntactic sugar fns for setting/resetting global state
   const setInvestedAmount = useCallback(
-    (amount: string) => updateInvestAmount({ index: optionIndex, amount }),
-    [optionIndex, updateInvestAmount]
-  )
-  const setInputError = useCallback(
-    (error: string) => updateInvestError({ index: optionIndex, error }),
-    [optionIndex, updateInvestError]
-  )
-  const resetInputError = useCallback(
-    () => updateInvestError({ index: optionIndex, error: undefined }),
-    [optionIndex, updateInvestError]
+    (amount: string) => updateInvestAmount({ index, amount }),
+    [index, updateInvestAmount]
   )
+  const setInputError = useCallback((error: string) => updateInvestError({ index, error }), [index, updateInvestError])
+  const resetInputError = useCallback(() => updateInvestError({ index, error: undefined }), [index, updateInvestError])
   const setInputTouched = useCallback(
-    (value: boolean) => setIsTouched({ index: optionIndex, isTouched: value }),
-    [optionIndex, setIsTouched]
+    (value: boolean) => setIsTouched({ index, isTouched: value }),
+    [index, setIsTouched]
   )
 
   const token = currencyAmount?.currency

diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx
@@ -242,8 +242,8 @@ export default function InvestmentFlow({ claims, hasClaims, isAirdropOnly, modal
             up to a predefined maximum amount of tokens{' '}
           </p>
 
-          {selectedClaims.map((claim, index) => (
-            <InvestOption key={claim.index} optionIndex={index} claim={claim} {...modalCbs} />
+          {selectedClaims.map((claim) => (
+            <InvestOption key={claim.index} claim={claim} {...modalCbs} />
           ))}
 
           {hasError && (