[Gateway] health check on gateway UI/frontend #1729
Conversation
…nnifer/health-check-ui-on-tenscan
…nnifer/2624-add-a-health-indicator-for-testnet-on-tenscan-and-the-gateway
…scan-and-the-gateway' of https://github.com/ten-protocol/go-ten into jennifer/health-check-ui-on-tenscan
…nnifer/2624-add-a-health-indicator-for-testnet-on-tenscan-and-the-gateway
…scan-and-the-gateway' of https://github.com/ten-protocol/go-ten into jennifer/health-check-ui-on-tenscan
WalkthroughThe update introduces a new feature to monitor the health of a testnet in a wallet extension. A Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
…nnifer/health-check-on-gateway
…nnifer/health-check-on-gateway-ui
…/ten-protocol/go-ten into jennifer/health-check-on-gateway-ui
…/ten-protocol/go-ten into jennifer/health-check-on-gateway-ui
…nnifer/health-check-on-gateway-ui
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 3
Configuration used: CodeRabbit UI
Files selected for processing (5)
- tools/walletextension/frontend/src/api/general.ts (1 hunks)
- tools/walletextension/frontend/src/components/health-indicator.tsx (1 hunks)
- tools/walletextension/frontend/src/components/layouts/header.tsx (2 hunks)
- tools/walletextension/frontend/src/routes/index.ts (1 hunks)
- tools/walletextension/frontend/src/services/useGatewayService.ts (2 hunks)
Files skipped from review due to trivial changes (1)
- tools/walletextension/frontend/src/routes/index.ts
Additional comments: 5
tools/walletextension/frontend/src/components/layouts/header.tsx (2)
8-8: The import of the
HealthIndicatorcomponent is correct and follows the established import pattern of the project.20-20: The inclusion of the
HealthIndicatorcomponent in the header layout is consistent with the PR's objective to make the testnet status visible in the UI. Ensure that the visual placement and styling of theHealthIndicatorcomponent align with the design specifications and provide a good user experience.tools/walletextension/frontend/src/services/useGatewayService.ts (3)
17-17: The import of the
fetchTestnetStatusfunction is correct and follows the established import pattern of the project.80-87: The
getTestnetStatusfunction is implemented correctly, with proper error handling that provides user feedback through a toast message. This aligns with the PR's objective to handle service disruptions or communication errors robustly.91-91: The
getTestnetStatusfunction is correctly added to the return object ofuseGatewayService, making it available for use in the components that consume this service.
| export const fetchTestnetStatus = async (): Promise< | ||
| ResponseDataInterface<any> | ||
| > => { | ||
| return await httpRequest<ResponseDataInterface<any>>({ | ||
| method: "post", | ||
| url: pathToUrl(apiRoutes.getHealthStatus), | ||
| data: { jsonrpc: "2.0", method: "obscuro_health", params: [], id: 1 }, | ||
| }); | ||
| }; |
There was a problem hiding this comment.
The fetchTestnetStatus function is well-structured and uses the httpRequest function to make a POST request. The use of async/await is consistent with modern asynchronous patterns in JavaScript. However, the use of any as a generic type for ResponseDataInterface should be avoided if a more specific type can be used to enhance type safety.
- ResponseDataInterface<any>
+ ResponseDataInterface<SpecificType>Committable suggestion
❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export const fetchTestnetStatus = async (): Promise< | |
| ResponseDataInterface<any> | |
| > => { | |
| return await httpRequest<ResponseDataInterface<any>>({ | |
| method: "post", | |
| url: pathToUrl(apiRoutes.getHealthStatus), | |
| data: { jsonrpc: "2.0", method: "obscuro_health", params: [], id: 1 }, | |
| }); | |
| }; | |
| export const fetchTestnetStatus = async (): Promise< | |
| ResponseDataInterface<SpecificType> | |
| > => { | |
| return await httpRequest<ResponseDataInterface<SpecificType>>({ | |
| method: "post", | |
| url: pathToUrl(apiRoutes.getHealthStatus), | |
| data: { jsonrpc: "2.0", method: "obscuro_health", params: [], id: 1 }, | |
| }); | |
| }; |
tools/walletextension/frontend/src/components/health-indicator.tsx
Outdated
Show resolved
Hide resolved
tools/walletextension/frontend/src/components/health-indicator.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
When running npm run build I get warning mentioned below + warning mentioned in another comment. Can you please check and fix these warnings?
Apart from that it looks great and works without any issues.
./src/components/providers/wallet-provider.tsx
202:6 Warning: React Hook useEffect has a missing dependency: 'fetchUserAccounts'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
|
|
||
| useEffect(() => { | ||
| testnetStatus().then((res) => setStatus(res?.result)); | ||
| }, []); |
There was a problem hiding this comment.
./src/components/health-indicator.tsx
25:6 Warning: React Hook useEffect has a missing dependency: 'testnetStatus'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
|
Updated now @zkokelj |
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (3)
- tools/walletextension/frontend/src/components/health-indicator.tsx (1 hunks)
- tools/walletextension/frontend/src/components/providers/wallet-provider.tsx (1 hunks)
- tools/walletextension/frontend/src/routes/index.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- tools/walletextension/frontend/src/components/providers/wallet-provider.tsx
Files skipped from review as they are similar to previous changes (1)
- tools/walletextension/frontend/src/components/health-indicator.tsx
Additional comments: 1
tools/walletextension/frontend/src/routes/index.ts (1)
- 14-14: The addition of the
getHealthStatusendpoint to theapiRoutesobject is consistent with the existing API route patterns and follows the versioning convention. This change integrates well with the current structure of the file.
Why this change is needed
Please provide a description and a link to the underlying ticket
https://github.com/ten-protocol/ten-internal/issues/2624
What changes were made as part of this PR
Please provide a high level list of the changes made
Testnet health status on gateway frontend
PR checks pre-merging
Please indicate below by ticking the checkbox that you have read and performed the required
PR checks