ZachXBT UI Recommendations #2727
Conversation
Defi-Moses
requested review from
trajan0x,
bigboydiamonds and
abtestingalpha
as code owners
|
Important Review skippedReview was skipped due to path filters Files ignored due to path filters (1)
You can disable this status message by setting the WalkthroughThe recent updates to the Changes
Poem
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 (
|
Deploying sanguine-fe with
|
| Latest commit: |
dcf9d78
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4366ab95.sanguine-fe.pages.dev |
| Branch Preview URL: | https://feat-explorer-ui-fix.sanguine-fe.pages.dev |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #2727 +/- ##
=============================================
Coverage 37.94466% 37.94466%
=============================================
Files 169 169
Lines 13662 13662
Branches 80 80
=============================================
Hits 5184 5184
Misses 7825 7825
Partials 653 653
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
Outside diff range and nitpick comments (8)
packages/explorer-ui/components/misc/StyleAddress.tsx (1)
Line range hint
21-23: Consider removing the redundantelseclause as it's unnecessary after the return statement in the preceding block.- } else { - return <div>'--'</div> - }packages/explorer-ui/components/misc/AssetImage.tsx (1)
Line range hint
7-7: Remove the unnecessary self-assignment oftokenAddress.- tokenAddress = tokenAddresspackages/explorer-ui/components/misc/ToolTip.tsx (1)
Line range hint
24-31: The static analysis has identified several parameter renames in theCurrencyTooltipfunction as unnecessary. These should be removed to simplify the code and reduce confusion.- names: names, - values: values, - dailyStatisticType: dailyStatisticType, - isUSD: isUSD, - singleChain, - platform: platform, - noTooltipLink: noTooltipLink, + names, + values, + dailyStatisticType, + isUSD, + singleChain, + platform, + noTooltipLink,Tools
Biome
[error] 24-24: Useless rename. (lint/complexity/noUselessRename)
Safe fix: Remove the renaming.
packages/explorer-ui/pages/address/[address].tsx (1)
Line range hint
129-138: Add an explicit type attribute to button elements to prevent unexpected form submissions.+ <button type="button" ...>Also applies to: 141-150
packages/explorer-ui/components/ChainChart/index.tsx (1)
Line range hint
70-72: Convert function expressions to arrow functions for consistency and to avoid issues with thethiskeyword.- items.sort(function (first, second) { - return second[1] - first[1]; - }); + items.sort((first, second) => second[1] - first[1]);Tools
Biome
[error] 16-16: The assignment should not be in an expression. (lint/suspicious/noAssignInExpressions)
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
[error] 16-16: The assignment should not be in an expression. (lint/suspicious/noAssignInExpressions)
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.packages/explorer-ui/components/pages/Home/index.tsx (2)
Line range hint
162-173: Add an explicit type attribute to button elements to prevent unexpected form submissions.+ <button type="button" ...>Also applies to: 178-190, 195-204, 207-216, 223-232, 235-244, 247-256, 261-268, 334-342, 345-353
Line range hint
290-293: Simplify the code by directly using the boolean value instead of a ternary operator.- dailyStatisticType === 'TRANSACTIONS' || dailyStatisticType === 'ADDRESSES' ? false : true + !(dailyStatisticType === 'TRANSACTIONS' || dailyStatisticType === 'ADDRESSES')packages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx (1)
Line range hint
125-130: Provide alternative text or titles for SVG elements to enhance accessibility.+ <title>Show Filters</title>Also applies to: 138-143
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (18)
- packages/explorer-ui/components/BridgeTransaction/BridgeTransactionTable.tsx (2 hunks)
- packages/explorer-ui/components/ChainChart/index.tsx (5 hunks)
- packages/explorer-ui/components/TransactionTable/Table.tsx (1 hunks)
- packages/explorer-ui/components/TransactionTable/TableBody.tsx (1 hunks)
- packages/explorer-ui/components/TransactionTable/TableRow.tsx (1 hunks)
- packages/explorer-ui/components/misc/AssetImage.tsx (3 hunks)
- packages/explorer-ui/components/misc/ChainInfo.tsx (1 hunks)
- packages/explorer-ui/components/misc/HorizontalDivider.tsx (1 hunks)
- packages/explorer-ui/components/misc/IconAndAmount.tsx (2 hunks)
- packages/explorer-ui/components/misc/StyleAddress.tsx (1 hunks)
- packages/explorer-ui/components/misc/ToolTip.tsx (1 hunks)
- packages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx (4 hunks)
- packages/explorer-ui/components/pages/Home/index.tsx (4 hunks)
- packages/explorer-ui/package.json (1 hunks)
- packages/explorer-ui/pages/address/[address].tsx (2 hunks)
- packages/explorer-ui/pages/tx/[kappa].tsx (5 hunks)
- packages/explorer-ui/utils/formatAmount.ts (1 hunks)
- packages/explorer-ui/utils/formatDate.ts (2 hunks)
Files skipped from review due to trivial changes (1)
- packages/explorer-ui/components/TransactionTable/Table.tsx
Additional context used
Biome
packages/explorer-ui/components/misc/StyleAddress.tsx
[error] 21-23: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
packages/explorer-ui/components/misc/AssetImage.tsx
[error] 7-7: tokenAddress is assigned to itself. (lint/correctness/noSelfAssign)
This is where is assigned.
[error] 40-53: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
packages/explorer-ui/components/misc/ChainInfo.tsx
[error] 63-74: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
packages/explorer-ui/components/misc/ToolTip.tsx
[error] 24-24: Useless rename. (lint/complexity/noUselessRename)
Safe fix: Remove the renaming.
[error] 25-25: Useless rename. (lint/complexity/noUselessRename)
Safe fix: Remove the renaming.
[error] 27-27: Useless rename. (lint/complexity/noUselessRename)
Safe fix: Remove the renaming.
[error] 28-28: Useless rename. (lint/complexity/noUselessRename)
Safe fix: Remove the renaming.
[error] 30-30: Useless rename. (lint/complexity/noUselessRename)
Safe fix: Remove the renaming.
[error] 31-31: Useless rename. (lint/complexity/noUselessRename)
Safe fix: Remove the renaming.
packages/explorer-ui/components/BridgeTransaction/BridgeTransactionTable.tsx
[error] 19-21: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
[error] 30-37: Missing key property for this element in iterable. (lint/correctness/useJsxKeyInIterable)
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.packages/explorer-ui/pages/address/[address].tsx
[error] 129-138: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 141-150: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetpackages/explorer-ui/components/ChainChart/index.tsx
[error] 16-16: The assignment should not be in an expression. (lint/suspicious/noAssignInExpressions)
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
[error] 16-16: The assignment should not be in an expression. (lint/suspicious/noAssignInExpressions)
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
[error] 60-62: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
[error] 70-72: This function expression can be turned into an arrow function. (lint/complexity/useArrowFunction)
Function expressions that don't use this can be turned into arrow functions.
Safe fix: Use an arrow function instead.packages/explorer-ui/pages/tx/[kappa].tsx
[error] 4-4: Do not shadow the global "Error" property. (lint/suspicious/noShadowRestrictedNames)
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
[error] 49-51: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
[error] 66-66: Avoid redundant double-negation. (lint/complexity/noExtraBooleanCast)
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation
[error] 77-89: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
packages/explorer-ui/components/pages/Home/index.tsx
[error] 290-293: Unnecessary use of boolean literals in conditional expression. (lint/complexity/noUselessTernary)
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
[error] 162-173: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 178-190: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 195-204: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 207-216: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 223-232: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 235-244: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 247-256: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 261-268: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 271-278: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 334-342: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 345-353: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetpackages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx
[error] 120-123: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 125-130: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
[error] 138-143: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
[error] 224-227: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 244-247: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 262-265: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 301-304: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 331-334: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 349-352: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 374-377: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 469-472: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 171-178: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 186-194: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 197-205: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 519-522: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
Gitleaks
packages/explorer-ui/components/misc/AssetImage.tsx
28-28: Detected a Generic API Key, potentially exposing access to various services and sensitive operations. (generic-api-key)
Additional comments not posted (13)
packages/explorer-ui/components/TransactionTable/TableBody.tsx (1)
5-13: LGTM! The conditional class handling for the first and last rows is a nice touch for UI enhancement.packages/explorer-ui/components/misc/StyleAddress.tsx (1)
7-7: LGTM! The updated hover effect improves the UI.packages/explorer-ui/utils/formatDate.ts (1)
47-49: The newformatDateTimestampfunction correctly utilizes themomentlibrary for date formatting. However, consider alternatives likeDate.prototype.toLocaleString()if minimizing bundle size is a critical concern.packages/explorer-ui/components/TransactionTable/TableRow.tsx (1)
1-3: TheTableRowfunction now correctly handles dynamic class names. Ensure that the TODO for adding animations is addressed in future updates.packages/explorer-ui/components/misc/AssetImage.tsx (1)
Line range hint
40-53: The conditional rendering logic for different tokens is appropriate. The static analysis hint about a uselesselseclause is a false positive in this context.packages/explorer-ui/components/misc/ChainInfo.tsx (1)
Line range hint
63-74: Theelseclause in theChainInfofunction is necessary for handling cases where no chain data is available, contrary to the static analysis hint.packages/explorer-ui/components/misc/IconAndAmount.tsx (3)
7-7: Added import forReactTooltipto support tooltips in the component. Ensure that the tooltip functionality is integrated and tested thoroughly.
15-15: TheiconSizehas been updated to a smaller size with rounded corners, enhancing the UI consistency. Additionally, the integration ofReactTooltipfor displaying amount information is a good usability improvement.Also applies to: 59-70
23-23: The class for the styled coin has been updated to improve visibility and aesthetics. Also, thedata-tooltip-contentand related attributes are properly set for the tooltip functionality, enhancing user interaction by providing contextual information on hover.Also applies to: 53-65
packages/explorer-ui/package.json (2)
29-29: The addition of themomentlibrary supports enhanced date and time handling across the UI components. Ensure that all date-related functions across the project are refactored to utilizemomentfor consistency.
37-37: Addition ofreact-tooltipfor improved tooltip management across components. Verify that existing tooltips are migrated to this new library to maintain consistency and leverage its advanced features.packages/explorer-ui/components/BridgeTransaction/BridgeTransactionTable.tsx (1)
10-11: The addition offormatDateTimeandLinkfromnext/linkare crucial for formatting date/time values and enabling navigation. Ensure these are used consistently throughout the component.packages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx (1)
18-18: Ensure that the newly addedTRANSACTIONS_PATHis utilized consistently throughout the component.
packages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx
Outdated
Show resolved
Hide resolved
packages/explorer-ui/components/BridgeTransaction/BridgeTransactionTable.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (4)
packages/explorer-ui/components/misc/CopyTitle.tsx (2)
5-5: Ensure that theclassNameparameter is documented to explain its usage and impact on the component's styling.
Line range hint
22-50: The component's accessibility needs improvement. Keyboard users should be able to trigger the copy functionality.+ onKeyPress={(e) => handleCopy()}packages/explorer-ui/pages/address/[address].tsx (1)
Line range hint
125-134: Add explicittype="button"to prevent unintended form submissions.+ type="button"Also applies to: 137-146
packages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx (1)
Line range hint
125-130: SVG elements used as icons need alternative text for accessibility.+ <title>Expand Filters</title> + <title>Collapse Filters</title>Also applies to: 138-143
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- packages/explorer-ui/components/misc/CopyTitle.tsx (3 hunks)
- packages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx (4 hunks)
- packages/explorer-ui/pages/address/[address].tsx (2 hunks)
- packages/explorer-ui/utils/formatAmount.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/explorer-ui/utils/formatAmount.ts
Additional context used
Biome
packages/explorer-ui/components/misc/CopyTitle.tsx
[error] 24-29: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
packages/explorer-ui/pages/address/[address].tsx
[error] 125-134: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 137-146: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetpackages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx
[error] 120-123: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 125-130: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
[error] 138-143: Alternative text title element cannot be empty (lint/a11y/noSvgWithoutTitle)
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
[error] 224-227: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 244-247: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 262-265: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 301-304: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 331-334: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 349-352: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 374-377: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 469-472: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
[error] 171-178: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 186-194: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 197-205: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 519-522: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
Additional comments not posted (2)
packages/explorer-ui/pages/address/[address].tsx (1)
33-35: The truncation logic is now centralized in this function, which is a good practice for maintainability.packages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx (1)
18-18: Ensure theTRANSACTIONS_PATHimport is used consistently and correctly throughout the component.Verification successful
The
TRANSACTIONS_PATHimport inUniversalSearch/index.tsxis used consistently and correctly within the component and across other files.
packages/explorer-ui/components/pages/Home/UniversalSearch/index.tsx: TheTRANSACTIONS_PATHis used in thewindow.location.hrefassignment.Other files also use
TRANSACTIONS_PATHcorrectly, ensuring its consistent usage.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `TRANSACTIONS_PATH` across the component. # Test: Search for all occurrences of `TRANSACTIONS_PATH`. Expect: Consistent and correct usage. rg --type typescript 'TRANSACTIONS_PATH'Length of output: 75
Script:
#!/bin/bash # Description: Verify the usage of `TRANSACTIONS_PATH` across the component. # Test: Search for all occurrences of `TRANSACTIONS_PATH`. Expect: Consistent and correct usage. rg --type ts 'TRANSACTIONS_PATH'Length of output: 1567
| <CopyTitle title={walletAddress} className="hidden sm:block" /> | ||
| <CopyTitle title={truncateAddress(walletAddress)} className="block sm:hidden" /> |
There was a problem hiding this comment.
Tip
Codebase Verification
The recent search did not yield any results indicating that the .hidden and .block classes are conditionally applied within media queries. This suggests that the responsive design may not be correctly implemented for these classes.
- Please ensure that the
.hiddenand.blockclasses are conditionally applied based on screen size using appropriate media queries.
Analysis chain
Responsive design is implemented using conditional classes. Ensure that CSS is correctly handling the visibility based on screen size.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify correct CSS handling for responsive design.
# Test: Search for CSS classes in the style sheets. Expect: Correct media queries for `.hidden` and `.block`.
rg --type css 'hidden|block'
Length of output: 729
Script:
#!/bin/bash
# Description: Verify correct CSS handling for responsive design with media queries.
# Test: Search for media queries involving the classes `.hidden` and `.block`.
rg --type css '@media' -A 5
Length of output: 2335
Script:
#!/bin/bash
# Description: Verify correct CSS handling for responsive design with specific classes.
# Test: Search for `.hidden` and `.block` within media queries.
rg --type css '@media' -A 5 | rg '\.hidden|\.block'
Length of output: 51
| <h3 | ||
| className="text-white flex items-center mr-4" | ||
| className="text-white flex items-center mr-4 hidden sm:flex" | ||
| onClick={() => setShowText(!showText)} | ||
| > |
There was a problem hiding this comment.
Add keyboard accessibility to click events to improve accessibility compliance.
+ onKeyPress={(e) => e.key === 'Enter' && setShowText(!showText)}Also applies to: 224-227, 244-247, 262-265, 301-304, 331-334, 349-352, 374-377, 469-472
Tools
Biome
[error] 120-123: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
| <button | ||
| onClick={() => executeSearch()} | ||
| className={ | ||
| 'type-"button" font-medium rounded-md border border-l-0 border-gray-700 text-white bg-gray-700 px-4 py-1 hover:bg-opacity-70 ease-in-out duration-200 ' + | ||
| (loading ? ' pointer-events-none opacity-[0.4]' : '') + | ||
| ' sm:flex-none sm:w-auto' | ||
| } | ||
| > |
There was a problem hiding this comment.
Specify the type attribute for buttons to prevent unintended form submissions.
+ type="button"Also applies to: 186-194, 197-205, 519-522
Tools
Biome
[error] 171-178: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
This PR does the following:
cleans up the mobile pages and functionality for:
cleans up the UI for:
I also fixed some issues with data rendering pointed out by @trajan0x .
Also messed around with the bridge transaction "rows", which im not very happy with. Looking to get a design review there before we merge.
Summary by CodeRabbit
New Features
Improvements
Dependencies
momentandreact-tooltipto dependencies for better date handling and tooltip functionality.Bug Fixes
2b97f1d3b13aac5e869194a83e36c262d3639f6d: explorer-ui preview link
f30bcd40af4a4f7fd48162f3ced918295f55cc70: explorer-ui preview link
aea0fb3d6b85487ed17f136312f0b0407cad8e39: explorer-ui preview link