Merge branch 'main' into Implement-Proper-Error-Boundary-Strategy

Author: shamoo53

.github/workflows/performance-budget.yml

@@ -0,0 +1,34 @@
+name: Performance Budget
+
+on:
+  pull_request:
+    branches: ["main", "master"]
+  push:
+    branches: ["main", "master"]
+
+jobs:
+  performance-budget:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install
+        run: npm ci
+
+      - name: Build with stats
+        run: npm run build:analyze
+        env:
+          ANALYZE: "true"
+
+      - name: Check budgets
+        run: npm run perf:budgets
+        env:
+          TOTAL_JS_BUDGET_KB: "650"
+          MAX_CHUNK_BUDGET_KB: "220"

eslint.config.mjs

@@ -0,0 +1,31 @@
+import tseslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [
+  {
+    ignores: ["node_modules/**", ".next/**", "out/**", "dist/**"],
+  },
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: ["./tsconfig.json"],
+        tsconfigRootDir: import.meta.dirname,
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+    },
+    rules: {
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/consistent-type-imports": [
+        "error",
+        { prefer: "type-imports", fixStyle: "inline-type-imports" },
+      ],
+      "@typescript-eslint/no-unnecessary-type-assertion": "error",
+    },
+  },
+];

next.config.ts

@@ -1,7 +1,121 @@
 import type { NextConfig } from "next";
 
+const isAnalyzeEnabled = process.env.ANALYZE === "true";
+
 const nextConfig: NextConfig = {
-  /* config options here */
+  experimental: {
+    optimizePackageImports: [
+      "lucide-react",
+      "recharts",
+      "framer-motion",
+      "wagmi",
+      "viem",
+    ],
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+    formats: ["image/avif", "image/webp"],
+  },
+  async headers() {
+    return [
+      {
+        source: "/_next/static/:path*",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=31536000, immutable",
+          },
+        ],
+      },
+      {
+        source: "/:path*.(png|jpg|jpeg|gif|webp|avif|svg|ico)",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=604800, stale-while-revalidate=86400",
+          },
+        ],
+      },
+      {
+        source: "/sw.js",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-cache, no-store, must-revalidate",
+          },
+        ],
+      },
+    ];
+  },
+  webpack: (config, { isServer, webpack }) => {
+    config.resolve = config.resolve ?? {};
+    config.resolve.alias = {
+      ...(config.resolve.alias ?? {}),
+      "@walletconnect/ethereum-provider": false,
+      "@safe-global/safe-apps-sdk": false,
+      "@safe-global/safe-apps-provider": false,
+      "@base-org/account": false,
+      "@gemini-wallet/core": false,
+      "@react-native-async-storage/async-storage": false,
+      porto: false,
+      "porto/internal": false,
+    };
+
+    if (!isServer && config.optimization?.splitChunks) {
+      config.optimization.splitChunks = {
+        ...config.optimization.splitChunks,
+        cacheGroups: {
+          ...(config.optimization.splitChunks.cacheGroups ?? {}),
+          web3: {
+            name: "web3-vendors",
+            test: /[\\/]node_modules[\\/](wagmi|viem|ethers|@walletconnect|@metamask|@coinbase)[\\/]/,
+            chunks: "all",
+            priority: 35,
+          },
+          charts: {
+            name: "chart-vendors",
+            test: /[\\/]node_modules[\\/](recharts|d3-.*)[\\/]/,
+            chunks: "all",
+            priority: 25,
+          },
+        },
+      };
+    }
+
+    if (isAnalyzeEnabled && !isServer) {
+      class BuildStatsPlugin {
+        apply(compiler: any) {
+          compiler.hooks.done.tap("BuildStatsPlugin", (stats: any) => {
+            const fs = require("fs");
+            const path = require("path");
+            const outputPath = path.join(compiler.options.output.path ?? ".next", "build-stats.json");
+            fs.writeFileSync(
+              outputPath,
+              JSON.stringify(
+                stats.toJson({
+                  all: false,
+                  assets: true,
+                  chunks: true,
+                  chunkGroups: true,
+                }),
+                null,
+                2
+              )
+            );
+          });
+        }
+      }
+
+      config.plugins.push(new BuildStatsPlugin());
+    }
+
+    return config;
+  },
 };
 
 export default nextConfig;