fix: eslint error and add husky lint-staged

Author: akbarsaputrait

.cursorrules

@@ -173,9 +173,9 @@ import { RozoPayProvider, RozoPayButton } from '@rozoai/intent-pay';
 
 ### Build Commands
 
-- `bun run dev`: Development mode with watch
-- `bun run build`: Production build
-- `bun run lint`: ESLint validation
+- `pnpm run dev`: Development mode with watch
+- `pnpm run build`: Production build
+- `pnpm run lint`: ESLint validation
 
 ## Important Notes
 

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

package.json

@@ -5,23 +5,31 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "bun --filter @rozoai/intent-common build && bun --filter @rozoai/intent-pay build",
-    "dev": "bun --concurrent --filter '@rozoai/*' dev",
-    "dev:common": "bun --filter @rozoai/intent-common build --watch",
-    "dev:pay": "bun --filter @rozoai/intent-pay dev",
-    "dev:example": "bun --filter @rozoai/pay-nextjs-app-example dev",
-    "install:local": "bun install",
-    "release": "bun build && bun --filter @rozoai/intent-common publish && bun --filter @rozoai/intent-pay release",
+    "build": "pnpm --filter @rozoai/intent-common build && pnpm --filter @rozoai/intent-pay build",
+    "dev": "pnpm --concurrent --filter '@rozoai/*' dev",
+    "dev:common": "pnpm --filter @rozoai/intent-common build --watch",
+    "dev:pay": "pnpm --filter @rozoai/intent-pay dev",
+    "dev:example": "pnpm --filter @rozoai/pay-nextjs-app-example dev",
+    "install:local": "pnpm install",
+    "prepare": "husky",
+    "release": "pnpm build && pnpm --filter @rozoai/intent-common publish && pnpm --filter @rozoai/intent-pay release",
     "clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
-    "clean:full": "bun clean && rm -f bun.lock",
+    "clean:full": "pnpm clean && rm -f bun.lock",
     "clean:deps": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -type d -prune -exec rm -rf '{}' + && find . -name 'build' -type d -prune -exec rm -rf '{}' + && find . -name '.next' -type d -prune -exec rm -rf '{}' +",
     "clean:all": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -type d -prune -exec rm -rf '{}' + && find . -name 'build' -type d -prune -exec rm -rf '{}' + && find . -name '.next' -type d -prune -exec rm -rf '{}' + && rm -f pnpm-lock.yaml"
   },
+  "lint-staged": {
+    "packages/connectkit/**/*.{js,jsx,ts,tsx}": [
+      "cd packages/connectkit && pnpm exec eslint --quiet"
+    ]
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "bumpp": "^10.1.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.23.2",

packages/connectkit/bundle-analysis.html

@@ -27,7 +27,7 @@
     "dev": "rollup --config rollup.config.js -w",
     "build": "rollup --config rollup.config.js",
     "prepare": "npm run build",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings=0",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
     "release": "bumpp"
   },
   "keywords": [
@@ -98,8 +98,8 @@
     "@types/react-dom": "^18.2.18",
     "@types/rollup-plugin-peer-deps-external": "^2.2.5",
     "@types/styled-components": "^5.1.25",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@walletconnect/types": "^2.22.3",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.0",

packages/connectkit/package.json

@@ -23,4 +23,4 @@ export default function WalletIcon({ ...props }) {
       <circle cx="10.3863" cy="10.1894" r="1.32574" fill="currentColor" />
     </svg>
   );
-};
+}

packages/connectkit/src/assets/crepe.tsx

@@ -3,19 +3,19 @@ import React, { ReactElement, useMemo } from "react";
 
 const generateMatrix = (
   value: string,
-  errorCorrectionLevel: QRCodeUtil.QRCodeErrorCorrectionLevel,
+  errorCorrectionLevel: QRCodeUtil.QRCodeErrorCorrectionLevel
 ) => {
   const arr = Array.prototype.slice.call(
     QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data,
-    0,
+    0
   );
   const sqrt = Math.sqrt(arr.length);
   return arr.reduce(
     (rows, key, index) =>
       (index % sqrt === 0
         ? rows.push([key])
         : rows[rows.length - 1].push(key)) && rows,
-    [],
+    []
   );
 };
 
@@ -43,7 +43,7 @@ export function QRCode({
     const dots: ReactElement[] = [];
     const matrix = generateMatrix(uri, ecl);
     const cellSize = size / matrix.length;
-    let qrList = [
+    const qrList = [
       { x: 0, y: 0 },
       { x: 1, y: 0 },
       { x: 0, y: 1 },
@@ -67,7 +67,7 @@ export function QRCode({
             height={cellSize * (7 - i * 2)}
             x={x1 + cellSize * i}
             y={y1 + cellSize * i}
-          />,
+          />
         );
       }
     });
@@ -96,7 +96,7 @@ export function QRCode({
               {image}
             </div>
           </foreignObject>
-        </>,
+        </>
       );
     }
 
@@ -132,7 +132,7 @@ export function QRCode({
                   cy={j * cellSize + cellSize / 2}
                   fill="var(--ck-qr-dot-color)"
                   r={cellSize / 3}
-                />,
+                />
               );
             }
           }

packages/connectkit/src/assets/wallet.tsx

@@ -402,13 +402,14 @@ const Modal: React.FC<ModalProps> = ({
       case ROUTES.STELLAR_SELECT_AMOUNT:
       case ROUTES.SELECT_WALLET_AMOUNT:
         return "Select Amount";
-      case ROUTES.PAY_WITH_TOKEN:
+      case ROUTES.PAY_WITH_TOKEN: {
         if (selectedTokenOption == null) return undefined;
 
         const chainName = getChainName(
           selectedTokenOption.balance.token.chainId
         );
         return `Pay with ${chainName} ${selectedTokenOption.balance.token.symbol}`;
+      }
       case ROUTES.CONFIRMATION:
         return "Payment Successful";
       case ROUTES.ERROR:

packages/connectkit/src/components/Common/CustomQRCode/QRCode.tsx

@@ -94,12 +94,12 @@ export const OrderHeader = ({
     );
   };
 
-  let walletIcon = renderIcon(connector?.icon);
-  let solanaIcon = renderIcon(
+  const walletIcon = renderIcon(connector?.icon);
+  const solanaIcon = renderIcon(
     solanaWallet?.adapter.icon || <Solana />,
     solanaWallet?.adapter.name
   );
-  let stellarIcon = renderIcon(
+  const stellarIcon = renderIcon(
     stellarConnector?.icon || <Stellar />,
     stellarConnector?.name
   );