feat: streamline copy value and address

.changeset/forty-shoes-sit.md

@@ -0,0 +1,8 @@
+---
+'explorer': minor
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+Displayed entity values which are often truncated can now be copied to clipboard by double-clicking directly on the visible characters.

.changeset/quick-lobsters-repeat.md

@@ -0,0 +1,7 @@
+---
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+Wallet addresses can now be copied to clipboard by clicking on the QR code in the address dialog.

.changeset/swift-bears-decide.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+ValueCopyable now supports double click to copy to clipboard.

libs/design-system/src/app/WalletAddressCode.tsx

@@ -2,6 +2,8 @@ import { Heading } from '../core/Heading'
 import { Text } from '../core/Text'
 import { ValueCopyable } from '../components/ValueCopyable'
 import QRCode from 'react-qr-code'
+import { useCallback } from 'react'
+import { copyToClipboard } from '../lib/clipboard'
 
 type Props = {
   title?: string
@@ -10,6 +12,10 @@ type Props = {
 }
 
 export function WalletAddressCode({ title, description, address }: Props) {
+  const copy = useCallback(() => {
+    copyToClipboard(address, 'address')
+  }, [address])
+
   return (
     <div className="flex flex-col gap-4 items-center justify-center">
       {title && (
@@ -18,8 +24,8 @@ export function WalletAddressCode({ title, description, address }: Props) {
         </Heading>
       )}
       {description && <Text>{description}</Text>}
-      <div className="relative p-[5px] bg-white h-[210px] w-[210px]">
-        <div className="absolute">
+      <div className="relative p-[5px] bg-white h-[210px] w-[210px] hover:outline hover:outline-4 hover:outline-blue-500">
+        <div onClick={copy} className="absolute cursor-pointer">
           <QRCode size={200} value={address} />
         </div>
       </div>

libs/design-system/src/components/ValueCopyable.tsx

@@ -78,6 +78,10 @@ export function ValueCopyable({
           weight={weight}
           font={font}
           ellipsis
+          onDoubleClick={(e) => {
+            e.preventDefault()
+            copyToClipboard(cleanValue, label)
+          }}
         >
           {text}
         </Link>
@@ -89,6 +93,9 @@ export function ValueCopyable({
           weight={weight}
           font={font}
           ellipsis
+          onDoubleClick={() => {
+            copyToClipboard(cleanValue, label)
+          }}
         >
           {text}
         </Text>