convert coin-flip-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,35 +12,26 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-js/providers": "^1.0.1",
-    "@near-wallet-selector/bitte-wallet": "^9.0.2",
-    "@near-wallet-selector/core": "^9.0.2",
-    "@near-wallet-selector/ethereum-wallets": "^9.0.2",
-    "@near-wallet-selector/here-wallet": "^9.0.2",
-    "@near-wallet-selector/hot-wallet": "^9.0.2",
-    "@near-wallet-selector/ledger": "^9.0.2",
-    "@near-wallet-selector/meteor-wallet": "^9.0.2",
-    "@near-wallet-selector/meteor-wallet-app": "^9.0.2",
-    "@near-wallet-selector/modal-ui": "^9.0.2",
-    "@near-wallet-selector/my-near-wallet": "^9.0.2",
-    "@near-wallet-selector/near-mobile-wallet": "^9.0.2",
-    "@near-wallet-selector/nightly": "^9.0.2",
-    "@near-wallet-selector/react-hook": "^9.0.2",
-    "@near-wallet-selector/sender": "^9.0.2",
-    "@near-wallet-selector/welldone-wallet": "^9.0.2",
-    "@reown/appkit": "^1.7.7",
-    "@reown/appkit-adapter-wagmi": "^1.7.7",
-    "@wagmi/core": "^2.17.2",
+    "@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",
-    "next": "14.2.5",
+    "near-api-js": "^6.3.0",
+    "next": "^15",
     "react": "^18",
-    "react-dom": "^18",
-    "viem": "^2.30.5"
+    "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.2"
   }
 }

frontend/src/components/Coin/index.tsx

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import { useEffect, useState, CSSProperties } from "react";
+import Tail from "./tails.png";
+import Head from "./heads.png";
+
+type Side = "heads" | "tails" | "loading";
+
+type CoinProps = {
+  side: Side;
+};
+
+function Coin({ side }: CoinProps) {
+  const [animation, setAnimation] = useState<CSSProperties>({});
+
+  useEffect(() => {
+    switch (side) {
+      case "heads":
+        setAnimation({ animation: "flip-heads 1s linear 0s 1 forwards" });
+        break;
+      case "tails":
+        setAnimation({ animation: "flip-tails 1s linear 0s 1 forwards" });
+        break;
+      case "loading":
+        setAnimation({ animation: "flip 2s linear 0s infinite" });
+        break;
+      default:
+        setAnimation({});
+    }
+  }, [side]);
+
+  return (
+    <div id="coin" style={animation}>
+      <div className="heads">
+        <Image src={Tail} alt="Coin's tail" />
+      </div>
+      <div className="tails">
+        <Image src={Head} alt="Coin's head" />
+      </div>
+    </div>
+  );
+}
+
+export default Coin;

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/config.ts

@@ -0,0 +1,38 @@
+type ContractPerNetwork = {
+  [key: string]: string;
+};
+
+const contractPerNetwork: ContractPerNetwork = {
+  testnet: "coinflip.near-examples.testnet",
+};
+
+export const NetworkId: "testnet" = "testnet";
+export const CoinFlipContract: string = contractPerNetwork[NetworkId];
+
+type EVMChain = {
+  chainId: number;
+  name: string;
+  explorer: string;
+  rpc: string;
+};
+
+type EVMChains = {
+  [key: string]: EVMChain;
+};
+
+const evmWalletChains: EVMChains = {
+  mainnet: {
+    chainId: 397,
+    name: "Near Mainnet",
+    explorer: "https://eth-explorer.near.org",
+    rpc: "https://eth-rpc.mainnet.near.org",
+  },
+  testnet: {
+    chainId: 398,
+    name: "Near Testnet",
+    explorer: "https://eth-explorer-testnet.near.org",
+    rpc: "https://eth-rpc.testnet.near.org",
+  },
+};
+
+export const EVMWalletChain: EVMChain = evmWalletChains[NetworkId];

frontend/src/global.d.ts

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