Skip to content

Conversation

@fabric-8
Copy link
Contributor

@fabric-8 fabric-8 commented Mar 3, 2025

Try out Leather build c29215cExtension build, Test report, Storybook, Chromatic

Introduces a context menu to the home/assets view, allowing users to access token-based actions via left-click. The goal is to provide a lightweight interaction until full token detail views are implemented.

  • Left-click triggers a context menu with quick actions
  • Saves time and reduces cognitive load for common token interactions
  • Implemented using Radix menus (overridden to support left-click)

@kyranjamie kyranjamie marked this pull request as draft March 3, 2025 10:51
@kyranjamie
Copy link
Collaborator

Thanks for making this PR @fabric-8

My biggest gripe with this work are the semantics, which might seem petty but I think do distinguish important differences in behaviour. This doesn't add a context menu, rather it makes each currency item a large dropdown trigger. By definition (at least Radix's definition), a context menu is opened by right click, and this isn't configurable in their library.

() =>
convertAmountToBaseUnit(
availableBalance.amount.minus(stxFees?.estimates[1].fee.amount || 0),
availableBalance.amount.minus(stxFees?.estimates?.[1]?.fee?.amount || 0),
Copy link
Collaborator

Choose a reason for hiding this comment

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

unintended change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep, should be fixed 👍

const isSwapEnabled = useConfigSwapsEnabled();

const handleReceiveClick = async () => {
const isBtcToken = assetSymbol.toLowerCase() === 'btc';
Copy link
Collaborator

Choose a reason for hiding this comment

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

Considering currencies boolean like this isn't a beautiful way of handling two (or more) forks in the logic.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated this part 👍

import React from 'react';
import { useNavigate } from 'react-router-dom';

import * as ContextMenu from '@radix-ui/react-context-menu';
Copy link
Collaborator

Choose a reason for hiding this comment

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

@fabric-8, the way we have our UI library set up is that we export pre-styled radix components via @leather.io/ui. We should do the same here.

First, creating a new context menu component in mono/packages/ui, adding styling, exporting, then consuming here. Let me know if you need any guidance doing this, though if you look at some of the other components wrapping with forwardRef it's pretty straightforward

@camerow camerow closed this Jun 26, 2025
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.

4 participants