Convert auction-tutorial to TypeScript and Migrate to useNear

frontends/01-frontend/next-env.d.ts

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

frontends/01-frontend/package.json

@@ -11,21 +11,27 @@
     "start": "next start",
     "lint": "next lint"
   },
-  "dependencies": {
-    "@near-wallet-selector/core": "^8.9.11",
-    "@near-wallet-selector/here-wallet": "^8.9.11",
-    "@near-wallet-selector/modal-ui": "^8.9.11",
-    "@near-wallet-selector/my-near-wallet": "^8.9.11",
+  "dependencies": {  
+    "@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",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@walletconnect/sign-client": "^2.21.9",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^4.0.3",
-    "next": "14.2.3",
+    "near-api-js": "^6.3.0",
+    "next": "^15",
     "react": "^18",
     "react-dom": "^18",
     "react-toastify": "^10.0.5"
   },
   "devDependencies": {
+    "@types/node": "24.7.2",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "eslint-config-next": "14.2.3",
+    "typescript": "^5.9.3"
   }
 }

frontends/01-frontend/src/components/Bid.jsx → frontends/01-frontend/src/components/Bid.tsx

@@ -1,34 +1,45 @@
-import { useContext, useEffect, useState } from 'react';
-import { NearContext } from '@/context';
+import { useEffect, useState } from 'react';
 import styles from './Bid.module.css';
 import { toast } from 'react-toastify';
+import { useNear } from '@/hooks/useNear';
 
-const Bid = ({pastBids, lastBid, action}) => {
-  const [amount, setAmount] = useState(lastBid + 1);
-  const { signedAccountId } = useContext(NearContext);
-  const nearMultiplier = Math.pow(10, 24)
+interface BidProps {
+  pastBids: [string, number][] | string | null;
+  lastBid: number;
+  action: (amount: number) => Promise<void>;
+}
+
+const Bid = ({ pastBids, lastBid, action }: BidProps) => {
+  const [amount, setAmount] = useState<number>(lastBid + 1);
+  const { signedAccountId } = useNear();
+  const nearMultiplier = Math.pow(10, 24);
 
   const handleBid = async () => {
     if (signedAccountId) {
-      await action(amount);
-    toast("you have made a successful bid");
+      try {
+        await action(amount);
+  console.log('Bid placed successfully');
+        toast.success('You have made a successful bid');
+      } catch (err) {
+        toast.error('Failed to place bid');
+      }
     } else {
-      toast("Please sign in to make a bid");
+      toast.info('Please sign in to make a bid');
     }
-  }
+  };
 
   useEffect(() => {
     setAmount(lastBid + 1);
-  }
-  , [lastBid]);
+  }, [lastBid]);
 
   return (
     <div className={styles.historyContainer}>
       <h3>History</h3>
+
       {typeof pastBids === 'string' ? (
         <p className="error">{pastBids}</p>
       ) : pastBids === null ? (
-        <p>Loading...</p> 
+        <p>Loading...</p>
       ) : pastBids.length === 0 ? (
         <p>No bids have been placed yet</p>
       ) : (
@@ -41,20 +52,21 @@ const Bid = ({pastBids, lastBid, action}) => {
           ))}
         </ul>
       )}
+
       <div className={styles.container}>
         <input
           type="number"
           value={amount}
           min={lastBid}
-          onChange={(e) => setAmount(e.target.value)}
+          onChange={(e) => setAmount(Number(e.target.value))}
           className={styles.inputField}
-        /> 
+        />
         <button className={styles.bidButton} onClick={handleBid}>
           Bid
         </button>
       </div>
     </div>
   );
-}
+};
 
-export default Bid;
+export default Bid;

frontends/01-frontend/src/components/LastBid.tsx

@@ -0,0 +1,23 @@
+import styles from './LastBid.module.css';
+
+interface LastBidProps {
+  lastBid: number;
+  highestBidder: string;
+  lastUpdate: number;
+}
+
+const LastBid = ({ lastBid, highestBidder, lastUpdate }: LastBidProps) => {
+  return (
+    <div className={styles.priceSection}>
+      <div className={styles.detail}>       
+        <span className={styles.currentPrice}>
+          The last bid was {lastBid} $NEAR
+        </span>
+      </div>
+      <span>Made by {highestBidder}</span>
+      <span>Refresh page in {lastUpdate}</span>
+    </div>
+  );
+}
+
+export default LastBid;

frontends/01-frontend/src/components/Navigation.tsx

@@ -0,0 +1,44 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useNear } from "@/hooks/useNear";
+
+import NearLogo from "../../public/near-logo.svg";
+
+export const Navigation = () => {
+  const [action, setAction] = useState<() => void>(() => () => {});
+  const [label, setLabel] = useState<string>("Loading...");
+  const { signedAccountId, signIn, signOut } = useNear();
+
+  useEffect(() => {
+    if (signedAccountId) {
+      setAction(() => signOut);
+      setLabel(`Logout ${signedAccountId}`);
+    } else {
+      setAction(() => signIn);
+      setLabel("Login");
+    }
+  }, [signedAccountId, signIn, signOut]);
+
+  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={action}>
+            {label}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};

frontends/01-frontend/src/components/Skeletons/Skeleton.module.css

@@ -1,3 +1,4 @@
+/* Container for card or skeleton sections */
 .container {
   border: 1px solid #ddd;
   border-radius: 8px;
@@ -6,19 +7,12 @@
   flex-direction: column;
   width: 300px;
   margin-bottom: 2rem;
-}
-
-.imageSection {.container, .historyContainer {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-  margin-bottom: 2rem;
   background-color: #f2f2f2;
+  padding: 1rem;
+  position: relative;
 }
 
+/* Image section */
 .imageSection {
   position: relative;
   padding: 1rem;
@@ -31,6 +25,7 @@
   border-radius: 8px;
 }
 
+/* Description section */
 .description {
   padding: 1rem;
   text-align: center;
@@ -49,6 +44,7 @@
   margin: 0 auto;
 }
 
+/* Price section */
 .priceSection {
   background-color: #f7f7f7;
   padding: 1rem;
@@ -69,9 +65,11 @@
   border-radius: 4px;
 }
 
+/* Timer styling */
 .timer {
   display: flex;
   gap: 1rem;
+  justify-content: space-around;
   margin-bottom: 2rem;
 }
 
@@ -85,14 +83,14 @@
   font-weight: bold;
 }
 
-
 .skeletonTime {
   height: 40px;
   width: 40px;
   background-color: #e0e0e0;
   border-radius: 4px;
 }
 
+/* Bid list items */
 .bidItem {
   display: flex;
   justify-content: space-between;
@@ -103,19 +101,13 @@
 .bidItem:last-child {
   border-bottom: none;
 }
-  position: relative;
-}
 
+/* Image and stats for card */
 .imageSection img {
   width: 100%;
   height: auto;
 }
 
-.description {
-  padding: 1rem;
-  text-align: center;
-}
-
 .stats {
   margin-top: 1rem;
 }
@@ -125,12 +117,7 @@
   color: #555;
 }
 
-.priceSection {
-  background-color: #f7f7f7;
-  padding: 1rem;
-  text-align: center;
-}
-
+/* Current price and bid button */
 .currentPrice {
   font-size: 1.5rem;
   color: #333;
@@ -145,3 +132,9 @@
   cursor: pointer;
   border-radius: 4px;
 }
+
+.bidMessage {
+  font-size: 0.9rem;
+  color: #777;
+  margin-bottom: 0.5rem;
+}

frontends/03-frontend/src/components/Skeletons/SkeletonBid.jsx → frontends/01-frontend/src/components/Skeletons/SkeletonBid.tsx

@@ -4,6 +4,9 @@ const SkeletonBid = () => {
   return (
     <div className={styles.historyContainer}>
       <h3>History</h3>
+      {/* Placeholder message under the title */}
+      <p className={styles.bidMessage}>Please log in to make a bid</p>
+
       <ul>
         {Array.from({ length: 5 }).map((_, index) => (
           <li key={index} className={styles.bidItem}>