Merge pull request #272 from threshold-network/stake-flow-modal-updates

Update the confirm staking params modal

Update helper texts below the input to match designs. Also get rid of the
addresses from the list of confirmation params to match designs.

Author: michalsmiarowski

src/components/Forms/FormikInput.tsx

@@ -19,7 +19,7 @@ export const FormikInput: FC<
     name: string
     label: string
     secondaryLabel?: string
-    helperText?: string
+    helperText?: string | JSX.Element
     placeholder?: string
     tooltip?: string
   }

src/components/Modal/ConfirmStakingParams/AdvancedParamsForm.tsx

@@ -2,10 +2,15 @@ import { FC, Ref } from "react"
 import { FormikProps, FormikErrors, withFormik } from "formik"
 import { Form, FormikInput } from "../../Forms"
 import { getErrorsObj, validateETHAddress } from "../../../utils/forms"
-import { Alert, AlertIcon } from "@chakra-ui/react"
+import {
+  Alert,
+  AlertIcon,
+  BodyXs,
+  useColorModeValue,
+} from "@threshold-network/components"
 import { useWeb3React } from "@web3-react/core"
-import { BodyXs } from "@threshold-network/components"
 import { isAddress, isSameETHAddress } from "../../../web3/utils"
+import Link from "../../Link"
 
 export interface FormValues {
   stakingProvider: string
@@ -29,19 +34,23 @@ const AdvancedParamsFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
       <FormikInput
         name="stakingProvider"
         label="Provider Address"
-        helperText="Enter a staking provider address."
+        helperText={
+          <AddressHelper text="This is your node address. You can setup this address on your own or receive it from your Staking Provider." />
+        }
       />
       <FormikInput
         mt="6"
         name="beneficiary"
         label="Beneficiary Address"
-        helperText="This address will receive rewards."
+        helperText={<AddressHelper text="This address will receive rewards." />}
       />
       <FormikInput
         mt="6"
         name="authorizer"
         label="Authorizer Address"
-        helperText="This address will authorize applications."
+        helperText={
+          <AddressHelper text="This address will authorize applications. We recommend you to use the same address as your wallet address." />
+        }
       />
       {isAddress(authorizer) &&
         !isSameETHAddress(authorizer, account as string) && (
@@ -57,6 +66,16 @@ const AdvancedParamsFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
   )
 }
 
+const AddressHelper: FC<{ text: string }> = ({ text }) => {
+  const textColor = useColorModeValue("gray.500", "gray.300")
+
+  return (
+    <BodyXs color={textColor}>
+      {text} <Link to="/staking/how-it-works/overview">Learn more</Link>.
+    </BodyXs>
+  )
+}
+
 type AdvancedParamsFormProps = {
   initialAddress: string
   innerRef: Ref<FormikProps<FormValues>>

src/components/Modal/ConfirmStakingParams/index.tsx

@@ -1,6 +1,9 @@
 import { FC, useEffect, useRef, useState } from "react"
 import { useWeb3React } from "@web3-react/core"
 import {
+  BodyLg,
+  BodySm,
+  H5,
   Alert,
   AlertIcon,
   Button,
@@ -9,8 +12,10 @@ import {
   ModalCloseButton,
   ModalFooter,
   ModalHeader,
-} from "@chakra-ui/react"
-import { BodyLg, BodySm, H5 } from "@threshold-network/components"
+  List,
+  ListItem,
+  HStack,
+} from "@threshold-network/components"
 import { FormikProps } from "formik"
 import withBaseModal from "../withBaseModal"
 import { useModal } from "../../../hooks/useModal"
@@ -24,6 +29,7 @@ import StakingStats from "../../StakingStats"
 import useCheckDuplicateProviderAddress from "../../../web3/hooks/useCheckDuplicateProviderAddress"
 import { featureFlags } from "../../../constants"
 import { useStakeTransaction } from "../../../web3/hooks/useStakeTransaction"
+import { formatTokenAmount } from "../../../utils/formatAmount"
 
 const ConfirmStakingParamsModal: FC<
   BaseModalProps & { stakeAmount: string }
@@ -87,21 +93,23 @@ const ConfirmStakingParamsModal: FC<
       </ModalHeader>
       <ModalCloseButton />
       <ModalBody>
-        <InfoBox variant="modal" spacing={6}>
-          <H5>You are about to make a deposit into the T Staking Contract.</H5>
+        <InfoBox variant="modal">
+          <H5 mb="4">
+            You are about to make a deposit into the T Staking Contract.
+          </H5>
           {featureFlags.MULTI_APP_STAKING && (
             <BodyLg>Staking requires 2 transactions.</BodyLg>
           )}
         </InfoBox>
-        <StakingStats
-          {...{
-            stakeAmount,
-            beneficiary: account as string,
-            stakingProvider: account as string,
-            authorizer: account as string,
-          }}
-        />
-        <Alert my={6} status="info" fontSize="sm">
+        <List mt="6">
+          <ListItem>
+            <HStack justifyContent="space-between">
+              <BodySm>Staked Amount</BodySm>
+              <BodySm>{`${formatTokenAmount(stakeAmount)} T`}</BodySm>
+            </HStack>
+          </ListItem>
+        </List>
+        <Alert mb={6} my={9} status="info" fontSize="sm">
           <AlertIcon />
           Take note! These addresses cannot be changed later.
         </Alert>