Merge pull request #13 from PiVortex/main

Add indexer

.gitignore

@@ -13,5 +13,6 @@
 **/dist/
 **/.parcel-cache
 **/.next
+**/.env.local 
 
 **/.DS_Store

frontend/src/components/Bid.jsx

@@ -3,7 +3,7 @@ import { NearContext } from '@/context';
 import styles from './Bid.module.css';
 import { toast } from 'react-toastify';
 
-const Bid = ({ bids, ftName, ftImg, lastBidDisplay, action}) => {
+const Bid = ({ pastBids, ftName, ftImg, lastBidDisplay, ftDecimals, action}) => {
   const [amount, setAmount] = useState(lastBidDisplay + 1);
   const { signedAccountId } = useContext(NearContext);
 
@@ -24,15 +24,22 @@ const Bid = ({ bids, ftName, ftImg, lastBidDisplay, action}) => {
   return (
     <div className={styles.historyContainer}>
       <h3>History</h3>
-      <ul>
-        {bids?.map((bid, index) => (
-          <li key={index} className={styles.bidItem}>
-            <span>{bid.amount}</span>
-            <span>{bid.time}</span>
-            <span>{bid.account}</span>
-          </li>
-        ))}
-      </ul>
+      {typeof pastBids === 'string' ? (
+        <p className="error">{pastBids}</p>
+      ) : pastBids === null ? (
+        <p>Loading...</p> 
+      ) : pastBids.length === 0 ? (
+        <p>No bids have been placed yet</p>
+      ) : (
+        <ul>
+          {pastBids?.map((bid, index) => (
+            <li key={index} className={styles.bidItem}>
+              <span>{bid[1] / Math.pow(10, ftDecimals)} {ftName}</span>
+              <span>{bid[0]}</span>
+            </li>
+          ))}
+        </ul>
+      )}
       <div className={styles.container}>
         <input
           type="number"
@@ -42,10 +49,9 @@ const Bid = ({ bids, ftName, ftImg, lastBidDisplay, action}) => {
           className={styles.inputField}
         />
         <button className={styles.bidButton} onClick={handleBid}>
-        <img className={styles.iconFT} src={ftImg} alt={ftName} width="25" /> Bid
+          <img className={styles.iconFT} src={ftImg} alt={ftName} width="25" /> Bid
         </button>
       </div>
-
     </div>
   );
 }

frontend/src/components/Skeletons/SkeletonBid.jsx

@@ -9,7 +9,6 @@ const SkeletonBid = () => {
           <li key={index} className={styles.bidItem}>
             <div className={styles.skeletonText}></div>
             <div className={styles.skeletonText}></div>
-            <div className={styles.skeletonText}></div>
           </li>
         ))}
       </ul>

frontend/src/config.js

@@ -1 +1 @@
-export const AuctionContract = "auction-example.testnet";
+export const AUCTION_CONTRACT = "auction-example.testnet"; // Replace with your contract name

frontend/src/pages/api/getBidHistory.js

@@ -0,0 +1,44 @@
+export default async function handler(req, res) {
+    try {
+      if (!process.env.API_KEY) {
+        return res.status(500).json({ error: "API key not provided" });
+      }
+      // Get all bid transactions
+      const { contractId, ftId } = req.query;
+      const bidsRes = await fetch(`https://api-testnet.nearblocks.io/v1/account/${contractId}/txns?from=${ftId}&method=ft_on_transfer&page=1&per_page=25&order=desc`, {
+        headers: {
+          'Accept': '*/*',
+          'Authorization': `Bearer ${process.env.API_KEY}` // Use your API key here
+        }
+      });
+
+      const bidsJson = await bidsRes.json();
+
+      const txns = bidsJson.txns;
+      let pastBids = [];
+
+      // Loop through all bids and add valid bids to the pastBids array until 5 are found 
+      for (let i = 0; i < txns.length; i++) {
+        const txn = txns[i];
+
+        if (txn.receipt_outcome.status) {
+          let args = txn.actions[0].args;
+          let parsedArgs = JSON.parse(args);
+          let amount = Number(parsedArgs.amount);
+          let account = parsedArgs.sender_id;
+
+          if (pastBids.length < 5) {
+            pastBids.push([account, amount]);
+          } else {
+            break;
+          }
+        }
+      }
+
+      // Respond with the past bids
+      return res.status(200).json({ pastBids });
+    } catch (error) {
+      return res.status(500).json({ error: "Failed to fetch past bids" });
+    }
+  }
+

frontend/src/pages/index.js

@@ -2,46 +2,49 @@ import styles from '@/styles/app.module.css';
 import AuctionItem from '@/components/AuctionItem';
 import Timer from '@/components/Timer';
 import Bid from '@/components/Bid';
-import { getInfo as getInfoHistory } from '@/services/history.service.mock';
 import { useContext, useEffect, useState } from 'react';
 import SkeletonAuctionItem from '@/components/Skeletons/SkeletonAuctionItem';
 import SkeletonTimer from '@/components/Skeletons/SkeletonTimer';
 import SkeletonBid from '@/components/Skeletons/SkeletonBid';
 import { NearContext } from '@/context';
-import { AuctionContract } from '@/config';
+import { AUCTION_CONTRACT } from '@/config';
 import LastBid from '@/components/LastBid';
 
-
 export default function Home() {
   const [auctionInfo, setAuctionInfo] = useState(null)
   const [nftInfo, setNftInfo] = useState(null)
-  const [history, setHistory] = useState(null)
-  const [secondsRemaining, setSecondsRemaining] = useState(5)
+  const [secondsRemaining, setSecondsRemaining] = useState(20)
+  const [ftContract, setFtContract] = useState("")
   const [ftName, setFtName] = useState("")
   const [ftImg, setFtImg] = useState("")
   const [ftDecimals, setFtDecimals] = useState(0)
   const [lastBidDisplay, setLastBidDisplay] = useState(0)
   const [validAuction, setValidAuction] = useState("Invalid Auction")
+  const [pastBids, setPastBids] = useState(null)
 
   const { wallet } = useContext(NearContext);
 
   useEffect(() => {
     const getInfo = async () => {
       const data = await wallet.viewMethod({
-        contractId: AuctionContract,
+        contractId: AUCTION_CONTRACT,
         method: "get_auction_info",
       });
       setAuctionInfo(data)
     }
     getInfo();
 
+    if (ftContract) {
+      fetchPastBids();
+    }
+
     const intervalId = setInterval(() => {
       getInfo();
-      setSecondsRemaining(5);
-    }, 5000);
+      setSecondsRemaining(20);
+    }, 20000);
 
     const countdownIntervalId = setInterval(() => {
-      setSecondsRemaining(prev => (prev === 1 ? 5 : prev - 1));
+      setSecondsRemaining(prev => (prev === 1 ? 20 : prev - 1));
     }, 1000);
 
 
@@ -59,7 +62,7 @@ export default function Home() {
         args: { token_id: auctionInfo.token_id }
       });
       setNftInfo(data)
-      if (data.owner_id == AuctionContract) {
+      if (data.owner_id == AUCTION_CONTRACT) {
         setValidAuction("Valid Auction")
       }
     }
@@ -75,48 +78,51 @@ export default function Home() {
         contractId: auctionInfo.ft_contract,
         method: "ft_metadata",
       });
+      setFtContract(auctionInfo.ft_contract)
       setFtName(ftInfo.symbol)
       setFtImg(ftInfo.icon)
       setFtDecimals(ftInfo.decimals)
       let bidAmount = auctionInfo.highest_bid.bid / Math.pow(10, ftInfo.decimals)
       setLastBidDisplay(bidAmount)
+
+      fetchPastBids();
     }
     if (auctionInfo) {
       getFtInfo();
     }
   }, [auctionInfo]);
 
-  useEffect(() => {
-    const getHistoryInfo = async () => {
-      const data = await getInfoHistory();
-      setHistory(data)
-    }
-
-    getHistoryInfo();
-
-  }, [])
-
   const bid = async (amount) => {
     let real_amount = amount * Math.pow(10, ftDecimals)
     let response = await wallet.callMethod({
       contractId: auctionInfo.ft_contract,
       method: "ft_transfer_call",
       deposit: 1,
-      args: { "receiver_id": AuctionContract, "amount": String(real_amount), "msg": "" },
+      args: { "receiver_id": AUCTION_CONTRACT, "amount": String(real_amount), "msg": "" },
       gas:"300000000000000"
     })
     return response
   }
 
   const claim = async () => {
     let response = await wallet.callMethod({
-      contractId: AuctionContract,
+      contractId: AUCTION_CONTRACT,
       method: "claim",
       gas:"300000000000000"
     })
     return response
   }
 
+  const fetchPastBids = async () => {
+      const response = await fetch(`/api/getBidHistory?contractId=${AUCTION_CONTRACT}&ftId=${ftContract}`);
+      const data = await response.json();
+      if (data.error) {
+        setPastBids(data.error);
+      } else {
+        setPastBids(data.pastBids);
+      }
+  }
+
   return (
     <main className={styles.main}>
       <div className={styles.leftPanel}>
@@ -125,7 +131,7 @@ export default function Home() {
       </div>
       <div className={styles.rightPanel}>
         {!auctionInfo ? <SkeletonTimer /> : <Timer endTime={auctionInfo.auction_end_time} claimed={auctionInfo?.claimed} action={claim}/>}
-        {!auctionInfo ? <SkeletonBid /> : <Bid bids={history} ftName={ftName} ftImg={ftImg} lastBidDisplay={lastBidDisplay} action={bid}/>}
+        {!auctionInfo ? <SkeletonBid /> : <Bid pastBids={pastBids} ftName={ftName} ftImg={ftImg} lastBidDisplay={lastBidDisplay} ftDecimals={ftDecimals} action={bid}/>}
       </div>
     </main>
 

frontend/src/wallets/near.js

@@ -126,7 +126,7 @@ export class Wallet {
   };
 
   /**
-   * Makes a call to a contract
+   * Retrieves transaction result from the network
    * @param {string} txhash - the transaction hash
    * @returns {Promise<JSON.value>} - the result of the transaction
    */