diff --git a/src/pages/Staking/OperatorAddressMappingCard.tsx b/src/pages/Staking/OperatorAddressMappingCard.tsx
index 859a27773..3c4c303df 100644
--- 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 (
@@ -31,22 +57,66 @@ const OperatorAddressMappingCard: FC = () => {
Node operators only
-
-
-
- {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."}
-
-
-
+ {shoudlDisplaySuccessState ? (
+ Object.entries(mappedOperators).map(([appName, operator]) => {
+ return (
+
+
+
+ {getSakingAppLabel(appName as StakingAppName)} App
+
+
+
+ {" "}
+ Operator Mapped
+
+
+
+
+
+ Provider
+
+
+
+ {shortenAddress(stakingProvider)}
+
+
+
+
+ Operator
+
+
+
+ {shortenAddress(operator)}
+
+
+
+ {Object.keys(mappedOperators)[
+ Object.keys(mappedOperators).length - 1
+ ] !== appName && }
+
+ )
+ })
+ ) : (
+ <>
+
+
+
+ {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."}
+
+
+
+ >
+ )}
)
}
diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx
index 55764cf19..7fa508f92 100644
--- 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
- {isStakingProvider &&
+ {address &&
+ isStakingProvider &&
isOperatorMappingInitialFetchDone &&
(isAddressZero(mappedOperators.tbtc) ||
isAddressZero(mappedOperators.randomBeacon)) && (
-
+
)}
{hasStakes ? (
stakes.map((stake) => (
@@ -91,6 +93,13 @@ const StakingPage: PageComponent = (props) => {
) : (
)}
+ {address &&
+ isStakingProvider &&
+ isOperatorMappingInitialFetchDone &&
+ !isAddressZero(mappedOperators.tbtc) &&
+ !isAddressZero(mappedOperators.randomBeacon) && (
+
+ )}