From 04add378fdb1393be537446da67cee792216aefe Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Tue, 31 May 2022 13:31:13 +0200 Subject: [PATCH 1/7] 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 | 32 +++++- src/enums/externalHref.ts | 9 ++ .../Staking/HowItWorks/AboutAddressesCard.tsx | 49 ++++++++ .../Staking/HowItWorks/LegacyStakesCard.tsx | 34 ++++++ .../Staking/HowItWorks/NewTStakesCard.tsx | 17 +++ .../Staking/HowItWorks/ProvidersCard.tsx | 105 ++++++++++++++++++ .../Staking/HowItWorks/StakingActionsCard.tsx | 48 ++++++++ .../HowItWorks/ThresholdStakesCard.tsx | 33 ++++++ src/pages/Staking/HowItWorks/index.tsx | 59 ++++++++++ src/pages/Staking/index.tsx | 16 ++- 10 files changed, 399 insertions(+), 3 deletions(-) create mode 100644 src/pages/Staking/HowItWorks/AboutAddressesCard.tsx create mode 100644 src/pages/Staking/HowItWorks/LegacyStakesCard.tsx create mode 100644 src/pages/Staking/HowItWorks/NewTStakesCard.tsx create mode 100644 src/pages/Staking/HowItWorks/ProvidersCard.tsx create mode 100644 src/pages/Staking/HowItWorks/StakingActionsCard.tsx create mode 100644 src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx create mode 100644 src/pages/Staking/HowItWorks/index.tsx diff --git a/src/components/StakingChecklist/index.tsx b/src/components/StakingChecklist/index.tsx index 4a0630772..bca47bfab 100644 --- a/src/components/StakingChecklist/index.tsx +++ b/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 ( + + Authorize your NuCypher legacy stake{" "} + + + ), + }, + { + title: ( + + Authorize your Keep Network legacy stake{" "} + + + ), + }, + ]} + /> + ) +} + export const PreSetupSteps: FC = () => { return ( > = (props) => { + return ( + + about the Addresses you need to provide + + {aboutAddresses.map((action) => ( + + + {action.sectionName} + + + {action.items.map((item) => ( + {item} + ))} + + + ))} + + + ) +} + +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.", + ], + }, +] diff --git a/src/pages/Staking/HowItWorks/LegacyStakesCard.tsx b/src/pages/Staking/HowItWorks/LegacyStakesCard.tsx new file mode 100644 index 000000000..f9e6571f0 --- /dev/null +++ b/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 & { tStakingContractAddress: string } +> = ({ tStakingContractAddress, ...props }) => { + return ( + + legacy stakes + + If you have an active stake on NuCypher or on Keep Network you can + authorize the{" "} + {" "} + on the legacy dashboard. + + + + + + + ) +} diff --git a/src/pages/Staking/HowItWorks/NewTStakesCard.tsx b/src/pages/Staking/HowItWorks/NewTStakesCard.tsx new file mode 100644 index 000000000..0a8214490 --- /dev/null +++ b/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> = (props) => { + return ( + + new threshold stakes + + Before you start staking on Threshold Network, make sure you are aware + of the following requirements: + + + + ) +} diff --git a/src/pages/Staking/HowItWorks/ProvidersCard.tsx b/src/pages/Staking/HowItWorks/ProvidersCard.tsx new file mode 100644 index 000000000..c50cd80f5 --- /dev/null +++ b/src/pages/Staking/HowItWorks/ProvidersCard.tsx @@ -0,0 +1,105 @@ +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> = (props) => { + return ( + + threshold and pre staking providers + + {providers.map(renderProviderListItem)} + + + + PRE Only + + + {preOnlyProviders.map(renderProviderListItem)} + + + ) +} + +type ProviderItem = { + name: string + email: string + link: ExternalHref +} + +const ProviderListItem: FC = ({ name, email, link }) => ( + + + + {name} + {email} + + + +) + +const renderProviderListItem = (provider: ProviderItem) => ( + +) + +const providers = [ + { + name: "Staked", + email: "togilvie@staked.us", + link: ExternalHref.stakedUs, + }, + { + name: "BisonTrails", + email: "viktor@bisontrails.co", + link: ExternalHref.bisonTrails, + }, + { + name: "BlockDaemon", + email: "konstantin@blockdaemon.com", + link: ExternalHref.blackDaemon, + }, + { + name: "Boar", + email: "hello@boar.network", + link: ExternalHref.boar, + }, + { + name: "Figment", + email: "yannick@figment.io", + link: ExternalHref.figment, + }, + { + name: "Low Fee Validation", + email: "eduardo@lowfeevalidation.com", + link: ExternalHref.lowFeeValidation, + }, +] + +const preOnlyProviders = [ + { + name: "Ankr", + email: "sales@ankr.com", + link: ExternalHref.ankr, + }, + { + name: "P2P Validator", + email: "hello@p2p.org", + link: ExternalHref.p2pValidator, + }, + { + name: "InfStones", + email: "contact@infstones.com", + link: ExternalHref.infStones, + }, +] diff --git a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx new file mode 100644 index 000000000..69077f3e4 --- /dev/null +++ b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx @@ -0,0 +1,48 @@ +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> = (props) => { + return ( + + staking actions + + {stakingActions.map((action) => ( + + + {action.sectionName} + + + {action.items.map((item) => ( + {item} + ))} + + + ))} + + + ) +} + +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 Operator Address for new stakes. This unstaked stake becomes an inactive stake and can be toppped up anytime you want.", + ], + }, +] diff --git a/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx b/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx new file mode 100644 index 000000000..13cacca60 --- /dev/null +++ b/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 & { tStakingContractAddress: string } +> = ({ tStakingContractAddress, ...props }) => { + return ( + + threshold stakes + + Either you are a new staker, a legacy NU staker or a legacy KEEP staker + we have a role and a place for everyone. + + + The{" "} + + supports two types of stakes: + + + Legacy Stakes (NuCypher and KeepNetwork stakes) + New T Stakes + + + ) +} diff --git a/src/pages/Staking/HowItWorks/index.tsx b/src/pages/Staking/HowItWorks/index.tsx new file mode 100644 index 000000000..c35be9a5f --- /dev/null +++ b/src/pages/Staking/HowItWorks/index.tsx @@ -0,0 +1,59 @@ +import { Grid } from "@chakra-ui/react" +import { AboutAddressesCard } from "./AboutAddressesCard" +import { LegacyStakesCard } from "./LegacyStakesCard" +import { NewTStakesCard } from "./NewTStakesCard" +import { ProvidersCard } from "./ProvidersCard" +import { StakingActionsCard } from "./StakingActionsCard" +import { ThresholdStakesCard } from "./ThresholdStakesCard" +import { PageComponent } from "../../../types" +import { useTStakingContract } from "../../../web3/hooks" + +const HowItWorksPage: PageComponent = (props) => { + const tStakingContract = useTStakingContract() + + return ( + + + + + + + + + ) +} + +HowItWorksPage.route = { + path: "how-it-works", + index: false, + title: "How it Works", +} + +export default HowItWorksPage diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index 7ca237b83..ee3eec547 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -9,6 +9,7 @@ import { StakingBonusBanner } from "../../components/StakingBonus" import { useFetchTvl } from "../../hooks/useFetchTvl" import { useStakingState } from "../../hooks/useStakingState" import { PageComponent } from "../../types" +import HowItWorksPage from "./HowItWorks" const StakingPage: PageComponent = (props) => { const [data, fetchtTvlData] = useFetchTvl() @@ -45,9 +46,20 @@ const StakingPage: PageComponent = (props) => { } StakingPage.route = { - path: "staking", + path: "", index: false, title: "Staking", } -export default StakingPage +const MainStakingPage: PageComponent = (props) => { + return +} + +MainStakingPage.route = { + path: "staking", + index: true, + pages: [StakingPage, HowItWorksPage], + title: "Staking", +} + +export default MainStakingPage From 8b77f293ffbf177fb06f259780a064c7e33ee684 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Tue, 31 May 2022 16:42:28 +0200 Subject: [PATCH 2/7] Fix link to providers `` doesn't have `link` prop we should use `href`. --- src/pages/Staking/HowItWorks/ProvidersCard.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/Staking/HowItWorks/ProvidersCard.tsx b/src/pages/Staking/HowItWorks/ProvidersCard.tsx index c50cd80f5..b3e7704f5 100644 --- a/src/pages/Staking/HowItWorks/ProvidersCard.tsx +++ b/src/pages/Staking/HowItWorks/ProvidersCard.tsx @@ -42,8 +42,7 @@ const ProviderListItem: FC = ({ name, email, link }) => ( color="gray.700" ml="auto !important" text="Learn more" - // @ts-ignore - link={link as ExternalHref} + href={link} withArrow /> From b31aede2ebd4dedee265b0bd4efd05c8a26392e3 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Tue, 31 May 2022 16:53:46 +0200 Subject: [PATCH 3/7] Update link to the Keep Dapp on how it works page Redirect users to `Applications -> Threshold` in Keep Token Dashboard- it's a page where users can move existing Keep stake into T. --- src/components/StakingChecklist/index.tsx | 2 +- src/enums/externalHref.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/StakingChecklist/index.tsx b/src/components/StakingChecklist/index.tsx index bca47bfab..eb7eda392 100644 --- a/src/components/StakingChecklist/index.tsx +++ b/src/components/StakingChecklist/index.tsx @@ -49,7 +49,7 @@ export const LegacyStakesDepositSteps: FC = () => { Authorize your Keep Network legacy stake{" "} diff --git a/src/enums/externalHref.ts b/src/enums/externalHref.ts index 75f94d371..1421402b8 100644 --- a/src/enums/externalHref.ts +++ b/src/enums/externalHref.ts @@ -7,6 +7,7 @@ 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/", From ac589b7efbfb054ea92f3e90d69aa3d57d3bf413 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Tue, 31 May 2022 17:00:35 +0200 Subject: [PATCH 4/7] Fix typo `toppped` -> `topped`. --- src/pages/Staking/HowItWorks/StakingActionsCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx index 69077f3e4..0674e9aa4 100644 --- a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx +++ b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx @@ -42,7 +42,7 @@ const stakingActions = [ { sectionName: "Unstaking", items: [ - "Unstaking can be total or partial. For a total unstake you will not be able to use the same Operator Address for new stakes. This unstaked stake becomes an inactive stake and can be toppped up anytime you want.", + "Unstaking can be total or partial. For a total unstake you will not be able to use the same Operator Address for new stakes. This unstaked stake becomes an inactive stake and can be topped up anytime you want.", ], }, ] From a1285078e38c5907cac98489accfd45e9e540283 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Tue, 31 May 2022 17:01:16 +0200 Subject: [PATCH 5/7] Update copy in Staking actions card The term operator here is outdated. It should be staking provider. --- src/pages/Staking/HowItWorks/StakingActionsCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx index 0674e9aa4..392427555 100644 --- a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx +++ b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx @@ -42,7 +42,7 @@ const stakingActions = [ { sectionName: "Unstaking", items: [ - "Unstaking can be total or partial. For a total unstake you will not be able to use the same Operator Address for new stakes. This unstaked stake becomes an inactive stake and can be topped up anytime you want.", + "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.", ], }, ] From b680b091d532f79bef7e88b237edeeb44519aaed Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 1 Jun 2022 10:38:40 +0200 Subject: [PATCH 6/7] Update copy Add missing empty space between words: `KeepNetwork` -> `Keep Network`. --- src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx b/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx index 13cacca60..0a027e138 100644 --- a/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx +++ b/src/pages/Staking/HowItWorks/ThresholdStakesCard.tsx @@ -25,7 +25,7 @@ export const ThresholdStakesCard: FC< supports two types of stakes: - Legacy Stakes (NuCypher and KeepNetwork stakes) + Legacy Stakes (NuCypher and Keep Network stakes) New T Stakes From c2bea9932d33f6d13ed79ed21173ef4f328cb4e5 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 1 Jun 2022 10:39:52 +0200 Subject: [PATCH 7/7] Add `key` prop for a list items --- src/pages/Staking/HowItWorks/AboutAddressesCard.tsx | 8 +++++--- src/pages/Staking/HowItWorks/StakingActionsCard.tsx | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx b/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx index e7e8b6fff..5388aa380 100644 --- a/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx +++ b/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx @@ -10,13 +10,15 @@ export const AboutAddressesCard: FC> = (props) => { about the Addresses you need to provide {aboutAddresses.map((action) => ( - + {action.sectionName} - {action.items.map((item) => ( - {item} + {action.items.map((item, index) => ( + + {item} + ))} diff --git a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx index 392427555..779b32321 100644 --- a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx +++ b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx @@ -10,13 +10,15 @@ export const StakingActionsCard: FC> = (props) => { staking actions {stakingActions.map((action) => ( - + {action.sectionName} - {action.items.map((item) => ( - {item} + {action.items.map((item, index) => ( + + {item} + ))}