MAS UI integration v2

src/components/ExternalLink/index.tsx

@@ -1,5 +1,11 @@
 import { FC, ReactElement } from "react"
-import { Icon, Link, LinkProps, useColorModeValue } from "@chakra-ui/react"
+import {
+  Icon,
+  Link,
+  LinkProps,
+  useColorModeValue,
+  forwardRef,
+} from "@threshold-network/components"
 import { FiArrowUpRight } from "react-icons/all"
 
 interface Props {
@@ -9,34 +15,27 @@ interface Props {
   icon?: ReactElement
 }
 
-const ExternalLink: FC<Props & LinkProps> = ({
-  text,
-  href,
-  withArrow,
-  icon,
-  ...props
-}) => {
-  const defaultColor = useColorModeValue("brand.500", "white")
-  const finalColor = props.color ? props.color : defaultColor
+const ExternalLink: FC<Props & LinkProps> = forwardRef(
+  ({ text, href, withArrow, icon, ...props }, ref) => {
+    const defaultColor = useColorModeValue("brand.500", "white")
+    const finalColor = props.color ? props.color : defaultColor
 
-  return (
-    <Link
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      color={finalColor}
-      textDecoration="underline"
-      {...props}
-    >
-      {text}
-      {withArrow ? (
-        <Icon boxSize="12px" ml="1" as={FiArrowUpRight} color={finalColor} />
-      ) : (
-        icon
-      )}
-    </Link>
-  )
-}
+    return (
+      <Link
+        ref={ref}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        color={finalColor}
+        textDecoration="underline"
+        {...props}
+      >
+        {text}
+        {withArrow ? <Icon boxSize="12px" ml="1" as={FiArrowUpRight} /> : icon}
+      </Link>
+    )
+  }
+)
 
 export * from "./SharedLinks"
 

src/components/Modal/StakingApplications/AuthorizeStakingApps.tsx

@@ -0,0 +1,121 @@
+import { FC } from "react"
+import {
+  BodyLg,
+  Button,
+  Card,
+  H5,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+  ModalHeader,
+  LabelSm,
+  BodyMd,
+  List,
+  ListItem,
+} from "@threshold-network/components"
+import { CheckCircleIcon } from "@chakra-ui/icons"
+import InfoBox from "../../InfoBox"
+import TokenBalance from "../../TokenBalance"
+import StakeAddressInfo from "../../../pages/Staking/StakeCard/StakeAddressInfo"
+import withBaseModal from "../withBaseModal"
+import {
+  calculatePercenteage,
+  formatPercentage,
+} from "../../../utils/percentage"
+import { BaseModalProps } from "../../../types"
+import { useAuthorizeMultipleAppsTransaction } from "../../../hooks/staking-applications"
+
+export type AuthorizeAppsProps = BaseModalProps & {
+  stakingProvider: string
+  totalInTStake: string
+  applications: {
+    appName: string
+    address: string
+    authorizationAmount: string
+  }[]
+}
+
+const AuthorizeStakingAppsBase: FC<AuthorizeAppsProps> = ({
+  stakingProvider,
+  totalInTStake,
+  applications,
+  closeModal,
+}) => {
+  const { authorizeMultipleApps } = useAuthorizeMultipleAppsTransaction()
+  const onAuthorize = async () => {
+    await authorizeMultipleApps(
+      applications.map((_) => ({
+        address: _.address,
+        amount: _.authorizationAmount,
+      })),
+      stakingProvider
+    )
+  }
+  const numberOfApps = applications.length
+
+  return (
+    <>
+      <ModalHeader>Authorize Apps</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        <InfoBox variant="modal" mb="6" mt="0">
+          <H5>
+            You are authorizing your stake for Threshold application
+            {numberOfApps > 1 ? "s" : ""}.
+          </H5>
+          <BodyLg mt="4">
+            This will require {numberOfApps} transaction
+            {numberOfApps > 1 ? "s" : ""}. You can adjust the authorization
+            amount at any time.
+          </BodyLg>
+        </InfoBox>
+        <List spacing="2.5">
+          {applications.map((app) => (
+            <ListItem key={app.appName}>
+              <StakingApplicationToAuth
+                {...app}
+                stakingProvider={stakingProvider}
+                totalInTStake={totalInTStake}
+              />
+            </ListItem>
+          ))}
+        </List>
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={closeModal} variant="outline" mr={2}>
+          Dismiss
+        </Button>
+        <Button mr={2} onClick={onAuthorize}>
+          Authorize
+        </Button>
+      </ModalFooter>
+    </>
+  )
+}
+
+const StakingApplicationToAuth: FC<{
+  appName: string
+  authorizationAmount: string
+  stakingProvider: string
+  totalInTStake: string
+}> = ({ appName, authorizationAmount, stakingProvider, totalInTStake }) => {
+  const percentage = formatPercentage(
+    calculatePercenteage(authorizationAmount, totalInTStake),
+    undefined,
+    true
+  )
+
+  return (
+    <Card>
+      <LabelSm mb="4">
+        <CheckCircleIcon color="green.500" verticalAlign="top" mr="2" />
+        {appName} - {percentage}
+      </LabelSm>
+      <BodyMd mb="3">Authorization Amount</BodyMd>
+      <TokenBalance tokenAmount={authorizationAmount} isLarge />
+      <StakeAddressInfo stakingProvider={stakingProvider} mb="0" />
+    </Card>
+  )
+}
+
+export const AuthorizeStakingApps = withBaseModal(AuthorizeStakingAppsBase)

src/components/Modal/StakingApplications/StakingApplicationsAuthorized.tsx

@@ -0,0 +1,159 @@
+import { FC, Fragment } from "react"
+import { Link as RouterLink, useNavigate } from "react-router-dom"
+import {
+  HStack,
+  BodyLg,
+  Button,
+  H5,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+  ModalHeader,
+  List,
+  ListItem,
+  Alert,
+  AlertIcon,
+  BodySm,
+  Divider,
+  Link,
+  FlowStepStatus,
+} from "@threshold-network/components"
+import InfoBox from "../../InfoBox"
+import ExternalLink from "../../ExternalLink"
+import ViewInBlockExplorer from "../../ViewInBlockExplorer"
+import withBaseModal from "../withBaseModal"
+import { useAppSelector } from "../../../hooks/store"
+import { selectStakeByStakingProvider } from "../../../store/staking"
+import {
+  calculatePercenteage,
+  formatPercentage,
+} from "../../../utils/percentage"
+import shortenAddress from "../../../utils/shortenAddress"
+import { formatTokenAmount } from "../../../utils/formatAmount"
+import { ExplorerDataType } from "../../../utils/createEtherscanLink"
+import { ExternalHref } from "../../../enums"
+import { BaseModalProps } from "../../../types"
+import { getStakingAppNameFromAddress } from "../../../utils/getStakingAppNameFromAddress"
+import StakingTimeline from "../../StakingTimeline"
+
+export type StakingApplicationsAuthorizeProps = BaseModalProps & {
+  stakingProvider: string
+  authorizedStakingApplications: {
+    address: string
+    amount: string
+    txHash: string
+  }[]
+}
+
+const StakingApplicationsAuthorizedBase: FC<
+  StakingApplicationsAuthorizeProps
+> = ({ stakingProvider, authorizedStakingApplications, closeModal }) => {
+  const stake = useAppSelector((state) =>
+    selectStakeByStakingProvider(state, stakingProvider)
+  )
+  const navigate = useNavigate()
+  const onAuthorizeOtherApps = () => {
+    closeModal()
+    navigate(`/staking/${stakingProvider}/authorize`)
+  }
+
+  return (
+    <>
+      <ModalHeader>Step 2 Completed</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        <Alert status="success" mb={4}>
+          <AlertIcon />
+          Your authorization was successful!
+        </Alert>
+        <List spacing="2" mb="6">
+          <ListItem>
+            <HStack justifyContent="space-between">
+              <BodySm>Provider Address</BodySm>
+              <BodySm>{shortenAddress(stakingProvider)}</BodySm>
+            </HStack>
+          </ListItem>
+          {authorizedStakingApplications.map((_) => (
+            <ListItem key={_.address}>
+              <HStack justifyContent="space-between">
+                <BodySm>{`${getStakingAppNameFromAddress(
+                  _.address
+                )} Authorization Amount`}</BodySm>
+                <BodySm>{`${formatTokenAmount(_.amount)} T (${formatPercentage(
+                  calculatePercenteage(_.amount, stake?.totalInTStake)
+                )})`}</BodySm>
+              </HStack>
+            </ListItem>
+          ))}
+        </List>
+        <InfoBox variant="modal">
+          <H5>
+            You can authorize more apps, or continue to Step 3 to set up nodes.
+          </H5>
+          <BodyLg mt="4">
+            You can adjust the authorization amount at any time from the{" "}
+            <Link as={RouterLink} to="/staking" color="brand.500">
+              Staking page
+            </Link>
+            .
+          </BodyLg>
+        </InfoBox>
+        <StakingTimeline
+          mt="9"
+          statuses={[
+            FlowStepStatus.complete,
+            FlowStepStatus.complete,
+            FlowStepStatus.active,
+          ]}
+        />
+        <BodySm align="center" mt="12">
+          {authorizedStakingApplications.length === 1 ? (
+            <>
+              <ViewInBlockExplorer
+                text="View"
+                id={authorizedStakingApplications[0].txHash}
+                type={ExplorerDataType.TRANSACTION}
+              />{" "}
+              transaction on Etherscan
+            </>
+          ) : (
+            <>
+              View{" "}
+              {authorizedStakingApplications.map((_, index) => (
+                <Fragment key={_.address}>
+                  <ViewInBlockExplorer
+                    text={`transaction ${index + 1}`}
+                    id={_.txHash}
+                    type={ExplorerDataType.TRANSACTION}
+                  />
+                  {index + 1 === authorizedStakingApplications.length
+                    ? " "
+                    : " and "}
+                </Fragment>
+              ))}
+              on Etherscan
+            </>
+          )}
+        </BodySm>
+        <Divider mt="4" />
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          variant="outline"
+          as={ExternalLink}
+          mr={2}
+          href={ExternalHref.setupNodes}
+          text="Node Setup Doc"
+          withArrow
+        />
+        <Button onClick={onAuthorizeOtherApps} mr={2}>
+          Authorize Other Apps
+        </Button>
+      </ModalFooter>
+    </>
+  )
+}
+
+export const StakingApplicationsAuthorized = withBaseModal(
+  StakingApplicationsAuthorizedBase
+)

src/components/Modal/StakingApplications/index.ts

@@ -0,0 +1,2 @@
+export { AuthorizeStakingApps } from "./AuthorizeStakingApps"
+export { StakingApplicationsAuthorized } from "./StakingApplicationsAuthorized"