Add success state to OperatorAddressMappingCard #261
Conversation
We now want to display the `OperatorAddressMappingCard` when the operator is successfully mapped to staking provider. We display the pair in the card.
| <AlertIcon h={"14px"} as={"div"} alignSelf="auto" /> | ||
| <BodyXs> | ||
| {isOneOfTheAppsNotMapped | ||
| ? "One application from the tBTC + Random Beacon Rewards Bundle Suite requires the Operator Address mapped." |
There was a problem hiding this comment.
I know that this matches designs, but I think it might be more clear to tell the user which app needs to be mapped. wdyt? worth bringing up?
|
@michalsmiarowski It looks like the designs have been re-updated. Do you want to implement the newest changnes here before we merge? |
Yes. I'll update this PR so let's not merge it yet |
…ard-success-state
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
…ard-success-state
|
@r-czajkowski @georgeweiler This one is ready to be reviewed. I will address the info about PRE app in a separate PR, because it will require a lot of changes. |
…ard-success-state
| {shoudlDisplaySuccessState ? ( | ||
| Object.entries(mappedOperators).map(([appName, operator]) => { | ||
| return ( | ||
| <Box key={`mapped_operator_${appName}_${operator}`}> |
There was a problem hiding this comment.
I think we can get rid of the Box component and use Hstack directly. Also adding the divider prop to the HStack we can get rid of the logic for rendering the line divider, I mean this code snippet:
{Object.keys(mappedOperators)[
Object.keys(mappedOperators).length - 1
] !== appName && <LineDivider />}Use `getSakingAppLabel` function in OperatorAddressMappingCard
Closes: #259
Depends on: #223
OperatorAddressMappingCardshould 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.
TODO in the future:
Link to Figma: https://www.figma.com/file/Tx1lZc7us4SqCeAgbt1hBV/Threshold-Dapp?node-id=6179%3A147494