Merge branch 'main' into releases/mainnet/v1.1.0

src/components/Forms/TokenAmountForm.tsx

@@ -5,7 +5,11 @@ import ThresholdCircleBrand from "../../static/icons/ThresholdCircleBrand"
 import { FormikTokenBalanceInput } from "./FormikTokenBalanceInput"
 import SubmitTxButton from "../SubmitTxButton"
 import { Form } from "./Form"
-import { getErrorsObj, validateAmountInRange } from "../../utils/forms"
+import {
+  DEFAULT_MIN_VALUE,
+  getErrorsObj,
+  validateAmountInRange,
+} from "../../utils/forms"
 import { formatTokenAmount } from "../../utils/formatAmount"
 
 export type FormValues = {
@@ -25,6 +29,8 @@ type TokenAmountFormProps = {
   shouldDisplayMaxAmountInLabel?: boolean
   token?: { decimals: number; symbol: string }
   innerRef?: Ref<FormikProps<FormValues>>
+  placeholder?: string
+  minTokenAmount?: string | number
 }
 
 const TokenAmountFormBase: FC<
@@ -39,6 +45,7 @@ const TokenAmountFormBase: FC<
   isDisabled = false,
   shouldValidateForm = true,
   shouldDisplayMaxAmountInLabel = false,
+  placeholder,
   ...formikProps
 }) => {
   return (
@@ -60,7 +67,7 @@ const TokenAmountFormBase: FC<
             label
           )
         }
-        placeholder={`${token.symbol} amount`}
+        placeholder={placeholder || `${token.symbol} amount`}
         icon={icon}
         mb={2}
         max={maxTokenAmount}
@@ -88,7 +95,8 @@ export const TokenAmountForm = withFormik<TokenAmountFormProps, FormValues>({
 
     errors.tokenAmount = validateAmountInRange(
       values.tokenAmount,
-      props.maxTokenAmount.toString()
+      props.maxTokenAmount.toString(),
+      props.minTokenAmount ? props.minTokenAmount.toString() : DEFAULT_MIN_VALUE
     )
     return getErrorsObj(errors)
   },
@@ -100,4 +108,5 @@ export const TokenAmountForm = withFormik<TokenAmountFormProps, FormValues>({
 
 TokenAmountForm.defaultProps = {
   shouldValidateForm: true,
+  minTokenAmount: DEFAULT_MIN_VALUE,
 }

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/hooks/useMinStakeAmount.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react"
+import { useDispatch } from "react-redux"
+import { setMinStake } from "../store/staking"
+import { useTStakingContract } from "../web3/hooks"
+import { useStakingState } from "./useStakingState"
+
+export const useMinStakeAmount = () => {
+  const tStakingContract = useTStakingContract()
+  const { minStakeAmount } = useStakingState()
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    const fetchMinStakeAmount = async () => {
+      try {
+        const minStakeAmount = await tStakingContract?.minTStakeAmount()
+        dispatch(setMinStake({ amount: minStakeAmount.toString() }))
+      } catch (error) {
+        console.error("Could not fetch the min stake amount: ", error)
+      }
+    }
+    if (minStakeAmount === "0" && tStakingContract) fetchMinStakeAmount()
+  }, [tStakingContract, dispatch, minStakeAmount])
+
+  return minStakeAmount
+}

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,
+  },
+]