refactor: add first version of refactoring on swap (#283)

* chore: add Maybe type
* refac: move useCoinInput to a separate file
* refac: rename ActiveInput enum to SwapDirection
* refac: code improvements
* fix: dependency cycle
* refac: use state machine on swap
* refac: improve state machine
* refactor: remove refetch balances on swap machine
* fix: add insufficient eth for gas fee as first validation
* chore: rename fetch pool info state
* refac: add safeBigInt method
* chore: udpate deps
* fix: adapt swap to new CoinBalance component
* fix: keep swap service between refreshs on dev
* fix: tests
* chore: some few small script changes
* fix: swap url params for coin selected
* fix: price impact calculation
* fix: tests
* chore: missing requested changes from review
* chore: add tx feedback on swa

.eslintignore

@@ -4,4 +4,5 @@
 dist
 CHANGELOG.md
 packages/app/src/types
-contracts
+contracts
+**/*.typegen.ts

.gitignore

@@ -77,4 +77,7 @@ contracts/token_contract/.rustc_info.json
 .vercel
 
 # Local actions to test CI using ACT
-act-actions
+act-actions
+
+# XState typegen
+*.typegen.ts

.prettierignore

@@ -11,4 +11,5 @@ yarn-lock.yaml
 .github
 packages/contracts
 .pnpm-store
-.env
+.env
+**/*.typegen.ts

package.json

@@ -38,7 +38,7 @@
     "lint": "run-s lint:check prettier:check",
     "prettier:check": "prettier --check .",
     "prettier:format": "prettier --write .",
-    "scripts:setup": "turbo run build --filter=swayswap-scripts && pnpm install",
+    "scripts:setup": "pnpm run --filter=swayswap-scripts build && pnpm install",
     "services:clean": "make -C docker services-clean",
     "services:setup": "run-s scripts:setup services:run contracts contracts:init-pool",
     "services:run": "make -C docker services-run",
@@ -48,9 +48,9 @@
     "services:run-test": "make -C docker services-run-test",
     "services:reset-test": "NODE_ENV=test run-s services:clean-test services:setup-test",
     "deps:update": "./scripts/update-deps.sh",
-    "test": "turbo run test -- --passWithNoTests --runInBand",
-    "test:coverage": "turbo run test -- --collectCoverage --passWithNoTests --runInBand",
-    "test:clear": "jest --clearCache",
+    "test": "pnpm run --filter=swayswap-app test",
+    "test:coverage": "pnpm run --filter=swayswap-app test --coverage",
+    "test:clear": "pnpm -r exec jest --clearCache",
     "test:e2e": "run-p --race dev cy:run"
   },
   "devDependencies": {

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

@@ -9,14 +9,14 @@ describe('End-to-end Test: 😁 Happy Path', () => {
     cy.contains('button', 'Give me ETH').click();
     cy.getByAriaLabel('Accept the use agreement').check();
     cy.contains('button', 'Get Swapping!').click();
-    cy.contains('Enter amount');
+    cy.contains('Select to token');
 
     // mint tokens
     cy.visit('/mint');
     cy.contains('button', 'Mint tokens').click();
     cy.contains('Token received successfully!');
     // wait to be redirected to swap page after minting
-    cy.contains('Enter amount');
+    cy.contains('Select to token');
 
     // go to pool page -> add liquidity page
     cy.contains('button', 'Pool').click();
@@ -44,7 +44,7 @@ describe('End-to-end Test: 😁 Happy Path', () => {
         if (hasPoolCreated) {
           // validate add liquidity
           cy.contains('Enter Ether amount');
-          cy.getByAriaLabel('Coin From Input').type('0.2');
+          cy.getByAriaLabel('Coin from input').type('0.2');
 
           // make sure preview output box shows up
           cy.getByAriaLabel('Preview Add Liquidity Output');
@@ -55,8 +55,8 @@ describe('End-to-end Test: 😁 Happy Path', () => {
         } else {
           // validate create pool
           cy.contains('Enter Ether amount');
-          cy.getByAriaLabel('Coin From Input').type('0.2');
-          cy.getByAriaLabel('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.getByAriaLabel('Preview Add Liquidity Output');
@@ -71,9 +71,13 @@ describe('End-to-end Test: 😁 Happy Path', () => {
 
         // validate swap
         cy.contains('button', 'Swap').click();
-        cy.contains('Enter amount');
-        cy.getByAriaLabel('Coin From Input').type('0.1');
+        cy.contains('Select to token');
+        cy.getByAriaLabel('Coin selector to').click();
+        cy.get('[role=menu').type('{enter}');
+        cy.getByAriaLabel('Coin from input').type('0.1');
+
         // make sure preview output box shows up
+        cy.contains('Swap');
         cy.getByAriaLabel('Preview Swap Output');
 
         // execute swap operation
@@ -84,9 +88,10 @@ describe('End-to-end Test: 😁 Happy Path', () => {
         cy.contains('button', 'Pool').click();
         cy.contains('button', 'Remove liquidity').click();
         cy.getByAriaLabel('Set Maximun Balance').click();
-        //
+
         // make sure preview output box shows up
         cy.getByAriaLabel('Preview Remove Liquidity Output');
+
         // make sure current positions box shows up
         cy.getByAriaLabel('Pool Current Position');
         cy.contains('button', 'Remove liquidity').click();

packages/app/package.json

@@ -6,13 +6,16 @@
   "scripts": {
     "build": "tsc && vite build && pnpm create404",
     "create404": "cp ./dist/index.html ./dist/404.html",
-    "dev": "vite",
+    "dev": "run-p vite xstate:typegen:watch",
     "gh-preview": "sh ./scripts/gh-pages-preview.sh",
     "contracts:init": "pnpm exec ts-node ./scripts/contracts-init",
     "postinstall": "sh ./scripts/postinstall.sh",
     "preview": "vite preview",
-    "test": "jest --verbose",
-    "test:watch": "jest --watch --detectOpenHandles"
+    "test": "jest --verbose --runInBand",
+    "test:watch": "jest --watch --runInBand --detectOpenHandles",
+    "vite": "vite",
+    "xstate:typegen": "xstate typegen 'src/**/*.ts?(x)'",
+    "xstate:typegen:watch": "xstate typegen 'src/**/*.ts?(x)' --watch"
   },
   "dependencies": {
     "@ethersproject/bignumber": "^5.6.2",
@@ -47,10 +50,11 @@
     "cross-fetch": "^3.1.5",
     "decimal.js": "^10.3.1",
     "ethers": "^5.6.9",
-    "framer-motion": "^6.3.12",
+    "framer-motion": "^6.3.15",
     "fuels": "0.0.0-master-b32f29b9",
     "graphql-request": "^4.3.0",
     "jotai": "^1.7.2",
+    "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-content-loader": "^6.2.0",
     "react-dom": "^18.2.0",
@@ -80,6 +84,7 @@
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-helmet": "^6.1.5",
     "@vitejs/plugin-react": "^1.3.2",
+    "@xstate/cli": "^0.2.1",
     "autoprefixer": "^10.4.7",
     "dotenv": "^16.0.1",
     "eslint": "^8.18.0",

packages/app/scripts/contracts-init/initializePool.ts

@@ -25,6 +25,7 @@ export async function initializePool(
     ...overrides,
     variableOutputs: 1,
   });
+
   const deadline = await wallet.provider.getBlockNumber();
 
   process.stdout.write('Depositing ETH\n');

packages/app/scripts/postinstall.sh

@@ -4,3 +4,5 @@ ENV_FILE=.env
 if [ ! -f "$FILE" ]; then
     cp .env.example $ENV_FILE
 fi
+
+pnpm xstate:typegen

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

@@ -1,4 +1,6 @@
-import { CoinInput, useCoinInput } from "./CoinInput";
+import { useCoinInput } from "../hooks/useCoinInput";
+
+import { CoinInput } from "./CoinInput";
 import { CoinSelector } from "./CoinSelector";
 
 import type { Coin } from "~/types";

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

@@ -1,45 +1,39 @@
 import { useMemo } from "react";
 
+import type { CoinBalanceProps } from "../hooks";
 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,
+  gasFee,
+  showBalance = true,
   showMaxButton = true,
   onSetMaxBalance,
-  gasFee,
 }: CoinBalanceProps) => {
   const { data: balances } = useBalances({ enabled: true });
 
   const balance = useMemo(() => {
-    const coinBalance = balances?.find(
-      (item) => item.assetId === coin?.assetId
-    );
+    const coinBalance = balances?.find((i) => i.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>
+      {showBalance && (
+        <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)` : ``
+          content={`Max = ${balance} (${coin?.symbol} balance)${
+            gasFee ? ` - ${parseToFormattedNumber(gasFee)} (network fee)` : ``
           }`}
         >
           <Button