fix: fix button after claim purchase (metaplex-foundation#875)

* fix: fix button after claim purchase * fix: hide button if already bought
stayhungry07212 · Nov 2, 2021 · 16b5b1b · 16b5b1b
1 parent 19e08fa
commit 16b5b1b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/js/packages/web/src/components/AuctionCard/hooks/useInstantSaleState.ts b/js/packages/web/src/components/AuctionCard/hooks/useInstantSaleState.ts
@@ -3,6 +3,7 @@ import { AuctionView } from '../../../hooks';
 
 interface ActionButtonContentProps {
   isInstantSale: boolean;
+  isAlreadyBought: boolean;
   canClaimItem: boolean;
   canClaimPurchasedItem: boolean;
   canEndInstantSale: boolean;
@@ -13,16 +14,25 @@ export const useInstantSaleState = (
 ): ActionButtonContentProps => {
   const wallet = useWallet();
 
-  const { isInstantSale, auctionManager, auction, myBidderPot } = auctionView;
+  const {
+    isInstantSale,
+    auctionManager,
+    auction,
+    myBidderPot,
+    myBidderMetadata,
+  } = auctionView;
 
   const isOwner = auctionManager.authority === wallet?.publicKey?.toBase58();
   const isAuctionEnded = auction.info.endedAt;
-  const canClaimPurchasedItem = !!myBidderPot;
+  const isBidCanceled = !!myBidderMetadata?.info.cancelled;
+  const canClaimPurchasedItem = !!(myBidderPot && !isBidCanceled);
+  const isAlreadyBought = !!(myBidderPot && isBidCanceled);
   const canClaimItem = !!(isOwner && isAuctionEnded);
   const canEndInstantSale = isOwner && !isAuctionEnded;
 
   return {
     isInstantSale,
+    isAlreadyBought,
     canClaimItem,
     canClaimPurchasedItem,
     canEndInstantSale,

diff --git a/js/packages/web/src/components/AuctionCard/index.tsx b/js/packages/web/src/components/AuctionCard/index.tsx
@@ -424,7 +424,8 @@ export const AuctionCard = ({
     (auctionView.vault.info.state === VaultState.Deactivated &&
       isBidderPotEmpty);
 
-  const { canEndInstantSale } = useInstantSaleState(auctionView);
+  const { canEndInstantSale, isAlreadyBought } =
+    useInstantSaleState(auctionView);
 
   const actionButtonContent = useActionButtonContent(auctionView);
 
@@ -639,7 +640,9 @@ export const AuctionCard = ({
                         ? `◎ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                         : ''
                     }
-                    placeholder={ minBid === 0 ? `Place a Bid` : `Bid ${minBid} SOL or more` }
+                    placeholder={
+                      minBid === 0 ? `Place a Bid` : `Bid ${minBid} SOL or more`
+                    }
                   />
                 </div>
                 <div className={'bid-buttons'}>
@@ -714,7 +717,8 @@ export const AuctionCard = ({
           ) : loading ? (
             <Spin />
           ) : (
-            auctionView.isInstantSale && (
+            auctionView.isInstantSale &&
+            !isAlreadyBought && (
               <Button
                 type="primary"
                 size="large"