feat: display starting bid

js/packages/web/src/components/AuctionRenderCard/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Card, CardProps } from 'antd';
-import { formatTokenAmount, CountdownState } from '@oyster/common';
+import { formatTokenAmount, CountdownState, PriceFloorType, fromLamports, useMint } from '@oyster/common';
 import { ArtContent } from '../ArtContent';
 import './index.less';
-import { AuctionView, useArt, useCreators } from '../../hooks';
+import { AuctionView, AuctionViewState, useArt, useBidsForAuction } from '../../hooks';
 import { AmountLabel } from '../AmountLabel';
 import { useHighestBidForAuction } from '../../hooks';
 
@@ -17,13 +17,45 @@ export const AuctionRenderCard = (props: AuctionCard) => {
   const art = useArt(auctionView.thumbnail.metadata.pubkey);
   const category = art?.category;
   const image = art?.image;
-  const creators = useCreators(auctionView);
   const name = art?.title || ' ';
   const [state, setState] = useState<CountdownState>();
+  const bids = useBidsForAuction(auctionView.auction.pubkey);
+  const mintInfo = useMint(auctionView.auction.info.tokenMint);
+
+  const participationFixedPrice =
+    auctionView.auctionManager.info.settings.participationConfig?.fixedPrice ||
+    0;
+  const participationOnly =
+    auctionView.auctionManager.info.settings.winningConfigs.length == 0;
+  const priceFloor =
+    auctionView.auction.info.priceFloor.type == PriceFloorType.Minimum
+      ? auctionView.auction.info.priceFloor.minPrice?.toNumber() || 0
+      : 0;
+  const isUpcoming = auctionView.state === AuctionViewState.Upcoming;
+  const isStarted = auctionView.state === AuctionViewState.Live;
 
   const winningBid = useHighestBidForAuction(auctionView.auction.pubkey);
   const ended =
     state?.hours === 0 && state?.minutes === 0 && state?.seconds === 0;
+
+  let currentBid: number | string = 0;
+  let label = '';
+  if(isUpcoming || bids) {
+    label = 'Starting bid';
+    currentBid = fromLamports(
+      participationOnly ? participationFixedPrice : priceFloor,
+      mintInfo,
+    )
+  }
+
+  if (isStarted && bids.length > 0) {
+    label = ended ? 'Winning bid' : 'Current bid';
+    currentBid = winningBid &&
+      Number.isFinite(winningBid.info.lastBid?.toNumber())
+        ? formatTokenAmount(winningBid.info.lastBid)
+        : 'No Bid'
+  }
+
   const auction = auctionView.auction.info;
   useEffect(() => {
     const calc = () => {
@@ -60,19 +92,14 @@ export const AuctionRenderCard = (props: AuctionCard) => {
         description={
           <>
             <h4 style={{ marginBottom: 0 }}>
-              {ended ? 'Winning bid' : 'Current bid'}
+              {label}
             </h4>
             <div className="bids">
               <AmountLabel
                 style={{ marginBottom: 10 }}
                 containerStyle={{ flexDirection: 'row' }}
-                title={ended ? 'Winning bid' : 'Highest bid'}
-                amount={
-                  winningBid &&
-                  Number.isFinite(winningBid.info.lastBid?.toNumber())
-                    ? formatTokenAmount(winningBid.info.lastBid)
-                    : 'No Bid'
-                }
+                title={label}
+                amount={currentBid}
               />
             </div>
             {/* {endAuctionAt && hasTimer && (