[MNY-268] Bridge Status UI updates #8273
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
WalkthroughAdds truncation utilities to wallet and copy-button components, introduces a new LinkWithCopyButton component combining copy-to-clipboard and external-link actions, and refactors bridge-status to use LinkWithCopyButton, adjust link href logic/icons, and update spacing and layout. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LinkUI as LinkWithCopyButton
participant Clipboard
participant Explorer as ExternalSite
User->>LinkUI: Click copy button
LinkUI->>Clipboard: navigator.clipboard.writeText(textToCopy)
LinkUI-->>User: set isCopied = true (show CheckIcon)
Note right of LinkUI: after 1s set isCopied = false
User->>LinkUI: Click external link
LinkUI->>Explorer: open href in new tab
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8273 +/- ##
=======================================
Coverage 54.89% 54.89%
=======================================
Files 919 919
Lines 60622 60622
Branches 4126 4126
=======================================
Hits 33278 33278
Misses 27242 27242
Partials 102 102
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
apps/dashboard/src/@/components/blocks/wallet-address.tsx(2 hunks)apps/dashboard/src/@/components/ui/CopyTextButton.tsx(1 hunks)apps/dashboard/src/@/components/ui/link-with-copy-button.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx(8 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/@/components/blocks/wallet-address.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/@/components/blocks/wallet-address.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/@/components/blocks/wallet-address.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/@/components/blocks/wallet-address.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/@/components/blocks/wallet-address.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (4)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(20-178)apps/dashboard/src/@/components/ui/link-with-copy-button.tsx (1)
LinkWithCopyButton(9-45)apps/playground-web/src/app/ai/components/resolveSchemeWithErrorHandler.ts (1)
resolveSchemeWithErrorHandler(4-21)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
44-44: LGTM: Truncation classes added for proper text overflow handling.The addition of
max-w-full truncateensures the button respects its container width and displays ellipsis for overflowing text, working in conjunction with the existingmin-w-0 truncateon the inner spans.apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
81-81: LGTM: Consistent truncation pattern applied.The
max-w-full truncateclasses on both the Button and inner span ensure proper text overflow handling for long wallet addresses and profile names, maintaining a responsive layout.Also applies to: 96-96
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (4)
55-96: LGTM: Status and Payment ID UI improvements.The spacing, typography, and color updates improve visual hierarchy. The full Payment ID display (line 88) with
tabular-nums(line 90) aligns with the PR objective to show full values without truncation.
123-124: LGTM: Native token handling with correct link logic.The
isNativeTokencheck properly differentiates between native tokens (link to chain page) and contract tokens (link to token address page), and the full address display meets the PR requirement.Also applies to: 219-229
305-318: LGTM: Failed status section improvements.The heading size adjustment and spacing refinements improve the visual structure of the failed transactions list.
362-368: LGTM: Correct transaction link implementation.The
TxHashRowcomponent correctly constructs the transaction URL with the/tx/path segment, providing both copy and view functionality as required.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
apps/dashboard/src/@/components/blocks/wallet-address.tsx(2 hunks)apps/dashboard/src/@/components/ui/CopyTextButton.tsx(1 hunks)apps/dashboard/src/@/components/ui/link-with-copy-button.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/@/components/blocks/wallet-address.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsxapps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsxapps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsxapps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsxapps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsxapps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsx
🧠 Learnings (2)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to **/*.{ts,tsx} : Use explicit function declarations and explicit return types in TypeScript
Applied to files:
apps/dashboard/src/@/components/ui/link-with-copy-button.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (4)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(20-178)apps/dashboard/src/@/components/ui/link-with-copy-button.tsx (1)
LinkWithCopyButton(9-45)apps/playground-web/src/app/ai/components/resolveSchemeWithErrorHandler.ts (1)
resolveSchemeWithErrorHandler(4-21)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
44-44: LGTM! Truncation support added.The addition of
max-w-full truncateenables proper text overflow handling when the button is used in space-constrained layouts, which aligns with the PR objective.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (3)
362-368: LGTM! Correct implementation of transaction hash display.The TxHashRow correctly displays the full transaction hash without truncation and uses the proper href pattern for linking to the transaction page, which aligns with the PR objectives.
208-214: Good: Full wallet address display aligns with PR objective.Setting
shortenAddress={false}ensures the full wallet address is displayed, which correctly implements the PR objective to "show full addresses and transaction hashes without truncation."
219-229: LGTM! Token address link and display are correct.The implementation correctly:
- Uses
isNativeTokento determine the appropriate link destination (chain vs. token page)- Displays the full token address without truncation
- Provides copy functionality with proper tooltip
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
Show resolved
Hide resolved
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing UI components in the dashboard by improving styles for better text handling and introducing a new `LinkWithCopyButton` component for copying links and displaying tooltips.
### Detailed summary
- Updated `className` in `CopyTextButton` and `WalletAddress` for better text truncation.
- Introduced `LinkWithCopyButton` component for link handling and copying functionality.
- Adjusted styles in `BridgeStatus` and `TokenInfo` for improved UI consistency.
- Replaced `CopyTextButton` with `LinkWithCopyButton` for token address and transaction hash.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Added a combined copy-and-open-link component with tooltip and temporary visual feedback for quick copying and opening external links.
* **Style**
* Improved text truncation for wallet names, addresses and copy controls to prevent overflow.
* Updated spacing, typography and section layout across the dashboard for clearer hierarchy.
* Added external-link arrows for clearer link affordance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-268
branch
from
ca88051 to
db291d2
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (2)
139-148: Add rel on external token/icon link.target="_blank" without rel is a security risk.
- <Link + <Link href={ props.token.address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase() ? `/${chainQuery.data?.slug || props.token.chainId}` : `/${chainQuery.data?.slug || props.token.chainId}/${props.token.address}` } target="_blank" + rel="noopener noreferrer" aria-label="View Token" className="absolute inset-0 z-10" />
307-315: Non-unique React list key.Using chainId alone can collide if multiple tx exist for the same chain. Use a composite or the tx hash.
- key={tx.chainId} + key={`${tx.chainId}:${tx.transactionHash}`}
♻️ Duplicate comments (3)
apps/dashboard/src/@/components/ui/link-with-copy-button.tsx (2)
9-15: Add explicit return type.Per repo guidelines, declare the return type for TSX components.
-export function LinkWithCopyButton(props: { +export function LinkWithCopyButton(props: { href: string; textToShow: string; textToCopy: string; copyTooltip: string; className?: string; -}) { +}): React.JSX.Element {
16-18: Unify clipboard logic via hook; prevent leaks; improve UX.Replace manual clipboard + timeout with existing useClipboard hook; also stop event bubbling to avoid accidental parent clicks.
-import { useState } from "react"; +import { useState } from "react"; +import { useClipboard } from "@/hooks/useClipboard"; @@ -export function LinkWithCopyButton(props: { +export function LinkWithCopyButton(props: { @@ - const [isCopied, setIsCopied] = useState(false); - const Icon = isCopied ? CheckIcon : CopyIcon; + const { hasCopied, onCopy } = useClipboard(props.textToCopy, 1000); + const Icon = hasCopied ? CheckIcon : CopyIcon; @@ - <Button + <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); - }} + aria-label={props.copyTooltip} + onClick={(e) => { + e.stopPropagation(); + onCopy(); + }} > <Icon className="size-3" /> </Button>Also applies to: 22-33
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (1)
232-241: Transaction Hash should show full value (no truncation).The display is still sliced. Use the full hash.
<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)}`} + textToShow={props.txHash} textToCopy={props.txHash} copyTooltip="Copy Transaction Hash" />
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (1)
27-33: Add explicit return types for exported components.Keep to the codebase convention; declare return types for exported functions.
-export function BridgeStatus(props: { +export function BridgeStatus(props: { bridgeStatus: Status; client: ThirdwebClient; -}) { +}): JSX.Element { @@ -export function BridgeStatusWithPolling(props: { +export function BridgeStatusWithPolling(props: { bridgeStatus: Status; client: ThirdwebClient; chainId: number; transactionHash: string; -}) { +}): JSX.Element {Also applies to: 373-405
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
apps/dashboard/src/@/components/blocks/wallet-address.tsx(2 hunks)apps/dashboard/src/@/components/ui/CopyTextButton.tsx(1 hunks)apps/dashboard/src/@/components/ui/link-with-copy-button.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/@/components/blocks/wallet-address.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/ui/CopyTextButton.tsxapps/dashboard/src/@/components/ui/link-with-copy-button.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
🧠 Learnings (2)
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to **/*.{ts,tsx} : Use explicit function declarations and explicit return types in TypeScript
Applied to files:
apps/dashboard/src/@/components/ui/link-with-copy-button.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (4)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)apps/dashboard/src/@/components/blocks/wallet-address.tsx (1)
WalletAddress(20-178)apps/dashboard/src/@/components/ui/link-with-copy-button.tsx (1)
LinkWithCopyButton(9-45)apps/playground-web/src/app/ai/components/resolveSchemeWithErrorHandler.ts (1)
resolveSchemeWithErrorHandler(4-21)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx (3)
217-229: Token Address: good switch to LinkWithCopyButton.Href logic handles native vs. contract correctly; full address displayed. This aligns with MNY-268.
Please confirm that LinkWithCopyButton no longer truncates after applying my suggested change in that component; otherwise the address may still be ellipsized.
189-197: Add rel on external chain link.Same issue for this Link.
- <Link + <Link href={`/${chainQuery.data?.slug || props.token.chainId}`} - className="text-sm text-muted-foreground leading-none hover:underline flex items-center gap-1" + className="text-sm text-muted-foreground leading-none hover:underline flex items-center gap-1" target="_blank" + rel="noopener noreferrer" >⛔ Skipped due to learnings
Learnt from: MananTank PR: thirdweb-dev/js#7812 File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx:48-60 Timestamp: 2025-08-07T20:43:21.864Z Learning: In the TokenBanner component at apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx, the Link components use target="_blank" with internal application routes (starting with "/") to open pages in new tabs within the same application. These internal links do not require rel="noopener noreferrer" security attributes, which are only needed for external URLs.Learnt from: jnsdls PR: thirdweb-dev/js#7365 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17 Timestamp: 2025-06-18T04:30:04.326Z Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.Learnt from: MananTank PR: thirdweb-dev/js#7984 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx:93-99 Timestamp: 2025-09-05T19:45:22.949Z Learning: In the thirdweb dashboard project, rel="noopener noreferrer" attributes are not required for external links with target="_blank" in Link components, as confirmed by MananTank.
343-369: Add rel="noopener noreferrer" to LinkWithCopyButton external link.The LinkWithCopyButton component uses
target="_blank"withoutrel="noopener"orrel="noreferrer"to avoid security issues. The component is atapps/dashboard/src/@/components/ui/link-with-copy-button.tsx, line 36:<Link href={props.href} target="_blank" + rel="noopener noreferrer" className="text-sm text-muted-foreground hover:underline flex items-center gap-1 tabular-nums flex-1 truncate hover:text-foreground group" >⛔ Skipped due to learnings
Learnt from: MananTank PR: thirdweb-dev/js#7812 File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx:48-60 Timestamp: 2025-08-07T20:43:21.864Z Learning: In the TokenBanner component at apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx, the Link components use target="_blank" with internal application routes (starting with "/") to open pages in new tabs within the same application. These internal links do not require rel="noopener noreferrer" security attributes, which are only needed for external URLs.Learnt from: MananTank PR: thirdweb-dev/js#7984 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx:93-99 Timestamp: 2025-09-05T19:45:22.949Z Learning: In the thirdweb dashboard project, rel="noopener noreferrer" attributes are not required for external links with target="_blank" in Link components, as confirmed by MananTank.Learnt from: jnsdls PR: thirdweb-dev/js#7365 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17 Timestamp: 2025-06-18T04:30:04.326Z Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.apps/dashboard/src/@/components/ui/link-with-copy-button.tsx (1)
35-42: Add rel="noopener noreferrer" to external links.Links opened with target="_blank" must include rel to prevent reverse tabnabbing.
- <Link + <Link href={props.href} - target="_blank" + target="_blank" + rel="noopener noreferrer" className="text-sm text-muted-foreground hover:underline flex items-center gap-1 tabular-nums flex-1 truncate hover:text-foreground group" >⛔ Skipped due to learnings
Learnt from: MananTank PR: thirdweb-dev/js#7984 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx:93-99 Timestamp: 2025-09-05T19:45:22.949Z Learning: In the thirdweb dashboard project, rel="noopener noreferrer" attributes are not required for external links with target="_blank" in Link components, as confirmed by MananTank.Learnt from: MananTank PR: thirdweb-dev/js#7812 File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx:48-60 Timestamp: 2025-08-07T20:43:21.864Z Learning: In the TokenBanner component at apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx, the Link components use target="_blank" with internal application routes (starting with "/") to open pages in new tabs within the same application. These internal links do not require rel="noopener noreferrer" security attributes, which are only needed for external URLs.Learnt from: jnsdls PR: thirdweb-dev/js#7365 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17 Timestamp: 2025-06-18T04:30:04.326Z Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.
| "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, | ||
| )} |
There was a problem hiding this comment.
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.
| 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" /> |
There was a problem hiding this comment.
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.
| 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.
| <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> |
There was a problem hiding this comment.
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 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} | ||
| /> |
There was a problem hiding this comment.
🧩 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/srcLength 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/srcLength 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 -20Length 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.tsxLength 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}.
PR-Codex overview
This PR enhances the UI components in the dashboard by improving styling, adding new functionalities, and introducing a new
LinkWithCopyButtoncomponent for better user interaction with links and copy actions.Detailed summary
CopyTextButtonandwallet-addresscomponents to support truncation.LinkWithCopyButtonfor copying text and linking.BridgeStatusandTokenInfocomponents with improved layout and spacing.CopyTextButtoninstances withLinkWithCopyButton.Summary by CodeRabbit
New Features
Style