fix: signup flow adjustments (#96)

* chore: update deps * fix(app): prevent create password to submit before agreed * fix(app): buffer polyfill * fix(app): process.env variables * fix(app): use import meta inside storybook and jest * fix(app): add a temporary spinner in public/private route * fix(app): update accounts after sign up * fix: github action
FuelLabs · Sep 9, 2022 · 28d1d63 · 28d1d63
1 parent 353b4d0
commit 28d1d63
Show file tree

Hide file tree

Showing 22 changed files with 1,965 additions and 2,168 deletions.
diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -8,6 +8,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+env:
+  COVERAGE_FILE: ./coverage/report.json
+
 jobs:
   validate-title:
     name: Validate PR Title
@@ -26,37 +29,40 @@ jobs:
       - run: pnpm audit --prod
 
   lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup-node
-      - run: |
-          pnpm ts:check
-          pnpm lint
-
-  test:
-    name: Test with coverage
+    name: Lint & Test
     runs-on: ubuntu-latest
     permissions:
       checks: write
       pull-requests: write
       contents: write
     steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup-node
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
       - uses: jwalton/gh-find-current-pr@v1
         id: findPr
 
+      - name: Run lint
+        run: |
+          pnpm ts:check
+          pnpm lint
+          pnpm test:ci --outputFile="${{ env.COVERAGE_FILE }}"
+
       - name: Run tests with coverage
-        uses: ArtiomTr/jest-coverage-report-action@v2
+        uses: artiomtr/jest-coverage-report-action@v2.0.5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           package-manager: pnpm
           annotations: failed-tests
           test-script: pnpm test:ci
-          working-directory: ./packages/app
           prnumber: ${{ steps.findPr.outputs.number }}
+          skip-test: all
+          working-directory: ./packages/app
+          coverage-file: ${{ env.COVERAGE_FILE }}
+          base-coverage-file: ${{ env.COVERAGE_FILE }}
 
   end-to-end-test:
     name: Test E2E

diff --git a/package.json b/package.json
@@ -37,40 +37,41 @@
     "prettier:format": "prettier --write .",
     "storybook": "pnpm -r --filter=app storybook",
     "test": "pnpm run --filter=app test",
+    "test:ci": "pnpm test -- --ci --testLocationInResults --json --coverage",
     "test:clear": "pnpm -r exec jest --clearCache",
     "test:coverage": "pnpm run --filter=app test --coverage",
     "test:e2e": "run-p --race dev cy:run",
     "ts:check": "pnpm -r --filter=app ts:check",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@fuel-ui/config": "^0.6.0",
+    "@fuel-ui/config": "^0.7.0",
     "fuelhat": "workspace:*"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@jest/types": "28.1.3",
+    "@babel/core": "^7.19.0",
+    "@jest/types": "29.0.2",
     "@types/jest": "^29.0.0",
-    "@types/node": "^18.7.14",
+    "@types/node": "^18.7.16",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "cypress": "^10.7.0",
     "dotenv": "^16.0.2",
     "eslint": "^8.23.0",
     "eslint-plugin-cypress": "^2.12.1",
     "fs-extra": "^10.1.0",
-    "husky": "^8.0.0",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "28.1.3",
-    "jest-environment-jsdom": "28.1.3",
+    "jest": "29.0.2",
+    "jest-environment-jsdom": "29.0.2",
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^13.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",
-    "turbo": "^1.4.3",
-    "typescript": "^4.8.2",
+    "turbo": "^1.4.6",
+    "typescript": "^4.8.3",
     "updates": "^13.1.5"
   },
   "pnpm": {

diff --git a/packages/app/.storybook/main.js b/packages/app/.storybook/main.js
@@ -30,6 +30,10 @@ const config = {
     };
     config.resolve.plugins = [new TsconfigPathsPlugin()];
     config.plugins.push(
+      require('@import-meta-env/unplugin').webpack({
+        env: '.env',
+        example: '.env.example',
+      }),
       new webpack.ProvidePlugin({
         Buffer: [require.resolve('buffer/'), 'Buffer'],
       })

diff --git a/packages/app/index.html b/packages/app/index.html
@@ -5,6 +5,18 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <script>
+      window.global = window;
+    </script>
+    <script type="module">
+      import process from "process";
+      import { Buffer } from "buffer";
+      import EventEmitter from "events";
+
+      window.Buffer = Buffer;
+      window.process = process;
+      window.EventEmitter = EventEmitter;
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/app/jest.config.ts b/packages/app/jest.config.ts
@@ -1,18 +1,34 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable import/order */
 import type { Config } from '@jest/types';
-// @ts-ignore
 import baseConfig from '@fuel-ui/test-utils/config';
 
-import './load.envs.js';
+import { getPublicEnvs } from './load.envs';
 import pkg from './package.json';
 
 const config: Config.InitialOptions = {
   ...baseConfig,
+  globals: {
+    ...baseConfig.globals,
+    'ts-jest': {
+      useESM: true,
+      diagnostics: {
+        ignoreCodes: [1343],
+      },
+      astTransformers: {
+        before: [
+          {
+            path: './node_modules/ts-jest-mock-import-meta',
+            options: { metaObjectReplacement: { env: getPublicEnvs() } },
+          },
+        ],
+      },
+    },
+  },
   rootDir: __dirname,
   displayName: pkg.name,
   setupFilesAfterEnv: [require.resolve('@fuel-ui/test-utils/setup')],
   setupFiles: ['./load.envs.js', 'fake-indexeddb/auto'],
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
   moduleNameMapper: {
     ...baseConfig.moduleNameMapper,
     '^dexie$': require.resolve('dexie'),

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -19,29 +19,33 @@
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@fontsource/source-code-pro": "^4.5.12",
-    "@fuel-ts/mnemonic": "^0.12.0",
-    "@fuel-ts/wallet-manager": "^0.12.0",
-    "@fuel-ui/css": "^0.6.0",
-    "@fuel-ui/react": "^0.6.0",
-    "@fuel-ui/test-utils": "^0.6.0",
+    "@fuel-ts/mnemonic": "^0.14.0",
+    "@fuel-ts/wallet-manager": "^0.14.0",
+    "@fuel-ui/css": "^0.7.0",
+    "@fuel-ui/react": "^0.7.0",
+    "@fuel-ui/test-utils": "^0.7.0",
     "@hookform/resolvers": "^2.9.7",
     "@xstate/react": "^3.0.1",
     "buffer": "^6.0.3",
     "dexie": "^3.2.2",
     "dexie-react-hooks": "^1.1.1",
+    "events": "^3.3.0",
     "fake-indexeddb": "^4.0.0",
-    "fuels": "^0.12.0",
+    "fuels": "^0.14.0",
+    "process": "^0.11.10",
     "react": "^18.2.0",
     "react-content-loader": "^6.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.34.2",
     "react-router-dom": "^6.3.0",
-    "xstate": "^4.33.4",
+    "util": "^0.12.4",
+    "xstate": "^4.33.5",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
+    "@babel/core": "^7.19.0",
+    "@import-meta-env/unplugin": "^0.1.8",
     "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
@@ -62,12 +66,13 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@vitejs/plugin-react": "^2.0.1",
-    "@xstate/cli": "^0.3.2",
+    "@vitejs/plugin-react": "^2.1.0",
+    "@xstate/cli": "^0.3.3",
     "storybook-dark-mode": "^1.1.0",
+    "ts-jest-mock-import-meta": "^0.12.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.8.2",
-    "vite": "^3.0.9",
+    "typescript": "^4.8.3",
+    "vite": "^3.1.0",
     "vite-tsconfig-paths": "^3.5.0",
     "webpack": "^5.74.0"
   },

diff --git a/packages/app/src/config.ts b/packages/app/src/config.ts
@@ -1,4 +1,4 @@
-export const FUEL_PROVIDER_URL = process.env.VITE_FUEL_PROVIDER_URL!;
+export const { FUEL_PROVIDER_URL } = import.meta.env;
 
 export const DECIMAL_UNITS = 9;
 export const FORMAT_LANGUAGE = 'es';

diff --git a/packages/app/src/main.tsx b/packages/app/src/main.tsx
@@ -4,9 +4,8 @@ import { BrowserRouter } from "react-router-dom";
 
 import { App } from "./App";
 
-const { PUBLIC_URL } = process.env;
 createRoot(document.getElementById("root")!).render(
-  <BrowserRouter basename={PUBLIC_URL}>
+  <BrowserRouter basename={import.meta.env.PUBLIC_URL}>
     <App />
   </BrowserRouter>
 );
diff --git a/packages/app/src/systems/Account/machines/accountsMachine.test.ts b/packages/app/src/systems/Account/machines/accountsMachine.test.ts
@@ -13,12 +13,11 @@ describe('accountsMachine', () => {
           fetchAccounts: async () => {
             return [{ name: 'Account1', address: '0x00' }];
           },
+          listenAccountsUpdating: () => () => () => null,
         },
       });
 
     const service = interpret(machine).onTransition((state) => {
-      // this is where you expect the state to eventually
-      // be reached
       if (state.matches('done')) {
         const accounts = state.context?.accounts;
         expect(accounts?.length).toBe(1);

diff --git a/packages/app/src/systems/Account/machines/accountsMachine.tsx b/packages/app/src/systems/Account/machines/accountsMachine.tsx
@@ -1,3 +1,4 @@
+import { liveQuery } from "dexie";
 import type { StateFrom } from "xstate";
 import { assign, createMachine } from "xstate";
 
@@ -17,6 +18,8 @@ type MachineServices = {
   };
 };
 
+type MachineEvents = { type: "SET_ACCOUNTS"; data: Account[] };
+
 export const accountsMachine = createMachine(
   {
     // eslint-disable-next-line @typescript-eslint/consistent-type-imports
@@ -27,6 +30,7 @@ export const accountsMachine = createMachine(
     schema: {
       context: {} as MachineContext,
       services: {} as MachineServices,
+      events: {} as MachineEvents,
     },
     states: {
       fetching: {
@@ -46,7 +50,14 @@ export const accountsMachine = createMachine(
         type: "final",
       },
       done: {
-        type: "final",
+        invoke: {
+          src: "listenAccountsUpdating",
+        },
+        on: {
+          SET_ACCOUNTS: {
+            actions: "assignAccounts",
+          },
+        },
       },
     },
   },
@@ -59,6 +70,13 @@ export const accountsMachine = createMachine(
       async fetchAccounts() {
         return db.getAccounts();
       },
+      listenAccountsUpdating: () => (send) => {
+        const obs$ = liveQuery(() => db.getAccounts());
+        const subscription = obs$.subscribe({
+          next: (val) => send({ type: "SET_ACCOUNTS", data: val }),
+        });
+        return subscription.unsubscribe;
+      },
     },
   }
 );

diff --git a/packages/app/src/systems/Core/components/ControlledField/ControlledField.tsx b/packages/app/src/systems/Core/components/ControlledField/ControlledField.tsx
@@ -26,6 +26,7 @@ export type ControlledFieldProps = Omit<ControllerProps<any>, "render"> & {
   isDisabled?: boolean;
   isReadOnly?: boolean;
   render: (props: RenderProps) => ReactElement;
+  hideError?: boolean;
 };
 
 export function ControlledField({
@@ -39,6 +40,7 @@ export function ControlledField({
   isInvalid,
   isDisabled,
   isReadOnly,
+  hideError,
 }: ControlledFieldProps) {
   const id = useId();
   return (
@@ -62,7 +64,7 @@ export function ControlledField({
             {label && labelSide === "right" && (
               <Form.Label htmlFor={id}>{label}</Form.Label>
             )}
-            {props.fieldState.error && (
+            {!hideError && props.fieldState.error && (
               <Form.ErrorMessage aria-label="Error message">
                 {props.fieldState.error.message}
               </Form.ErrorMessage>

diff --git a/packages/app/src/systems/Core/components/Mnemonic/Mnemonic.tsx b/packages/app/src/systems/Core/components/Mnemonic/Mnemonic.tsx
@@ -4,9 +4,8 @@ import React, { useEffect, useState } from "react";
 
 import { MnemonicInput } from "./MnemonicInput";
 
-const { VITE_MNEMONIC_WORDS } = process.env;
-const WORDS = VITE_MNEMONIC_WORDS as number;
-const BLANK_ARR = Array.from({ length: WORDS as number }).map(() => "");
+const WORDS = import.meta.env.VITE_MNEMONIC_WORDS;
+const BLANK_ARR = Array.from({ length: WORDS }).map(() => "");
 
 function fillArray(arr: string[], item: string[]) {
   return arr.map((_, idx) => item[idx] || "");

diff --git a/packages/app/src/systems/Core/components/PrivateRoute/PrivateRoute.tsx b/packages/app/src/systems/Core/components/PrivateRoute/PrivateRoute.tsx
@@ -1,3 +1,4 @@
+import { BoxCentered, Spinner } from "@fuel-ui/react";
 import type { ReactNode } from "react";
 import { Navigate } from "react-router-dom";
 
@@ -9,6 +10,13 @@ type PrivateRouteProps = {
 
 export function PrivateRoute({ children }: PrivateRouteProps) {
   const { accounts, isLoading } = useAccounts();
+  if (isLoading) {
+    return (
+      <BoxCentered minWS minHS>
+        <Spinner />
+      </BoxCentered>
+    );
+  }
   if (!isLoading && !accounts?.length) {
     return <Navigate to="/sign-up" replace />;
   }