chore: convert hello-near-connector to ts

.eslintrc.json

@@ -1,6 +1,33 @@
 {
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": ".",
+    "ecmaVersion": 2022,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint"],
   "extends": [
-    "next/babel",
-    "next/core-web-vitals"
-  ]
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unsafe-assignment": "warn",
+    "@typescript-eslint/no-unsafe-call": "warn",
+    "@typescript-eslint/no-unsafe-member-access": "warn"
+  },
+  "ignorePatterns": ["node_modules/", ".next/", "out/"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./build/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

package.json

@@ -27,9 +27,14 @@
   "devDependencies": {
     "@near-js/types": "^2.3.1",
     "@types/node": "^22.10.1",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
     "encoding": "^0.1.13",
     "eslint": "^9.16.0",
     "eslint-config-next": "15.0.3",
-    "pino-pretty": "^13.0.0"
+    "pino-pretty": "^13.0.0",
+    "typescript": "^5.9.2"
   }
 }

src/components/cards.js → src/components/cards.tsx

@@ -1,6 +1,5 @@
-import Link from 'next/link';
-
-import styles from '@/styles/app.module.css';
+import Link from "next/link";
+import styles from "@/styles/app.module.css";
 
 export const Cards = () => {
   return (
@@ -17,7 +16,7 @@ export const Cards = () => {
         <p>Learn how this application works, and what you can build on Near.</p>
       </Link>
 
-      <Link href="/hello-near" className={styles.card} rel="noopener noreferrer">
+      <Link href="/hello-near" className={styles.card}>
         <h2>
           Near Integration <span>-&gt;</span>
         </h2>

src/components/navigation.tsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useNear } from "@/hooks/useNear";
+
+import NearLogo from "/public/near-logo.svg";
+
+export const Navigation = () => {
+  const { signedAccountId, loading, signIn, signOut } = useNear();
+
+  // Compute button label and action on render
+  const isLoggedIn = !!signedAccountId;
+  const label = loading
+    ? "Loading..."
+    : isLoggedIn
+    ? `Logout ${signedAccountId}`
+    : "Login";
+
+  const handleClick = () => {
+    if (loading) return;
+    if (isLoggedIn) {
+      signOut();
+    } else {
+      signIn();
+    }
+  };
+
+  return (
+    <nav className="navbar navbar-expand-lg">
+      <div className="container-fluid">
+        <Link href="/" passHref legacyBehavior>
+          <Image
+            priority
+            src={NearLogo}
+            alt="NEAR"
+            width={30}
+            height={24}
+            className="d-inline-block align-text-top"
+          />
+        </Link>
+
+        <div className="navbar-nav pt-1">
+          <button className="btn btn-secondary" onClick={handleClick}>
+            {label}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};

src/hooks/useNear.jsx → src/hooks/useNear.tsx

@@ -2,94 +2,78 @@ import { NearConnector } from "@hot-labs/near-connect";
 import { useEffect, useState } from "react";
 import { JsonRpcProvider } from "@near-js/providers";
 
-let connector;
+let connector: any;
 const provider = new JsonRpcProvider({ url: "https://test.rpc.fastnear.com" });
 
-if ( typeof window !== "undefined" ) {
-  connector = new NearConnector({ network: "testnet" })
+if (typeof window !== "undefined") {
+  connector = new NearConnector({ network: "testnet" });
 }
 
 export function useNear() {
-  const [wallet, setWallet] = useState(undefined);
+  const [wallet, setWallet] = useState<any>();
   const [signedAccountId, setSignedAccountId] = useState("");
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    if (!connector) return;
 
-    async function reload() {
+    const reload = async () => {
       try {
         const { wallet, accounts } = await connector.getConnectedWallet();
         setWallet(wallet);
-        setSignedAccountId(accounts[0].accountId);
+        setSignedAccountId(accounts[0]?.accountId || "");
       } catch {
         setWallet(undefined);
         setSignedAccountId("");
       } finally {
         setLoading(false);
       }
-    }
+    };
 
-    async function onSignOut() {
+    const onSignOut = () => {
       setWallet(undefined);
       setSignedAccountId("");
-    }
+    };
 
-    async function onSignIn(payload) {
-      console.log("Signed in with payload", payload);
+    const onSignIn = async (payload: any) => {
       setWallet(payload.wallet);
       const accountId = await payload.wallet.getAddress();
       setSignedAccountId(accountId);
-    }
+    };
 
     connector.on("wallet:signOut", onSignOut);
     connector.on("wallet:signIn", onSignIn);
 
     reload();
+
     return () => {
       connector.off("wallet:signOut", onSignOut);
       connector.off("wallet:signIn", onSignIn);
     };
-  }, [connector]);
+  }, []);
 
-  async function signIn() {
+  const signIn = async () => {
     const wallet = await connector.connect();
     console.log("Connected wallet", wallet);
-  }
+  };
 
-  async function signOut() {
+  const signOut = async () => {
     await connector.disconnect(wallet);
-    console.log("Disonnected wallet");
-  }
+    console.log("Disconnected wallet");
+  };
 
-  async function viewFunction({ contractId, method, args = {} }) {
+  const viewFunction = async ({ contractId, method, args = {} }: any) => {
     return provider.callFunction(contractId, method, args);
-  }
+  };
 
-  async function callFunction({ contractId, method, args = {}, gas = "30000000000000", deposit = "0" }) {
+  const callFunction = async ({ contractId, method, args = {}, gas = "30000000000000", deposit = "0" }: any) => {
     return wallet.signAndSendTransaction({
       receiverId: contractId,
       actions: [
-        {
-          type: "FunctionCall",
-          params: {
-            methodName: method,
-            args,
-            gas,
-            deposit,
-          },
-        },
+        { type: "FunctionCall", params: { methodName: method, args, gas, deposit } },
       ],
     });
-  }
-
-  return {
-    signedAccountId,
-    wallet,
-    signIn,
-    signOut,
-    loading,
-    viewFunction,
-    callFunction,
-    provider,
   };
-}
+
+  return { signedAccountId, wallet, signIn, signOut, loading, viewFunction, callFunction, provider };
+}

src/pages/_app.js → src/pages/_app.tsx

@@ -1,8 +1,9 @@
+import type { AppProps } from 'next/app';
 import '@/styles/globals.css';
 
 import { Navigation } from '@/components/navigation';
-export default function App({ Component, pageProps }) {
 
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Navigation />