From 647a416b61106cccdcc1ff0cef40023e99ec0f4f Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Mon, 27 Jan 2025 17:34:07 +0530
Subject: [PATCH 1/7] move validator dropdown to iframe, update tests, reuse
 app colors

---
 .../widget/app.jsx                            |  22 +-
 .../widget/components/OverlayTrigger.jsx      |   8 +-
 .../widget/components/StakedNearIframe.jsx    |  75 +--
 .../widget/components/templates/AppLayout.jsx | 138 +----
 .../widget/lib/common.jsx                     | 133 +++++
 .../widget/pages/dashboard/Chart.jsx          |  23 +-
 .../widget/pages/payments/Table.jsx           |   2 +-
 .../stake-delegation/CreateStakeRequest.jsx   | 195 ++-----
 .../stake-delegation/CreateUnstakeRequest.jsx | 148 +----
 .../ValidatorsDropDownWithSearch.jsx          | 507 ++++++++++++++++++
 .../pages/stake-delegation/WalletDropdown.jsx |   2 +-
 .../stake-delegation/stake-delegation.spec.js |  68 ++-
 12 files changed, 828 insertions(+), 493 deletions(-)
 create mode 100644 instances/widgets.treasury-factory.near/widget/pages/stake-delegation/ValidatorsDropDownWithSearch.jsx

diff --git a/instances/widgets.treasury-factory.near/widget/app.jsx b/instances/widgets.treasury-factory.near/widget/app.jsx
index d2fcc990..593402b9 100644
--- a/instances/widgets.treasury-factory.near/widget/app.jsx
+++ b/instances/widgets.treasury-factory.near/widget/app.jsx
@@ -13,10 +13,6 @@ const { AppLayout } = VM.require(
 const instance = "${REPL_INSTANCE}";
 const treasuryDaoID = "${REPL_TREASURY}";
 
-const { Theme } = VM.require(`${instance}/widget/config.css`) || {
-  Theme: () => <></>,
-};
-
 if (!page) {
   // If no page is specified, we default to the feed page TEMP
   page = "dashboard";
@@ -84,14 +80,12 @@ function Page() {
 }
 
 return (
-  <Theme>
-    <AppLayout
-      page={page}
-      instance={instance}
-      treasuryDaoID={treasuryDaoID}
-      accountId={context.accountId}
-    >
-      <Page />
-    </AppLayout>
-  </Theme>
+  <AppLayout
+    page={page}
+    instance={instance}
+    treasuryDaoID={treasuryDaoID}
+    accountId={context.accountId}
+  >
+    <Page />
+  </AppLayout>
 );
diff --git a/instances/widgets.treasury-factory.near/widget/components/OverlayTrigger.jsx b/instances/widgets.treasury-factory.near/widget/components/OverlayTrigger.jsx
index 1aa6916e..37ea2634 100644
--- a/instances/widgets.treasury-factory.near/widget/components/OverlayTrigger.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/OverlayTrigger.jsx
@@ -3,9 +3,9 @@ const { instance } = props;
 if (!instance) {
   return <></>;
 }
-const { getColors } = VM.require(
-  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.templates.AppLayout"
-) || { getColors: () => {} };
+const { getAllColorsAsCSSVariables } = VM.require(
+  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common"
+) || { getAllColorsAsCSSVariables: () => {} };
 const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
 
 const config = treasuryDaoID ? Near.view(treasuryDaoID, "get_config") : null;
@@ -44,7 +44,7 @@ const overlayStyle = props.overlayStyle ?? {
 };
 
 const ThemeColorsContainer = styled.div`
-  ${() => getColors(isDarkTheme, "", "")}
+  ${() => getAllColorsAsCSSVariables(isDarkTheme, "")}
 `;
 
 const overlay = (
diff --git a/instances/widgets.treasury-factory.near/widget/components/StakedNearIframe.jsx b/instances/widgets.treasury-factory.near/widget/components/StakedNearIframe.jsx
index e445d33f..aa2a0a60 100644
--- a/instances/widgets.treasury-factory.near/widget/components/StakedNearIframe.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/StakedNearIframe.jsx
@@ -168,42 +168,45 @@ const code = `
   </html> 
   `;
 
-const iframe = (
-  <iframe
-    style={{
-      display: "none",
-    }}
-    srcDoc={code}
-    onMessage={(e) => {
-      switch (e.handler) {
-        case "stakedNearPool":
-          const pools = e.pools;
-          let stakedBalance = new Big(0);
-          let unstakedBalance = new Big(0);
-          let availableToWithdrawBalance = new Big(0);
-          pools.forEach((pool) => {
-            stakedBalance = stakedBalance.plus(
-              new Big(pool.stakedBalance).div(1e24)
-            );
-            unstakedBalance = unstakedBalance.plus(
-              new Big(pool.unstakedBalance).div(1e24)
-            );
-            availableToWithdrawBalance = availableToWithdrawBalance.plus(
-              new Big(pool.availableToWithdrawBalance).div(1e24)
-            );
-          });
-          const totalBalance = stakedBalance
-            .plus(unstakedBalance)
-            .plus(availableToWithdrawBalance);
-          setNearStakedTotalTokens(totalBalance.toFixed() ?? "0");
-          setNearUnstakedTokens(unstakedBalance.toFixed() ?? "0");
-          setNearWithdrawTokens(availableToWithdrawBalance.toFixed() ?? "0");
-          setNearStakedTokens(stakedBalance.toFixed() ?? "0");
-          setPoolWithBalance(pools);
-          break;
-      }
-    }}
-  />
+const iframe = useMemo(
+  () => (
+    <iframe
+      style={{
+        display: "none",
+      }}
+      srcDoc={code}
+      onMessage={(e) => {
+        switch (e.handler) {
+          case "stakedNearPool":
+            const pools = e.pools;
+            let stakedBalance = new Big(0);
+            let unstakedBalance = new Big(0);
+            let availableToWithdrawBalance = new Big(0);
+            pools.forEach((pool) => {
+              stakedBalance = stakedBalance.plus(
+                new Big(pool.stakedBalance).div(1e24)
+              );
+              unstakedBalance = unstakedBalance.plus(
+                new Big(pool.unstakedBalance).div(1e24)
+              );
+              availableToWithdrawBalance = availableToWithdrawBalance.plus(
+                new Big(pool.availableToWithdrawBalance).div(1e24)
+              );
+            });
+            const totalBalance = stakedBalance
+              .plus(unstakedBalance)
+              .plus(availableToWithdrawBalance);
+            setNearStakedTotalTokens(totalBalance.toFixed() ?? "0");
+            setNearUnstakedTokens(unstakedBalance.toFixed() ?? "0");
+            setNearWithdrawTokens(availableToWithdrawBalance.toFixed() ?? "0");
+            setNearStakedTokens(stakedBalance.toFixed() ?? "0");
+            setPoolWithBalance(pools);
+            break;
+        }
+      }}
+    />
+  ),
+  []
 );
 
 return iframe;
diff --git a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
index 869ee255..030042f8 100644
--- a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
@@ -2,96 +2,9 @@ const { BalanceBanner } = VM.require(
   `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.BalanceBanner`
 ) || { BalanceBanner: () => <></> };
 
-function hexToHsl(hex) {
-  // Remove # if present
-  hex = hex ?? "";
-  hex = hex.startsWith("#") ? hex.slice(1) : hex;
-
-  // Extract RGB components
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
-
-  // Normalize RGB values
-  const rNorm = r / 255;
-  const gNorm = g / 255;
-  const bNorm = b / 255;
-
-  const max = Math.max(rNorm, gNorm, bNorm);
-  const min = Math.min(rNorm, gNorm, bNorm);
-  const delta = max - min;
-
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-
-  if (delta !== 0) {
-    s = l < 0.5 ? delta / (max + min) : delta / (2 - max - min);
-
-    if (max === rNorm) {
-      h = (gNorm - bNorm) / delta + (gNorm < bNorm ? 6 : 0);
-    } else if (max === gNorm) {
-      h = (bNorm - rNorm) / delta + 2;
-    } else {
-      h = (rNorm - gNorm) / delta + 4;
-    }
-
-    h *= 60;
-  }
-
-  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
-}
-
-// Function to convert HSL to HEX
-function hslToHex(h, s, l) {
-  s /= 100;
-  l /= 100;
-
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-  const m = l - c / 2;
-
-  let r = 0,
-    g = 0,
-    b = 0;
-
-  if (h >= 0 && h < 60) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (h >= 60 && h < 120) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (h >= 120 && h < 180) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (h >= 180 && h < 240) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (h >= 240 && h < 300) {
-    r = x;
-    g = 0;
-    b = c;
-  } else if (h >= 300 && h < 360) {
-    r = c;
-    g = 0;
-    b = x;
-  }
-
-  r = Math.round((r + m) * 255);
-  g = Math.round((g + m) * 255);
-  b = Math.round((b + m) * 255);
-
-  const toHex = (value) => {
-    const hex = value.toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  };
-
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
+const { getAllColorsAsCSSVariables } = VM.require(
+  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common"
+) || { getAllColorsAsCSSVariables: () => {} };
 
 const AppHeader = ({ page, instance }) => (
   <Widget
@@ -103,33 +16,6 @@ const AppHeader = ({ page, instance }) => (
   />
 );
 
-const getColors = (isDarkTheme, themeColor, hoverColor) => `
---theme-color: ${themeColor};
---theme-color-dark: ${hoverColor};
---bg-header-color: ${isDarkTheme ? "#222222" : "#2C3E50"};
---bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
---bg-system-color: ${isDarkTheme ? "#131313" : "#f4f4f4"};
---text-color: ${isDarkTheme ? "#CACACA" : "#1B1B18"};
---text-secondary-color: ${isDarkTheme ? "#878787" : "#999999"};
---text-alt-color: ${isDarkTheme ? "#FFFFFF" : "#FFFFFF"};
---border-color: ${isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)"};
---grey-01: ${isDarkTheme ? "#F4F4F4" : "#1B1B18"};
---grey-02: ${isDarkTheme ? "#B3B3B3" : "#555555"};
---grey-03: ${isDarkTheme ? "#555555" : "#B3B3B3"};
---grey-035: ${isDarkTheme ? "#3E3E3E" : "#E6E6E6"};
---grey-04: ${isDarkTheme ? "#323232" : "#F4F4F4"};
---grey-05: ${isDarkTheme ? "#1B1B18" : "#F7F7F7"};
---icon-color:  ${isDarkTheme ? "#CACACA" : "#060606"};
---other-primary:#2775C9;
---other-warning:#B17108;
---other-green:#3CB179;
---other-red:#D95C4A;
-
-// bootstrap theme color
---bs-body-bg: var(--bg-page-color);
---bs-border-color:  var(--border-color);
-`;
-
 const Theme = styled.div`
   padding-top: calc(-1 * var(--body-top-padding));
 
@@ -431,7 +317,7 @@ const Theme = styled.div`
 
   .bg-validator-info {
     background: rgba(0, 16, 61, 0.06);
-    color: #1b1b18;
+    color: var(--text-color);
     padding-inline: 0.8rem;
     padding-block: 0.5rem;
     font-weight: 500;
@@ -521,20 +407,10 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
 
   const primaryColor = metadata?.primaryColor
     ? metadata?.primaryColor
-    : themeColor
-    ? themeColor
-    : isDarkTheme
-    ? "#01BF7A"
-    : "#01BF7A";
-
-  // Convert HEX to HSL
-  const [h, s, l] = hexToHsl(primaryColor);
-
-  // Calculate hover color (darken by reducing lightness)
-  const hoverColor = hslToHex(h, s, Math.max(l - 10, 0));
+    : themeColor;
 
   const ParentContainer = styled.div`
-    ${() => getColors(isDarkTheme, primaryColor, hoverColor)}
+    ${() => getAllColorsAsCSSVariables(isDarkTheme, primaryColor)}
     width: 100%;
     background: var(--bg-system-color) !important;
     ${() =>
@@ -562,4 +438,4 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
   );
 }
 
-return { AppLayout, getColors, Theme };
+return { AppLayout, Theme };
diff --git a/instances/widgets.treasury-factory.near/widget/lib/common.jsx b/instances/widgets.treasury-factory.near/widget/lib/common.jsx
index c5340851..609ec099 100644
--- a/instances/widgets.treasury-factory.near/widget/lib/common.jsx
+++ b/instances/widgets.treasury-factory.near/widget/lib/common.jsx
@@ -517,6 +517,137 @@ const TooltipText = {
   readyToStake: "Available to stake. Earn rewards by staking these tokens",
 };
 
+function hexToHsl(hex) {
+  // Remove # if present
+  hex = hex ?? "";
+  hex = hex.startsWith("#") ? hex.slice(1) : hex;
+
+  // Extract RGB components
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+
+  // Normalize RGB values
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  const delta = max - min;
+
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (delta !== 0) {
+    s = l < 0.5 ? delta / (max + min) : delta / (2 - max - min);
+
+    if (max === rNorm) {
+      h = (gNorm - bNorm) / delta + (gNorm < bNorm ? 6 : 0);
+    } else if (max === gNorm) {
+      h = (bNorm - rNorm) / delta + 2;
+    } else {
+      h = (rNorm - gNorm) / delta + 4;
+    }
+
+    h *= 60;
+  }
+
+  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
+}
+
+// Function to convert HSL to HEX
+function hslToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+
+  r = Math.round((r + m) * 255);
+  g = Math.round((g + m) * 255);
+  b = Math.round((b + m) * 255);
+
+  const toHex = (value) => {
+    const hex = value.toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+function getAllColorsAsObject(isDarkTheme, primaryColor) {
+  const themeColor = primaryColor ? primaryColor : "#01BF7A";
+
+  const [h, s, l] = hexToHsl(themeColor);
+
+  // Calculate hover color (darken by reducing lightness)
+  const hoverColor = hslToHex(h, s, Math.max(l - 10, 0));
+
+  return {
+    "--theme-color": themeColor,
+    "--theme-color-dark": hoverColor,
+    "--bg-header-color": isDarkTheme ? "#222222" : "#2C3E50",
+    "--bg-page-color": isDarkTheme ? "#222222" : "#FFFFFF",
+    "--bg-system-color": isDarkTheme ? "#131313" : "#f4f4f4",
+    "--text-color": isDarkTheme ? "#CACACA" : "#1B1B18",
+    "--text-secondary-color": isDarkTheme ? "#878787" : "#999999",
+    "--text-alt-color": "#FFFFFF",
+    "--border-color": isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)",
+    "--grey-01": isDarkTheme ? "#F4F4F4" : "#1B1B18",
+    "--grey-02": isDarkTheme ? "#B3B3B3" : "#555555",
+    "--grey-03": isDarkTheme ? "#555555" : "#B3B3B3",
+    "--grey-035": isDarkTheme ? "#3E3E3E" : "#E6E6E6",
+    "--grey-04": isDarkTheme ? "#323232" : "#F4F4F4",
+    "--grey-05": isDarkTheme ? "#1B1B18" : "#F7F7F7",
+    "--icon-color": isDarkTheme ? "#CACACA" : "#060606",
+    "--other-primary": "#2775C9",
+    "--other-warning": "#B17108",
+    "--other-green": "#3CB179",
+    "--other-red": "#D95C4A",
+    "--bs-body-bg": "var(--bg-page-color)",
+    "--bs-border-color": "var(--border-color)",
+  };
+}
+
+function getAllColorsAsCSSVariables(isDarkTheme, themeColor) {
+  const colors = getAllColorsAsObject(isDarkTheme, themeColor);
+  return Object.entries(colors)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join("\n");
+}
 return {
   getApproversAndThreshold,
   hasPermission,
@@ -534,4 +665,6 @@ return {
   LOCKUP_MIN_BALANCE_FOR_STORAGE,
   formatSubmissionTimeStamp,
   TooltipText,
+  getAllColorsAsObject,
+  getAllColorsAsCSSVariables,
 };
diff --git a/instances/widgets.treasury-factory.near/widget/pages/dashboard/Chart.jsx b/instances/widgets.treasury-factory.near/widget/pages/dashboard/Chart.jsx
index 29603828..edb5fb34 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/dashboard/Chart.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/dashboard/Chart.jsx
@@ -20,7 +20,11 @@ const { Skeleton } = VM.require(
   "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.skeleton"
 );
 
-if (!Skeleton) {
+const { getAllColorsAsObject } = VM.require(
+  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common"
+);
+
+if (!Skeleton || typeof getAllColorsAsObject !== "function") {
   return <></>;
 }
 
@@ -58,14 +62,11 @@ const config = treasuryDaoID ? Near.view(treasuryDaoID, "get_config") : null;
 const metadata = JSON.parse(atob(config.metadata ?? ""));
 
 const isDarkTheme = metadata.theme === "dark";
-const bgPageColor = isDarkTheme ? "#222222" : "#FFFFFF";
-const borderColor = isDarkTheme ? "#CACACA" : "#000";
-const iconColor = isDarkTheme ? "#CACACA" : "#060606";
-const textColor = isDarkTheme ? "#CACACA" : "#1B1B18";
 const fillStyle = isDarkTheme
   ? "rgba(34, 34, 34, 0.7)"
   : "rgba(255, 255, 255, 0.7)";
 
+const colors = getAllColorsAsObject(isDarkTheme);
 const code = `
 <!DOCTYPE html>
   <html lang="en">
@@ -86,8 +87,8 @@ const code = `
               width: 100%;
               height: 100%;
               display: block;
-              background-color:${bgPageColor};
-              color: ${textColor};
+              background-color: ${colors["--bg-page-color"]};
+              color: ${colors["--text-color"]};
           }
       </style>
   </head>
@@ -123,7 +124,7 @@ const code = `
                 ctx.moveTo(hoverX, chartArea.top);
                 ctx.lineTo(hoverX, chartArea.bottom);
                 ctx.lineWidth = 1;
-                ctx.strokeStyle = '${iconColor}';
+                ctx.strokeStyle = '${colors["--icon-color"]}';
                 ctx.setLineDash([5, 3]);
                 ctx.stroke();
                 ctx.restore();
@@ -158,7 +159,7 @@ const code = `
             },
             ticks: {
               display: true,
-              color: '${textColor}',
+              color: '${colors["--text-color"]}',
             },   
           },
           y: {
@@ -186,8 +187,8 @@ const code = `
             data: [],
             fill: true,
             backgroundColor: gradient,
-            borderColor: '${borderColor}',
-            pointBackgroundColor: '${bgPageColor}',
+            borderColor: ' ${colors["--border-color"]}',
+            pointBackgroundColor: ' ${colors["--bg-page-color"]}',
             pointRadius: 0,
             tension: 0,
             borderWidth: 1.5
diff --git a/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx b/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx
index 35a249c9..ff43d9df 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx
@@ -153,7 +153,7 @@ const hideApproversCol = isPendingRequests && requiredVotes === 1;
 
 const userFTTokens = fetch(
   `https://api3.nearblocks.io/v1/account/${treasuryDaoID}/inventory`,
-  { headers: { Authorization: "Bearer ${REPL_NEARBLOCKS_KEY}" } }
+  { method: "GET", headers: { Authorization: "Bearer ${REPL_NEARBLOCKS_KEY}" } }
 );
 
 const nearBalances = getNearBalances(treasuryDaoID);
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
index 03bbca78..684580ea 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
@@ -35,13 +35,9 @@ const [selectedWallet, setSelectedWallet] = useState(walletOptions[0]);
 const [validators, setValidators] = useState([]);
 const [isTxnCreated, setTxnCreated] = useState(false);
 const [lastProposalId, setLastProposalId] = useState(null);
-const [notes, setNotes] = useState(null);
 const [showCancelModal, setShowCancelModal] = useState(false);
-
-const [amount, setAmount] = useState(null);
 const [validatorAccount, setValidatorAccount] = useState(null);
 const [daoPolicy, setDaoPolicy] = useState(null);
-const [amountError, setAmountError] = useState(null);
 
 const [nearStakedTokens, setNearStakedTokens] = useState(null);
 const [nearUnStakedTokens, setNearUnStakedTokens] = useState(null);
@@ -122,12 +118,6 @@ useEffect(() => {
   });
 }, []);
 
-function cleanInputs() {
-  setValidatorAccount("");
-  setNotes("");
-  setAmount("");
-}
-
 useEffect(() => {
   if (isTxnCreated) {
     let checkTxnTimeout = null;
@@ -188,38 +178,35 @@ const BalanceDisplay = ({ label, balance, tooltipInfo, noBorder }) => {
   );
 };
 
+const pikespeakKey = "38020cf5-d3c6-40a6-b1fe-f3428747cafc";
+// isBosGateway()
+//   ? "${REPL_PIKESPEAK_KEY}"
+// :
+props.pikespeakKey;
+
+const pikespeakOptions = {
+  method: "GET",
+  headers: {
+    "Content-Type": "application/json",
+    "x-api-key": pikespeakKey,
+  },
+};
 const allValidators = useCache(
   () =>
-    asyncFetch("https://rpc.mainnet.near.org/", {
-      method: "POST",
-      headers: {
-        "content-type": "application/json",
-      },
-      body: JSON.stringify({
-        jsonrpc: "2.0",
-        id: "dontcare",
-        method: "validators",
-        params: [null],
-      }),
-    }).then((resp) => {
-      if (Array.isArray(resp.body.result?.current_validators)) {
-        const validatorsAccounts = resp.body.result.current_validators;
-        return Promise.all(
-          validatorsAccounts.map((item) =>
-            item.account_id
-              ? Near.asyncView(item.account_id, "get_reward_fee_fraction").then(
-                  (feeData) => ({
-                    pool_id: item.account_id,
-                    fee: feeData.numerator,
-                  })
-                )
-              : null
-          )
-        ).then((results) => results.filter((result) => result !== null));
-      }
-      return [];
+    asyncFetch(
+      "https://api.pikespeak.ai/validators/current",
+      pikespeakOptions
+    ).then((resp) => {
+      return (
+        resp?.body?.map((item) => {
+          return {
+            pool_id: item.account_id,
+            fee: item.fees.numerator,
+          };
+        }) ?? []
+      );
     }),
-  treasuryDaoID + "-stake-request-validators",
+  "-stake-request-validators",
   { subscribe: false }
 );
 
@@ -293,7 +280,7 @@ function toBase64(json) {
   return Buffer.from(JSON.stringify(json)).toString("base64");
 }
 
-function onSubmitClick() {
+function onSubmitClick(validatorAccount, amount, notes) {
   setTxnCreated(true);
   const deposit = daoPolicy?.proposal_bond || 100000000000000000000000;
   const description = {
@@ -304,7 +291,7 @@ function onSubmitClick() {
   const isLockupContractSelected = lockupContract === selectedWallet.value;
 
   const addSelectPoolCall =
-    isLockupContractSelected && validatorAccount.pool_id !== lockupStakedPoolId;
+    isLockupContractSelected && validatorAccount !== lockupStakedPoolId;
 
   const calls = [];
   if (addSelectPoolCall) {
@@ -327,7 +314,7 @@ function onSubmitClick() {
                 {
                   method_name: "select_staking_pool",
                   args: toBase64({
-                    staking_pool_account_id: validatorAccount.pool_id,
+                    staking_pool_account_id: validatorAccount,
                   }),
                   deposit: "0",
                   gas: "100000000000000",
@@ -351,7 +338,7 @@ function onSubmitClick() {
           FunctionCall: {
             receiver_id: isLockupContractSelected
               ? lockupContract
-              : validatorAccount.pool_id,
+              : validatorAccount,
             actions: isLockupContractSelected
               ? [
                   {
@@ -395,15 +382,6 @@ const Container = styled.div`
   }
 `;
 
-useEffect(() => {
-  const parsedAmount = parseFloat(amount);
-  if (parsedAmount > parseFloat(getBalances().available)) {
-    setAmountError("Your account doesn't have sufficient balance.");
-  } else {
-    setAmountError(null);
-  }
-}, [amount, selectedWallet]);
-
 // check if staking pool is selected with some staked balance
 useEffect(() => {
   if (selectedWallet.value === lockupContract) {
@@ -446,7 +424,6 @@ return (
         isOpen: showCancelModal,
         onCancelClick: () => setShowCancelModal(false),
         onConfirmClick: () => {
-          cleanInputs();
           setShowCancelModal(false);
           onCloseCanvas();
         },
@@ -481,6 +458,7 @@ return (
         }}
       />
     )}
+
     <div className="d-flex flex-column gap-3">
       {lockupContract && (
         <div className="d-flex flex-column gap-1">
@@ -522,110 +500,23 @@ return (
         />
       </div>
       <div className="d-flex flex-column gap-1">
-        <label>Validator</label>
         <Widget
-          src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.ValidatorsDropDownWithSearch"
+          src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.stake-delegation.ValidatorsDropDownWithSearch"
           props={{
             selectedValue: validatorAccount,
-            onChange: (v) => setValidatorAccount(v),
             options: validators,
-            showSearch: true,
-            searchInputPlaceholder: "Search",
-            defaultLabel: "Select",
             selectedWallet: selectedWallet?.value,
-            disabled: lockupAlreadyStaked,
-          }}
-        />
-        {selectedWallet.value === lockupContract && (
-          <div className="d-flex gap-2 align-items-center my-2 rounded-2 bg-validator-info">
-            <i class="bi bi-info-circle h6 mb-0"></i>
-            {lockupStakedPoolId ? (
-              <span>
-                You cannot split your locked funds across multiple validators.
-                To change your validator, please contact our support team.
-              </span>
-            ) : (
-              <span>
-                You cannot split your locked funds across multiple validators.
-                Choose <span className="fw-bold">one</span> validator from the
-                list. Once you select a validator and click submit, a one-time
-                whitelist request will be created. You'll need to approve this
-                request before you can proceed with approving the staking
-                request. <br /> <br /> Note: We currently do not support
-                changing validators through the treasury UI. If you need to
-                change your validator, please contact our team.
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-      <div className="d-flex flex-column gap-1">
-        <label className="d-flex align-items-center justify-content-between">
-          Amount to Stake
-          {validatorAccount && (
-            <div
-              className="use-max-bg px-3 py-1 rounded-2"
-              onClick={() => {
-                setAmount(getBalances().available);
-              }}
-            >
-              Use Max
-            </div>
-          )}
-        </label>
-        <Widget
-          src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
-          props={{
-            className: "flex-grow-1",
-            key: `total-amount`,
-            onBlur: (e) => setAmount(e.target.value),
-            placeholder: "Enter amount",
-            value: amount,
-            error: amountError,
-            inputProps: {
-              type: "number",
-              min: "0",
-              prefix: <NearToken />,
-            },
-          }}
-        />
-      </div>
-      <div className="d-flex flex-column gap-1">
-        <label>Notes (Optional)</label>
-        <Widget
-          src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Input`}
-          props={{
-            className: "flex-grow-1",
-            key: `notes`,
-            onBlur: (e) => setNotes(e.target.value),
-            value: notes,
-            multiline: true,
-          }}
-        />
-      </div>
-      <div className="d-flex mt-2 gap-3 justify-content-end">
-        <Widget
-          src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
-          props={{
-            classNames: {
-              root: "btn btn-outline-secondary shadow-none no-transparent",
-            },
-            label: "Cancel",
-            onClick: () => {
-              setShowCancelModal(true);
-            },
-            disabled: isTxnCreated,
-          }}
-        />
-        <Widget
-          src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
-          props={{
-            classNames: { root: "theme-btn" },
-            disabled:
-              !validatorAccount || !amount || amountError || isTxnCreated,
-            label: "Submit",
-            onClick: onSubmitClick,
-            loading: isTxnCreated,
+            disabledDropdown: lockupAlreadyStaked,
+            disbabledActionButtons: isTxnCreated,
+            lockupContract,
+            treasuryDaoID,
+            availableBalance: getBalances().available,
+            instance,
+            onCancel: () => setShowCancelModal(true),
+            onSubmit: (validatorAccount, amount, notes) =>
+              onSubmitClick(validatorAccount, amount, notes),
+            lockupStakedPoolId,
+            isStakePage: true,
           }}
         />
       </div>
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
index 58467016..93a4ace8 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
@@ -40,10 +40,8 @@ const [selectedWallet, setSelectedWallet] = useState(walletOptions[0]);
 const [validators, setValidators] = useState([]);
 const [isTxnCreated, setTxnCreated] = useState(false);
 const [lastProposalId, setLastProposalId] = useState(null);
-const [notes, setNotes] = useState(null);
 const [showCancelModal, setShowCancelModal] = useState(false);
 
-const [amount, setAmount] = useState(null);
 const [validatorAccount, setValidatorAccount] = useState(null);
 const [daoPolicy, setDaoPolicy] = useState(null);
 const [amountError, setAmountError] = useState(null);
@@ -180,12 +178,6 @@ useEffect(() => {
   });
 }, []);
 
-function cleanInputs() {
-  setValidatorAccount("");
-  setNotes("");
-  setAmount("");
-}
-
 useEffect(() => {
   if (isTxnCreated) {
     let checkTxnTimeout = null;
@@ -273,7 +265,7 @@ function toBase64(json) {
   return Buffer.from(JSON.stringify(json)).toString("base64");
 }
 
-function onSubmitClick() {
+function onSubmitClick(validatorAccount, amount, notes) {
   setTxnCreated(true);
   const deposit = daoPolicy?.proposal_bond || 100000000000000000000000;
   const description = {
@@ -294,7 +286,7 @@ function onSubmitClick() {
             FunctionCall: {
               receiver_id: isLockupContractSelected
                 ? lockupContract
-                : validatorAccount.pool_id,
+                : validatorAccount,
               actions: [
                 {
                   method_name: "unstake",
@@ -337,7 +329,7 @@ function onSubmitClick() {
           FunctionCall: {
             receiver_id: isLockupContractSelected
               ? lockupContract
-              : validatorAccount.pool_id,
+              : validatorAccount,
             actions: isLockupContractSelected
               ? [
                   {
@@ -379,15 +371,6 @@ const Container = styled.div`
   }
 `;
 
-useEffect(() => {
-  const parsedAmount = parseFloat(amount);
-  if (parsedAmount > parseFloat(getBalances().staked)) {
-    setAmountError("The amount exceeds the balance you have staked.");
-  } else {
-    setAmountError(null);
-  }
-}, [amount, selectedWallet]);
-
 useEffect(() => {
   if (selectedWallet.value === lockupContract) {
     const pool = (lockupStakedPoolsWithBalance ?? []).find(
@@ -426,7 +409,6 @@ return (
         isOpen: showCancelModal,
         onCancelClick: () => setShowCancelModal(false),
         onConfirmClick: () => {
-          cleanInputs();
           setShowCancelModal(false);
           onCloseCanvas();
         },
@@ -508,111 +490,25 @@ return (
           tokens with a validator.
         </div>
       ) : (
-        <div className="d-flex flex-column gap-3">
-          <div className="d-flex flex-column gap-1">
-            <label>Validator</label>
-            <Widget
-              src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.ValidatorsDropDownWithSearch"
-              props={{
-                selectedValue: validatorAccount,
-                onChange: (v) => setValidatorAccount(v),
-                options: validators,
-                showSearch: true,
-                searchInputPlaceholder: "Search",
-                defaultLabel: "Select",
-                selectedWallet: selectedWallet?.value,
-                disabled: selectedWallet?.value === lockupContract,
-              }}
-            />
-          </div>
-          <div className="d-flex flex-column gap-1">
-            <label className="d-flex align-items-center justify-content-between">
-              Amount to Unstake
-              {validatorAccount && (
-                <div
-                  className="use-max-bg px-3 py-1 rounded-2"
-                  onClick={() => {
-                    setAmount(
-                      formatNearAmount(
-                        validatorAccount?.stakedBalance[selectedWallet.value]
-                          ?.stakedBalance ?? 0
-                      )
-                    );
-                  }}
-                >
-                  Use Max
-                </div>
-              )}
-            </label>
-            <Widget
-              src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Input`}
-              props={{
-                className: "flex-grow-1",
-                key: `total-amount`,
-                onBlur: (e) => setAmount(e.target.value),
-                placeholder: "Enter amount",
-                value: amount,
-                error: amountError,
-                inputProps: {
-                  type: "number",
-                  min: "0",
-                  prefix: <NearToken />,
-                },
-              }}
-            />
-            {validatorAccount && (
-              <div className="d-flex align-items-center text-sm gap-1 text-secondary">
-                <div>Available to unstake:</div>
-                <div>
-                  {formatNearAmount(
-                    validatorAccount?.stakedBalance[selectedWallet.value]
-                      ?.stakedBalance ?? 0
-                  )}{" "}
-                  NEAR
-                </div>
-              </div>
-            )}
-          </div>
-          <div className="d-flex flex-column gap-1">
-            <label>Notes (Optional)</label>
-            <Widget
-              src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Input`}
-              props={{
-                className: "flex-grow-1",
-                key: `notes`,
-                onBlur: (e) => setNotes(e.target.value),
-                value: notes,
-                multiline: true,
-              }}
-            />
-          </div>
-          <div className="d-flex mt-2 gap-3 justify-content-end">
-            <Widget
-              src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
-              props={{
-                classNames: {
-                  root: "btn btn-outline-secondary shadow-none no-transparent",
-                },
-                label: "Cancel",
-                onClick: () => {
-                  setShowCancelModal(true);
-                },
-                disabled: isTxnCreated,
-              }}
-            />
-            <Widget
-              src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
-              props={{
-                classNames: { root: "theme-btn" },
-                disabled:
-                  !validatorAccount || !amount || amountError || isTxnCreated,
-                label: "Submit",
-                onClick: onSubmitClick,
-                loading: isTxnCreated,
-              }}
-            />
-          </div>
-        </div>
+        <Widget
+          src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.stake-delegation.ValidatorsDropDownWithSearch"
+          props={{
+            selectedValue: validatorAccount,
+            options: validators,
+            selectedWallet: selectedWallet?.value,
+            disabledDropdown: selectedWallet?.value === lockupContract,
+            disbabledActionButtons: isTxnCreated,
+            lockupContract,
+            treasuryDaoID,
+            availableBalance: getBalances().available,
+            instance,
+            onCancel: () => setShowCancelModal(true),
+            onSubmit: (validatorAccount, amount, notes) =>
+              onSubmitClick(validatorAccount, amount, notes),
+            lockupStakedPoolId,
+            isStakePage: false,
+          }}
+        />
       )}
     </div>
   </Container>
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/ValidatorsDropDownWithSearch.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/ValidatorsDropDownWithSearch.jsx
new file mode 100644
index 00000000..88ae601a
--- /dev/null
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/ValidatorsDropDownWithSearch.jsx
@@ -0,0 +1,507 @@
+const { getAllColorsAsObject } = VM.require(
+  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common"
+);
+
+const treasuryDaoID = props.treasuryDaoID ?? "";
+const instance = props.instance ?? "";
+const options = props.options ?? [];
+const onSubmit = props.onSubmit ?? (() => {});
+const onCancel = props.onCancel ?? (() => {});
+const config = treasuryDaoID ? Near.view(treasuryDaoID, "get_config") : null;
+const metadata = JSON.parse(atob(config.metadata ?? ""));
+const isDarkTheme = metadata.theme === "dark";
+
+const { themeColor } = VM.require(`${instance}/widget/config.data`) || {
+  themeColor: "",
+};
+
+if (
+  !Array.isArray(options) ||
+  !options?.length ||
+  typeof getAllColorsAsObject !== "function"
+) {
+  return (
+    <div className="d-flex flex-column justify-content-center align-items-center w-100 h-100">
+      <Widget
+        src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"}
+      />
+    </div>
+  );
+}
+const primaryColor = metadata?.primaryColor
+  ? metadata?.primaryColor
+  : themeColor;
+
+const colors = getAllColorsAsObject(isDarkTheme, primaryColor);
+const code = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dropdown Component</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/big-js@3.1.3/big.min.js"></script>
+  <style>
+
+  :root {
+    --bs-body-bg: inherit !important;
+    --bs-border-color: inherit !important;
+  }
+  body {
+    background-color: ${colors["--bg-page-color"]} !important;
+    color: ${colors["--text-color"]} !important;
+  }
+  label {
+    font-weight: 500;
+    margin-bottom: 3px;
+    font-size: 15px;
+  }
+  .drop-btn {
+    width: 100%;
+    text-align: left;
+    padding-inline: 10px;
+  }
+  .dropdown-toggle {
+    color: inherit !important;
+  }
+  .dropdown-toggle:after {
+    position: absolute;
+    top: 46%;
+    right: 5%;
+  }
+  .dropdown-item {
+    font-size: 13px;
+  }
+  .custom-select {
+    position: relative;
+  }
+  .scroll-box {
+    max-height: 200px;
+    overflow-y: scroll;
+  }
+  .selected {
+    background-color: ${colors["--grey-04"]};
+  }
+  .text-wrap {
+    overflow: hidden;
+    white-space: normal;
+  }
+  .text-orange {
+    color: rgba(255, 149, 0, 1) !important;
+  }
+  .disabled {
+    background-color: ${colors["--grey-04"]} !important;
+    color: ${colors["--text-secondary-color"]} !important;
+    border-color: ${colors["--border-color"]};
+    cursor: not-allowed !important;
+    border-radius: 5px;
+    opacity: inherit !important;
+  }
+  .text-green {
+    color: ${colors["--other-green"]};
+  }
+  .input-group {
+    position: relative;
+  }
+  .input-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .amount-input {
+    margin-left: 55px !important;
+    padding-block: 9px !important;
+  }
+  .error-message {
+    color: red;
+    font-size: 0.875rem;
+    margin-top: 5px;
+  }
+  .action-buttons button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .dropdown-menu {
+    width: 100%;
+    background-color: ${colors["--bg-page-color"]} !important;
+    color: ${colors["--text-color"]} !important;
+  }
+  .dropdown-item {
+    cursor: pointer;
+  }
+  .dropdown-item.active,
+  .dropdown-item:active {
+    background-color: ${colors["--grey-04"]} !important;
+    color: inherit !important;
+  }
+  .dropdown-item:hover,
+  .dropdown-item:focus {
+    background-color: ${colors["--grey-04"]} !important;
+    color: inherit !important;
+  }
+  .btn-outline-secondary {
+    border-color: ${colors["--border-color"]} !important;
+    color: ${colors["--text-color"]} !important;
+    border-width: 1px !important;
+  }
+  .btn-outline-secondary i {
+    color: ${colors["--text-color"]} !important;
+  }
+  .btn-outline-secondary:hover {
+    color: ${colors["--text-color"]} !important;
+    border-color: ${colors["--border-color"]} !important;
+    background: ${colors["--grey-035"]} !important;
+  }
+  .btn{
+    padding: 0.5rem 1.2rem !important;
+  }
+  .theme-btn {
+    background: ${colors["--theme-color"]} !important;
+    color: white !important;
+    border: none;
+  }
+  .theme-btn.btn:hover {
+    color: white !important;
+    background: ${colors["--theme-color-dark"]} !important;
+  }  
+  .bg-validator-info {
+    background: rgba(0, 16, 61, 0.06);
+    color: ${colors["--text-color"]};
+    padding-inline: 0.8rem;
+    padding-block: 0.5rem;
+    font-weight: 500;
+    font-size: 13px;
+  }
+
+  .use-max-bg {
+    color: #007aff;
+    cursor: pointer;
+  }
+
+  .text-sm {
+    font-size: 13px;
+  }
+
+  </style>
+</head>
+<body data-bs-theme=${isDarkTheme ? "dark" : "light"}>
+<div class='d-flex flex-column gap-3'>
+  <div class="d-flex flex-column">
+    <label for="dropdown" class="form-label">Validator</label>
+    <div class="custom-select" tabindex="0">
+      <div id="dropdown" class="dropdown-toggle bg-dropdown border rounded-2 btn drop-btn" onclick="toggleDropdown()">
+        <div id="selectedOption" class="selected-option w-100 text-wrap">Select a validator</div>
+      </div>
+      <div id="dropdownMenu" class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start px-2" style="display:none;">
+        <input id="searchInput" type="text" class="form-control mb-2" placeholder="Search options" onkeyup="handleSearch(event)" />
+        <div id="scrollBox" class="scroll-box"></div>
+      </div>
+    </div>
+  </div>
+
+  <div id="validator-info" class="gap-2 align-items-center my-2 rounded-2 bg-validator-info" style="display: none;">
+  <i class="bi bi-info-circle h6 mb-0"></i>
+  <span id="lockup-message"></span>
+</div>
+  
+  <div class="d-flex flex-column">
+  <div class='d-flex justify-content-between'>
+    <label for="amount" class="form-label">Amount</label>
+    <div id='use-max-amount' class='use-max-bg px-3 py-1 rounded-2' style="display: none;"> Use Max </div>
+    </div>
+    <div class="input-group">
+  <span class="input-group-text input-icon">
+    <svg
+      width="30"
+      height="30"
+      viewBox="0 0 32 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="1"
+        y="1.5"
+        width="30"
+        height="30"
+        rx="15"
+        stroke=${colors["--icon-color"]}
+        stroke-width="2"
+      />
+      <path
+        d="M20.8341 9.31248L17.4906 14.2778C17.4364 14.3495 17.4113 14.439 17.4204 14.5284C17.4296 14.6178 17.4722 14.7004 17.5397 14.7597C17.6072 14.8189 17.6947 14.8504 17.7844 14.8477C17.8742 14.8451 17.9596 14.8085 18.0235 14.7454L21.3138 11.9009C21.3328 11.8835 21.3564 11.8721 21.3818 11.868C21.4072 11.8639 21.4333 11.8674 21.4568 11.878C21.4802 11.8886 21.5 11.9058 21.5138 11.9276C21.5275 11.9494 21.5346 11.9747 21.5341 12.0005V20.9409C21.5338 20.968 21.5253 20.9945 21.5096 21.0166C21.4939 21.0388 21.4719 21.0556 21.4464 21.0649C21.4209 21.0742 21.3932 21.0754 21.3669 21.0685C21.3407 21.0616 21.3172 21.0469 21.2996 21.0262L11.3507 9.11514C11.1918 8.92392 10.9931 8.76978 10.7685 8.66352C10.5438 8.55726 10.2987 8.50146 10.0502 8.50003H9.70375C9.25189 8.50003 8.81853 8.67965 8.49902 8.99938C8.1795 9.31911 8 9.75276 8 10.2049V22.7951C8 23.2473 8.1795 23.6809 8.49902 24.0007C8.81853 24.3204 9.25189 24.5 9.70375 24.5C9.9949 24.5 10.2812 24.4253 10.5353 24.283C10.7894 24.1408 11.0028 23.9358 11.1552 23.6876L14.4988 18.7222C14.553 18.6506 14.578 18.561 14.5689 18.4716C14.5598 18.3822 14.5172 18.2996 14.4496 18.2404C14.3821 18.1811 14.2947 18.1497 14.2049 18.1523C14.1151 18.155 14.0297 18.1916 13.9658 18.2547L10.6755 21.0991C10.6566 21.1165 10.6329 21.128 10.6075 21.1321C10.5821 21.1361 10.556 21.1327 10.5326 21.1221C10.5091 21.1115 10.4893 21.0942 10.4755 21.0724C10.4618 21.0506 10.4547 21.0253 10.4553 20.9996V12.068C10.4555 12.0409 10.4641 12.0145 10.4797 11.9923C10.4954 11.9702 10.5175 11.9533 10.543 11.944C10.5684 11.9348 10.5962 11.9335 10.6224 11.9404C10.6486 11.9473 10.6721 11.9621 10.6898 11.9827L20.6387 23.8938C20.7987 24.0833 20.9982 24.2355 21.2231 24.3399C21.448 24.4443 21.693 24.4984 21.9409 24.4982H22.2962C22.52 24.4982 22.7415 24.4541 22.9482 24.3684C23.155 24.2828 23.3428 24.1572 23.501 23.9989C23.6592 23.8406 23.7847 23.6526 23.8703 23.4458C23.9559 23.2389 24 23.0172 24 22.7933V10.2049C24 9.98013 23.9556 9.75756 23.8693 9.55001C23.783 9.34247 23.6566 9.15405 23.4972 8.9956C23.3379 8.83714 23.1488 8.71178 22.9409 8.62674C22.7329 8.54169 22.5102 8.49863 22.2856 8.50003C21.9944 8.50007 21.7082 8.57476 21.4541 8.71699C21.2 8.85922 20.9865 9.06424 20.8341 9.31248Z"
+        fill=${colors["--icon-color"]}
+      />
+    </svg>
+  </span>
+  <input type="number" id="amount" class="form-control amount-input" placeholder="Enter amount" />
+</div>
+<div id='available-balance' class='align-items-center text-sm gap-1 text-secondary mt-1' style="display: none;"> Available to unstake: </div>
+    <div id="amountError" class="error-message" style="display:none;"></div>
+  </div>
+
+  <div class="d-flex flex-column">
+    <label for="notes" class="form-label">Notes</label>
+    <textarea id="notes" class="form-control" rows="3" placeholder="Enter your notes here..."></textarea>
+  </div>
+
+  <div class="d-flex gap-3 align-items-center justify-content-end">
+    <button id="cancelBtn" class="btn btn-outline-secondary" onclick="cancelForm()">Cancel</button>
+    <button id="submitBtn" class="btn theme-btn" onclick="submitForm()" disabled>Submit</button>
+  </div>
+</div>
+
+<script>
+  let options = [];
+  let searchTerm = '';
+  let isOpen = false;
+  let treasuryDaoID = '';
+  let lockupContract = '';
+  let selectedWallet = '';
+  let selectedOption = null;
+  let maxAmount = null;
+  let lockupStakedPoolId = null;
+  let isStakePage = true;
+
+  // Check if amount exceeds the max value
+  function checkAmount() {
+    const amountInput = document.getElementById("amount");
+    const amountError = document.getElementById("amountError");
+    const amountValue = parseFloat(amountInput.value);
+
+    if (typeof maxAmount === "number" &&  amountValue > maxAmount) {
+      amountError.textContent = isStakePage ? "Your account doesn't have sufficient balance." : "The amount exceeds the balance you have staked.";
+      amountError.style.display = 'block';
+      document.getElementById("submitBtn").disabled = true;
+    } else {
+      amountError.style.display = 'none';
+      if(selectedOption){
+        document.getElementById("submitBtn").disabled = false;
+      }
+      
+    }
+  }
+
+  // Add event listener to the Amount input field
+  document.getElementById("amount").addEventListener("input", checkAmount);
+
+  // Toggle the dropdown menu visibility
+  function toggleDropdown() {
+    isOpen = !isOpen;
+    document.getElementById("dropdownMenu").style.display = isOpen ? 'block' : 'none';
+  }
+
+  // Handle search input
+  function handleSearch(event) {
+    searchTerm = event.target.value.toLowerCase();
+    filterOptions();
+  }
+
+  // Filter the options based on search term
+  function filterOptions() {
+    const filteredOptions = options.filter(option => option.pool_id.toLowerCase().includes(searchTerm));
+    displayOptions(filteredOptions);
+  }
+
+  function formatNearAmount(amount) {
+    return Big(amount ?? "0")
+      .div(Big(10).pow(24))
+      .toFixed(2);
+  }
+
+  // Display filtered options in the dropdown
+  function displayOptions(filteredOptions) {
+    const scrollBox = document.getElementById("scrollBox");
+    scrollBox.innerHTML = ''; // Clear current options
+  
+    filteredOptions.forEach(option => {
+      const optionElement = document.createElement('div');
+      optionElement.className = 'dropdown-item cursor-pointer w-100 text-wrap px-3 text-truncate d-flex flex-column gap-1 border-bottom';
+      optionElement.style.paddingBlock = '0.8rem';
+  
+      // Fee and pool_id content
+      optionElement.innerHTML = 
+        '<div class="d-flex align-items-center gap-2 text-sm">' +
+          '<span class="text-secondary">' + option.fee + '% Fee</span>' +
+          '<span class="text-green">Active</span>' +
+        '</div>' +
+        '<div class="h6 mb-0">' + option.pool_id + '</div>';
+  
+      // Add the balance display section if stakedBalance exists
+      if (option.stakedBalance && option.stakedBalance[selectedWallet]) {
+        const { stakedBalance, unstakedBalance, availableToWithdrawBalance } = option.stakedBalance[selectedWallet];
+        let balanceContainer = '<div class="d-flex flex-column gap-1">';
+  
+        if (stakedBalance > 1) {
+          balanceContainer += 
+            '<div class="d-flex align-items-center gap-1 text-sm">' +
+              '<div class="text-secondary">Staked:</div>' +
+              '<div class="text-orange">' + formatNearAmount(stakedBalance) + ' NEAR</div>' +
+            '</div>';
+        }
+  
+        if (unstakedBalance > 1) {
+          balanceContainer += 
+            '<div class="d-flex align-items-center gap-1 text-sm">' +
+              '<div class="text-secondary">Pending release:</div>' +
+              '<div class="text-orange">' + formatNearAmount(unstakedBalance) + ' NEAR</div>' +
+            '</div>';
+        }
+  
+        if (availableToWithdrawBalance > 1) {
+          balanceContainer += 
+            '<div class="d-flex align-items-center gap-1 text-sm">' +
+              '<div class="text-secondary">Available for withdrawal:</div>' +
+              '<div class="text-orange">' + formatNearAmount(availableToWithdrawBalance) + ' NEAR</div>' +
+            '</div>';
+        }
+  
+        balanceContainer += '</div>';
+        optionElement.innerHTML += balanceContainer;
+      }
+  
+      // Handle the option click
+      optionElement.onclick = function() {
+        selectOption(option);
+        toggleDropdown()
+      };
+  
+      // Append the option to the scroll box
+      scrollBox.appendChild(optionElement);
+    });
+  }
+  
+
+  // Select an option from the dropdown
+  function selectOption(option) {
+    selectedOption = option;
+    document.getElementById("selectedOption").innerText = option?.pool_id ?? 'Select a validator';
+    const useMaxBtn = document.getElementById("use-max-amount"); 
+    const availableBalance = document.getElementById("available-balance"); 
+
+    if(option){
+      const stakedBalance = formatNearAmount(option?.stakedBalance?.[selectedWallet]?.stakedBalance)
+      useMaxBtn.style.display = 'flex';
+      availableBalance.innerHTML = "Available to unstake: " + stakedBalance
+      availableBalance.style.display = isStakePage ? 'none' : 'flex';
+      maxAmount = isStakePage ? maxAmount : parseFloat(stakedBalance) 
+      useMaxBtn.onclick = function() {
+        const amountInput = document.getElementById("amount");
+        amountInput.value = maxAmount;       
+        checkAmount() 
+      };
+    } else {
+      useMaxBtn.style.display = 'none';
+      availableBalance.style.display = 'none';
+    }
+    
+  }
+
+  function submitForm() {
+    const amountInput = document.getElementById("amount");
+    const notesInput = document.getElementById("notes");
+    window.parent.postMessage(
+        { 
+            handler: "onSubmit", 
+            notes: notesInput.value, 
+            amount: amountInput.value, 
+            validatorAccount: selectedOption.pool_id 
+        }, 
+            "*"
+        );
+  }
+
+    function cancelForm() {
+        window.parent.postMessage({ handler: "onCancel" }, "*");
+    }
+
+    
+    function updateIframeHeight() {
+      const height = document.documentElement.scrollHeight || document.body.scrollHeight;
+      // Send the new height to the parent window
+      window.parent.postMessage({ handler: 'updateIframeHeight', height: height }, '*');
+    }    
+
+
+   window.addEventListener(
+      "message",
+      function (event) {
+        treasuryDaoID = event.data.treasuryDaoID;
+        lockupContract = event.data.lockupContract;
+        lockupStakedPoolId = event.data.lockupStakedPoolId;
+        selectedWallet =  event.data.selectedWallet;
+        isStakePage = event.data.isStakePage;
+        options = event.data.options;
+        displayOptions(options);
+        maxAmount = event.data.availableBalance ? parseFloat(event.data.availableBalance) : null;
+        document.getElementById("submitBtn").disabled = event.data.disbabledActionButtons;
+        document.getElementById("cancelBtn").disabled = event.data.disbabledActionButtons;
+        if (event.data.selectedValue) {
+          // When selectedValue is set, use it and select the option
+          selectedOption = event.data.selectedValue;
+          selectOption(selectedOption);
+        } else {
+          selectedOption = null; // Reset selectedOption
+          selectOption();
+        }
+        
+        const dropdown = document.getElementById('dropdown');
+        if (event.data.disabledDropdown) {
+          // Disable the dropdown
+          dropdown.classList.add('disabled');
+          dropdown.removeAttribute('onclick');
+        } else {
+          // If disabledDropdown is not set, reset the dropdown to its default state
+          dropdown.classList.remove('disabled');
+          dropdown.setAttribute('onclick', 'toggleDropdown()');
+        } 
+        const validatorInfoDiv = document.getElementById("validator-info");
+        const lockupMessage = document.getElementById("lockup-message");
+        if (selectedWallet && lockupContract && selectedWallet === lockupContract) {
+          // Show the div
+          validatorInfoDiv.style.display = "flex";
+      
+          if (lockupStakedPoolId) {
+            lockupMessage.innerHTML = '<span>You cannot split your locked funds across multiple validators. To change your validator, please contact our support team.</span>';
+          } else {
+            lockupMessage.innerHTML = "<span>You cannot split your locked funds across multiple validators. Choose <span class='fw-bold'>one</span> validator from the list. Once you select a validator and click submit, a one-time whitelist request will be created. You\'ll need to approve this request before you can proceed with approving the staking request. <br><br>Note: We currently do not support changing validators through the treasury UI. If you need to change your validator, please contact our team.</span>";
+          }
+        } else {
+          validatorInfoDiv.style.display = "none";
+        }
+        updateIframeHeight()
+      }
+    );
+</script>
+</body>
+</html>
+`;
+
+State.init({
+  height: "350px",
+});
+
+return (
+  <iframe
+    srcDoc={code}
+    style={{ width: "100%", height: state.height }}
+    message={{
+      ...props,
+      onCancel: null,
+      onSubmit: null,
+    }}
+    onMessage={(e) => {
+      switch (e.handler) {
+        case "onCancel": {
+          onCancel();
+        }
+        case "onSubmit": {
+          onSubmit(e.validatorAccount, e.amount, e.notes);
+        }
+        case "updateIframeHeight": {
+          State.update({ height: e.height });
+        }
+      }
+    }}
+  />
+);
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/WalletDropdown.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/WalletDropdown.jsx
index f6f8f396..5c7bb822 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/WalletDropdown.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/WalletDropdown.jsx
@@ -24,7 +24,7 @@ const nearPrice = useCache(
     ).then((res) => {
       return res.body.near?.usd;
     }),
-  "price",
+  "near-price",
   { subscribe: false }
 );
 
diff --git a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
index 87e870dd..51f2bcc3 100644
--- a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
+++ b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
@@ -281,27 +281,46 @@ async function openStakeForm({ page, isLockup, daoAccount, lockupContract }) {
 }
 
 async function fillValidatorAccount({ page }) {
-  // validator dropdown shouldn't take more than 20 seconds
-  const poolSelector = await page.getByTestId("validator-dropdown");
-  await expect(poolSelector).toBeVisible({ timeout: 20_000 });
+  // validator dropdown shouldn't take more than 10 seconds
+  const poolSelector = await page
+    .frameLocator("iframe")
+    .nth(2)
+    .locator("#dropdown");
+  await expect(poolSelector).toBeVisible({ timeout: 10_000 });
   await poolSelector.click();
-  await page.waitForTimeout(5_000);
+  await page.waitForTimeout(1_000);
 
-  const search = await page.getByPlaceholder("Search");
+  const search = await page
+    .frameLocator("iframe")
+    .nth(2)
+    .getByPlaceholder("Search options");
   search.focus();
   search.fill("astro");
-  await page.getByText(stakedPoolAccount).first().click();
+  await page
+    .frameLocator("iframe")
+    .nth(2)
+    .getByText(stakedPoolAccount)
+    .first()
+    .click();
 }
 
 async function checkForStakeAmount({ page, errorText, availableBalance }) {
-  const submitBtn = page.getByRole("button", { name: "Submit" });
-  const stakeAmount = page.getByRole("spinbutton");
+  const submitBtn = page
+    .frameLocator("iframe")
+    .nth(2)
+    .getByRole("button", { name: "Submit" });
+  const stakeAmount = page
+    .frameLocator("iframe")
+    .nth(2)
+    .getByPlaceholder("Enter amount");
   await stakeAmount.fill((parseFloat(availableBalance) + 2).toString());
-  await stakeAmount.blur();
-  const amountErrorText = page.getByText(errorText);
-  await expect(amountErrorText).toBeVisible();
+  const amountErrorText = page
+    .frameLocator("iframe")
+    .nth(2)
+    .getByText(errorText);
+  await expect(amountErrorText).toBeVisible({ timeout: 10_000 });
   await expect(submitBtn).toBeDisabled();
-  await page.getByText("Use Max").click();
+  await page.frameLocator("iframe").nth(2).getByText("Use Max").click();
   await expect(amountErrorText).toBeHidden();
 }
 
@@ -605,6 +624,8 @@ test.describe("Have valid staked requests and sufficient token balance", functio
       });
 
       const stakingAmount = await page
+        .frameLocator("iframe")
+        .nth(2)
         .locator('input[placeholder="Enter amount"]')
         .first()
         .inputValue();
@@ -613,7 +634,12 @@ test.describe("Have valid staked requests and sufficient token balance", functio
         stakingAmount,
         daoName,
       });
-      await page.getByRole("button", { name: "Submit" }).click();
+
+      await page
+        .frameLocator("iframe")
+        .nth(2)
+        .getByRole("button", { name: "Submit" })
+        .click();
       const expectedTransactionModalObject = {
         proposal: {
           description: "* Proposal Action: stake",
@@ -632,6 +658,7 @@ test.describe("Have valid staked requests and sufficient token balance", functio
           },
         },
       };
+
       await expect(await getTransactionModalObject(page)).toEqual(
         expectedTransactionModalObject
       );
@@ -663,7 +690,11 @@ test.describe("Have valid staked requests and sufficient token balance", functio
         availableBalance: stakedNear,
         errorText: "The amount exceeds the balance you have staked.",
       });
-      await page.getByRole("button", { name: "Submit" }).click();
+      await page
+        .frameLocator("iframe")
+        .nth(2)
+        .getByRole("button", { name: "Submit" })
+        .click();
       const expectedTransactionModalObject = {
         proposal: {
           description: "* Proposal Action: unstake",
@@ -980,9 +1011,12 @@ test.describe("Withdraw request", function () {
 async function openLockupStakingForm({ page, daoAccount, lockupContract }) {
   await openStakeForm({ page, isLockup: true, daoAccount, lockupContract });
   await expect(
-    page.getByText(
-      "You cannot split your locked funds across multiple validators."
-    )
+    page
+      .frameLocator("iframe")
+      .nth(2)
+      .getByText(
+        "You cannot split your locked funds across multiple validators."
+      )
   ).toBeVisible({
     timeout: 10_000,
   });

From c752177fb02ba0421ceed362c0aff5b1a7341359 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Mon, 27 Jan 2025 18:01:02 +0530
Subject: [PATCH 2/7] minor fixes

---
 .../widget/components/TokensDropdown.jsx      |  2 +-
 .../widget/lib/common.jsx                     |  1 -
 .../pages/dashboard/TransactionHistory.jsx    |  2 +-
 .../stake-delegation/CreateStakeRequest.jsx   | 23 ++++----
 .../stake-delegation/CreateUnstakeRequest.jsx |  1 -
 .../CreateWithdrawRequest.jsx                 | 52 ++++++++++---------
 .../pages/stake-delegation/Validator.jsx      |  2 +-
 .../stake-delegation/stake-delegation.spec.js | 22 +++++---
 8 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/instances/widgets.treasury-factory.near/widget/components/TokensDropdown.jsx b/instances/widgets.treasury-factory.near/widget/components/TokensDropdown.jsx
index 28b544dc..3b476807 100644
--- a/instances/widgets.treasury-factory.near/widget/components/TokensDropdown.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/TokensDropdown.jsx
@@ -18,7 +18,7 @@ onChange = onChange || (() => {});
 
 const pikespeakKey = isBosGateway()
   ? "${REPL_PIKESPEAK_KEY}"
-  : props.pikespeakKey;
+  : props.pikespeakKey ?? "263f0c69-69e2-4919-ae02-d8ca7a696da2";
 
 if (!pikespeakKey) {
   return (
diff --git a/instances/widgets.treasury-factory.near/widget/lib/common.jsx b/instances/widgets.treasury-factory.near/widget/lib/common.jsx
index 609ec099..ef427658 100644
--- a/instances/widgets.treasury-factory.near/widget/lib/common.jsx
+++ b/instances/widgets.treasury-factory.near/widget/lib/common.jsx
@@ -427,7 +427,6 @@ function getPermissionsText(type) {
 function isBosGateway() {
   return (
     // for tests
-    gatewayOrigin.includes("localhost:8080") ||
     gatewayOrigin.includes("near.social") ||
     gatewayOrigin.includes("dev.near.org")
   );
diff --git a/instances/widgets.treasury-factory.near/widget/pages/dashboard/TransactionHistory.jsx b/instances/widgets.treasury-factory.near/widget/pages/dashboard/TransactionHistory.jsx
index 956e6c63..e7a30001 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/dashboard/TransactionHistory.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/dashboard/TransactionHistory.jsx
@@ -53,7 +53,7 @@ function sortByDate(items) {
 // use BOS open API for gateway and paid for web4
 const pikespeakKey = isBosGateway()
   ? "${REPL_PIKESPEAK_KEY}"
-  : props.pikespeakKey;
+  : props.pikespeakKey ?? "263f0c69-69e2-4919-ae02-d8ca7a696da2";
 
 if (!pikespeakKey) {
   return <></>;
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
index 684580ea..885ddd07 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
@@ -1,5 +1,9 @@
-const { getNearBalances, LOCKUP_MIN_BALANCE_FOR_STORAGE, TooltipText } =
-  VM.require("${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common");
+const {
+  getNearBalances,
+  LOCKUP_MIN_BALANCE_FOR_STORAGE,
+  TooltipText,
+  isBosGateway,
+} = VM.require("${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common");
 const { NearToken } = VM.require(
   "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Icons"
 ) || { NearToken: () => <></> };
@@ -13,7 +17,11 @@ const { encodeToMarkdown } = VM.require(
 const instance = props.instance;
 const onCloseCanvas = props.onCloseCanvas ?? (() => {});
 
-if (!instance || !LOCKUP_MIN_BALANCE_FOR_STORAGE) {
+if (
+  !instance ||
+  !LOCKUP_MIN_BALANCE_FOR_STORAGE ||
+  typeof isBosGateway !== "function"
+) {
   return <></>;
 }
 
@@ -126,7 +134,6 @@ useEffect(() => {
     const checkForNewProposal = () => {
       getLastProposalId().then((id) => {
         if (typeof lastProposalId === "number" && lastProposalId !== id) {
-          cleanInputs();
           onCloseCanvas();
           clearTimeout(errorTimeout);
           refreshData();
@@ -178,11 +185,9 @@ const BalanceDisplay = ({ label, balance, tooltipInfo, noBorder }) => {
   );
 };
 
-const pikespeakKey = "38020cf5-d3c6-40a6-b1fe-f3428747cafc";
-// isBosGateway()
-//   ? "${REPL_PIKESPEAK_KEY}"
-// :
-props.pikespeakKey;
+const pikespeakKey = isBosGateway()
+  ? "${REPL_PIKESPEAK_KEY}"
+  : props.pikespeakKey ?? "263f0c69-69e2-4919-ae02-d8ca7a696da2";
 
 const pikespeakOptions = {
   method: "GET",
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
index 93a4ace8..f9c54c6f 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
@@ -186,7 +186,6 @@ useEffect(() => {
     const checkForNewProposal = () => {
       getLastProposalId().then((id) => {
         if (typeof lastProposalId === "number" && lastProposalId !== id) {
-          cleanInputs();
           onCloseCanvas();
           refreshData();
           clearTimeout(errorTimeout);
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
index 0ec81cf4..d6d7f764 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
@@ -472,31 +472,33 @@ return (
         />
       )}
       <Pools />
-      <div className="d-flex mt-2 gap-3 justify-content-end">
-        <Widget
-          src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
-          props={{
-            classNames: {
-              root: "btn btn-outline-secondary shadow-none no-transparent",
-            },
-            label: "Cancel",
-            onClick: () => {
-              onCloseCanvas();
-            },
-            disabled: isTxnCreated,
-          }}
-        />
-        <Widget
-          src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
-          props={{
-            classNames: { root: "theme-btn" },
-            label: "Submit",
-            disabled: !withdrawValidators?.length || isTxnCreated,
-            onClick: onSubmitClick,
-            loading: isTxnCreated,
-          }}
-        />
-      </div>
+      {isReadyToWithdraw && (
+        <div className="d-flex mt-2 gap-3 justify-content-end">
+          <Widget
+            src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
+            props={{
+              classNames: {
+                root: "btn btn-outline-secondary shadow-none no-transparent",
+              },
+              label: "Cancel",
+              onClick: () => {
+                onCloseCanvas();
+              },
+              disabled: isTxnCreated,
+            }}
+          />
+          <Widget
+            src={`${REPL_DEVHUB}/widget/devhub.components.molecule.Button`}
+            props={{
+              classNames: { root: "theme-btn" },
+              label: "Submit",
+              disabled: !withdrawValidators?.length || isTxnCreated,
+              onClick: onSubmitClick,
+              loading: isTxnCreated,
+            }}
+          />
+        </div>
+      )}
     </div>
   </Container>
 );
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Validator.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Validator.jsx
index fde57b6e..c5845066 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Validator.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Validator.jsx
@@ -5,7 +5,7 @@ const { isBosGateway } = VM.require(
 const validatorId = props.validatorId;
 const pikespeakKey = isBosGateway()
   ? "${REPL_PIKESPEAK_KEY}"
-  : props.pikespeakKey;
+  : props.pikespeakKey ?? "263f0c69-69e2-4919-ae02-d8ca7a696da2";
 
 if (!pikespeakKey) {
   return (
diff --git a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
index 51f2bcc3..a697ba4b 100644
--- a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
+++ b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
@@ -576,7 +576,7 @@ test.describe("Have valid staked requests and sufficient token balance", functio
   test.describe("Admin connected", function () {
     test.use({
       storageState:
-        "playwright-tests/storage-states/wallet-connected-admin-with-accesskey.json",
+        "playwright-tests/storage-states/wallet-connected-admin.json",
     });
 
     test("insufficient account balance should show warning modal, disallow action ", async ({
@@ -795,7 +795,6 @@ test.describe("Withdraw request", function () {
     ).toBeVisible({
       timeout: 10_000,
     });
-    await expect(page.getByRole("button", { name: "Submit" })).toBeDisabled();
   });
 
   test("Unstaked tokens are not ready to be withdrawn, show warning screen", async ({
@@ -815,7 +814,6 @@ test.describe("Withdraw request", function () {
     ).toBeVisible({
       timeout: 10_000,
     });
-    await expect(page.getByRole("button", { name: "Submit" })).toBeDisabled();
   });
 
   test("Have valid withdraw tokens from one pool, should show in table after submission", async ({
@@ -1103,7 +1101,11 @@ test.describe("Lockup staking", function () {
         availableBalance: formatNearAmount(sufficientAvailableBalance),
         errorText: "Your account doesn't have sufficient balance.",
       });
-      await page.getByRole("button", { name: "Submit" }).click();
+      await page
+        .frameLocator("iframe")
+        .nth(2)
+        .getByRole("button", { name: "Submit" })
+        .click();
       await expect(page.getByText("Processing your request ...")).toBeVisible();
 
       await expect(await getTransactionModalObject(page)).toEqual({
@@ -1225,7 +1227,11 @@ test.describe("Lockup staking", function () {
         availableBalance: formatNearAmount(sufficientAvailableBalance),
         errorText: "Your account doesn't have sufficient balance.",
       });
-      await page.getByRole("button", { name: "Submit" }).click();
+      await page
+        .frameLocator("iframe")
+        .nth(2)
+        .getByRole("button", { name: "Submit" })
+        .click();
       await expect(page.getByText("Processing your request ...")).toBeVisible();
 
       await expect(await getTransactionModalObject(page)).toEqual({
@@ -1274,7 +1280,11 @@ test.describe("Lockup staking", function () {
         availableBalance: stakedNear,
         errorText: "The amount exceeds the balance you have staked.",
       });
-      await page.getByRole("button", { name: "Submit" }).click();
+      await page
+        .frameLocator("iframe")
+        .nth(2)
+        .getByRole("button", { name: "Submit" })
+        .click();
       await expect(page.getByText("Processing your request ...")).toBeVisible();
 
       await expect(await getTransactionModalObject(page)).toEqual({

From 060abd11f7e83d94a9f097872e5b26a690c65a9a Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Mon, 27 Jan 2025 22:16:05 +0530
Subject: [PATCH 3/7] fmt

---
 .../stake-delegation/stake-delegation.spec.js | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
index a697ba4b..53f3835a 100644
--- a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
+++ b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
@@ -284,7 +284,7 @@ async function fillValidatorAccount({ page }) {
   // validator dropdown shouldn't take more than 10 seconds
   const poolSelector = await page
     .frameLocator("iframe")
-    .nth(2)
+    .nth(1)
     .locator("#dropdown");
   await expect(poolSelector).toBeVisible({ timeout: 10_000 });
   await poolSelector.click();
@@ -292,13 +292,13 @@ async function fillValidatorAccount({ page }) {
 
   const search = await page
     .frameLocator("iframe")
-    .nth(2)
+    .nth(1)
     .getByPlaceholder("Search options");
   search.focus();
   search.fill("astro");
   await page
     .frameLocator("iframe")
-    .nth(2)
+    .nth(1)
     .getByText(stakedPoolAccount)
     .first()
     .click();
@@ -307,20 +307,20 @@ async function fillValidatorAccount({ page }) {
 async function checkForStakeAmount({ page, errorText, availableBalance }) {
   const submitBtn = page
     .frameLocator("iframe")
-    .nth(2)
+    .nth(1)
     .getByRole("button", { name: "Submit" });
   const stakeAmount = page
     .frameLocator("iframe")
-    .nth(2)
+    .nth(1)
     .getByPlaceholder("Enter amount");
   await stakeAmount.fill((parseFloat(availableBalance) + 2).toString());
   const amountErrorText = page
     .frameLocator("iframe")
-    .nth(2)
+    .nth(1)
     .getByText(errorText);
   await expect(amountErrorText).toBeVisible({ timeout: 10_000 });
   await expect(submitBtn).toBeDisabled();
-  await page.frameLocator("iframe").nth(2).getByText("Use Max").click();
+  await page.frameLocator("iframe").nth(1).getByText("Use Max").click();
   await expect(amountErrorText).toBeHidden();
 }
 
@@ -605,7 +605,7 @@ test.describe("Have valid staked requests and sufficient token balance", functio
       page,
       daoAccount,
     }) => {
-      test.setTimeout(200_000);
+      test.setTimeout(250_000);
       const daoName = daoAccount.split(".")[0];
       const sandbox = new SandboxRPC();
       await sandbox.init();
@@ -625,7 +625,7 @@ test.describe("Have valid staked requests and sufficient token balance", functio
 
       const stakingAmount = await page
         .frameLocator("iframe")
-        .nth(2)
+        .nth(1)
         .locator('input[placeholder="Enter amount"]')
         .first()
         .inputValue();
@@ -637,7 +637,7 @@ test.describe("Have valid staked requests and sufficient token balance", functio
 
       await page
         .frameLocator("iframe")
-        .nth(2)
+        .nth(1)
         .getByRole("button", { name: "Submit" })
         .click();
       const expectedTransactionModalObject = {
@@ -672,7 +672,7 @@ test.describe("Have valid staked requests and sufficient token balance", functio
       daoAccount,
       instanceAccount,
     }) => {
-      test.setTimeout(200_000);
+      test.setTimeout(250_000);
       const daoName = daoAccount.split(".")[0];
       const sandbox = new SandboxRPC();
       await sandbox.init();
@@ -692,7 +692,7 @@ test.describe("Have valid staked requests and sufficient token balance", functio
       });
       await page
         .frameLocator("iframe")
-        .nth(2)
+        .nth(1)
         .getByRole("button", { name: "Submit" })
         .click();
       const expectedTransactionModalObject = {
@@ -820,7 +820,7 @@ test.describe("Withdraw request", function () {
     page,
     daoAccount,
   }) => {
-    test.setTimeout(200_000);
+    test.setTimeout(250_000);
     const daoName = daoAccount.split(".")[0];
     const sandbox = new SandboxRPC();
     await sandbox.init();
@@ -873,7 +873,7 @@ test.describe("Withdraw request", function () {
     daoAccount,
     instanceAccount,
   }) => {
-    test.setTimeout(200_000);
+    test.setTimeout(250_000);
     const daoName = daoAccount.split(".")[0];
     const sandbox = new SandboxRPC();
     await sandbox.init();
@@ -1011,7 +1011,7 @@ async function openLockupStakingForm({ page, daoAccount, lockupContract }) {
   await expect(
     page
       .frameLocator("iframe")
-      .nth(2)
+      .nth(1)
       .getByText(
         "You cannot split your locked funds across multiple validators."
       )
@@ -1103,7 +1103,7 @@ test.describe("Lockup staking", function () {
       });
       await page
         .frameLocator("iframe")
-        .nth(2)
+        .nth(1)
         .getByRole("button", { name: "Submit" })
         .click();
       await expect(page.getByText("Processing your request ...")).toBeVisible();
@@ -1229,7 +1229,7 @@ test.describe("Lockup staking", function () {
       });
       await page
         .frameLocator("iframe")
-        .nth(2)
+        .nth(1)
         .getByRole("button", { name: "Submit" })
         .click();
       await expect(page.getByText("Processing your request ...")).toBeVisible();
@@ -1282,7 +1282,7 @@ test.describe("Lockup staking", function () {
       });
       await page
         .frameLocator("iframe")
-        .nth(2)
+        .nth(1)
         .getByRole("button", { name: "Submit" })
         .click();
       await expect(page.getByText("Processing your request ...")).toBeVisible();

From 294e4b654487c2832287ad5f241184d8d51dc896 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Mon, 27 Jan 2025 22:39:59 +0530
Subject: [PATCH 4/7] change bg colors

---
 .../widget/components/templates/AppLayout.jsx      | 14 --------------
 .../ValidatorsDropDownWithSearch.jsx               |  4 ++--
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
index 030042f8..169b68d5 100644
--- a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
@@ -310,20 +310,6 @@ const Theme = styled.div`
     fill: var(--theme-color);
   }
 
-  .use-max-bg {
-    color: #007aff;
-    cursor: pointer;
-  }
-
-  .bg-validator-info {
-    background: rgba(0, 16, 61, 0.06);
-    color: var(--text-color);
-    padding-inline: 0.8rem;
-    padding-block: 0.5rem;
-    font-weight: 500;
-    font-size: 13px;
-  }
-
   .bg-validator-warning {
     background: rgba(255, 158, 0, 0.1);
     color: var(--other-warning);
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/ValidatorsDropDownWithSearch.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/ValidatorsDropDownWithSearch.jsx
index 88ae601a..558a6eab 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/ValidatorsDropDownWithSearch.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/ValidatorsDropDownWithSearch.jsx
@@ -166,8 +166,8 @@ const code = `
     background: ${colors["--theme-color-dark"]} !important;
   }  
   .bg-validator-info {
-    background: rgba(0, 16, 61, 0.06);
-    color: ${colors["--text-color"]};
+    background:  ${colors["--grey-04"]} !important;
+    color: ${colors["--grey-02"]} !important;
     padding-inline: 0.8rem;
     padding-block: 0.5rem;
     font-weight: 500;

From d9bf296bbc101f65d79c90ef200ac7e7cedd46fe Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Mon, 27 Jan 2025 23:02:52 +0530
Subject: [PATCH 5/7] move `StakedNearIframe` for tests

---
 .../stake-delegation/CreateStakeRequest.jsx   | 35 +++++++++----------
 .../stake-delegation/CreateUnstakeRequest.jsx | 34 +++++++++---------
 2 files changed, 34 insertions(+), 35 deletions(-)

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
index 885ddd07..4847332f 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
@@ -446,24 +446,6 @@ return (
         setPoolWithBalance: setNearStakedPoolsWithBalance,
       }}
     />
-
-    {lockupContract && (
-      <Widget
-        src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.StakedNearIframe`}
-        props={{
-          accountId: lockupContract,
-          setNearStakedTokens: (v) => setLockupStakedTokens(Big(v).toFixed(2)),
-          setNearUnstakedTokens: (v) =>
-            setLockupUnStakedTokens(Big(v).toFixed(2)),
-          setNearStakedTotalTokens: (v) =>
-            setLockupStakedTotalTokens(Big(v).toFixed(2)),
-          setNearWithdrawTokens: (v) =>
-            setLockupNearWithdrawTokens(Big(v).toFixed(2)),
-          setPoolWithBalance: setLockupStakedPoolsWithBalance,
-        }}
-      />
-    )}
-
     <div className="d-flex flex-column gap-3">
       {lockupContract && (
         <div className="d-flex flex-column gap-1">
@@ -526,5 +508,22 @@ return (
         />
       </div>
     </div>
+
+    {lockupContract && (
+      <Widget
+        src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.StakedNearIframe`}
+        props={{
+          accountId: lockupContract,
+          setNearStakedTokens: (v) => setLockupStakedTokens(Big(v).toFixed(2)),
+          setNearUnstakedTokens: (v) =>
+            setLockupUnStakedTokens(Big(v).toFixed(2)),
+          setNearStakedTotalTokens: (v) =>
+            setLockupStakedTotalTokens(Big(v).toFixed(2)),
+          setNearWithdrawTokens: (v) =>
+            setLockupNearWithdrawTokens(Big(v).toFixed(2)),
+          setPoolWithBalance: setLockupStakedPoolsWithBalance,
+        }}
+      />
+    )}
   </Container>
 );
diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
index f9c54c6f..622e65d8 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
@@ -425,23 +425,6 @@ return (
         setPoolWithBalance: setNearStakedPoolsWithBalance,
       }}
     />
-
-    {lockupContract && (
-      <Widget
-        src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.StakedNearIframe`}
-        props={{
-          accountId: lockupContract,
-          setNearStakedTokens: (v) => setLockupStakedTokens(Big(v).toFixed(2)),
-          setNearUnstakedTokens: (v) =>
-            setLockupUnStakedTokens(Big(v).toFixed(2)),
-          setNearStakedTotalTokens: (v) =>
-            setLockupStakedTotalTokens(Big(v).toFixed(2)),
-          setNearWithdrawTokens: (v) =>
-            setLockupNearWithdrawTokens(Big(v).toFixed(2)),
-          setPoolWithBalance: setLockupStakedPoolsWithBalance,
-        }}
-      />
-    )}
     <div className="d-flex flex-column gap-3">
       {lockupContract && (
         <div className="d-flex flex-column gap-1">
@@ -510,5 +493,22 @@ return (
         />
       )}
     </div>
+
+    {lockupContract && (
+      <Widget
+        src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.StakedNearIframe`}
+        props={{
+          accountId: lockupContract,
+          setNearStakedTokens: (v) => setLockupStakedTokens(Big(v).toFixed(2)),
+          setNearUnstakedTokens: (v) =>
+            setLockupUnStakedTokens(Big(v).toFixed(2)),
+          setNearStakedTotalTokens: (v) =>
+            setLockupStakedTotalTokens(Big(v).toFixed(2)),
+          setNearWithdrawTokens: (v) =>
+            setLockupNearWithdrawTokens(Big(v).toFixed(2)),
+          setPoolWithBalance: setLockupStakedPoolsWithBalance,
+        }}
+      />
+    )}
   </Container>
 );

From b553aadd96d6f7d8fa0ac71100812910d83112ba Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Tue, 28 Jan 2025 00:37:19 +0530
Subject: [PATCH 6/7] fix tests

---
 .../CreateWithdrawRequest.jsx                 |  1 -
 .../stake-delegation/stake-delegation.spec.js | 98 +++++++++----------
 2 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
index d6d7f764..db7b73fc 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/CreateWithdrawRequest.jsx
@@ -124,7 +124,6 @@ useEffect(() => {
     const checkForNewProposal = () => {
       getLastProposalId().then((id) => {
         if (typeof lastProposalId === "number" && lastProposalId !== id) {
-          cleanInputs();
           onCloseCanvas();
           refreshData();
           clearTimeout(errorTimeout);
diff --git a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
index 53f3835a..24ea6609 100644
--- a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
+++ b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
@@ -242,7 +242,9 @@ async function openWithdrawForm({
   daoAccount,
   lockupContract,
 }) {
-  await expect(page.getByText("Create Request", { exact: true })).toBeVisible();
+  await expect(page.getByText("Create Request", { exact: true })).toBeVisible({
+    timeout: 10_000,
+  });
   await page.locator(".dropdown").first().click();
   await page.locator(".dropdown-menu > div:nth-child(3)").click();
   await expect(
@@ -437,51 +439,46 @@ async function voteOnProposal({
 async function checkNewProposalSubmission({
   page,
   sandbox,
-  checkforMultiProposals,
+  checkforMultiProposals = false,
   daoAccount,
   daoName,
 }) {
-  const transactionToSendPromise = page.evaluate(async () => {
+  const method = checkforMultiProposals
+    ? "signAndSendTransactions"
+    : "signAndSendTransaction";
+
+  const transactionToSendPromise = page.evaluate(async (method) => {
     const selector = await document.querySelector("near-social-viewer")
       .selectorPromise;
 
     const wallet = await selector.wallet();
 
     return new Promise((resolve) => {
-      wallet.signAndSendTransaction = async (transaction) => {
+      wallet[method] = async (transaction) => {
         resolve(transaction);
-        return await new Promise(
-          (transactionSentPromiseResolve) =>
-            (window.transactionSentPromiseResolve =
-              transactionSentPromiseResolve)
-        );
+        return new Promise((transactionSentPromiseResolve) => {
+          window.transactionSentPromiseResolve = transactionSentPromiseResolve;
+        });
       };
     });
-  });
+  }, method);
 
   await page.getByRole("button", { name: "Confirm" }).click();
   const transactionToSend = await transactionToSendPromise;
+  const transaction = checkforMultiProposals
+    ? transactionToSend.transactions[0]
+    : transactionToSend;
 
   const transactionResult = await sandbox.account.functionCall({
     contractId: daoAccount,
     methodName: "add_proposal",
-    args: transactionToSend.actions[0].params.args,
-    attachedDeposit: transactionToSend.actions[0].params.deposit,
+    args: transaction.actions[0].params.args,
+    attachedDeposit: transaction.actions[0].params.deposit,
   });
-  const lastProposalId = await sandbox.getLastProposalId(daoName);
-
   await page.evaluate(async (transactionResult) => {
     window.transactionSentPromiseResolve(transactionResult);
   }, transactionResult);
-  await mockRpcRequest({
-    page,
-    filterParams: {
-      method_name: "get_last_proposal_id",
-    },
-    modifyOriginalResultFunction: () => {
-      return lastProposalId;
-    },
-  });
+  const lastProposalId = await sandbox.getLastProposalId(daoName);
   await expect(page.locator("div.modal-body code").nth(0)).toBeAttached({
     attached: false,
     timeout: 10_000,
@@ -611,7 +608,11 @@ test.describe("Have valid staked requests and sufficient token balance", functio
       await sandbox.init();
       await sandbox.attachRoutes(page);
       await sandbox.setupSandboxForSputnikDao(daoName);
-
+      await sandbox.addStakeRequestProposal({
+        stakedPoolAccount,
+        stakingAmount: "11.00",
+        daoName,
+      });
       await openStakeForm({ page });
 
       await fillValidatorAccount({
@@ -629,11 +630,6 @@ test.describe("Have valid staked requests and sufficient token balance", functio
         .locator('input[placeholder="Enter amount"]')
         .first()
         .inputValue();
-      await sandbox.addStakeRequestProposal({
-        stakedPoolAccount,
-        stakingAmount,
-        daoName,
-      });
 
       await page
         .frameLocator("iframe")
@@ -662,7 +658,6 @@ test.describe("Have valid staked requests and sufficient token balance", functio
       await expect(await getTransactionModalObject(page)).toEqual(
         expectedTransactionModalObject
       );
-
       await checkNewProposalSubmission({ page, sandbox, daoAccount, daoName });
       await sandbox.quitSandbox();
     });
@@ -679,8 +674,17 @@ test.describe("Have valid staked requests and sufficient token balance", functio
       await sandbox.attachRoutes(page);
       await sandbox.setupSandboxForSputnikDao(daoName);
       const args = "eyJhbW91bnQiOiIzMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAifQ==";
-      const description = `* Proposal Action: withdraw <br>* Show After Proposal Id Approved: 0 <br>* Custom Notes: Following to [#0](/${instanceAccount}/widget/app?page=stake-delegation&selectedTab=History&highlightProposalId=0) unstake request`;
-
+      const description = `* Proposal Action: withdraw <br>* Show After Proposal Id Approved: 2 <br>* Custom Notes: Following to [#2](/${instanceAccount}/widget/app?page=stake-delegation&selectedTab=History&highlightProposalId=2) unstake request`;
+      await sandbox.addUnstakeRequestProposal({
+        stakedPoolAccount,
+        functionCallArgs: args,
+        daoName,
+      });
+      await sandbox.addWithdrawRequestProposal({
+        stakedPoolAccount,
+        description: description,
+        daoName,
+      });
       await openUnstakeForm({ page });
       await fillValidatorAccount({
         page,
@@ -740,16 +744,6 @@ test.describe("Have valid staked requests and sufficient token balance", functio
         },
       };
       await expect(dataReceived).toEqual(expectedTransaction2ModalObject);
-      await sandbox.addUnstakeRequestProposal({
-        stakedPoolAccount,
-        functionCallArgs: args,
-        daoName,
-      });
-      await sandbox.addWithdrawRequestProposal({
-        stakedPoolAccount,
-        description: description,
-        daoName,
-      });
 
       await checkNewProposalSubmission({
         page,
@@ -874,6 +868,14 @@ test.describe("Withdraw request", function () {
     instanceAccount,
   }) => {
     test.setTimeout(250_000);
+    const instanceConfig = await getInstanceConfig({
+      page,
+      instanceAccount,
+    });
+    if (instanceConfig.lockupContract) {
+      console.log("lockup contract found for instance");
+      return test.skip();
+    }
     const daoName = daoAccount.split(".")[0];
     const sandbox = new SandboxRPC();
     await sandbox.init();
@@ -890,17 +892,9 @@ test.describe("Withdraw request", function () {
       description,
       daoName,
     });
-
-    const instanceConfig = await getInstanceConfig({
-      page,
-      instanceAccount,
-    });
-    if (instanceConfig.lockupContract) {
-      console.log("lockup contract found for instance");
-      return test.skip();
-    }
-    await page.goto(`/${instanceAccount}/widget/app?page=stake-delegation`);
+    await updateDaoPolicyMembers({ page });
     await mockStakedPools({ daoAccount, page, multiplePools: true });
+    await page.goto(`/${instanceAccount}/widget/app?page=stake-delegation`);
     await mockUnstakeAndWithdrawBalance({
       page,
       hasUnstakeBalance: true,

From ca56e4e9c3a2661bd3d5711a41f75588c6849dae Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Tue, 28 Jan 2025 01:08:31 +0530
Subject: [PATCH 7/7] fix locators

---
 .../stake-delegation/stake-delegation.spec.js     | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
index 24ea6609..06f56518 100644
--- a/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
+++ b/playwright-tests/tests/stake-delegation/stake-delegation.spec.js
@@ -1209,8 +1209,12 @@ test.describe("Lockup staking", function () {
         lockupContract,
         instanceAccount,
       });
-      await page.waitForTimeout(20_000);
-      const poolSelector = page.locator(".custom-select").first();
+      await page.waitForTimeout(2_000);
+      const poolSelector = page
+        .frameLocator("iframe")
+        .nth(1)
+        .locator(".custom-select")
+        .first();
       await expect(poolSelector).toBeVisible({ timeout: 20_000 });
       const hasDisabledClassOnChild = await poolSelector
         .locator(".disabled")
@@ -1263,8 +1267,11 @@ test.describe("Lockup staking", function () {
         daoAccount,
         lockupContract,
       });
-      await page.waitForTimeout(10_000);
-      const poolSelector = await page.locator(".custom-select");
+      await page.waitForTimeout(2_000);
+      const poolSelector = await page
+        .frameLocator("iframe")
+        .nth(1)
+        .locator(".custom-select");
       const hasDisabledClassOnChild = await poolSelector
         .locator(".disabled")
         .count();