Merge pull request #206 from concero/fix/deposit-card-states

Fix deposit button state in swap input card

src/components/pool/PoolCard/SwapButton/SwapButton.tsx

@@ -3,14 +3,22 @@ import { useAppKit } from '@reown/appkit/react'
 import { useAccount } from 'wagmi'
 import { Button } from '../../../buttons/Button/Button'
 
-export const SwapButton = ({ error, onClick, isLoading, isDeposit }: SwapButtonProps) => {
+export const SwapButton = ({ onClick, isLoading, isDeposit, isDepositDisabled }: SwapButtonProps) => {
 	const { isConnected } = useAccount()
 	const { open } = useAppKit()
 
 	const actionText: string = isDeposit ? 'Request Deposit' : 'Request Withdrawal'
+	const isDisabled: boolean = (isDeposit && isDepositDisabled) || !isConnected
 
 	return (
-		<Button isFull size="lg" variant="primary" isLoading={isLoading} onClick={isConnected ? onClick : open}>
+		<Button
+			isFull
+			size="lg"
+			variant="primary"
+			isLoading={isLoading}
+			onClick={isConnected ? e => onClick(e) : () => open()}
+			isDisabled={isDisabled}
+		>
 			{isConnected ? actionText : 'Connect Wallet'}
 		</Button>
 	)

src/components/pool/PoolCard/SwapButton/types.ts

@@ -3,6 +3,7 @@ import { type ErrorType } from './constants'
 
 export interface SwapButtonProps {
 	isLoading: boolean
+	isDepositDisabled: boolean
 	error: ErrorType | null
 	onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
 	isDeposit: boolean

src/components/pool/PoolCard/SwapInput/SwapInput.tsx

@@ -72,6 +72,7 @@ export const SwapInput = ({ swapState, swapDispatch, onClose }: SwapInputProps)
 			<SwapDetails swapState={swapState} swapDispatch={swapDispatch} />
 
 			<SwapButton
+				isDepositDisabled={!amountIsAvailable}
 				isDeposit={isDeposit}
 				isLoading={swapState.isLoading}
 				error={swapState.inputError}