Add spinner & fix toast bug when order is submitting

src/components/bidpage/BidForm.js

@@ -163,15 +163,18 @@ const BidForm = ({ props }) => {
           onTxSubmitted(msg);
           // resetFormInputs();
           setPlacingBid(false);
+          props.onBidSubmitted(true);
         },
         async (msg) => {
           onTxFailed(msg);
+          props.onBidSubmitted(false);
         },
         async (msg) => {
           onTxConfirmed(msg);
 
           // FIXME: we want to repull ALL events across all of Yobot every time a tx is confirmed?
           refreshEvents();
+          props.onBidSubmitted(false);
         },
         async (msg) => {
           userRejectedCallback();
@@ -181,6 +184,7 @@ const BidForm = ({ props }) => {
     } catch (e) {
       onTxFailed();
       setPlacingBid(false);
+      props.onBidSubmitted(false);
       console.error("Placing bid returned:", e);
     }
   };

src/components/bidpage/BidPageMain.js

@@ -17,6 +17,7 @@ const BidPageMain = ({ projectId }) => {
   const [totalBids, setTotalBids] = useState("-");
   const [highestBidInWei, setHighestBidInWei] = useState("-");
   const [gettingActions, setGettingActions] = useState(true);
+  const [submittingBid, setSubmittingBid] = useState(false);
   const [alreadyPlacedBid, setAlreadyPlacedBid] = useState(false);
 
   const fetchUserOrdersAndTotalStats = async () => {
@@ -164,19 +165,23 @@ const BidPageMain = ({ projectId }) => {
     return projectDetails;
   }
 
+  const onBidSubmitted = (submitting) => {
+    setSubmittingBid(submitting);
+  };
+
   return (
     <div>
       <div className="max-w-screen-lg m-auto mt-2 mt-12 text-gray-300 bg-black xl:max-w-7xl App font-Roboto sm:">
         <div className="pb-6 mx-auto sm:pb-0 flex border border-gray-700 rounded-xl  flex-col-reverse max-w-screen-xl m-auto  bg-gray-800 sm:flex-row sm:mb-4">
-          <BidForm props={{ alreadyPlacedBid }} />
+          <BidForm props={{ alreadyPlacedBid, onBidSubmitted }} />
           <ProjectDetails
             props={{
               project: getProjectDetailsFromId(projectId),
               gettingActions: gettingActions,
             }}
           />
         </div>
-        <ProjectBidTable props={{ userBids, gettingActions }} />
+        <ProjectBidTable props={{ userBids, gettingActions, submittingBid }} />
       </div>
     </div>
   );

src/components/bidpage/ProjectBidTable.tsx

@@ -61,7 +61,7 @@ const ProjectBidTable = ({ props }) => {
         setCancellingOrder(false);
       }, // txFailCallback
       async (msg) => {
-        // txFailCallback
+        // txConfirmedCallback
 
         // FIXME: we want to repull ALL events across all of Yobot every time a tx is confirmed?
         onTxConfirmed(msg);
@@ -142,7 +142,7 @@ const ProjectBidTable = ({ props }) => {
           </thead>
 
           <tbody>
-            {props.gettingActions ? (
+            {isAuthed && (props.gettingActions || props.submittingBid) ? (
               <tr className="p-4">
                 <Spinner
                   padding="1em"

src/utils/TransactionToasts.ts

@@ -37,7 +37,7 @@ const userRejectedCallback = async (msg = "❌ Transaction Rejected ❌") => {
 };
 
 // ** Callback for Transaction Confirmation **
-const onTxConfirmed = async (msg = `💰 Minting Successfull💰`) => {
+const onTxConfirmed = async (msg = "⚔️ Placed Order ⚔️") => {
   // ** Then, let's toast **
   toast.success(msg, {
     position: "bottom-center",

src/yobot-sdk/wrappers/ERC721LimitOrder/PlaceOrder.ts

@@ -74,7 +74,7 @@ const placeOrder = async (
       }
     )
     .on("receipt", () => {
-      txConfirmedCallback("⚔️ Placed Order ⚔️");
+      txConfirmedCallback();
     });
 
   // ** Just return the txn object **