feat: migrate to app router

.github/actions/restore-build-artifacts/action.yml

@@ -8,6 +8,6 @@ runs:
       uses: actions/cache/restore@v4	
       with:	
         path: |	
-          ./packages/arb-token-bridge-ui/build	
+          ./packages/app/build	
         key: build-artifacts-${{ github.run_id }}	
         fail-on-cache-miss: true	

.github/workflows/build.yml

@@ -34,7 +34,7 @@ jobs:
       uses: actions/cache/restore@v4
       with:
         path:  |
-          ./packages/arb-token-bridge-ui/build
+          ./packages/app/build
         key: build-artifacts-${{ github.run_id }}
 
     - name: Install node_modules
@@ -58,5 +58,5 @@ jobs:
       uses: actions/cache/save@v4
       with:
         path: |
-          ./packages/arb-token-bridge-ui/build
+          ./packages/app/build
         key: build-artifacts-${{ github.run_id }}

audit-ci.jsonc

@@ -22,6 +22,21 @@
     // GHSA-95m3-7q98-8xr5|arb-token-bridge-ui>wagmi>@wagmi/connectors>cbw-sdk>sha.js
     // Reason to ignore: Low risk client-side vulnerability in Coinbase Wallet connector only.
     // Does not affect core bridge functionality, limited to wallet-specific operations.
-    "GHSA-95m3-7q98-8xr5"
+    "GHSA-95m3-7q98-8xr5",
+    // https://github.com/advisories/GHSA-v6h2-p8h4-qcjw
+    // Vulnerability was found in juliangruber brace-expansion up to 1.1.11/2.0.1/3.0.0/4.0.0. It has been rated as problematic.
+    // Affected by this issue is the function expand of the file index.js.
+    //
+    // Reason to ignore: This is a development issue only (eslint)
+    // GHSA-v6h2-p8h4-qcjw|@typescript-eslint/parser>@typescript-eslint/typescript-estree>minimatch>brace-expansion
+    // GHSA-v6h2-p8h4-qcjw|@typescript-eslint/eslint-plugin>@typescript-eslint/type-utils>@typescript-eslint/typescript-estree>minimatch>brace-expansion
+    // GHSA-v6h2-p8h4-qcjw|typescript-eslint>@typescript-eslint/eslint-plugin>@typescript-eslint/type-utils>@typescript-eslint/typescript-estree>minimatch>brace-expansion
+    // GHSA-v6h2-p8h4-qcjw|typescript-eslint>@typescript-eslint/eslint-plugin>@typescript-eslint/type-utils>@typescript-eslint/utils>@typescript-eslint/typescript-estree>minimatch>brace-expansion
+    // GHSA-v6h2-p8h4-qcjw|eslint-config-next>@typescript-eslint/parser>@typescript-eslint/typescript-estree>minimatch>brace-expansion
+    // GHSA-v6h2-p8h4-qcjw|eslint-config-next>@typescript-eslint/eslint-plugin>@typescript-eslint/type-utils>@typescript-eslint/typescript-estree>minimatch>brace-expansion
+    // GHSA-v6h2-p8h4-qcjw|eslint-config-next>@typescript-eslint/eslint-plugin>@typescript-eslint/type-utils>@typescript-eslint/utils>@typescript-eslint/typescript-estree>minimatch>brace-expansion
+    // GHSA-v6h2-p8h4-qcjw|@eslint/eslintrc>minimatch>brace-expansion
+    // GHSA-v6h2-p8h4-qcjw|eslint>@eslint/eslintrc>minimatch>brace-expansion
+    "GHSA-v6h2-p8h4-qcjw"
   ]
 }

eslint.config.mjs

@@ -1,117 +1,121 @@
-import { globalIgnores } from "eslint/config";
-import path from "path";
-import { fileURLToPath } from "url";
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import zustandRules from "eslint-plugin-zustand-rules";
-import tsParser from "@typescript-eslint/parser";
-import prettierRecommended from "eslint-plugin-prettier/recommended";
-import { flatConfig as nextFlatConfig } from "@next/eslint-plugin-next";
-import tseslint from "typescript-eslint";
+import { globalIgnores } from 'eslint/config'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import zustandRules from 'eslint-plugin-zustand-rules'
+import tsParser from '@typescript-eslint/parser'
+import prettierRecommended from 'eslint-plugin-prettier/recommended'
+import { flatConfig as nextFlatConfig } from '@next/eslint-plugin-next'
+import tseslint from 'typescript-eslint'
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 export default [
   ...tseslint.configs.recommended,
   prettierRecommended,
   nextFlatConfig.recommended,
   {
-    files: ["**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}"],
+    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
 
     plugins: {
-      "@typescript-eslint": typescriptEslint,
-      "zustand-rules": zustandRules,
+      '@typescript-eslint': typescriptEslint,
+      'zustand-rules': zustandRules
     },
 
     languageOptions: {
       parser: tsParser,
-      sourceType: "module",
+      sourceType: 'module',
 
       parserOptions: {
-        project: ["./tsconfig.eslint.json", "./packages/**/tsconfig.json"],
-        tsconfigRootDir: __dirname,
-      },
+        project: ['./tsconfig.eslint.json', './packages/**/tsconfig.json'],
+        tsconfigRootDir: __dirname
+      }
     },
 
     settings: {
       react: {
-        version: "detect",
+        version: 'detect'
       },
 
       next: {
-        rootDir: "packages/arb-token-bridge-ui/",
-      },
+        rootDir: 'packages/app/'
+      }
     },
 
     rules: {
-      "@typescript-eslint/no-non-null-assertion": "warn",
-      "@typescript-eslint/no-unused-vars": [
-        "error",
+      '@typescript-eslint/no-non-null-assertion': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
         {
-          vars: "all",
-          args: "after-used",
-          caughtErrors: "none",
+          vars: 'all',
+          args: 'after-used',
+          caughtErrors: 'none',
           ignoreRestSiblings: false,
-          reportUsedIgnorePattern: false,
-        },
+          reportUsedIgnorePattern: false
+        }
       ],
-      "@typescript-eslint/no-explicit-any": "warn",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
 
-      "@typescript-eslint/ban-ts-comment": [
-        "error",
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
         {
-          "ts-expect-error": "allow-with-description",
-          "ts-ignore": "allow-with-description",
-          "ts-nocheck": "allow-with-description",
-          "ts-check": "allow-with-description",
-        },
+          'ts-expect-error': 'allow-with-description',
+          'ts-ignore': 'allow-with-description',
+          'ts-nocheck': 'allow-with-description',
+          'ts-check': 'allow-with-description'
+        }
       ],
 
-      "@typescript-eslint/await-thenable": "error",
+      '@typescript-eslint/await-thenable': 'error',
 
-      "zustand-rules/use-store-selectors": "error",
-      "zustand-rules/no-state-mutation": "error",
-      "zustand-rules/enforce-use-setstate": "error",
+      'zustand-rules/use-store-selectors': 'error',
+      'zustand-rules/no-state-mutation': 'error',
+      'zustand-rules/enforce-use-setstate': 'error',
 
-      "@next/next/no-html-link-for-pages": [
-        "error",
-        path.join(__dirname, "/packages/arb-token-bridge-ui/src/pages"),
-      ],
-    },
+      '@next/next/no-html-link-for-pages': [
+        'error',
+        [
+          path.join(__dirname, '/packages/arb-token-bridge-ui/src/components'),
+          path.join(__dirname, '/packages/app/pages')
+        ]
+      ]
+    }
   },
   {
-    files: ["**/tests/e2e/**/*.ts", "**/tests/support/**/*.js"],
+    files: ['**/tests/e2e/**/*.ts', '**/tests/support/**/*.js'],
     languageOptions: {
       parser: tsParser,
-      sourceType: "module",
+      sourceType: 'module',
       parserOptions: {
-        project: ["packages/arb-token-bridge-ui/tests/tsconfig.json"],
-      },
+        project: ['packages/arb-token-bridge-ui/tests/tsconfig.json']
+      }
     },
     rules: {
       // Cypress awaiting by default
-      "no-debugger": 0,
-      "no-console": 0,
-      "@typescript-eslint/no-unused-vars": [
-        "error",
+      'no-debugger': 0,
+      'no-console': 0,
+      '@typescript-eslint/no-unused-vars': [
+        'error',
         {
-          vars: "all",
-          args: "after-used",
-          caughtErrors: "none",
+          vars: 'all',
+          args: 'after-used',
+          caughtErrors: 'none',
           ignoreRestSiblings: false,
-          reportUsedIgnorePattern: false,
-        },
+          reportUsedIgnorePattern: false
+        }
       ],
-      "@typescript-eslint/no-empty-function": "off",
-    },
+      '@typescript-eslint/no-empty-function': 'off'
+    }
   },
 
   globalIgnores([
-    "**/node_modules",
-    "**/dist",
-    "**/build/",
-    ".github/",
-    "**/cypress/",
-  ]),
-];
+    '**/node_modules',
+    '**/dist',
+    '**/build/',
+    '**/.next/',
+    '.github/',
+    '**/cypress/'
+  ])
+]

package.json

@@ -6,15 +6,15 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "yarn workspace arb-token-bridge-ui dev",
-    "build": "yarn workspace arb-token-bridge-ui build",
-    "start": "yarn workspace arb-token-bridge-ui start",
+    "dev": "yarn workspace app dev",
+    "build": "yarn workspace app build",
+    "start": "yarn workspace app start",
     "audit:ci": "audit-ci --config ./audit-ci.jsonc",
     "test:ci": "yarn workspace arb-token-bridge-ui test:ci",
     "prettier:check": "./node_modules/.bin/prettier --check .",
     "prettier:format": "./node_modules/.bin/prettier --write .",
-    "lint": "yarn workspace arb-token-bridge-ui lint",
-    "lint:fix": "yarn workspace arb-token-bridge-ui lint:fix",
+    "lint": "yarn workspace app lint && yarn workspace arb-token-bridge-ui lint",
+    "lint:fix": "yarn workspace app lint:fix && yarn workspace arb-token-bridge-ui lint:fix",
     "postinstall": "yarn install:chromium",
     "install:chromium": "npx @puppeteer/browsers install chrome@$npm_package_config_chromeVersion --path $npm_package_config_chromePath",
     "test:e2e": "yarn workspace arb-token-bridge-ui env-cmd --silent --file .e2e.env yarn synpress run --configFile synpress.config.ts",
@@ -34,15 +34,38 @@
     "**/tar-fs": "2.1.3",
     "sharp/tar-fs": "3.0.9",
     "**/form-data": "4.0.4",
-    "**/axios": "1.11.0"
+    "**/axios": "1.11.0",
+    "@eslint/plugin-kit": "0.3.4"
   },
   "keywords": [],
   "author": "",
   "workspaces": [
     "packages/*"
   ],
   "devDependencies": {
-    "audit-ci": "^6.3.0"
+    "audit-ci": "^6.3.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.11",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.26.0",
+    "@next/eslint-plugin-next": "^15.3.2",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "eslint": "^9.26.0",
+    "eslint-config-next": "^15.3.2",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-zustand-rules": "https://github.com/OffchainLabs/eslint-plugin-zustand-rules",
+    "typescript-eslint": "^8.32.1",
+    "typescript": "^5.2.2",
+    "@types/node": "^16.6.1",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4"
   },
   "config": {
     "chromeVersion": "128.0.6613.137",

packages/app/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/cypress
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.e2e.env
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pre-commit-config.yaml
+
+# built hooks files
+/dist
+.env
+
+# Local Netlify folder
+.netlify
+
+/src/styles/tailwind.output.css
+
+# Local network config file generated by @arbitrum/sdk
+/src/util/localNetwork.json
+
+# Next.js
+.next
+next-env.d.ts

packages/arb-token-bridge-ui/next.config.js → packages/app/next.config.js

@@ -8,6 +8,13 @@ module.exports = {
   distDir: 'build',
   productionBrowserSourceMaps: true,
   reactStrictMode: true,
+  experimental: {
+    externalDir: true
+  },
+  webpack: config => {
+    config.externals.push('pino-pretty', 'lokijs', 'encoding')
+    return config
+  },
   images: {
     remotePatterns: [
       {
@@ -36,7 +43,8 @@ module.exports = {
   async redirects() {
     return [
       {
-        source: '/:slug((?!^$|api/|_next/|public/)(?!.*\\.[^/]+$).+)',
+        source:
+          '/:slug((?!^$|api/|_next/|public/|restricted)(?!.*\\.[^/]+$).+)',
         missing: [
           {
             type: 'query',

packages/app/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "app",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "dependencies": {
+    "next": "^14.2.32",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tippy.js": "^6.3.7",
+    "use-query-params": "^2.2.1",
+    "@rainbow-me/rainbowkit": "^2.2.4",
+    "react-toastify": "^9.1.1"
+  },
+  "scripts": {
+    "predev": "yarn workspace arb-token-bridge-ui generateDenylist",
+    "dev": "next dev",
+    "prebuild": "yarn workspace arb-token-bridge-ui generateDenylist",
+    "build": "next build",
+    "start": "next start",
+    "lint": "tsc && eslint",
+    "lint:fix": "tsc && eslint --quiet --fix"
+  },
+  "devDependencies": {}
+}