@nockchain/rose 0.1.4-nightly.5

package/extension/popup/components/SiteIcon.tsx

@@ -0,0 +1,60 @@
+/**
+ * SiteIcon - Display site favicon with fallback to letter avatar
+ */
+
+import { useFavicon } from '../hooks/useFavicon';
+
+interface SiteIconProps {
+  origin: string;
+  domain: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function SiteIcon({ origin, domain, size = 'lg' }: SiteIconProps) {
+  const faviconUrl = useFavicon(origin);
+
+  // Size mappings
+  const sizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16',
+  };
+
+  const textSizes = {
+    sm: 'text-lg',
+    md: 'text-xl',
+    lg: 'text-2xl',
+  };
+
+  const surface = 'var(--color-surface-800)';
+  const textPrimary = 'var(--color-text-primary)';
+
+  return (
+    <div className="relative inline-block">
+      <div
+        className={`inline-flex items-center justify-center rounded-full ${sizeClasses[size]} overflow-hidden`}
+        style={{ backgroundColor: surface }}
+      >
+        {faviconUrl ? (
+          <img
+            src={faviconUrl}
+            alt={`${domain} favicon`}
+            className="w-full h-full object-cover"
+            onError={e => {
+              // Hide broken image, show letter fallback
+              e.currentTarget.style.display = 'none';
+              const parent = e.currentTarget.parentElement;
+              if (parent) {
+                parent.innerHTML = `<span class="${textSizes[size]} font-bold" style="color: ${textPrimary}">${domain.charAt(0).toUpperCase()}</span>`;
+              }
+            }}
+          />
+        ) : (
+          <span className={`${textSizes[size]} font-bold`} style={{ color: textPrimary }}>
+            {domain.charAt(0).toUpperCase()}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/extension/popup/components/ThemeToggle.tsx

@@ -0,0 +1,44 @@
+/**
+ * Theme Toggle Component
+ * Allows users to switch between dark and light modes
+ */
+
+import { useTheme } from '../contexts/ThemeContext';
+
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors"
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+    >
+      {theme === 'dark' ? (
+        <>
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+            />
+          </svg>
+          <span className="text-sm">Light Mode</span>
+        </>
+      ) : (
+        <>
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+            />
+          </svg>
+          <span className="text-sm">Dark Mode</span>
+        </>
+      )}
+    </button>
+  );
+}

package/extension/popup/components/icons/ArrowDownLeftIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * ArrowDownLeftIcon - Incoming/received transaction icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function ArrowDownLeftIcon({ className = 'w-6 h-6' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M17 7L7 17M7 17H17M7 17V7"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/ArrowUpRightIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * ArrowUpRightIcon - Simple diagonal arrow pointing up-right
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function ArrowUpRightIcon({ className = 'w-6 h-6' }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 11 11"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M1.16667 10.8333L9.16667 2.83333L9.16667 10L10.8333 10V0H0.833333L0.833334 1.66667H8L0 9.66667L1.16667 10.8333Z" />
+    </svg>
+  );
+}

package/extension/popup/components/icons/CheckIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * CheckIcon - Success/checkmark icon
+ */
+
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function CheckIcon({ className = 'w-5 h-5', style }: IconProps) {
+  return (
+    <svg className={className} style={style} viewBox="0 0 20 20" fill="currentColor">
+      <path
+        fillRule="evenodd"
+        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/ChevronDownIcon.tsx

@@ -0,0 +1,15 @@
+/**
+ * ChevronDownIcon - Dropdown arrow icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function ChevronDownIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+}

package/extension/popup/components/icons/ChevronLeftIcon.tsx

@@ -0,0 +1,15 @@
+/**
+ * ChevronLeftIcon - Back/left arrow icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function ChevronLeftIcon({ className = 'w-6 h-6' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+    </svg>
+  );
+}

package/extension/popup/components/icons/ChevronRightIcon.tsx

@@ -0,0 +1,15 @@
+/**
+ * ChevronRightIcon - Right arrow icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function ChevronRightIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+    </svg>
+  );
+}

package/extension/popup/components/icons/ChevronUpIcon.tsx

@@ -0,0 +1,15 @@
+/**
+ * ChevronUpIcon - Up arrow icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function ChevronUpIcon({ className = 'w-6 h-6' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+    </svg>
+  );
+}

package/extension/popup/components/icons/CloseIcon.tsx

@@ -0,0 +1,26 @@
+/**
+ * CloseIcon - Close/X icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function CloseIcon({ className = '' }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+    >
+      <path
+        d="M14.4141 3L9.41406 8L14.4141 13L13 14.4141L8 9.41406L3 14.4141L1.58594 13L6.58594 8L1.58594 3L3 1.58594L8 6.58594L13 1.58594L14.4141 3Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/CopyIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * CopyIcon - Copy to clipboard icon (overlapping documents)
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function CopyIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/EditIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * EditIcon - Edit/pencil icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function EditIcon({ className = 'w-4 h-4' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/EyeIcon.tsx

@@ -0,0 +1,13 @@
+import EyeOpenIconSvg from '../../assets/eye-open-icon.svg';
+
+/**
+ * EyeIcon - View/show icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function EyeIcon({ className = 'w-4 h-4' }: IconProps) {
+  return <img src={EyeOpenIconSvg} alt="" className={className} />;
+}

package/extension/popup/components/icons/EyeOffIcon.tsx

@@ -0,0 +1,13 @@
+import EyeOffIconSvg from '../../assets/eye-off-icon.svg';
+
+/**
+ * EyeOffIcon - Hide/conceal icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function EyeOffIcon({ className = 'w-4 h-4' }: IconProps) {
+  return <img src={EyeOffIconSvg} alt="" className={className} />;
+}

package/extension/popup/components/icons/InfoIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * InfoIcon - Information icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function InfoIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/LockIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * LockIcon - Lock/security icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function LockIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/PlusIcon.tsx

@@ -0,0 +1,15 @@
+/**
+ * PlusIcon - Add/create new icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function PlusIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+    </svg>
+  );
+}

package/extension/popup/components/icons/ReceiveArrowIcon.tsx

@@ -0,0 +1,14 @@
+/**
+ * ReceiveArrowIcon
+ */
+
+import ArrowDownIcon from '../../assets/arrow-down-icon.svg';
+
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function ReceiveArrowIcon({ className = 'w-4 h-4', style }: IconProps) {
+  return <img src={ArrowDownIcon} alt="" className={className} style={style} />;
+}

package/extension/popup/components/icons/ReceiveCircleIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * ReceiveCircleIcon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function ReceiveCircleIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM10 5.8252C9.53884 5.8252 9.16504 6.199 9.16504 6.66016V11.3232L7.25098 9.40918C6.92489 9.08309 6.39542 9.08309 6.06934 9.40918C5.74325 9.73527 5.74325 10.2647 6.06934 10.5908L9.40918 13.9307C9.73527 14.2568 10.2647 14.2568 10.5908 13.9307L13.9307 10.5908C14.2568 10.2647 14.2568 9.73527 13.9307 9.40918C13.6046 9.08309 13.0751 9.08309 12.749 9.40918L10.835 11.3232V6.66016C10.835 6.199 10.4612 5.8252 10 5.8252Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/SendPaperPlaneIcon.tsx

@@ -0,0 +1,18 @@
+/**
+ * SendPaperPlaneIcon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function SendPaperPlaneIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0.682286 6.74231C-0.228035 6.43728 -0.227221 5.14941 0.683484 4.84554L15.0466 0.0529811C15.8097 -0.201652 16.5459 0.503244 16.3245 1.27669L12.1665 15.8069C11.9098 16.7041 10.673 16.7918 10.2922 15.9399L8.02397 10.8654C7.87575 10.5338 7.91899 10.1479 8.13692 9.85734L9.0263 8.6715C9.72014 7.74639 8.55142 6.57766 7.6263 7.2715L6.38962 8.19901C6.12666 8.39623 5.78358 8.45163 5.47191 8.3472L0.682286 6.74231Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/SentArrowIcon.tsx

@@ -0,0 +1,21 @@
+/**
+ * SentArrowIcon
+ */
+
+import ArrowUpIcon from '../../assets/arrow-up-icon.svg';
+
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function SentArrowIcon({ className = 'w-4 h-4', style }: IconProps) {
+  return (
+    <div
+      className={className}
+      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', ...style }}
+    >
+      <img src={ArrowUpIcon} alt="" style={{ width: '68%', height: '68%' }} />
+    </div>
+  );
+}

package/extension/popup/components/icons/SettingsIcon.tsx

@@ -0,0 +1,26 @@
+/**
+ * SettingsIcon - Gear/settings icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function SettingsIcon({ className = 'w-6 h-6' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/ShieldIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * ShieldIcon - Security/protection icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function ShieldIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/UploadIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * UploadIcon - Import/upload icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function UploadIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+      />
+    </svg>
+  );
+}

package/extension/popup/components/icons/WalletIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * WalletIcon - Wallet/card icon
+ */
+
+interface IconProps {
+  className?: string;
+}
+
+export function WalletIcon({ className = 'w-5 h-5' }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+      />
+    </svg>
+  );
+}

package/extension/popup/contexts/ThemeContext.tsx

@@ -0,0 +1,105 @@
+/**
+ * Theme Context - Manages dark/light mode switching with system theme support
+ */
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'rose-theme';
+
+// Detect system theme preference
+function getSystemTheme(): 'dark' | 'light' {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>('light');
+  const [mounted, setMounted] = useState(false);
+
+  // Load theme from storage on mount
+  useEffect(() => {
+    chrome.storage.local.get([STORAGE_KEY], result => {
+      const savedTheme = result[STORAGE_KEY] as Theme | undefined;
+      if (savedTheme) {
+        setThemeState(savedTheme);
+        applyTheme(savedTheme);
+      } else {
+        // No saved theme, default to light theme
+        setThemeState('light');
+        applyTheme('light');
+        chrome.storage.local.set({ [STORAGE_KEY]: 'light' });
+      }
+      setMounted(true);
+    });
+  }, []);
+
+  // Listen for system theme changes when using system theme
+  useEffect(() => {
+    if (theme !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      applyTheme('system');
+    };
+
+    // Modern browsers
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [theme]);
+
+  // Apply theme to document
+  const applyTheme = (newTheme: Theme) => {
+    const root = document.documentElement;
+    const effectiveTheme = newTheme === 'system' ? getSystemTheme() : newTheme;
+
+    if (effectiveTheme === 'light') {
+      root.classList.add('light');
+    } else {
+      root.classList.remove('light');
+    }
+  };
+
+  // Set theme and persist
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    applyTheme(newTheme);
+    chrome.storage.local.set({ [STORAGE_KEY]: newTheme });
+  };
+
+  // Toggle between dark and light (skip system)
+  const toggleTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+  };
+
+  // Prevent flash of wrong theme
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+}