From 84fe82b3d73e3e337d111d588f574c8cabea676b Mon Sep 17 00:00:00 2001
From: Kristie Huang <kristiehuang01@gmail.com>
Date: Fri, 7 Jan 2022 00:12:38 -0800
Subject: [PATCH] Add spinner & fix toast bug when order is submitting

---
 src/components/bidpage/BidForm.js                     | 4 ++++
 src/components/bidpage/BidPageMain.js                 | 9 +++++++--
 src/components/bidpage/ProjectBidTable.tsx            | 4 ++--
 src/utils/TransactionToasts.ts                        | 2 +-
 src/yobot-sdk/wrappers/ERC721LimitOrder/PlaceOrder.ts | 2 +-
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/bidpage/BidForm.js b/src/components/bidpage/BidForm.js
index e4f8c55..e281530 100644
--- a/src/components/bidpage/BidForm.js
+++ b/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);
     }
   };
diff --git a/src/components/bidpage/BidPageMain.js b/src/components/bidpage/BidPageMain.js
index 03d26bf..689026b 100644
--- a/src/components/bidpage/BidPageMain.js
+++ b/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,11 +165,15 @@ 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),
@@ -176,7 +181,7 @@ const BidPageMain = ({ projectId }) => {
             }}
           />
         </div>
-        <ProjectBidTable props={{ userBids, gettingActions }} />
+        <ProjectBidTable props={{ userBids, gettingActions, submittingBid }} />
       </div>
     </div>
   );
diff --git a/src/components/bidpage/ProjectBidTable.tsx b/src/components/bidpage/ProjectBidTable.tsx
index 9ff9eb9..50d7741 100644
--- a/src/components/bidpage/ProjectBidTable.tsx
+++ b/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"
diff --git a/src/utils/TransactionToasts.ts b/src/utils/TransactionToasts.ts
index 1925350..3bd4aa5 100644
--- a/src/utils/TransactionToasts.ts
+++ b/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",
diff --git a/src/yobot-sdk/wrappers/ERC721LimitOrder/PlaceOrder.ts b/src/yobot-sdk/wrappers/ERC721LimitOrder/PlaceOrder.ts
index 282c984..e288164 100644
--- a/src/yobot-sdk/wrappers/ERC721LimitOrder/PlaceOrder.ts
+++ b/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 **