feat(PGIO-135): abstract action button logic (#148)

* feat: create the TxButton component to abstract shared logic in swaps and liquidity-providing
SwaprHQ · Dec 20, 2024 · 46ba7d0 · 46ba7d0
1 parent b9f1b19
commit 46ba7d0
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 64 deletions.
diff --git a/app/(main)/markets/Liquidity.tsx b/app/(main)/markets/Liquidity.tsx
@@ -3,9 +3,9 @@
 import {
   TokenLogo,
   SwapInput,
-  ConnectButton,
   Spinner,
   succesApprovalTxToast,
+  TxButton,
   waitingTxToast,
 } from '@/app/components';
 import { useQuery } from '@tanstack/react-query';
@@ -50,7 +50,6 @@ import {
 } from 'wagmi/actions';
 import { ChainId } from '@/constants';
 import { cx } from 'class-variance-authority';
-import { useUnsupportedNetwork } from '@/hooks';
 
 enum LiquidityOperation {
   ADD = 'add',
@@ -63,8 +62,7 @@ export const Liquidity = ({ id }: { id: Address }) => {
   const [isApproving, setIsApproving] = useState(false);
   const amountWei = parseFloat(amount) > 0 ? parseEther(amount) : BigInt(0);
   const { isModalOpen, closeModal, openModal } = useModal();
-  const { address, isDisconnected } = useAccount();
-  const unsupportedNetwork = useUnsupportedNetwork();
+  const { address } = useAccount();
   const { data } = useQuery<Pick<Query, 'fixedProductMarketMaker'>>({
     queryKey: ['getMarket', id],
   });
@@ -257,6 +255,20 @@ export const Liquidity = ({ id }: { id: Address }) => {
   };
 
   const activeLiquidityOperationState = liquidityOperationState[liquidityOperation];
+  const hasEnoughBalance = +amount <= +formatEther(activeLiquidityOperationState.balance);
+  const isButtonDisabled = !amount || !hasEnoughBalance;
+
+  const getButtonLabel = () => {
+    const tokenSymbolText =
+      liquidityOperation === LiquidityOperation.ADD
+        ? liquidityOperationState[liquidityOperation].inToken.symbol ?? 'pool tokens'
+        : 'pool tokens';
+
+    if (!amount) return 'Enter amount';
+    if (!hasEnoughBalance) return `Insufficient ${tokenSymbolText} balance`;
+
+    return activeLiquidityOperationState.actionTitle;
+  };
 
   return (
     <div className="space-y-4 py-2">
@@ -313,36 +325,13 @@ export const Liquidity = ({ id }: { id: Address }) => {
         outcomeTokenToReceive={outcomeTokenToReceive}
         market={marketModel}
       />
-      {isDisconnected ? (
-        <ConnectButton width="full" size="lg">
-          Connect
-        </ConnectButton>
-      ) : unsupportedNetwork ? (
-        <Button width="full" variant="pastel" size="lg" disabled>
-          Unsupported network
-        </Button>
-      ) : !amount ? (
-        <Button width="full" variant="pastel" size="lg" disabled>
-          Enter amount
-        </Button>
-      ) : +amount > +formatEther(activeLiquidityOperationState.balance) ? (
-        <Button width="full" variant="pastel" size="lg" disabled>
-          Insufficient{' '}
-          {liquidityOperation === LiquidityOperation.ADD
-            ? liquidityOperationState[liquidityOperation].inToken.symbol
-            : 'pool tokens'}{' '}
-          balance
-        </Button>
-      ) : (
-        <Button
-          width="full"
-          variant="pastel"
-          size="lg"
-          onClick={() => openModal(ModalId.CONFIRM_LIQUIDITY)}
-        >
-          {activeLiquidityOperationState.actionTitle}
-        </Button>
-      )}
+      <TxButton
+        disabled={isButtonDisabled}
+        onClick={() => openModal(ModalId.CONFIRM_LIQUIDITY)}
+      >
+        {getButtonLabel()}
+      </TxButton>
+
       <Dialog
         open={isModalOpen(ModalId.CONFIRM_LIQUIDITY)}
         onOpenChange={() => closeModal(ModalId.CONFIRM_LIQUIDITY)}

diff --git a/app/components/Swapbox.tsx b/app/components/Swapbox.tsx
@@ -12,8 +12,8 @@ import {
 import { SwapInput } from './ui/SwapInput';
 import { useEffect, useState } from 'react';
 import { parseEther, Address, formatEther } from 'viem';
-import { useAccount, useChains, useReadContract } from 'wagmi';
-import { ConnectButton } from '.';
+import { useAccount, useReadContract } from 'wagmi';
+import { TxButton } from '.';
 import { Outcome, Token } from '@/entities';
 import { FixedProductMarketMaker } from '@/queries/omen';
 import {
@@ -40,7 +40,6 @@ import { formatEtherWithFixedDecimals, formatValueWithFixedDecimals } from '@/ut
 import { useQuery } from '@tanstack/react-query';
 import { getTokenUSDPrice } from '@/queries/mobula';
 import { useSlippage } from '@/context';
-import { useUnsupportedNetwork } from '@/hooks';
 
 const ONE_UNIT = '1';
 
@@ -79,10 +78,9 @@ export const Swapbox = ({ fixedProductMarketMaker }: SwapboxProps) => {
     id
   );
 
-  const { address, isDisconnected } = useAccount();
+  const { address } = useAccount();
   const { openModal } = useModal();
   const { slippage } = useSlippage();
-  const unsupportedNetwork = useUnsupportedNetwork();
 
   const [tokenAmountIn, setTokenAmountIn] = useState('');
   const [tokenAmountOut, setTokenAmountOut] = useState<bigint>();
@@ -272,6 +270,19 @@ export const Swapbox = ({ fixedProductMarketMaker }: SwapboxProps) => {
     setTokenAmountOut(undefined);
   };
 
+  const hasEnoughBalance =
+    +tokenAmountIn <= +formatEther(currentState.balance ?? BigInt(0));
+  const isButtonDisabled = !tokenAmountIn || !hasEnoughBalance || currentState.isLoading;
+
+  const getButtonLabel = () => {
+    if (!tokenAmountIn) return 'Enter amount';
+    if (!hasEnoughBalance)
+      return `Insufficient ${currentState.inToken.symbol ?? 'pool tokens'} balance`;
+    if (currentState.isLoading) return 'Fetching price';
+
+    return currentState.buttonText;
+  };
+
   return (
     <>
       <div className="relative space-y-2 font-medium">
@@ -362,31 +373,9 @@ export const Swapbox = ({ fixedProductMarketMaker }: SwapboxProps) => {
               </div>
             )}
           </div>
-          {isDisconnected ? (
-            <ConnectButton width="full" size="lg">
-              Connect
-            </ConnectButton>
-          ) : unsupportedNetwork ? (
-            <Button width="full" variant="pastel" size="lg" disabled>
-              Unsupported network
-            </Button>
-          ) : !tokenAmountIn || +tokenAmountIn === 0 ? (
-            <Button width="full" variant="pastel" size="lg" disabled>
-              Enter amount
-            </Button>
-          ) : currentState.isLoading ? (
-            <Button width="full" variant="pastel" size="lg" disabled>
-              Fetching price
-            </Button>
-          ) : +tokenAmountIn > +formatEther(currentState.balance) ? (
-            <Button width="full" variant="pastel" size="lg" disabled>
-              Insufficient {currentState.inToken.symbol} balance
-            </Button>
-          ) : (
-            <Button width="full" variant="pastel" size="lg" onClick={openBetModal}>
-              {currentState.buttonText}
-            </Button>
-          )}
+          <TxButton disabled={isButtonDisabled} onClick={openBetModal}>
+            {getButtonLabel()}
+          </TxButton>
         </div>
       </div>
       <ConfirmTrade

diff --git a/app/components/TxButton.tsx b/app/components/TxButton.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { useAccount } from 'wagmi';
+
+import { ConnectButton } from '@/app/components';
+import { useUnsupportedNetwork } from '@/hooks';
+import { Button, ButtonProps } from '@swapr/ui';
+
+export const TxButton = ({ children, ...props }: ButtonProps) => {
+  const { isDisconnected } = useAccount();
+  const unsupportedNetwork = useUnsupportedNetwork();
+
+  if (isDisconnected) {
+    return (
+      <ConnectButton width="full" size="lg">
+        Connect
+      </ConnectButton>
+    );
+  }
+
+  if (unsupportedNetwork) {
+    return (
+      <Button width="full" variant="pastel" size="lg" disabled>
+        Unsupported network
+      </Button>
+    );
+  }
+
+  return (
+    <Button size="lg" variant="pastel" width="full" {...props}>
+      {children}
+    </Button>
+  );
+};
diff --git a/app/components/index.ts b/app/components/index.ts
@@ -20,3 +20,4 @@ export * from './EmbedMarketModal';
 export * from './LifiWidgetPopover';
 export * from './toasts';
 export * from './Spinner';
+export * from './TxButton';