[MNY-268] Bridge Status UI updates

MananTank · MananTank · commit ca880516a623 · 2025-10-17T22:39:16.000+05:30
diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
@@ -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()}
@@ -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>
diff --git a/apps/dashboard/src/@/components/ui/CopyTextButton.tsx b/apps/dashboard/src/@/components/ui/CopyTextButton.tsx
@@ -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,
         )}
         onClick={(e) => {
diff --git a/apps/dashboard/src/@/components/ui/link-with-copy-button.tsx b/apps/dashboard/src/@/components/ui/link-with-copy-button.tsx
@@ -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" />
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
@@ -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";
@@ -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(
@@ -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>
       </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"
@@ -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">
@@ -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
@@ -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}
           />
         </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>
@@ -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
@@ -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>
   );
