From 95074fa38de7c7a11707d0b6c35324799042eb0a Mon Sep 17 00:00:00 2001
From: crbon <crbon@users.noreply.github.com>
Date: Thu, 22 Jan 2026 00:37:47 +1000
Subject: [PATCH] fix(components): standardize ExternalLink styling and add
 copy functionality - Fix inconsistent icon sizes in ExternalLink component by
 removing hardcoded props. - Standardize icon alignment using new CSS class. -
 Add copy-to-clipboard functionality when clicking the link text.

---
 src/components/common/ExternalLink.module.css | 14 ++++++++++
 src/components/common/ExternalLink.tsx        | 27 ++++++++++++++-----
 src/components/messages.ts                    |  1 +
 3 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/components/common/ExternalLink.module.css

diff --git a/src/components/common/ExternalLink.module.css b/src/components/common/ExternalLink.module.css
new file mode 100644
index 00000000..aa8e6d3f
--- /dev/null
+++ b/src/components/common/ExternalLink.module.css
@@ -0,0 +1,14 @@
+.link {
+  cursor: pointer;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.iconLink {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--base-color-10);
+}
diff --git a/src/components/common/ExternalLink.tsx b/src/components/common/ExternalLink.tsx
index dec0d16f..73c043a6 100644
--- a/src/components/common/ExternalLink.tsx
+++ b/src/components/common/ExternalLink.tsx
@@ -1,23 +1,36 @@
-import { Icon, Row, Text } from '@umami/react-zen';
+'use client';
+import { Icon, Row, Text, useToast } from '@umami/react-zen';
 import Link, { type LinkProps } from 'next/link';
 import type { ReactNode } from 'react';
+import { useMessages } from '@/components/hooks';
 import { ExternalLink as LinkIcon } from '@/components/icons';
+import styles from './ExternalLink.module.css';
 
 export function ExternalLink({
   href,
   children,
   ...props
-}: LinkProps & { href: string; children: ReactNode }) {
+}: Omit<LinkProps, 'href'> & { href: string; children: ReactNode }) {
+  const { toast } = useToast();
+  const { formatMessage, labels } = useMessages();
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(href);
+    toast(formatMessage(labels.copied));
+  };
+
   return (
     <Row alignItems="center" overflow="hidden" gap>
       <Text title={href} truncate>
-        <Link {...props} href={href} target="_blank">
+        <span onClick={handleCopy} className={styles.link}>
           {children}
-        </Link>
+        </span>
       </Text>
-      <Icon size="sm" strokeColor="muted">
-        <LinkIcon />
-      </Icon>
+      <Link {...props} href={href} target="_blank" className={styles.iconLink}>
+        <Icon>
+          <LinkIcon />
+        </Icon>
+      </Link>
     </Row>
   );
 }
diff --git a/src/components/messages.ts b/src/components/messages.ts
index 54f11d9c..db32f5fb 100644
--- a/src/components/messages.ts
+++ b/src/components/messages.ts
@@ -364,6 +364,7 @@ export const labels = defineMessages({
   documentation: { id: 'label.documentation', defaultMessage: 'Documentation' },
   switchAccount: { id: 'label.switch-account', defaultMessage: 'Switch account' },
   advanced: { id: 'label.advanced', defaultMessage: 'Advanced' },
+  copied: { id: 'label.copied', defaultMessage: 'Copied to clipboard' },
 });
 
 export const messages = defineMessages({