Feat: Added specified error toasts, and improved button states

src/components/buttons/3DButton.tsx

@@ -2,39 +2,97 @@ import { PropsWithChildren } from 'react'
 
 type BaseButtonProps = {
   onClick?: () => void
-  error?: boolean
-  fullWidth?: boolean
   type?: 'button' | 'submit' | 'reset'
+  isError?: boolean
+  isFullWidth?: boolean
+  isDisabled?: boolean
+  isWalletConnected?: boolean
+  isBalanceLoaded?: boolean
 }
 
-export const Button3D = ({ children, ...restProps }: PropsWithChildren<BaseButtonProps>) => {
-  return <_3DButtonLink {...restProps}>{children}</_3DButtonLink>
-}
-
-const _3DButtonLink = ({
+export const Button3D = ({
   children,
-  error,
-  fullWidth,
   onClick,
-  type,
+  type = 'button',
+  isError,
+  isFullWidth,
+  isDisabled,
+  isWalletConnected,
+  isBalanceLoaded,
 }: PropsWithChildren<BaseButtonProps>) => {
   return (
-    <button className={fullWidth ? 'w-full' : ''} onClick={onClick} type={type ?? 'button'}>
+    <button
+      className={isFullWidth ? 'w-full' : ''}
+      onClick={onClick}
+      type={type}
+      disabled={isDisabled}
+    >
       <span
-        className={`group font-inter outline-offset-4 cursor-pointer  ${
-          error ? 'bg-[#863636]' : 'bg-[#2A326A]'
-        } ${
-          fullWidth ? 'w-full ' : ''
+        className={`group font-inter outline-offset-4 cursor-pointer ${getSubstrateButtonColor({
+          isDisabled,
+          isWalletConnected,
+          isError,
+          isBalanceLoaded,
+        })} ${
+          isFullWidth ? 'w-full ' : ''
         } border-b rounded-lg border-primary-dark font-medium select-none inline-block`}
       >
         <span
-          className={`${'pr-10'} pl-10 group-active:-translate-y-[2px] block py-[18px] transition-transform delay-[250] hover:-translate-y-[6px] -translate-y-[4px] font-medium text-[15px] border rounded-lg border-primary-dark leading-5 ${
-            error ? 'bg-[#E14F4F] text-white' : 'bg-[#4D62F0] text-white '
-          } ${fullWidth ? 'w-full flex items-center justify-center' : ''} `}
+          className={`pr-10 pl-10 group-active:-translate-y-[2px] block py-[18px] transition-transform delay-[250] hover:translate-y-[${
+            isDisabled ? '-4px' : '6px'
+          }] -translate-y-[4px] font-medium text-[15px] border rounded-lg border-primary-dark leading-5 ${getButtonColor(
+            {
+              isDisabled,
+              isWalletConnected,
+              isError,
+              isBalanceLoaded,
+            }
+          )} ${isFullWidth ? 'w-full flex items-center justify-center' : ''} `}
         >
           <span className="flex items-center">{children}</span>
         </span>
       </span>
     </button>
   )
 }
+
+function getSubstrateButtonColor({
+  isDisabled,
+  isWalletConnected,
+  isError,
+  isBalanceLoaded,
+}: IGetButtonColorArgs) {
+  switch (true) {
+    case isDisabled:
+    case isWalletConnected && !isBalanceLoaded:
+      return 'bg-[#666666]'
+    case isError && isWalletConnected:
+      return 'bg-[#863636]'
+    default:
+      return 'bg-[#2A326A]'
+  }
+}
+
+function getButtonColor({
+  isDisabled,
+  isWalletConnected,
+  isError,
+  isBalanceLoaded,
+}: IGetButtonColorArgs) {
+  switch (true) {
+    case isDisabled:
+    case isWalletConnected && !isBalanceLoaded:
+      return 'bg-[#888888] text-white cursor-not-allowed'
+    case isError && isWalletConnected:
+      return 'bg-[#E14F4F] text-white'
+    default:
+      return 'bg-[#4D62F0] text-white '
+  }
+}
+
+interface IGetButtonColorArgs {
+  isWalletConnected: boolean | undefined
+  isBalanceLoaded: boolean | undefined
+  isDisabled: boolean | undefined
+  isError: boolean | undefined
+}

src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,10 @@
+export const Tooltip = ({ text, dataTestId = 'tooltipText' }: TooltipProps) => (
+  <div className="absolute bottom-[-150%] transform -translate-x-[30%] bg-[rgb(29,29,32)] text-white text-xs rounded-md px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+    <span datatest-id={dataTestId}>{text}</span>
+  </div>
+)
+
+interface TooltipProps {
+  text: string
+  dataTestId?: string
+}

src/config/tokens.ts

@@ -220,8 +220,8 @@ export function getTokenOptionsByChainId(chainId: ChainId): TokenId[] {
     : []
 }
 
-export function getTokenById(id: string): Token | null {
-  return Tokens[id as TokenId] || null
+export function getTokenById(id: TokenId | string): Token {
+  return Tokens[id as TokenId]
 }
 
 export function getTokenAddress(id: TokenId, chainId: ChainId): Address {

src/features/swap/SwapConfirm.tsx

@@ -5,6 +5,7 @@ import mentoLoaderBlue from 'src/animations/Mentoloader_blue.json'
 import mentoLoaderGreen from 'src/animations/Mentoloader_green.json'
 import { toastToYourSuccess } from 'src/components/TxSuccessToast'
 import { Button3D } from 'src/components/buttons/3DButton'
+import { Tooltip } from 'src/components/tooltip/Tooltip'
 import { TokenId, Tokens } from 'src/config/tokens'
 import { useAppDispatch, useAppSelector } from 'src/features/store/hooks'
 import { setConfirmView, setFormValues } from 'src/features/swap/swapSlice'
@@ -19,6 +20,7 @@ import { FloatingBox } from 'src/layout/FloatingBox'
 import { Modal } from 'src/layout/Modal'
 import { fromWeiRounded, getAdjustedAmount, toSignificant } from 'src/utils/amount'
 import { logger } from 'src/utils/logger'
+import { truncateTextByLength } from 'src/utils/string'
 import { useAccount, useChainId } from 'wagmi'
 
 interface Props {
@@ -230,7 +232,7 @@ export function SwapConfirmCard({ formValues }: Props) {
       </div>
 
       <div className="flex w-full px-6 pb-6 mt-6">
-        <Button3D fullWidth onClick={onSubmit}>
+        <Button3D isFullWidth onClick={onSubmit}>
           Swap
         </Button3D>
       </div>
@@ -253,9 +255,29 @@ interface SwapConfirmSummaryProps {
 }
 
 export function SwapConfirmSummary({ from, to, rate }: SwapConfirmSummaryProps) {
+  const optimalAmountLength = 8
   const fromToken = Tokens[from.token]
   const toToken = Tokens[to.token]
 
+  const handleAmount = (amount: string) => {
+    const shouldTruncate = amount.length > optimalAmountLength
+    const displayedAmount = shouldTruncate
+      ? truncateTextByLength(optimalAmountLength, amount)
+      : amount
+
+    return shouldTruncate ? (
+      // todo: Replace to module.css. Couldn't been replaced because of incorrect styles while replacing
+      <div className="relative text-lg font-semibold leading-6 text-center dark:text-white group">
+        <span data-testid="truncatedAmount"> {displayedAmount}</span>
+        <Tooltip text={amount}></Tooltip>
+      </div>
+    ) : (
+      <div className="relative text-lg font-semibold leading-6 text-center dark:text-white group">
+        <span data-testid="fullAmount"> {displayedAmount}</span>
+      </div>
+    )
+  }
+
   return (
     <div className="dark:bg-[#18181B] bg-[#EFF1F3] rounded-xl mt-6 mx-6 ">
       <div className="relative flex items-center gap-3 rounded-xl justify-between bg-white border border-[#E5E7E9] dark:border-transparent dark:bg-[#303033]  p-[5px]">
@@ -265,20 +287,16 @@ export function SwapConfirmSummary({ from, to, rate }: SwapConfirmSummaryProps)
           </div>
           <div className="flex flex-col items-center flex-1 px-2">
             <div className="text-sm text-center dark:text-[#AAB3B6]">{fromToken.symbol}</div>
-            <div className="text-lg font-semibold leading-6 text-center dark:text-white">
-              {toSignificant(from.amount)}
-            </div>
+            {handleAmount(toSignificant(from.amount))}
           </div>
         </div>
-        <div className=" dark:text-[#AAB3B6]">
+        <div className="dark:text-[#AAB3B6]">
           <ChevronRight />
         </div>
         <div className="flex flex-1 items-center pr-3 h-[70px] bg-[#EFF1F3] dark:bg-[#18181B] rounded-lg">
           <div className="flex flex-col items-center flex-1 px-2">
             <div className="text-sm text-center dark:text-[#AAB3B6]">{toToken.symbol}</div>
-            <div className="text-lg font-semibold leading-6 text-center dark:text-white">
-              {toSignificant(to.amount) || '0'}
-            </div>
+            {handleAmount(toSignificant(to.amount) || '0')}
           </div>
           <div className="my-[15px]">
             <TokenIcon size="l" token={toToken} />