@nockchain/rose 0.1.4-nightly.5

package/extension/popup/screens/KeySettingsPasswordScreen.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { useStore } from '../store';
+import { send } from '../utils/messaging';
+import { INTERNAL_METHODS } from '../../shared/constants';
+import RoseLogo96 from '../assets/iris-logo-96.svg';
+import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon';
+import { EyeIcon } from '../components/icons/EyeIcon';
+import { EyeOffIcon } from '../components/icons/EyeOffIcon';
+import { formatWalletError } from '../utils/formatWalletError';
+
+export function KeySettingsPasswordScreen() {
+  const { navigate, setOnboardingMnemonic } = useStore();
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  function handleBack() {
+    navigate('settings');
+  }
+
+  async function handleConfirm() {
+    if (!password) {
+      setError('Please enter your password');
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const result = await send<{ ok?: boolean; mnemonic?: string; error?: string }>(
+        INTERNAL_METHODS.GET_MNEMONIC,
+        [password]
+      );
+
+      if (result?.error) {
+        setError(formatWalletError(result.error));
+        setPassword('');
+      } else if (result?.mnemonic) {
+        // Store mnemonic temporarily for viewing
+        setOnboardingMnemonic(result.mnemonic);
+        navigate('view-secret-phrase');
+      }
+    } catch (err) {
+      setError('Failed to retrieve secret phrase');
+      console.error('Failed to get mnemonic:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  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 p-2 flex items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2"
+          style={{ backgroundColor: 'transparent', 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]">Key settings</h1>
+        <div className="w-8 h-8" />
+      </header>
+
+      <div className="flex flex-1 flex-col justify-between px-4 py-8">
+        {/* Content */}
+        <div className="flex flex-col items-center gap-3 w-full">
+          <img src={RoseLogo96} alt="Rose" className="w-24 h-24" />
+
+          <p
+            className="m-0 text-[13px] leading-[18px] tracking-[0.26px] text-center"
+            style={{ color: 'var(--color-text-muted)' }}
+          >
+            Please re-enter your password to see your keys
+          </p>
+        </div>
+
+        {/* Form */}
+        <div className="flex flex-col gap-4 w-full mt-8">
+          <div className="flex flex-col gap-[6px] w-full">
+            <label className="text-[13px] leading-[18px] tracking-[0.26px] font-medium">
+              Password
+            </label>
+
+            <div className="relative w-full">
+              <input
+                type={showPassword ? 'text' : 'password'}
+                className="w-full h-[52px] bg-transparent rounded-lg pl-3 pr-10 py-4 outline-none transition-colors text-sm leading-[18px] tracking-[0.14px] font-medium"
+                style={{
+                  border: '1px solid var(--color-surface-700)',
+                  color: 'var(--color-text-primary)',
+                }}
+                placeholder="Enter your password"
+                value={password}
+                onChange={e => {
+                  setPassword(e.target.value);
+                  setError('');
+                }}
+                onKeyDown={e => {
+                  if (e.key === 'Enter') handleConfirm();
+                }}
+                onFocus={e => (e.currentTarget.style.borderColor = 'var(--color-primary)')}
+                onBlur={e => (e.currentTarget.style.borderColor = 'var(--color-surface-700)')}
+                disabled={isLoading}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-1 flex items-center justify-center transition-colors"
+                style={{ color: 'var(--color-text-muted)' }}
+                onMouseEnter={e => (e.currentTarget.style.color = 'var(--color-text-primary)')}
+                onMouseLeave={e => (e.currentTarget.style.color = 'var(--color-text-muted)')}
+                aria-label={showPassword ? 'Hide password' : 'Show password'}
+              >
+                {showPassword ? (
+                  <EyeIcon className="w-4 h-4" />
+                ) : (
+                  <EyeOffIcon className="w-4 h-4" />
+                )}
+              </button>
+            </div>
+
+            {error && (
+              <p className="text-xs" style={{ color: 'var(--color-red)' }}>
+                {error}
+              </p>
+            )}
+          </div>
+
+          <button
+            onClick={handleConfirm}
+            disabled={isLoading}
+            className="w-full h-12 rounded-lg text-sm font-medium leading-[18px] tracking-[0.14px] transition-opacity hover:opacity-90 active:opacity-80 disabled:opacity-50"
+            style={{ backgroundColor: 'var(--color-primary)', color: '#000' }}
+          >
+            {isLoading ? 'Verifying...' : 'Confirm'}
+          </button>
+        </div>
+
+        {/* Warning */}
+        <p
+          className="m-0 text-[13px] leading-[18px] tracking-[0.26px] text-center"
+          style={{ color: 'var(--color-text-muted)' }}
+        >
+          Warning: Never disclose this key. Anyone with your private keys can steal any assets held
+          in your account.
+        </p>
+      </div>
+    </div>
+  );
+}

package/extension/popup/screens/LockTimeScreen.tsx

@@ -0,0 +1,155 @@
+import { useState, useEffect } from 'react';
+import { useStore } from '../store';
+import { send } from '../utils/messaging';
+import { INTERNAL_METHODS } from '../../shared/constants';
+import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon';
+
+type LockTimeOption = '1min' | '5min' | '10min' | '15min' | '30min' | '1hour' | '4hours' | 'never';
+
+// Conversion helpers
+function minutesToOption(minutes: number): LockTimeOption {
+  if (minutes === 1) return '1min';
+  if (minutes === 5) return '5min';
+  if (minutes === 10) return '10min';
+  if (minutes === 15) return '15min';
+  if (minutes === 30) return '30min';
+  if (minutes === 60) return '1hour';
+  if (minutes === 240) return '4hours';
+  if (minutes === 0) return 'never';
+  return '15min'; // default
+}
+
+function optionToMinutes(option: LockTimeOption): number {
+  switch (option) {
+    case '1min':
+      return 1;
+    case '5min':
+      return 5;
+    case '10min':
+      return 10;
+    case '15min':
+      return 15;
+    case '30min':
+      return 30;
+    case '1hour':
+      return 60;
+    case '4hours':
+      return 240;
+    case 'never':
+      return 0;
+    default:
+      return 15;
+  }
+}
+
+/**
+ * LockTimeScreen - Lock time settings screen
+ * Allows users to set the auto-lock timeout duration
+ */
+export function LockTimeScreen() {
+  const { navigate } = useStore();
+  const [selectedTime, setSelectedTime] = useState<LockTimeOption>('15min');
+
+  // Load current lock time setting on mount
+  useEffect(() => {
+    (async () => {
+      const result = await send<{ minutes?: number }>(INTERNAL_METHODS.GET_AUTO_LOCK);
+      if (result?.minutes !== undefined) {
+        setSelectedTime(minutesToOption(result.minutes));
+      }
+    })();
+  }, []);
+
+  function handleBack() {
+    navigate('settings');
+  }
+
+  async function handleTimeSelect(time: LockTimeOption) {
+    setSelectedTime(time);
+
+    // Convert to minutes and persist to backend
+    const minutes = optionToMinutes(time);
+    await send(INTERNAL_METHODS.SET_AUTO_LOCK, [minutes]);
+  }
+
+  const timeOptions: { value: LockTimeOption; label: string }[] = [
+    { value: '1min', label: '1 minute' },
+    { value: '5min', label: '5 minutes' },
+    { value: '10min', label: '10 minutes' },
+    { value: '15min', label: '15 minutes' },
+    { value: '30min', label: '30 minutes' },
+    { value: '1hour', label: '1 hour' },
+    { value: '4hours', label: '4 hours' },
+    { value: 'never', label: 'Never' },
+  ];
+
+  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 p-2 flex items-center justify-center rounded-lg 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]">Lock time</h1>
+
+        <div className="w-8 h-8" />
+      </header>
+
+      {/* Time Options */}
+      <div className="flex flex-col gap-2 px-3 py-2">
+        {timeOptions.map(option => {
+          const selected = selectedTime === option.value;
+          return (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => handleTimeSelect(option.value)}
+              className="flex items-center justify-between p-3 rounded-lg text-left 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')}
+              role="radio"
+              aria-checked={selected}
+            >
+              <span className="text-sm font-medium leading-[18px] tracking-[0.14px]">
+                {option.label}
+              </span>
+
+              {/* Radio */}
+              <span
+                className="w-5 h-5 rounded-full flex items-center justify-center transition-colors"
+                style={{
+                  border: `2px solid ${selected ? 'var(--color-primary)' : 'var(--color-surface-700)'}`,
+                }}
+                aria-hidden="true"
+              >
+                {selected && (
+                  <span
+                    className="w-2.5 h-2.5 rounded-full"
+                    style={{ backgroundColor: 'var(--color-primary)' }}
+                  />
+                )}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/extension/popup/screens/ReceiveScreen.tsx

@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import { useStore } from '../store';
+import RoseLogo40 from '../assets/iris-logo-40.svg';
+import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon';
+
+export function ReceiveScreen() {
+  const { navigate, wallet } = useStore();
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  // Get address from current account
+  const address = wallet.currentAccount?.address || wallet.address || '';
+  const addressStart = address.slice(0, 6);
+  const addressMiddle = address.slice(6, -5);
+  const addressEnd = address.slice(-5);
+
+  function handleBack() {
+    navigate('home');
+  }
+
+  async function handleCopyAddress() {
+    try {
+      await navigator.clipboard.writeText(address);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy address:', err);
+    }
+  }
+
+  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 p-2 flex items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2"
+          style={{ backgroundColor: 'transparent' }}
+          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]">Receive NOCK</h1>
+        <div className="w-8 h-8" />
+      </header>
+
+      {/* Content */}
+      <div className="flex flex-col gap-2 h-[536px]" style={{ backgroundColor: 'var(--color-bg)' }}>
+        <div className="flex flex-col gap-8 px-4 py-2">
+          {/* Intro */}
+          <div className="flex flex-col items-center gap-3 w-full">
+            <img src={RoseLogo40} alt="Rose" className="w-10 h-10" />
+
+            <h2
+              className="m-0 text-2xl font-medium leading-7 tracking-[-0.48px] text-center font-display"
+              style={{ color: 'var(--color-text-primary)' }}
+            >
+              Your address
+            </h2>
+          </div>
+
+          {/* Address + Copy */}
+          <div className="flex flex-col gap-4 w-full">
+            <div
+              className="rounded-lg px-3 pt-5 pb-3 flex flex-col items-center gap-5"
+              style={{ backgroundColor: 'var(--color-surface-800)' }}
+            >
+              <div className="text-sm leading-[18px] tracking-[0.14px] font-medium text-center break-words">
+                <span style={{ color: 'var(--color-text-primary)' }}>{addressStart}</span>
+                <span style={{ color: 'var(--color-text-muted)' }}>
+                  {addressMiddle.substring(0, 18)}
+                </span>
+                <br />
+                <span style={{ color: 'var(--color-text-muted)' }}>
+                  {addressMiddle.substring(18)}
+                </span>
+                <span style={{ color: 'var(--color-text-primary)' }}>{addressEnd}</span>
+              </div>
+
+              <button
+                type="button"
+                onClick={handleCopyAddress}
+                className="inline-flex items-center justify-center gap-[6px] py-[7px] pr-3 pl-4 bg-transparent rounded-full text-sm font-medium leading-[18px] tracking-[0.14px] transition active:opacity-80 focus:outline-none focus-visible:ring-2"
+                style={{
+                  border: '1px solid var(--color-text-primary)',
+                  color: 'var(--color-text-primary)',
+                }}
+                onMouseEnter={e =>
+                  (e.currentTarget.style.backgroundColor = 'var(--color-surface-700)')
+                }
+                onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="shrink-0"
+                >
+                  <path
+                    d="M10.6667 1.33334H2.66667C1.93334 1.33334 1.34 1.93334 1.34 2.66667L1.33334 11.3333C1.33334 12.0667 1.92667 12.6667 2.66 12.6667H10.6667C11.4 12.6667 12 12.0667 12 11.3333V2.66667C12 1.93334 11.4 1.33334 10.6667 1.33334ZM10.6667 11.3333H2.66667V2.66667H10.6667V11.3333ZM13.3333 5.33334V14C13.3333 14.7333 12.7333 15.3333 12 15.3333H4.66667C4.66667 15.3333 4.66667 14.6667 4.66667 14.6667H12.6667V5.33334C12.6667 5.33334 13.3333 5.33334 13.3333 5.33334Z"
+                    fill="currentColor"
+                  />
+                </svg>
+                {copySuccess ? 'Copied!' : 'Copy address'}
+              </button>
+            </div>
+
+            {/* Instructions */}
+            <div
+              className="rounded-lg p-3 flex flex-col gap-2.5"
+              style={{ border: '1px solid var(--color-divider)' }}
+            >
+              <h3
+                className="m-0 text-sm font-medium leading-[18px] tracking-[0.14px] font-display"
+                style={{ color: 'var(--color-text-primary)' }}
+              >
+                How to receive NOCK:
+              </h3>
+              <ul className="m-0 p-0 flex flex-col">
+                <li
+                  className="text-[13px] leading-[18px] tracking-[0.26px] font-medium relative pl-0 before:content-['•'] before:mr-1 before:inline-block"
+                  style={{ color: 'var(--color-text-primary)' }}
+                >
+                  Share this address with the sender
+                </li>
+                <li
+                  className="text-[13px] leading-[18px] tracking-[0.26px] font-medium relative pl-0 before:content-['•'] before:mr-1 before:inline-block"
+                  style={{ color: 'var(--color-text-primary)' }}
+                >
+                  Transactions will appear in your wallet
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/extension/popup/screens/RecoveryPhraseScreen.tsx

@@ -0,0 +1,183 @@
+/**
+ * Recovery Phrase Screen - View wallet's secret phrase
+ * Requires password confirmation for security
+ */
+
+import { useState } from 'react';
+import { useStore } from '../store';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { Alert } from '../components/Alert';
+import { PasswordInput } from '../components/PasswordInput';
+import { send } from '../utils/messaging';
+import { INTERNAL_METHODS } from '../../shared/constants';
+import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon';
+import { EyeIcon } from '../components/icons/EyeIcon';
+import { formatWalletError } from '../utils/formatWalletError';
+
+export function RecoveryPhraseScreen() {
+  const { navigate } = useStore();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [mnemonic, setMnemonic] = useState<string | null>(null);
+  const [isRevealed, setIsRevealed] = useState(false);
+
+  async function handleReveal() {
+    setError('');
+
+    if (!password) {
+      setError('Please enter your password');
+      return;
+    }
+
+    const result = await send<{ ok?: boolean; mnemonic?: string; error?: string }>(
+      INTERNAL_METHODS.GET_MNEMONIC,
+      [password]
+    );
+
+    if (result?.error) {
+      setError(formatWalletError(result.error));
+      setPassword('');
+    } else {
+      setMnemonic(result.mnemonic || '');
+      setIsRevealed(true);
+    }
+  }
+
+  const words = mnemonic ? mnemonic.split(' ') : [];
+
+  // Password confirmation view
+  if (!isRevealed) {
+    return (
+      <div
+        className="w-[357px] h-[600px] flex flex-col p-4"
+        style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text-primary)' }}
+      >
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-6">
+          <button
+            onClick={() => navigate('settings')}
+            className="transition-colors"
+            style={{ color: 'var(--color-text-primary)' }}
+          >
+            <ChevronLeftIcon />
+          </button>
+          <h2 className="text-xl font-semibold">View Secret Phrase</h2>
+        </div>
+
+        <div
+          className="mb-6 p-3 rounded-lg"
+          style={{ backgroundColor: 'var(--color-red-light)', color: 'var(--color-red)' }}
+        >
+          <strong>Warning:</strong> Never share your secret phrase with anyone. Anyone with access
+          to this phrase can access your funds.
+        </div>
+
+        <p className="text-sm mb-4" style={{ color: 'var(--color-text-muted)' }}>
+          Enter your password to reveal your 24-word secret phrase.
+        </p>
+
+        <input
+          type="password"
+          value={password}
+          onChange={e => {
+            setPassword(e.target.value);
+            setError('');
+          }}
+          placeholder="Password"
+          className="my-2 w-full rounded-lg px-4 py-3 outline-none"
+          style={{
+            border: '1px solid var(--color-surface-700)',
+            backgroundColor: 'var(--color-bg)',
+            color: 'var(--color-text-primary)',
+          }}
+          onKeyDown={e => e.key === 'Enter' && handleReveal()}
+          onFocus={e => (e.currentTarget.style.borderColor = 'var(--color-primary)')}
+          onBlur={e => (e.currentTarget.style.borderColor = 'var(--color-surface-700)')}
+          autoFocus
+        />
+
+        {error && (
+          <div
+            className="my-2 p-3 rounded-lg"
+            style={{ backgroundColor: 'var(--color-red-light)', color: 'var(--color-red)' }}
+          >
+            {error}
+          </div>
+        )}
+
+        <button
+          onClick={handleReveal}
+          className="my-2 w-full rounded-lg px-5 py-3.5 text-sm font-medium transition-opacity hover:opacity-90"
+          style={{ backgroundColor: 'var(--color-primary)', color: '#000' }}
+        >
+          <EyeIcon className="w-4 h-4 inline mr-2" />
+          Reveal Secret Phrase
+        </button>
+
+        <button
+          onClick={() => navigate('settings')}
+          className="my-2 w-full rounded-lg px-5 py-3.5 text-sm font-medium transition-colors"
+          style={{ backgroundColor: 'var(--color-surface-800)' }}
+          onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-surface-700)')}
+          onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')}
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }
+
+  // Secret phrase display view
+  return (
+    <div
+      className="w-[357px] h-[600px] flex flex-col p-4"
+      style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text-primary)' }}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-4">
+        <button
+          onClick={() => navigate('settings')}
+          className="transition-colors"
+          style={{ color: 'var(--color-text-primary)' }}
+        >
+          <ChevronLeftIcon />
+        </button>
+        <h2 className="text-xl font-semibold">Secret Phrase</h2>
+      </div>
+
+      <div
+        className="mb-4 p-3 rounded-lg"
+        style={{ backgroundColor: 'var(--color-red-light)', color: 'var(--color-red)' }}
+      >
+        <strong>Warning:</strong> Write down these 24 words in order and store them safely. Never
+        share them with anyone.
+      </div>
+
+      {/* Words grid */}
+      <div className="flex-1 overflow-y-auto mb-4">
+        <div className="grid grid-cols-2 gap-2">
+          {words.map((word, index) => (
+            <div
+              key={index}
+              className="rounded p-2 flex items-center gap-2"
+              style={{ backgroundColor: 'var(--color-surface-800)' }}
+            >
+              <span className="text-xs w-6" style={{ color: 'var(--color-text-muted)' }}>
+                {index + 1}.
+              </span>
+              <span className="text-sm font-mono">{word}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <button
+        onClick={() => navigate('settings')}
+        className="w-full rounded-lg px-5 py-3.5 text-sm font-medium transition-opacity hover:opacity-90"
+        style={{ backgroundColor: 'var(--color-primary)', color: '#000' }}
+      >
+        Done
+      </button>
+    </div>
+  );
+}