From 73f29eea2ce72b4cbe3e7ed4ac72a90d0674cf73 Mon Sep 17 00:00:00 2001
From: Noah Zinsmeister <noahwz@gmail.com>
Date: Wed, 5 May 2021 12:47:41 -0400
Subject: [PATCH] don't show approve for both assets...

...in the single-sided liquidity provision case
---
 src/hooks/useApproveCallback.ts  |  8 ++++----
 src/pages/AddLiquidity/index.tsx | 12 ++++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useApproveCallback.ts b/src/hooks/useApproveCallback.ts
index 18f534b9e2..f9249a08ef 100644
--- a/src/hooks/useApproveCallback.ts
+++ b/src/hooks/useApproveCallback.ts
@@ -13,10 +13,10 @@ import { useActiveWeb3React } from './index'
 import { useTokenAllowance } from './useTokenAllowance'
 
 export enum ApprovalState {
-  UNKNOWN,
-  NOT_APPROVED,
-  PENDING,
-  APPROVED,
+  UNKNOWN = 'UNKNOWN',
+  NOT_APPROVED = 'NOT_APPROVED',
+  PENDING = 'PENDING',
+  APPROVED = 'APPROVED',
 }
 
 // returns a variable indicating the state of the approval and a function which approves if necessary or early returns
diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx
index 8a7c3667ab..79080a4121 100644
--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
@@ -353,6 +353,10 @@ export default function AddLiquidity({
     pool
   )
 
+  // we need an existence check on parsed amounts for single-asset deposits
+  const showApprovalA = approvalA !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_A]
+  const showApprovalB = approvalB !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_B]
+
   return (
     <ScrollablePage>
       <TransactionConfirmationModal
@@ -623,13 +627,13 @@ export default function AddLiquidity({
                     approvalB === ApprovalState.PENDING) &&
                     isValid && (
                       <RowBetween>
-                        {approvalA !== ApprovalState.APPROVED && (
+                        {showApprovalA && (
                           <ButtonPrimary
                             borderRadius="12px"
                             padding={'12px'}
                             onClick={approveACallback}
                             disabled={approvalA === ApprovalState.PENDING}
-                            width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
+                            width={showApprovalB ? '48%' : '100%'}
                           >
                             {approvalA === ApprovalState.PENDING ? (
                               <Dots>Approving {currencies[Field.CURRENCY_A]?.symbol}</Dots>
@@ -638,13 +642,13 @@ export default function AddLiquidity({
                             )}
                           </ButtonPrimary>
                         )}
-                        {approvalB !== ApprovalState.APPROVED && (
+                        {showApprovalB && (
                           <ButtonPrimary
                             borderRadius="12px"
                             padding={'12px'}
                             onClick={approveBCallback}
                             disabled={approvalB === ApprovalState.PENDING}
-                            width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
+                            width={showApprovalA ? '48%' : '100%'}
                           >
                             {approvalB === ApprovalState.PENDING ? (
                               <Dots>Approving {currencies[Field.CURRENCY_B]?.symbol}</Dots>