Updated to use local state

gnosis · Jan 26, 2022 · 719ceb3 · 719ceb3
1 parent 568784b
commit 719ceb3
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 21 deletions.
diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -58,7 +58,7 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
   const { currencyAmount, price, cost: maxCost } = claim
 
   const { account, chainId } = useActiveWeb3React()
-  const { updateInvestAmount, updateInvestError, setIsTouched } = useClaimDispatchers()
+  const { updateInvestAmount, updateInvestError } = useClaimDispatchers()
   const { investFlowData, activeClaimAccount, estimatedGas } = useClaimState()
 
   // Approve hooks
@@ -75,10 +75,10 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
   const [percentage, setPercentage] = useState<string>('0')
   const [typedValue, setTypedValue] = useState<string>('')
   const [inputWarning, setInputWarning] = useState<string>('')
+  const [isTouched, setIsTouched] = useState<boolean>(false)
 
   const investedAmount = investFlowData[optionIndex].investedAmount
   const inputError = investFlowData[optionIndex].error
-  const isTouched = investFlowData[optionIndex].isTouched
 
   // Syntactic sugar fns for setting/resetting global state
   const setInvestedAmount = useCallback(
@@ -93,10 +93,6 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
     () => updateInvestError({ index: optionIndex, error: undefined }),
     [optionIndex, updateInvestError]
   )
-  const setInputTouched = useCallback(
-    (value: boolean) => setIsTouched({ index: optionIndex, isTouched: value }),
-    [optionIndex, setIsTouched]
-  )
 
   const token = currencyAmount?.currency
   const isNative = token?.isNative
@@ -111,7 +107,7 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
 
   const onUserInput = (input: string) => {
     setTypedValue(input)
-    setInputTouched(true)
+    setIsTouched(true)
   }
 
   const gasCost = useMemo(() => {
@@ -135,8 +131,8 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
 
     const value = maxCost.greaterThan(balance) ? balance : maxCost
     setTypedValue(value.toExact() || '')
-    setInputTouched(true)
-  }, [balance, maxCost, noBalance, setInputTouched])
+    setIsTouched(true)
+  }, [balance, maxCost, noBalance, setIsTouched])
 
   // Save "local" approving state (pre-BC) for rendering spinners etc
   const [approving, setApproving] = useState(false)
@@ -207,6 +203,7 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
     } else if (noBalance) {
       error = ErrorMsgs.InsufficientBalance(token?.symbol)
     } else if (!parsedAmount && !isTouched) {
+      // this is to remove initial zero balance error message until user touches the input
       error = ''
     } else if (!parsedAmount) {
       error = ErrorMsgs.InvestmentIsZero

diff --git a/src/custom/state/claim/actions.ts b/src/custom/state/claim/actions.ts
@@ -27,7 +27,6 @@ export type ClaimActions = {
   initInvestFlowData: () => void
   updateInvestAmount: (payload: { index: number; amount: string }) => void
   updateInvestError: (payload: { index: number; error: string | undefined }) => void
-  setIsTouched: (payload: { index: number; isTouched: boolean }) => void
 
   // claim row selection
   setSelected: (payload: number[]) => void
@@ -59,10 +58,6 @@ export const updateInvestError = createAction<{
   index: number
   error: string | undefined
 }>('claim/updateInvestError')
-export const setIsTouched = createAction<{
-  index: number
-  isTouched: boolean
-}>('claim/setIsTouched')
 // claim row selection
 export const setSelected = createAction<number[]>('claim/setSelected')
 export const setSelectedAll = createAction<boolean>('claim/setSelectedAll')

diff --git a/src/custom/state/claim/hooks/index.ts b/src/custom/state/claim/hooks/index.ts
@@ -55,7 +55,6 @@ import {
   resetClaimUi,
   updateInvestError,
   setEstimatedGas,
-  setIsTouched,
 } from '../actions'
 import { EnhancedUserClaimData } from 'pages/Claim/types'
 import { supportedChainId } from 'utils/supportedChainId'
@@ -839,7 +838,6 @@ export function useClaimDispatchers() {
       updateInvestAmount: (payload: { index: number; amount: string }) => dispatch(updateInvestAmount(payload)),
       updateInvestError: (payload: { index: number; error: string | undefined }) =>
         dispatch(updateInvestError(payload)),
-      setIsTouched: (payload: { index: number; isTouched: boolean }) => dispatch(setIsTouched(payload)),
       // claim row selection
       setSelected: (payload: number[]) => dispatch(setSelected(payload)),
       setSelectedAll: (payload: boolean) => dispatch(setSelectedAll(payload)),

diff --git a/src/custom/state/claim/reducer.ts b/src/custom/state/claim/reducer.ts
@@ -16,7 +16,6 @@ import {
   ClaimStatus,
   updateInvestError,
   setEstimatedGas,
-  setIsTouched,
 } from './actions'
 
 export const initialState: ClaimState = {
@@ -44,7 +43,6 @@ export type InvestClaim = {
   index: number
   investedAmount: string
   error?: string
-  isTouched?: boolean
 }
 
 export type ClaimState = {
@@ -128,7 +126,4 @@ export default createReducer(initialState, (builder) =>
       state.claimedAmount = initialState.claimedAmount
       state.estimatedGas = initialState.estimatedGas
     })
-    .addCase(setIsTouched, (state, { payload: { index, isTouched } }) => {
-      state.investFlowData[index].isTouched = isTouched
-    })
 )