Creating a Frontend

export const NetworkId = process.env.NEXT_PUBLIC_NETWORK_ID || 'testnet';
export const AUCTION_CONTRACT = process.env.NEXT_PUBLIC_AUCTION_CONTRACT || 'basic-auction-example.testnet';
export const RPC_URL = process.env.NEXT_PUBLIC_RPC_URL ||
  (NetworkId === 'mainnet' ? 'https://free.rpc.fastnear.com' : 'https://test.rpc.fastnear.com');

import { createContext } from 'react';

/**
 * @typedef NearContext
 * @property {import('./wallets/near').Wallet} wallet Current wallet
 * @property {string} signedAccountId The AccountId of the signed user
 */

/** @type {import ('react').Context<NearContext>} */
export const NearContext = createContext({
  wallet: undefined,
  signedAccountId: ''
});

import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useState, useContext } from 'react';

import { NearContext } from '@/context';
import NearLogo from '/public/near-logo.svg';

export const Navigation = () => {
  const { signedAccountId, wallet } = useContext(NearContext);
  const [action, setAction] = useState(() => { });
  const [label, setLabel] = useState('Loading...');

  useEffect(() => {
    if (!wallet) return;

    if (signedAccountId) {
      setAction(() => wallet.signOut);
      setLabel(`Logout ${signedAccountId}`);
    } else {
      setAction(() => wallet.signIn);
      setLabel('Login');
    }
  }, [signedAccountId, wallet]);

  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={action} > {label} </button>
        </div>
      </div>
    </nav>
  );
};

signIn = async () => (await this.getConnector()).connect();
signOut = async () => {
  const connector = await this.getConnector();
  await connector.disconnect(await connector.wallet());
};

useEffect(() => {
  const getInfo = async () => {
    const highestBidData = await wallet.viewMethod({
      contractId: AUCTION_CONTRACT,
      method: "get_highest_bid",
    });
    setHighestBid(formatUnits(highestBidData.bid, 24))
    setHighestBidder(highestBidData.bidder)

viewMethod = ({ contractId, method, args = {} }) =>
  this.provider.callFunction({ contractId, method, args });

{!highestBidder ? <SkeletonBid /> : <LastBid lastBid={highestBid} highestBidder={highestBidder} lastUpdate={secondsRemaining}/>} 

import styles from './LastBid.module.css';

const LastBid = ({lastBid, highestBidder, lastUpdate}) => {
  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

const intervalId = setInterval(() => {
  getInfo().catch((err) => setError(err.message));
  setSecondsRemaining(20);
}, 20000);

const countdownIntervalId = setInterval(() => {
  setSecondsRemaining(prev => (prev === 1 ? 20 : prev - 1));
}, 1000);


return () => {
  clearInterval(intervalId);
  clearInterval(countdownIntervalId);
};

const [time, setTime] = useState(0);
useEffect(() => {
  const update = () => setTime(Math.max(0, Number(BigInt(endTime) / 1_000_000n) - Date.now()));
  update();
  const timer = setInterval(update, 1000);
  return () => clearInterval(timer);
}, [endTime]);

const formatTime = (time) => {
  const allSeconds = Math.floor(time / 1000);
  const days = Math.floor(allSeconds / (3600 * 24));
  const hours = Math.floor((allSeconds % (3600 * 24)) / 3600);
  const minutes = Math.floor((allSeconds % 3600) / 60);
  const seconds = allSeconds % 60;

  return { allSeconds, days, hours, minutes, seconds };
};

const { allSeconds, days, hours, minutes, seconds } = formatTime(time);

const bid = async (amount) => {
  const real_amount = parseUnits(amount, 24)
  let response = await wallet.callMethod({
    contractId: AUCTION_CONTRACT,
    method: "bid",
    deposit: real_amount,
    args: {},
    gas:"300000000000000"
  })
  window.location.reload();
  return response
}

callMethod = async ({ contractId, method, args = {}, gas = '300000000000000', deposit = '0' }) => {
  const selectedWallet = await (await this.getConnector()).wallet();
  const outcome = await selectedWallet.signAndSendTransaction({
    receiverId: contractId,
    actions: [{ type: 'FunctionCall', params: { methodName: method, args, gas: String(gas), deposit: String(deposit) } }],
  });
  if (!outcome) throw new Error('Wallet returned no transaction result');
  if (typeof outcome.status === 'object' && 'Failure' in outcome.status) {
    throw new Error('Transaction failed');
  }
  return getTransactionLastResult(outcome);
};

const claim = async () => {
  let response = await wallet.callMethod({
    contractId: AUCTION_CONTRACT,
    method: "claim",
    gas:"300000000000000"
  })
  window.location.reload();
  return response
}