@nockchain/rose 0.1.4-nightly.5

package/extension/popup/hooks/useApprovalDetection.ts

@@ -0,0 +1,128 @@
+/**
+ * useApprovalDetection - Detect and handle approval requests from URL hash
+ *
+ * This hook monitors the URL hash for approval request parameters and automatically
+ * fetches the corresponding request data from the background script, then navigates
+ * to the appropriate approval screen when the wallet is unlocked.
+ *
+ * @param walletAddress - The current wallet address (null if not initialized)
+ * @param walletLocked - Whether the wallet is currently locked
+ * @param setPendingTransactionRequest - Function to set pending transaction request
+ * @param setPendingSignRequest - Function to set pending sign request
+ * @param navigate - Navigation function to switch screens
+ */
+
+import { useEffect } from 'react';
+import { send } from '../utils/messaging';
+import { INTERNAL_METHODS, APPROVAL_CONSTANTS } from '../../shared/constants';
+import type {
+  TransactionRequest,
+  SignRequest,
+  ConnectRequest,
+  SignRawTxRequest,
+} from '../../shared/types';
+import type { Screen } from '../store';
+
+interface UseApprovalDetectionProps {
+  walletAddress: string | null;
+  walletLocked: boolean;
+  setPendingConnectRequest: (request: ConnectRequest | null) => void;
+  setPendingTransactionRequest: (request: TransactionRequest | null) => void;
+  setPendingSignRequest: (request: SignRequest | null) => void;
+  setPendingSignRawTxRequest: (request: SignRawTxRequest | null) => void;
+  navigate: (screen: Screen) => void;
+}
+
+export function useApprovalDetection({
+  walletAddress,
+  walletLocked,
+  setPendingConnectRequest,
+  setPendingTransactionRequest,
+  setPendingSignRequest,
+  setPendingSignRawTxRequest,
+  navigate,
+}: UseApprovalDetectionProps) {
+  useEffect(() => {
+    // Wait for wallet state to be initialized
+    if (walletAddress === null) return;
+
+    const hash = window.location.hash.slice(1); // Remove '#'
+
+    if (hash.startsWith(APPROVAL_CONSTANTS.CONNECT_HASH_PREFIX)) {
+      const requestId = hash.replace(APPROVAL_CONSTANTS.CONNECT_HASH_PREFIX, '');
+
+      // Fetch pending connect request from background
+      send<ConnectRequest>(INTERNAL_METHODS.GET_PENDING_CONNECTION, [requestId])
+        .then(request => {
+          if (request && !('error' in request)) {
+            setPendingConnectRequest(request);
+            // Navigate to approval screen if unlocked, or locked screen if locked
+            if (!walletLocked) {
+              navigate('connect-approval');
+            } else {
+              navigate('locked');
+            }
+          }
+        })
+        .catch(console.error);
+    } else if (hash.startsWith(APPROVAL_CONSTANTS.TRANSACTION_HASH_PREFIX)) {
+      const requestId = hash.replace(APPROVAL_CONSTANTS.TRANSACTION_HASH_PREFIX, '');
+
+      // Fetch pending transaction request from background
+      send<TransactionRequest>(INTERNAL_METHODS.GET_PENDING_TRANSACTION, [requestId])
+        .then(request => {
+          if (request && !('error' in request)) {
+            setPendingTransactionRequest(request);
+            // Navigate to approval screen if unlocked, or locked screen if locked
+            if (!walletLocked) {
+              navigate('approve-transaction');
+            } else {
+              navigate('locked');
+            }
+          }
+        })
+        .catch(console.error);
+    } else if (hash.startsWith(APPROVAL_CONSTANTS.SIGN_MESSAGE_HASH_PREFIX)) {
+      const requestId = hash.replace(APPROVAL_CONSTANTS.SIGN_MESSAGE_HASH_PREFIX, '');
+
+      // Fetch pending sign request from background
+      send<SignRequest>(INTERNAL_METHODS.GET_PENDING_SIGN_REQUEST, [requestId])
+        .then(request => {
+          if (request && !('error' in request)) {
+            setPendingSignRequest(request);
+            // Navigate to approval screen if unlocked, or locked screen if locked
+            if (!walletLocked) {
+              navigate('sign-message');
+            } else {
+              navigate('locked');
+            }
+          }
+        })
+        .catch(console.error);
+    } else if (hash.startsWith(APPROVAL_CONSTANTS.SIGN_RAW_TX_HASH_PREFIX)) {
+      const requestId = hash.replace(APPROVAL_CONSTANTS.SIGN_RAW_TX_HASH_PREFIX, '');
+
+      // Fetch pending sign raw tx request from background
+      send<SignRawTxRequest>(INTERNAL_METHODS.GET_PENDING_SIGN_RAW_TX_REQUEST, [requestId])
+        .then(request => {
+          if (request && !('error' in request)) {
+            setPendingSignRawTxRequest(request);
+            // Navigate to approval screen if unlocked, or locked screen if locked
+            if (!walletLocked) {
+              navigate('approve-sign-raw-tx');
+            } else {
+              navigate('locked');
+            }
+          }
+        })
+        .catch(console.error);
+    }
+  }, [
+    walletAddress,
+    walletLocked,
+    setPendingConnectRequest,
+    setPendingTransactionRequest,
+    setPendingSignRequest,
+    navigate,
+  ]);
+}

package/extension/popup/hooks/useAutoFocus.ts

@@ -0,0 +1,36 @@
+/**
+ * useAutoFocus - Auto-focus an input element
+ *
+ * @param options - Configuration options
+ * @param options.when - Condition that triggers focus (defaults to true for mount-only focus)
+ * @param options.select - Whether to select all text after focusing
+ * @returns Ref to attach to the input element
+ *
+ */
+
+import { useRef, useEffect } from 'react';
+
+interface UseAutoFocusOptions {
+  /** Condition that triggers focus. Defaults to true (focus on mount) */
+  when?: boolean | unknown;
+  /** Whether to select all text after focusing. Defaults to false */
+  select?: boolean;
+}
+
+export function useAutoFocus<T extends HTMLInputElement | HTMLTextAreaElement>(
+  options: UseAutoFocusOptions = {}
+): React.RefObject<T | null> {
+  const { when = true, select = false } = options;
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (when && ref.current) {
+      ref.current.focus();
+      if (select) {
+        ref.current.select();
+      }
+    }
+  }, [when, select]);
+
+  return ref;
+}

package/extension/popup/hooks/useAutoRejectOnClose.ts

@@ -0,0 +1,25 @@
+/**
+ * useAutoRejectOnClose - Auto-reject approval requests when window closes
+ *
+ * This hook automatically rejects pending approval requests when the user closes
+ * the popup window without taking action.
+ *
+ * @param requestId - The ID of the pending approval request
+ * @param rejectMethod - The internal method to call for rejection
+ */
+
+import { useEffect } from 'react';
+import { send } from '../utils/messaging';
+
+export function useAutoRejectOnClose(requestId: string, rejectMethod: string) {
+  useEffect(() => {
+    if (!requestId) return;
+    const handleBeforeUnload = () => {
+      // Reject the request when window is closing
+      send(rejectMethod, [requestId]).catch(console.error);
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [requestId, rejectMethod]);
+}

package/extension/popup/hooks/useClickOutside.ts

@@ -0,0 +1,33 @@
+/**
+ * useClickOutside - Detect clicks outside a referenced element
+ *
+ * @param ref - Reference to the element to detect clicks outside of
+ * @param handler - Callback function to execute when clicking outside
+ * @param enabled - Whether the listener is active (defaults to true)
+ *
+ */
+
+import { useEffect, RefObject } from 'react';
+
+export function useClickOutside<T extends HTMLElement>(
+  ref: RefObject<T | null>,
+  handler: (event: MouseEvent) => void,
+  enabled: boolean = true
+): void {
+  useEffect(() => {
+    if (!enabled) return;
+
+    function handleClickOutside(event: MouseEvent) {
+      // Check if click is outside the referenced element
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handler(event);
+      }
+    }
+
+    // Listen for mousedown events
+    document.addEventListener('mousedown', handleClickOutside);
+
+    // Cleanup listener on unmount or when dependencies change
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [ref, handler, enabled]);
+}

package/extension/popup/hooks/useCopyToClipboard.ts

@@ -0,0 +1,33 @@
+/**
+ * useCopyToClipboard - Copy text to clipboard with state management
+ *
+ * @returns Object with copied state and copyToClipboard function
+ *
+ */
+
+import { useState } from 'react';
+
+interface UseCopyToClipboardReturn {
+  /** Whether text was recently copied (resets after 2 seconds) */
+  copied: boolean;
+  /** Copy text to clipboard */
+  copyToClipboard: (text: string) => Promise<void>;
+}
+
+export function useCopyToClipboard(): UseCopyToClipboardReturn {
+  const [copied, setCopied] = useState(false);
+
+  async function copyToClipboard(text: string) {
+    if (!text) return;
+
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy to clipboard:', err);
+    }
+  }
+
+  return { copied, copyToClipboard };
+}

package/extension/popup/hooks/useFavicon.ts

@@ -0,0 +1,64 @@
+/**
+ * useFavicon - Fetch and cache website favicon
+ *
+ * Attempts to load favicon from origin's /favicon.ico
+ * Falls back to null if not found (triggers letter avatar fallback)
+ *
+ * Note: We intentionally don't use Google's favicon service because
+ * it returns a generic globe icon for unknown sites, which looks worse
+ * than a clean letter avatar.
+ */
+
+import { useState, useEffect } from 'react';
+
+export function useFavicon(origin: string): string | null {
+  const [faviconUrl, setFaviconUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Only fetch for http/https origins
+    if (!origin.startsWith('http://') && !origin.startsWith('https://')) {
+      setFaviconUrl(null);
+      return;
+    }
+
+    let isCancelled = false;
+
+    async function loadFavicon() {
+      try {
+        const url = new URL(origin);
+        const domain = url.origin;
+
+        // Try direct favicon.ico
+        const directFavicon = `${domain}/favicon.ico`;
+
+        // Test if image loads successfully
+        const img = new Image();
+        img.onload = () => {
+          if (!isCancelled) {
+            setFaviconUrl(directFavicon);
+          }
+        };
+        img.onerror = () => {
+          // No favicon found - fall back to null (letter avatar)
+          if (!isCancelled) {
+            setFaviconUrl(null);
+          }
+        };
+        img.src = directFavicon;
+      } catch (err) {
+        // Invalid URL or other error - no favicon
+        if (!isCancelled) {
+          setFaviconUrl(null);
+        }
+      }
+    }
+
+    loadFavicon();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [origin]);
+
+  return faviconUrl;
+}

package/extension/popup/hooks/useNumericInput.ts

@@ -0,0 +1,93 @@
+/**
+ * Custom hook for managing numeric input fields with validation and increment/decrement
+ */
+
+import { useState } from 'react';
+
+interface UseNumericInputOptions {
+  /** Initial value (default: '') */
+  initialValue?: string;
+  /** Minimum allowed value (default: 0) */
+  min?: number;
+  /** Maximum allowed value (default: Infinity) */
+  max?: number;
+  /** Increment/decrement step size (default: 1) */
+  step?: number;
+}
+
+interface UseNumericInputReturn {
+  /** Current input value as string */
+  value: string;
+  /** Set the value directly */
+  setValue: (value: string) => void;
+  /** Handle input change with validation (only allows numeric input) */
+  handleChange: (value: string) => void;
+  /** Increment by step amount */
+  increment: () => void;
+  /** Decrement by step amount */
+  decrement: () => void;
+  /** Get numeric value as number (returns 0 if empty) */
+  numericValue: number;
+}
+
+/**
+ * Hook for managing numeric input with validation and increment/decrement controls
+ *
+ * @example
+ * const amount = useNumericInput({ min: 0, max: 100 });
+ *
+ * <input value={amount.value} onChange={(e) => amount.handleChange(e.target.value)} />
+ * <button onClick={amount.increment}>+</button>
+ * <button onClick={amount.decrement}>-</button>
+ */
+export function useNumericInput(options: UseNumericInputOptions = {}): UseNumericInputReturn {
+  const { initialValue = '', min = 0, max = Infinity, step = 1 } = options;
+
+  const [value, setValue] = useState(initialValue);
+
+  /**
+   * Parse string value to number, defaulting to 0 if empty
+   */
+  const getNumericValue = (val: string): number => {
+    return val === '' ? 0 : parseFloat(val);
+  };
+
+  /**
+   * Validate and set value if it passes numeric regex
+   */
+  const handleChange = (newValue: string) => {
+    // Only allow numbers and decimal point
+    if (newValue === '' || /^\d*\.?\d*$/.test(newValue)) {
+      setValue(newValue);
+    }
+  };
+
+  /**
+   * Increment by step, respecting max constraint
+   */
+  const increment = () => {
+    const current = getNumericValue(value);
+    const newValue = Math.min(current + step, max);
+    setValue(newValue.toString());
+  };
+
+  /**
+   * Decrement by step, respecting min constraint
+   */
+  const decrement = () => {
+    const current = getNumericValue(value);
+    if (current > min) {
+      const newValue = Math.max(current - step, min);
+      setValue(newValue.toString());
+    }
+  };
+
+  return {
+    value,
+    setValue,
+    handleChange,
+    increment,
+    decrement,
+    numericValue: getNumericValue(value),
+  };
+}

package/extension/popup/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Rose</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

package/extension/popup/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Popup entry point: Renders React app
+ */
+
+import { createRoot } from 'react-dom/client';
+import { Popup } from './Popup';
+import { ThemeProvider } from './contexts/ThemeContext';
+
+import './styles.css';
+
+import '@fontsource/lora/400.css';
+import '@fontsource/lora/500.css';
+import '@fontsource/lora/600.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(
+    <ThemeProvider>
+      <Popup />
+    </ThemeProvider>
+  );
+}

package/extension/popup/screens/AboutScreen.tsx

@@ -0,0 +1,118 @@
+import { useStore } from '../store';
+import RoseLogo96 from '../assets/iris-logo-96.svg';
+import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon';
+import { version } from '../../../package-lock.json';
+
+/**
+ * AboutScreen
+ */
+export function AboutScreen() {
+  const { navigate } = useStore();
+
+  function handleBack() {
+    navigate('settings');
+  }
+
+  function handleVisitWebsite() {
+    window.open('https://nocknames.com', '_blank');
+  }
+
+  function handleVisitNockchainWebsite() {
+    window.open('https://nockchain.net', '_blank');
+  }
+
+  function handleVisitNockboxWebsite() {
+    window.open('https://nockbox.org', '_blank');
+  }
+
+  return (
+    <div
+      className="w-[357px] h-[600px] flex flex-col overflow-y-auto font-sans"
+      style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text-primary)' }}
+    >
+      {/* Header */}
+      <header
+        className="flex items-center justify-between px-4 py-3 min-h-[64px]"
+        style={{ backgroundColor: 'var(--color-bg)' }}
+      >
+        <button
+          type="button"
+          onClick={handleBack}
+          aria-label="Back"
+          className="w-8 h-8 p-2 flex items-center justify-center rounded-lg flex-shrink-0 cursor-pointer transition-colors focus:outline-none focus-visible:ring-2"
+          style={{ color: 'var(--color-text-primary)' }}
+          onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')}
+          onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+        >
+          <ChevronLeftIcon className="w-5 h-5" />
+        </button>
+
+        <h1 className="m-0 text-base font-medium leading-[22px] tracking-[0.16px]">About</h1>
+
+        <div className="w-8 h-8 flex-shrink-0" />
+      </header>
+
+      {/* Content */}
+      <div className="flex flex-col items-center gap-6 px-4 py-2 h-[536px]">
+        <div className="w-24 h-24 flex items-center justify-center flex-shrink-0">
+          <img src={RoseLogo96} alt="Rose" className="w-24 h-24" />
+        </div>
+
+        <div className="w-full flex flex-col items-center justify-center gap-1">
+          <p className="m-0 text-base font-medium leading-[22px] tracking-[0.16px] text-center">
+            Rose Version {version}
+          </p>
+        </div>
+
+        <div className="w-full h-px" style={{ backgroundColor: 'var(--color-divider)' }} />
+
+        <div className="w-full flex flex-col gap-3">
+          <h2
+            className="m-0 text-sm font-medium leading-[18px] tracking-[0.14px]"
+            style={{ color: 'var(--color-text-muted)' }}
+          >
+            Links
+          </h2>
+
+          <div className="w-full flex flex-col gap-4">
+            <button
+              type="button"
+              onClick={handleVisitWebsite}
+              className="text-left bg-transparent p-0 text-base font-medium leading-[22px] tracking-[0.16px] underline underline-offset-2 transition-opacity hover:opacity-70 focus:outline-none focus-visible:ring-2"
+            >
+              nocknames.com
+            </button>
+            <button
+              type="button"
+              onClick={handleVisitNockchainWebsite}
+              className="text-left bg-transparent p-0 text-base font-medium leading-[22px] tracking-[0.16px] underline underline-offset-2 transition-opacity hover:opacity-70 focus:outline-none focus-visible:ring-2"
+            >
+              Copyright (c) 2026 nockchain.net LLC oss@nockchain.net
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                window.open(
+                  'https://raw.githubusercontent.com/nockbox/iris/refs/heads/main/LICENSE',
+                  '_blank'
+                )
+              }
+              className="text-left bg-transparent p-0 text-base font-medium leading-[22px] tracking-[0.16px] underline underline-offset-2 transition-opacity hover:opacity-70 focus:outline-none focus-visible:ring-2"
+            >
+              Copyright (c) 2025 NockBox inc. tech@nockbox.org
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                window.open('https://www.vecteezy.com/free-vector/simple-rose', '_blank')
+              }
+              className="text-left bg-transparent p-0 text-base font-medium leading-[22px] tracking-[0.16px] underline underline-offset-2 transition-opacity hover:opacity-70 focus:outline-none focus-visible:ring-2"
+            >
+              Simple Rose Vectors by Vecteezy
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/extension/popup/screens/HomeScreen.tailwind.css

@@ -0,0 +1,85 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+:root {
+  --header-h: 120px;
+}
+
+/* fallback if JS measuring fails */
+
+/* Optional nicer scrollbar inside the popup */
+.scroll-thin::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scroll-thin::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+}
+
+/* Wallet dropdown hover effect - show settings icon on hover */
+.wallet-dropdown-item .wallet-balance {
+  display: block;
+}
+
+.wallet-dropdown-item .wallet-settings-icon {
+  display: none;
+}
+
+.wallet-dropdown-item:hover {
+  background-color: var(--color-surface-900);
+}
+
+.wallet-dropdown-item:hover .wallet-balance {
+  display: none;
+}
+
+.wallet-dropdown-item:hover .wallet-settings-icon {
+  display: flex;
+}
+
+/* Shimmer loading animation */
+@keyframes shimmer {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}
+
+/* Dark mode skeleton (default) */
+.skeleton-shimmer {
+  animation: shimmer 10s linear infinite;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0.05) 0%,
+    rgba(255, 255, 255, 0.12) 20%,
+    rgba(255, 255, 255, 0.18) 40%,
+    rgba(255, 255, 255, 0.12) 60%,
+    rgba(255, 255, 255, 0.05) 80%,
+    rgba(255, 255, 255, 0.05) 100%
+  );
+  background-size: 800px 100px;
+}
+
+/* Light mode skeleton */
+.light .skeleton-shimmer {
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.08) 0%,
+    rgba(0, 0, 0, 0.15) 20%,
+    rgba(0, 0, 0, 0.2) 40%,
+    rgba(0, 0, 0, 0.15) 60%,
+    rgba(0, 0, 0, 0.08) 80%,
+    rgba(0, 0, 0, 0.08) 100%
+  );
+}