feat: switch to app router

.cursorrules

@@ -0,0 +1,64 @@
+
+Key Principles
+- Write concise, technical responses with accurate TypeScript examples.
+- Use functional, declarative programming. Avoid classes.
+- Prefer iteration and modularization over duplication.
+- Use descriptive variable names with auxiliary verbs (e.g., isLoading).
+- Use lowercase with dashes for directories (e.g., components/auth-wizard).
+- Favor named exports for components.
+- Use the Receive an Object, Return an Object (RORO) pattern.
+
+JavaScript/TypeScript
+- Use "function" keyword for pure functions. Omit semicolons.
+- Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.
+- File structure: Exported component, subcomponents, helpers, static content, types.
+- Avoid unnecessary curly braces in conditional statements.
+- For single-line statements in conditionals, omit curly braces.
+- Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).
+
+Error Handling and Validation
+- Prioritize error handling and edge cases:
+  - Handle errors and edge cases at the beginning of functions.
+  - Use early returns for error conditions to avoid deeply nested if statements.
+  - Place the happy path last in the function for improved readability.
+  - Avoid unnecessary else statements; use if-return pattern instead.
+  - Use guard clauses to handle preconditions and invalid states early.
+  - Implement proper error logging and user-friendly error messages.
+  - Consider using custom error types or error factories for consistent error handling.
+
+React/Next.js
+- Use functional components and TypeScript interfaces.
+- Use declarative JSX.
+- Use function, not const, for components.
+- Use Shadcn UI, Radix, and Tailwind Aria for components and styling.
+- Implement responsive design with Tailwind CSS.
+- Use mobile-first approach for responsive design.
+- Place static content and interfaces at file end.
+- Use content variables for static content outside render functions.
+- Minimize 'use client', 'useEffect', and 'setState'. Favor RSC.
+- Use Zod for form validation.
+- Wrap client components in Suspense with fallback.
+- Use dynamic loading for non-critical components.
+- Optimize images: WebP format, size data, lazy loading.
+
+RainbowKit v2 & Wagmi Integration
+- Setup RainbowKit v2 with Wagmi v2 using `configureChains` and `createClient` from Wagmi.
+- Initialize chains and providers within a `RainbowKitProvider` wrapper.
+- Store mnemonics in `expo-secure-store` or other secure storage solutions.
+- Use React hooks like `useAccount`, `useConnect`, `useDisconnect` from Wagmi for wallet actions.
+- Favor the use of hooks over directly accessing global state.
+
+tRPC v11 Integration
+- Use `@trpc/react-query` and define tRPC routers on the server.
+- Set up queries and mutations using `trpc.useQuery` and `trpc.useMutation` on the client.
+- Use Zod for input validation at both client and server levels.
+- Handle optimistic updates in React Query using the `onMutate` and `onSuccess` methods.
+- For error handling, ensure tRPC procedures return a consistent error structure.
+
+Key Conventions
+1. Rely on Next.js App Router for state changes.
+2. Prioritize Web Vitals (LCP, CLS, FID).
+3. Minimize 'use client' usage:
+  - Prefer server components and Next.js SSR features.
+  - Use 'use client' only for Web API access in small components.
+  - Avoid using 'use client' for data fetching or state management.

__tests__/hooks/useDeploy.test.tsx

@@ -4,11 +4,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 
 import { act, renderHook, waitFor } from "@testing-library/react";
+import { TRPCError } from "@trpc/server";
 import { beforeEach, describe, expect, it, vi, type Mock } from "vitest";
 import { usePublicClient, useWalletClient } from "wagmi";
 import { useVoucherDeploy } from "~/hooks/useVoucherDeploy";
 import { type DeployVoucherInput } from "~/server/api/routers/voucher";
-import { api } from "../../src/utils/api";
 
 vi.mock("wagmi", async (importOriginal) => {
   const actual = await importOriginal<typeof import("wagmi")>();
@@ -26,8 +26,8 @@ vi.mock("viem", async (importOriginal) => {
   };
 });
 
-vi.mock("../../src/utils/api", () => ({
-  api: {
+vi.mock("../../src/lib/trpc", () => ({
+  trpc: {
     voucher: {
       deploy: {
         useMutation: vi.fn(),
@@ -100,7 +100,7 @@ describe("useDeploy hook", () => {
       contractAddress: "0xD969e121939Ca0230aF31aa23D8553B6d4489082",
     });
     walletClientMock.deployContract.mockResolvedValue("hash");
-    (api.voucher.deploy.useMutation as Mock).mockReturnValue({
+    (trpc.voucher.deploy.useMutation as Mock).mockReturnValue({
       mutateAsync: vi.fn().mockResolvedValue("voucher"),
     });
     walletClientMock.writeContract.mockResolvedValue("minthash");
@@ -123,12 +123,12 @@ describe("useDeploy hook", () => {
     );
     // expect(result.current).toEqual({ test: "receipt" });
     await waitFor(() => {
-      expect(api.voucher.deploy.useMutation().mutateAsync).toHaveBeenCalledWith(
-        {
-          ...mockDeployInput,
-          voucherAddress: "0xD969e121939Ca0230aF31aa23D8553B6d4489082",
-        }
-      );
+      expect(
+        trpc.voucher.deploy.useMutation().mutateAsync
+      ).toHaveBeenCalledWith({
+        ...mockDeployInput,
+        voucherAddress: "0xD969e121939Ca0230aF31aa23D8553B6d4489082",
+      });
     });
     expect(walletClientMock.writeContract).toHaveBeenCalledOnce();
     expect(publicClientMock.waitForTransactionReceipt).toHaveBeenCalledTimes(2);
@@ -167,7 +167,7 @@ describe("useDeploy hook", () => {
           (useWalletClient as Mock).mockReturnValue(walletClient);
         } else {
           walletClientMock.deployContract.mockResolvedValue("hash");
-          (api.voucher.deploy.useMutation as Mock).mockReturnValue({
+          (trpc.voucher.deploy.useMutation as Mock).mockReturnValue({
             mutateAsync: vi.fn().mockResolvedValue("voucher"),
           });
         }

__tests__/utils/persmissions.test.ts

@@ -9,8 +9,8 @@ describe('Permission Tests', () => {
   const staff = { role: 'STAFF' } as const;
   const user = { role: 'USER' } as const;
 
-  it('should allow SUPER_ADMIN to perform all actions', () => {
-    const permissions = getPermissions(superAdmin, false);
+  it('should allow SUPER_ADMIN and Owner to perform all actions ', () => {
+    const permissions = getPermissions(superAdmin, true);
 
     for (const resource in permissions) {
       for (const action in permissions[resource as keyof typeof permissions]) {

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/styles/global.css",
+    "css": "styles/global.css",
     "baseColor": "slate",
     "cssVariables": true
   },

migrate.sh

@@ -0,0 +1,37 @@
+mkdir -p src/app
+git mv src/pages/_app.tsx src/app/layout.tsx
+git mv src/pages/_document.tsx src/app/head.tsx
+git mv src/pages/api src/app/api
+mkdir -p src/app/404
+git mv src/pages/404.tsx src/app/404/page.tsx
+
+mkdir -p src/app/dashboard
+git mv src/pages/dashboard/index.tsx src/app/dashboard/page.tsx
+
+git mv src/pages/index.tsx src/app/page.tsx
+
+mkdir -p src/app/paper/generate
+git mv src/pages/paper/generate.tsx src/app/paper/generate/page.tsx
+
+mkdir -p src/app/pools
+git mv src/pages/pools/index.tsx src/app/pools/page.tsx
+git mv src/pages/pools/create.tsx src/app/pools/create/page.tsx
+mkdir -p src/app/pools/[address]
+git mv src/pages/pools/[address].tsx src/app/pools/[address]/page.tsx
+
+mkdir -p src/app/staff
+git mv src/pages/staff/index.tsx src/app/staff/page.tsx
+
+mkdir -p src/app/terms-and-conditions
+git mv src/pages/terms-and-conditions.tsx src/app/terms-and-conditions/page.tsx
+
+mkdir -p src/app/vouchers
+git mv src/pages/vouchers/index.tsx src/app/vouchers/page.tsx
+git mv src/pages/vouchers/create.tsx src/app/vouchers/create/page.tsx
+mkdir -p src/app/vouchers/[address]
+git mv src/pages/vouchers/[address]/index.tsx src/app/vouchers/[address]/page.tsx
+
+mkdir -p src/app/wallet
+git mv src/pages/wallet/index.tsx src/app/wallet/page.tsx
+git mv src/pages/wallet/explore.tsx src/app/wallet/explore/page.tsx
+git mv src/pages/wallet/profile.tsx src/app/wallet/profile/page.tsx

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.mjs

@@ -17,6 +17,12 @@ const config = {
   reactStrictMode: true,
   webpack: (config) => {
     config.resolve.fallback = { fs: false, net: false, tls: false };
+    config.externals.push("pino-pretty", "lokijs", "encoding");
+    // Discord.js
+    config.module.rules.push({
+      test: /\.node/,
+      use: 'node-loader'
+    })
     return config;
   },
   async redirects() {