Added pending/history page for settings

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

@@ -134,7 +134,7 @@ return (
             <Widget
               src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
               props={{
-                classNames: { root: "btn-outline-secondary" },
+                classNames: { root: "btn-outline shadow-none border-0" },
                 label: cancelLabel ?? "Cancel",
                 onClick: onCancelClick,
               }}

instances/treasury-devdao.near/widget/config/data.jsx

@@ -27,8 +27,6 @@ return {
   showProposalSelection: true,
   showKYC: true,
   showReferenceProposal: true,
-  showThresholdConfiguration: false,
-  showVotingDurationConfiguration: false,
   logo: (
     <svg
       width="48"

instances/treasury-devdao.near/widget/lib/common.jsx

@@ -450,6 +450,46 @@ function getNearBalances(treasuryDaoID) {
 // https://github.com/near/core-contracts/blob/master/lockup/src/lib.rs#L33
 const LOCKUP_MIN_BALANCE_FOR_STORAGE = Big(3.5).mul(Big(10).pow(24)).toFixed();
 
+function formatSubmissionTimeStamp(submissionTime, proposalPeriod) {
+  const endTime = Big(submissionTime).plus(proposalPeriod).toFixed();
+  const milliseconds = Number(endTime) / 1000000;
+  const date = new Date(milliseconds);
+
+  // Calculate days and minutes remaining from the timestamp
+  const now = new Date();
+  let diffTime = date - now;
+
+  // Check if the difference is negative
+  const isNegative = diffTime < 0;
+
+  // Convert the total difference into days, hours, and minutes
+  const totalMinutes = Math.floor(diffTime / (1000 * 60));
+  const totalHours = Math.floor(totalMinutes / 60);
+  const remainingMinutes = totalMinutes % 60;
+
+  const totalDays = Math.floor(totalHours / 24);
+  const remainingHours = totalHours % 24;
+
+  // Get hours, minutes, day, month, and year
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  const month = date.toLocaleString("default", { month: "short" });
+  const year = date.getFullYear();
+  return (
+    <div className="d-flex flex-column">
+      <div className="fw-bold">
+        {isNegative
+          ? "Expired"
+          : `${totalDays}d ${remainingHours}h ${remainingMinutes}m`}
+      </div>
+      <div className="text-muted text-sm">
+        {hours}:{minutes} {day} {month} {year}
+      </div>
+    </div>
+  );
+}
+
 return {
   getApproversAndThreshold,
   hasPermission,
@@ -465,4 +505,5 @@ return {
   encodeToMarkdown,
   decodeProposalDescription,
   LOCKUP_MIN_BALANCE_FOR_STORAGE,
+  formatSubmissionTimeStamp,
 };

instances/treasury-devdao.near/widget/pages/dashboard/index.jsx

@@ -50,7 +50,7 @@ const Wrapper = styled.div`
   }
 
   .flex-container {
-    min-width: 300px;
+    min-width: 325px;
     height: fit-content;
   }
 

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

@@ -1,9 +1,11 @@
 const { href } = VM.require("${REPL_DEVHUB}/widget/core.lib.url") || {
   href: () => {},
 };
-const { getNearBalances, decodeProposalDescription } = VM.require(
-  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common"
-);
+const {
+  getNearBalances,
+  decodeProposalDescription,
+  formatSubmissionTimeStamp,
+} = VM.require("${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common");
 
 const instance = props.instance;
 const policy = props.policy;
@@ -18,7 +20,8 @@ const { treasuryDaoID, showKYC, showReferenceProposal } = VM.require(
 if (
   !instance ||
   typeof getNearBalances !== "function" ||
-  typeof decodeProposalDescription !== "function"
+  typeof decodeProposalDescription !== "function" ||
+  typeof formatSubmissionTimeStamp !== "function"
 ) {
   return <></>;
 }
@@ -279,46 +282,6 @@ const VoteSuccessToast = () => {
 
 const proposalPeriod = policy.proposal_period;
 
-function formatSubmissionTimeStamp(submissionTime) {
-  const endTime = Big(submissionTime).plus(proposalPeriod).toFixed();
-  const milliseconds = Number(endTime) / 1000000;
-  const date = new Date(milliseconds);
-
-  // Calculate days and minutes remaining from the timestamp
-  const now = new Date();
-  let diffTime = date - now;
-
-  // Check if the difference is negative
-  const isNegative = diffTime < 0;
-
-  // Convert the total difference into days, hours, and minutes
-  const totalMinutes = Math.floor(diffTime / (1000 * 60));
-  const totalHours = Math.floor(totalMinutes / 60);
-  const remainingMinutes = totalMinutes % 60;
-
-  const totalDays = Math.floor(totalHours / 24);
-  const remainingHours = totalHours % 24;
-
-  // Get hours, minutes, day, month, and year
-  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0");
-  const day = date.getDate().toString().padStart(2, "0");
-  const month = date.toLocaleString("default", { month: "short" });
-  const year = date.getFullYear();
-  return (
-    <div className="d-flex flex-column">
-      <div className="fw-bold">
-        {isNegative
-          ? "Expired"
-          : `${totalDays}d ${remainingHours}h ${remainingMinutes}m`}
-      </div>
-      <div className="text-muted text-sm">
-        {hours}:{minutes} {day} {month} {year}
-      </div>
-    </div>
-  );
-}
-
 const ProposalsComponent = () => {
   return (
     <tbody style={{ overflowX: "auto" }}>
@@ -512,7 +475,10 @@ const ProposalsComponent = () => {
                 className={isVisible("Expiring Date") + " text-left"}
                 style={{ minWidth: 150 }}
               >
-                {formatSubmissionTimeStamp(item.submission_time)}
+                {formatSubmissionTimeStamp(
+                  item.submission_time,
+                  proposalPeriod
+                )}
               </td>
             )}
             {isPendingRequests &&

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

@@ -1,13 +1,17 @@
 const { href } = VM.require("${REPL_DEVHUB}/widget/core.lib.url") || {
   href: () => {},
 };
-const { getNearBalances } = VM.require(
+const { getNearBalances, formatSubmissionTimeStamp } = VM.require(
   "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common"
 );
 
 const instance = props.instance;
 const policy = props.policy;
-if (!instance) {
+if (
+  !instance ||
+  typeof getNearBalances !== "function" ||
+  typeof formatSubmissionTimeStamp !== "function"
+) {
   return <></>;
 }
 
@@ -248,46 +252,6 @@ const VoteSuccessToast = () => {
 
 const proposalPeriod = policy.proposal_period;
 
-function formatSubmissionTimeStamp(submissionTime) {
-  const endTime = Big(submissionTime).plus(proposalPeriod).toFixed();
-  const milliseconds = Number(endTime) / 1000000;
-  const date = new Date(milliseconds);
-
-  // Calculate days and minutes remaining from the timestamp
-  const now = new Date();
-  let diffTime = date - now;
-
-  // Check if the difference is negative
-  const isNegative = diffTime < 0;
-
-  // Convert the total difference into days, hours, and minutes
-  const totalMinutes = Math.floor(diffTime / (1000 * 60));
-  const totalHours = Math.floor(totalMinutes / 60);
-  const remainingMinutes = totalMinutes % 60;
-
-  const totalDays = Math.floor(totalHours / 24);
-  const remainingHours = totalHours % 24;
-
-  // Get hours, minutes, day, month, and year
-  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0");
-  const day = date.getDate().toString().padStart(2, "0");
-  const month = date.toLocaleString("default", { month: "short" });
-  const year = date.getFullYear();
-  return (
-    <div className="d-flex flex-column">
-      <div className="fw-bold">
-        {isNegative
-          ? "Expired"
-          : `${totalDays}d ${remainingHours}h ${remainingMinutes}m`}
-      </div>
-      <div className="text-muted text-sm">
-        {hours}:{minutes} {day} {month} {year}
-      </div>
-    </div>
-  );
-}
-
 const [showDetailsProposalKind, setShowDetailsProposalKind] = useState(null);
 
 const ProposalsComponent = () => {
@@ -402,7 +366,10 @@ const ProposalsComponent = () => {
                 className={isVisible("Expiring Date") + " text-left"}
                 style={{ minWidth: 150 }}
               >
-                {formatSubmissionTimeStamp(item.submission_time)}
+                {formatSubmissionTimeStamp(
+                  item.submission_time,
+                  proposalPeriod
+                )}
               </td>
             )}
             {isPendingRequests &&

instances/treasury-devdao.near/widget/pages/settings/DeleteModalConfirmation.jsx

@@ -236,7 +236,7 @@ return (
           <Widget
             src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
             props={{
-              classNames: { root: "btn-outline-secondary" },
+              classNames: { root: "btn-outline shadow-none border-0" },
               label: "Cancel",
               onClick: onCancelClick,
             }}

instances/treasury-devdao.near/widget/pages/settings/Thresholds.jsx

@@ -73,29 +73,12 @@ useEffect(() => {
   });
 }, []);
 
-function checkProposalStatus(proposalId) {
-  Near.asyncView(treasuryDaoID, "get_proposal", {
-    id: proposalId,
-  }).then((result) => {
-    if (Object.keys(result.votes).length === 1) {
-      if (result.status === "Approved") {
-        setRefreshData(!refreshData);
-      }
-      setToastStatus(result.status);
-      setVoteProposalId(proposalId);
-      setTxnCreated(false);
-    } else {
-      setTimeout(() => checkProposalStatus(proposalId), 1000);
-    }
-  });
-}
-
 useEffect(() => {
   if (isTxnCreated) {
     const checkForNewProposal = () => {
       getLastProposalId().then((id) => {
         if (lastProposalId !== id) {
-          setTimeout(() => checkProposalStatus(id - 1), 2000);
+          setToastStatus(true);
         } else {
           setTimeout(() => checkForNewProposal(), 1000);
         }
@@ -207,17 +190,6 @@ const ToastContainer = styled.div`
   }
 `;
 
-function getApproveTxn() {
-  return {
-    contractName: treasuryDaoID,
-    methodName: "act_proposal",
-    args: {
-      id: lastProposalId,
-      action: "VoteApprove",
-    },
-    gas: 300000000000000,
-  };
-}
 const proposalKinds = [
   "config",
   "policy",
@@ -281,44 +253,9 @@ function onSubmitClick() {
       },
       gas: 200000000000000,
     },
-    getApproveTxn(),
   ]);
 }
 
-const ToastStatusContent = () => {
-  let content = "";
-  switch (showToastStatus) {
-    case "Approved":
-      content = "Vote policy is successfully updated.";
-      break;
-    default:
-      content = `Your request is created.`;
-      break;
-  }
-  return (
-    showToastStatus && (
-      <div className="toast-body">
-        {content}
-        <br />
-        {showToastStatus == "InProgress" && (
-          <a
-            href={href({
-              widgetSrc: `${instance}/widget/app`,
-              params: {
-                page: "settings",
-                selectedTab: "History",
-                highlightProposalId: voteProposalId,
-              },
-            })}
-          >
-            View it
-          </a>
-        )}
-      </div>
-    )
-  );
-};
-
 const SubmitToast = () => {
   return (
     showToastStatus && (
@@ -331,7 +268,19 @@ const SubmitToast = () => {
               onClick={() => setToastStatus(null)}
             ></i>
           </div>
-          <ToastStatusContent />
+          <div className="toast-body">
+            <div>Threshold change request submitted.</div>
+            <a
+              href={href({
+                widgetSrc: `${instance}/widget/app`,
+                params: {
+                  page: "settings",
+                },
+              })}
+            >
+              View it
+            </a>
+          </div>
         </div>
       </ToastContainer>
     )