tBTC stats on overview page #490
Conversation
Extract a common list item component with outline variant as we use them in several places in dapp. We can't add a new variant using chakra theming because the `ListItem` is a part of the `List` component and does not have separate theme. In that case we should pass the eg `variant="otuline"` to the `List` component but in my opinion does not fit here because list can be order or unordered.
Take into account the tBTC v2 token total supply. Also here we fix unit test for this hook.
And display data in component.
To use some tBTC stats in other places in T dapp.
Display tBTC stats as an empty state if user is not connected with a wallet.
|
Sweet! 🚀 |
We want to redirect users to transaction details in the blockexplorer.
src/components/tBTC/Stats.tsx
Outdated
| ...restProps | ||
| }) => <RecentDeposits deposits={deposits} {...restProps} /> | ||
|
|
||
| export const DefaultProtocolHistory: FC<ProtocolHistoryProps> = ({ |
There was a problem hiding this comment.
Non-blocking:
Why DefaultProtocolHistory and not just ProtocolHistory?
| [Token.TBTC]: tbtcv1Context, | ||
| [Token.T]: tContext, | ||
| [Token.Nu]: nuContext, | ||
| [Token.TBTCV2]: tBTCContext, |
There was a problem hiding this comment.
Non-blocking:
I think we should decide which naming convention we want to use for both tbtc tokens and stick to use. We can either use [tBTC and tBTCv2] or [tBTCv1 and tBTC]. Messing them up here and there might be problematic later.
We don't have to do it in this PR though. It's just something that will have to be resolved sooner or later and the code needs to be checked for those occurences.
| ) | ||
| // The `toUsdBalance` function was called 2x times because it was called | ||
|
|
||
| // The `toUsdBalance` and `spyOnFormatUnits` function was called 2x times because it was called |
There was a problem hiding this comment.
| // The `toUsdBalance` and `spyOnFormatUnits` function was called 2x times because it was called | |
| // The `toUsdBalance` and `spyOnFormatUnits` function were called 2x times because they were called |
src/utils/subgraphAPI.ts
Outdated
| } | ||
| } | ||
|
|
||
| const fetchRecenttBTCDeposits = async (numberOfDeposits = 4) => { |
There was a problem hiding this comment.
Non-blocking:
I believe we should write TBTC (started with capital T) when it's in the middle of the word that is writtne in camelCase convention. Everywhere else we should stick to tBTC.
| const fetchRecenttBTCDeposits = async (numberOfDeposits = 4) => { | |
| const fetchRecentTBTCDeposits = async (numberOfDeposits = 4) => { |
src/utils/subgraphAPI.ts
Outdated
| "https://api.thegraph.com/subgraphs/name/suntzu93/threshold-tbtc" | ||
|
|
||
| type TransactionRawResponse = { | ||
| // Actually transacion hash where the tbtc tokens were minted. |
There was a problem hiding this comment.
| // Actually transacion hash where the tbtc tokens were minted. | |
| // Actual transacion hash where the tbtc tokens were minted. |
| type TransactionRawResponse = { | ||
| // Actually transacion hash where the tbtc tokens were minted. | ||
| id: string | ||
| timestamp: string |
There was a problem hiding this comment.
Non-blocking:
We could add in the comment that this timestamp is in seconds/miliseconds.
|
|
||
| type TBTCBrdigeStatsProps = ProtocolHistoryProps & TVLProps | ||
|
|
||
| export const TBTCBrdigeStats: FC<TBTCBrdigeStatsProps> = ({ |
There was a problem hiding this comment.
| export const TBTCBrdigeStats: FC<TBTCBrdigeStatsProps> = ({ | |
| export const TBTCBridgeStats: FC<TBTCBridgeStatsProps> = ({ |
|
Also, let's resolve conclifts 📄 ✍️ |
| jest.mock("../../web3/hooks/useTBTCv2TokenContract", () => ({ | ||
| ...(jest.requireActual("../../web3/hooks/useTBTCv2TokenContract") as {}), | ||
| useTBTCv2TokenContract: jest.fn(), | ||
| })) | ||
|
|
There was a problem hiding this comment.
Could you double-check if all the tests pass? For me they don't (on your branch) but on main all have passed
There was a problem hiding this comment.
Once we merge main should be all good 🤞
`DefaultProtocolHistory` -> `ProtocolHistory`
Clarify in comment that the `timestamp` field is in seconds.
We should write `TBTC` (started with capital `T`) when it's in the middle of the word that is writtne in camelCase convention. Everywhere else we should stick to `tBTC`.
`TBTCBrdigeStats` -> `TBTCBridgeStats`
Closes: #428
Closes: #458
This PR adds the tBTC stats to the overview page and tBTC bridge page as an empty state before the user connects with a wallet.
Screenshots