From 9088bfaf7058ab00a413e239c379718ca36fa915 Mon Sep 17 00:00:00 2001
From: Gerard Molina <47140788+gmolki@users.noreply.github.com>
Date: Thu, 23 Jan 2025 14:27:00 +0100
Subject: [PATCH] Feat: add copy to clipboard to node detail links (#8)

* feat: add CopyToClipboardIcon component

* feat: add copy to clipboard in node detail links
---
 .../common/CopyToClipboardIcon/cmp.tsx           | 13 +++++++++++++
 .../common/CopyToClipboardIcon/index.ts          |  1 +
 .../common/CopyToClipboardIcon/styles.ts         | 16 ++++++++++++++++
 .../common/CopyToClipboardIcon/types.ts          |  3 +++
 .../common/NodeDetailEditableField/cmp.tsx       |  2 +-
 src/components/common/NodeDetailLink/cmp.tsx     | 12 ++++++++----
 .../tabs/OverviewTabContent.tsx                  |  9 ++++++++-
 .../pages/earn/CoreChannelNodeDetailPage/cmp.tsx |  7 +++++--
 8 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 src/components/common/CopyToClipboardIcon/cmp.tsx
 create mode 100644 src/components/common/CopyToClipboardIcon/index.ts
 create mode 100644 src/components/common/CopyToClipboardIcon/styles.ts
 create mode 100644 src/components/common/CopyToClipboardIcon/types.ts

diff --git a/src/components/common/CopyToClipboardIcon/cmp.tsx b/src/components/common/CopyToClipboardIcon/cmp.tsx
new file mode 100644
index 0000000..4c19059
--- /dev/null
+++ b/src/components/common/CopyToClipboardIcon/cmp.tsx
@@ -0,0 +1,13 @@
+import { memo } from 'react'
+import { useCopyToClipboardAndNotify } from '@aleph-front/core'
+import { StyledCopytoClipboardIcon } from './styles'
+import { CopyToClipboardIconProps } from './types'
+
+export const CopytoClipboardIcon = ({ text }: CopyToClipboardIconProps) => {
+  const handleCopy = useCopyToClipboardAndNotify(text || '')
+
+  return <StyledCopytoClipboardIcon name="copy" onClick={handleCopy} />
+}
+CopytoClipboardIcon.displayName = 'CopytoClipboardIcon'
+
+export default memo(CopytoClipboardIcon)
diff --git a/src/components/common/CopyToClipboardIcon/index.ts b/src/components/common/CopyToClipboardIcon/index.ts
new file mode 100644
index 0000000..7a9f83f
--- /dev/null
+++ b/src/components/common/CopyToClipboardIcon/index.ts
@@ -0,0 +1 @@
+export { default } from './cmp'
diff --git a/src/components/common/CopyToClipboardIcon/styles.ts b/src/components/common/CopyToClipboardIcon/styles.ts
new file mode 100644
index 0000000..4c0756d
--- /dev/null
+++ b/src/components/common/CopyToClipboardIcon/styles.ts
@@ -0,0 +1,16 @@
+import { Icon } from '@aleph-front/core'
+import styled, { css } from 'styled-components'
+import tw from 'twin.macro'
+
+export const StyledCopytoClipboardIcon = styled(Icon)`
+  ${({ theme }) => css`
+    ${tw`cursor-pointer`}
+    transition-property: color;
+    transition-duration: ${theme.transition.duration.fast}ms;
+    transition-timing-function: ${theme.transition.timing};
+
+    &:hover {
+      color: ${theme.color.main0};
+    }
+  `}
+`
diff --git a/src/components/common/CopyToClipboardIcon/types.ts b/src/components/common/CopyToClipboardIcon/types.ts
new file mode 100644
index 0000000..eebe297
--- /dev/null
+++ b/src/components/common/CopyToClipboardIcon/types.ts
@@ -0,0 +1,3 @@
+export type CopyToClipboardIconProps = {
+  text?: string
+}
diff --git a/src/components/common/NodeDetailEditableField/cmp.tsx b/src/components/common/NodeDetailEditableField/cmp.tsx
index 446e343..6ed4b64 100644
--- a/src/components/common/NodeDetailEditableField/cmp.tsx
+++ b/src/components/common/NodeDetailEditableField/cmp.tsx
@@ -121,7 +121,7 @@ export const NodeDetailEditableField = ({
       )}
       {isOwner && (
         <div
-          tw="shrink-0 flex justify-end overflow-hidden"
+          tw="shrink-0 flex items-center justify-end overflow-hidden"
           css={{
             maxWidth: isEditing ? '0' : '1.75rem',
             transition: 'max-width ease-in-out 0.25s 0s',
diff --git a/src/components/common/NodeDetailLink/cmp.tsx b/src/components/common/NodeDetailLink/cmp.tsx
index fb01e9c..caa1181 100644
--- a/src/components/common/NodeDetailLink/cmp.tsx
+++ b/src/components/common/NodeDetailLink/cmp.tsx
@@ -1,17 +1,20 @@
 import { ReactNode, memo } from 'react'
 import Link from 'next/link'
 import { Icon } from '@aleph-front/core'
+import CopyToClipboardIcon from '../CopyToClipboardIcon'
 
 export type NodeDetailLinkProps = {
   href?: string
   children?: ReactNode
   isOwner?: boolean
+  textToCopy?: string
 }
 
 export const NodeDetailLink = ({
   href,
   children,
   isOwner,
+  textToCopy,
   ...rest
 }: NodeDetailLinkProps) => {
   const content = (
@@ -21,23 +24,24 @@ export const NodeDetailLink = ({
   )
 
   return (
-    <>
+    <div tw="flex items-center gap-2">
       {href ? (
         <Link
           href={href}
           target="_blank"
           {...rest}
-          tw="flex items-center w-full"
+          tw="flex items-center gap-2 min-w-0 w-full"
         >
           {content}
           {!isOwner && (
-            <Icon tw="ml-3 w-3.5 h-3.5" name="external-link-square-alt" />
+            <Icon tw="w-3.5 h-3.5" name="external-link-square-alt" />
           )}
         </Link>
       ) : (
         <span tw="flex items-center w-full">{content}</span>
       )}
-    </>
+      {textToCopy && <CopyToClipboardIcon text={textToCopy} />}
+    </div>
   )
 }
 NodeDetailLink.displayName = 'NodeDetailLink'
diff --git a/src/components/pages/earn/ComputeResourceNodeDetailPage/tabs/OverviewTabContent.tsx b/src/components/pages/earn/ComputeResourceNodeDetailPage/tabs/OverviewTabContent.tsx
index fe2a7d4..fd40192 100644
--- a/src/components/pages/earn/ComputeResourceNodeDetailPage/tabs/OverviewTabContent.tsx
+++ b/src/components/pages/earn/ComputeResourceNodeDetailPage/tabs/OverviewTabContent.tsx
@@ -81,6 +81,7 @@ export const OverviewTabContent = ({
                 <NodeDetailLink
                   href={getETHExplorerURL({ address: node?.owner })}
                   isOwner={false}
+                  textToCopy={node?.owner}
                 >
                   {node?.owner && ellipseAddress(node?.owner)}
                 </NodeDetailLink>
@@ -101,6 +102,7 @@ export const OverviewTabContent = ({
                       tokenAddress: rewardCtrl.field.value,
                     })}
                     isOwner={isOwner}
+                    textToCopy={rewardCtrl.field.value}
                   >
                     {rewardCtrl.field.value &&
                       ellipseAddress(rewardCtrl.field.value)}
@@ -123,6 +125,7 @@ export const OverviewTabContent = ({
                       tokenAddress: streamRewardCtrl.field.value,
                     })}
                     isOwner={isOwner}
+                    textToCopy={streamRewardCtrl.field.value}
                   >
                     {streamRewardCtrl.field.value &&
                       ellipseAddress(streamRewardCtrl.field.value)}
@@ -140,7 +143,11 @@ export const OverviewTabContent = ({
                   placeholder="address"
                   isOwner={isOwner}
                 >
-                  <NodeDetailLink href={node?.address} isOwner={isOwner}>
+                  <NodeDetailLink
+                    href={node?.address}
+                    isOwner={isOwner}
+                    textToCopy={node?.address}
+                  >
                     {node?.address}
                   </NodeDetailLink>
                 </NodeDetailEditableField>
diff --git a/src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx b/src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx
index 730d18c..89972ca 100644
--- a/src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx
+++ b/src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx
@@ -27,7 +27,6 @@ import { NodeManager } from '@/domain/node'
 export const CoreChannelNodeDetailPage = () => {
   const {
     node,
-    // nodesOnSameASN,
     baseLatency,
     aggregateLatency,
     fileDownloadLatency,
@@ -47,7 +46,6 @@ export const CoreChannelNodeDetailPage = () => {
     lockedCtrl,
     registrationUrlCtrl,
     isDirty,
-    account,
     isUnlinkableByUser,
     handleUnlink,
     handleRemove,
@@ -111,6 +109,7 @@ export const CoreChannelNodeDetailPage = () => {
                   <NodeDetailLink
                     href={getETHExplorerURL({ address: node?.owner })}
                     isOwner={false}
+                    textToCopy={node?.owner}
                   >
                     {node?.owner && ellipseAddress(node?.owner)}
                   </NodeDetailLink>
@@ -131,6 +130,7 @@ export const CoreChannelNodeDetailPage = () => {
                         tokenAddress: rewardCtrl.field.value,
                       })}
                       isOwner={isOwner}
+                      textToCopy={rewardCtrl.field.value}
                     >
                       {rewardCtrl.field.value &&
                         ellipseAddress(rewardCtrl.field.value)}
@@ -153,6 +153,7 @@ export const CoreChannelNodeDetailPage = () => {
                         multiaddress: multiaddressCtrl.field.value,
                       })}
                       isOwner={isOwner}
+                      textToCopy={multiaddressCtrl.field.value}
                     >
                       {multiaddressCtrl.field.value &&
                         ellipseAddress(multiaddressCtrl.field.value)}
@@ -177,6 +178,7 @@ export const CoreChannelNodeDetailPage = () => {
                         address: managerCtrl.field.value,
                       })}
                       isOwner={isOwner}
+                      textToCopy={managerCtrl.field.value}
                     >
                       {managerCtrl.field.value &&
                         ellipseAddress(managerCtrl.field.value)}
@@ -197,6 +199,7 @@ export const CoreChannelNodeDetailPage = () => {
                     <NodeDetailLink
                       href={registrationUrlCtrl.field.value}
                       isOwner={isOwner}
+                      textToCopy={registrationUrlCtrl.field.value}
                     >
                       {registrationUrlCtrl.field.value}
                     </NodeDetailLink>