Skip to content

fix: show full addresses on join requests; tighten table user display #1331

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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Megha-Dev-19 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: show full addresses on join requests; tighten table user display #1331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aabece9
fix: show full addresses on join requests; tighten table user display
Megha-Dev-19 Aug 13, 2026
2c20538
Merge branch 'main' into fix/user-address-display-and-hover
Megha-Dev-19 Aug 14, 2026
e6d0979
cleanup
Megha-Dev-19 Aug 14, 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
1 change: 1 addition & 0 deletions nt-fe/app/(treasury)/[treasuryId]/members/components/member-review-step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ export function MemberReviewStep({
accountId={member.accountId}
variant="details"
withLink={false}
truncateAddress={false}
/>
) : (
<span className="font-medium break-all">
Expand Down
2 changes: 1 addition & 1 deletion nt-fe/app/(treasury)/[treasuryId]/members/join-requests/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ function JoinRequestsAssignStep({
size="md"
variant="details"
withLink={false}
withHoverCard
truncateAddress={false}
/>
</div>
<FormField
Expand Down
78 changes: 53 additions & 25 deletions nt-fe/components/user.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,8 @@ interface UserWithDataProps {
chainName?: string;
/** When set, matching substrings in name/address are highlighted. */
highlightQuery?: string;
/** When false, show the full address (no middle ellipsis). Default true. */
truncateAddress?: boolean;
}

export function UserWithData({
Expand All @@ -214,6 +216,7 @@ export function UserWithData({
withHoverCard = false,
chainName = NEAR_NETWORK_ID,
highlightQuery,
truncateAddress = true,
}: UserWithDataProps) {
const bareAddress = stripNearComAddressPrefix(address);
const visibleAddress = displayAddress ?? address;
Expand All @@ -230,6 +233,42 @@ export function UserWithData({
isSameAccountLabel(name, bareAddress);
const primaryText = nameIsAddress ? visibleAddress : name;

const addressNode = truncateAddress ? (
highlightQuery ? (
<HighlightedText
text={nameIsAddress ? primaryText : visibleAddress}
query={highlightQuery}
className={cn(
"max-w-full",
nameIsAddress
? "font-medium text-sm truncate"
: "text-xs text-muted-foreground truncate",
)}
/>
) : (
<Address
address={nameIsAddress ? primaryText : visibleAddress}
className={cn(
"max-w-full",
nameIsAddress
? "font-medium text-sm"
: "text-xs text-muted-foreground",
)}
/>
)
) : (
<span
className={cn(
"max-w-full break-all",
nameIsAddress
? "font-medium text-sm"
: "text-xs text-muted-foreground",
)}
>
{nameIsAddress ? primaryText : visibleAddress}
</span>
);

const content = (
<>
{showAvatar && (
Expand All @@ -241,39 +280,24 @@ export function UserWithData({
/>
)}
{showDetails && (
<div className="flex flex-col items-start min-w-0 max-w-[min(100%,15rem)] md:max-w-[min(100%,20rem)]">
<div
className={cn(
"flex flex-col items-start min-w-0",
truncateAddress
? "max-w-[min(100%,15rem)] md:max-w-[min(100%,20rem)]"
: "max-w-full",
)}
>
{nameIsAddress ? (
highlightQuery ? (
<HighlightedText
text={primaryText}
query={highlightQuery}
className="font-medium max-w-full text-sm truncate"
/>
) : (
<Address
address={primaryText}
className="font-medium max-w-full text-sm"
/>
)
addressNode
) : (
<>
<HighlightedText
text={name}
query={highlightQuery}
className="font-medium truncate max-w-full text-sm"
/>
{highlightQuery ? (
<HighlightedText
text={visibleAddress}
query={highlightQuery}
className="text-xs text-muted-foreground truncate max-w-full"
/>
) : (
<Address
address={visibleAddress}
className="text-xs text-muted-foreground max-w-full"
/>
)}
{addressNode}
</>
)}
</div>
Expand Down Expand Up @@ -425,6 +449,8 @@ interface UserProps {
preferAddressBook?: boolean;
/** When set, matching substrings in name/address are highlighted. */
highlightQuery?: string;
/** When false, show the full address (no middle ellipsis). Default true. */
truncateAddress?: boolean;
}

export function User({
Expand All @@ -438,6 +464,7 @@ export function User({
chainName = NEAR_NETWORK_ID,
preferAddressBook = false,
highlightQuery,
truncateAddress = true,
}: UserProps) {
const bareAccountId = stripNearComAddressPrefix(accountId);
const { data: profile, isLoading } = useProfile(bareAccountId);
Expand Down Expand Up @@ -466,6 +493,7 @@ export function User({
withHoverCard={withHoverCard}
chainName={chainName}
highlightQuery={highlightQuery}
truncateAddress={truncateAddress}
/>
);
}
27 changes: 16 additions & 11 deletions nt-fe/features/activity/components/activity-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ import {
import { TableSkeleton } from "@/components/table-skeleton";
import { TokenAmountDisplay } from "@/components/token-display";
import { TokenDisplay } from "@/components/token-display-with-network";
import { Address } from "@/components/address";
import { Tooltip } from "@/components/tooltip";
import { User } from "@/components/user";
import { TooltipUser } from "@/components/user";
import { useTreasury } from "@/hooks/use-treasury";
import type { RecentActivity } from "@/lib/api";
import { cn, formatActivityAmount, formatSmartAmount } from "@/lib/utils";
Expand Down Expand Up @@ -355,16 +356,18 @@ export function ActivityTable({
</TableCell>
<TableCell className="min-w-[150px] max-w-[200px]">
{fromId ? (
<User
<TooltipUser
accountId={fromId}
variant="details"
withLink={false}
withHoverCard
chainName={
activity.tokenMetadata
?.chainName
}
/>
>
<Address
address={fromId}
className="text-sm"
/>
</TooltipUser>
) : (
<span className="text-sm truncate block">
{getFromAccount(
Expand All @@ -378,16 +381,18 @@ export function ActivityTable({
</TableCell>
<TableCell className="min-w-[150px] max-w-[200px]">
{toId ? (
<User
<TooltipUser
accountId={toId}
variant="details"
withLink={false}
withHoverCard
chainName={
activity.tokenMetadata
?.chainName
}
/>
>
<Address
address={toId}
className="text-sm"
/>
</TooltipUser>
) : (
<span className="text-sm truncate block">
{getToAccount(
Expand Down
1 change: 1 addition & 0 deletions nt-fe/features/proposals/components/expanded-view/batch-payment-expanded.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ function PaymentDisplay({
accountId={payment.recipient}
displayAddress={displayRecipient}
chainName={chainName}
withHoverCard
preferAddressBook
/>
),
Expand Down
12 changes: 5 additions & 7 deletions nt-fe/features/proposals/components/proposals-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ import { Policy } from "@/types/policy";
import { TreasuryConfig } from "@/lib/api";
import { FormattedDate } from "@/components/formatted-date";

import { User } from "@/components/user";
import { Address } from "@/components/address";
import { TooltipUser } from "@/components/user";
import { Checkbox } from "@/components/ui/checkbox";
import { getProposalStatus, getProposalUIKind } from "../utils/proposal-utils";
import { useProposalKindLabel } from "../hooks/use-proposal-kind-label";
Expand Down Expand Up @@ -339,12 +340,9 @@ export function ProposalsTable({
cell: (info) => {
const value = info.getValue();
return (
<User
accountId={value}
variant="details"
withLink={false}
withHoverCard
/>
<TooltipUser accountId={value}>
Comment thread
Megha-Dev-19 marked this conversation as resolved.
<Address address={value} />
</TooltipUser>
);
},
}),
Expand Down
9 changes: 1 addition & 8 deletions nt-fe/features/proposals/components/transaction-cell/function-call-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { useTranslations } from "next-intl";
import { FunctionCallData } from "../../types/index";
import { TitleSubtitleCell } from "./title-subtitle-cell";
import { useProfile } from "@/hooks/use-treasury-queries";
import { resolveUserDisplayName } from "@/components/user";

interface FunctionCallCellProps {
data: FunctionCallData;
Expand All @@ -12,12 +10,7 @@ interface FunctionCallCellProps {

export function FunctionCallCell({ data, timestamp }: FunctionCallCellProps) {
const t = useTranslations("proposals.expanded");
const { data: profile } = useProfile(data.receiver);
const receiver = resolveUserDisplayName({
accountId: data.receiver,
profileName: profile?.name,
});
const subtitle = t("onReceiver", { receiver });
const subtitle = t("onReceiver", { receiver: data.receiver });
Comment thread
Megha-Dev-19 marked this conversation as resolved.
Comment thread
Megha-Dev-19 marked this conversation as resolved.
const title =
data.actions.length === 1
? data.actions[0].methodName
Expand Down
12 changes: 2 additions & 10 deletions nt-fe/features/proposals/components/transaction-cell/staking-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { useTranslations } from "next-intl";
import { TokenCell } from "./token-cell";
import { StakingData } from "../../types/index";
import { useLockupPool, useProfile } from "@/hooks/use-treasury-queries";
import { useLockupPool } from "@/hooks/use-treasury-queries";
import { Proposal } from "@/lib/proposals-api";
import { useStakingFullAmount } from "../../hooks/use-staking-full-amount";
import { TitleSubtitleCell } from "./title-subtitle-cell";
import { resolveUserDisplayName } from "@/components/user";

interface StakingCellProps {
data: StakingData;
Expand Down Expand Up @@ -33,13 +32,6 @@ export function StakingCell({
proposal,
treasuryId,
);
const { data: profile } = useProfile(validator);
const address = validator
? resolveUserDisplayName({
accountId: validator,
profileName: profile?.name,
})
: validator;

const showAllLabel = data.isFullAmount && !resolvedAmount;

Expand All @@ -49,7 +41,7 @@ export function StakingCell({
title={<span>{t("allNear")}</span>}
Comment thread
Megha-Dev-19 marked this conversation as resolved.
Comment thread
Megha-Dev-19 marked this conversation as resolved.
subtitle={
validator
? t("validatorSubtitle", { address: address ?? "" })
? t("validatorSubtitle", { address: validator })
: undefined
}
timestamp={timestamp}
Expand Down
38 changes: 12 additions & 26 deletions nt-fe/features/proposals/components/transaction-cell/token-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import {
StakingData,
} from "../../types/index";
import { Amount } from "../amount";
import { resolveUserDisplayName, TooltipUser } from "@/components/user";
import { TooltipUser } from "@/components/user";
import { TitleSubtitleCell } from "./title-subtitle-cell";
import { useProfile } from "@/hooks/use-treasury-queries";
import { useTreasury } from "@/hooks/use-treasury";
import { Tooltip } from "@/components/tooltip";
import { isNearComPaymentRoute } from "@/lib/intents-network";
Expand Down Expand Up @@ -38,6 +37,10 @@ export function TokenCell({
const destinationAssetId =
"destinationAssetId" in data ? data.destinationAssetId : undefined;
const isNearComDestination = isNearComPaymentRoute(destinationAssetId);
const displayReceiver = formatRecipientForNearComDestination(
data.receiver,
destinationAssetId,
);
const title = (
<Amount
amount={data.amount}
Expand All @@ -50,17 +53,6 @@ export function TokenCell({
nearFt={nearFt}
/>
);
const { data: profile } = useProfile(data.receiver);
const displayReceiver = formatRecipientForNearComDestination(
data.receiver,
destinationAssetId,
);
const displayName = resolveUserDisplayName({
accountId: data.receiver,
profileName: profile?.name,
});
const nameIsAddress =
displayName.trim().toLowerCase() === data.receiver.trim().toLowerCase();
const showConfidentialAddressShield =
isConfidential && isNearComDestination;

Expand All @@ -81,23 +73,17 @@ export function TokenCell({
chainName={destinationAssetId}
Comment thread
Megha-Dev-19 marked this conversation as resolved.
>
<div className="ml-1 min-w-0 flex-1 overflow-hidden">
{nameIsAddress ? (
<Address
address={displayReceiver}
prefixLength={6}
suffixLength={6}
className="min-w-0 truncate"
/>
) : (
<span className="min-w-0 truncate block">
{displayName}
</span>
)}
<Address
address={displayReceiver}
prefixLength={6}
suffixLength={6}
className="min-w-0 truncate"
/>
</div>
</TooltipUser>
) : (
<span className="ml-1 min-w-0 flex-1 truncate">
{displayName}
{displayReceiver}
</span>
)}
</div>
Expand Down
Loading