feat: Add search txn hash #1408
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes involve enhancements across multiple components and utilities within the frontend application. Key modifications include the addition of new props, such as Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SearchTransaction
participant TransactionHistoryDashboard
participant TxnsLoading
User->>SearchTransaction: Input transaction hash
SearchTransaction->>TxnsLoading: Show loading state
TxnsLoading-->>SearchTransaction: Loading complete
SearchTransaction->>TransactionHistoryDashboard: Fetch transaction details
TransactionHistoryDashboard-->>User: Display transaction details
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@coderabbitai review |
Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (5)
frontend/src/app/(routes)/transactions/history/[network]/components/TransactionHeader.tsx (1)
71-87: LGTM!The conditional rendering of the Mintscan link based on
mintscanURLis appropriate, and using theLinkcomponent provides a consistent navigation mechanism.Consider adding
rel="noopener noreferrer"to theLinkcomponent to improve security when opening external links:<Link className="flex items-end gap-1" href={mintscanURL} target="_blank" + rel="noopener noreferrer" >frontend/src/app/(routes)/transactions/history/SearchTransaction.tsx (3)
11-82: TheSearchTransactioncomponent looks good overall, but there are a few areas that can be improved:
- Consider splitting the component into smaller sub-components for better readability and maintainability. For example, you can extract the search form and the transaction details into separate components.
- Improve the loading state by using a more descriptive message or a skeleton loader to provide a better user experience.
- Improve the error handling by displaying a more user-friendly error message instead of just saying "Sorry, the transaction you're looking for is not found."
86-100: TheTransactionNotFoundcomponent looks good, but the error message can be improved.Consider providing more context and guidance to the user in the error message. For example:
-<p className="text-h2 font-bold w-fit mx-auto"> - Sorry, the transaction you're looking for is not found. -</p> +<p className="text-h2 font-bold w-fit mx-auto"> + The transaction you searched for could not be found. Please check the transaction hash and try again. +</p>
1-100: Improve accessibility by adding ARIA attributes and roles.To enhance the accessibility of the component for users with assistive technologies, consider adding appropriate ARIA attributes and roles. For example:
- Add
aria-labeloraria-labelledbyto the search form to provide a clear label for screen reader users.- Add
role="search"to the search form to indicate its purpose.- Add
aria-live="polite"to the loading spinner or error message container to announce the status updates to screen reader users.Here's an example of how you can add ARIA attributes to the search form:
-<form onSubmit={onSearch} className="flex gap-6 items-center"> +<form + onSubmit={onSearch} + className="flex gap-6 items-center" + aria-label="Search transaction by hash" + role="search" +>frontend/src/components/txn-status-popups/TransactionStatusPopup.tsx (1)
11-11: Incomplete Transition fromgetTxnURLtogetTxnURLOnResolute.The
getTxnURLOnResolutefunction is being used in the codebase, but the oldgetTxnURLfunction is still present and used in multiple files. This indicates that the transition is not complete. Consider reviewing the usage of both functions and refactoring if the goal is to fully replacegetTxnURLwithgetTxnURLOnResolute.
getTxnURLOnResoluteis used in:
frontend/src/components/txn-status-popups/TransactionStatusPopup.tsxfrontend/src/components/txn-status-popups/TxnStatus.tsx
getTxnURLis still used in:
frontend/src/components/txn-status-popups/TransactionStatusPopup.tsxfrontend/src/components/txn-status-popups/TxnStatus.tsxfrontend/src/app/(routes)/transactions/history/[network]/components/Transaction.tsxAnalysis chain
Verify the usage of the new
getTxnURLOnResolutefunction.Ensure that the new function is being used correctly and consistently throughout the component. Also, verify that the old
getTxnURLfunction is no longer being used.Run the following script to verify the function usage:
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the new `getTxnURLOnResolute` function and the removal of the old `getTxnURL` function. # Test 1: Search for the usage of the new function. Expect: At least one occurrence. rg --type typescript -A 5 $'getTxnURLOnResolute' # Test 2: Search for the usage of the old function. Expect: No occurrences. rg --type typescript -A 5 $'getTxnURL'Length of output: 155
Script:
#!/bin/bash # Description: Verify the usage of the new `getTxnURLOnResolute` function and the removal of the old `getTxnURL` function. # Test 1: Search for the usage of the new function. Expect: At least one occurrence. rg --type ts -A 5 $'getTxnURLOnResolute' # Test 2: Search for the usage of the old function. Expect: No occurrences. rg --type ts -A 5 $'getTxnURL'Length of output: 8292
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (24)
- frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxExecuteStatus.tsx (2 hunks)
- frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxInstantiateStatus.tsx (2 hunks)
- frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxUploadCodeStatus.tsx (2 hunks)
- frontend/src/app/(routes)/transactions/history/SearchTransaction.tsx (1 hunks)
- frontend/src/app/(routes)/transactions/history/[network]/components/SearchTransactionHash.tsx (1 hunks)
- frontend/src/app/(routes)/transactions/history/[network]/components/Transaction.tsx (4 hunks)
- frontend/src/app/(routes)/transactions/history/[network]/components/TransactionCard.tsx (3 hunks)
- frontend/src/app/(routes)/transactions/history/[network]/components/TransactionHeader.tsx (3 hunks)
- frontend/src/app/(routes)/transactions/history/[network]/components/TransactionHistoryDashboard.tsx (4 hunks)
- frontend/src/app/(routes)/transactions/history/[network]/components/TxMsg.tsx (1 hunks)
- frontend/src/app/(routes)/transactions/history/loaders/TxnsLoading.tsx (1 hunks)
- frontend/src/app/(routes)/transactions/history/page.tsx (1 hunks)
- frontend/src/components/NewTxnMsg.tsx (1 hunks)
- frontend/src/components/txn-status-popups/TransactionStatusPopup.tsx (3 hunks)
- frontend/src/components/txn-status-popups/TxnStatus.tsx (3 hunks)
- frontend/src/store/features/recent-transactions/recentTransactionsService.tsx (2 hunks)
- frontend/src/store/features/recent-transactions/recentTransactionsSlice.tsx (8 hunks)
- frontend/src/txns/authz/revoke.ts (1 hunks)
- frontend/src/txns/feegrant/revoke.ts (1 hunks)
- frontend/src/utils/commonStyles.ts (2 hunks)
- frontend/src/utils/constants.ts (1 hunks)
- frontend/src/utils/errors.ts (1 hunks)
- frontend/src/utils/transaction.ts (2 hunks)
- frontend/src/utils/util.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- frontend/src/app/(routes)/transactions/history/[network]/components/TxMsg.tsx
- frontend/src/app/(routes)/transactions/history/loaders/TxnsLoading.tsx
Additional comments not posted (70)
frontend/src/txns/feegrant/revoke.ts (1)
3-3: LGTM!Exporting the
revokeTypeUrlconstant is a good practice for code reusability. It doesn't affect the existing functionality.frontend/src/txns/authz/revoke.ts (1)
3-3: LGTM!Exporting the
msgAuthzRevokeTypeUrlconstant is a good change as it allows the constant to be used in other modules if needed. The assigned string value is also valid and follows the expected format for a message type URL.frontend/src/components/txn-status-popups/TxnStatus.tsx (4)
3-3: LGTM!The import statement change is approved.
12-12: LGTM!The component prop change is approved.
17-17: LGTM!The component prop type change is approved.
31-31: Verify thegetTxnURLOnResolutefunction implementation.Ensure that the
getTxnURLOnResolutefunction is correctly implemented and returns the expected transaction URL based on the providedchainNameandtxHash.Run the following script to verify the function implementation:
If the verification passes, the
Linkcomponent change is approved.Verification successful
The
getTxnURLOnResolutefunction is correctly implemented.The function constructs a transaction URL using the
chainNameandhashparameters, and its usage in theLinkcomponent is appropriate. The change is valid and aligns with the intended functionality.
frontend/src/utils/util.ts: Definition ofgetTxnURLOnResolute.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the `getTxnURLOnResolute` function implementation. # Test: Search for the function implementation. Expect: A correct implementation that returns the expected transaction URL. ast-grep --lang typescript --pattern $'function getTxnURLOnResolute($_: string, $_: string) { $$$ }'Length of output: 103
Script:
#!/bin/bash # Search for any occurrences of `getTxnURLOnResolute` in the codebase to identify its definition or import. rg 'getTxnURLOnResolute' -A 5Length of output: 2740
frontend/src/app/(routes)/transactions/history/[network]/components/SearchTransactionHash.tsx (4)
7-7: LGTM!The new optional prop
handleClearSearchis correctly typed and named.
17-35: LGTM!The changes to the component's return structure to include a conditionally rendered clear button are implemented correctly:
- The button is correctly conditionally rendered based on the presence of
searchQueryandhandleClearSearch.- The
onClickhandler correctly invokes thehandleClearSearchprop when clicked.- The button's text content and CSS classes are appropriate.
11-11: LGTM!The type declaration for the new
handleClearSearchprop is correctly added to the component's props type.
41-41: LGTM!The component is correctly exported as the default export.
frontend/src/app/(routes)/transactions/history/page.tsx (2)
23-34: LGTM!The code changes in this segment align with the AI-generated summary and seem to be implemented correctly. The conditional rendering logic based on
isWalletConnectedis clear and the props passed to theEmptyScreencomponent are appropriate.
6-7: LGTM!The import statements are necessary for the code changes in the file and do not introduce any issues.
frontend/src/store/features/recent-transactions/recentTransactionsService.tsx (4)
17-18: LGTM!The code changes are approved.
20-20: LGTM!The code changes are approved.
58-59: LGTM!The code changes are approved.
64-65: LGTM!The code changes are approved.
frontend/src/utils/errors.ts (1)
36-36: LGTM!The new constant
ERR_TXN_NOT_FOUNDis properly defined and exported. The error message is clear and concise.frontend/src/app/(routes)/transactions/history/[network]/components/TransactionCard.tsx (4)
3-3: LGTM!The removal of the unused
getTypeURLNamefunction from the import statement is approved.
7-7: LGTM!The addition of the
buildMessagesandformattedMsgTypefunctions to the import statement is approved.
42-42: LGTM!The addition of the
hover:underlineclass to theLinkcomponent is approved. This change improves the user experience by providing a visual cue when hovering over the link.
53-53: LGTM!The replacement of the
getTypeURLNamefunction with theformattedMsgTypefunction in the JSX rendering section is approved. This change streamlines the functionality by consolidating the message formatting logic.frontend/src/utils/commonStyles.ts (2)
77-77: LGTM!The change is a minor formatting update to add a trailing comma after the
fontSizeproperty. It aligns with the formatting style used in the rest of the file and does not affect the functionality.
98-120: LGTM!The new constant
paginationComponentStylesdefines styles for pagination components, enhancing their visual presentation and ensuring consistency with the overall theme of the application. The styles are well-structured, follow the existing naming conventions and formatting style, and do not introduce any apparent issues or inconsistencies.frontend/src/app/(routes)/transactions/history/[network]/components/TransactionHeader.tsx (3)
15-17: LGTM!The new properties added to the
TransactionHeaderPropsinterface are appropriate and well-typed.
35-39: LGTM!The changes related to the "Go back" link improve the navigation experience and provide more flexibility in the UI.
63-70: LGTM!The conditional rendering of the "Repeat Transaction" button based on
isSearchPageis appropriate.frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxExecuteStatus.tsx (3)
16-16: LGTM!The code changes are approved.
57-61: LGTM!The code changes are approved.
69-69: LGTM!The code changes are approved.
frontend/src/app/(routes)/transactions/history/SearchTransaction.tsx (2)
1-9: Imports look good.The component imports all the necessary dependencies, including custom hooks, Redux slices, types, utils, and child components.
1-100: Verify the security of thegetAnyChainTransactionRedux action and the backend API.Although the component itself does not have any apparent security vulnerabilities, it's important to ensure that the
getAnyChainTransactionRedux action and the backend API it interacts with are properly secured and validated.Please confirm that:
- The
getAnyChainTransactionRedux action properly validates and sanitizes thetxhashparameter before sending it to the backend API.- The backend API endpoint for fetching transaction data is properly secured and validates the input to prevent potential attacks like SQL injection or XSS.
frontend/src/app/(routes)/transactions/history/[network]/components/TransactionHistoryDashboard.tsx (5)
10-12: LGTM!The code changes are approved.
14-14: LGTM!The code changes are approved.
Line range hint
21-40: LGTM!The code changes are approved.
49-53: LGTM!The code changes are approved.
Line range hint
55-96: LGTM!The code changes are approved.
frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxUploadCodeStatus.tsx (2)
16-16: LGTM!The code change is approved. Retrieving the
chainNameproperty from thegetChainInfofunction provides additional contextual information about the blockchain network.
57-61: LGTM!The code changes are approved:
- Modifying the
altattribute of theImagecomponent provides a more descriptive message for the transaction status image.- Passing the
chainNameprop to theTxnStatuscomponent allows it to display additional contextual information about the transaction.Also applies to: 69-69
frontend/src/app/(routes)/cosmwasm/components/tx-status/DialogTxInstantiateStatus.tsx (2)
16-16: LGTM!The code change is correctly retrieving
chainNamefrom the chain info to pass it as a prop to theTxnStatuscomponent.
57-61: LGTM!The code changes are approved:
- The alt text for the
Imagecomponent is correctly set based on the transaction status.chainNameis being passed as a prop toTxnStatus, which is consistent with retrieving it fromgetChainInfo.Also applies to: 69-69
frontend/src/app/(routes)/transactions/history/[network]/components/Transaction.tsx (6)
11-11: LGTM!The code changes are approved.
21-21: LGTM!The code changes are approved.
26-26: LGTM!The code changes are approved.
31-31: LGTM!The code changes are approved.
81-83: LGTM!The code changes are approved.
99-99: LGTM!The code changes are approved.
frontend/src/components/txn-status-popups/TransactionStatusPopup.tsx (2)
132-133: Verify the functionality of the transaction link.Ensure that the link generated by
getTxnURLOnResoluteis correct and that it's navigating to the expected transaction receipt page. Test the link with different transaction hashes and chain names to ensure it's working as expected.Perform the following manual tests:
- Test the link with a valid transaction hash and chain name. Expect: The link should navigate to the correct transaction receipt page.
- Test the link with an invalid transaction hash and a valid chain name. Expect: The link should navigate to an error page or display an appropriate error message.
- Test the link with a valid transaction hash and an invalid chain name. Expect: The link should navigate to an error page or display an appropriate error message.
- Test the link with an empty transaction hash and chain name. Expect: The link should not navigate anywhere or display an appropriate error message.
If any of the tests fail, investigate the implementation of
getTxnURLOnResoluteand make necessary corrections.
32-32: Verify the usage ofchainName.Ensure that
chainNameis being used correctly and that it contains the expected value. Also, verify that it's being passed to thegetTxnURLOnResolutefunction correctly.Run the following script to verify the usage of
chainName:Verification successful
Verified usage of
chainName.The
chainNamevariable is correctly passed to thegetTxnURLOnResolutefunction infrontend/src/components/txn-status-popups/TxnStatus.tsx, confirming its intended use in generating transaction URLs. No issues were found with its usage.
frontend/src/components/txn-status-popups/TxnStatus.tsx:href={getTxnURLOnResolute(chainName, txHash || '')}Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `chainName`. # Test: Search for the usage of `chainName`. Expect: At least one occurrence where it's being passed to `getTxnURLOnResolute`. rg --type typescript -A 5 $'getTxnURLOnResolute\(.*chainName'Length of output: 97
Script:
#!/bin/bash # Description: Verify the usage of `chainName`. # Test: Search for the usage of `chainName`. Expect: At least one occurrence where it's being passed to `getTxnURLOnResolute`. rg --type ts -A 5 $'getTxnURLOnResolute\(.*chainName'Length of output: 575
frontend/src/utils/transaction.ts (2)
48-49: LGTM!The code changes are approved.
237-242: LGTM!The code changes are approved.
frontend/src/components/NewTxnMsg.tsx (12)
220-236: LGTM!The code changes for handling the
MSG_GRANT_ALLOWANCEmessage type are approved.
237-253: LGTM!The code changes for handling the
MSG_REVOKE_ALLOWANCEmessage type are approved.
51-66: LGTM!The code changes for handling the
SEND_TYPE_URLmessage type are approved.
67-82: LGTM!The code changes for handling the
DELEGATE_TYPE_URLmessage type are approved.
83-103: LGTM!The code changes for handling the
UNDELEGATE_TYPE_URLmessage type are approved.
104-117: LGTM!The code changes for handling the
REDELEGATE_TYPE_URLmessage type are approved.
118-135: LGTM!The code changes for handling the
VOTE_TYPE_URLmessage type are approved.
136-150: LGTM!The code changes for handling the
DEPOSIT_TYPE_URLmessage type are approved.
151-166: LGTM!The code changes for handling the
IBC_SEND_TYPE_URLmessage type are approved.
167-182: LGTM!The code changes for handling the
MSG_AUTHZ_GRANTmessage type are approved.
183-200: LGTM!The code changes for handling the
MSG_AUTHZ_REVOKEmessage type are approved.
201-219: LGTM!The code changes for handling the
MSG_AUTHZ_EXECmessage type are approved.frontend/src/store/features/recent-transactions/recentTransactionsSlice.tsx (5)
4-4: LGTM!The import statement for error constants is correctly added.
34-34: LGTM!Adding a trailing comma to the interface properties is a good practice for maintainability.
Line range hint
185-219: LGTM!The changes to the
getTransactionthunk simplify the code and improve readability without affecting the functionality.
230-261: LGTM!The new
getAnyChainTransactionthunk adds the functionality to fetch transactions from any chain based on the transaction hash. It handles the case when the transaction is not found by throwing an error and returning the error message usingrejectWithValue.
399-413: LGTM!The
extraReducersis correctly updated to handle the lifecycle of thegetAnyChainTransactionthunk. It updates the state accordingly based on the thunk's status and response data, and handles errors correctly in the rejected case.frontend/src/utils/constants.ts (2)
61-61: LGTM!The constant
MSG_GRANT_ALLOWANCEis correctly defined and exported with the appropriate value for the message type.
62-63: LGTM!The constant
MSG_REVOKE_ALLOWANCEis correctly defined and exported with the appropriate value for the message type.frontend/src/utils/util.ts (1)
490-495: LGTM!The
getTxnURLOnResolutefunction is implemented correctly and follows the expected behavior based on the provided summary. It enhances the utility of the module by providing a specific method for generating transaction URLs based on the chain name and hash.
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Style
Chores