feat: add token switch on Trade page#5583
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 4adf2d5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Greptile SummaryThis PR adds a token-switch button to the Trade page's
Confidence Score: 3/5The icon-only button and CellGroup refactor are safe, but the switch icon stroke styling will be visually wrong until the JSX attribute names are corrected. The new apps/evm/src/components/Icon/icons/switch.tsx needs the SVG attribute names corrected to camelCase before merging. Important Files Changed
Reviews (1): Last reviewed commit: "feat: add token switch to Trade page" | Re-trigger Greptile |
| <path | ||
| d="M12 6.83331H1L4.14286 3.83331" | ||
| stroke="currentColor" | ||
| stroke-width="1.5" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| <path | ||
| d="M4 9.83331H15L11.8571 12.8333" | ||
| stroke="currentColor" | ||
| stroke-width="1.5" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> |
There was a problem hiding this comment.
JSX requires camelCase prop names for SVG attributes.
stroke-width, stroke-linecap, and stroke-linejoin are invalid JSX props — React silently drops them and logs a console warning, so the paths render with the browser defaults (width 1, linecap butt, linejoin miter) instead of the intended 1.5 / round / round. Every other icon in this directory (e.g., wallet.tsx, resilientOracle.tsx) uses the camelCase form.
| <path | |
| d="M12 6.83331H1L4.14286 3.83331" | |
| stroke="currentColor" | |
| stroke-width="1.5" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| /> | |
| <path | |
| d="M4 9.83331H15L11.8571 12.8333" | |
| stroke="currentColor" | |
| stroke-width="1.5" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| /> | |
| <path | |
| d="M12 6.83331H1L4.14286 3.83331" | |
| stroke="currentColor" | |
| strokeWidth="1.5" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| /> | |
| <path | |
| d="M4 9.83331H15L11.8571 12.8333" | |
| stroke="currentColor" | |
| strokeWidth="1.5" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| /> |
| <button | ||
| type="button" | ||
| className="cursor-pointer text-light-grey hover:text-blue" | ||
| onClick={switchSelectedTokens} | ||
| data-testid="pair-info-switch-tokens-button" | ||
| > |
There was a problem hiding this comment.
This icon-only button has no accessible label. Screen readers will announce it as an unlabelled button, making the feature inaccessible. The i18n reference requires user-facing accessibility text to be translated via
useTranslation; add an aria-label using a t() key.
| <button | |
| type="button" | |
| className="cursor-pointer text-light-grey hover:text-blue" | |
| onClick={switchSelectedTokens} | |
| data-testid="pair-info-switch-tokens-button" | |
| > | |
| <button | |
| type="button" | |
| aria-label={t('trade.switchTokens')} | |
| className="cursor-pointer text-light-grey hover:text-blue" | |
| onClick={switchSelectedTokens} | |
| data-testid="pair-info-switch-tokens-button" | |
| > |
Jira ticket(s)
VEN-1173
Changes