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

Author: r-czajkowski

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>
   )
 }

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}>