fix(staking): liquid staking widget change (#136)

hyperweb-io · Dec 14, 2023 · 4cbff91 · 4cbff91
1 parent e52b1e3
commit 4cbff91
Show file tree

Hide file tree

Showing 5 changed files with 346 additions and 93 deletions.
diff --git a/packages/react/stories/staking/LiquidStaking.stories.tsx b/packages/react/stories/staking/LiquidStaking.stories.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from "react";
 import random from "lodash/random";
 import { getTransferList } from "../stub/assetData";
+// @ts-expect-error
 import strideLogo from "../../static/stride-logo.png";
 
 import type { Meta, StoryObj } from "@storybook/react";
@@ -29,14 +30,15 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {},
   render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
     const dropdownList = useMemo(() => getTransferList(), []);
     const stride = dropdownList.find((item) => item.symbol === "STRD");
-    console.log("stride", stride);
 
     const [stakeToken, setStakeToken] = useState<
       LiquidStakingProps["stakeToken"] | null
-    >(dropdownList[0]);
+    >({
+      ...dropdownList[0],
+      available: 440.22,
+    });
 
     const [reward, setReward] = useState<LiquidStakingProps["reward"]>({
       ...stride,
@@ -54,7 +56,6 @@ export const Primary: Story = {
           stakeAmount={stakedAmount}
           stakeToken={stakeToken}
           reward={reward}
-          options={dropdownList}
           precision={2}
           bottomLink={{
             href: "https://cosmology.tech/",
@@ -88,29 +89,20 @@ export const Primary: Story = {
               desc: "The total value of ATOM locked on Stride.",
             },
           ]}
-          onChange={({
-            stakeToken: payloadToken,
-            stakeAmount: payloadStakedAmount,
-          }) => {
-            if (payloadToken) {
-              console.log("[SB]", {
-                payloadToken,
-                payloadStakedAmount,
-              });
-              setStakedAmount(payloadStakedAmount);
-              setStakeToken(payloadToken);
-              setReward((prevReward) => {
-                // This is just mock reward calculation
-                const amt = random(100, 1000, true);
-                const notional = random(500, 20000, true);
+          onChange={(stakeAmount) => {
+            console.log("staked", stakeAmount);
+            setStakedAmount(stakeAmount);
+            setReward((prevReward) => {
+              // This is just mock reward calculation
+              const amt = random(100, 1000, true);
+              const notional = random(500, 20000, true);
 
-                return {
-                  ...prevReward,
-                  rewardAmount: amt,
-                  priceDisplayAmount: notional,
-                };
-              });
-            }
+              return {
+                ...prevReward,
+                rewardAmount: amt,
+                priceDisplayAmount: notional,
+              };
+            });
           }}
           footerLabel={
             <Stack
@@ -198,7 +190,6 @@ export const WithModal: Story = {
               stakeAmount={stakedAmount}
               stakeToken={stakeToken}
               reward={reward}
-              options={dropdownList}
               precision={2}
               bottomLink={{
                 href: "https://cosmology.tech/",
@@ -232,29 +223,19 @@ export const WithModal: Story = {
                   desc: "The total value of ATOM locked on Stride.",
                 },
               ]}
-              onChange={({
-                stakeToken: payloadToken,
-                stakeAmount: payloadStakedAmount,
-              }) => {
-                if (payloadToken) {
-                  console.log("[SB]", {
-                    payloadToken,
-                    payloadStakedAmount,
-                  });
-                  setStakedAmount(payloadStakedAmount);
-                  setStakeToken(payloadToken);
-                  setReward((prevReward) => {
-                    // This is just mock reward calculation
-                    const amt = random(100, 1000, true);
-                    const notional = random(500, 20000, true);
+              onChange={(stakeAmount) => {
+                setStakedAmount(stakeAmount);
+                setReward((prevReward) => {
+                  // This is just mock reward calculation
+                  const amt = random(100, 1000, true);
+                  const notional = random(500, 20000, true);
 
-                    return {
-                      ...prevReward,
-                      rewardAmount: amt,
-                      priceDisplayAmount: notional,
-                    };
-                  });
-                }
+                  return {
+                    ...prevReward,
+                    rewardAmount: amt,
+                    priceDisplayAmount: notional,
+                  };
+                });
               }}
               footerLabel={
                 <Stack

diff --git a/src/ui/liquid-staking/liquid-staking.css.ts b/src/ui/liquid-staking/liquid-staking.css.ts
@@ -1,14 +1,19 @@
 import {
   style,
   styleVariants,
-  keyframes,
+  createVar,
   createContainer,
+  keyframes,
 } from "@vanilla-extract/css";
+import { themeVars } from "../../styles/themes.css";
 
 const EXPANDED_HEIGHT_PX = `458px`;
 const CONTRACTED_HEIGHT_PX = `32px`;
 export const liqStakingRootContainer = createContainer();
 
+const textButtonBgVar = createVar();
+const textButtonColorVar = createVar();
+
 export const root = style({
   containerName: liqStakingRootContainer,
 });
@@ -46,3 +51,57 @@ export const accordionPanel = styleVariants({
     },
   ],
 });
+
+const headerButtonBase = style({
+  color: `${textButtonColorVar} !important`,
+  backgroundColor: `${textButtonBgVar} !important`,
+  selectors: {
+    "&:hover": {
+      opacity: 0.89,
+    },
+  },
+});
+
+export const headerButton = styleVariants({
+  light: [
+    headerButtonBase,
+    style({
+      vars: {
+        [textButtonColorVar]: themeVars.colors.white,
+        [textButtonBgVar]: themeVars.colors.textPlaceholder,
+      },
+    }),
+  ],
+  dark: [
+    headerButtonBase,
+    style({
+      vars: {
+        [textButtonColorVar]: themeVars.colors.text,
+        [textButtonBgVar]: themeVars.colors.blackSecondary,
+      },
+    }),
+  ],
+});
+
+export const numberInputBase = style({
+  fontWeight: themeVars.fontWeight.semibold,
+  textAlign: "right",
+  height: themeVars.space["11"],
+  width: "100%",
+  paddingRight: "0 !important",
+  paddingLeft: "0 !important",
+});
+
+export const numberInputMd = style([
+  numberInputBase,
+  {
+    fontSize: themeVars.fontSize["xl"],
+  },
+]);
+
+export const numberInputSm = style([
+  numberInputBase,
+  {
+    fontSize: themeVars.fontSize["lg"],
+  },
+]);