Merge pull request #117 from threshold-network/how-it-works-page

Add How it Works page to the Staking page

Add a page about how the staking works in T network according to the
Figma views.

src/components/StakingChecklist/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react"
 import { Box, Stack, useColorModeValue } from "@chakra-ui/react"
-import { Body3 } from "../Typography"
+import { Body2, Body3 } from "../Typography"
 import ChecklistGroup from "../ChecklistGroup"
 import { ExternalHref } from "../../enums"
 import ExternalLink from "../ExternalLink"
@@ -30,6 +30,36 @@ export const StakingDepositSteps: FC = () => {
   )
 }
 
+export const LegacyStakesDepositSteps: FC = () => {
+  return (
+    <ChecklistGroup
+      title="Step 1 - T Staking Contract Authorization"
+      checklistItems={[
+        {
+          title: (
+            <Body2>
+              Authorize your NuCypher legacy stake{" "}
+              <ExternalLink text="here" href={ExternalHref.nuDapp} withArrow />
+            </Body2>
+          ),
+        },
+        {
+          title: (
+            <Body2>
+              Authorize your Keep Network legacy stake{" "}
+              <ExternalLink
+                text="here"
+                href={ExternalHref.keepDappAuthPage}
+                withArrow
+              />
+            </Body2>
+          ),
+        },
+      ]}
+    />
+  )
+}
+
 export const PreSetupSteps: FC = () => {
   return (
     <ChecklistGroup

src/enums/externalHref.ts

@@ -7,6 +7,16 @@ export enum ExternalHref {
   preStakingProvidersList = "https://docs.nucypher.com/en/latest/pre_application/node_providers.html",
   exchangeRateLearnMore = "https://blog.threshold.network/threshold-launch/",
   keepDapp = "https://dashboard.keep.network/",
+  keepDappAuthPage = "https://dashboard.keep.network/applications/threshold",
   nuDapp = "https://stake.nucypher.network/manage",
   stakingBonusDocs = "https://forum.threshold.network/t/interim-era-incentive-schemes-1-one-off-migration-stake-bonus-2-ongoing-stable-yield/297",
+  stakedUs = "https://staked.us/",
+  bisonTrails = "https://bisontrails.co/",
+  blackDaemon = "https://blockdaemon.com/",
+  boar = "https://boar.network/",
+  figment = "https://www.figment.io/",
+  lowFeeValidation = "https://lowfeevalidation.com/",
+  ankr = "https://www.ankr.com/",
+  p2pValidator = "https://p2p.org/",
+  infStones = "https://infstones.com/",
 }

src/pages/Staking/HowItWorks/AboutAddressesCard.tsx

@@ -0,0 +1,51 @@
+import { FC, ComponentProps } from "react"
+import { List, ListItem } from "@chakra-ui/react"
+import Card from "../../../components/Card"
+import { Label3 } from "../../../components/Typography"
+import BoxLabel from "../../../components/BoxLabel"
+
+export const AboutAddressesCard: FC<ComponentProps<typeof Card>> = (props) => {
+  return (
+    <Card {...props}>
+      <Label3>about the Addresses you need to provide</Label3>
+      <List mt="5" spacing="6">
+        {aboutAddresses.map((action) => (
+          <ListItem key={action.sectionName}>
+            <BoxLabel w="fit-content" mb="5">
+              {action.sectionName}
+            </BoxLabel>
+            <List spacing="4">
+              {action.items.map((item, index) => (
+                <ListItem key={`${action.sectionName}-${index}`}>
+                  {item}
+                </ListItem>
+              ))}
+            </List>
+          </ListItem>
+        ))}
+      </List>
+    </Card>
+  )
+}
+
+const aboutAddresses = [
+  {
+    sectionName: "Provider Address",
+    items: [
+      "It’s the address that will be used to set up your nodes. One Provider Address per Stake.",
+    ],
+  },
+  {
+    sectionName: "Beneficiary Address",
+    items: [
+      "This is the address where your rewards will be sent when claimed. You can have the same Beneficiary Address for multiple stakes.",
+    ],
+  },
+
+  {
+    sectionName: "Authorizer Address",
+    items: [
+      "This address authorizes which applications can use the funds from your staking pool. It can be the same as your Beneficiary Address. You can have the same Authorizer Address for multiple stakes.",
+    ],
+  },
+]

src/pages/Staking/HowItWorks/LegacyStakesCard.tsx

@@ -0,0 +1,34 @@
+import { FC, ComponentProps } from "react"
+import { Box } from "@chakra-ui/react"
+import Card from "../../../components/Card"
+import {
+  PreSetupSteps,
+  LegacyStakesDepositSteps,
+} from "../../../components/StakingChecklist"
+import { Body2, Label3 } from "../../../components/Typography"
+import ViewInBlockExplorer from "../../../components/ViewInBlockExplorer"
+import { ExplorerDataType } from "../../../utils/createEtherscanLink"
+
+export const LegacyStakesCard: FC<
+  ComponentProps<typeof Card> & { tStakingContractAddress: string }
+> = ({ tStakingContractAddress, ...props }) => {
+  return (
+    <Card {...props}>
+      <Label3>legacy stakes</Label3>
+      <Body2 mt="5" mb="5">
+        If you have an active stake on NuCypher or on Keep Network you can
+        authorize the{" "}
+        <ViewInBlockExplorer
+          id={tStakingContractAddress}
+          type={ExplorerDataType.ADDRESS}
+          text="Threshold Staking Contract"
+        />{" "}
+        on the legacy dashboard.
+      </Body2>
+      <LegacyStakesDepositSteps />
+      <Box mt="6">
+        <PreSetupSteps />
+      </Box>
+    </Card>
+  )
+}

src/pages/Staking/HowItWorks/NewTStakesCard.tsx

@@ -0,0 +1,17 @@
+import { FC, ComponentProps } from "react"
+import Card from "../../../components/Card"
+import { Body2, Label3 } from "../../../components/Typography"
+import StakingChecklist from "../../../components/StakingChecklist"
+
+export const NewTStakesCard: FC<ComponentProps<typeof Card>> = (props) => {
+  return (
+    <Card {...props}>
+      <Label3>new threshold stakes</Label3>
+      <Body2 mt="5" mb="5">
+        Before you start staking on Threshold Network, make sure you are aware
+        of the following requirements:
+      </Body2>
+      <StakingChecklist />
+    </Card>
+  )
+}

src/pages/Staking/HowItWorks/ProvidersCard.tsx

@@ -0,0 +1,104 @@
+import { FC, ComponentProps } from "react"
+import { Box, List, ListItem, HStack } from "@chakra-ui/react"
+import Card from "../../../components/Card"
+import { Body1, Body3, Label3 } from "../../../components/Typography"
+import BoxLabel from "../../../components/BoxLabel"
+import ExternalLink from "../../../components/ExternalLink"
+import { ExternalHref } from "../../../enums"
+
+export const ProvidersCard: FC<ComponentProps<typeof Card>> = (props) => {
+  return (
+    <Card {...props}>
+      <Label3>threshold and pre staking providers</Label3>
+      <List mt="6" spacing="4">
+        {providers.map(renderProviderListItem)}
+      </List>
+
+      <BoxLabel my="5" w="fit-content">
+        PRE Only
+      </BoxLabel>
+      <List mt="6" spacing="4">
+        {preOnlyProviders.map(renderProviderListItem)}
+      </List>
+    </Card>
+  )
+}
+
+type ProviderItem = {
+  name: string
+  email: string
+  link: ExternalHref
+}
+
+const ProviderListItem: FC<ProviderItem> = ({ name, email, link }) => (
+  <ListItem as={HStack} spacing="4" bg="gray.50" p="4" borderRadius="2">
+    <Box bg="brand.500" borderRadius="8px" w="48px" height="48px" />
+    <Box>
+      <Body1>{name}</Body1>
+      <Body3>{email}</Body3>
+    </Box>
+    <ExternalLink
+      fontWeight="600"
+      color="gray.700"
+      ml="auto !important"
+      text="Learn more"
+      href={link}
+      withArrow
+    />
+  </ListItem>
+)
+
+const renderProviderListItem = (provider: ProviderItem) => (
+  <ProviderListItem key={provider.name} {...provider} />
+)
+
+const providers = [
+  {
+    name: "Staked",
+    email: "[email protected]",
+    link: ExternalHref.stakedUs,
+  },
+  {
+    name: "BisonTrails",
+    email: "[email protected]",
+    link: ExternalHref.bisonTrails,
+  },
+  {
+    name: "BlockDaemon",
+    email: "[email protected]",
+    link: ExternalHref.blackDaemon,
+  },
+  {
+    name: "Boar",
+    email: "[email protected]",
+    link: ExternalHref.boar,
+  },
+  {
+    name: "Figment",
+    email: "[email protected]",
+    link: ExternalHref.figment,
+  },
+  {
+    name: "Low Fee Validation",
+    email: "[email protected]",
+    link: ExternalHref.lowFeeValidation,
+  },
+]
+
+const preOnlyProviders = [
+  {
+    name: "Ankr",
+    email: "[email protected]",
+    link: ExternalHref.ankr,
+  },
+  {
+    name: "P2P Validator",
+    email: "[email protected]",
+    link: ExternalHref.p2pValidator,
+  },
+  {
+    name: "InfStones",
+    email: "[email protected]",
+    link: ExternalHref.infStones,
+  },
+]

src/pages/Staking/HowItWorks/StakingActionsCard.tsx

@@ -0,0 +1,50 @@
+import { FC, ComponentProps } from "react"
+import { List, ListItem } from "@chakra-ui/react"
+import Card from "../../../components/Card"
+import { Label3 } from "../../../components/Typography"
+import BoxLabel from "../../../components/BoxLabel"
+
+export const StakingActionsCard: FC<ComponentProps<typeof Card>> = (props) => {
+  return (
+    <Card gridArea="staking-actions">
+      <Label3>staking actions</Label3>
+      <List mt="5" spacing="6">
+        {stakingActions.map((action) => (
+          <ListItem key={action.sectionName}>
+            <BoxLabel w="fit-content" mb="5">
+              {action.sectionName}
+            </BoxLabel>
+            <List spacing="4">
+              {action.items.map((item, index) => (
+                <ListItem key={`${action.sectionName}-${index}}`}>
+                  {item}
+                </ListItem>
+              ))}
+            </List>
+          </ListItem>
+        ))}
+      </List>
+    </Card>
+  )
+}
+
+const stakingActions = [
+  {
+    sectionName: "Rewards",
+    items: ["T rewards are released monthly."],
+  },
+  {
+    sectionName: "Stake Top-ups",
+    items: [
+      "Top-ups are done in T tokens.",
+      "If you want to top up your Legacy stake with Legacy tokens you have to go to the Legacy dashboard in order to do that.",
+    ],
+  },
+
+  {
+    sectionName: "Unstaking",
+    items: [
+      "Unstaking can be total or partial. For a total unstake you will not be able to use the same Staking Provider Address for new stakes. This unstaked stake becomes an inactive stake and can be topped up anytime you want.",
+    ],
+  },
+]

src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx

@@ -0,0 +1,33 @@
+import { FC, ComponentProps } from "react"
+import { UnorderedList, ListItem } from "@chakra-ui/react"
+import Card from "../../../components/Card"
+import { Body2, Label3 } from "../../../components/Typography"
+import ViewInBlockExplorer from "../../../components/ViewInBlockExplorer"
+import { ExplorerDataType } from "../../../utils/createEtherscanLink"
+
+export const ThresholdStakesCard: FC<
+  ComponentProps<typeof Card> & { tStakingContractAddress: string }
+> = ({ tStakingContractAddress, ...props }) => {
+  return (
+    <Card {...props}>
+      <Label3>threshold stakes</Label3>
+      <Body2 mt="5">
+        Either you are a new staker, a legacy NU staker or a legacy KEEP staker
+        we have a role and a place for everyone.
+      </Body2>
+      <Body2 mt="5">
+        The{" "}
+        <ViewInBlockExplorer
+          id={tStakingContractAddress}
+          type={ExplorerDataType.ADDRESS}
+          text="Threshold Staking Contract"
+        />
+        supports two types of stakes:
+      </Body2>
+      <UnorderedList mt="5">
+        <ListItem>Legacy Stakes (NuCypher and Keep Network stakes)</ListItem>
+        <ListItem>New T Stakes</ListItem>
+      </UnorderedList>
+    </Card>
+  )
+}