Merge pull request xch-dev#583 from dkackman/labeled-items

Author: Rigidity

crates/sage-api/src/records/pending_transaction.rs

@@ -7,5 +7,5 @@ use crate::Amount;
 pub struct PendingTransactionRecord {
     pub transaction_id: String,
     pub fee: Amount,
-    pub submitted_at: Option<String>,
+    pub submitted_at: Option<u64>,
 }

crates/sage-database/src/tables/mempool_items.rs

@@ -11,7 +11,7 @@ pub struct MempoolItem {
     pub hash: Bytes32,
     pub aggregated_signature: Signature,
     pub fee: u64,
-    pub submitted_timestamp: i64,
+    pub submitted_timestamp: Option<u64>,
 }
 
 impl Database {
@@ -188,7 +188,7 @@ async fn mempool_items_to_submit(
             hash: row.hash.convert()?,
             aggregated_signature: row.aggregated_signature.convert()?,
             fee: row.fee.convert()?,
-            submitted_timestamp: row.submitted_timestamp.unwrap_or(0),
+            submitted_timestamp: row.submitted_timestamp.map(|ts| ts as u64),
         })
     })
     .collect()
@@ -328,7 +328,7 @@ async fn mempool_items(conn: impl SqliteExecutor<'_>) -> Result<Vec<MempoolItem>
             hash: row.hash.convert()?,
             aggregated_signature: row.aggregated_signature.convert()?,
             fee: row.fee.convert()?,
-            submitted_timestamp: row.submitted_timestamp.unwrap_or(0),
+            submitted_timestamp: row.submitted_timestamp.map(|ts| ts as u64),
         })
     })
     .collect()

crates/sage/src/endpoints/data.rs

@@ -494,7 +494,7 @@ impl Sage {
                 Result::Ok(PendingTransactionRecord {
                     transaction_id: hex::encode(tx.hash),
                     fee: Amount::u64(tx.fee),
-                    submitted_at: Some(tx.submitted_timestamp.to_string()),
+                    submitted_at: tx.submitted_timestamp,
                 })
             })
             .collect::<Result<Vec<_>>>()?;

src/bindings.ts

@@ -523,7 +523,7 @@ export type OptionAsset = { asset_id: string | null; amount: Amount }
 export type OptionRecord = { launcher_id: string; name: string | null; visible: boolean; coin_id: string; address: string; amount: Amount; underlying_asset: Asset; underlying_amount: Amount; underlying_coin_id: string; strike_asset: Asset; strike_amount: Amount; expiration_seconds: number; created_height: number | null; created_timestamp: number | null }
 export type OptionSortMode = "name" | "created_height" | "expiration_seconds"
 export type PeerRecord = { ip_addr: string; port: number; peak_height: number; user_managed: boolean }
-export type PendingTransactionRecord = { transaction_id: string; fee: Amount; submitted_at: string | null }
+export type PendingTransactionRecord = { transaction_id: string; fee: Amount; submitted_at: number | null }
 export type PerformDatabaseMaintenance = { force_vacuum: boolean }
 export type PerformDatabaseMaintenanceResponse = { vacuum_duration_ms: number; analyze_duration_ms: number; wal_checkpoint_duration_ms: number; total_duration_ms: number; pages_vacuumed: number; wal_pages_checkpointed: number }
 export type RedownloadNft = { nft_id: string }

src/components/AddressItem.tsx

@@ -1,22 +1,48 @@
 import { CopyBox } from '@/components/CopyBox';
 import { t } from '@lingui/core/macro';
+import { useId } from 'react';
 import { toast } from 'react-toastify';
 
 export interface AddressItemProps {
-  label: string | null;
+  label: string;
   address: string;
+  className?: string;
 }
 
-export function AddressItem({ label, address }: AddressItemProps) {
+export function AddressItem({
+  label,
+  address,
+  className = '',
+}: AddressItemProps) {
+  const labelId = useId();
+  const contentId = useId();
+
+  // Don't render if address is empty
+  if (!address || address.trim() === '') {
+    return null;
+  }
+
   return (
-    <div>
-      <h6 className='text-sm font-semibold text-muted-foreground mb-2'>
+    <div
+      className={className}
+      role='region'
+      aria-labelledby={labelId}
+      aria-label={t`${label} address section`}
+    >
+      <label
+        id={labelId}
+        htmlFor={contentId}
+        className='text-sm font-medium text-muted-foreground block mb-1'
+      >
         {label}
-      </h6>
+      </label>
       <CopyBox
-        title={label ?? ''}
+        id={contentId}
+        title={t`Copy ${label}: ${address}`}
         value={address}
         onCopy={() => toast.success(t`${label} copied to clipboard`)}
+        aria-label={t`${label}: ${address} (click to copy)`}
+        aria-describedby={labelId}
       />
     </div>
   );

src/components/CopyBox.tsx

@@ -8,18 +8,27 @@ interface CopyBoxProps {
   truncate?: boolean;
   inputRef?: React.RefObject<HTMLInputElement>;
   onCopy?: () => void;
+  id?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
 }
 
 export function CopyBox(props: CopyBoxProps) {
   const truncate = props.truncate ?? true;
+  const inputId =
+    props.id || `copy-box-input-${Math.random().toString(36).substring(2, 9)}`;
+
   return (
     <div className={`flex rounded-md shadow-sm max-w-x ${props.className}`}>
       <input
+        id={inputId}
         ref={props.inputRef}
         title={props.title}
         type='text'
         value={props.displayValue ?? props.value}
         readOnly
+        aria-label={props['aria-label'] || props.title}
+        aria-describedby={props['aria-describedby']}
         className={`block w-full text-sm rounded-none rounded-l-md border-0 py-1.5 px-2 ${
           truncate ? 'truncate' : ''
         } text-muted-foreground bg-white text-neutral-950 dark:bg-neutral-900 dark:text-neutral-50 font-mono tracking-tight ring-1 ring-inset ring-neutral-200 dark:ring-neutral-800 sm:leading-6`}
@@ -28,6 +37,7 @@ export function CopyBox(props: CopyBoxProps) {
         value={props.value}
         onCopy={props.onCopy}
         className='relative rounded-none -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-neutral-200 dark:ring-neutral-800 hover:bg-gray-50 bg-white text-neutral-950 dark:bg-neutral-900 dark:text-neutral-50 '
+        aria-label={`Copy ${props.value}`}
       />
     </div>
   );

src/components/CopyButton.tsx

@@ -7,9 +7,15 @@ interface CopyButtonProps {
   value: string;
   className?: string;
   onCopy?: () => void;
+  'aria-label'?: string;
 }
 
-export function CopyButton({ value, className, onCopy }: CopyButtonProps) {
+export function CopyButton({
+  value,
+  className,
+  onCopy,
+  'aria-label': ariaLabel,
+}: CopyButtonProps) {
   const [copied, setCopied] = useState(false);
 
   const copyAddress = () => {
@@ -26,11 +32,19 @@ export function CopyButton({ value, className, onCopy }: CopyButtonProps) {
       variant='ghost'
       onClick={copyAddress}
       className={className}
+      aria-label={ariaLabel || (copied ? 'Copied!' : `Copy ${value}`)}
+      title={copied ? 'Copied!' : `Copy ${value}`}
     >
       {copied ? (
-        <CopyCheckIcon className='h-5 w-5 text-emerald-500' />
+        <CopyCheckIcon
+          className='h-5 w-5 text-emerald-500'
+          aria-hidden='true'
+        />
       ) : (
-        <CopyIcon className='h-5 w-5 text-muted-foreground' />
+        <CopyIcon
+          className='h-5 w-5 text-muted-foreground'
+          aria-hidden='true'
+        />
       )}
     </Button>
   );

src/components/LabeledItem.tsx

@@ -0,0 +1,90 @@
+import { isValidUrl } from '@/lib/utils';
+import { t } from '@lingui/core/macro';
+import { openUrl } from '@tauri-apps/plugin-opener';
+import { useId } from 'react';
+
+export interface LabeledItemProps {
+  label: string;
+  className?: string;
+  content: string | null | undefined;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+export function LabeledItem({
+  label,
+  className = '',
+  content,
+  onClick,
+  children,
+}: LabeledItemProps) {
+  const labelId = useId();
+  const contentId = useId();
+
+  // Don't render if both content and children are null or empty
+  if ((!content || content.trim() === '') && !children) {
+    return null;
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent, action: () => void) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      action();
+    }
+  };
+
+  return (
+    <div
+      role='region'
+      aria-labelledby={labelId}
+      aria-label={t`${label} section`}
+    >
+      <label
+        id={labelId}
+        htmlFor={contentId}
+        className='text-sm font-medium text-muted-foreground block mb-1'
+      >
+        {label}
+      </label>
+
+      {content && isValidUrl(content) ? (
+        <button
+          type='button'
+          id={contentId}
+          onClick={() => openUrl(content)}
+          onKeyDown={(e) => handleKeyDown(e, () => openUrl(content))}
+          className='text-sm break-all text-blue-700 dark:text-blue-300 cursor-pointer hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-sm text-left w-full p-0 border-0 bg-transparent'
+          title={t`Open external link: ${content}`}
+          aria-label={t`${label}: ${content} (opens in external application)`}
+          aria-describedby={labelId}
+        >
+          {content}
+        </button>
+      ) : onClick ? (
+        <button
+          type='button'
+          id={contentId}
+          onClick={onClick}
+          onKeyDown={(e) => handleKeyDown(e, onClick)}
+          className='text-sm break-all text-blue-700 dark:text-blue-300 cursor-pointer hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-sm text-left w-full p-0 border-0 bg-transparent'
+          title={t`Navigate to: ${content}`}
+          aria-label={t`${label}: ${content} (navigate within app)`}
+          aria-describedby={labelId}
+        >
+          {content}
+        </button>
+      ) : (
+        <div
+          id={contentId}
+          className={`text-sm break-all ${className}`}
+          aria-describedby={labelId}
+          role='text'
+        >
+          {content}
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}