chore: add legal disclaimer

leather-io · May 6, 2021 · a6984ab · a6984ab
1 parent 696e215
commit a6984ab
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 50 deletions.
diff --git 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<ExternalLinkProps> = ({ href, children, ...props }) => {
   const openUrl = () => openExternalLink(href);
   return (
-    <Text
-      onClick={openUrl}
-      as="button"
-      cursor="pointer"
-      display="block"
-      outline={0}
-      color={color('brand')}
-      _hover={{ textDecoration: 'underline' }}
-      _focus={{ textDecoration: 'underline' }}
-      {...{ type: 'button' }}
-      {...props}
-    >
-      {children}
-      <Box display="inline-block" ml="extra-tight" mb="1px">
-        <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M8 5.90118V0.745999C8 0.300626 7.71031 0 7.25348 0L2.08914 0.0111343C1.66017 0.0111343 1.35933 0.334029 1.35933 0.707029C1.35933 1.09116 1.68802 1.38622 2.07799 1.38622H3.7883L5.7883 1.30828L4.8468 2.14335L0.233983 6.75296C0.0779944 6.90884 0 7.09812 0 7.27627C0 7.64927 0.339833 8 0.718663 8C0.902507 8 1.08635 7.92206 1.24234 7.76618L5.86072 3.15101L6.69638 2.21016L6.61838 4.13083V5.91788C6.61838 6.31315 6.91922 6.63605 7.29805 6.63605C7.68245 6.63605 8 6.31872 8 5.90118Z"
-            fill="currentColor"
-          />
-        </svg>
-      </Box>
-    </Text>
+    <LegalDisclaimerTooltip>
+      <Text
+        onClick={openUrl}
+        as="button"
+        type="button"
+        cursor="pointer"
+        display="block"
+        outline={0}
+        color={color('brand')}
+        _hover={{ textDecoration: 'underline' }}
+        _focus={{ textDecoration: 'underline' }}
+        {...props}
+      >
+        {children}
+        <Box display="inline-block" ml="extra-tight" mb="1px">
+          ↗
+        </Box>
+      </Text>
+    </LegalDisclaimerTooltip>
   );
 };
diff --git a/app/components/legal-disclaimer-tooltip.tsx 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<BoxProps> = props => (
+  <Tooltip
+    display="inherit"
+    text="This link will take you to an external third-party website that is not affiliated with Hiro Systems PBC."
+    {...props}
+  />
+);
diff --git 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
@@ -1,9 +1,7 @@
 import React, { FC } from 'react';
 import { color, Flex, FlexProps } from '@stacks/ui';
 
-type StackingFormInfoCardProps = FlexProps;
-
-export const StackingFormInfoCard: FC<StackingFormInfoCardProps> = props => (
+export const StackingFormInfoCard: FC<FlexProps> = props => (
   <Flex
     flexDirection="column"
     boxShadow="low"

diff --git a/app/pages/stacking/components/stacking-form-info-panel.tsx b/app/pages/stacking/components/stacking-form-info-panel.tsx
@@ -1,8 +1,6 @@
 import React, { FC } from 'react';
 import { Flex, FlexProps } from '@stacks/ui';
 
-type StackingFormInfoPanelProps = FlexProps;
-
-export const StackingFormInfoPanel: FC<StackingFormInfoPanelProps> = props => (
+export const StackingFormInfoPanel: FC<FlexProps> = props => (
   <Flex flexDirection="column" position="sticky" top="124px" {...props} />
 );
diff --git 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<StackingFormStepProps> = props => {
 };
 
 export const StackingStepDescription: FC = ({ children }) => (
-  <Stack display="block" textStyle="body.large" mt="tight" spacing="base">
+  <Stack display="block" textStyle="body.large" spacing="base">
     {children}
   </Stack>
 );

diff --git 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<StackingGuideCardProps> = props => {
+export const StackingGuideCard: FC<FlexProps> = props => {
   const [isHovered, bindHover] = useHover();
   const [isFocused, bindFocus] = useFocus();
   return (
-    <Box {...props}>
+    <LegalDisclaimerTooltip {...props}>
       <Box
         as="a"
         onClick={openStackingGuide}
@@ -31,9 +30,13 @@ export const StackingGuideCard: FC<StackingGuideCardProps> = props => {
           textStyle="body.large"
           cursor="pointer"
         >
-          <Box mr="base">
-            <img src={btcIllustration} alt="Abstract Bitcoin icon on chart-like tower" />
-          </Box>
+          <Box
+            as="img"
+            mr="base"
+            display="block"
+            src={btcIllustration}
+            alt="Abstract Bitcoin icon on chart-like tower"
+          />
           <Text maxWidth={[null, null, '292px']}>
             <Text as="strong" textDecoration={isHovered || isFocused ? 'underline' : 'unset'}>
               Read the Stacking Guide
@@ -44,6 +47,6 @@ export const StackingGuideCard: FC<StackingGuideCardProps> = props => {
           </Text>
         </StackingFormInfoCard>
       </Box>
-    </Box>
+    </LegalDisclaimerTooltip>
   );
 };
diff --git a/app/pages/stacking/components/stacking-term.tsx b/app/pages/stacking/components/stacking-term.tsx
@@ -12,14 +12,14 @@ export const StackingTermItem: FC<StackingTermItem> = props => {
       <Box width={['12px', '16px']} mr="base-tight">
         <Icon width={['12px', '16px']} />
       </Box>
-      <Box>
+      <Stack spacing="extra-tight">
         <Text as="h3" textStyle="body.large.medium">
           {title}
         </Text>
-        <Stack mt="extra-tight" spacing="base" textStyle="body.large" color={color('text-caption')}>
+        <Stack spacing="base" textStyle="body.large" color={color('text-caption')}>
           {children}
         </Stack>
-      </Box>
+      </Stack>
     </Flex>
   );
 };
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
@@ -94,7 +94,7 @@ export const ChooseDirectStackingAmountStep: FC<ChooseAmountStepProps> = props =
   const numberOfRewardSlots = calculateRewardSlots(
     ustxAmount,
     new BigNumber(poxInfo.min_amount_ustx)
-  );
+  ).integerValue();
 
   const floorRoundedStxBuffer = calculateStackingBuffer(
     ustxAmount,
@@ -160,10 +160,11 @@ export const ChooseDirectStackingAmountStep: FC<ChooseAmountStepProps> = props =
           <>
             <Stack textStyle="body.small" color={color('text-caption')} spacing="base" mt="base">
               <Text>
-                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.
               </Text>
               <Text>
                 You <strong>will not</strong> 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
@@ -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<StackingInfoCardProps> = 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 (
     <StackingFormInfoCard minHeight="84px" alignItems="flex-start" {...rest}>
       <Flex flexDirection="column" px={['loose', 'extra-loose']} pt="extra-loose" pb="base-loose">
@@ -34,6 +44,10 @@ export const DirectStackingInfoCard: FC<StackingInfoCardProps> = props => {
       <Hr />
       <Flex flexDirection="column" px={['loose', 'extra-loose']} py="loose" width="100%">
         <Flex justifyContent="space-between">
+          <Text textStyle="body.large.medium">Buffer</Text>
+          <Text textAlign="right">{toHumanReadableStx(buffer.toString())}</Text>
+        </Flex>
+        <Flex justifyContent="space-between" mt="tight">
           <Flex alignItems="center">
             <Text textStyle="body.large.medium" mr="tight">
               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
@@ -14,10 +14,10 @@ export const DirectStackingIntro: FC<StackingIntroProps> = ({ timeUntilNextCycle
     <StackingDescription mt="base-tight">
       When you stack by yourself, you’ll get the chance to earn Bitcoin each cycle for every reward
       slot that you hold.
-      <br />
-      <br /> 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.
+    </StackingDescription>
+    <StackingDescription mt="base-tight">
+      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.
     </StackingDescription>
     <ExternalLink href="https://stacks.co/stacking" mt="base">
       How it works