Fix stake delegation refresh on create request (#233)

Resolves #248 - Added hover to 'Create request' dropdown - Fix the refresh issue with create stake request, update tests to use sandboxrpc to create proposals [video.webm](https://github.com/user-attachments/assets/563cfb7d-5e27-42e2-b5f1-fbe8029754fa) [video.webm](https://github.com/user-attachments/assets/d5f319d1-deb4-4fbf-b471-6fa255f1fddd)
NEAR-DevHub · Jan 24, 2025 · 31e4303 · 31e4303
1 parent d6f74ff
commit 31e4303
Show file tree

Hide file tree

Showing 7 changed files with 326 additions and 151 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -97,6 +97,10 @@ jobs:
           npx playwright install
       - name: Build project
         run: npm run build
+      - name: Build sandbox
+        run: |
+          npm run build:sandbox
+        continue-on-error: false
       - name: Run tests
         run: |
           ${{ matrix.target_account.test_command }}

diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateButton.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateButton.jsx
@@ -108,58 +108,11 @@ const CreateBtn = () => {
       border: none !important;
     }
   
-    .options-card {
-      display: none;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-      border: 1px solid var(--border-color);
-      background-color: var(--bg-page-color) !important;
-      color: var(--text-color) !important;
-      z-index: 99;
-      opacity: 0;
-      font-size: 14px;
-      transform: translateY(-10px);
-      transition: opacity 0.2s ease, transform 0.2s ease;
-  
-      &.visible {
-        display: block;
-        opacity: 1;
-        transform: translateY(0);
-        z-index:1000;
-      }
-    }
-  
     .left {
       right: 0 !important;
       left: auto !important;
     }
-  
-    @media screen and (max-width: 768px) {
-      .options-card {
-        right: 0 !important;
-        left: auto !important;
-      }
-    }
-  
-    .option {
-      color: var(--text-color) !important;
-      margin-block: 5px;
-      padding: 10px;
-      cursor: pointer;
-      border-bottom: 1px solid var(--border-color);
-      transition: background-color 0.3s ease;
-    }
-  
-    .option:hover {
-      background-color: var(--bs-dropdown-link-hover-bg);
-    }
-  
-    .option:last-child {
-      border-bottom: none;
-    }
-  
+
     .selected {
       background-color: var(--grey-04);
     }
@@ -178,30 +131,35 @@ const CreateBtn = () => {
     a:hover {
       text-decoration: none;
     }
-  
   }
   `;
 
   return (
     <DropdowntBtnContainer>
       <div
-        className="custom-select"
+        className="custom-select "
         tabIndex="0"
         onBlur={() => setCreateBtnOpen(false)}
       >
-        <div className={"btn primary-button d-flex align-items-center"}>
+        <div
+          className={"dropdown btn primary-button d-flex align-items-center"}
+        >
           <div className="d-flex gap-2 align-items-center ">
             <i class="bi bi-plus-lg h5 mb-0"></i>Create Request
           </div>
         </div>
 
         <div
-          className={`rounded-3 mt-1 options-card ${
-            isCreateBtnOpen ? "visible" : "hidden"
+          className={`dropdown-menu dropdown-menu-end dropdown-menu-lg-start px-2 shadow ${
+            isCreateBtnOpen ? "show" : ""
           }`}
         >
           {btnOptions.map((option) => (
-            <div key={option.value} className="option" onClick={option.onClick}>
+            <div
+              key={option.value}
+              className="dropdown-item cursor-pointer py-2"
+              onClick={option.onClick}
+            >
               <div className="d-flex gap-2 align-items-center">
                 {option.icon}
                 <div>{option.label}</div>

diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
@@ -138,8 +138,8 @@ useEffect(() => {
         if (typeof lastProposalId === "number" && lastProposalId !== id) {
           cleanInputs();
           onCloseCanvas();
-          refreshData();
           clearTimeout(errorTimeout);
+          refreshData();
           setTxnCreated(false);
         } else {
           checkTxnTimeout = setTimeout(() => checkForNewProposal(), 1000);

diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/PendingRequests.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/PendingRequests.jsx
@@ -18,13 +18,19 @@ const [totalLength, setTotalLength] = useState(null);
 const [loading, setLoading] = useState(false);
 const [isPrevPageCalled, setIsPrevCalled] = useState(false);
 
-const refreshTableData = Storage.get(
-  "REFRESH_TABLE_DATA",
-  `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.payments.CreatePaymentRequest`
+const refreshStakeTableData = Storage.get(
+  "REFRESH_STAKE_TABLE_DATA",
+  `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.stake-delegation.CreateStakeRequest`
 );
-const refreshVoteTableData = Storage.get(
-  "REFRESH__VOTE_ACTION_TABLE_DATA",
-  `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.VoteActions`
+
+const refreshUnstakeTableData = Storage.get(
+  "REFRESH_STAKE_TABLE_DATA",
+  `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.stake-delegation.CreateUnstakeRequest`
+);
+
+const refreshWithdrawTableData = Storage.get(
+  "REFRESH_STAKE_TABLE_DATA",
+  `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.stake-delegation.CreateWithdrawRequest`
 );
 
 const fetchProposals = useCallback(() => {
@@ -62,7 +68,7 @@ useEffect(() => {
   setOffset(null);
   setPage(0);
   fetchProposals();
-}, [refreshTableData]);
+}, [refreshStakeTableData, refreshUnstakeTableData, refreshWithdrawTableData]);
 
 const policy = treasuryDaoID
   ? Near.view(treasuryDaoID, "get_policy", {})

diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx
@@ -110,7 +110,7 @@ const Container = styled.div`
     color: inherit !important;
   }
 `;
-div;
+
 function checkProposalStatus(proposalId) {
   Near.asyncView(treasuryDaoID, "get_proposal", {
     id: proposalId,