Merge pull request #261 from threshold-network/operator-mapping-card-…

…success-state Add success state to OperatorAddressMappingCard `OperatorAddressMappingCard` should be displayed in staking page also for the providers that already mapped an operator. We will keep this card with staking provider <> operator pair displayed. There are also a tooltip for each to help user know which address is which. **Note:** The OperatorAddressMappingCard with a success state should be displayed at the top on left column when staking provider doesnt own any stakes, and at the bottom of the left column if he owns some stakes. Link to Figma: https://www.figma.com/file/Tx1lZc7us4SqCeAgbt1hBV/Threshold-Dapp?node-id=6179%3A147494
threshold-network · Oct 26, 2022 · 75197a8 · 75197a8
2 parents 06009f9 + d818bfa
commit 75197a8
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 20 deletions.
diff --git a/src/pages/Staking/OperatorAddressMappingCard.tsx b/src/pages/Staking/OperatorAddressMappingCard.tsx
@@ -1,28 +1,54 @@
+import { Icon } from "@chakra-ui/icons"
 import {
   Alert,
   AlertIcon,
   Badge,
+  BodyMd,
   BodyXs,
+  Box,
+  BoxLabel,
   Button,
   Card,
   HStack,
   LabelSm,
+  LineDivider,
+  Tooltip,
+  useColorModeValue,
 } from "@threshold-network/components"
 import { FC } from "react"
 import { ModalType } from "../../enums"
 import { useAppSelector } from "../../hooks/store"
 import { useModal } from "../../hooks/useModal"
 import { selectMappedOperators } from "../../store/account/selectors"
+import shortenAddress from "../../utils/shortenAddress"
+import { isAddressZero } from "../../web3/utils"
+import { FcCheckmark, FiLink2 } from "react-icons/all"
+import { getSakingAppLabel } from "../../utils/getStakingAppLabel"
+import { StakingAppName } from "../../store/staking-applications"
 
-const OperatorAddressMappingCard: FC = () => {
+const OperatorAddressMappingCard: FC<{ stakingProvider: string }> = ({
+  stakingProvider,
+}) => {
   const { openModal } = useModal()
+  const {
+    mappedOperatorTbtc,
+    mappedOperatorRandomBeacon,
+    isOneOfTheAppsNotMapped,
+  } = useAppSelector(selectMappedOperators)
 
-  const { isOneOfTheAppsNotMapped } = useAppSelector(selectMappedOperators)
+  const shoudlDisplaySuccessState =
+    !isAddressZero(mappedOperatorTbtc) &&
+    !isAddressZero(mappedOperatorRandomBeacon)
 
   const onStartMappingClick = () => {
     openModal(ModalType.MapOperatorToStakingProvider)
   }
 
+  const mappedOperators = {
+    tbtc: mappedOperatorTbtc,
+    randomBeacon: mappedOperatorRandomBeacon,
+  }
+
   return (
     <Card borderColor={isOneOfTheAppsNotMapped ? "red.500" : "gray.100"}>
       <HStack justifyContent={"space-between"}>
@@ -31,22 +57,66 @@ const OperatorAddressMappingCard: FC = () => {
           Node operators only
         </Badge>
       </HStack>
-      <Alert
-        status={isOneOfTheAppsNotMapped ? "error" : "warning"}
-        alignItems={"center"}
-        mt={5}
-        p={"8px 10px"}
-      >
-        <AlertIcon h={"14px"} as={"div"} alignSelf="auto" />
-        <BodyXs>
-          {isOneOfTheAppsNotMapped
-            ? "One application from the tBTC + Random Beacon Rewards Bundle Suite requires the Operator Address mapped."
-            : "This section is for Staking Providers and self-operating stakers only. Map your Operator Address to your Provider Address for a better support for your hardware wallet in the node setup."}
-        </BodyXs>
-      </Alert>
-      <Button size="lg" w="100%" mt="5" onClick={onStartMappingClick}>
-        Start Mapping
-      </Button>
+      {shoudlDisplaySuccessState ? (
+        Object.entries(mappedOperators).map(([appName, operator]) => {
+          return (
+            <Box key={`mapped_operator_${appName}_${operator}`}>
+              <HStack mt={5}>
+                <BoxLabel status="secondary" size={"sm"}>
+                  {getSakingAppLabel(appName as StakingAppName)} App
+                </BoxLabel>
+                <Badge variant="subtle" size={"md"} bgColor={"green.50"} py={1}>
+                  <HStack>
+                    <Icon as={FcCheckmark} />{" "}
+                    <LabelSm color={"green.500"}>Operator Mapped</LabelSm>
+                  </HStack>
+                </Badge>
+              </HStack>
+              <HStack justify="space-between" mt={5}>
+                <BoxLabel status="primary" size={"sm"}>
+                  Provider
+                </BoxLabel>
+                <BodyMd color={useColorModeValue("brand.500", "brand.550")}>
+                  <Tooltip label={`Staking provider`}>
+                    {shortenAddress(stakingProvider)}
+                  </Tooltip>
+                </BodyMd>
+                <Icon color="gray.500" boxSize="16px" as={FiLink2} />
+                <BoxLabel status="secondary" size={"sm"}>
+                  Operator
+                </BoxLabel>
+                <BodyMd color={useColorModeValue("gray.500", "gray.300")}>
+                  <Tooltip label={`Operator`}>
+                    {shortenAddress(operator)}
+                  </Tooltip>
+                </BodyMd>
+              </HStack>
+              {Object.keys(mappedOperators)[
+                Object.keys(mappedOperators).length - 1
+              ] !== appName && <LineDivider />}
+            </Box>
+          )
+        })
+      ) : (
+        <>
+          <Alert
+            status={isOneOfTheAppsNotMapped ? "error" : "warning"}
+            alignItems={"center"}
+            mt={5}
+            p={"8px 10px"}
+          >
+            <AlertIcon h={"14px"} as={"div"} alignSelf="auto" />
+            <BodyXs>
+              {isOneOfTheAppsNotMapped
+                ? "One application from the tBTC + Random Beacon Rewards Bundle Suite requires the Operator Address mapped."
+                : "This section is for Staking Providers and self-operating stakers only. Map your Operator Address to your Provider Address for a better support for your hardware wallet in the node setup."}
+            </BodyXs>
+          </Alert>
+          <Button size="lg" w="100%" mt="5" onClick={onStartMappingClick}>
+            Start Mapping
+          </Button>
+        </>
+      )}
     </Card>
   )
 }

diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx
@@ -55,6 +55,7 @@ const StakingPage: PageComponent = (props) => {
   const hasStakes = stakes.length > 0
 
   const {
+    address,
     isStakingProvider,
     operatorMapping: {
       isInitialFetchDone: isOperatorMappingInitialFetchDone,
@@ -78,11 +79,12 @@ const StakingPage: PageComponent = (props) => {
           >
             Your Stake
           </H4>
-          {isStakingProvider &&
+          {address &&
+            isStakingProvider &&
             isOperatorMappingInitialFetchDone &&
             (isAddressZero(mappedOperators.tbtc) ||
               isAddressZero(mappedOperators.randomBeacon)) && (
-              <OperatorAddressMappingCard />
+              <OperatorAddressMappingCard stakingProvider={address} />
             )}
           {hasStakes ? (
             stakes.map((stake) => (
@@ -91,6 +93,13 @@ const StakingPage: PageComponent = (props) => {
           ) : (
             <NewStakeCard />
           )}
+          {address &&
+            isStakingProvider &&
+            isOperatorMappingInitialFetchDone &&
+            !isAddressZero(mappedOperators.tbtc) &&
+            !isAddressZero(mappedOperators.randomBeacon) && (
+              <OperatorAddressMappingCard stakingProvider={address} />
+            )}
         </VStack>
 
         <VStack w={"100%"} spacing={5}>