feat(app): add tx approve screen (#145)

✨ Fix #46 Co-authored-by: Luiz Estacio <[email protected]>
FuelLabs · Oct 20, 2022 · 9d7fc1a · 9d7fc1a
1 parent e5b3788
commit 9d7fc1a
Show file tree

Hide file tree

Showing 73 changed files with 3,690 additions and 3,107 deletions.
diff --git a/.github/workflows/pr-crx.yml b/.github/workflows/pr-crx.yml
@@ -22,7 +22,6 @@ jobs:
 
       - name: Build Chrome Extension
         run: pnpm build:crx
-
 
       - name: Run Playwright tests
         run: xvfb-run --auto-servernum -- pnpm crx:test
@@ -32,4 +31,4 @@ jobs:
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
+          retention-days: 30
diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -42,13 +42,24 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/setup-node
 
+      - name: Setup Docker
+        uses: ./.github/actions/setup-docker
+        with:
+          password: ${{ secrets.GITHUB_TOKEN }}
+
       - uses: jwalton/gh-find-current-pr@v1
         id: findPr
 
+      - name: Start Node
+        run: pnpm node:dev start --test --debug
+
       - name: Run lint
         run: |
           pnpm ts:check
           pnpm lint
+      
+      - name: Run test
+        run: |
           pnpm test:ci --outputFile="${{ env.COVERAGE_FILE }}"
 
       - name: Run tests with coverage
@@ -64,6 +75,9 @@ jobs:
           coverage-file: ${{ env.COVERAGE_FILE }}
           base-coverage-file: ${{ env.COVERAGE_FILE }}
 
+      - name: Stop
+        run: pnpm node:dev stop --test --debug
+
   end-to-end-test:
     name: Test E2E
     runs-on: ubuntu-latest
@@ -84,4 +98,4 @@ jobs:
           record: false
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NODE_ENV: "test"
+          NODE_ENV: "test"
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "lint:check": "eslint . --ext .ts,.tsx,.js,.jsx",
     "lint:fix": "pnpm lint:check --fix",
     "node:dev": "fuelhat node",
-    "node:test": "fuelhat node --test",
+    "node:test": "fuelhat node start --test",
     "prettier:check": "prettier --check .",
     "prettier:format": "prettier --write .",
     "storybook": "pnpm -r --filter=app storybook",
@@ -50,38 +50,38 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@fuel-ui/config": "^0.7.0",
+    "@fuel-ui/config": "^0.8.0",
     "fuelhat": "workspace:*"
   },
   "devDependencies": {
-    "@playwright/test": "^1.26.1",
+    "@playwright/test": "^1.27.1",
     "@babel/core": "^7.19.3",
-    "@jest/types": "29.1.2",
-    "@types/jest": "^29.1.1",
-    "@types/node": "^18.8.2",
+    "@jest/types": "29.2.1",
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@xstate/cli": "^0.3.3",
-    "cypress": "^10.9.0",
+    "cypress": "^10.10.0",
     "cypress-vite": "^1.2.0",
     "dotenv": "^16.0.3",
-    "eslint": "^8.24.0",
+    "eslint": "^8.25.0",
     "eslint-plugin-cypress": "^2.12.1",
     "fs-extra": "^10.1.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "29.1.2",
-    "jest-environment-jsdom": "29.1.2",
+    "jest": "29.2.1",
+    "jest-environment-jsdom": "29.2.1",
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^13.0.3",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.26.1",
+    "playwright": "^1.27.1",
     "prettier": "^2.7.1",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "turbo": "^1.5.5",
+    "turbo": "^1.5.6",
     "typescript": "^4.8.4",
-    "updates": "^13.1.8"
+    "updates": "^13.1.9"
   },
   "pnpm": {
     "peerDependencyRules": {

diff --git a/packages/app/.env.example b/packages/app/.env.example
@@ -2,4 +2,5 @@ VITE_FUEL_PROVIDER_URL=http://localhost:4000/graphql
 VITE_FUEL_FAUCET_URL=http://localhost:4040/dispense
 VITE_MNEMONIC_WORDS=12
 VITE_FAUCET_RECAPTCHA_KEY=
-VITE_STORYBOOK_URL=/storybook
+VITE_STORYBOOK_URL=/storybook
+VITE_ADDR_OWNER=
diff --git a/packages/app/.env.test b/packages/app/.env.test
@@ -2,3 +2,4 @@ VITE_FUEL_PROVIDER_URL=http://localhost:4001/graphql
 VITE_FUEL_FAUCET_URL=http://localhost:4041/
 VITE_MNEMONIC_WORDS=12
 VITE_FAUCET_RECAPTCHA_KEY=
+VITE_ADDR_OWNER='0xa449b1ffee0e2205fa924c6740cc48b3b473aa28587df6dab12abc245d1f5298'
diff --git a/packages/app/.storybook/main.js b/packages/app/.storybook/main.js
@@ -1,8 +1,8 @@
 const { join } = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const { getPublicEnvs } = require('../load.envs');
+const importMetaEnv = require('@import-meta-env/unplugin');
 const webpack = require('webpack');
-const path = require('path');
 
 const config = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -12,14 +12,22 @@ const config = {
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-storysource',
-    '@storybook/addon-jest',
     'storybook-dark-mode',
     'storybook-addon-react-router-v6',
   ],
   staticDirs: ['../public'],
   framework: '@storybook/react',
   core: {
-    builder: '@storybook/builder-webpack5',
+    builder: {
+      name: 'webpack5',
+      options: {
+        lazyCompilation: true,
+        fsCache: true,
+      },
+    },
+  },
+  features: {
+    storyStoreV7: true,
   },
   env: (config) => ({ ...config, ...getPublicEnvs() }),
   webpackFinal: async (config) => {
@@ -35,10 +43,11 @@ const config = {
     };
     config.resolve.plugins = [new TsconfigPathsPlugin()];
     config.plugins.push(
-      require('@import-meta-env/unplugin').webpack({
-        env: '.env',
-        example: '.env.example',
-      }),
+      new webpack.DefinePlugin({
+        'import.meta.env': JSON.stringify(getPublicEnvs()),
+      })
+    );
+    config.plugins.push(
       new webpack.ProvidePlugin({
         Buffer: [require.resolve('buffer/'), 'Buffer'],
       })

diff --git a/packages/app/.storybook/preview.jsx b/packages/app/.storybook/preview.jsx
@@ -1,8 +1,8 @@
 import { ThemeProvider } from '@fuel-ui/react';
-import { addDecorator } from '@storybook/react';
 import { themes } from '@storybook/theming';
-import { initializeWorker, mswDecorator } from 'msw-storybook-addon';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { withRouter } from 'storybook-addon-react-router-v6';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import theme from './theme';
 
@@ -18,9 +18,9 @@ export const parameters = {
   },
   options: {
     storySort: (a, b) => {
-      return a[1].kind === b[1].kind
+      return a[1]?.kind === b[1]?.kind
         ? 0
-        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
+        : a[1]?.id.localeCompare(b[1]?.id, undefined, { numeric: true });
     },
   },
   darkMode: {
@@ -34,9 +34,23 @@ export const parameters = {
       ...theme,
     },
   },
+  viewport: {
+    viewports: {
+      ...INITIAL_VIEWPORTS,
+      chromeExtension: {
+        name: 'Chrome Extension',
+        styles: {
+          height: '600px',
+          width: '350px',
+        },
+        type: 'mobile',
+      },
+    },
+  },
 };
 
 export const decorators = [
+  mswDecorator,
   withRouter,
   (Story) => (
     <ThemeProvider>
@@ -45,5 +59,4 @@ export const decorators = [
   ),
 ];
 
-initializeWorker();
-addDecorator(mswDecorator);
+initialize();
diff --git a/packages/app/cypress/e2e/CreateWallet.cy.ts b/packages/app/cypress/e2e/CreateWallet.cy.ts
@@ -5,6 +5,8 @@ describe('CreateWallet', () => {
   });
 
   it('should be able to create wallet and see first account created', () => {
+    cy.clearIndexedDb('FuelDB');
+
     cy.visit('/wallet');
     cy.contains('button', /Create a wallet/i).click();
 
@@ -26,9 +28,8 @@ describe('CreateWallet', () => {
     cy.contains('button', /Next/i).click();
 
     /** Account created */
-    cy.contains(/Wallet created succesfully/i);
+    cy.contains(/Wallet created successfully/i);
     cy.contains(/Account 1/i);
-
     /**
      * Checking private and public routes
      * Need reload() in order to see if will redirect to the right place

diff --git a/packages/app/cypress/e2e/Home.cy.ts b/packages/app/cypress/e2e/Home.cy.ts
@@ -23,9 +23,9 @@ describe('Home', () => {
 
   it('should open the side bar and close it', () => {
     cy.visit('/wallet');
-    cy.get('[aria-label="drawer_trigger"]').eq(1).click();
+    cy.getByAriaLabel('Menu').click();
     cy.contains('Wallet');
     cy.contains('Support');
-    cy.get('[aria-label="drawer_closeButton"]').eq(1).click();
+    cy.getByAriaLabel('drawer_closeButton').click();
   });
 });
diff --git a/packages/app/cypress/e2e/RecoverWallet.cy.ts b/packages/app/cypress/e2e/RecoverWallet.cy.ts
@@ -35,7 +35,7 @@ describe('RecoverWallet', () => {
     cy.contains('button', /Next/i).click();
 
     /** Account created */
-    cy.contains(/Wallet created succesfully/i);
+    cy.contains(/Wallet created successfully/i);
     cy.contains(/Account 1/i);
     cy.contains('fuel1r...xqqj');
   });

diff --git a/packages/app/cypress/utils/test-utils.ts b/packages/app/cypress/utils/test-utils.ts
@@ -13,7 +13,9 @@ export const mockAccount = (account?: Account) => {
   localStorage.setItem(IS_LOGGED_KEY, 'true');
   cy.openIndexedDb('FuelDB', 17).as('db');
 
-  const wallet = Wallet.generate();
+  const wallet = Wallet.generate({
+    provider: VITE_FUEL_PROVIDER_URL,
+  });
   const accountData = account || {
     address: wallet.address.toAddress(),
     name: 'Random Account',

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -25,22 +25,22 @@
     "@fuel-ts/providers": "^0.17.0",
     "@fuel-ts/wallet": "^0.17.0",
     "@fuel-ts/wallet-manager": "^0.17.0",
-    "@fuel-ui/config": "^0.7.0",
-    "@fuel-ui/css": "^0.7.0",
-    "@fuel-ui/react": "^0.7.0",
-    "@fuel-ui/test-utils": "^0.7.0",
+    "@fuel-ui/config": "^0.8.0",
+    "@fuel-ui/css": "^0.8.0",
+    "@fuel-ui/react": "^0.8.0",
+    "@fuel-ui/test-utils": "^0.8.0",
     "@fuels-wallet/xstore": "workspace:*",
-    "@hookform/resolvers": "^2.9.8",
+    "@hookform/resolvers": "^2.9.9",
     "@react-aria/utils": "^3.14.0",
     "@xstate/react": "^3.0.1",
     "buffer": "^6.0.3",
     "cross-fetch": "^3.1.5",
-    "decimal.js": "^10.4.1",
+    "decimal.js": "^10.4.2",
     "dexie": "^3.2.2",
     "dexie-react-hooks": "^1.1.1",
     "events": "^3.3.0",
     "fake-indexeddb": "^4.0.0",
-    "framer-motion": "^7.5.2",
+    "framer-motion": "^7.6.1",
     "fuels": "^0.17.0",
     "process": "^0.11.10",
     "query-string": "^7.1.1",
@@ -49,17 +49,17 @@
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^2.1.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.36.1",
-    "react-router-dom": "^6.4.1",
-    "util": "^0.12.4",
+    "react-hook-form": "^7.38.0",
+    "react-router-dom": "^6.4.2",
+    "util": "^0.12.5",
     "xstate": "^4.33.6",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@crxjs/vite-plugin": "^1.0.14",
-    "@import-meta-env/unplugin": "^0.1.8",
-    "@playwright/test": "^1.26.1",
+    "@import-meta-env/unplugin": "^0.2.1",
+    "@playwright/test": "^1.27.1",
     "@storybook/addon-a11y": "^6.5.12",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
@@ -77,21 +77,22 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.12",
     "@this-dot/cypress-indexeddb": "^1.1.3",
-    "@types/chrome": "^0.0.197",
+    "@types/chrome": "^0.0.198",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-helmet": "^6.1.5",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react": "^2.1.0",
+    "cypress-log-to-output": "^1.1.2",
     "msw": "^0.47.4",
     "msw-storybook-addon": "^1.6.3",
     "storybook-addon-react-router-v6": "^0.2.1",
     "storybook-dark-mode": "^1.1.2",
     "ts-jest-mock-import-meta": "^0.12.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.8.4",
-    "vite": "^3.1.4",
+    "vite": "^3.1.8",
     "vite-plugin-zip-pack": "^1.0.4",
     "vite-tsconfig-paths": "^3.5.1",
     "webpack": "^5.74.0"

diff --git a/packages/app/src/config.ts b/packages/app/src/config.ts
@@ -4,6 +4,7 @@ export const {
   VITE_FUEL_PROVIDER_URL,
   VITE_FAUCET_RECAPTCHA_KEY,
   VITE_FUEL_FAUCET_URL,
+  VITE_ADDR_OWNER,
   VITE_CRX,
   NODE_ENV,
 } = import.meta.env;

diff --git a/packages/app/src/routes.tsx b/packages/app/src/routes.tsx
@@ -23,7 +23,13 @@ export const webAppRoutes = (
     <Route>
       {landingPageRoutes}
       <Route element={<PublicRoute />}>{signUpRoutes}</Route>
-      <Route element={<PrivateRoute />}>{walletRoutes}</Route>
+      <Route element={<PrivateRoute />}>
+        <Route
+          path={Pages.signUpWalletCreated()}
+          element={<WalletCreatedPage />}
+        />
+        {walletRoutes}
+      </Route>
       <Route path="*" element={<Navigate to={Pages.wallet()} />} />
     </Route>
   </Routes>