disable all inputs during submission in add/remove liquidity (#1062)

src/components/@shared/TokenApproval/index.tsx

@@ -10,13 +10,15 @@ export default function TokenApproval({
   disabled,
   amount,
   tokenAddress,
-  tokenSymbol
+  tokenSymbol,
+  setSubmitting
 }: {
   actionButton: JSX.Element
   disabled: boolean
   amount: string
   tokenAddress: string
   tokenSymbol: string
+  setSubmitting?: (isSubmitting: boolean) => void
 }): ReactElement {
   const { asset, isAssetNetwork } = useAsset()
   const [tokenApproved, setTokenApproved] = useState(false)
@@ -50,6 +52,7 @@ export default function TokenApproval({
 
   async function approveTokens(amount: string) {
     setLoading(true)
+    setSubmitting(true)
 
     try {
       const tx = await approve(web3, accountId, tokenAddress, spender, amount)
@@ -62,6 +65,7 @@ export default function TokenApproval({
     } finally {
       await checkTokenApproval()
       setLoading(false)
+      setSubmitting(false)
     }
   }
 

src/components/Asset/AssetActions/Pool/Actions.tsx

@@ -17,7 +17,8 @@ export default function Actions({
   action,
   isDisabled,
   tokenAddress,
-  tokenSymbol
+  tokenSymbol,
+  setSubmitting
 }: {
   isLoading: boolean
   loaderMessage: string
@@ -29,6 +30,7 @@ export default function Actions({
   isDisabled?: boolean
   tokenAddress: string
   tokenSymbol: string
+  setSubmitting?: (isSubmitting: boolean) => void
 }): ReactElement {
   const { networkId } = useWeb3()
 
@@ -55,6 +57,7 @@ export default function Actions({
             tokenAddress={tokenAddress}
             tokenSymbol={tokenSymbol}
             disabled={isDisabled}
+            setSubmitting={setSubmitting}
           />
         ) : (
           actionButton

src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx

@@ -39,8 +39,11 @@ export default function FormAdd({
   const { isAssetNetwork } = useAsset()
 
   // Connect with form
-  const { setFieldValue, values }: FormikContextType<FormAddLiquidity> =
-    useFormikContext()
+  const {
+    setFieldValue,
+    values,
+    isSubmitting
+  }: FormikContextType<FormAddLiquidity> = useFormikContext()
 
   useEffect(() => {
     async function calculatePoolShares() {
@@ -112,7 +115,7 @@ export default function FormAdd({
             placeholder="0"
             field={field}
             form={form}
-            disabled={!isAssetNetwork}
+            disabled={!isAssetNetwork || isSubmitting}
           />
         )}
       </Field>
@@ -122,7 +125,7 @@ export default function FormAdd({
           className={styles.buttonMax}
           style="text"
           size="small"
-          disabled={!web3}
+          disabled={!web3 || isSubmitting}
           onClick={() => setFieldValue('amount', amountMax)}
         >
           Use Max

src/components/Asset/AssetActions/Pool/Add/index.tsx

@@ -133,7 +133,7 @@ export default function Add({
           setSubmitting(false)
         }}
       >
-        {({ isSubmitting, submitForm, values, isValid }) => (
+        {({ isSubmitting, setSubmitting, submitForm, values, isValid }) => (
           <>
             <div className={styles.addInput}>
               {isWarningAccepted ? (
@@ -189,6 +189,7 @@ export default function Add({
               tokenAddress={tokenInAddress}
               tokenSymbol={tokenInSymbol}
               txId={txId}
+              setSubmitting={setSubmitting}
             />
             {debug && <DebugOutput output={values} />}
           </>

src/components/Asset/AssetActions/Pool/Remove.tsx

@@ -160,7 +160,7 @@ export default function Remove({
               type="range"
               min="0"
               max={amountMaxPercent}
-              disabled={!isAssetNetwork}
+              disabled={!isAssetNetwork || isLoading}
               value={amountPercent}
               onChange={handleAmountPercentChange}
             />
@@ -168,7 +168,7 @@ export default function Remove({
               style="text"
               size="small"
               className={styles.maximum}
-              disabled={!isAssetNetwork}
+              disabled={!isAssetNetwork || isLoading}
               onClick={handleMaxButton}
             >
               {`${amountMaxPercent}% max`}
@@ -197,7 +197,7 @@ export default function Remove({
           postfix="%"
           sortOptions={false}
           options={slippagePresets}
-          disabled={!isAssetNetwork}
+          disabled={!isAssetNetwork || isLoading}
           value={slippage}
           onChange={handleSlippageChange}
         />
@@ -208,7 +208,7 @@ export default function Remove({
         actionName={content.pool.remove.action}
         action={handleRemoveLiquidity}
         successMessage="Successfully removed liquidity."
-        isDisabled={!isAssetNetwork}
+        isDisabled={!isAssetNetwork || amountOcean === '0'}
         txId={txId}
         tokenAddress={tokenOutAddress}
         tokenSymbol={tokenOutSymbol}

src/components/Asset/AssetActions/Trade/FormTrade.tsx

@@ -106,7 +106,7 @@ export default function FormTrade({
         setSubmitting(false)
       }}
     >
-      {({ isSubmitting, submitForm, values, isValid }) => (
+      {({ isSubmitting, setSubmitting, submitForm, values, isValid }) => (
         <>
           {isWarningAccepted ? (
             <Swap
@@ -156,6 +156,7 @@ export default function FormTrade({
             txId={txId}
             tokenAddress={tokenAddress}
             tokenSymbol={tokenSymbol}
+            setSubmitting={setSubmitting}
           />
 
           {debug && (