From d51d909a66c3d5f5e47f437aee55eef632d74761 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 4 Feb 2022 18:21:35 +0000
Subject: [PATCH] disable all inputs during submission in add/remove liquidity
 (#1062)

---
 src/components/@shared/TokenApproval/index.tsx        |  6 +++++-
 src/components/Asset/AssetActions/Pool/Actions.tsx    |  5 ++++-
 .../Asset/AssetActions/Pool/Add/FormAdd.tsx           | 11 +++++++----
 src/components/Asset/AssetActions/Pool/Add/index.tsx  |  3 ++-
 src/components/Asset/AssetActions/Pool/Remove.tsx     |  8 ++++----
 src/components/Asset/AssetActions/Trade/FormTrade.tsx |  3 ++-
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/@shared/TokenApproval/index.tsx b/src/components/@shared/TokenApproval/index.tsx
index 29a95937f..eacb19a74 100644
--- a/src/components/@shared/TokenApproval/index.tsx
+++ b/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)
     }
   }
 
diff --git a/src/components/Asset/AssetActions/Pool/Actions.tsx b/src/components/Asset/AssetActions/Pool/Actions.tsx
index 522c92e0a..7eaebcc5e 100644
--- a/src/components/Asset/AssetActions/Pool/Actions.tsx
+++ b/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
diff --git a/src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx b/src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx
index 168e22d8d..1791e3e03 100644
--- a/src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx
+++ b/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
diff --git a/src/components/Asset/AssetActions/Pool/Add/index.tsx b/src/components/Asset/AssetActions/Pool/Add/index.tsx
index a686eac5f..a1d39ec9f 100644
--- a/src/components/Asset/AssetActions/Pool/Add/index.tsx
+++ b/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} />}
           </>
diff --git a/src/components/Asset/AssetActions/Pool/Remove.tsx b/src/components/Asset/AssetActions/Pool/Remove.tsx
index 961d441e0..35116d31a 100644
--- a/src/components/Asset/AssetActions/Pool/Remove.tsx
+++ b/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}
diff --git a/src/components/Asset/AssetActions/Trade/FormTrade.tsx b/src/components/Asset/AssetActions/Trade/FormTrade.tsx
index b5fa5e2aa..50bca485d 100644
--- a/src/components/Asset/AssetActions/Trade/FormTrade.tsx
+++ b/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 && (