fix: coin input value being cut by bottom line balance

.gitignore

@@ -41,7 +41,7 @@ node_modules
 
 # testing
 coverage
-cypress
+/cypress
 
 # next.js
 .next/

packages/app/.gitignore

@@ -1,3 +1 @@
 .env.test
-cypress/videos/
-cypress/screenshots/

packages/app/cypress/e2e/App.cy.ts

@@ -1,5 +1,5 @@
-describe('App flow', () => {
-  it('should execute whole app flow', () => {
+describe('End-to-end Test: 😁 Happy Path', () => {
+  it('should execute whole app basic flow', () => {
     cy.visit('/');
 
     cy.contains('button', /Launch app/i).click();
@@ -43,25 +43,25 @@ describe('App flow', () => {
         if (hasPoolCreated) {
           // validate add liquidity
           cy.contains('Enter Ether amount');
-          cy.get('[aria-label="Coin From Input"]').type('0.2');
+          cy.getByAriaLabel('Coin From Input').type('0.2');
 
           // make sure preview output box shows up
-          cy.get('[aria-label="preview-add-liquidity-output"]');
+          cy.getByAriaLabel('Preview Add Liquidity Output');
 
           // make sure pool price box shows up
-          cy.get('[aria-label="pool-price"]');
+          cy.getByAriaLabel('Pool Price Box');
           cy.contains('button', 'Add liquidity').click();
         } else {
           // validate create pool
           cy.contains('Enter Ether amount');
-          cy.get('[aria-label="Coin From Input"]').type('0.2');
-          cy.get('[aria-label="Coin To Input"]').type('190');
+          cy.getByAriaLabel('Coin From Input').type('0.2');
+          cy.getByAriaLabel('Coin To Input').type('190');
 
           // make sure preview output box shows up
-          cy.get('[aria-label="preview-add-liquidity-output"]');
+          cy.getByAriaLabel('Preview Add Liquidity Output');
 
           // make sure pool price box shows up
-          cy.get('[aria-label="pool-price"]');
+          cy.getByAriaLabel('Pool Price Box');
           cy.contains('button', 'Create liquidity').click();
         }
 
@@ -71,22 +71,23 @@ describe('App flow', () => {
         // validate swap
         cy.contains('button', 'Swap').click();
         cy.contains('Enter amount');
-        cy.get('[aria-label="Coin From Input"]').type('0.1');
+        cy.getByAriaLabel('Coin From Input').type('0.1');
         // make sure preview output box shows up
-        cy.get('[aria-label="preview-swap-output"]');
+        cy.getByAriaLabel('Preview Swap Output');
 
-        // make sure "swap" button comes from inside swap page only
-        cy.contains('[aria-label="Swap button"]', 'Swap').click();
+        // execute swap operation
+        cy.getByAriaLabel('Swap button').click();
         cy.contains('Swap made successfully!');
 
         // validate remove liquidity
         cy.contains('button', 'Pool').click();
         cy.contains('button', 'Remove liquidity').click();
-        cy.get('.coinSelector--maxButton').click();
+        cy.getByAriaLabel('Set Maximun Balance').click();
+        //
         // make sure preview output box shows up
-        cy.get('[aria-label="preview-remove-liquidity-output"]');
+        cy.getByAriaLabel('Preview Remove Liquidity Output');
         // make sure current positions box shows up
-        cy.get('[aria-label="pool-current-position"]');
+        cy.getByAriaLabel('Pool Current Position');
         cy.contains('button', 'Remove liquidity').click();
         cy.contains('Liquidity removed successfully!');
       });

packages/app/cypress/support/commands.ts

@@ -35,3 +35,7 @@
 //     }
 //   }
 // }
+
+Cypress.Commands.add('getByAriaLabel', (selector, options) =>
+  cy.get(`[aria-label="${selector}"]`, options)
+);

packages/app/cypress/support/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Get element by aria-label
+     * @example
+     * cy.getByAriaLabel('Aria Label');
+     * cy.getByAriaLabel('Aria Label', { log: false, timeout: 6000 });
+     */
+    getByAriaLabel(
+      ariaLabel: string,
+      options?: Partial<Loggable & Timeoutable & Withinable & Shadow>
+    ): Chainable<JQuery<E>>;
+  }
+}

packages/app/src/styles/components/coin-balance.css

@@ -0,0 +1,5 @@
+@layer components {
+  .coinBalance--maxButton {
+    @apply text-xs py-0 px-1 h-auto bg-primary-800/60 text-primary-500 hover:bg-primary-800;
+  }
+}

packages/app/src/styles/components/coin-input.css

@@ -1,6 +1,6 @@
 @layer components {
   .coinInput {
-    @apply flex bg-gray-700 rounded-2xl p-2 border border-gray-700;
+    @apply bg-gray-700 rounded-2xl p-2 border border-gray-700;
   }
   .coinInput--input {
     @apply w-[100px] flex-1 ml-2 h-10 bg-transparent placeholder:text-gray-300;

packages/app/src/styles/components/coin-selector.css

@@ -11,7 +11,4 @@
   .coinSelector--root {
     @apply flex flex-col items-end;
   }
-  .coinSelector--maxButton {
-    @apply text-xs py-0 px-1 h-auto bg-primary-800/60 text-primary-500 hover:bg-primary-800;
-  }
 }

packages/app/src/systems/Core/components/AssetItem.tsx

@@ -13,8 +13,6 @@ export function AssetItem({ coin }: AssetItemProps) {
     coin,
     amount: coin.amount,
     isReadOnly: true,
-    showBalance: false,
-    showMaxButton: false,
   });
 
   return (

packages/app/src/systems/Core/components/CoinBalance.tsx

@@ -0,0 +1,58 @@
+import { useMemo } from "react";
+
+import { useBalances } from "../hooks";
+import { parseToFormattedNumber } from "../utils";
+
+import { Button, Tooltip } from "~/systems/UI";
+import type { Coin } from "~/types";
+
+export type CoinBalanceProps = {
+  coin?: Coin | null;
+  showMaxButton?: boolean;
+  onSetMaxBalance?: () => void;
+  gasFee?: bigint | null;
+};
+
+export const CoinBalance = ({
+  coin,
+  showMaxButton = true,
+  onSetMaxBalance,
+  gasFee,
+}: CoinBalanceProps) => {
+  const { data: balances } = useBalances({ enabled: true });
+
+  const balance = useMemo(() => {
+    const coinBalance = balances?.find(
+      (item) => item.assetId === coin?.assetId
+    );
+    return parseToFormattedNumber(coinBalance?.amount || BigInt(0));
+  }, [balances, coin?.assetId]);
+
+  return (
+    <div className="flex items-center justify-end gap-2 mt-2 whitespace-nowrap">
+      <div
+        className="text-xs text-gray-400"
+        aria-label={`${coin?.symbol} balance`}
+      >
+        Balance: {balance}
+      </div>
+      {showMaxButton && (
+        <Tooltip
+          content={`Max = ${balance}(${coin?.symbol} balance)${
+            gasFee ? ` - ${parseToFormattedNumber(gasFee)}(network fee)` : ``
+          }`}
+        >
+          <Button
+            aria-label="Set Maximun Balance"
+            size="sm"
+            onPress={onSetMaxBalance}
+            className="text-xs py-0 px-1 h-auto bg-primary-800/60 text-primary-500 hover:bg-primary-800"
+            variant="ghost"
+          >
+            Max
+          </Button>
+        </Tooltip>
+      )}
+    </div>
+  );
+};

packages/app/src/systems/Core/components/CoinInput.tsx

@@ -14,6 +14,7 @@ import {
   ZERO,
 } from "../utils";
 
+import type { CoinBalanceProps } from "./CoinBalance";
 import type { CoinSelectorProps } from "./CoinSelector";
 
 import { DECIMAL_UNITS } from "~/config";
@@ -34,8 +35,6 @@ type UseCoinParams = {
   /**
    * Coins for <CoinSelector />
    */
-  showBalance?: boolean;
-  showMaxButton?: boolean;
   onChangeCoin?: (coin: Coin) => void;
   disableWhenEth?: boolean;
 };
@@ -46,6 +45,7 @@ export type UseCoinInput = {
   setGasFee: React.Dispatch<React.SetStateAction<bigint | null>>;
   getInputProps: () => CoinInputProps;
   getCoinSelectorProps: () => CoinSelectorProps;
+  getCoinBalanceProps: () => CoinBalanceProps;
   formatted: string;
   hasEnoughBalance: boolean;
 };
@@ -77,8 +77,6 @@ export function useCoinInput({
   gasFee: initialGasFee,
   isReadOnly,
   onInput,
-  showBalance,
-  showMaxButton,
   onChangeCoin,
   disableWhenEth,
   ...params
@@ -131,13 +129,7 @@ export function useCoinInput({
     return {
       coin,
       isReadOnly,
-      showBalance,
-      showMaxButton,
       onChange: onChangeCoin,
-      onSetMaxBalance: () => {
-        onInput?.();
-        handleInputPropsChange(formatValue(getSafeMaxBalance()));
-      },
       ...(disableWhenEth &&
         isEth && {
           isReadOnly: true,
@@ -146,6 +138,17 @@ export function useCoinInput({
     } as CoinSelectorProps;
   }
 
+  function getCoinBalanceProps() {
+    return {
+      coin,
+      gasFee,
+      onSetMaxBalance: () => {
+        onInput?.();
+        handleInputPropsChange(formatValue(getSafeMaxBalance()));
+      },
+    } as CoinBalanceProps;
+  }
+
   useEffect(() => {
     // Enable value initialAmount to be null
     if (initialAmount !== undefined) setAmount(initialAmount);
@@ -157,6 +160,7 @@ export function useCoinInput({
     setGasFee,
     getInputProps,
     getCoinSelectorProps,
+    getCoinBalanceProps,
     formatted: formatValue(amount),
     hasEnoughBalance: getSafeMaxBalance() >= (amount || ZERO),
   };
@@ -173,9 +177,10 @@ type CoinInputProps = Omit<UseCoinParams, "onChange"> &
     displayType: DisplayType;
     autoFocus?: boolean;
     isLoading?: boolean;
-    rightElement?: ReactNode;
     isAllowed?: (values: NumberFormatValues) => boolean;
     onChange?: (val: string) => void;
+    rightElement?: ReactNode;
+    bottomElement?: ReactNode;
   };
 
 export const CoinInput = forwardRef<HTMLInputElement, CoinInputProps>(
@@ -189,6 +194,7 @@ export const CoinInput = forwardRef<HTMLInputElement, CoinInputProps>(
       autoFocus,
       isLoading,
       rightElement,
+      bottomElement,
       ...props
     },
     ref
@@ -204,32 +210,35 @@ export const CoinInput = forwardRef<HTMLInputElement, CoinInputProps>(
 
     return (
       <div className="coinInput">
-        {isLoading ? (
-          <div className="flex-1">
-            <Spinner className="self-start mt-2 ml-2" variant="base" />
-          </div>
-        ) : (
-          <NumberFormat
-            {...props}
-            autoFocus={autoFocus}
-            getInputRef={ref}
-            allowNegative={false}
-            defaultValue={initialValue}
-            value={getRightValue(value || "", displayType)}
-            displayType={displayType}
-            isAllowed={isAllowed}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              onChange?.(e.target.value);
-              setValue(e.target.value);
-            }}
-            decimalScale={DECIMAL_UNITS}
-            placeholder="0"
-            className="coinInput--input"
-            thousandSeparator={false}
-            onInput={onInput}
-          />
-        )}
-        {rightElement}
+        <div className="flex">
+          {isLoading ? (
+            <div className="flex-1">
+              <Spinner className="self-start mt-2 ml-2" variant="base" />
+            </div>
+          ) : (
+            <NumberFormat
+              {...props}
+              autoFocus={autoFocus}
+              getInputRef={ref}
+              allowNegative={false}
+              defaultValue={initialValue}
+              value={getRightValue(value || "", displayType)}
+              displayType={displayType}
+              isAllowed={isAllowed}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                onChange?.(e.target.value);
+                setValue(e.target.value);
+              }}
+              decimalScale={DECIMAL_UNITS}
+              placeholder="0"
+              className="coinInput--input"
+              thousandSeparator={false}
+              onInput={onInput}
+            />
+          )}
+          {rightElement}
+        </div>
+        {bottomElement}
       </div>
     );
   }