refactor: swap with state machines

.eslintignore

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

.github/workflows/pr.yaml

@@ -108,7 +108,7 @@ jobs:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      
+
       # Make github action to use the latest version of
       # docker compose without it docker compose down
       # has issues with memory nil pointer
@@ -125,7 +125,11 @@ jobs:
       - name: Setup scripts
         run: |
           pnpm scripts:setup
-
+
+      - name: Run test
+        run: |
+          pnpm ci:test:coverage
+
       # using same dependencies from cypress/browsers:node16.5.0-chrome97-ff96 ...
       # not using directly the container because we still need ubuntu-latest preset
       - name: Install Cypress Dependencies
@@ -174,7 +178,3 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           DEBUG: "cypress:server:*"
           NODE_ENV: "test"
-
-      - name: Run test
-        run: |
-          pnpm ci:test:coverage

.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies=false

.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",
@@ -47,9 +47,10 @@
     "services:setup-test": "NODE_ENV=test run-s scripts:setup create:test-env services:run-test contracts contracts:init",
     "services:run-test": "make -C docker services-run-test",
     "services:reset-test": "NODE_ENV=test run-s services:clean-test services:setup-test",
-    "test": "turbo run test -- --passWithNoTests --runInBand",
-    "test:coverage": "turbo run test -- --collectCoverage --passWithNoTests --runInBand",
-    "test:clear": "jest --clearCache",
+    "update-deps": "./scripts/update-deps.sh",
+    "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": {
@@ -79,6 +80,7 @@
     "ts-node": "^10.8.1",
     "tsup": "^6.1.0",
     "turbo": "^1.2.16",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.3",
+    "updates": "^13.1.0"
   }
 }

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

@@ -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');
@@ -72,7 +72,10 @@ 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.getByAriaLabel('Coin from input').type('0.1');
+        cy.getByAriaLabel('Coin selector to').click();
+        cy.get('[role=menu').type('{enter}');
+
         // make sure preview output box shows up
         cy.getByAriaLabel('Preview Swap Output');
 
@@ -84,9 +87,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",
@@ -24,21 +27,21 @@
     "@radix-ui/react-accordion": "^0.1.6",
     "@radix-ui/react-alert-dialog": "^0.1.7",
     "@radix-ui/react-tooltip": "^0.1.7",
-    "@react-aria/button": "^3.5.0",
-    "@react-aria/dialog": "^3.2.0",
-    "@react-aria/focus": "^3.6.0",
-    "@react-aria/interactions": "^3.9.0",
-    "@react-aria/link": "^3.3.0",
-    "@react-aria/menu": "^3.5.0",
-    "@react-aria/overlays": "^3.9.0",
-    "@react-aria/textfield": "^3.6.0",
-    "@react-aria/tooltip": "^3.2.0",
-    "@react-aria/utils": "^3.13.0",
-    "@react-stately/collections": "^3.4.0",
-    "@react-stately/overlays": "^3.3.0",
-    "@react-stately/tooltip": "^3.1.0",
-    "@react-stately/tree": "^3.3.0",
-    "@react-types/overlays": "^3.6.0",
+    "@react-aria/button": "^3.5.1",
+    "@react-aria/dialog": "^3.2.1",
+    "@react-aria/focus": "^3.6.1",
+    "@react-aria/interactions": "^3.9.1",
+    "@react-aria/link": "^3.3.1",
+    "@react-aria/menu": "^3.5.1",
+    "@react-aria/overlays": "^3.9.1",
+    "@react-aria/textfield": "^3.6.1",
+    "@react-aria/tooltip": "^3.2.1",
+    "@react-aria/utils": "^3.13.1",
+    "@react-stately/collections": "^3.4.1",
+    "@react-stately/overlays": "^3.3.1",
+    "@react-stately/tooltip": "^3.1.1",
+    "@react-stately/tree": "^3.3.1",
+    "@react-types/overlays": "^3.6.1",
     "@tailwindcss/typography": "^0.5.2",
     "@xstate/react": "^3.0.0",
     "bignumber.js": "^9.0.2",
@@ -47,13 +50,14 @@
     "cross-fetch": "^3.1.5",
     "decimal.js": "^10.3.1",
     "ethers": "^5.6.8",
-    "framer-motion": "^6.3.10",
+    "framer-motion": "^6.3.11",
     "fuels": "0.0.0-master-3caba861",
     "graphql-request": "^4.3.0",
-    "jotai": "^1.7.1",
-    "react": "^18.1.0",
+    "jotai": "^1.7.2",
+    "mitt": "^3.0.0",
+    "react": "^18.2.0",
     "react-content-loader": "^6.2.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-google-recaptcha": "^2.1.0",
     "react-hot-toast": "^2.2.0",
@@ -68,28 +72,29 @@
     "xstate": "^4.32.1"
   },
   "devDependencies": {
-    "@jest/globals": "^28.1.0",
-    "@react-types/button": "^3.5.0",
-    "@react-types/dialog": "^3.4.0",
-    "@react-types/link": "^3.3.0",
-    "@react-types/shared": "^3.13.0",
-    "@react-types/tooltip": "^3.2.0",
-    "@types/node": "^17.0.41",
-    "@types/react": "^18.0.12",
+    "@jest/globals": "^28.1.1",
+    "@react-types/button": "^3.5.1",
+    "@react-types/dialog": "^3.4.1",
+    "@react-types/link": "^3.3.1",
+    "@react-types/shared": "^3.13.1",
+    "@react-types/tooltip": "^3.2.1",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@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.17.0",
+    "eslint": "^8.18.0",
     "eslint-plugin-cypress": "^2.12.1",
     "http-server": "^14.1.1",
     "postcss": "^8.4.14",
     "postcss-import": "^14.1.0",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.3",
     "ts-node": "^10.8.1",
-    "typescript": "^4.7.3",
-    "vite": "^2.9.10"
+    "typescript": "^4.7.4",
+    "vite": "^2.9.12"
   }
 }

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

@@ -23,7 +23,7 @@ export async function initializePool(
   await tokenContract.submit.mint_coins(tokenAmount, overrides);
   await tokenContract.submit.transfer_token_to_output(tokenAmount, tokenId, address, {
     ...overrides,
-    variableOutputs: 1,
+    variableOutputs: 2,
   });
   const deadline = await wallet.provider.getBlockNumber();
 

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