Skip to content

feat: add token switch on Trade page#5583

Open
therealemjy wants to merge 2 commits into
mainfrom
feat/trade-switch
Open

feat: add token switch on Trade page#5583
therealemjy wants to merge 2 commits into
mainfrom
feat/trade-switch

Conversation

@therealemjy
Copy link
Copy Markdown
Member

Jira ticket(s)

VEN-1173

Changes

  • add token switch on Trade page

@therealemjy therealemjy requested a review from cuzz-venus May 12, 2026 09:03
@vercel
Copy link
Copy Markdown

vercel Bot commented May 12, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dapp-preview Ready Ready Preview May 12, 2026 9:03am
dapp-testnet Ready Ready Preview May 12, 2026 9:03am
venus.io Ready Ready Preview May 12, 2026 9:03am

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 12, 2026

🦋 Changeset detected

Latest commit: 4adf2d5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@venusprotocol/evm Minor

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-apps
Copy link
Copy Markdown

greptile-apps Bot commented May 12, 2026

Greptile Summary

This PR adds a token-switch button to the Trade page's PairInfo component, allowing users to swap the long and short tokens with a single click, and refactors CellGroup by removing the unused tertiary variant and consolidating its styling.

  • Token switch: switchSelectedTokens swaps the LONG_TOKEN_ADDRESS_PARAM_KEY and SHORT_TOKEN_ADDRESS_PARAM_KEY search params; a new switch SVG icon and a test covering the URL update are included.
  • CellGroup refactor: The tertiary variant is removed and all previous usages across Dashboard, Markets, and Trade pages are migrated to secondary or default.

Confidence Score: 3/5

The 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 switch.tsx icon uses stroke-width, stroke-linecap, and stroke-linejoin as JSX props — these are HTML attribute names that React drops silently, leaving the icon with default stroke width (1px instead of 1.5) and square linecaps/joins. The icon will appear visually broken in production until fixed.

apps/evm/src/components/Icon/icons/switch.tsx needs the SVG attribute names corrected to camelCase before merging.

Important Files Changed

Filename Overview
apps/evm/src/components/Icon/icons/switch.tsx New switch icon SVG uses HTML-style kebab-case attributes (stroke-width, stroke-linecap, stroke-linejoin) which are invalid in JSX and will be silently dropped by React, causing incorrect rendering.
apps/evm/src/pages/Trade/PairInfo/index.tsx Adds switchSelectedTokens handler and button to swap long/short token URL params; logic is correct but the icon-only button is missing an aria-label.
apps/evm/src/components/CellGroup/index.tsx Removes the tertiary variant and consolidates styling; all known usages have been updated in this PR.
apps/evm/src/pages/Trade/PairInfo/tests/index.spec.tsx New test covers token-switch search param update; straightforward and correct.
apps/evm/src/components/Icon/icons/index.ts Registers the new switch icon export; no issues.

Reviews (1): Last reviewed commit: "feat: add token switch to Trade page" | Re-trigger Greptile

Comment on lines +12 to +25
<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"
/>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 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.

Suggested change
<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"
/>

Comment on lines +195 to +200
<button
type="button"
className="cursor-pointer text-light-grey hover:text-blue"
onClick={switchSelectedTokens}
data-testid="pair-info-switch-tokens-button"
>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 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.

Suggested change
<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"
>

@github-actions
Copy link
Copy Markdown
Contributor

Coverage Report for ./apps/evm

Status Category Percentage Covered / Total
🔵 Lines 81.13% 45326 / 55867
🔵 Statements 81.13% 45326 / 55867
🔵 Functions 62.34% 649 / 1041
🔵 Branches 72.25% 5097 / 7054
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
apps/evm/src/components/CellGroup/index.tsx 100% 66.66% 100% 100%
apps/evm/src/components/Icon/icons/index.ts 98.98% 0% 100% 98.98% 1
apps/evm/src/components/Icon/icons/switch.tsx 100% 50% 100% 100%
apps/evm/src/containers/Layout/Header/MarketInfo/index.tsx 0% 0% 0% 0% 1-221
apps/evm/src/pages/Dashboard/Markets/Positions/Summary/index.tsx 93.33% 0% 100% 93.33% 111-119
apps/evm/src/pages/Dashboard/Overview/index.tsx 97.27% 74.5% 66.66% 97.27% 196, 227, 231, 262, 271-274
apps/evm/src/pages/Dashboard/Vaults/index.tsx 98.64% 42.85% 100% 98.64% 55
apps/evm/src/pages/Markets/Header/index.tsx 100% 0% 100% 100%
apps/evm/src/pages/Trade/PairInfo/index.tsx 95.65% 73.91% 100% 95.65% 135-136, 145-148, 181, 188
apps/evm/src/pages/Trade/Positions/PositionList/RowFooter/StatusTab/index.tsx 96.87% 0% 100% 96.87% 36
Generated in workflow #13418 for commit 4adf2d5 by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant