Fix stake loading issues (#256)

Resolves #179
- Moved validators dropdown (for stake requests) to iframe for better
performance, and also switched to pikespeak API, and added real time
input validation
- Defined all colors in `common` and then using it in all widgets

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>
 );

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 = (

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;

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 (

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));
 
@@ -424,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: #1b1b18;
-    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);
@@ -521,20 +393,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 +424,4 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
   );
 }
 
-return { AppLayout, getColors, Theme };
+return { AppLayout, Theme };