Removes inputAmount from redux (#84)

src/components/AvailableBalance.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react'
 import { useAppDispatch } from '@/state/hooks'
 import { formatBigIntToString } from '@/utils/formatBigIntToString'
-import { setInputAmount } from '@/state/slices/bridge/reducer'
 import { Warning } from './icons/Warning'
 import { Tooltip } from './Tooltip'
 import { useCurrentTokenBalance } from '@/hooks/useCurrentTokenBalance'
@@ -10,8 +9,10 @@ import { useBridgeState } from '@/state/slices/bridge/hooks'
 
 export const AvailableBalance = ({
   connectedAddress,
+  setInputAmount,
 }: {
   connectedAddress: string
+  setInputAmount: React.Dispatch<React.SetStateAction<string>>
 }) => {
   const dispatch = useAppDispatch()
 
@@ -28,7 +29,7 @@ export const AvailableBalance = ({
         tokenBalance.decimals ?? 0,
         18
       ) ?? '0.0'
-    dispatch(setInputAmount(maxAmount))
+    setInputAmount(maxAmount)
   }, [dispatch, tokenBalance, originToken, originChainId])
 
   if (!connectedAddress) return
@@ -42,24 +43,26 @@ export const AvailableBalance = ({
   }
 
   return (
-    <div className={`
+    <div
+      className={`
       row-start-3 col-start-1 col-end-3
       flex items-center gap-1 p-1 text-sm justify-self-end
-    `}>
+    `}
+    >
       <div
         onClick={handleAvailableBalanceClick}
         className="cursor-pointer hover:underline active:opacity-40 text-[--synapse-secondary] whitespace-nowrap"
       >
         Available {tokenBalance.parsedBalance ?? '0.0'}
       </div>
-      {!hasEnoughBalance && 
+      {!hasEnoughBalance && (
         <Tooltip
           hoverText="Amount may not exceed available balance"
           positionStyles="-right-1 -top-8"
         >
           <Warning styles="w-3.5" />
         </Tooltip>
-      }
+      )}
     </div>
   )
 }

src/components/BridgeButton.tsx

@@ -30,7 +30,6 @@ export const BridgeButton = ({
     web3Context.web3Provider
 
   const {
-    inputAmount,
     debouncedInputAmount,
     originChainId,
     originToken,

src/components/Widget.tsx

@@ -1,4 +1,11 @@
-import { useMemo, useEffect, useContext, useCallback, useRef } from 'react'
+import {
+  useMemo,
+  useEffect,
+  useContext,
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
 import { SynapseSDK } from '@synapsecns/sdk-router'
 import { Web3Context } from 'providers/Web3Provider'
 
@@ -19,7 +26,6 @@ import {
   setDestinationToken,
   setTokens,
   setDebouncedInputAmount,
-  setInputAmount,
 } from '@/state/slices/bridge/reducer'
 import { useBridgeState } from '@/state/slices/bridge/hooks'
 import {
@@ -92,8 +98,9 @@ export const Widget = ({
   const { connectedAddress, signer, provider, networkId } =
     web3Context.web3Provider
 
+  const [inputAmount, setInputAmount] = useState('')
+
   const {
-    inputAmount,
     debouncedInputAmount,
     originChainId,
     originToken,
@@ -104,8 +111,6 @@ export const Widget = ({
 
   const { bridgeQuote, isLoading } = useBridgeQuoteState()
 
-  const { allowance } = useWalletState()
-
   const { isInputValid, hasValidSelections } = useValidations()
 
   const { bridgeTxnStatus } = useBridgeTransactionState()
@@ -165,7 +170,7 @@ export const Widget = ({
         spenderAddress: bridgeQuote?.routerAddress,
         tokenAddress: originToken?.addresses[originChainId],
         amount: stringToBigInt(
-          inputAmount,
+          debouncedInputAmount,
           originToken?.decimals[originChainId]
         ),
         signer,
@@ -255,9 +260,9 @@ export const Widget = ({
   const handleUserInput = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const value = cleanNumberInput(event.target.value)
-      dispatch(setInputAmount(value))
+      setInputAmount(value)
     },
-    [dispatch]
+    []
   )
 
   const handleOriginChainSelection = useCallback(
@@ -326,14 +331,17 @@ export const Widget = ({
           value={inputAmount}
           onChange={handleUserInput}
         />
-        <div className="flex flex-col justify-center items-end">
+        <div className="flex flex-col items-end justify-center">
           <TokenSelect
             label="In"
             isOrigin={true}
             token={originToken}
             onChange={handleOriginTokenSelection}
           />
-          <AvailableBalance connectedAddress={connectedAddress} />
+          <AvailableBalance
+            connectedAddress={connectedAddress}
+            setInputAmount={setInputAmount}
+          />
         </div>
       </section>
       <section className={cardStyle}>
@@ -356,7 +364,7 @@ export const Widget = ({
                 )
           }
         />
-        <div className="flex flex-col justify-center items-end">
+        <div className="flex flex-col items-end justify-center">
           <TokenSelect
             label="Out"
             isOrigin={false}
@@ -368,7 +376,10 @@ export const Widget = ({
       <Receipt
         quote={bridgeQuote ?? null}
         send={formatBigIntToString(
-          stringToBigInt(inputAmount, originToken?.decimals[originChainId]),
+          stringToBigInt(
+            debouncedInputAmount,
+            originToken?.decimals[originChainId]
+          ),
           originToken?.decimals[originChainId],
           4
         )}

src/components/ui/TokenPopoverSelect.tsx

@@ -99,7 +99,6 @@ const TokenOption = ({
   selected: BridgeableToken
   parsedBalance: string
 }) => {
-  console.log(option)
   return (
     <li
       data-test-id="token-option"
@@ -111,16 +110,20 @@ const TokenOption = ({
       }`}
       onClick={() => onSelect(option)}
     >
-      <abbr title={option.name} className="no-underline p-2">
+      <abbr title={option.name} className="p-2 no-underline">
         {option.symbol}
       </abbr>
-      <data value={parsedBalance} className={`
+      <data
+        value={parsedBalance}
+        className={`
         text-sm p-2
-        ${parsedBalance
-          ? 'text-[--synapse-secondary]' 
-          : 'text-[--synapse-focus]'
+        ${
+          parsedBalance
+            ? 'text-[--synapse-secondary]'
+            : 'text-[--synapse-focus]'
         }
-      `}>
+      `}
+      >
         {parsedBalance ?? '−'}
       </data>
     </li>

src/components/ui/TokenSelect.tsx

@@ -23,18 +23,10 @@ export function TokenSelect({ label, isOrigin, token, onChange }: Props) {
 
   const { balances } = useWalletState()
 
-  let options
-  let remainingOptions
-
-  if (label === 'In') {
-    options = originTokens
-
-    remainingOptions = _.difference(tokens, options)
-  } else {
-    options = filterTokens(destinationTokens, tokens)
-
-    remainingOptions = _.difference(tokens, options)
-  }
+  const options = isOrigin
+    ? originTokens
+    : filterTokens(destinationTokens, tokens)
+  const remainingOptions = _.difference(tokens, options)
 
   return (
     <TokenPopoverSelect

src/hooks/useValidations.tsx

@@ -16,7 +16,6 @@ export const useValidations = (): {
   onSelectedChain: boolean
 } => {
   const {
-    inputAmount,
     debouncedInputAmount,
     originChainId,
     originToken,
@@ -39,18 +38,18 @@ export const useValidations = (): {
 
   const hasEnoughBalance: boolean = useMemo(() => {
     if (
-      !checkExists(inputAmount) ||
+      !checkExists(debouncedInputAmount) ||
       !checkExists(currentTokenBalance.rawBalance)
     ) {
       return false
     } else {
       const formattedInput = stringToBigInt(
-        inputAmount,
+        debouncedInputAmount,
         currentTokenBalance.decimals
       )
       return Boolean(BigInt(currentTokenBalance.rawBalance) >= formattedInput)
     }
-  }, [balances, inputAmount, originToken, destinationToken])
+  }, [balances, debouncedInputAmount, originToken, destinationToken])
 
   const isInputValid: boolean = useMemo(() => {
     if (debouncedInputAmount === '') return false

src/state/slices/bridge/reducer.ts

@@ -14,7 +14,6 @@ import { findValidToken } from '@/utils/findValidTokens'
 import { getFromChainIds } from '@/utils/routeMaker/getFromChainIds'
 
 export interface BridgeState {
-  inputAmount: string
   debouncedInputAmount: string
   originChainId: number
   originToken: BridgeableToken
@@ -28,7 +27,6 @@ export interface BridgeState {
 }
 
 const initialState: BridgeState = {
-  inputAmount: '',
   debouncedInputAmount: '',
   originChainId: 42161,
   originToken: null,
@@ -45,9 +43,6 @@ export const bridgeSlice = createSlice({
   name: 'bridge',
   initialState,
   reducers: {
-    setInputAmount: (state: BridgeState, action: PayloadAction<string>) => {
-      state.inputAmount = action.payload
-    },
     setDebouncedInputAmount: (
       state: BridgeState,
       action: PayloadAction<string>
@@ -429,7 +424,6 @@ export const bridgeSlice = createSlice({
 })
 
 export const {
-  setInputAmount,
   setDebouncedInputAmount,
   setOriginChainId,
   setDestinationChainId,

src/state/slices/wallet/hooks.ts

@@ -32,6 +32,7 @@ export const fetchAndStoreTokenBalances = createAsyncThunk(
       tokens,
       signerOrProvider,
     })
+
     return balances
   }
 )