convert donation-examples 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,41 +12,26 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@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/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",
+    "near-api-js": "^6.3.0",
     "next": "^15",
     "react": "^18",
-    "react-dom": "^18",
-    "viem": "^2.30.5"
-  },
-  "overrides": {
-    "@near-wallet-selector/ethereum-wallets": {
-      "near-api-js": "4.0.3"
-    }
-  },
-  "resolutions": {
-    "near-api-js": "4.0.3"
+    "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.26.0",
-    "eslint-config-next": "15.3.2"
+    "eslint-config-next": "15.3.2",
+    "typescript": "^5.9.3"
   }
 }

frontend/src/components/DonationBox.jsx → frontend/src/components/DonationBox.tsx

@@ -1,9 +1,14 @@
+import React from "react";
 import DonationForm from "./DonationForm";
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
+import { useNear } from '@/hooks/useNear';
 
-const DonationBox = ({ setMyDonation }) => {
-  const { signedAccountId } = useWalletSelector();
 
+interface DonationBoxProps {
+  setMyDonation: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export default function DonationBox({ setMyDonation }: DonationBoxProps) {
+  const { signedAccountId } = useNear();
 
   return (
     <div className="card mt-4">
@@ -23,6 +28,4 @@ const DonationBox = ({ setMyDonation }) => {
       </div>
     </div>
   );
-};
-
-export default DonationBox;
+}

frontend/src/components/DonationForm.jsx → frontend/src/components/DonationForm.tsx

@@ -1,51 +1,54 @@
 import { utils } from "near-api-js";
 import { useState } from "react";
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
-
+import { useNear } from "@/hooks/useNear";
 import { DonationNearContract } from "@/config";
 
-const DonationForm = ({ setMyDonation }) => {
-  const { callFunction } = useWalletSelector();
+interface DonationFormProps {
+  setMyDonation: (amount: number) => void;
+}
 
-  const [amount, setAmount] = useState(0);
+const DonationForm = ({ setMyDonation }: DonationFormProps) => {
+  const { callFunction } = useNear();
+  const [amount, setAmount] = useState<number>(0);
 
-  const setDonation = async (amount) => {
-    let data = await fetch(
-      "https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd",
+  const setDonation = async (usdAmount: number) => {
+    const data = await fetch(
+      "https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd"
     ).then((response) => response.json());
+
     const near2usd = data["near"]["usd"];
-    const amount_in_near = amount / near2usd;
-    const rounded_two_decimals = Math.round(amount_in_near * 100) / 100;
-    setAmount(rounded_two_decimals);
+    const amountInNear = usdAmount / near2usd;
+    const rounded = Math.round(amountInNear * 100) / 100;
+    setAmount(rounded);
   };
 
-  const handleSubmit = async (event) => {
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    let deposit = utils.format.parseNearAmount(amount.toString());
+let deposit = utils.format.parseNearAmount(amount.toString()) || "0";
 
     callFunction({
-        contractId: DonationNearContract,
-        method: "donate",
-        deposit,
-      })
-      .catch(() => {
-        setMyDonation(-Number(amount));
-      });
-
+      contractId: DonationNearContract,
+      method: "donate",
+      deposit,
+    }).catch(() => {
+      setMyDonation(-amount);
+    });
+
     setMyDonation(amount);
   };
 
   return (
     <>
       <div className="row mb-3">
-        {[10, 20, 50, 100].map((amount) => (
-          <div className="col-3" key={amount}>
+        {[10, 20, 50, 100].map((usdAmount) => (
+          <div className="col-3" key={usdAmount}>
             <button
+              type="button"
               className="btn btn-outline-primary btn-block"
-              onClick={() => setDonation(amount)}
+              onClick={() => setDonation(usdAmount)}
             >
-              $ {amount}
+              $ {usdAmount}
             </button>
           </div>
         ))}
@@ -60,9 +63,9 @@ const DonationForm = ({ setMyDonation }) => {
               id="donation"
               value={amount}
               type="number"
-              min="0"
-              step="0.01"
-              onChange={(e) => setAmount(e.target.value)}
+              min={0}
+              step={0.01}
+              onChange={(e) => setAmount(parseFloat(e.target.value))}
               className="form-control"
             />
             <span className="input-group-text">Ⓝ</span>

frontend/src/components/DonationsTable.jsx → frontend/src/components/DonationsTable.tsx

@@ -1,39 +1,45 @@
 import { utils } from "near-api-js";
 import { useEffect, useState } from "react";
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
+import { useNear } from "@/hooks/useNear";
 import { DonationNearContract } from "@/config";
 
+interface Donation {
+  account_id: string;
+  total_amount: string;
+}
 
-const DonationsTable = () => {
-  const { signedAccountId, viewFunction } = useWalletSelector();
-  const [donations, setDonations] = useState([]);
+export default function DonationsTable() {
+  const { signedAccountId, viewFunction } = useNear();
+  const [donations, setDonations] = useState<Donation[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [lastPage, setLastPage] = useState(0);
   const donationsPerPage = 5;
 
-  const getDonations = async (page) => {
-    const number_of_donors = await viewFunction({
+  const getDonations = async (page: number): Promise<Donation[]> => {
+    const number_of_donors = (await viewFunction({
       contractId: DonationNearContract,
       method: "number_of_donors",
-    });
+    })) as number;
 
     setLastPage(Math.ceil(number_of_donors / donationsPerPage));
     const fromIndex = (page - 1) * donationsPerPage;
-    const donations = await viewFunction({
+
+    const donations = (await viewFunction({
       contractId: DonationNearContract,
       method: "get_donations",
       args: {
         from_index: fromIndex.toString(),
         limit: donationsPerPage.toString(),
       },
-    });
+    })) as Donation[];
+
     return donations;
   };
 
   useEffect(() => {
     if (!signedAccountId) return;
     getDonations(currentPage).then((loadedDonations) =>
-      setDonations(loadedDonations),
+      setDonations(loadedDonations)
     );
   }, [signedAccountId, currentPage]);
 
@@ -65,15 +71,19 @@ const DonationsTable = () => {
       </table>
       <div>
         <button
-          className={`btn btn-primary btn-sm ${currentPage === 1 ? "disabled" : ""}`}
+          className={`btn btn-primary btn-sm ${
+            currentPage === 1 ? "disabled" : ""
+          }`}
           onClick={goToPrevPage}
           disabled={currentPage === 1}
         >
           Previous
         </button>
         <span className="mx-2">Page {currentPage}</span>
         <button
-          className={`btn btn-primary btn-sm ${lastPage <= currentPage ? "disabled" : ""}`}
+          className={`btn btn-primary btn-sm ${
+            lastPage <= currentPage ? "disabled" : ""
+          }`}
           onClick={goToNextPage}
           disabled={lastPage <= currentPage}
         >
@@ -82,6 +92,4 @@ const DonationsTable = () => {
       </div>
     </div>
   );
-};
-
-export default DonationsTable;
+}

frontend/src/components/MyDonation.jsx → frontend/src/components/MyDonation.tsx

@@ -1,35 +1,47 @@
-import {useEffect, useState } from "react";
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
+import { useEffect, useState } from "react";
+import { useNear } from "@/hooks/useNear";
 import { DonationNearContract } from "@/config";
 import { utils } from "near-api-js";
 
-const MyDonation = ({ myDonation }) => {
-  const { signedAccountId, viewFunction } = useWalletSelector();
-  const [donation, setDonation] = useState(0);
+interface MyDonationProps {
+  myDonation?: number;
+}
+
+interface DonationResponse {
+  total_amount: string;
+}
+
+const MyDonation = ({ myDonation }: MyDonationProps) => {
+  const { signedAccountId, viewFunction } = useNear();
+  const [donation, setDonation] = useState<number>(0);
 
   useEffect(() => {
     if (!myDonation) return;
-
-    setDonation(
-      Math.round((Number(donation) + Number(myDonation)) * 100) / 100,
+    setDonation((prev) =>
+      Math.round((prev + Number(myDonation)) * 100) / 100
     );
   }, [myDonation]);
 
   useEffect(() => {
     if (!signedAccountId) return;
+
     const getMyDonations = async () => {
       if (signedAccountId.trim() === "") return;
       console.log("Getting donations for account: ", signedAccountId);
-      const loadedDonation = await viewFunction({
+
+      const loadedDonation = (await viewFunction({
         contractId: DonationNearContract,
         method: "get_donation_for_account",
-        args: {
-          account_id: signedAccountId,
-        },
-      });
+        args: { account_id: signedAccountId },
+      })) as DonationResponse;
+
+      const formatted = parseFloat(
+        utils.format.formatNearAmount(loadedDonation.total_amount)
+      );
 
-      setDonation(utils.format.formatNearAmount(loadedDonation.total_amount));
+      setDonation(formatted);
     };
+
     getMyDonations();
   }, [signedAccountId]);