From d3ff6040b2feb6d5b2a0aad357b7d15d9dcd1c26 Mon Sep 17 00:00:00 2001
From: David Uhlmann <dib542@gmail.com>
Date: Wed, 15 May 2024 07:30:43 +1000
Subject: [PATCH] feat: improve unconnected wallet state

---
 src/components/cards/LimitOrderCard.scss |  4 ---
 src/components/cards/LimitOrderCard.tsx  | 45 ++++++++++++++----------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/components/cards/LimitOrderCard.scss b/src/components/cards/LimitOrderCard.scss
index 302ffaf60..abdb8dc8c 100644
--- a/src/components/cards/LimitOrderCard.scss
+++ b/src/components/cards/LimitOrderCard.scss
@@ -112,8 +112,4 @@
     // fix vertical alignment
     align-items: baseline;
   }
-
-  .limit-order__confirm-button {
-    font-size: 1.25rem;
-  }
 }
diff --git a/src/components/cards/LimitOrderCard.tsx b/src/components/cards/LimitOrderCard.tsx
index b511a8013..30870169c 100644
--- a/src/components/cards/LimitOrderCard.tsx
+++ b/src/components/cards/LimitOrderCard.tsx
@@ -762,7 +762,7 @@ function LimitOrder({ tokenA, tokenB }: { tokenA: Token; tokenB: Token }) {
 
   // disable fieldset with no address because the estimation requires a signed client
   const fieldset = (
-    <fieldset disabled={!address}>
+    <fieldset>
       <Drawer expanded={priceTab === 'Limit'}>
         <div className="limit-price mb-4">
           <div
@@ -822,11 +822,12 @@ function LimitOrder({ tokenA, tokenB }: { tokenA: Token; tokenB: Token }) {
           className="flex"
           header="You pay"
           subHeader={
-            !userBalanceTokenIn &&
-            hasInsufficientFunds &&
-            `Your balance: ${formatAmount(
-              userBalanceTokenInDisplayAmount || 0
-            )}`
+            (!address && 'Wallet not connected') ||
+            (!userBalanceTokenIn &&
+              hasInsufficientFunds &&
+              `Your balance: ${formatAmount(
+                userBalanceTokenInDisplayAmount || 0
+              )}`)
           }
           onValueChanged={setAmountIn}
           token={tokenIn}
@@ -958,18 +959,26 @@ function LimitOrder({ tokenA, tokenB }: { tokenA: Token; tokenB: Token }) {
         </div>
       ) : null}
       <div className="flex row">
-        <button
-          className="limit-order__confirm-button flex button-primary mt-lg p-4"
-          onClick={!address ? connectWallet : undefined}
-          disabled={
-            isValidatingSwap ||
-            !simulationResult ||
-            !simulationResultMatchesInput ||
-            (!Number(amountInBaseAmount) && !Number(amountOutBaseAmount))
-          }
-        >
-          {!address ? 'Connect Wallet' : buyMode ? 'Buy' : 'Sell'}
-        </button>
+        {address ? (
+          <button
+            className="h4 flex button-primary mt-lg p-4"
+            disabled={
+              isValidatingSwap ||
+              !simulationResult ||
+              !simulationResultMatchesInput ||
+              (!Number(amountInBaseAmount) && !Number(amountOutBaseAmount))
+            }
+          >
+            {buyMode ? 'Buy' : 'Sell'}
+          </button>
+        ) : (
+          <button
+            className="h4 flex button-primary mt-lg p-4"
+            onClick={connectWallet}
+          >
+            Connect Wallet
+          </button>
+        )}
       </div>
     </fieldset>
   );