Skip to content

Fix token name/contract UI in picker, resolves FRONT-857 #1833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yasha-meursault wants to merge 4 commits into
base: dev
Choose a base branch
from
+48 −31
Open

Fix token name/contract UI in picker, resolves FRONT-857 #1833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9eb5ed9
Enhance Address and Route components with popover and tooltip state m…
yasha-meursault Jan 19, 2026
0f7c419
fix comment
yasha-meursault Jan 19, 2026
8cc51c8
Merge remote-tracking branch 'origin/dev' into dev-FRONT-857
yasha-meursault Jan 20, 2026
d35acaa
fix comment
yasha-meursault Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions components/Input/Address/AddressPicker/AddressWithIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,8 @@ type ExtendedAddressProps = {
children?: ReactNode
shouldShowChevron?: boolean
isNativeToken?: boolean;
onPopoverOpenChange?: (open: boolean) => void;
onTooltipOpenChange?: (open: boolean) => void;
}

const calculateMaxWidth = (balance: string | undefined) => {
Expand All @@ -140,10 +142,15 @@ const calculateMaxWidth = (balance: string | undefined) => {
}
};

export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, isForCurrency, children, onDisconnect, showDetails = false, title, description, logo: Logo, shouldShowChevron = true, isNativeToken = false }) => {
export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, isForCurrency, children, onDisconnect, showDetails = false, title, description, logo: Logo, shouldShowChevron = true, isNativeToken = false, onPopoverOpenChange, onTooltipOpenChange }) => {
const [isCopied, setCopied] = useCopyClipboard()
const [isPopoverOpen, setPopoverOpen] = useState(false)

const handlePopoverChange = (open: boolean) => {
setPopoverOpen(open)
onPopoverOpenChange?.(open)
}

// Resolver for action buttons
const getActionButtons = () => {
if (isNativeToken) return { buttons: [], showTitles: false };
Expand Down Expand Up @@ -176,10 +183,10 @@ export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, is

return (
<div onClick={(e) => e.stopPropagation()}>
<Popover open={isPopoverOpen} onOpenChange={() => setPopoverOpen(!isPopoverOpen)} modal={true}>
<Popover open={isPopoverOpen} onOpenChange={handlePopoverChange} modal={true}>
<PopoverTrigger asChild>
<div>
<Tooltip>
<Tooltip onOpenChange={onTooltipOpenChange}>
<TooltipTrigger asChild>
{
children ??
Expand All @@ -194,7 +201,7 @@ export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, is
</div>
}
</TooltipTrigger>
<TooltipContent side="bottom">
<TooltipContent side="bottom" className="pointer-events-none">
<p>{isForCurrency ? "View token details" : "View address details"}</p>
</TooltipContent>
</Tooltip>
Expand Down
4 changes: 2 additions & 2 deletions components/Input/RoutePicker/Routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ type NetworkTokenItemProps = {
}

export const NetworkTokenTitle = (props: NetworkTokenItemProps) => {
const { item, route, direction, type } = props
const { item, route, direction } = props
const swapAccounts = useSwapAccounts(direction)
const selectedAccount = swapAccounts?.find(w => (direction == 'from' ? w.provider?.withdrawalSupportedNetworks : w.provider?.autofillSupportedNetworks)?.includes(route.name));

Expand All @@ -68,7 +68,7 @@ export const NetworkTokenTitle = (props: NetworkTokenItemProps) => {
<TokenInfoIcon
item={item}
route={route}
className="xs:hidden transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover shrink-0"
className="xs:hidden max-w-0 group-hover:max-w-full data-[popover-open=true]:max-w-full data-[tooltip-open=true]:max-w-full overflow-hidden transition-all duration-300 opacity-0 group-hover:opacity-100 data-[popover-open=true]:opacity-100 data-[tooltip-open=true]:opacity-100 data-[popover-open=true]:delay-0 data-[tooltip-open=true]:delay-0 group-hover:delay-400 click-delay-on-hover shrink-0 pointer-events-none group-hover:pointer-events-auto data-[popover-open=true]:pointer-events-auto data-[tooltip-open=true]:pointer-events-auto"
/>
</div>
}
Expand Down
2 changes: 1 addition & 1 deletion components/Input/RoutePicker/Rows/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function Row({
const isSelected = selectedRoute === route.name && selectedToken === token.symbol;

return (
<div className={clsx("cursor-pointer hover:bg-secondary-500 outline-none disabled:cursor-not-allowed rounded-xl")} onClick={() => onSelect(route, token)} >
<div className={clsx("group/row cursor-pointer hover:bg-secondary-500 has-[*[data-tooltip-open=true]]:bg-secondary-500 has-[*[data-tooltip-open=true]]:!cursor-pointer outline-none disabled:cursor-not-allowed rounded-xl")} onClick={() => onSelect(route, token)} >
<CurrencySelectItemDisplay
item={token}
selected={isSelected}
Expand Down
58 changes: 34 additions & 24 deletions components/Input/RoutePicker/TokenTitleDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,46 @@ import { Info } from "lucide-react";
import { ExtendedAddress } from "../Address/AddressPicker/AddressWithIcon";
import { formatUsd } from "@/components/utils/formatUsdAmount";
import { TokenBalance } from "@/Models/Balance";
import { useState } from "react";
import clsx from "clsx";

type TokenTitleWithBalanceProps = {
item: NetworkRouteToken;
route: NetworkRoute;
tokenbalance?: TokenBalance;
usdAmount?: number;
}

export const TokenInfoIcon = ({ item, route, className, iconOnly = false }: { item: NetworkRouteToken, route: NetworkRoute, className?: string, iconOnly?: boolean }) => (
<div className={className}>
<ExtendedAddress
network={item.contract ? route : undefined}
isForCurrency
showDetails
address={item.contract || `${route.display_name} native coin`}
logo={item.logo}
title={item.symbol}
description={item.display_asset}
isNativeToken={!item.contract}
>
<div className={`flex items-center gap-1 text-secondary-text cursor-pointer hover:text-primary-text ${iconOnly ? '' : 'text-xs'}`}>
{!iconOnly && (
<p className="max-w-[90px] truncate">
<span>•</span> <span>{item.display_asset || item.symbol}</span>
</p>
)}
<Info className={iconOnly ? "h-4 w-4" : "h-3 w-3"} />
</div>
</ExtendedAddress>
</div>
);
export const TokenInfoIcon = ({ item, route, className, iconOnly = false }: { item: NetworkRouteToken, route: NetworkRoute, className?: string, iconOnly?: boolean }) => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [isTooltipOpen, setIsTooltipOpen] = useState(false);

return (
<div className={className} data-popover-open={isPopoverOpen} data-tooltip-open={isTooltipOpen}>
<ExtendedAddress
network={item.contract ? route : undefined}
isForCurrency
showDetails
address={item.contract || `${route.display_name} native coin`}
logo={item.logo}
title={item.symbol}
description={item.display_asset}
isNativeToken={!item.contract}
onPopoverOpenChange={setIsPopoverOpen}
onTooltipOpenChange={setIsTooltipOpen}
>
<div className={clsx('flex items-center gap-1 text-secondary-text cursor-pointer hover:text-primary-text data-[popover-open=true]:text-primary-text data-[tooltip-open=true]:text-primary-text', !iconOnly && 'text-xs')} data-popover-open={isPopoverOpen} data-tooltip-open={isTooltipOpen}>
{!iconOnly && (
<p className="max-w-[90px] truncate">
<span>•</span> <span>{item.display_asset || item.symbol}</span>
</p>
)}
<Info className={iconOnly ? "h-4 w-4" : "h-3 w-3"} />
</div>
</ExtendedAddress>
</div>
);
};

export const TokenTitleWithBalance = ({ item, route, tokenbalance, usdAmount }: TokenTitleWithBalanceProps) => {
return (
Expand All @@ -45,7 +55,7 @@ export const TokenTitleWithBalance = ({ item, route, tokenbalance, usdAmount }:
item={item}
route={route}
iconOnly
className="hidden xs:block transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover"
className="hidden xs:block transition-all duration-300 opacity-0 group-hover:opacity-100 data-[popover-open=true]:opacity-100 data-[tooltip-open=true]:opacity-100 data-[popover-open=true]:delay-0 data-[tooltip-open=true]:delay-0 group-hover:delay-400 click-delay-on-hover pointer-events-none group-hover:pointer-events-auto data-[popover-open=true]:pointer-events-auto data-[tooltip-open=true]:pointer-events-auto"
/>
</div>
{(tokenbalance && Number(tokenbalance?.amount) > 0 && Number(usdAmount) > 0) && (
Expand Down