Aleph service

.github/workflows/continuous-integration.yml

@@ -47,6 +47,26 @@ jobs:
       - name: Run Prettier
         run: yarn format:check
 
+  jest-front:
+    name: "Unit tests: front"
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./front
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: 'front/.nvmrc'
+          cache: yarn
+          cache-dependency-path: "front/yarn.lock"
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Run tests
+        run: yarn test
+
   build-front:
     name: "Build: front"
     runs-on: ubuntu-latest

front/.env.example

@@ -1,2 +1,8 @@
 # Service used for auth (with wallets and social providers)
 NEXT_PUBLIC_PRIVY_APP_ID=
+
+# --- Aleph settings ---
+# Use the testnet in development
+# NEXT_PUBLIC_ALEPH_API_URL=https://api.twentysix.testnet.network
+# Channel to use when publishing messages
+# NEXT_PUBLIC_ALEPH_GENERAL_CHANNEL=bedrock

front/.eslintrc.yaml

@@ -16,8 +16,11 @@ rules:
 
   "@typescript-eslint/no-unused-vars":
     - warn
-    - argsIgnorePattern: "^_"
+    - args: "all"
+      argsIgnorePattern: "^_"
       varsIgnorePattern: "^_"
-      args: "all"
+      caughtErrors: "all"
+      caughtErrorsIgnorePattern: "^_"
+
 
   perfectionist/sort-imports: [ "warn", { internalPattern: [ '@/**' ], } ]

front/jest.config.ts

@@ -0,0 +1,206 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+import type { Config } from "jest";
+
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+	// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+	dir: "./",
+});
+
+const config: Config = {
+	// All imported modules in your tests should be mocked automatically
+	// automock: false,
+
+	// Stop running tests after `n` failures
+	// bail: 0,
+
+	// The directory where Jest should store its cached dependency information
+	// cacheDirectory: "/private/var/folders/9g/pmjsw5v93hl8_lyk_hsvjg5w0000gn/T/jest_dx",
+
+	// Automatically clear mock calls, instances, contexts and results before every test
+	// clearMocks: false,
+
+	// Indicates whether the coverage information should be collected while executing the test
+	collectCoverage: true,
+
+	// An array of glob patterns indicating a set of files for which coverage information should be collected
+	// collectCoverageFrom: undefined,
+
+	// The directory where Jest should output its coverage files
+	coverageDirectory: "coverage",
+
+	// An array of regexp pattern strings used to skip coverage collection
+	// coveragePathIgnorePatterns: [
+	//   "/node_modules/"
+	// ],
+
+	// Indicates which provider should be used to instrument code for coverage
+	coverageProvider: "v8",
+
+	// A list of reporter names that Jest uses when writing coverage reports
+	// coverageReporters: [
+	//   "json",
+	//   "text",
+	//   "lcov",
+	//   "clover"
+	// ],
+
+	// An object that configures minimum threshold enforcement for coverage results
+	// coverageThreshold: undefined,
+
+	// A path to a custom dependency extractor
+	// dependencyExtractor: undefined,
+
+	// Make calling deprecated APIs throw helpful error messages
+	// errorOnDeprecated: false,
+
+	// The default configuration for fake timers
+	// fakeTimers: {
+	//   "enableGlobally": false
+	// },
+
+	// Force coverage collection from ignored files using an array of glob patterns
+	// forceCoverageMatch: [],
+
+	// A path to a module which exports an async function that is triggered once before all test suites
+	// globalSetup: undefined,
+
+	// A path to a module which exports an async function that is triggered once after all test suites
+	// globalTeardown: undefined,
+
+	// A set of global variables that need to be available in all test environments
+	// globals: {},
+
+	// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+	// maxWorkers: "50%",
+
+	// An array of directory names to be searched recursively up from the requiring module's location
+	// moduleDirectories: [
+	//   "node_modules"
+	// ],
+
+	// An array of file extensions your modules use
+	// moduleFileExtensions: [
+	//   "js",
+	//   "mjs",
+	//   "cjs",
+	//   "jsx",
+	//   "ts",
+	//   "tsx",
+	//   "json",
+	//   "node"
+	// ],
+
+	// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+	// moduleNameMapper: {},
+
+	// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+	// modulePathIgnorePatterns: [],
+
+	// Activates notifications for test results
+	// notify: false,
+
+	// An enum that specifies notification mode. Requires { notify: true }
+	// notifyMode: "failure-change",
+
+	// A preset that is used as a base for Jest's configuration
+	// preset: undefined,
+
+	// Run tests from one or more projects
+	// projects: undefined,
+
+	// Use this configuration option to add custom reporters to Jest
+	// reporters: undefined,
+
+	// Automatically reset mock state before every test
+	// resetMocks: false,
+
+	// Reset the module registry before running each individual test
+	// resetModules: false,
+
+	// A path to a custom resolver
+	// resolver: undefined,
+
+	// Automatically restore mock state and implementation before every test
+	// restoreMocks: false,
+
+	// The root directory that Jest should scan for tests and modules within
+	// rootDir: undefined,
+
+	// A list of paths to directories that Jest should use to search for files in
+	// roots: [
+	//   "<rootDir>"
+	// ],
+
+	// Allows you to use a custom runner instead of Jest's default test runner
+	// runner: "jest-runner",
+
+	// The paths to modules that run some code to configure or set up the testing environment before each test
+	// setupFiles: [],
+
+	// A list of paths to modules that run some code to configure or set up the testing framework before each test
+	// setupFilesAfterEnv: [],
+
+	// The number of seconds after which a test is considered as slow and reported as such in the results.
+	// slowTestThreshold: 5,
+
+	// A list of paths to snapshot serializer modules Jest should use for snapshot testing
+	// snapshotSerializers: [],
+
+	// The test environment that will be used for testing
+	testEnvironment: "jsdom",
+
+	// Options that will be passed to the testEnvironment
+	// testEnvironmentOptions: {},
+
+	// Adds a location field to test results
+	// testLocationInResults: false,
+
+	// The glob patterns Jest uses to detect test files
+	// testMatch: [
+	//   "**/__tests__/**/*.[jt]s?(x)",
+	//   "**/?(*.)+(spec|test).[tj]s?(x)"
+	// ],
+
+	// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+	// testPathIgnorePatterns: [
+	//   "/node_modules/"
+	// ],
+
+	// The regexp pattern or array of patterns that Jest uses to detect test files
+	// testRegex: [],
+
+	// This option allows the use of a custom results processor
+	// testResultsProcessor: undefined,
+
+	// This option allows use of a custom test runner
+	// testRunner: "jest-circus/runner",
+
+	// A map from regular expressions to paths to transformers
+	// transform: undefined,
+
+	// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+	// transformIgnorePatterns: [
+	//   "/node_modules/",
+	//   "\\.pnp\\.[^\\/]+$"
+	// ],
+
+	// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+	// unmockedModulePathPatterns: undefined,
+
+	// Indicates whether each individual test should be reported during the run
+	// verbose: undefined,
+
+	// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+	// watchPathIgnorePatterns: [],
+
+	// Whether to use watchman for file crawling
+	// watchman: true,
+};
+
+export default createJestConfig(config);

front/package.json

@@ -10,10 +10,18 @@
     "format": "prettier '**/**/*.{ts,tsx}' --write",
     "format:check": "prettier '**/**/*.{ts,tsx}' --check",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@privy-io/react-auth": "^1.92.0",
+    "@aleph-sdk/account": "^1.2.0",
+    "@aleph-sdk/client": "1.0.6",
+    "@aleph-sdk/core": "^1.2.0",
+    "@aleph-sdk/ethereum": "1.0.3",
+    "@aleph-sdk/evm": "^1.2.0",
+    "@aleph-sdk/message": "1.0.7",
+    "@privy-io/react-auth": "^1.92.2",
     "@privy-io/wagmi": "^0.2.12",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
@@ -37,7 +45,9 @@
     "tailwindcss-animate": "^1.0.7",
     "viem": "2.21.19",
     "wagmi": "^2.12.17",
-    "zod": "^3.23.8"
+    "web3": "^4.14.0",
+    "zod": "^3.23.8",
+    "zustand": "^5.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
@@ -49,17 +59,23 @@
     "@storybook/nextjs": "^8.3.5",
     "@storybook/react": "^8.3.5",
     "@storybook/test": "^8.3.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^20.16.11",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.15",
-    "eslint-plugin-perfectionist": "^3.8.0",
+    "eslint-plugin-perfectionist": "^3.9.1",
     "eslint-plugin-storybook": "^0.9.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "storybook": "^8.3.5",
     "tailwindcss": "^3.4.13",
+    "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
     "webpack": "^5.95.0"
   },

front/src/app/(drive)/page.tsx

@@ -1,18 +1,13 @@
-"use client";
-import { useAccount } from "wagmi";
-
 import { SidebarTrigger } from "@/components/ui/sidebar";
 
 export default function Home() {
-	const account = useAccount();
 	return (
 		<>
 			<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
 				<div className="flex items-center gap-2 px-4">
 					<SidebarTrigger className="-ml-1" />
 				</div>
 			</header>
-			{account.address ?? "Not connected"}
 		</>
 	);
 }

front/src/app/auth/page.tsx

@@ -55,7 +55,6 @@ export default function Component() {
 				vy: (Math.random() - 0.5) * 0.5,
 			});
 		}
-		document.querySelector("#privy-dialog-backdrop")?.removeAttribute("onclick");
 
 		const animate = () => {
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -92,6 +91,7 @@ export default function Component() {
 		return () => {
 			window.removeEventListener("resize", resizeCanvas);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	return (

front/src/app/layout.tsx

@@ -2,9 +2,9 @@ import { type Metadata } from "next";
 import localFont from "next/font/local";
 import { ReactNode } from "react";
 
-import "./globals.css";
+import { Providers } from "@/layouts/providers";
 
-import { Providers } from "@/app/providers";
+import "./globals.css";
 
 const geistSans = localFont({
 	src: "./fonts/GeistVF.woff",