feat: add dark/light switch (#827)

Co-authored-by: Luiz Estácio <[email protected]>

.changeset/seven-spiders-cheer.md

@@ -0,0 +1,7 @@
+---
+'@fuel-wallet/types': patch
+'fuels-wallet': patch
+'@fuel-wallet/sdk': patch
+---
+
+Add light and dark theme support

.npmrc

@@ -1 +1,2 @@
+node-version=18.14.1
 strict-peer-dependencies=false

package.json

@@ -6,7 +6,7 @@
   "author": "Fuel Labs <[email protected]> (https://fuel.network/)",
   "engines": {
     "node": ">=18.14.1",
-    "pnpm": ">=7"
+    "pnpm": ">=8"
   },
   "homepage": "https://github.com/FuelLabs/fuels-wallet",
   "repository": {
@@ -49,7 +49,7 @@
     "node:down:test": "make -C ./docker down-test",
     "node:clean": "make -C ./docker clean",
     "node:clean:test": "make -C ./docker clean-test",
-    "nodes:up": "run-s node:up node:test:up",
+    "nodes:up": "run-s node:up node:up:test",
     "nodes:down": "run-s node:down node:down:test",
     "nodes:clean": "run-s node:clean node:clean:test",
     "nodes:reset": "run-s nodes:clean nodes:up",
@@ -69,39 +69,40 @@
   },
   "dependencies": {
     "@fuel-ui/config": "0.17.0",
-    "@fuel-ui/css": "0.17.0",
-    "@fuel-ui/react": "0.17.0",
+    "@fuel-ui/css": "0.19.1",
+    "@fuel-ui/react": "0.19.1",
     "@fuel-ui/test-utils": "0.17.0",
     "execa": "^7.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.22.10",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@jest/types": "29.6.1",
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.37.1",
+    "@swc/core": "1.3.75",
     "@types/jest": "^29.5.3",
-    "@types/node": "20.4.5",
-    "@types/react": "^18.2.17",
+    "@types/node": "20.4.9",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@xstate/cli": "^0.5.2",
     "dotenv": "^16.3.1",
-    "eslint": "^8.46.0",
+    "eslint": "^8.47.0",
     "fs-extra": "^11.1.1",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.6.2",
     "jest-environment-jsdom": "29.6.2",
     "jest-transform-stub": "^2.0.0",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^13.3.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
+    "prettier": "2.8.8",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "turbo": "^1.10.12",
     "typescript": "^5.1.6",
-    "updates": "^14.3.4"
+    "updates": "^14.3.5"
   },
   "pnpm": {
     "peerDependencyRules": {

packages/app/.storybook/main.ts

@@ -29,6 +29,11 @@ const config: StorybookConfig = {
       ...resolveLinkDeps(),
       base: join(process.env.STORYBOOK_BASE_URL || config.base || ''),
       plugins: [tsconfigpath()],
+      resolve: {
+        alias: {
+          '/icons/sprite.svg': '/public/icons/sprite.svg',
+        },
+      },
     });
   },
 };

packages/app/.storybook/preview.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
-import { darkColors } from '@fuel-ui/css';
-import {
-  createTheme,
-  darkTheme,
-  lightTheme,
-  ThemeProvider,
-} from '@fuel-ui/react';
+import { darkTheme, lightTheme } from '@fuel-ui/react';
 import { themes } from '@storybook/theming';
 import { mswDecorator, initialize } from 'msw-storybook-addon';
 import { withRouter } from 'storybook-addon-react-router-v6';
+import { Providers } from '../src/systems/Core/components';
 
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { StoreProvider } from '../src/systems/Store';
 import { WALLET_WIDTH, WALLET_HEIGHT } from '../src/config';
 
 import theme from './theme';
@@ -61,24 +55,13 @@ export const parameters = {
   },
 };
 
-export const fuelTheme = createTheme('fuels-wallet', {
-  tokens: {
-    colors: {
-      ...darkColors,
-      body: '#090909',
-    },
-  },
-});
-
 export const decorators = [
   mswDecorator,
   withRouter,
   (Story: any) => (
-    <StoreProvider>
-      <ThemeProvider themes={{ fuel: fuelTheme }}>
-        <Story />
-      </ThemeProvider>
-    </StoreProvider>
+    <Providers>
+      <Story />
+    </Providers>
   ),
 ];
 

packages/app/jest.config.ts

@@ -32,7 +32,7 @@ const config: JestConfigWithTsJest = {
     ],
   },
   testTimeout: 10000,
-  forceExit: true,
+  forceExit: false,
   detectOpenHandles: true,
   modulePathIgnorePatterns: ['/dist/', 'playwright'],
   maxWorkers: 1,

packages/app/package.json

@@ -20,33 +20,34 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@fontsource/source-code-pro": "^5.0.5",
+    "@fontsource/source-code-pro": "^5.0.8",
     "@fuel-ts/wallet-manager": "0.52.0",
     "@fuel-ui/config": "0.17.0",
-    "@fuel-ui/css": "0.17.0",
-    "@fuel-ui/react": "0.17.0",
+    "@fuel-ui/css": "0.19.1",
+    "@fuel-ui/icons": "0.19.1",
+    "@fuel-ui/react": "0.19.1",
     "@fuel-ui/test-utils": "0.17.0",
     "@fuel-wallet/sdk": "workspace:*",
     "@fuel-wallet/storage": "workspace:../storage",
     "@fuel-wallet/types": "workspace:*",
     "@fuel-wallet/xstore": "workspace:../store",
-    "@hookform/resolvers": "^3.1.1",
-    "@react-aria/utils": "^3.18.0",
-    "@sentry/browser": "^7.60.1",
-    "@storybook/addon-viewport": "^7.1.1",
+    "@hookform/resolvers": "^3.2.0",
+    "@react-aria/utils": "^3.19.0",
+    "@sentry/browser": "^7.64.0",
+    "@storybook/addon-viewport": "^7.3.2",
     "@storybook/jest": "^0.1.0",
     "@xstate/react": "^3.2.2",
     "asset-list": "workspace:../asset-list",
-    "cross-fetch": "^4.0.0",
+    "cross-fetch": "4.0.0",
     "dayjs": "^1.11.9",
     "dexie": "^3.2.4",
     "dexie-observable": "4.0.1-beta.13",
     "dexie-react-hooks": "^1.1.6",
     "events": "^3.3.0",
     "fake-indexeddb": "^4.0.2",
-    "framer-motion": "^10.15.0",
+    "framer-motion": "^10.16.1",
     "fuels": "0.53.0",
-    "graphql": "^16.6.0",
+    "graphql": "^16.8.0",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
     "json-rpc-2.0": "^1.6.0",
@@ -55,10 +56,10 @@
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.45.4",
     "react-json-view": "^1.21.3",
-    "react-qr-code": "^2.0.11",
-    "react-router-dom": "^6.14.2",
+    "react-qr-code": "^2.0.12",
+    "react-router-dom": "^6.15.0",
     "tai64": "^1.0.0",
     "vite-plugin-markdown": "^2.1.0",
     "xstate": "^4.38.2",
@@ -73,49 +74,50 @@
     "@graphql-codegen/typescript-graphql-request": "^5.0.0",
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.37.1",
     "@sentry/cli": "^2.20.5",
-    "@storybook/addon-a11y": "^7.1.1",
-    "@storybook/addon-actions": "^7.1.1",
-    "@storybook/addon-essentials": "^7.1.1",
-    "@storybook/addon-interactions": "^7.1.1",
-    "@storybook/addon-jest": "^7.1.1",
-    "@storybook/addon-links": "^7.1.1",
-    "@storybook/addon-storysource": "^7.1.1",
-    "@storybook/addons": "^7.1.1",
-    "@storybook/api": "^7.1.1",
-    "@storybook/components": "^7.1.1",
-    "@storybook/core-events": "^7.1.1",
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-actions": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-jest": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-storysource": "^7.3.2",
+    "@storybook/addons": "^7.3.2",
+    "@storybook/api": "^7.3.2",
+    "@storybook/components": "^7.3.2",
+    "@storybook/core-events": "^7.3.2",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.1.1",
-    "@storybook/react-vite": "^7.1.1",
-    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-vite": "^7.3.2",
+    "@storybook/react-webpack5": "^7.3.2",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.1.1",
-    "@types/chrome": "^0.0.242",
+    "@storybook/theming": "^7.3.2",
+    "@testing-library/react": "^14.0.0",
+    "@types/chrome": "^0.0.243",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.debounce": "^4.0.7",
     "@types/prettier": "^2.7.3",
-    "@types/react": "^18.2.17",
+    "@types/react": "^18.2.20",
     "@types/react-custom-scroll": "^4.3.2",
     "@types/react-dom": "^18.2.7",
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-helmet": "^6.1.6",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@vitejs/plugin-react": "^4.0.4",
     "@xstate/inspect": "^0.8.0",
     "get-graphql-schema": "^2.1.2",
     "jszip": "^3.10.1",
     "msw": "^1.2.3",
     "msw-storybook-addon": "^1.8.0",
-    "storybook": "^7.1.1",
-    "storybook-addon-react-router-v6": "^1.0.2",
+    "storybook": "^7.3.2",
+    "storybook-addon-react-router-v6": "^2.0.5",
     "storybook-dark-mode": "^3.0.1",
     "ts-jest-mock-import-meta": "^1.0.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.1.6",
     "util": "^0.12.5",
-    "vite": "^4.4.7",
+    "vite": "^4.4.9",
     "vite-plugin-clean": "^1.0.0",
     "vite-plugin-static-copy": "^0.17.0",
     "vite-tsconfig-paths": "^4.2.0"

packages/app/playwright/e2e/ReportError.test.ts

@@ -60,8 +60,8 @@ test.describe('ReportError', () => {
         },
       });
     });
-    await reload(page);
 
+    await reload(page);
     await hasText(page, /Unexpected errors detected/i);
     await expect(page.locator(`textarea[name="reports"]`)).toHaveText(
       /Test Error/i

packages/app/playwright/e2e/ViewRecoveryPhrase.test.ts

@@ -1,7 +1,12 @@
 import type { Browser, Page } from '@playwright/test';
 import test, { expect, chromium } from '@playwright/test';
 
-import { getButtonByText, getByAriaLabel, hasText } from '../commons';
+import {
+  getButtonByText,
+  getByAriaLabel,
+  getElementByText,
+  hasText,
+} from '../commons';
 import { mockData, WALLET_PASSWORD } from '../mocks';
 
 test.describe('ViewSeedPhrase', () => {
@@ -17,26 +22,29 @@ test.describe('ViewSeedPhrase', () => {
   });
 
   test('should view seed phrase', async () => {
-    test.step('should show unlock screen', async () => {
+    await test.step('should show unlock screen', async () => {
       await getByAriaLabel(page, 'Menu').click();
+      await getElementByText(page, /Settings/i).click();
       await page.getByText(/View Seed Phrase/i).click();
 
       // Should show unlock screen
       await hasText(page, /Confirm your Password/i);
       await getByAriaLabel(page, 'Your Password').type(WALLET_PASSWORD);
-      await getButtonByText(page, 'Unlock wallet').click();
+      await getButtonByText(page, 'Unlock').click();
     });
 
-    test.step('should show the seed phrase', async () => {
+    await test.step('should show the seed phrase', async () => {
       // Should show unlock screen
       await hasText(page, /Seed Phrase/i);
-      await getButtonByText(page, 'Copy button').click();
-      const clipboardValue = await navigator.clipboard.readText();
-      expect(clipboardValue).toEqual(mnemonic);
+      await getByAriaLabel(page, 'Copy seed phrase').click();
+      const clipboardValue = await page.evaluate(() =>
+        navigator.clipboard.readText()
+      );
+      await expect(clipboardValue).toEqual(mnemonic);
     });
 
-    test.step('should close the page', async () => {
-      await getButtonByText(page, 'Close').click();
+    await test.step('should close the page', async () => {
+      await getByAriaLabel(page, 'Close dialog').click();
       await hasText(page, /assets/i);
     });
   });