From 88b0f4c0b6c95e9bc9a1b69aff58375e6905bc4a Mon Sep 17 00:00:00 2001 From: michalsmiarowski Date: Wed, 5 Oct 2022 15:12:46 +0200 Subject: [PATCH 1/4] Add success state to OperatorAddressMappingCard We now want to display the `OperatorAddressMappingCard` when the operator is successfully mapped to staking provider. We display the pair in the card. --- .../Staking/OperatorAddressMappingCard.tsx | 75 ++++++++++++++----- src/pages/Staking/index.tsx | 24 +++++- 2 files changed, 76 insertions(+), 23 deletions(-) diff --git a/src/pages/Staking/OperatorAddressMappingCard.tsx b/src/pages/Staking/OperatorAddressMappingCard.tsx index f299de0a6..5866205fb 100644 --- a/src/pages/Staking/OperatorAddressMappingCard.tsx +++ b/src/pages/Staking/OperatorAddressMappingCard.tsx @@ -1,24 +1,30 @@ +import { CheckCircleIcon, Icon } from "@chakra-ui/icons" import { Alert, AlertIcon, Badge, + BodyMd, BodyXs, + BoxLabel, Button, Card, HStack, + Tooltip, + useColorModeValue, } from "@threshold-network/components" import { LabelSm } from "@threshold-network/components" import { FC } from "react" import { ModalType } from "../../enums" -// import { useOperatorMappedtoStakingProviderHelpers } from "../../hooks/staking-applications/useOperatorMappedToStakingProviderHelpers" import { useModal } from "../../hooks/useModal" +import shortenAddress from "../../utils/shortenAddress" import { isAddressZero } from "../../web3/utils" +import { FiLink2 } from "react-icons/all" -//TODO: Fix this const OperatorAddressMappingCard: FC<{ + stakingProvider: string mappedOperatorTbtc: string mappedOperatorRandomBeacon: string -}> = ({ mappedOperatorTbtc, mappedOperatorRandomBeacon }) => { +}> = ({ stakingProvider, mappedOperatorTbtc, mappedOperatorRandomBeacon }) => { const { openModal } = useModal() const isOperatorMappedOnlyInTbtc = !isAddressZero(mappedOperatorTbtc) && @@ -31,6 +37,10 @@ const OperatorAddressMappingCard: FC<{ const isOneOfTheAppsNotMapped = isOperatorMappedOnlyInRandomBeacon || isOperatorMappedOnlyInTbtc + const areAllAppsMappedSuccessfuly = + !isAddressZero(mappedOperatorTbtc) && + !isAddressZero(mappedOperatorRandomBeacon) + const onStartMappingClick = () => { openModal(ModalType.MapOperatorToStakingProvider, { mappedOperatorTbtc, @@ -46,22 +56,49 @@ 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."} - - - + {areAllAppsMappedSuccessfuly ? ( + + } + > + Operator Mapped + + + + + {shortenAddress(stakingProvider)} + + + + + + {shortenAddress(mappedOperatorTbtc)} + + + + + ) : ( + <> + + + + {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 a383f8a0d..4d4ee40e6 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -47,9 +47,12 @@ const StakingPage: PageComponent = (props) => { const hasStakes = stakes.length > 0 const { - isInitialFetchDone: isOperatorMappingInitialFetchDone, - data: { isUsedAsStakingProvider, mappedOperators }, - } = useSelector((state: RootState) => state.connectedAccount.operatorMapping) + address, + operatorMapping: { + isInitialFetchDone: isOperatorMappingInitialFetchDone, + data: { isUsedAsStakingProvider, mappedOperators }, + }, + } = useSelector((state: RootState) => state.connectedAccount) return ( @@ -67,11 +70,13 @@ const StakingPage: PageComponent = (props) => { > Your Stake - {isUsedAsStakingProvider && + {address && + isUsedAsStakingProvider && isOperatorMappingInitialFetchDone && (isAddressZero(mappedOperators.tbtc) || isAddressZero(mappedOperators.randomBeacon)) && ( @@ -83,6 +88,17 @@ const StakingPage: PageComponent = (props) => { ) : ( )} + {address && + isUsedAsStakingProvider && + isOperatorMappingInitialFetchDone && + !isAddressZero(mappedOperators.tbtc) && + !isAddressZero(mappedOperators.randomBeacon) && ( + + )} From 4402d03c17ea40a8666242820d5b220cf91b7e7a Mon Sep 17 00:00:00 2001 From: michalsmiarowski Date: Thu, 13 Oct 2022 23:47:45 +0200 Subject: [PATCH 2/4] Change design of OperatorAddressMappingCard --- .../Staking/OperatorAddressMappingCard.tsx | 84 +++++++++++++------ src/pages/Staking/index.tsx | 6 +- 2 files changed, 60 insertions(+), 30 deletions(-) diff --git a/src/pages/Staking/OperatorAddressMappingCard.tsx b/src/pages/Staking/OperatorAddressMappingCard.tsx index ed0f17eb0..0ef8bbebb 100644 --- a/src/pages/Staking/OperatorAddressMappingCard.tsx +++ b/src/pages/Staking/OperatorAddressMappingCard.tsx @@ -5,11 +5,13 @@ import { Badge, BodyMd, BodyXs, + Box, BoxLabel, Button, Card, HStack, LabelSm, + LineDivider, Tooltip, useColorModeValue, } from "@threshold-network/components" @@ -18,13 +20,26 @@ import { ModalType } from "../../enums" import { useModal } from "../../hooks/useModal" import shortenAddress from "../../utils/shortenAddress" import { isAddressZero } from "../../web3/utils" -import { FiLink2 } from "react-icons/all" +import { FcCheckmark, FiLink2 } from "react-icons/all" +import { MappedOperatorsForStakingProvider } from "../../threshold-ts/mas" + +interface AppLabels { + tbtc: string + randomBeacon: string +} const OperatorAddressMappingCard: FC<{ stakingProvider: string - mappedOperatorTbtc: string - mappedOperatorRandomBeacon: string -}> = ({ stakingProvider, mappedOperatorTbtc, mappedOperatorRandomBeacon }) => { + mappedOperators: MappedOperatorsForStakingProvider +}> = ({ stakingProvider, mappedOperators }) => { + const { tbtc: mappedOperatorTbtc, randomBeacon: mappedOperatorRandomBeacon } = + mappedOperators + + const appLabels: AppLabels = { + tbtc: "tBTC", + randomBeacon: "Random Beacon", + } + const { openModal } = useModal() const isOperatorMappedOnlyInTbtc = !isAddressZero(mappedOperatorTbtc) && @@ -57,28 +72,45 @@ const OperatorAddressMappingCard: FC<{ {areAllAppsMappedSuccessfuly ? ( - - } - > - Operator Mapped - - - - - {shortenAddress(stakingProvider)} - - - - - - {shortenAddress(mappedOperatorTbtc)} - - - - + Object.entries(mappedOperators).map(([appName, operator]) => { + return ( + + + + {appLabels[appName as keyof AppLabels]} App + + + + {" "} + Operator Mapped + + + + + + Provider + + + + {shortenAddress(stakingProvider)} + + + + + Operator + + + + {shortenAddress(operator)} + + + + {Object.keys(mappedOperators)[ + Object.keys(mappedOperators).length - 1 + ] !== appName && } + + ) + }) ) : ( <> { isAddressZero(mappedOperators.randomBeacon)) && ( )} {hasStakes ? ( @@ -95,8 +94,7 @@ const StakingPage: PageComponent = (props) => { !isAddressZero(mappedOperators.randomBeacon) && ( )} From 5b8ad8bd24738685cced73ded77281f291192635 Mon Sep 17 00:00:00 2001 From: michalsmiarowski Date: Fri, 14 Oct 2022 16:14:26 +0200 Subject: [PATCH 3/4] Change variable name We wnat to display the success state of the OperatorMappingCard not when all of the apps are mapped but when tbtc and random beacon are mapped (not necessarily PRE). That's why we change the variable name: areAllAppsMappedSuccessfuly -> shoudlDisplaySuccessState --- src/pages/Staking/OperatorAddressMappingCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/Staking/OperatorAddressMappingCard.tsx b/src/pages/Staking/OperatorAddressMappingCard.tsx index 0ef8bbebb..db547d976 100644 --- a/src/pages/Staking/OperatorAddressMappingCard.tsx +++ b/src/pages/Staking/OperatorAddressMappingCard.tsx @@ -1,4 +1,4 @@ -import { CheckCircleIcon, Icon } from "@chakra-ui/icons" +import { Icon } from "@chakra-ui/icons" import { Alert, AlertIcon, @@ -52,7 +52,7 @@ const OperatorAddressMappingCard: FC<{ const isOneOfTheAppsNotMapped = isOperatorMappedOnlyInRandomBeacon || isOperatorMappedOnlyInTbtc - const areAllAppsMappedSuccessfuly = + const shoudlDisplaySuccessState = !isAddressZero(mappedOperatorTbtc) && !isAddressZero(mappedOperatorRandomBeacon) @@ -71,7 +71,7 @@ const OperatorAddressMappingCard: FC<{ Node operators only - {areAllAppsMappedSuccessfuly ? ( + {shoudlDisplaySuccessState ? ( Object.entries(mappedOperators).map(([appName, operator]) => { return ( From d818bfae1f4bd8a655c2e27cfb31000d7a7c13e3 Mon Sep 17 00:00:00 2001 From: michalsmiarowski Date: Wed, 26 Oct 2022 14:13:40 +0200 Subject: [PATCH 4/4] Use getSakingAppLabel function Use `getSakingAppLabel` function in OperatorAddressMappingCard --- src/pages/Staking/OperatorAddressMappingCard.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/pages/Staking/OperatorAddressMappingCard.tsx b/src/pages/Staking/OperatorAddressMappingCard.tsx index ce3d041c4..3c4c303df 100644 --- a/src/pages/Staking/OperatorAddressMappingCard.tsx +++ b/src/pages/Staking/OperatorAddressMappingCard.tsx @@ -23,21 +23,12 @@ import { selectMappedOperators } from "../../store/account/selectors" import shortenAddress from "../../utils/shortenAddress" import { isAddressZero } from "../../web3/utils" import { FcCheckmark, FiLink2 } from "react-icons/all" -import { MappedOperatorsForStakingProvider } from "../../threshold-ts/mas" - -interface AppLabels { - tbtc: string - randomBeacon: string -} +import { getSakingAppLabel } from "../../utils/getStakingAppLabel" +import { StakingAppName } from "../../store/staking-applications" const OperatorAddressMappingCard: FC<{ stakingProvider: string }> = ({ stakingProvider, }) => { - const appLabels: AppLabels = { - tbtc: "tBTC", - randomBeacon: "Random Beacon", - } - const { openModal } = useModal() const { mappedOperatorTbtc, @@ -72,7 +63,7 @@ const OperatorAddressMappingCard: FC<{ stakingProvider: string }> = ({ - {appLabels[appName as keyof AppLabels]} App + {getSakingAppLabel(appName as StakingAppName)} App