feat: add build version and improve build actions (#588)

.github/actions/setup-node/action.yaml

@@ -2,10 +2,11 @@ name: "CI setup"
 inputs:
   node-version:
     description: "Node version"
-    default: 16.15
+    default: 18.14.1
   pnpm-version:
     description: "PNPM version"
     default: latest
+
 runs:
   using: "composite"
   steps:

.github/workflows/pr-tests.yml

@@ -36,6 +36,10 @@ jobs:
         uses: jwalton/gh-find-current-pr@v1
         id: findPr
 
+      - name: Build libs
+        run: |
+          pnpm build:libs
+
       - name: Run Jest Tests
         run: |
           pnpm test:ci --outputFile="${{ env.COVERAGE_FILE }}"
@@ -77,10 +81,9 @@ jobs:
           NODE_ENV: test
 
       - name: Build Application
-        run: pnpm build:app
+        run: pnpm build:test
         env:
           NODE_ENV: test
-          DOCS_DIST: ./dist
 
       # E2E tests running with Playwright
       - name: Install Playwright Browsers

.github/workflows/release-crx.yaml

@@ -0,0 +1,27 @@
+name: "Release"
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  release-crx:
+    name: Release Wallet package
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup-node
+
+      - name: Build Application
+        run: pnpm build:crx
+
+      - name: Upload Release Asset
+        id: upload-release-asset 
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        with:
+          upload_url: ${{ github.event.release.upload_url }}
+          asset_path: ./packages/app/dist/fuel-wallet.zip
+          asset_name: fuel-wallet.zip
+          asset_content_type: application/zip

.nvmrc

@@ -1 +1 @@
-16
+18.14.1

package.json

@@ -21,14 +21,15 @@
     "./packages/*"
   ],
   "scripts": {
-    "build:preview": "node ./scripts/build-website.mjs",
-    "build:all": "run-s build:libs build:docs build:app",
-    "build:libs": "turbo run build --filter=@fuel-wallet/*",
-    "build:docs": "run-s build:docs-build build:docs-export",
-    "build:docs-build": "turbo run build --filter=docs",
-    "build:docs-export": "turbo run export --filter=docs",
-    "build:app": "turbo run build --filter=app",
-    "build:app:test": "NODE_ENV=test run-s build:app",
+    "build:website": "node ./scripts/build-website.mjs",
+    "build:preview": "turbo run build:preview",
+    "build:all": "turbo run build:all",
+    "build:docs": "turbo run build:docs",
+    "build:web": "turbo run build:web",
+    "build:crx": "turbo run build:crx",
+    "build:app": "turbo run build:app",
+    "build:test": "NODE_ENV=test pnpm build:app",
+    "build:libs": "turbo run build",
     "changeset": "changeset",
     "changeset:empty": "changeset --empty",
     "changeset:release": "changeset publish --no-git-tag",
@@ -39,7 +40,6 @@
     "dev:docs": "NODE_ENV=development turbo run dev --filter=docs",
     "dev:crx": "turbo run dev:crx --parallel",
     "dev:deps": "./scripts/deps.sh",
-    "gh:preview": "node ./scripts/gh-pages-preview.mjs",
     "lint": "run-s lint:check prettier:check",
     "lint:check": "eslint . --ext .ts,.tsx,.js,.jsx",
     "lint:fix": "pnpm lint:check --fix",

packages/app/.env.production

@@ -0,0 +1,4 @@
+VITE_FUEL_PROVIDER_URL=https://node-beta-2.fuel.network/graphql
+VITE_FUEL_FAUCET_URL=https://faucet-beta-2.fuel.network/
+VITE_MNEMONIC_WORDS=12
+VITE_FAUCET_RECAPTCHA_KEY=6Ld3cEwfAAAAAMd4QTs7aO85LyKGdgj0bFsdBfre

packages/app/env.d.ts

@@ -1,6 +1,7 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
     VITE_APP_VERSION: string;
+    VITE_DATABASE_VERSION: string;
     readonly VITE_FUEL_PROVIDER_URL: string;
     readonly VITE_FUEL_FAUCET_URL: string;
     readonly VITE_MNEMONIC_WORDS: string;

packages/app/load.envs.js

@@ -1,5 +1,16 @@
 const { config } = require('dotenv');
 const { resolve } = require('path');
+const { readFileSync } = require('fs');
+
+function getVersion() {
+  const packageJson = JSON.parse(
+    readFileSync(resolve(__dirname, './package.json')).toString()
+  );
+  return {
+    version: packageJson.version,
+    database: packageJson.database,
+  };
+}
 
 function getEnvName() {
   if (process.env.NODE_ENV === 'production') {
@@ -31,4 +42,10 @@ function getPublicEnvs() {
 // make it accessible to the playwirght tests
 process.env.PORT = process.env.NODE_ENV === 'test' ? 3001 : 3000;
 
+// Export the version to be used on database
+// and application level
+const versions = getVersion();
+process.env.VITE_APP_VERSION = versions.version;
+process.env.VITE_DATABASE_VERSION = versions.database;
+
 module.exports.getPublicEnvs = getPublicEnvs;

packages/app/manifest.config.ts

@@ -1,9 +1,13 @@
 import { defineManifest } from '@crxjs/vite-plugin';
 
+import './load.envs.js';
+
 export default defineManifest({
   manifest_version: 3,
   name: 'Fuel Wallet',
-  version: '0.0.1',
+  version: process.env.VITE_APP_VERSION,
+  description:
+    'The official wallet of the fastest modular execution layer. Fuel Network.',
   icons: {
     '16': 'icons/fuel-logo-16.png',
     '19': 'icons/fuel-logo-19.png',
@@ -32,16 +36,5 @@ export default defineManifest({
     },
   ],
   host_permissions: ['<all_urls>'],
-  permissions: [
-    'alarms',
-    'tabs',
-    'activeTab',
-    'clipboardWrite',
-    'notifications',
-    'scripting',
-    'storage',
-    'unlimitedStorage',
-    'webRequest',
-    'contextMenus',
-  ],
+  permissions: ['alarms', 'tabs', 'clipboardWrite', 'scripting'],
 });

packages/app/package.json

@@ -1,10 +1,11 @@
 {
   "name": "app",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.1.0",
+  "database": "9",
   "scripts": {
-    "build": "run-p build:*",
-    "build:app": "./scripts/build.sh --app=vite",
+    "build:all": "run-p build:web build:crx build:storybook",
+    "build:web": "./scripts/build.sh --app=vite",
     "build:crx": "./scripts/build.sh --app=crx",
     "build:storybook": "./scripts/build.sh --app=storybook",
     "dev": "vite",

packages/app/scripts/build.sh

@@ -2,11 +2,11 @@ export NODE_ENV=${NODE_ENV:=production}
 export STORYBOOK_DIST=${STORYBOOK_DIST:=./dist/storybook}
 
 if [ "$1" = "--app=vite" ]; then
-  pnpm ts:check && pnpm vite build --mode $NODE_ENV
+  pnpm vite build --mode $NODE_ENV
 fi;
 if [ "$1" = "--app=crx" ]; then
-  pnpm ts:check && pnpm vite build --config vite.crx.config.ts --mode $NODE_ENV
+  pnpm vite build --config vite.crx.config.ts --mode $NODE_ENV
 fi;
 if [ "$1" = "--app=storybook" ]; then
-  pnpm ts:check && pnpm build-storybook -o $STORYBOOK_DIST
+  pnpm build-storybook -o $STORYBOOK_DIST
 fi;

packages/app/src/config.ts

@@ -6,10 +6,14 @@ export const {
   VITE_FAUCET_RECAPTCHA_KEY,
   VITE_FUEL_FAUCET_URL,
   VITE_ADDR_OWNER,
+  VITE_APP_VERSION,
+  VITE_DATABASE_VERSION,
   VITE_CRX,
   NODE_ENV,
 } = import.meta.env;
 
+export const APP_VERSION = VITE_APP_VERSION;
+export const DATABASE_VERSION = Number(VITE_DATABASE_VERSION);
 export const DECIMAL_UNITS = 9;
 export const FORMAT_LANGUAGE = 'en-US';
 export const MIN_FRACTION_DIGITS = 1;

packages/app/src/systems/CRX/background/index.ts

@@ -1,4 +1,3 @@
 import './actions/onInstall';
-import './actions/createMenu';
 import './actions/keepAwake';
 import './communication';

packages/app/src/systems/Core/utils/database.ts

@@ -9,6 +9,7 @@ import type { Table } from 'dexie';
 import Dexie from 'dexie';
 
 import 'dexie-observable';
+import { DATABASE_VERSION } from '~/config';
 import type { Transaction } from '~/systems/Transaction/types';
 
 export class FuelDB extends Dexie {
@@ -21,7 +22,7 @@ export class FuelDB extends Dexie {
 
   constructor() {
     super('FuelDB');
-    this.version(9).stores({
+    this.version(DATABASE_VERSION).stores({
       vaults: `key`,
       accounts: `&address, &name`,
       networks: `&id, &url, &name`,

packages/app/src/systems/Sidebar/components/Sidebar/Sidebar.tsx

@@ -1,13 +1,23 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { cssObj } from '@fuel-ui/css';
-import { Icon, Avatar, Flex, Drawer, IconButton, Stack } from '@fuel-ui/react';
+import {
+  Icon,
+  Avatar,
+  Flex,
+  Drawer,
+  IconButton,
+  Stack,
+  Box,
+  Text,
+} from '@fuel-ui/react';
 import { forwardRef } from 'react';
 
 import { Menu } from '..';
 import { useAccounts } from '../../../Account';
 import { NetworkScreen, useNetworks } from '../../../Network';
 import { sidebarItems } from '../../constants';
 
+import { APP_VERSION } from '~/config';
 import { useOverlay } from '~/systems/Overlay';
 
 function SidebarContent() {
@@ -46,6 +56,11 @@ function SidebarContent() {
         />
       </Flex>
       <Menu items={sidebarItems(selectedNetwork?.url)} />
+      <Box css={styles.version}>
+        <Text fontSize="xs" color="gray8">
+          Version: {APP_VERSION}{' '}
+        </Text>
+      </Box>
     </>
   );
 }
@@ -98,4 +113,8 @@ const styles = {
     top: '$2',
     right: '$2',
   }),
+  version: cssObj({
+    padding: '$3 $4',
+    textAlign: 'center',
+  }),
 };

packages/app/vite-utils/vite.base.config.ts

@@ -6,9 +6,6 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 
 import '../load.envs.js';
 
-import { getVersion } from './getVersion';
-
-process.env.VITE_APP_VERSION = getVersion();
 const linkDeps = process.env.LINK_DEPS?.trim().split(' ') || [];
 
 // https://vitejs.dev/config/

packages/docs/docs/contributing/running-locally.mdx

@@ -13,8 +13,8 @@ This is a guide that will show you how you can run this project locally if you w
 
 This project includes frontend. To begin, install dependencies:
 
-- [Node.js v16.15.0 or latest stable](https://nodejs.org/en/). We recommend using [nvm](https://github.com/nvm-sh/nvm) to install.
-- [PNPM v7.1.7 or latest stable](https://pnpm.io/installation/)
+- [Node.js 18.14.1 or latest stable](https://nodejs.org/en/). We recommend using [nvm](https://github.com/nvm-sh/nvm) to install.
+- [PNPM v7.18.2 or latest stable](https://pnpm.io/installation/)
 - [Docker v0.8.2 or latest stable](https://docs.docker.com/get-docker/)
 - [Docker Compose v2.6.0 or latest stable](https://docs.docker.com/get-docker/)
 

packages/docs/package.json

@@ -3,9 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
+    "build:preview": "run-s build:docs export:docs",
+    "build:docs": "next build",
     "dev": "next dev -p 3030",
-    "build": "next build",
-    "export": "DOCS_DIST=${DOCS_DIST:=dist} && next export -o $DOCS_DIST",
+    "export:docs": "DOCS_DIST=${DOCS_DIST:=dist} && next export -o $DOCS_DIST",
     "start": "next start",
     "lint": "next lint"
   },