convert counter-example to ts

frontend/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.

frontend/package.json

@@ -12,34 +12,26 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-js/providers": "^1.0.1",
-    "@near-wallet-selector/bitte-wallet": "^8.10.0",
-    "@near-wallet-selector/core": "^8.10.0",
-    "@near-wallet-selector/ethereum-wallets": "^8.10.0",
-    "@near-wallet-selector/here-wallet": "^8.10.0",
-    "@near-wallet-selector/hot-wallet": "^8.10.0",
-    "@near-wallet-selector/ledger": "^8.10.0",
-    "@near-wallet-selector/meteor-wallet": "^8.10.0",
-    "@near-wallet-selector/meteor-wallet-app": "^8.10.0",
-    "@near-wallet-selector/modal-ui": "^8.10.0",
-    "@near-wallet-selector/my-near-wallet": "^8.10.0",
-    "@near-wallet-selector/near-mobile-wallet": "^8.10.0",
-    "@near-wallet-selector/nightly": "^8.10.0",
-    "@near-wallet-selector/react-hook": "^8.9.15",
-    "@near-wallet-selector/sender": "^8.10.0",
-    "@near-wallet-selector/welldone-wallet": "^8.10.0",
-    "@reown/appkit": "^1.6.9",
-    "@reown/appkit-adapter-wagmi": "^1.6.9",
+    "@hot-labs/near-connect": "^0.6.2",
+    "@near-js/crypto": "^2.3.1",
+    "@near-js/providers": "^2.3.1",
+    "@near-js/transactions": "^2.3.1",
+    "@near-js/utils": "^2.3.1",
+    "@walletconnect/sign-client": "^2.21.9",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^5.0.1",
-    "next": "15.2.1",
+    "near-api-js": "^6.3.0",
+    "next": "^15",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/node": "24.7.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "encoding": "^0.1.13",
     "eslint": "^9.16.0",
-    "eslint-config-next": "15.0.3"
+    "eslint-config-next": "15.0.3",
+    "typescript": "5.9.3"
   }
 }

frontend/src/components/Navigation.tsx

@@ -0,0 +1,44 @@
+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();
+
+  const handleAction = () => {
+    if (signedAccountId) {
+      signOut();
+    } else {
+      signIn();
+    }
+  };
+
+  const label = loading
+    ? "Loading..."
+    : signedAccountId
+    ? `Logout ${signedAccountId}`
+    : "Login";
+
+  return (
+    <nav className="navbar navbar-expand-lg">
+      <div className="container-fluid">
+        <Link href="/">
+          <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={handleAction}>
+            {label}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};

frontend/src/global.d.ts

@@ -0,0 +1,6 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+
+}
+declare module "*.module.css";

frontend/src/hooks/useNear.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+import { JsonRpcProvider } from "@near-js/providers";
+import type { NearConnector, NearWalletBase } from "@hot-labs/near-connect";
+
+interface ViewFunctionParams {
+  contractId: string;
+  method: string;
+  args?: Record<string, unknown>;
+}
+
+interface FunctionCallParams {
+  contractId: string;
+  method: string;
+  args?: Record<string, unknown>;
+  gas?: string;
+  deposit?: string;
+}
+
+let connector: NearConnector | undefined;
+const provider = new JsonRpcProvider({ url: "https://test.rpc.fastnear.com" });
+
+export function useNear() {
+  const [wallet, setWallet] = useState<NearWalletBase | undefined>(undefined);
+  const [signedAccountId, setSignedAccountId] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    async function initializeConnector() {
+      if (!connector) {
+        const { NearConnector } = await import("@hot-labs/near-connect");
+        connector = new NearConnector({ network: "testnet" });
+      }
+
+      async function reload() {
+        try {
+          const { wallet, accounts } = await connector!.getConnectedWallet();
+          setWallet(wallet);
+          setSignedAccountId(accounts[0].accountId);
+        } catch {
+          setWallet(undefined);
+          setSignedAccountId("");
+        } finally {
+          setLoading(false);
+        }
+      }
+
+      async function onSignOut() {
+        setWallet(undefined);
+        setSignedAccountId("");
+      }
+
+      async function onSignIn(payload: { wallet: NearWalletBase }) {
+        console.log("Signed in with payload", payload);
+        setWallet(payload.wallet);
+        const accounts = await payload.wallet.getAccounts();
+        setSignedAccountId(accounts[0]?.accountId || "");
+      }
+
+      connector.on("wallet:signOut", onSignOut);
+      connector.on("wallet:signIn", onSignIn);
+
+      await reload();
+
+      return () => {
+        if (!connector) return;
+        connector.off("wallet:signOut", onSignOut);
+        connector.off("wallet:signIn", onSignIn);
+      };
+    }
+
+    initializeConnector();
+  }, []);
+
+  async function signIn() {
+    if (!connector) return;
+    const wallet = await connector.connect();
+    console.log("Connected wallet", wallet);
+  }
+
+  async function signOut() {
+    if (!connector || !wallet) return;
+    await connector.disconnect(wallet);
+    console.log("Disonnected wallet");
+  }
+
+  async function viewFunction({ contractId, method, args = {} }: ViewFunctionParams) {
+    const response = await provider.query({
+      request_type: "call_function",
+      account_id: contractId,
+      method_name: method,
+      args_base64: Buffer.from(JSON.stringify(args)).toString("base64"),
+      finality: "final",
+    });
+    // @ts-ignore - response type from provider
+    return JSON.parse(Buffer.from(response.result).toString());
+  }
+
+ async function callFunction({ contractId, method, args = {}, gas = "30000000000000", deposit = "0" }: FunctionCallParams) {
+    if (!wallet) throw new Error("Wallet not connected");
+
+    return wallet.signAndSendTransaction({
+      receiverId: contractId,
+      actions: [
+        {
+          type: "FunctionCall",
+          params: {
+            methodName: method,
+            args,
+            gas,
+            deposit,
+          },
+        },
+      ],
+    });
+  }
+
+  return {
+    signedAccountId,
+    wallet,
+    signIn,
+    signOut,
+    loading,
+    viewFunction,
+    callFunction,
+    provider,
+  };
+}

frontend/src/pages/_app.tsx

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