Added progress bar for transactions status (#199)

[video.webm](https://github.com/user-attachments/assets/e11ce68f-b8d4-4640-8973-10cafcde702b)
Resolves #163

instances/treasury-devdao.near/widget/components/TransactionLoader.jsx

@@ -0,0 +1,39 @@
+function TransactionLoader({ showInProgress, showError, toggleToast }) {
+  return showInProgress || showError ? (
+    <div class="toast-container position-fixed bottom-0 end-0 p-3">
+      <div className={`toast ${showInProgress || showError ? "show" : ""}`}>
+        <div class="toast-header px-2">
+          <strong class="me-auto">Just Now</strong>
+          {showError && (
+            <i
+              class="bi bi-x-lg h6 mb-0 cursor-pointer"
+              onClick={() => toggleToast(false)}
+            ></i>
+          )}
+        </div>
+        <div class="toast-body">
+          {showInProgress ? (
+            <div className="d-flex align-items-center gap-3">
+              <img
+                height={30}
+                width={30}
+                src="https://i.gifer.com/origin/34/34338d26023e5515f6cc8969aa027bca.gif"
+              />
+              <div className="flex-1 text-left">
+                Processing your request ...
+              </div>
+            </div>
+          ) : (
+            <div className="d-flex align-items-center gap-3 ">
+              <i class="bi bi-exclamation-triangle h3 mb-0 warning-icon"></i>
+              <div className="flex-1 text-left">
+                Something went wrong. Please try resubmitting the request.
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  ) : null;
+}
+return { TransactionLoader };

instances/treasury-devdao.near/widget/components/VoteActions.jsx

@@ -4,6 +4,9 @@ if (!instance) {
 }
 
 const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
+const { TransactionLoader } = VM.require(
+  `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.TransactionLoader`
+) || { TransactionLoader: () => <></> };
 
 const votes = props.votes ?? {};
 const proposalId = props.proposalId;
@@ -37,6 +40,7 @@ const [isInsufficientBalance, setInsufficientBal] = useState(false);
 const [showWarning, setShowWarning] = useState(false);
 const [isReadyToBeWithdrawn, setIsReadyToBeWithdrawn] = useState(true);
 const [showConfirmModal, setConfirmModal] = useState(null);
+const [showErrorToast, setShowErrorToast] = useState(false);
 
 useEffect(() => {
   if (!avoidCheckForBalance) {
@@ -74,20 +78,36 @@ function getProposalData() {
     (result) => result
   );
 }
-
 useEffect(() => {
   if (isTxnCreated) {
+    let checkTxnTimeout = null;
+    let errorTimeout = null;
+
     const checkForVoteOnProposal = () => {
       getProposalData().then((proposal) => {
         if (JSON.stringify(proposal.votes) !== JSON.stringify(votes)) {
           checkProposalStatus();
+          clearTimeout(errorTimeout);
           setTxnCreated(false);
         } else {
-          setTimeout(() => checkForVoteOnProposal(), 1000);
+          checkTxnTimeout = setTimeout(checkForVoteOnProposal, 1000);
         }
       });
     };
+
     checkForVoteOnProposal();
+
+    // if in 20 seconds there is no change, show error condition
+    errorTimeout = setTimeout(() => {
+      setShowErrorToast(true);
+      setTxnCreated(false);
+      clearTimeout(checkTxnTimeout);
+    }, 20000);
+
+    return () => {
+      clearTimeout(checkTxnTimeout);
+      clearTimeout(errorTimeout);
+    };
   }
 }, [isTxnCreated]);
 
@@ -134,7 +154,10 @@ const InsufficientBalanceWarning = () => {
       <div className={`toast ${showWarning ? "show" : ""}`}>
         <div class="toast-header px-2">
           <strong class="me-auto">Just Now</strong>
-          <i class="bi bi-x-lg h6" onClick={() => setShowWarning(false)}></i>
+          <i
+            class="bi bi-x-lg h6 mb-0 cursor-pointer"
+            onClick={() => setShowWarning(false)}
+          ></i>
         </div>
         <div class="toast-body">
           The request cannot be approved because the treasury balance is
@@ -144,8 +167,15 @@ const InsufficientBalanceWarning = () => {
     </div>
   ) : null;
 };
+
 return (
   <Container>
+    <TransactionLoader
+      showInProgress={isTxnCreated}
+      showError={showErrorToast}
+      toggleToast={() => setShowErrorToast(false)}
+    />
+
     <InsufficientBalanceWarning />
     <Widget
       src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Modal`}

instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx

@@ -285,7 +285,7 @@ function AppLayout({ page, instance, children, treasuryDaoID }) {
     .btn:disabled,
     .btn.disabled,
     fieldset:disabled {
-      border-color: none !important;
+      border-color: transparent !important;
     }
 
     .table {
@@ -371,6 +371,14 @@ function AppLayout({ page, instance, children, treasuryDaoID }) {
     .cursor-pointer {
       cursor: pointer;
     }
+
+    .success-icon {
+      color: var(--other-green) !important;
+    }
+
+    .warning-icon {
+      color: var(--other-warning) !important;
+    }
   `;
 
   return !config ? (

instances/treasury-devdao.near/widget/pages/payments/CreatePaymentRequest.jsx

@@ -2,6 +2,10 @@ const { getLinkUsingCurrentGateway } = VM.require(
   "${REPL_DEVHUB}/widget/core.lib.url"
 ) || { getLinkUsingCurrentGateway: () => {} };
 
+const { TransactionLoader } = VM.require(
+  `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.TransactionLoader`
+) || { TransactionLoader: () => <></> };
+
 const { href } = VM.require("${REPL_DEVHUB}/widget/core.lib.url") || {
   href: () => {},
 };
@@ -45,6 +49,7 @@ const [selectedTokensAvailable, setSelectedTokensAvailable] = useState(null);
 const [isReceiverRegistered, setReceiverRegister] = useState(false);
 const [isLoadingProposals, setLoadingProposals] = useState(false);
 const [showCancelModal, setShowCancelModal] = useState(false);
+const [showErrorToast, setShowErrorToast] = useState(false);
 
 useEffect(() => {
   if (!showProposalSelection) {
@@ -150,19 +155,36 @@ function cleanInputs() {
 // close canvas after proposal is submitted
 useEffect(() => {
   if (isTxnCreated) {
+    let checkTxnTimeout = null;
+    let errorTimeout = null;
+
     const checkForNewProposal = () => {
       getLastProposalId().then((id) => {
         if (lastProposalId !== id) {
           cleanInputs();
           onCloseCanvas();
+          clearTimeout(errorTimeout);
           refreshData();
           setTxnCreated(false);
         } else {
-          setTimeout(() => checkForNewProposal(), 1000);
+          checkTxnTimeout = setTimeout(() => checkForNewProposal(), 1000);
         }
       });
     };
+
     checkForNewProposal();
+
+    // if in 20 seconds there is no change, show error condition
+    errorTimeout = setTimeout(() => {
+      setShowErrorToast(true);
+      setTxnCreated(false);
+      clearTimeout(checkTxnTimeout);
+    }, 20000);
+
+    return () => {
+      clearTimeout(checkTxnTimeout);
+      clearTimeout(errorTimeout);
+    };
   }
 }, [isTxnCreated]);
 
@@ -373,6 +395,11 @@ useEffect(() => {
 
 return (
   <Container>
+    <TransactionLoader
+      showInProgress={isTxnCreated}
+      showError={showErrorToast}
+      toggleToast={() => setShowErrorToast(false)}
+    />
     <Widget
       src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Modal`}
       props={{
@@ -588,7 +615,8 @@ return (
               !selectedProposal?.name ||
               !tokenId ||
               !isAccountValid() ||
-              !isAmountValid(),
+              !isAmountValid() ||
+              isTxnCreated,
             label: "Submit",
             onClick: onSubmitClick,
             loading: isTxnCreated,

instances/treasury-devdao.near/widget/pages/payments/Table.jsx

@@ -173,26 +173,34 @@ const ToastStatusContent = () => {
   }
   return (
     <div className="toast-body">
-      {content}
-      <br />
-      {showToastStatus !== "InProgress" && showToastStatus !== "Removed" && (
-        <a
-          className="text-underline"
-          href={href({
-            widgetSrc: `${instance}/widget/app`,
-            params: {
-              page: "payments",
-              selectedTab: "History",
-              highlightProposalId:
-                typeof highlightProposalId === "number"
-                  ? highlightProposalId
-                  : voteProposalId,
-            },
-          })}
-        >
-          View in History
-        </a>
-      )}
+      <div className="d-flex align-items-center gap-3">
+        {showToastStatus === "Approved" && (
+          <i class="bi bi-check2 h3 mb-0 success-icon"></i>
+        )}
+        <div>
+          {content}
+          <br />
+          {showToastStatus !== "InProgress" &&
+            showToastStatus !== "Removed" && (
+              <a
+                className="text-underline"
+                href={href({
+                  widgetSrc: `${instance}/widget/app`,
+                  params: {
+                    page: "payments",
+                    selectedTab: "History",
+                    highlightProposalId:
+                      typeof highlightProposalId === "number"
+                        ? highlightProposalId
+                        : voteProposalId,
+                  },
+                })}
+              >
+                View in History
+              </a>
+            )}
+        </div>
+      </div>
     </div>
   );
 };
@@ -205,7 +213,10 @@ const VoteSuccessToast = () => {
       <div className={`toast ${showToastStatus ? "show" : ""}`}>
         <div className="toast-header px-2">
           <strong className="me-auto">Just Now</strong>
-          <i className="bi bi-x-lg h6" onClick={() => setToastStatus(null)}></i>
+          <i
+            className="bi bi-x-lg h6 mb-0 cursor-pointer"
+            onClick={() => setToastStatus(null)}
+          ></i>
         </div>
         <ToastStatusContent />
       </div>

instances/treasury-devdao.near/widget/pages/proposals-feed/Table.jsx

@@ -150,26 +150,34 @@ const ToastStatusContent = () => {
   }
   return (
     <div className="toast-body">
-      {content}
-      <br />
-      {showToastStatus !== "InProgress" && (
-        <a
-          className="text-underline"
-          href={href({
-            widgetSrc: `${instance}/widget/app`,
-            params: {
-              page: "proposals-feed",
-              selectedTab: "History",
-              highlightProposalId:
-                typeof highlightProposalId === "number"
-                  ? highlightProposalId
-                  : voteProposalId,
-            },
-          })}
-        >
-          View in History
-        </a>
-      )}
+      <div className="d-flex align-items-center gap-3">
+        {showToastStatus === "Approved" && (
+          <i class="bi bi-check2 h3 mb-0 success-icon"></i>
+        )}
+        <div>
+          {content}
+          <br />
+          {showToastStatus !== "InProgress" &&
+            showToastStatus !== "Removed" && (
+              <a
+                className="text-underline"
+                href={href({
+                  widgetSrc: `${instance}/widget/app`,
+                  params: {
+                    page: "proposals-feed",
+                    selectedTab: "History",
+                    highlightProposalId:
+                      typeof highlightProposalId === "number"
+                        ? highlightProposalId
+                        : voteProposalId,
+                  },
+                })}
+              >
+                View in History
+              </a>
+            )}
+        </div>
+      </div>
     </div>
   );
 };
@@ -182,7 +190,10 @@ const VoteSuccessToast = () => {
       <div className={`toast ${showToastStatus ? "show" : ""}`}>
         <div className="toast-header px-2">
           <strong className="me-auto">Just Now</strong>
-          <i className="bi bi-x-lg h6" onClick={() => setToastStatus(null)}></i>
+          <i
+            className="bi bi-x-lg h6 mb-0 cursor-pointer"
+            onClick={() => setToastStatus(null)}
+          ></i>
         </div>
         <ToastStatusContent />
       </div>