feat(synapse-interface): update button states (#2214)

* Add "Swap" button state

* Stake button detects insufficient balance based on user input compared to balance

* Disable Unstake button when input greater than staked balance

* Unstake Button text when input too great

* Update check for no lp token balance

* Trim trailing zeroes after balances

* Trim trailing zeroes off stake pool lp data

* Rm unused var

* Remove unused imports on Swap page

* Add conditions for when Approve button label appears

* Actions dropdown positioning

* Trim zeroes when updating balance from Portfolio select button

* Update Bridge Button State when necessary, reduce state changes when quote loading

* Implement same for Swap

* Update swap button disabled conditions to prevent flash post-approve

* Update default WithdrawButton state

* Withdraw Button state

* Fix duplicate import

packages/synapse-interface/components/Pools/PoolActionOptions.tsx

@@ -53,13 +53,12 @@ export const PoolActionOptions = ({
           >
             <div
               className={`
-                flex items-center 
-                text-sm
-                rounded-sm
-                border border-[#565058] 
-                pl-2 pr-2 pt-1 pb-1 space-x-2 
-                hover:cursor-pointer
-                hover:bg-[#101018] ${open ? 'bg-[#101018]' : ''}`}
+                flex items-center text-sm
+                rounded-sm border border-[#565058]
+                pl-2 pr-2 pt-1 pb-1 space-x-2
+                hover:cursor-pointer hover:bg-[#101018]
+                ${open ? 'bg-[#101018]' : ''}
+              `}
             >
               <div className="text-md text-[#BFBCC2]">Actions</div>
               <DownArrow />
@@ -128,7 +127,7 @@ export function TransactionPopoverContainer({
       <Popover.Panel
         style={{ boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)' }}
         className={`
-          absolute z-10 top-[-74px] left-[50px] w-[110px] transform-gpu
+          absolute z-10 top-[33px] left-[85px] w-[110px] transform-gpu
           -translate-x-full border border-separator bg-surface
           rounded-sm overflow-hidden shadow-md
         `}

packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx

@@ -13,6 +13,7 @@ import Image from 'next/image'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { hasOnlyZeroes } from '@/utils/hasOnlyZeroes'
 import { PortfolioAssetActionButton } from './PortfolioAssetActionButton'
+import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
 
 const handleFocusOnBridgeInput = () => {
   inputRef.current.focus()
@@ -50,7 +51,11 @@ export const PortfolioTokenAsset = ({
     dispatch(setFromChainId(portfolioChainId))
     dispatch(setFromToken(token))
     handleFocusOnBridgeInput()
-    dispatch(updateFromValue(getParsedBalance(balance, tokenDecimals)))
+    dispatch(
+      updateFromValue(
+        trimTrailingZeroesAfterDecimal(getParsedBalance(balance, tokenDecimals))
+      )
+    )
   }, [token, balance, portfolioChainId])
 
   return (

packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx

@@ -143,7 +143,7 @@ export const BridgeTransactionButton = ({
       onClick: () => switchNetwork(fromChainId),
       pendingLabel: 'Switching chains',
     }
-  } else if (!isApproved) {
+  } else if (!isApproved && fromValueBigInt > 0 && bridgeQuote?.destQuery) {
     buttonProperties = {
       onClick: approveTxn,
       label: `Approve ${fromToken?.symbol}`,

packages/synapse-interface/components/StateManagedSwap/SwapTransactionButton.tsx

@@ -54,10 +54,10 @@ export const SwapTransactionButton = ({
   }, [balanceForToken, swapFromValue, swapChainId, swapFromToken, swapToToken])
 
   const isButtonDisabled =
-    isLoading ||
+    (isLoading && !isApproved) ||
+    (isConnected && !sufficientBalance) ||
     swapQuote === EMPTY_SWAP_QUOTE_ZERO ||
-    swapQuote === EMPTY_SWAP_QUOTE ||
-    (isConnected && !sufficientBalance)
+    swapQuote === EMPTY_SWAP_QUOTE
 
   let buttonProperties
 
@@ -101,7 +101,12 @@ export const SwapTransactionButton = ({
       onClick: () => switchNetwork(swapChainId),
       pendingLabel: 'Switching chains',
     }
-  } else if (!isApproved) {
+  } else if (
+    !isApproved &&
+    !isLoading &&
+    fromValueBigInt > 0 &&
+    swapQuote?.quote
+  ) {
     buttonProperties = {
       onClick: approveTxn,
       label: `Approve ${swapFromToken?.symbol}`,

packages/synapse-interface/pages/pool/poolManagement/WithdrawButton.tsx

@@ -33,23 +33,17 @@ const WithdrawButton = ({ approveTxn, withdrawTxn, isApproved }) => {
 
   const poolDecimals = pool?.decimals[pool?.chainId]
 
-  const needsInput = stringToBigInt(inputValue, poolDecimals) === 0n
-
   const isBalanceEnough =
     stringToBigInt(inputValue, poolDecimals) !== 0n &&
     stringToBigInt(inputValue, poolDecimals) <= poolUserData.lpTokenBalance
 
-  const isButtonDisabled =
-    isLoading || !isBalanceEnough || withdrawQuote === DEFAULT_WITHDRAW_QUOTE
+  const isValidInput = stringToBigInt(inputValue, poolDecimals) !== 0n
+  const isValidQuote = withdrawQuote !== DEFAULT_WITHDRAW_QUOTE
+  const isButtonDisabled = isLoading || !isBalanceEnough || !isValidQuote
 
   let buttonProperties
 
-  if (needsInput) {
-    buttonProperties = {
-      label: 'Enter amount',
-      onClick: null,
-    }
-  } else if (!isBalanceEnough) {
+  if (!isBalanceEnough && isValidQuote && isValidInput) {
     buttonProperties = {
       label: 'Insufficient Balance',
       onClick: null,
@@ -74,7 +68,7 @@ const WithdrawButton = ({ approveTxn, withdrawTxn, isApproved }) => {
       onClick: () => switchNetwork(pool.chainId),
       pendingLabel: 'Switching chains',
     }
-  } else if (!isApproved) {
+  } else if (!isApproved && isValidQuote && isValidInput) {
     buttonProperties = {
       onClick: approveTxn,
       label: `Approve Token`,

packages/synapse-interface/pages/stake/StakeCard.tsx

@@ -15,6 +15,7 @@ import { formatBigIntToString } from '@/utils/bigint/format'
 import { stringToBigInt } from '@/utils/bigint/format'
 import { Token } from '@/utils/types'
 import { InteractiveInputRowButton } from '@/components/InteractiveInputRowButton'
+import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
 import ButtonLoadingDots from '@/components/buttons/ButtonLoadingDots'
 import InteractiveInputRow from '@/components/InteractiveInputRow'
 import Button from '@/components/ui/tailwind/Button'
@@ -131,12 +132,10 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
         <div className="flex items-center justify-between my-2">
           <div className="text-[#EEEDEF]">Unstaked</div>
           <div className="text-white ">
-            {lpTokenBalance === 0n
+            {!lpTokenBalance
               ? '\u2212'
-              : formatBigIntToString(
-                  lpTokenBalance,
-                  tokenInfo.decimals,
-                  6
+              : trimTrailingZeroesAfterDecimal(
+                  formatBigIntToString(lpTokenBalance, tokenInfo.decimals, 6)
                 )}{' '}
             <span className="text-base text-[#A9A5AD]">
               {pool ? pool.symbol : ''}
@@ -146,7 +145,9 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
         <div className="flex items-center justify-between my-2">
           <div className="text-[#EEEDEF]">Staked</div>
           <div className="text-white ">
-            {formatBigIntToString(userStakeData.amount, tokenInfo.decimals, 6)}{' '}
+            {trimTrailingZeroesAfterDecimal(
+              formatBigIntToString(userStakeData.amount, tokenInfo.decimals, 6)
+            )}{' '}
             <span className="text-base text-[#A9A5AD]">
               {pool ? pool.symbol : ''}
             </span>
@@ -157,17 +158,19 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
             {pool?.customRewardToken ?? 'SYN'} Earned
           </div>
           <div className="text-white ">
-            {userStakeData.reward === 0n
+            {!userStakeData.reward
               ? '\u2212'
-              : formatBigIntToString(userStakeData.reward, 18, 6)}{' '}
+              : trimTrailingZeroesAfterDecimal(
+                  formatBigIntToString(userStakeData.reward, 18, 6)
+                )}{' '}
             <span className="text-base text-[#A9A5AD]">
               {pool?.customRewardToken ?? 'SYN'}
             </span>
           </div>
         </div>
-        {userStakeData.reward === 0n ? null : (
+        {!userStakeData.reward ? null : (
           <Button
-            disabled={userStakeData.reward === 0n}
+            disabled={!userStakeData.reward}
             className={`
              bg-[#564f58]
               w-full my-2 px-4 py-3 tracking-wide
@@ -232,19 +235,23 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
               title={pool?.symbol}
               isConnected={Boolean(address)}
               balanceStr={
-                lpTokenBalance === 0n
+                !lpTokenBalance
                   ? '0.0'
-                  : formatBigIntToString(lpTokenBalance, tokenInfo.decimals, 18)
+                  : trimTrailingZeroesAfterDecimal(
+                      formatBigIntToString(
+                        lpTokenBalance,
+                        tokenInfo.decimals,
+                        18
+                      )
+                    )
               }
               onClickBalance={() => {
                 setDeposit({
-                  str:
-                    lpTokenBalance === 0n
-                      ? '0.0000'
-                      : formatBigIntToString(
-                          lpTokenBalance,
-                          tokenInfo.decimals
-                        ),
+                  str: !lpTokenBalance
+                    ? '0.0000'
+                    : trimTrailingZeroesAfterDecimal(
+                        formatBigIntToString(lpTokenBalance, tokenInfo.decimals)
+                      ),
                   bi: lpTokenBalance,
                 })
               }}
@@ -257,26 +264,30 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
                   bi: stringToBigInt(val, pool.decimals[chainId]),
                 })
               }}
-              disabled={lpTokenBalance === 0n}
+              disabled={!lpTokenBalance}
               icon={pool?.icon?.src}
             />
           ) : (
             <InteractiveInputRow
               title={pool?.symbol}
               isConnected={Boolean(address)}
-              balanceStr={formatBigIntToString(
-                userStakeData.amount,
-                tokenInfo.decimals,
-                18
+              balanceStr={trimTrailingZeroesAfterDecimal(
+                formatBigIntToString(
+                  userStakeData.amount,
+                  tokenInfo.decimals,
+                  18
+                )
               )}
               onClickBalance={() => {
                 setWithdraw(
-                  userStakeData.amount === 0n
+                  !userStakeData.amount
                     ? '0.00000'
-                    : formatBigIntToString(
-                        userStakeData.amount,
-                        tokenInfo.decimals,
-                        18
+                    : trimTrailingZeroesAfterDecimal(
+                        formatBigIntToString(
+                          userStakeData.amount,
+                          tokenInfo.decimals,
+                          18
+                        )
                       )
                 )
               }}
@@ -286,22 +297,26 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
                 let val = cleanNumberInput(e.target.value)
                 setWithdraw(val)
               }}
-              disabled={userStakeData.amount === 0n}
+              disabled={!userStakeData.amount}
               icon={pool?.icon?.src}
             />
           )}
           {showStake ? (
             <InteractiveInputRowButton
               title={pool?.symbol}
               buttonLabel={
-                lpTokenBalance === 0n
+                !lpTokenBalance || lpTokenBalance < deposit.bi
                   ? 'Insufficient Balance'
                   : allowance < deposit.bi
                   ? `Approve ${pool?.symbol}`
                   : 'Stake'
               }
               loadingLabel={isPendingApprove ? 'Approving' : 'Staking'}
-              disabled={lpTokenBalance === 0n || deposit.str === ''}
+              disabled={
+                !lpTokenBalance ||
+                lpTokenBalance < deposit.bi ||
+                deposit.str === ''
+              }
               isPending={isPendingStake || isPendingApprove}
               onClickEnter={
                 allowance < deposit.bi
@@ -342,9 +357,17 @@ const StakeCard = ({ address, chainId, pool }: StakeCardProps) => {
           ) : (
             <InteractiveInputRowButton
               title={pool?.symbol}
-              buttonLabel="Unstake"
+              buttonLabel={
+                userStakeData.amount < stringToBigInt(withdraw, 18)
+                  ? 'Insufficient balance'
+                  : 'Unstake'
+              }
               loadingLabel="Unstaking"
-              disabled={userStakeData.amount === 0n || withdraw === ''}
+              disabled={
+                !userStakeData.amount ||
+                userStakeData.amount < stringToBigInt(withdraw, 18) ||
+                withdraw === ''
+              }
               isPending={isPendingUnstake}
               onClickEnter={async () => {
                 const tx = await pendingUnstakeTxWrapFunc(

packages/synapse-interface/pages/swap/index.tsx

@@ -1,4 +1,4 @@
-import { useAccount, useNetwork } from 'wagmi'
+import { useAccount } from 'wagmi'
 import { useSelector } from 'react-redux'
 import { RootState } from '../../store/store'
 import toast from 'react-hot-toast'
@@ -42,15 +42,14 @@ import { SwapFromTokenListOverlay } from '@/components/StateManagedSwap/SwapFrom
 import { SwapInputContainer } from '@/components/StateManagedSwap/SwapInputContainer'
 import { SwapOutputContainer } from '@/components/StateManagedSwap/SwapOutputContainer'
 import { setSwapQuote, updateSwapFromValue } from '@/slices/swap/reducer'
-import { DEFAULT_FROM_CHAIN, EMPTY_SWAP_QUOTE_ZERO } from '@/constants/swap'
+import { EMPTY_SWAP_QUOTE_ZERO } from '@/constants/swap'
 import { SwapToTokenListOverlay } from '@/components/StateManagedSwap/SwapToTokenListOverlay'
 import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper'
 import useSyncQueryParamsWithSwapState from '@/utils/hooks/useSyncQueryParamsWithSwapState'
 import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError'
 
 const StateManagedSwap = () => {
   const { address } = useAccount()
-  const { chain } = useNetwork()
   const { synapseSDK } = useSynapseContext()
   const swapDisplayRef = useRef(null)
   const quoteToastRef = useRef({ id: '' })
@@ -126,8 +125,6 @@ const StateManagedSwap = () => {
     }
   }, [swapQuote, swapFromToken, swapFromValue, swapChainId])
 
-  let quoteToast
-
   const getAndSetSwapQuote = async () => {
     currentSDKRequestID.current += 1
     const thisRequestId = currentSDKRequestID.current