diff --git a/app/components/external-link.tsx b/app/components/external-link.tsx index 89da6f440..de3947b8a 100644 --- a/app/components/external-link.tsx +++ b/app/components/external-link.tsx @@ -1,6 +1,7 @@ import React, { FC } from 'react'; import { Box, Text, BoxProps, color } from '@stacks/ui'; import { openExternalLink } from '@utils/external-links'; +import { LegalDisclaimerTooltip } from './legal-disclaimer-tooltip'; interface ExternalLinkProps extends BoxProps { href: string; @@ -9,27 +10,24 @@ interface ExternalLinkProps extends BoxProps { export const ExternalLink: FC = ({ href, children, ...props }) => { const openUrl = () => openExternalLink(href); return ( - - {children} - - - - - - + + + {children} + + ↗ + + + ); }; diff --git a/app/components/legal-disclaimer-tooltip.tsx b/app/components/legal-disclaimer-tooltip.tsx new file mode 100644 index 000000000..7f9b8450c --- /dev/null +++ b/app/components/legal-disclaimer-tooltip.tsx @@ -0,0 +1,11 @@ +import React, { FC } from 'react'; +import { BoxProps } from '@stacks/ui'; +import { Tooltip } from './tooltip'; + +export const LegalDisclaimerTooltip: FC = props => ( + +); diff --git a/app/constants/index.ts b/app/constants/index.ts index fb5301f47..54d99252a 100644 --- a/app/constants/index.ts +++ b/app/constants/index.ts @@ -45,7 +45,8 @@ export const STACKING_LEARN_MORE_URL = 'https://stacks.org/stacking-moves-us-for export const STACKING_GUIDE_URL = 'https://blog.stacks.co/stacking-strategy'; -export const STACKING_MINIMIUM_FOR_NEXT_CYCLE_URL = 'https://stacking.club/cycles/next'; +export const STACKING_MINIMIUM_FOR_NEXT_CYCLE_URL = + 'https://stacking.club/cycles/next?tab=slot_minimum'; export const MAX_STACKING_CYCLES = 12; diff --git a/app/pages/stacking/components/stacking-form-info-card.tsx b/app/pages/stacking/components/stacking-form-info-card.tsx index 67ff1e14d..feda23cae 100644 --- a/app/pages/stacking/components/stacking-form-info-card.tsx +++ b/app/pages/stacking/components/stacking-form-info-card.tsx @@ -1,9 +1,7 @@ import React, { FC } from 'react'; import { color, Flex, FlexProps } from '@stacks/ui'; -type StackingFormInfoCardProps = FlexProps; - -export const StackingFormInfoCard: FC = props => ( +export const StackingFormInfoCard: FC = props => ( = props => ( +export const StackingFormInfoPanel: FC = props => ( ); diff --git a/app/pages/stacking/components/stacking-form-step.tsx b/app/pages/stacking/components/stacking-form-step.tsx index e82d55d76..7ae88f995 100644 --- a/app/pages/stacking/components/stacking-form-step.tsx +++ b/app/pages/stacking/components/stacking-form-step.tsx @@ -74,7 +74,7 @@ export const StackingStep: FC = props => { }; export const StackingStepDescription: FC = ({ children }) => ( - + {children} ); diff --git a/app/pages/stacking/components/stacking-guide-card.tsx b/app/pages/stacking/components/stacking-guide-card.tsx index bdd51918b..e91c9f667 100644 --- a/app/pages/stacking/components/stacking-guide-card.tsx +++ b/app/pages/stacking/components/stacking-guide-card.tsx @@ -7,16 +7,15 @@ import { openExternalLink } from '@utils/external-links'; import { STACKING_GUIDE_URL } from '@constants/index'; import { StackingFormInfoCard } from './stacking-form-info-card'; - -type StackingGuideCardProps = FlexProps; +import { LegalDisclaimerTooltip } from '@components/legal-disclaimer-tooltip'; const openStackingGuide = () => openExternalLink(STACKING_GUIDE_URL); -export const StackingGuideCard: FC = props => { +export const StackingGuideCard: FC = props => { const [isHovered, bindHover] = useHover(); const [isFocused, bindFocus] = useFocus(); return ( - + = props => { textStyle="body.large" cursor="pointer" > - - Abstract Bitcoin icon on chart-like tower - + Read the Stacking Guide @@ -44,6 +47,6 @@ export const StackingGuideCard: FC = props => { - + ); }; diff --git a/app/pages/stacking/components/stacking-term.tsx b/app/pages/stacking/components/stacking-term.tsx index 46a50ba63..70b706057 100644 --- a/app/pages/stacking/components/stacking-term.tsx +++ b/app/pages/stacking/components/stacking-term.tsx @@ -12,14 +12,14 @@ export const StackingTermItem: FC = props => { - + {title} - + {children} - + ); }; diff --git a/app/pages/stacking/direct-stacking/components/choose-direct-stacking-amount.tsx b/app/pages/stacking/direct-stacking/components/choose-direct-stacking-amount.tsx index 68e61ebb9..d810bb8bf 100644 --- a/app/pages/stacking/direct-stacking/components/choose-direct-stacking-amount.tsx +++ b/app/pages/stacking/direct-stacking/components/choose-direct-stacking-amount.tsx @@ -94,7 +94,7 @@ export const ChooseDirectStackingAmountStep: FC = props = const numberOfRewardSlots = calculateRewardSlots( ustxAmount, new BigNumber(poxInfo.min_amount_ustx) - ); + ).integerValue(); const floorRoundedStxBuffer = calculateStackingBuffer( ustxAmount, @@ -160,10 +160,11 @@ export const ChooseDirectStackingAmountStep: FC = props = <> - This entered amount would get you {numberOfRewardSlots.integerValue().toString()}{' '} - reward slots with a {toHumanReadableStx((floorRoundedStxBuffer || 0).toString())}{' '} - buffer at the current minimum. However, that minimum is subject to change and there - is no guarantee you will get any reward slots. + This entered amount would get you {numberOfRewardSlots.toString()} reward slot + {numberOfRewardSlots.toNumber() === 1 ? '' : 's'} with a{' '} + {toHumanReadableStx((floorRoundedStxBuffer || 0).toString())} buffer at the current + minimum. However, that minimum is subject to change and there is no guarantee you + will get any reward slots. You will not be able to add more STX for locking from this address diff --git a/app/pages/stacking/direct-stacking/components/direct-stacking-info-card.tsx b/app/pages/stacking/direct-stacking/components/direct-stacking-info-card.tsx index 7b0422899..fc26cfca2 100644 --- a/app/pages/stacking/direct-stacking/components/direct-stacking-info-card.tsx +++ b/app/pages/stacking/direct-stacking/components/direct-stacking-info-card.tsx @@ -9,6 +9,9 @@ import { Hr } from '@components/hr'; import { ExplainerTooltip } from '@components/tooltip'; import { toHumanReadableStx } from '@utils/unit-convert'; import { StackingFormInfoCard } from '../../components/stacking-form-info-card'; +import { calculateStackingBuffer } from '../../utils/calc-stacking-buffer'; +import { useSelector } from 'react-redux'; +import { selectPoxInfo } from '@store/stacking'; interface StackingInfoCardProps extends FlexProps { cycles: number; @@ -23,6 +26,13 @@ export const DirectStackingInfoCard: FC = props => { const amountToBeStacked = balance === null ? new BigNumber(0) : balance; + const poxInfo = useSelector(selectPoxInfo); + + const buffer = calculateStackingBuffer( + amountToBeStacked, + new BigNumber(poxInfo?.min_amount_ustx || 0) + ); + return ( @@ -34,6 +44,10 @@ export const DirectStackingInfoCard: FC = props => {
+ Buffer + {toHumanReadableStx(buffer.toString())} + + Cycles diff --git a/app/pages/stacking/direct-stacking/components/direct-stacking-intro.tsx b/app/pages/stacking/direct-stacking/components/direct-stacking-intro.tsx index 805846210..c588cc967 100644 --- a/app/pages/stacking/direct-stacking/components/direct-stacking-intro.tsx +++ b/app/pages/stacking/direct-stacking/components/direct-stacking-intro.tsx @@ -14,10 +14,10 @@ export const DirectStackingIntro: FC = ({ timeUntilNextCycle When you stack by yourself, you’ll get the chance to earn Bitcoin each cycle for every reward slot that you hold. -
-
The STX required per reward slot can fluctuate from cycle to cycle. If you’re close to - the current minimum, consider pooling instead to help make sure you don’t end up without - rewards. +
+ + The STX required per reward slot can fluctuate from cycle to cycle. If you’re close to the + current minimum, consider pooling instead to help make sure you don’t end up without rewards. How it works