Skip to content

Commit

Permalink
fix(staking): footer position
Browse files Browse the repository at this point in the history
  • Loading branch information
@yyyyaaa
yyyyaaa committed Nov 18, 2023
1 parent f8d774f commit 2e2993a
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 211 deletions.
301 changes: 93 additions & 208 deletions packages/react/stories/staking/LiquidStaking.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
// </>
// );
},
};

Expand Down Expand Up @@ -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>
</>
);
Expand Down
1 change: 1 addition & 0 deletions src/ui/chain-swap-input/chain-swap-input.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const chainSwapInput = styleVariants({
"@media": {
[`screen and (min-width: ${breakpoints.mdMobile}px)`]: {
fontSize: themeVars.fontSize["2xl"],
maxWidth: "160px",
},
},
"@container": {
Expand Down
6 changes: 6 additions & 0 deletions src/ui/liquid-staking/liquid-staking.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,21 @@ 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",
animation: `${expandVertical} 450ms cubic-bezier(0.22, 1, 0.36, 1)`,
},
],
contracted: [
accordionBase,
{
height: CONTRACTED_HEIGHT_PX,
opacity: 1,
Expand Down
8 changes: 5 additions & 3 deletions src/ui/liquid-staking/liquid-staking.lite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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",
Expand Down

0 comments on commit 2e2993a

Please sign in to comment.