Merge branch 'master' of github.com:FuelLabs/swayswap into refac/swap

* 'master' of github.com:FuelLabs/swayswap: feat: move check branch to commit step (#292) feat: add agreement and update copy (#290) fix: correct behavior when typing only "." in the coin input (#291) fix: coin input value being cut by bottom line balance (#286)
FuelLabs · Jun 17, 2022 · 58eb87b · 58eb87b
2 parents 4df5a13 + 4b2ed2e
commit 58eb87b
Show file tree

Hide file tree

Showing 29 changed files with 286 additions and 141 deletions.
diff --git a/.github/workflows/deploy-contracts.yml b/.github/workflows/deploy-contracts.yml
@@ -67,7 +67,6 @@ jobs:
     needs: test_inputs
     name: Build and deploy
     runs-on: ubuntu-latest
-    if: github.ref != 'refs/heads/master'
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -130,7 +129,7 @@ jobs:
           NODE_ENV: production
 
       - name: Commit .env.production
-        if: ${{ github.event.inputs.commit_changes }}
+        if: ${{ github.event.inputs.commit_changes && github.ref != 'refs/heads/master' }}
         uses: EndBug/add-and-commit@v9
         with:
           message: 'chore: update contract ids'

diff --git a/.gitignore b/.gitignore
@@ -41,7 +41,7 @@ node_modules
 
 # testing
 coverage
-cypress
+/cypress
 
 # next.js
 .next/

diff --git a/docs/LEGAL_DISCLAIMER.md b/docs/LEGAL_DISCLAIMER.md
diff --git a/packages/app/.gitignore b/packages/app/.gitignore
@@ -1,3 +1 @@
 .env.test
-cypress/videos/
-cypress/screenshots/
diff --git a/packages/app/cypress/e2e/App.cy.ts b/packages/app/cypress/e2e/App.cy.ts
@@ -1,13 +1,14 @@
-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();
 
     // create a wallet and fund it
     cy.contains('button', /Create wallet/i).click();
     cy.contains('button', 'Give me ETH').click();
-    cy.contains('button', 'Go to Swap').click();
+    cy.getByAriaLabel('Accept the use agreement').check();
+    cy.contains('button', 'Get Swapping!').click();
     cy.contains('Enter amount');
 
     // mint tokens
@@ -43,25 +44,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 +72,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!');
       });

diff --git a/packages/app/cypress/support/commands.ts b/packages/app/cypress/support/commands.ts
@@ -35,3 +35,7 @@
 //     }
 //   }
 // }
+
+Cypress.Commands.add('getByAriaLabel', (selector, options) =>
+  cy.get(`[aria-label="${selector}"]`, options)
+);
diff --git a/packages/app/cypress/support/index.d.ts b/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>>;
+  }
+}
diff --git a/packages/app/src/styles/components/coin-balance.css b/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;
+  }
+}
diff --git a/packages/app/src/styles/components/coin-input.css b/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;

diff --git a/packages/app/src/styles/components/coin-selector.css b/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;
-  }
 }
diff --git a/packages/app/src/styles/components/welcome-page.css b/packages/app/src/styles/components/welcome-page.css
@@ -9,6 +9,10 @@
   }
   .welcomePage--content {
     @apply relative m-8 grid place-items-center max-h-[100vh];
+
+    @media (max-width: 640px) {
+      @apply m-0 my-4;
+    }
   }
   /*
     WelcomeSidebar

diff --git a/packages/app/src/systems/Core/components/AssetItem.tsx b/packages/app/src/systems/Core/components/AssetItem.tsx
@@ -15,8 +15,6 @@ export function AssetItem({ coin }: AssetItemProps) {
     coin,
     amount: coin.amount,
     isReadOnly: true,
-    showBalance: false,
-    showMaxButton: false,
   });
 
   return (

diff --git a/packages/app/src/systems/Core/components/CoinBalance.tsx b/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, Maybe } from "~/types";
+
+export type CoinBalanceProps = {
+  coin?: Maybe<Coin>;
+  showMaxButton?: boolean;
+  onSetMaxBalance?: () => void;
+  gasFee?: Maybe<bigint>;
+};
+
+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>
+  );
+};
diff --git a/packages/app/src/systems/Core/components/CoinInput.tsx b/packages/app/src/systems/Core/components/CoinInput.tsx
@@ -9,7 +9,17 @@ import { Spinner } from "~/systems/UI";
 
 function getRightValue(value: string, displayType: string) {
   if (displayType === "text") return parseToFormattedNumber(value);
-  return value === "0.0" ? "0" : value;
+
+  switch (value) {
+    case "0.0":
+      return "0";
+
+    case ".":
+      return "0.";
+
+    default:
+      return value;
+  }
 }
 
 export const CoinInput = forwardRef<HTMLInputElement, CoinInputProps>(
@@ -23,6 +33,7 @@ export const CoinInput = forwardRef<HTMLInputElement, CoinInputProps>(
       autoFocus,
       isLoading,
       rightElement,
+      bottomElement,
       ...props
     },
     ref
@@ -38,32 +49,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={props.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}
+              className="coinInput--input"
+              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={props.placeholder || "0"}
+              thousandSeparator={false}
+              onInput={onInput}
+            />
+          )}
+          {rightElement}
+        </div>
+        {bottomElement}
       </div>
     );
   }