@nockchain/rose 0.1.4-nightly.5

package/extension/popup/screens/SendSubmittedScreen.tsx

@@ -0,0 +1,193 @@
+import { useStore } from '../store';
+import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon';
+import { SendPaperPlaneIcon } from '../components/icons/SendPaperPlaneIcon';
+import { PlusIcon } from '../components/icons/PlusIcon';
+
+export function SendSubmittedScreen() {
+  const { navigate, lastTransaction, priceUsd } = useStore();
+
+  function handleBack() {
+    navigate('home');
+  }
+  function handleViewActivity() {
+    navigate('home'); // show transactions on home
+  }
+
+  // Dev function: Download transaction protobuf for debugging
+  function handleDownloadTx() {
+    if (!lastTransaction?.protobufTx) {
+      console.warn('[SendSubmitted] No transaction data available to download');
+      return;
+    }
+
+    try {
+      // Convert protobuf object to JSON string
+      const txJson = JSON.stringify(lastTransaction.protobufTx, null, 2);
+      const blob = new Blob([txJson], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `tx-${lastTransaction.txid || 'unsigned'}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('[SendSubmitted] Failed to download transaction:', err);
+    }
+  }
+
+  // Get real transaction data
+  const sentAmount =
+    lastTransaction?.amount.toLocaleString('en-US', {
+      maximumFractionDigits: 0,
+    }) || '0';
+
+  // Calculate USD value based on amount and current price
+  const amountInNock = lastTransaction?.amount || 0;
+  const usdValue = amountInNock * priceUsd;
+  const sentUsdValue =
+    usdValue > 0
+      ? `$${usdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+      : '$0.00';
+
+  return (
+    <div
+      className="w-[357px] h-[600px] flex flex-col"
+      style={{ backgroundColor: 'var(--color-bg)' }}
+    >
+      {/* 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 rounded-lg flex items-center justify-center hover:opacity-70 transition-opacity"
+          style={{ color: 'var(--color-text-primary)' }}
+        >
+          <ChevronLeftIcon className="w-5 h-5" />
+        </button>
+        <h1
+          className="m-0 text-base font-medium leading-[22px] tracking-[0.16px]"
+          style={{ color: 'var(--color-text-primary)' }}
+        >
+          Submitted
+        </h1>
+        <div className="w-8 h-8" />
+      </header>
+
+      {/* Content */}
+      <div className="flex flex-col h-[536px]" style={{ backgroundColor: 'var(--color-bg)' }}>
+        <div className="flex flex-col gap-8 px-4 py-2 flex-1">
+          {/* Success Section */}
+          <div className="flex flex-col items-center gap-3 w-full">
+            <div
+              className="w-10 h-10 flex items-center justify-center"
+              style={{ color: 'var(--color-primary)' }}
+            >
+              <SendPaperPlaneIcon className="w-10 h-10" />
+            </div>
+            <div className="flex flex-col items-center gap-2 w-full text-center">
+              <h2
+                className="m-0 font-[Lora] text-2xl font-medium leading-7 tracking-[-0.48px]"
+                style={{ color: 'var(--color-text-primary)' }}
+              >
+                Your transaction
+                <br />
+                was submitted
+              </h2>
+              <p
+                className="m-0 text-[13px] leading-[18px] tracking-[0.26px]"
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                Check the transaction activity below
+              </p>
+            </div>
+          </div>
+
+          {/* Transaction Summary */}
+          <div className="flex flex-col gap-2 w-full">
+            <div
+              className="rounded-lg p-3 flex items-start justify-between gap-2.5"
+              style={{ backgroundColor: 'var(--color-surface-900)' }}
+            >
+              <div
+                className="text-sm font-medium leading-[18px] tracking-[0.14px]"
+                style={{ color: 'var(--color-text-primary)' }}
+              >
+                You sent
+              </div>
+              <div className="flex flex-col items-end gap-1 text-right">
+                <div
+                  className="text-sm font-medium leading-[18px] tracking-[0.14px] whitespace-nowrap"
+                  style={{ color: 'var(--color-text-primary)' }}
+                >
+                  {sentAmount} NOCK
+                </div>
+                <div
+                  className="text-[13px] leading-[18px] tracking-[0.26px]"
+                  style={{ color: 'var(--color-text-muted)' }}
+                >
+                  {sentUsdValue}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Activity Log Button (commented out - not in use) */}
+        {/* <div className="px-4 pb-2">
+          <button
+            type="button"
+            onClick={handleViewActivity}
+            className="w-full rounded-lg p-3 flex items-center justify-between transition-opacity hover:opacity-80"
+            style={{ backgroundColor: 'var(--color-surface-800)' }}
+          >
+            <span
+              className="text-sm font-medium leading-[18px] tracking-[0.14px]"
+              style={{ color: 'var(--color-text-primary)' }}
+            >
+              Activity log
+            </span>
+            <PlusIcon className="w-4 h-4" />
+          </button>
+        </div> */}
+
+        {/* DEV: Download transaction button */}
+        {/* {lastTransaction?.protobufTx && (
+          <div className="px-4 pb-2">
+            <button
+              type="button"
+              onClick={handleDownloadTx}
+              className="w-full rounded-lg p-3 flex items-center justify-center transition-opacity hover:opacity-80"
+              style={{ backgroundColor: 'var(--color-surface-800)' }}
+            >
+              <span
+                className="text-sm font-medium leading-[18px] tracking-[0.14px]"
+                style={{ color: 'var(--color-text-primary)' }}
+              >
+                Download Transaction (Dev)
+              </span>
+            </button>
+          </div>
+        )} */}
+
+        {/* Action Buttons */}
+        <div className="flex gap-3 px-4 py-3 w-full">
+          <button
+            type="button"
+            onClick={handleViewActivity}
+            className="flex-1 h-12 inline-flex items-center justify-center rounded-lg text-sm font-medium leading-[18px] tracking-[0.14px] transition-opacity hover:opacity-90 active:opacity-80"
+            style={{
+              color: 'var(--color-bg)',
+              backgroundColor: 'var(--color-text-primary)',
+            }}
+          >
+            Back to overview
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/extension/popup/screens/SettingsScreen.tsx

@@ -0,0 +1,116 @@
+import { useStore } from '../store';
+import RoseLogo from '../assets/iris-logo.svg';
+import ThemeIcon from '../assets/theme-icon.svg';
+import KeyIcon from '../assets/key-icon.svg';
+import ClockIcon from '../assets/clock-icon.svg';
+import { CloseIcon } from '../components/icons/CloseIcon';
+import { ChevronRightIcon } from '../components/icons/ChevronRightIcon';
+import AboutIcon from '../assets/settings-gear-icon.svg';
+import { version } from '../../../package-lock.json';
+
+export function SettingsScreen() {
+  const { navigate } = useStore();
+
+  function handleClose() {
+    navigate('home');
+  }
+  function handleThemeSettings() {
+    navigate('theme-settings');
+  }
+  function handleKeySettings() {
+    navigate('key-settings');
+  }
+  function handleLockTime() {
+    navigate('lock-time');
+  }
+  function handleV0Migration() {
+    navigate('onboarding-import-v0');
+  }
+  function handleAbout() {
+    navigate('about');
+  }
+
+  const Row = ({ icon, label, onClick }: { icon: string; label: string; onClick: () => void }) => (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex items-center justify-between p-2 rounded-lg transition-colors focus:outline-none focus-visible:ring-2"
+      onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')}
+      onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+    >
+      <div className="flex items-center gap-2.5 flex-1">
+        <div
+          className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
+          style={{ backgroundColor: 'var(--color-surface-800)' }}
+        >
+          <img src={icon} alt="" className="w-5 h-5 object-contain" />
+        </div>
+        <span
+          className="text-sm font-medium leading-[18px] tracking-[0.14px]"
+          style={{ color: 'var(--color-text-primary)' }}
+        >
+          {label}
+        </span>
+      </div>
+      <div className="w-4 h-4 p-1 shrink-0">
+        <ChevronRightIcon className="w-4 h-4" />
+      </div>
+    </button>
+  );
+
+  return (
+    <div
+      className="w-[357px] h-[600px] flex flex-col overflow-y-auto"
+      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)' }}
+      >
+        <div className="w-8 h-8 flex items-center justify-center shrink-0">
+          <img src={RoseLogo} alt="Rose" className="w-6 h-6" />
+        </div>
+        <h1 className="m-0 text-base font-medium leading-[22px] tracking-[0.16px]">Settings</h1>
+        <button
+          type="button"
+          onClick={handleClose}
+          aria-label="Close"
+          className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors focus:outline-none focus-visible:ring-2 shrink-0"
+          style={{ color: 'var(--color-text-primary)' }}
+          onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')}
+          onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+        >
+          <CloseIcon />
+        </button>
+      </header>
+
+      {/* Content */}
+      <div className="flex flex-col justify-between flex-1 h-[536px]">
+        {/* Menu */}
+        <div className="flex flex-col gap-2 px-3 py-2">
+          {/* <Row icon={ThemeIcon} label="Theme settings" onClick={handleThemeSettings} /> */}
+          <Row icon={KeyIcon} label="Key settings" onClick={handleKeySettings} />
+          <Row icon={ClockIcon} label="Lock time" onClick={handleLockTime} />
+          <Row icon={KeyIcon} label="Upgrade v0 → v1" onClick={handleV0Migration} />
+          <Row icon={AboutIcon} label="About" onClick={handleAbout} />
+        </div>
+
+        {/* Footer */}
+        <div className="px-4">
+          <div
+            className="flex flex-col items-center justify-center gap-2 py-4"
+            style={{ borderTop: '1px solid var(--color-divider)' }}
+          >
+            <p
+              className="m-0 text-[12px] leading-4 tracking-[0.24px] text-center"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
+              Version {version}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/extension/popup/screens/ThemeSettingsScreen.tsx

@@ -0,0 +1,107 @@
+import { useStore } from '../store';
+import { useTheme } from '../contexts/ThemeContext';
+import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon';
+
+export function ThemeSettingsScreen() {
+  const { navigate } = useStore();
+  const { theme, setTheme } = useTheme();
+
+  function handleBack() {
+    navigate('settings');
+  }
+  function handleThemeSelect(newTheme: 'light' | 'dark' | 'system') {
+    setTheme(newTheme);
+  }
+
+  const Option = ({
+    label,
+    selected,
+    onClick,
+    disabled = false,
+  }: {
+    label: string;
+    selected?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+  }) => (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={`flex items-center justify-between p-3 rounded-lg transition-colors text-left w-full focus:outline-none focus-visible:ring-2 ${
+        disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'
+      }`}
+      style={{
+        backgroundColor: disabled ? 'transparent' : 'transparent',
+      }}
+      onMouseEnter={e => {
+        if (!disabled) {
+          e.currentTarget.style.backgroundColor = 'var(--color-surface-800)';
+        }
+      }}
+      onMouseLeave={e => {
+        e.currentTarget.style.backgroundColor = 'transparent';
+      }}
+      role="radio"
+      aria-checked={!!selected}
+    >
+      <span className="text-sm font-medium leading-[18px] tracking-[0.14px] flex-1">{label}</span>
+      <span
+        className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 transition-all"
+        style={{
+          border: `1px solid ${selected ? 'var(--color-primary)' : 'var(--color-surface-700)'}`,
+          backgroundColor: selected ? 'var(--color-primary)' : 'var(--color-bg)',
+        }}
+      >
+        {selected && <span className="w-3 h-3 rounded-full" style={{ backgroundColor: '#000' }} />}
+      </span>
+    </button>
+  );
+
+  return (
+    <div
+      className="w-[357px] h-[600px] flex flex-col overflow-y-auto"
+      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 bg-transparent rounded-lg p-2 flex items-center justify-center shrink-0 transition-colors focus:outline-none focus-visible:ring-2"
+          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]">
+          Theme settings
+        </h1>
+        <div className="w-8 h-8 shrink-0" />
+      </header>
+
+      {/* Options */}
+      <div className="flex flex-col gap-2 px-3 py-2" role="radiogroup" aria-label="Theme">
+        <Option
+          label="Light"
+          selected={theme === 'light'}
+          onClick={() => handleThemeSelect('light')}
+        />
+        <Option
+          label="Dark"
+          selected={theme === 'dark'}
+          onClick={() => handleThemeSelect('dark')}
+        />
+        <Option
+          label="System"
+          selected={theme === 'system'}
+          onClick={() => handleThemeSelect('system')}
+        />
+      </div>
+    </div>
+  );
+}