chore: migrate linter, fix linter issues

Author: hjchen-circle

.eslintignore

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025, Circle Internet Group, Inc. All rights reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig([
+    globalIgnores(["**/node_modules", "**/.next", "**/dist", "**/build", "**/out"]),
+    {
+        extends: [...nextCoreWebVitals],
+    },
+]);

.eslintrc.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint ."
   },
   "dependencies": {
     "@coral-xyz/anchor": "^0.32.1",

eslint.config.mjs

@@ -16,8 +16,10 @@
  * limitations under the License.
  */
 
-export default {
+const config = {
   plugins: {
     '@tailwindcss/postcss': {},
   },
-}
+};
+
+export default config;

package.json

@@ -95,7 +95,7 @@ export default function Home() {
       }
     };
     wrapper();
-  }, [sourceChain]);
+  }, [sourceChain, getBalance]);
 
   return (
     <div className="min-h-screen bg-gray-100 p-8">

postcss.config.mjs

@@ -18,7 +18,7 @@
 
 "use client";
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from "react";
 
 interface TimerProps {
   isRunning: boolean;
@@ -27,25 +27,27 @@ interface TimerProps {
 }
 
 export function Timer({ isRunning, onTick }: TimerProps) {
-  const [startTime, setStartTime] = useState<number | null>(null);
+  const startTimeRef = useRef<number | null>(null);
   const [elapsed, setElapsed] = useState(0);
   const animationRef = useRef<number | undefined>(undefined);
   const onTickRef = useRef(onTick);
-  onTickRef.current = onTick;
+  useEffect(() => {
+    onTickRef.current = onTick;
+  }, [onTick]);
 
   useEffect(() => {
-    if (isRunning && startTime === null) {
-      setStartTime(Date.now());
-    } else if (!isRunning && startTime !== null) {
-      setStartTime(null);
+    if (isRunning && startTimeRef.current === null) {
+      startTimeRef.current = Date.now();
+    } else if (!isRunning && startTimeRef.current !== null) {
+      startTimeRef.current = null;
     }
-  }, [isRunning, startTime]);
+  }, [isRunning]);
 
   useEffect(() => {
     const animate = () => {
-      if (startTime) {
+      if (startTimeRef.current !== null) {
         const now = Date.now();
-        const newElapsed = Math.floor((now - startTime) / 1000);
+        const newElapsed = Math.floor((now - startTimeRef.current) / 1000);
         setElapsed(newElapsed);
         onTickRef.current?.(newElapsed);
       }
@@ -61,15 +63,14 @@ export function Timer({ isRunning, onTick }: TimerProps) {
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [isRunning, startTime]);
+  }, [isRunning]);
 
   const minutes = Math.floor(elapsed / 60);
   const seconds = elapsed % 60;
 
   return (
     <div className="text-2xl font-mono">
-      <span>{minutes.toString().padStart(2, '0')}</span>:
-      <span>{seconds.toString().padStart(2, '0')}</span>
+      <span>{minutes.toString().padStart(2, "0")}</span>:<span>{seconds.toString().padStart(2, "0")}</span>
     </div>
   );
-}
+}