show funds modal issue when buying sale without enough balance (metaplex-foundation#1173)

* Refresh button loads token accounts with dropdown for all metadata

* show funds modal issue when buying sale without enough balance

* fixed refresh button style

* changelog

* small refactor

Co-authored-by: Austin Adams <[email protected]>

Author: yamijuan

CHANGELOG.md

@@ -43,6 +43,7 @@ incremented for features.
 - Implement NFT Packs Redeem
 - Remove Websockets for useMeta
 - Redirect to home and reload on auction creation
+- Refresh metadata loads user metadata with dropdown menu
 
 ### Fixes
 
@@ -69,6 +70,7 @@ incremented for features.
 - Fix NFT Packs creation transaction failing when adding multiple items
 - Fix layout on token selection
 - Fix type of sale and edition number for non master edition NFTs
+- Fix not allowing to buy a sale without enough balance
 - Added placeholder for images on create pack flow
 
 ### Breaking

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

@@ -63,6 +63,7 @@ import { useActionButtonContent } from './hooks/useActionButtonContent';
 import { endSale } from './utils/endSale';
 import { useInstantSaleState } from './hooks/useInstantSaleState';
 import { useTokenList } from '../../contexts/tokenList';
+import { FundsIssueModal } from "../FundsIssueModal";
 
 async function calculateTotalCostOfRedeemingOtherPeoplesBids(
   connection: Connection,
@@ -228,6 +229,7 @@ export const AuctionCard = ({
   const [showPlaceBid, setShowPlaceBid] = useState<boolean>(false);
   const [lastBid, setLastBid] = useState<{ amount: BN } | undefined>(undefined);
   const [purchaseFinished, setPurchaseFinished] = useState<boolean>(false);
+  const [showFundsIssueModal, setShowFundsIssueModal] = useState(false)
 
   const [showWarningModal, setShowWarningModal] = useState<boolean>(false);
   const [printingCost, setPrintingCost] = useState<number>();
@@ -251,6 +253,9 @@ export const AuctionCard = ({
 
   //console.log("[--P]AuctionCard", tokenInfo, mintKey)
   const myPayingAccount = balance.accounts[0];
+  const instantSalePrice = useMemo(() =>
+    auctionView.auctionDataExtended?.info.instantSalePrice
+    , [auctionView.auctionDataExtended]);
   let winnerIndex: number | null = null;
   if (auctionView.myBidderPot?.pubkey)
     winnerIndex = auctionView.auction.info.bidState.getWinnerIndex(
@@ -355,6 +360,12 @@ export const AuctionCard = ({
     setLoading(false);
   };
   const instantSaleAction = () => {
+    const isNotEnoughLamports = balance.balanceLamports < (instantSalePrice?.toNumber()  || 0)
+    if (isNotEnoughLamports) {
+      setShowFundsIssueModal(true);
+      return;
+    }
+
     if (canEndInstantSale) {
       return endInstantSale();
     }
@@ -364,8 +375,6 @@ export const AuctionCard = ({
 
   const instantSale = async () => {
     setLoading(true);
-    const instantSalePrice =
-      auctionView.auctionDataExtended?.info.instantSalePrice;
     const winningConfigType =
       auctionView.participationItem?.winningConfigType ||
       auctionView.items[0][0].winningConfigType;
@@ -777,18 +786,25 @@ export const AuctionCard = ({
             <Spin />
           ) : (
             auctionView.isInstantSale &&
-            !isAlreadyBought &&
-            !purchaseFinished && (
-              <Button
-                type="primary"
-                size="large"
-                className="ant-btn secondary-btn"
-                disabled={loading}
-                onClick={instantSaleAction}
-                style={{ marginTop: 20, width: '100%' }}
-              >
-                {actionButtonContent}
+            !isAlreadyBought && !purchaseFinished && (<>
+                <FundsIssueModal
+                  message={"Price"}
+                  minimumFunds={fromLamports(instantSalePrice?.toNumber(), mintInfo)}
+                  currentFunds={balance.balance}
+                  isModalVisible={showFundsIssueModal}
+                  onClose={() => setShowFundsIssueModal(false)}
+                />
+                <Button
+                  type="primary"
+                  size="large"
+                  className="ant-btn secondary-btn"
+                  disabled={loading}
+                  onClick={instantSaleAction}
+                  style={{ marginTop: 20, width: '100%' }}
+                >
+                  {actionButtonContent}
               </Button>
+              </>
             )
           ))}
         {!hideDefaultAction && !wallet.connected && (

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

@@ -5,12 +5,13 @@ import { useTokenList } from "../../contexts/tokenList";
 import { Button } from "antd";
 
 export const FundsIssueModal = (props: {
+  message: string,
   isModalVisible: boolean,
   minimumFunds: any,
   currentFunds: any,
   onClose: () => void
 }) => {
-  const {currentFunds: balance, minimumFunds} = props
+  const {currentFunds: balance, minimumFunds, message} = props
   const tokenInfo = useTokenList().mainnetTokens.filter(m=>m.address == WRAPPED_SOL_MINT.toBase58())[0]
   return (
       <MetaplexModal
@@ -36,7 +37,7 @@ export const FundsIssueModal = (props: {
         <div className="card-bid-info">
           <AmountLabel
             containerStyle={{ flexDirection: 'row' }}
-            title={"Estimated minimum fee"}
+            title={message}
             displaySymbol={"SOL"}
             amount={minimumFunds}
             iconSize={24}

js/packages/web/src/styles/app.less

@@ -342,6 +342,16 @@ model-viewer {
   cursor: pointer !important;
   width: fit-content;
 
+  .refresh-overlay {
+    border-radius: 8px;
+  }
+  button {
+    &:not(.ant-btn-icon-only) {
+      padding-right: 0;
+    }
+    border: none;
+  }
+
   & > span {
     font-weight: bold;
     font-size: 16px;

js/packages/web/src/views/artworks/index.tsx

@@ -1,13 +1,14 @@
 import { useWallet } from '@solana/wallet-adapter-react';
 import React, { useEffect, useState } from 'react';
-import { Layout, Row, Col, Tabs, Button } from 'antd';
+import { Layout, Row, Col, Tabs, Button, Dropdown, Menu } from 'antd';
 import { useMeta } from '../../contexts';
 import { CardLoader } from '../../components/MyLoader';
 
 import { ArtworkViewState } from './types';
 import { useItems } from './hooks/useItems';
 import ItemCard from './components/ItemCard';
 import { useUserAccounts } from '@oyster/common';
+import { DownOutlined } from "@ant-design/icons";
 import { isMetadata, isPack } from './utils';
 
 const { TabPane } = Tabs;
@@ -51,9 +52,19 @@ export const ArtworksView = () => {
   );
 
   const refreshButton = connected && storeIndexer.length !== 0 && (
-    <Button className="refresh-button" onClick={() => pullAllMetadata()}>
+    <Dropdown.Button
+      className={"refresh-button padding0"}
+      onClick={() => pullItemsPage(userAccounts)}
+      icon={<DownOutlined />}
+      overlayClassName={"refresh-overlay"}
+      overlay={
+        <Menu className={'gray-dropdown'}>
+          <Menu.Item onClick={() => pullAllMetadata()}>Load All Metadata</Menu.Item>
+        </Menu>
+      }
+    >
       Refresh
-    </Button>
+    </Dropdown.Button>
   );
 
   return (

js/packages/web/src/views/auctionCreate/index.tsx

@@ -2014,7 +2014,8 @@ const ReviewStep = (props: {
             : 'Publish Auction'}
         </Button>
         <FundsIssueModal
-          minimumFunds={0.06}
+          message={"Estimated Minimum Fee"}
+          minimumFunds={MINIMUM_SAFE_FEE_AUCTION_CREATION}
           currentFunds={balance}
           isModalVisible={showFundsIssueModal}
           onClose={() => setShowFundsIssueModal(false)}

js/packages/web/src/views/styles.less

@@ -45,6 +45,9 @@
     color: #ffffff;
   }
 }
+.padding0 {
+  padding: 0;
+}
 .modalp-40 {
   .ant-modal-body {
     padding: 40px;
@@ -394,11 +397,11 @@ h2 {
   margin-bottom: 10px;
 }
 
-.black-dropdown {
-  background-color: #121212;
-
-  .ant-dropdown-menu-item:hover {
-    background-color: white;
-    color: black;
+.gray-dropdown {
+  background-color: #2a2a2a;
+  padding: 10px 0px;
+  border-radius: 8px;
+  & > li:hover {
+    background-color: #2a2a2a !important;
   }
 }