feat(lint): 546 add pre commit lint and type check (#26)

- Update app structure and tooling with latest create t3 turbo.
- Fix lint issues
- Fix typecheck issues
- Setup CI lint / typecheck
- Setup precommit lint / typecheck

.env.example

@@ -1,5 +1,10 @@
+NEXT_PUBLIC_BROKER_ID=
+NEXT_PUBLIC_IPFS_GATEWAY=https://ipfs.arkproject.dev/ipfs/
+NEXT_PUBLIC_MARKETPLACE_API_URL=https://api.marketplace.arkproject.dev
 NEXT_PUBLIC_NFT_API_KEY=
-NEXT_PUBLIC_MARKETPLACE_API_URL="https://api.marketplace.arkproject.dev"
 NEXT_PUBLIC_NFT_API_URL=https://api.arkproject.dev
 NEXT_PUBLIC_ORDERBOOK_API_URL=https://api-orderbook.arkproject.dev
-NEXT_PUBLIC_BROKER_ID=
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
+NEXT_PUBLIC_IMAGE_CDN_URL=https://media.arkproject.dev
+NEXT_PUBLIC_IMAGE_PROXY_URL=https://imgproxy.arkproject.dev
+MOBULA_API_KEY=

.github/workflows/ci.yml

@@ -34,17 +34,6 @@ jobs:
       - name: Lint
         run: pnpm lint && pnpm lint:ws
 
-  format:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup
-        uses: ./tooling/github/setup
-
-      - name: Format
-        run: pnpm format
-
   typecheck:
     runs-on: ubuntu-latest
     steps:

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.vscode/settings.json

@@ -1,47 +1,7 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "eslint.rules.customizations": [
-    {
-      "rule": "*",
-      "severity": "warn"
-    }
-  ],
   "eslint.workingDirectories": [
     {
-      "pattern": "apps/*/"
-    },
-    {
-      "pattern": "packages/*/"
-    },
-    {
-      "pattern": "tooling/*/"
+      "mode": "auto"
     }
-  ],
-  "tailwindCSS.experimental.classRegex": [
-    [
-      "cva\\(([^)]*)\\)",
-      "[\"'`]([^\"'`]*).*?[\"'`]"
-    ],
-    [
-      "cx\\(([^)]*)\\)",
-      "(?:'|\"|`)([^']*)(?:'|\"|`)"
-    ]
-  ],
-  "tailwindCSS.experimental.configFile": "./tooling/tailwind/web.ts",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.preferences.autoImportFileExcludePatterns": [
-    "next/router.d.ts",
-    "next/dist/client/router.d.ts"
-  ],
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "[dotenv]": {
-    "editor.defaultFormatter": "foxundermoon.shell-format"
-  },
-  "[ignore]": {
-    "editor.defaultFormatter": "foxundermoon.shell-format"
-  }
-}
+  ]
+}

apps/arkmarket/eslint.config.js

@@ -0,0 +1,14 @@
+import baseConfig, { restrictEnvAccess } from "@ark-market/eslint-config/base";
+import nextjsConfig from "@ark-market/eslint-config/nextjs";
+import reactConfig from "@ark-market/eslint-config/react";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  {
+    ignores: [".next/**"],
+  },
+  ...baseConfig,
+  ...reactConfig,
+  ...nextjsConfig,
+  ...restrictEnvAccess,
+];

apps/arkmarket/next.config.js

@@ -2,7 +2,7 @@ import { fileURLToPath } from "url";
 import createJiti from "jiti";
 
 // Import env files to validate at build time. Use jiti so we can load .ts files in here.
-createJiti(fileURLToPath(import.meta.url))("./env");
+createJiti(fileURLToPath(import.meta.url))("./src/env");
 
 /** @type {import("next").NextConfig} */
 const config = {
@@ -14,14 +14,6 @@ const config = {
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "**",
-      },
-    ],
-  },
 };
 
 export default config;

apps/arkmarket/package.json

@@ -8,7 +8,7 @@
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev",
     "format": "prettier --check . --ignore-path ../../.gitignore",
-    "lint": "dotenv -v SKIP_ENV_VALIDATION=1 next lint",
+    "lint": "eslint",
     "start": "pnpm with-env next start",
     "typecheck": "tsc --noEmit",
     "with-env": "dotenv -e ../../.env --"
@@ -19,55 +19,48 @@
     "@ark-project/react": "^1.1.0",
     "@starknet-react/chains": "^0.1.7",
     "@starknet-react/core": "^2.8.2",
-    "@t3-oss/env-nextjs": "^0.9.2",
+    "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.28.6",
     "@tanstack/react-table": "^8.15.3",
     "@tanstack/react-virtual": "^3.5.0",
+    "@trpc/client": "11.0.0-rc.364",
+    "@trpc/react-query": "11.0.0-rc.364",
+    "@trpc/server": "11.0.0-rc.364",
     "@vercel/speed-insights": "^1.0.10",
     "blockies-ts": "^1.0.0",
-    "dotenv": "^16.4.5",
     "framer-motion": "^11.2.6",
     "geist": "^1.2.2",
     "get-starknet-core": "^3.2.0",
     "lucide-react": "^0.381.0",
     "mobula-sdk": "^1.5.4",
     "moment": "^2.30.1",
-    "next": "^14.1.4",
+    "next": "^14.2.3",
     "nuqs": "^1.17.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-icons": "^5.0.1",
     "react-query": "^3.39.3",
     "react-virtuoso": "^4.7.11",
     "starknet": "^6.9.0",
     "starknetkit": "^2.2.10",
     "superjson": "2.2.1",
     "viem": "^2.13.10",
-    "web3": "^4.7.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@ark-market/eslint-config": "workspace:*",
     "@ark-market/prettier-config": "workspace:*",
     "@ark-market/tailwind-config": "workspace:*",
     "@ark-market/tsconfig": "workspace:*",
     "@types/node": "^20.11.30",
-    "@types/react": "^18.2.69",
-    "@types/react-dom": "^18.2.22",
-    "dotenv-cli": "^7.4.1",
-    "eslint": "^8.57.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "dotenv-cli": "^7.4.2",
+    "eslint": "^9.4.0",
     "jiti": "^1.21.0",
-    "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@ark-market/eslint-config/base",
-      "@ark-market/eslint-config/nextjs",
-      "@ark-market/eslint-config/react"
-    ]
+    "prettier": "^3.3.1",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5"
   },
   "prettier": "@ark-market/prettier-config"
 }

apps/arkmarket/app/(authenticated)/portfolio/components/Portfolio.tsx → apps/arkmarket/src/app/(authenticated)/portfolio/components/Portfolio.tsx

@@ -1,22 +1,26 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 "use client";
 
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { useAccount } from "@starknet-react/core";
 
-import { ScrollArea } from "@ark-market/ui/components/scroll-area";
+import { ScrollArea } from "@ark-market/ui/scroll-area";
 
+import type { OwnersTokensApiResponse, Token } from "~/types";
 import Media from "~/components/media";
 import { env } from "~/env";
 
 const Portfolio: React.FC = () => {
-  const [tokens, setTokens] = useState([]);
+  const [tokens, setTokens] = useState<Token[]>([]);
   const { address } = useAccount();
+
   useEffect(() => {
+    if (!address) {
+      return;
+    }
+
     const fetchData = async () => {
-      if (!address) {
-        return;
-      }
       try {
         const response = await fetch(
           `${env.NEXT_PUBLIC_NFT_API_URL}/v1/owners/${address}/tokens`,
@@ -28,30 +32,33 @@ const Portfolio: React.FC = () => {
         );
 
         if (!response.ok) {
-          throw new Error("Network response was not ok");
+          throw new Error("Failed to fetch portfolio tokens");
         }
 
-        const data = await response.json();
-        setTokens(data.result);
+        const { result } = (await response.json()) as OwnersTokensApiResponse;
+
+        setTokens(result);
       } catch (error) {
         console.error("Error fetching data: ", error);
       }
     };
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     fetchData();
   }, [address]);
 
   return (
     <ScrollArea className="pr-4">
       <div className="grid grid-cols-6 gap-4">
-        {tokens.map((token: any, index) => (
+        {tokens.map((token, index) => (
           <Link
             href={`/assets/${token.contract_address}/${token.token_id}`}
             key={index}
           >
             <div className="cursor-pointer rounded-md border p-2 hover:border-slate-400 hover:shadow-md">
               <div className="flex flex-col space-y-2">
                 <div className="overflow-hidden rounded-md">
-                  {token.metadata?.normalized?.image ? (
+                  {token.metadata.normalized.image ? (
                     <Media
                       src={token.metadata.normalized.image}
                       alt={token.token_id || "Token Image"}
@@ -65,7 +72,7 @@ const Portfolio: React.FC = () => {
                 </div>
                 <div className="space-y-1 text-sm">
                   <h3 className="font-medium leading-none">
-                    {token.metadata?.normalized
+                    {token.metadata.normalized
                       ? token.metadata.normalized.name
                       : token.token_id}
                   </h3>

apps/arkmarket/app/api/prices/route.ts → apps/arkmarket/src/app/api/prices/route.ts

@@ -1,7 +1,9 @@
 import { Mobula } from "mobula-sdk";
 
+import { env } from "~/env";
+
 const mobula = new Mobula({
-  apiKeyAuth: process.env.MOBULA_API_KEY,
+  apiKeyAuth: env.MOBULA_API_KEY,
 });
 
 export async function GET() {
@@ -20,10 +22,10 @@ export async function GET() {
 
   return Response.json({
     ethereum: {
-      price: response.multiDataResponse?.data?.ethereum?.price as number,
+      price: response.multiDataResponse.data.ethereum?.price as number,
     },
     starknet: {
-      price: response.multiDataResponse?.data?.starknet?.price as number,
+      price: response.multiDataResponse.data.starknet?.price as number,
     },
   });
 }