Skip to content

[MNY-268] Bridge Status UI updates #8273

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

Merged
merged 1 commit into from
Oct 17, 2025
Merged

[MNY-268] Bridge Status UI updates #8273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions apps/dashboard/src/@/components/blocks/wallet-address.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export function WalletAddress(props: {
<HoverCardTrigger asChild tabIndex={-1}>
<Button
className={cn(
"flex flex-row items-center gap-2 px-0",
"flex flex-row items-center gap-2 px-0 max-w-full truncate",
props.className,
)}
onClick={(e) => e.stopPropagation()}
Expand All @@ -93,7 +93,7 @@ export function WalletAddress(props: {
fallbackIcon={props.fallbackIcon}
/>
)}
<span className="cursor-pointer font-mono">
<span className="cursor-pointer font-mono max-w-full truncate">
{profiles.data?.[0]?.name || shortenedAddress}
</span>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/@/components/ui/CopyTextButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function CopyTextButton(props: {
<Button
aria-label={props.tooltip}
className={cn(
"flex h-auto w-auto gap-2 rounded-lg px-1.5 py-0.5 font-normal text-foreground",
"flex h-auto w-auto gap-2 rounded-lg px-1.5 py-0.5 font-normal text-foreground max-w-full truncate",
props.className,
)}
Comment on lines +44 to 46
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 17, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Show full values; remove truncation (MNY-268).

Current classes enforce truncation on the button and text spans, contradicting the PR objective to show full Payment IDs/addresses/hashes. Allow wrapping instead.

Apply this diff:

-          "flex h-auto w-auto gap-2 rounded-lg px-1.5 py-0.5 font-normal text-foreground max-w-full truncate",
+          "flex h-auto w-auto gap-2 rounded-lg px-1.5 py-0.5 font-normal text-foreground max-w-full",
-            <span className="min-w-0 truncate"> {props.textToShow} </span>
+            <span className="min-w-0 break-all whitespace-normal"> {props.textToShow} </span>
-            <span className="min-w-0 truncate"> {props.textToShow} </span>
+            <span className="min-w-0 break-all whitespace-normal"> {props.textToShow} </span>

Also applies to: 56-56, 62-62

🤖 Prompt for AI Agents 
In apps/dashboard/src/@/components/ui/CopyTextButton.tsx around lines 44-46 (and
also lines 56 and 62), the component currently forces truncation via the
"truncate" (and "max-w-full") utility classes which hides full Payment
IDs/addresses/hashes; remove "truncate" (and remove "max-w-full" if present)
from the class lists and replace with wrapping utilities such as
"whitespace-normal" and "break-words" (or "break-all" if hard breaks are
desired) so the button and inner spans allow wrapping and show the full values.

onClick={(e) => {
Expand Down
45 changes: 45 additions & 0 deletions apps/dashboard/src/@/components/ui/link-with-copy-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
"use client";
import { ArrowUpRightIcon, CheckIcon, CopyIcon } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "./button";
import { ToolTipLabel } from "./tooltip";

export function LinkWithCopyButton(props: {
href: string;
textToShow: string;
textToCopy: string;
copyTooltip: string;
className?: string;
}) {
const [isCopied, setIsCopied] = useState(false);
const Icon = isCopied ? CheckIcon : CopyIcon;

return (
<div className={cn("flex items-center gap-1", props.className)}>
<ToolTipLabel label={props.copyTooltip}>
<Button
variant="ghost"
size="sm"
className="p-1 h-auto shrink-0 opacity-70 hover:opacity-100 text-muted-foreground"
onClick={() => {
navigator.clipboard.writeText(props.textToCopy);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 1000);
}}
>
<Icon className="size-3" />
</Button>
</ToolTipLabel>
<Link
href={props.href}
target="_blank"
className="text-sm text-muted-foreground hover:underline flex items-center gap-1 tabular-nums flex-1 truncate hover:text-foreground group"
>
<span className="max-w-full truncate">{props.textToShow}</span>
<ArrowUpRightIcon className="size-3.5 opacity-70 shrink-0 group-hover:opacity-100" />
Comment on lines +38 to +41
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 17, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Do not truncate; wrap long hashes/addresses.

This component truncates by default, violating MNY-268. Allow wrapping with break-all; remove truncate classes.

-        className="text-sm text-muted-foreground hover:underline flex items-center gap-1 tabular-nums flex-1 truncate hover:text-foreground group"
+        className="text-sm text-muted-foreground hover:underline flex items-center gap-1 tabular-nums flex-1 break-all hover:text-foreground group"
@@
-        <span className="max-w-full truncate">{props.textToShow}</span>
+        <span className="max-w-full break-all">{props.textToShow}</span>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className="text-sm text-muted-foreground hover:underline flex items-center gap-1 tabular-nums flex-1 truncate hover:text-foreground group"
>
<span className="max-w-full truncate">{props.textToShow}</span>
<ArrowUpRightIcon className="size-3.5 opacity-70 shrink-0 group-hover:opacity-100" />
className="text-sm text-muted-foreground hover:underline flex items-center gap-1 tabular-nums flex-1 break-all hover:text-foreground group"
>
<span className="max-w-full break-all">{props.textToShow}</span>
<ArrowUpRightIcon className="size-3.5 opacity-70 shrink-0 group-hover:opacity-100" />
🤖 Prompt for AI Agents 
In apps/dashboard/src/@/components/ui/link-with-copy-button.tsx around lines 38
to 41, the component currently forces truncation (parent has "flex-1 truncate"
and the span has "max-w-full truncate"); remove these "truncate" classes and
instead allow wrapping by adding "break-all" (or "break-words" if preferred) to
the parent and/or the span so long hashes/addresses wrap across lines; keep
existing layout and icon classes but ensure no fixed truncation remains.

</Link>
</div>
);
}
109 changes: 59 additions & 50 deletions apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@ import { useQuery } from "@tanstack/react-query";
import { CodeClient } from "@workspace/ui/components/code/code.client";
import { Img } from "@workspace/ui/components/img";
import { Spinner } from "@workspace/ui/components/spinner";
import { ArrowRightIcon, CircleCheckIcon, CircleXIcon } from "lucide-react";
import {
ArrowRightIcon,
ArrowUpRightIcon,
CircleCheckIcon,
CircleXIcon,
} from "lucide-react";
import Link from "next/link";
import { NATIVE_TOKEN_ADDRESS, type ThirdwebClient } from "thirdweb";
import type { Status, Token } from "thirdweb/bridge";
import { status } from "thirdweb/bridge";
import { toTokens } from "thirdweb/utils";
import { WalletAddress } from "@/components/blocks/wallet-address";
import { CopyTextButton } from "@/components/ui/CopyTextButton";
import { LinkWithCopyButton } from "@/components/ui/link-with-copy-button";
import { SkeletonContainer } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { fetchChain } from "@/utils/fetchChain";
Expand Down Expand Up @@ -46,9 +52,9 @@ export function BridgeStatus(props: {
/>
)}

<div className="px-6 lg:px-8 py-7 space-y-1.5">
<div className="flex justify-between items-center">
<p className="text-sm text-muted-foreground "> Status </p>
<div className="px-6 lg:px-8 py-7 space-y-4">
<div className="space-y-1">
<p className="text-sm text-foreground "> Status </p>

<div
className={cn(
Expand All @@ -75,22 +81,23 @@ export function BridgeStatus(props: {
</div>
</div>

<div className="flex justify-between items-center">
<p className="text-sm text-muted-foreground ">Payment ID</p>
<div className="space-y-1">
<p className="text-sm text-foreground ">Payment ID</p>
<CopyTextButton
textToCopy={bridgeStatus.paymentId}
textToShow={`${bridgeStatus.paymentId.slice(0, 6)}...${bridgeStatus.paymentId.slice(-4)}`}
textToShow={bridgeStatus.paymentId}
tooltip="Payment ID"
className="text-sm translate-x-1.5"
className="text-sm -translate-x-1.5 tabular-nums text-muted-foreground"
copyIconPosition="left"
iconClassName="text-muted-foreground/70"
variant="ghost"
/>
</div>
Comment on lines +84 to 95
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 17, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Payment ID must not truncate.

As implemented, CopyTextButton applies truncation internally; ensure the full Payment ID is visible per MNY-268.

Quick fix here: override truncation via className.

-          <CopyTextButton
+          <CopyTextButton
             textToCopy={bridgeStatus.paymentId}
             textToShow={bridgeStatus.paymentId}
             tooltip="Payment ID"
-            className="text-sm -translate-x-1.5 tabular-nums text-muted-foreground"
+            className="text-sm -translate-x-1.5 tabular-nums text-muted-foreground whitespace-normal break-all overflow-visible"
             copyIconPosition="left"
             iconClassName="text-muted-foreground/70"
             variant="ghost"
           />

Preferably also remove truncate in CopyTextButton itself (see my comment there).

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
around lines 84–95, the Payment ID is currently being truncated by
CopyTextButton; override that by adding a non-truncating class to this instance
(e.g., remove any "truncate" and add a class that forces full text display such
as disabling text-overflow/white-space truncation) so the full paymentId is
visible, and also follow up by removing the default truncation behavior inside
CopyTextButton itself so other callers don’t need to override it.

</div>

{purchaseDataString && (
<div className="px-6 lg:px-8 py-7 space-y-2 border-t border-dashed">
<p className="text-sm text-muted-foreground ">Purchase Data</p>
<p className="text-sm text-foreground ">Purchase Data</p>
<CodeClient
code={purchaseDataString}
lang="json"
Expand All @@ -113,6 +120,8 @@ function TokenInfo(props: {
txHash: string | undefined;
}) {
const chainQuery = useChainQuery(props.token.chainId);
const isNativeToken =
props.token.address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase();

return (
<div className="flex-1 pt-10 pb-9 px-6 lg:px-8">
Expand All @@ -121,8 +130,9 @@ function TokenInfo(props: {
{props.label}
</h3>
</div>
<div className="h-6" />

<div className="pb-7 pt-6 border-b border-dashed">
<div>
<div className="flex items-center gap-3">
<div className="relative hover:ring-2 hover:ring-offset-2 hover:ring-offset-card hover:ring-foreground/30 rounded-full">
<Link
Expand Down Expand Up @@ -178,52 +188,56 @@ function TokenInfo(props: {
render={(data) => (
<Link
href={`/${chainQuery.data?.slug || props.token.chainId}`}
className="text-sm text-muted-foreground leading-none hover:underline"
className="text-sm text-muted-foreground leading-none hover:underline flex items-center gap-1"
target="_blank"
>
{data}
{data}{" "}
<ArrowUpRightIcon className="size-3.5 text-muted-foreground/70 shrink-0" />
</Link>
)}
/>
</div>
</div>
</div>

<div className="h-6" />
<div className="h-8" />

<div className="space-y-1.5">
<div className="flex gap-2.5 justify-between">
<p className="text-sm text-muted-foreground ">{props.addressLabel}</p>
<div className="space-y-4">
<div className="space-y-1">
<p className="text-sm text-foreground ">{props.addressLabel}</p>
<WalletAddress
address={props.walletAddress}
client={props.client}
className="py-0.5 h-auto text-sm [&>*]:!font-sans"
iconClassName="size-3.5"
className="py-0.5 h-auto text-sm [&>*]:!font-sans tabular-nums [&>*]:font-normal text-muted-foreground hover:text-foreground"
iconClassName="size-3"
shortenAddress={false}
/>
Comment on lines +205 to 214
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 17, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

WalletAddress may still truncate even with shortenAddress={false}.

The WalletAddress component uses max-w-full truncate internally (see wallet-address.tsx). That will still ellipsize long addresses and conflicts with MNY-268.

Consider removing truncate or adding break-all/whitespace-normal in WalletAddress. I can open a follow-up PR to adjust that component if desired.

Run this to confirm and spot other truncation sites:

🏁 Script executed:

#!/bin/bash
rg -n --type=tsx -C2 'WalletAddress\(|className=.*truncate|break-all' apps/dashboard/src | sed -n '1,200p'

Length of output: 27

I'll fix the command and verify the truncation issue.

🏁 Script executed:

#!/bin/bash
# Corrected search: use --type=ts for TypeScript/TSX files, or use glob pattern
echo "=== Searching for WalletAddress usage and truncate classes ==="
rg -n --type=ts -C2 'WalletAddress\(|className=.*truncate|break-all' apps/dashboard/src 2>&1 | head -150

echo ""
echo "=== Inspecting wallet-address.tsx file ==="
fd -e tsx -e ts -path '*/wallet-address*' apps/dashboard/src

Length of output: 17973

🏁 Script executed:

#!/bin/bash
# Find wallet-address component file with correct fd syntax
echo "=== Finding wallet-address component file ==="
fd -type f -name '*wallet-address*' apps/dashboard/src

echo ""
echo "=== Display wallet-address.tsx content ==="
fd -type f -name '*wallet-address*' apps/dashboard/src -exec cat {} \;

echo ""
echo "=== View bridge-status.tsx lines 200-220 ==="
sed -n '200,220p' apps/dashboard/src/app/\(app\)/\(dashboard\)/\(chain\)/\[chain_id\]/tx/\[txHash\]/bridge-status.tsx 2>/dev/null || echo "File not found, searching for it..."

echo ""
echo "=== Search for bridge-status file ==="
fd -type f -name '*bridge-status*' apps/dashboard/src

Length of output: 1383

🏁 Script executed:

#!/bin/bash
# Use simpler grep to find wallet-address component
echo "=== Search for WalletAddress component definition ==="
find apps/dashboard/src -name '*.tsx' -o -name '*.ts' | xargs grep -l 'export.*WalletAddress\|function WalletAddress\|const WalletAddress' | head -20

echo ""
echo "=== Search in components directory ==="
find apps/dashboard/src -type d -name components | head -10

echo ""
echo "=== List files in components/ui ==="
ls -la apps/dashboard/src/components/ui/ 2>/dev/null | head -30

echo ""
echo "=== Search across all apps for wallet-address ==="
find . -type f -name '*wallet*' 2>/dev/null | grep -E '\.(tsx?|jsx?)$' | head -20

Length of output: 3598

🏁 Script executed:

#!/bin/bash
echo "=== Content of WalletAddress component ==="
cat apps/dashboard/src/@/components/blocks/wallet-address.tsx

echo ""
echo "=== Search for truncate in WalletAddress component ==="
grep -n "truncate\|max-w" apps/dashboard/src/@/components/blocks/wallet-address.tsx

Length of output: 7669

WalletAddress component uses max-w-full truncate internally, causing addresses to ellipsize despite shortenAddress={false}.

The concern is valid. The WalletAddress component (at apps/dashboard/src/@/components/blocks/wallet-address.tsx, lines 81 and 96) applies max-w-full truncate to both the Button wrapper and the address span. The shortenAddress prop only controls the display format (shortened like 0x1234...5678 vs. full), but doesn't prevent CSS truncation. When shortenAddress={false}, long addresses will still be ellipsized, conflicting with MNY-268's requirement for full address visibility.

Remove the truncate class from WalletAddress or add break-all/whitespace-normal to override it, as suggested.

🤖 Prompt for AI Agents 
In
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
around lines 205-214, the WalletAddress component is rendering long addresses
that are being ellipsized despite shortenAddress={false} because the
WalletAddress component
(apps/dashboard/src/@/components/blocks/wallet-address.tsx at lines ~81 and ~96)
applies max-w-full truncate to the wrapper and span; modify WalletAddress to
stop forcing CSS truncation: either remove the truncate class entirely or make
it conditional (only apply truncate when props.shortenAddress is true), or
replace truncate with a non-ellipsizing alternative such as break-all and
whitespace-normal when shortenAddress is false, and ensure the class updates
cover both the Button wrapper and the address span so full addresses display as
required; run the app and verify long addresses are no longer ellipsized when
shortenAddress={false}.

</div>

<div className="flex gap-2 justify-between">
<p className="text-sm text-muted-foreground ">Token Address</p>
<CopyTextButton
<div className="space-y-1">
<p className="text-sm text-foreground ">Token Address</p>
<LinkWithCopyButton
href={
isNativeToken
? `/${chainQuery.data?.slug || props.token.chainId}`
: `/${chainQuery.data?.slug || props.token.chainId}/${props.token.address}`
}
textToShow={props.token.address}
textToCopy={props.token.address}
textToShow={`${props.token.address.slice(0, 6)}...${props.token.address.slice(-4)}`}
tooltip="Token Address"
className="text-sm translate-x-1.5"
copyIconPosition="left"
variant="ghost"
copyTooltip="Copy Token Address"
className="-translate-x-1"
/>
</div>

<div className="flex gap-2 justify-between">
<p className="text-sm text-muted-foreground ">Transaction Hash</p>
<div className="space-y-1">
<p className="text-sm text-foreground ">Transaction Hash</p>
{props.txHash ? (
<CopyTextButton
<LinkWithCopyButton
className="-translate-x-1"
href={`/${chainQuery.data?.slug || props.token.chainId}/tx/${props.txHash}`}
textToShow={`${props.txHash.slice(0, 12)}...${props.txHash.slice(-4)}`}
textToCopy={props.txHash}
textToShow={`${props.txHash.slice(0, 6)}...${props.txHash.slice(-4)}`}
tooltip="Transaction Hash"
className="text-sm translate-x-1.5"
copyIconPosition="left"
variant="ghost"
copyTooltip="Copy Transaction Hash"
/>
) : (
<p className="text-sm text-muted-foreground ">N/A</p>
Expand Down Expand Up @@ -288,10 +302,8 @@ function FailedBridgeStatusContent(props: {
}) {
return (
<div className="px-6 lg:px-8 py-7 space-y-1.5 border-b border-dashed">
<h3 className="text-base font-medium tracking-tight mb-3">
Transactions
</h3>
<div className="flex flex-col gap-2">
<h3 className="text-lg font-medium tracking-tight mb-4">Transactions</h3>
<div className="space-y-4">
{props.transactions.map((tx) => {
return (
<TxHashRow
Expand Down Expand Up @@ -328,34 +340,31 @@ function TxHashRow(props: {
const chainQuery = useChainQuery(props.chainId);

return (
<div className="flex items-center gap-2 justify-between">
<div className="space-y-1">
<div className="flex items-center gap-2">
<Img
src={resolveSchemeWithErrorHandler({
client: props.client,
uri: chainQuery.data?.icon?.url,
})}
alt={chainQuery.data?.name}
className="size-4 rounded-full"
className="size-3.5 rounded-full"
fallback={
<div className="size-4 from-blue-500 to-foreground rounded-full bg-gradient-to-b" />
<div className="size-3.5 from-blue-500 to-foreground rounded-full bg-gradient-to-b" />
}
/>
<SkeletonContainer
skeletonData={`Chain ${props.chainId}`}
loadedData={chainQuery.data?.name}
render={(data) => (
<p className="text-sm text-muted-foreground">{data}</p>
)}
render={(data) => <p className="text-sm text-foreground">{data}</p>}
/>
</div>
<CopyTextButton
<LinkWithCopyButton
href={`/${chainQuery.data?.slug || props.chainId}/tx/${props.txHash}`}
textToShow={props.txHash}
textToCopy={props.txHash}
textToShow={`${props.txHash.slice(0, 6)}...${props.txHash.slice(-4)}`}
tooltip="Copy Transaction Hash"
className="text-sm"
copyIconPosition="right"
variant="ghost"
copyTooltip="Copy Transaction Hash"
className="-translate-x-0.5"
/>
</div>
);
Expand Down
Loading