Merge pull request #67 from metaplex-foundation/feature/starting_bid

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 && (

js/packages/web/src/contexts/meta.tsx

@@ -135,8 +135,6 @@ const MetaContext = React.createContext<MetaContextState>({
 
 export function MetaProvider({ children = null as any }) {
   const connection = useConnection();
-  const { wallet } = useWallet();
-  const walletPublicKey = wallet?.publicKey?.toBase58() || '';
   const { env } = useConnectionConfig();
 
   const [state, setState] = useState<MetaState>({
@@ -232,7 +230,6 @@ export function MetaProvider({ children = null as any }) {
         await processMetaplexAccounts(
           account,
           updateTemp,
-          walletPublicKey,
         );
       }
 
@@ -267,7 +264,6 @@ export function MetaProvider({ children = null as any }) {
     setState,
     updateMints,
     env,
-    walletPublicKey,
   ]);
 
   const updateStateValue = useMemo(() => (prop: keyof MetaState, key: string, value: any) => {
@@ -326,7 +322,6 @@ export function MetaProvider({ children = null as any }) {
             account: info.accountInfo,
           },
           updateStateValue,
-          walletPublicKey,
         );
       },
     );
@@ -388,7 +383,6 @@ export function MetaProvider({ children = null as any }) {
     updateMints,
     store,
     whitelistedCreatorsByCreator,
-    walletPublicKey,
     isLoading,
   ]);
 
@@ -569,7 +563,6 @@ const processAuctions = (
 const processMetaplexAccounts = async (
   a: PublicKeyAndAccount<Buffer>,
   setter: UpdateStateValueFunc,
-  walletPublicKey: string,
 ) => {
   if (a.account.owner.toBase58() !== programIds().metaplex.toBase58()) return;
 
@@ -586,8 +579,7 @@ const processMetaplexAccounts = async (
         // Could have any kind of pictures in it.
         if (
           auctionManager.state.status !== AuctionManagerStatus.Initialized ||
-          (auctionManager.state.status === AuctionManagerStatus.Initialized &&
-            auctionManager.authority.toBase58() === walletPublicKey)
+          auctionManager.state.status === AuctionManagerStatus.Initialized)
         ) {
           const account: ParsedAccount<AuctionManager> = {
             pubkey: a.pubkey,