tBTC user stats on the overview page #492
Conversation
Pass `as` prop if the icon is not defined in the `Icon` enum which maps enum to an icon component. Otherwise we can't use custom icons in eg. `TokenBalance` component. We need to revist this component and consider removing it.
The word `tBTC` should always start with a lowercase letter - so here we add a component that forces `t` to be lowercase, even if we use it inside a component that transforms text to uppercase, e.g. `Label` component from Threshold typography components.
We want to use the same bridge activity components on the overview page. Here we move the `BridgeActivity` component to shared components and add a context so we can keep the same logic(like displaying empty states) in different places of the dapp.
Display user's tBTC balance and their latest 2 bridge activities. Also user can navigate to a tBTC page from this card.
|
Preview uploaded to https://preview.dashboard.test.threshold.network/tbtc-my-stats/index.html. |
Add new upgrade T tokens card and update the layout according to the Figma views.
|
Preview uploaded to https://preview.dashboard.test.threshold.network/tbtc-my-stats/index.html. |
michalsmiarowski
left a comment
michalsmiarowski
left a comment
There was a problem hiding this comment.
Left some comments to look at before the merge
| <Box as="span">-.--</Box> | ||
| <Box as="span">-.--</Box> |
There was a problem hiding this comment.
Non-blocking but good to have:
In the designs we have Wallet not connected badge on the right and tBTC word on the left (next to the -.--).
Designs:
Implementation:
There was a problem hiding this comment.
Also the -.-- should have color gray.700.
| <Box as="span">-.--</Box> | ||
| <Box as="span">-.--</Box> |
| <BodyMd mb="6">My Activity</BodyMd> | ||
| <BridgeActivity | ||
| data={_bridgeActivity} | ||
| isFetching={isBridgeActivityFetching} | ||
| > | ||
| <BridgeActivityData /> | ||
| </BridgeActivity> |
There was a problem hiding this comment.
Can we make it little narrower? I think it's two wide in comparison with My Balance section.
Designs:
(Notice how all is perfectly aligned with black lines on the sides)
Implementation:
(Notice how My activity tabs are too wide here in comparison to the designs)
| <ButtonLink size="lg" isFullWidth mt={4} to="/tBTC"> | ||
| New Mint | ||
| </ButtonLink> |
There was a problem hiding this comment.
In the designs we have Connect your wallet when user is not connected. Not sure if it's really needed though because we have to redirect him to the minting page where he has to connect the wallet anyway to do something soo just pointing that out.
The bridge activity items are too wide in comparison with `My Balance` section.
Render custom empty state for bridge activity component.
Set correct text color according to the Figma views.
|
Preview uploaded to https://preview.dashboard.test.threshold.network/tbtc-my-stats/index.html. |
1 similar comment
|
Preview uploaded to https://preview.dashboard.test.threshold.network/tbtc-my-stats/index.html. |
Depends on: #490
This PR adds the tBTC user stats on the overview page. In this card, we display user's tBTC balance and their latest 2 bridge activities. Also users can navigate to a tBTC page from this card. Here we also update the layout of the overview page.
Main changes:
BridgeActivitycomponent- move theBridgeActivitycomponent to shared components and add a context so we can keep the same logic(like displaying empty states) in different places of the dapp (eg. overview page and tBTC page).Screenshots