fix: disable swap button w/o account (#3177)

* fix: disable swap button w/o account * nit: indent less
cowprotocol · Jan 24, 2022 · cee4b8c · cee4b8c
1 parent 3153db9
commit cee4b8c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/lib/components/Swap/SwapButton.tsx b/src/lib/components/Swap/SwapButton.tsx
@@ -15,7 +15,10 @@ enum Mode {
   STATUS,
 }
 
-export default function SwapButton() {
+interface SwapButtonProps {
+  disabled?: boolean
+}
+export default function SwapButton({ disabled }: SwapButtonProps) {
   const [mode, setMode] = useState(Mode.SWAP)
   const {
     trade,
@@ -30,22 +33,24 @@ export default function SwapButton() {
   // TODO(zzmp): Pass optimized trade to SummaryDialog
 
   const actionProps = useMemo(() => {
+    if (disabled) return { disabled: true }
+
     if (inputCurrencyAmount && inputCurrencyBalance?.greaterThan(inputCurrencyAmount)) {
-      if (approval === ApprovalState.NOT_APPROVED) {
+      if (approval === ApprovalState.PENDING) {
+        return { disabled: true }
+      } else if (approval === ApprovalState.NOT_APPROVED) {
         return {
           updated: {
             message: <Trans>Approve {inputCurrencyAmount.currency.symbol} first</Trans>,
             action: <Trans>Approve</Trans>,
           },
         }
       }
-      if (approval === ApprovalState.PENDING) {
-        return { disabled: true }
-      }
       return {}
     }
+
     return { disabled: true }
-  }, [approval, inputCurrencyAmount, inputCurrencyBalance])
+  }, [disabled, approval, inputCurrencyAmount, inputCurrencyBalance])
   const onConfirm = useCallback(() => {
     // TODO: Send the tx to the connected wallet.
     setMode(Mode.STATUS)

diff --git a/src/lib/components/Swap/index.tsx b/src/lib/components/Swap/index.tsx
@@ -81,7 +81,7 @@ export default function Swap({ defaults }: SwapProps) {
           <ReverseButton disabled={!active} />
           <Output disabled={!active}>
             <Toolbar disabled={!active} />
-            <SwapButton />
+            <SwapButton disabled={!account} />
           </Output>
         </BoundaryProvider>
       </div>