From 2e2993a7b25c44240e9f59dbcf91b49a7c86fc8a Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Sat, 18 Nov 2023 21:12:05 +0700
Subject: [PATCH] fix(staking): footer position

---
 .../stories/staking/LiquidStaking.stories.tsx | 301 ++++++------------
 .../chain-swap-input/chain-swap-input.css.ts  |   1 +
 src/ui/liquid-staking/liquid-staking.css.ts   |   6 +
 src/ui/liquid-staking/liquid-staking.lite.tsx |   8 +-
 4 files changed, 105 insertions(+), 211 deletions(-)

diff --git a/packages/react/stories/staking/LiquidStaking.stories.tsx b/packages/react/stories/staking/LiquidStaking.stories.tsx
index 12b005ff..6639f638 100644
--- a/packages/react/stories/staking/LiquidStaking.stories.tsx
+++ b/packages/react/stories/staking/LiquidStaking.stories.tsx
@@ -143,126 +143,6 @@ export const Primary: Story = {
         />
       </Box>
     );
-
-    // return (
-    //   <>
-    //     <BasicModal
-    //       renderTrigger={(triggerProps) => (
-    //         <Button {...triggerProps} onClick={() => setIsOpen(true)}>
-    //           Liquid stake
-    //         </Button>
-    //       )}
-    //       isOpen={isOpen}
-    //       title={
-    //         <Stack
-    //           direction="horizontal"
-    //           space="$4"
-    //           attributes={{
-    //             alignItems: "center",
-    //           }}
-    //         >
-    //           <Text fontSize="$xl" fontWeight="$semibold">
-    //             Liquid Staking {stakeToken?.name}
-    //           </Text>
-    //           <Icon name="informationLine" size="$md" color="$textSecondary" />
-    //         </Stack>
-    //       }
-    //       onClose={() => setIsOpen(false)}
-    //     >
-    //       <LiquidStaking
-    //         stakeAmount={stakedAmount}
-    //         stakeToken={stakeToken}
-    //         reward={reward}
-    //         options={dropDownList}
-    //         precision={2}
-    //         bottomLink={{
-    //           href: "https://cosmology.tech/",
-    //           label: "Learn more",
-    //         }}
-    //         timeEstimateLabel="30 seconds"
-    //         descriptionList={[
-    //           {
-    //             title: "Rewards",
-    //             subtitle: "19.42%",
-    //             desc: "Rewards on Stride are similar to native staking rewards. However, they accumulate in the background, which reflects in the price of the stToken continually appreciating compared to the native token, while you can still move the stToken around the ecosystem freely.",
-    //           },
-    //           {
-    //             title: "Fees",
-    //             subtitle: "Low",
-    //             desc: "Strides 10% fee is only applied to rewards you earn. The tokens you stake (aka principal) and transactions are fee-free!",
-    //           },
-    //           {
-    //             title: "Unbonding",
-    //             subtitle: "21-24 days",
-    //             desc: "Unstaking on Stride requires an unbonding period before you can withdraw your tokens. If you don't want to wait, you can sell stATOM directly on an exchange.",
-    //           },
-    //           {
-    //             title: "Value of 1 stATOM",
-    //             subtitle: "1.204 ATOM",
-    //             desc: "The value of 1 stATOM if redeemed through the Stride protocol redemption rate grows predictably as staking rewards accrue.",
-    //           },
-    //           {
-    //             title: "Total Value Locked",
-    //             subtitle: "$24.7m",
-    //             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);
-
-    //               return {
-    //                 ...prevReward,
-    //                 rewardAmount: amt,
-    //                 priceDisplayAmount: notional,
-    //               };
-    //             });
-    //           }
-    //         }}
-    //         footerLabel={
-    //           <Stack
-    //             direction="horizontal"
-    //             space="$4"
-    //             attributes={{
-    //               justifyContent: "center",
-    //               alignItems: "center",
-    //             }}
-    //           >
-    //             <Text fontWeight="$normal" fontSize="$sm" color="#A7B4C2">
-    //               Powered by
-    //             </Text>
-    //             <Box
-    //               as="img"
-    //               height="$8"
-    //               width="auto"
-    //               attributes={{
-    //                 src: strideLogo,
-    //                 alt: "Stride",
-    //               }}
-    //             />
-    //           </Stack>
-    //         }
-    //         onSubmit={() => {
-    //           alert(
-    //             `Staked [${stakeToken?.symbol}]: amt ${stakedAmount} rward ${reward.rewardAmount}`
-    //           );
-    //         }}
-    //       />
-    //     </BasicModal>
-    //   </>
-    // );
   },
 };
 
@@ -313,97 +193,102 @@ export const WithModal: Story = {
           }
           onClose={() => setIsOpen(false)}
         >
-          <LiquidStaking
-            stakeAmount={stakedAmount}
-            stakeToken={stakeToken}
-            reward={reward}
-            options={dropDownList}
-            precision={2}
-            bottomLink={{
-              href: "https://cosmology.tech/",
-              label: "Learn more",
-            }}
-            timeEstimateLabel="30 seconds"
-            descriptionList={[
-              {
-                title: "Rewards",
-                subtitle: "19.42%",
-                desc: "Rewards on Stride are similar to native staking rewards. However, they accumulate in the background, which reflects in the price of the stToken continually appreciating compared to the native token, while you can still move the stToken around the ecosystem freely.",
-              },
-              {
-                title: "Fees",
-                subtitle: "Low",
-                desc: "Strides 10% fee is only applied to rewards you earn. The tokens you stake (aka principal) and transactions are fee-free!",
-              },
-              {
-                title: "Unbonding",
-                subtitle: "21-24 days",
-                desc: "Unstaking on Stride requires an unbonding period before you can withdraw your tokens. If you don't want to wait, you can sell stATOM directly on an exchange.",
-              },
-              {
-                title: "Value of 1 stATOM",
-                subtitle: "1.204 ATOM",
-                desc: "The value of 1 stATOM if redeemed through the Stride protocol redemption rate grows predictably as staking rewards accrue.",
-              },
-              {
-                title: "Total Value Locked",
-                subtitle: "$24.7m",
-                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);
+          <Box pt="$10" maxWidth="466px">
+            <LiquidStaking
+              stakeAmount={stakedAmount}
+              stakeToken={stakeToken}
+              reward={reward}
+              options={dropDownList}
+              precision={2}
+              bottomLink={{
+                href: "https://cosmology.tech/",
+                label: "Learn more",
+              }}
+              timeEstimateLabel="30 seconds"
+              descriptionList={[
+                {
+                  title: "Rewards",
+                  subtitle: "19.42%",
+                  desc: "Rewards on Stride are similar to native staking rewards. However, they accumulate in the background, which reflects in the price of the stToken continually appreciating compared to the native token, while you can still move the stToken around the ecosystem freely.",
+                },
+                {
+                  title: "Fees",
+                  subtitle: "Low",
+                  desc: "Strides 10% fee is only applied to rewards you earn. The tokens you stake (aka principal) and transactions are fee-free!",
+                },
+                {
+                  title: "Unbonding",
+                  subtitle: "21-24 days",
+                  desc: "Unstaking on Stride requires an unbonding period before you can withdraw your tokens. If you don't want to wait, you can sell stATOM directly on an exchange.",
+                },
+                {
+                  title: "Value of 1 stATOM",
+                  subtitle: "1.204 ATOM",
+                  desc: "The value of 1 stATOM if redeemed through the Stride protocol redemption rate grows predictably as staking rewards accrue.",
+                },
+                {
+                  title: "Total Value Locked",
+                  subtitle: "$24.7m",
+                  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);
 
-                  return {
-                    ...prevReward,
-                    rewardAmount: amt,
-                    priceDisplayAmount: notional,
-                  };
-                });
-              }
-            }}
-            footerLabel={
-              <Stack
-                direction="horizontal"
-                space="$4"
-                attributes={{
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <Text fontWeight="$normal" fontSize="$sm" color="#A7B4C2">
-                  Powered by
-                </Text>
-                <Box
-                  as="img"
-                  height="$8"
-                  width="auto"
+                    return {
+                      ...prevReward,
+                      rewardAmount: amt,
+                      priceDisplayAmount: notional,
+                    };
+                  });
+                }
+              }}
+              footerLabel={
+                <Stack
+                  direction="horizontal"
+                  space="$4"
                   attributes={{
-                    src: strideLogo,
-                    alt: "Stride",
+                    justifyContent: "center",
+                    alignItems: "center",
                   }}
-                />
-              </Stack>
-            }
-            onSubmit={() => {
-              alert(
-                `Staked [${stakeToken?.symbol}]: amt ${stakedAmount} rward ${reward.rewardAmount}`
-              );
-            }}
-          />
+                >
+                  <Text fontWeight="$normal" fontSize="$sm" color="#A7B4C2">
+                    Powered by
+                  </Text>
+                  <Box
+                    as="img"
+                    height="$8"
+                    width="auto"
+                    attributes={{
+                      src: strideLogo,
+                      alt: "Stride",
+                    }}
+                  />
+                </Stack>
+              }
+              onSubmit={() => {
+                alert(
+                  `Staked [${stakeToken?.symbol}]: amt ${stakedAmount} rward ${reward.rewardAmount}`
+                );
+              }}
+              attributes={{
+                p: "$0",
+              }}
+            />
+          </Box>
         </BasicModal>
       </>
     );
diff --git a/src/ui/chain-swap-input/chain-swap-input.css.ts b/src/ui/chain-swap-input/chain-swap-input.css.ts
index 3d8d0b3f..545baaa7 100644
--- a/src/ui/chain-swap-input/chain-swap-input.css.ts
+++ b/src/ui/chain-swap-input/chain-swap-input.css.ts
@@ -40,6 +40,7 @@ export const chainSwapInput = styleVariants({
       "@media": {
         [`screen and (min-width: ${breakpoints.mdMobile}px)`]: {
           fontSize: themeVars.fontSize["2xl"],
+          maxWidth: "160px",
         },
       },
       "@container": {
diff --git a/src/ui/liquid-staking/liquid-staking.css.ts b/src/ui/liquid-staking/liquid-staking.css.ts
index 6aa62bf9..4fcda215 100644
--- a/src/ui/liquid-staking/liquid-staking.css.ts
+++ b/src/ui/liquid-staking/liquid-staking.css.ts
@@ -13,8 +13,13 @@ const expandVerticalReverse = keyframes({
   "100%": { height: CONTRACTED_HEIGHT_PX },
 });
 
+export const accordionBase = style({
+  position: "relative",
+});
+
 export const accordionPanel = styleVariants({
   expanded: [
+    accordionBase,
     {
       height: EXPANDED_HEIGHT_PX,
       overflow: "auto",
@@ -22,6 +27,7 @@ export const accordionPanel = styleVariants({
     },
   ],
   contracted: [
+    accordionBase,
     {
       height: CONTRACTED_HEIGHT_PX,
       opacity: 1,
diff --git a/src/ui/liquid-staking/liquid-staking.lite.tsx b/src/ui/liquid-staking/liquid-staking.lite.tsx
index 458d94ad..1ce06cc0 100644
--- a/src/ui/liquid-staking/liquid-staking.lite.tsx
+++ b/src/ui/liquid-staking/liquid-staking.lite.tsx
@@ -295,7 +295,7 @@ export default function LiquidStaking(props: LiquidStakingProps) {
             direction="horizontal"
             space="$4"
             attributes={{
-              p: "$4",
+              py: "$4",
               position: "relative",
               justifyContent: "flex-end",
               zIndex: 1,
@@ -468,9 +468,11 @@ export default function LiquidStaking(props: LiquidStakingProps) {
       <Box
         position={state.expanded ? "absolute" : "relative"}
         bottom={state.expanded ? 0 : "unset"}
-        // width="$full"
-        width={state.expanded ? `calc(100% - 32px)` : "$full"}
+        left={state.expanded ? "0" : "unset"}
+        right={state.expanded ? "0" : "unset"}
+        width="$full"
         py="$4"
+        px={state.expanded ? "$8" : "$0"}
         backgroundColor={state.theme === "light" ? "$white" : "$blackPrimary"}
         attributes={{
           "data-part-id": "footer",