@nockchain/rose 0.1.4-nightly.5

package/extension/popup/screens/system/LockedScreen.tsx

@@ -0,0 +1,288 @@
+/**
+ * Locked Screen - Unlock wallet with password
+ */
+
+import { useState } from 'react';
+import { INTERNAL_METHODS } from '../../../shared/constants';
+import { useStore } from '../../store';
+import { send } from '../../utils/messaging';
+import { formatWalletError } from '../../utils/formatWalletError';
+import { Alert } from '../../components/Alert';
+import { ConfirmModal } from '../../components/ConfirmModal';
+import { EyeIcon } from '../../components/icons/EyeIcon';
+import { EyeOffIcon } from '../../components/icons/EyeOffIcon';
+import vectorLeft from '../../assets/vector-left.svg';
+import vectorRight from '../../assets/vector-right.svg';
+import vectorTopRight from '../../assets/vector-top-right.svg';
+import vectorTopRightRotated from '../../assets/vector-top-right-rotated.svg';
+import vectorBottomLeft from '../../assets/vector-bottom-left.svg';
+import RoseLogo from '../../../icons/rose.svg';
+
+export function LockedScreen() {
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState('');
+  const [showResetConfirm, setShowResetConfirm] = useState(false);
+  const {
+    navigate,
+    syncWallet,
+    wallet,
+    fetchBalance,
+    pendingConnectRequest,
+    pendingTransactionRequest,
+    pendingSignRequest,
+    pendingSignRawTxRequest,
+  } = useStore();
+
+  async function handleUnlock() {
+    // Clear previous errors
+    setError('');
+
+    if (!password) {
+      setError('Please enter a password');
+      return;
+    }
+
+    const result = await send<{
+      ok?: boolean;
+      address?: string;
+      accounts?: Array<{ name: string; address: string; index: number }>;
+      currentAccount?: { name: string; address: string; index: number };
+      error?: string;
+    }>(INTERNAL_METHODS.UNLOCK, [password]);
+
+    if (result?.error) {
+      setError(formatWalletError(result.error));
+      setPassword(''); // Clear password on error
+    } else {
+      setPassword('');
+      const accounts = result.accounts || [];
+      const currentAccount = result.currentAccount || accounts[0] || null;
+
+      // Load cached balances from storage
+      const { STORAGE_KEYS } = await import('../../../shared/constants');
+      const stored = await chrome.storage.local.get([STORAGE_KEYS.CACHED_BALANCES]);
+      const cachedBalances = (stored[STORAGE_KEYS.CACHED_BALANCES] || {}) as Record<string, number>;
+      const cachedBalance = currentAccount ? (cachedBalances[currentAccount.address] ?? 0) : 0;
+
+      syncWallet({
+        ...wallet,
+        locked: false,
+        address: result.address || null,
+        accounts,
+        currentAccount,
+        balance: cachedBalance,
+        availableBalance: cachedBalance,
+        accountBalances: cachedBalances,
+      });
+
+      // Trigger balance fetch after successful unlock
+      fetchBalance();
+
+      // Navigate to pending approval if one exists, otherwise go home
+      if (pendingConnectRequest) {
+        navigate('connect-approval');
+      } else if (pendingTransactionRequest) {
+        navigate('approve-transaction');
+      } else if (pendingSignRequest) {
+        navigate('sign-message');
+      } else if (pendingSignRawTxRequest) {
+        navigate('approve-sign-raw-tx');
+      } else {
+        navigate('home');
+      }
+    }
+  }
+
+  function handleResetWallet() {
+    setShowResetConfirm(true);
+  }
+
+  async function confirmResetWallet() {
+    // Reset the wallet via the background service
+    const result = await send<{ ok?: boolean }>(INTERNAL_METHODS.RESET_WALLET, []);
+
+    if (result?.ok) {
+      // Navigate to onboarding start
+      navigate('onboarding-start');
+      setShowResetConfirm(false);
+    }
+  }
+
+  function cancelResetWallet() {
+    setShowResetConfirm(false);
+  }
+
+  return (
+    <div className="relative w-[357px] h-[600px] bg-[var(--color-bg)] overflow-hidden">
+      {/* Decorative vector elements - final positioning */}
+      {/* Top-left curved wave */}
+      <img
+        src={vectorLeft}
+        alt=""
+        className="absolute left-[-14px] top-[93px] w-[89px] h-[70px]"
+        aria-hidden="true"
+      />
+      {/* Top-right curved line */}
+      <img
+        src={vectorTopRight}
+        alt=""
+        className="absolute left-[303px] top-[168px] w-[80px] h-[45px]"
+        aria-hidden="true"
+      />
+      {/* Top-right rotated icon - partially off-screen at top */}
+      <img
+        src={vectorTopRightRotated}
+        alt=""
+        className="absolute left-[247px] top-[-19px] w-[63px] h-[67px]"
+        style={{ transform: 'rotate(24.65deg)' }}
+        aria-hidden="true"
+      />
+      {/* Bottom-right icon */}
+      <img
+        src={vectorRight}
+        alt=""
+        className="absolute left-[287px] top-[395px] w-[49px] h-[79px]"
+        aria-hidden="true"
+      />
+      {/* Bottom-left icon */}
+      <img
+        src={vectorBottomLeft}
+        alt=""
+        className="absolute left-[-11px] top-[414px] w-[64px] h-[64px]"
+        aria-hidden="true"
+      />
+      <div className="relative flex flex-col justify-between h-full px-4 py-8 z-10">
+        {/* Main content */}
+        <div className="flex flex-col gap-8 w-full">
+          {/* Logo and heading */}
+          <div className="flex flex-col items-center gap-3 w-full">
+            <img src={RoseLogo} alt="Rose Wallet" className="w-[104px] h-[104px]" />
+            <div className="flex flex-col gap-2 items-center text-center w-full">
+              <h1
+                className="font-serif font-medium text-[var(--color-text-primary)]"
+                style={{
+                  fontSize: 'var(--font-size-xl)',
+                  lineHeight: 'var(--line-height-relaxed)',
+                  letterSpacing: '-0.02em',
+                }}
+              >
+                Welcome back
+              </h1>
+              <p
+                className="font-sans text-[var(--color-text-muted)]"
+                style={{
+                  fontSize: 'var(--font-size-sm)',
+                  lineHeight: 'var(--line-height-snug)',
+                  letterSpacing: '0.02em',
+                }}
+              >
+                Your Nockchain companion
+              </p>
+            </div>
+          </div>
+
+          {/* Password input and unlock button */}
+          <div className="flex flex-col gap-4 w-full">
+            <div className="flex flex-col gap-1.5 w-full">
+              <label
+                className="font-sans font-medium text-[var(--color-text-primary)]"
+                style={{
+                  fontSize: 'var(--font-size-sm)',
+                  lineHeight: 'var(--line-height-snug)',
+                  letterSpacing: '0.02em',
+                }}
+              >
+                Password
+              </label>
+              <div className="bg-[var(--color-bg)] border border-[var(--color-surface-700)] rounded-lg p-3 flex items-center gap-2.5 h-[52px]">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={e => {
+                    setPassword(e.target.value);
+                    setError('');
+                  }}
+                  onKeyDown={e => e.key === 'Enter' && handleUnlock()}
+                  placeholder="Enter your password"
+                  autoFocus
+                  className="flex-1 bg-transparent font-sans font-medium text-[var(--color-text-primary)] placeholder:text-[var(--color-text-secondary)] outline-none"
+                  style={{
+                    fontSize: 'var(--font-size-base)',
+                    lineHeight: 'var(--line-height-snug)',
+                    letterSpacing: '0.01em',
+                  }}
+                />
+                <button
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"
+                >
+                  {showPassword ? (
+                    <EyeOffIcon className="h-4 w-4" />
+                  ) : (
+                    <EyeIcon className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Error message */}
+            {error && <Alert type="error">{error}</Alert>}
+
+            {/* Unlock button */}
+            <button
+              onClick={handleUnlock}
+              className="w-full h-12 px-5 py-[15px] btn-secondary text-[var(--color-bg)] rounded-lg flex items-center justify-center transition-opacity hover:opacity-90"
+              style={{
+                fontFamily: 'var(--font-sans)',
+                fontSize: 'var(--font-size-base)',
+                fontWeight: 500,
+                lineHeight: 'var(--line-height-snug)',
+                letterSpacing: '0.01em',
+              }}
+            >
+              Unlock
+            </button>
+          </div>
+        </div>
+
+        {/* Bottom text with reset link */}
+        <div className="flex flex-col gap-3 items-center text-center w-full">
+          <p
+            className="font-sans text-[var(--color-text-muted)]"
+            style={{
+              fontSize: 'var(--font-size-sm)',
+              lineHeight: 'var(--line-height-snug)',
+              letterSpacing: '0.02em',
+            }}
+          >
+            Can't login? You can delete your current wallet and create a new one
+          </p>
+          <button
+            onClick={handleResetWallet}
+            className="font-sans font-medium text-[var(--color-text-primary)] underline hover:opacity-80"
+            style={{
+              fontSize: 'var(--font-size-base)',
+              lineHeight: 'var(--line-height-snug)',
+              letterSpacing: '0.01em',
+            }}
+          >
+            Reset wallet
+          </button>
+        </div>
+      </div>
+
+      {/* Reset Confirmation Modal */}
+      <ConfirmModal
+        isOpen={showResetConfirm}
+        title="Reset wallet"
+        message="This will delete your current wallet and all data. You will need to create a new wallet or import an existing one."
+        confirmText="Reset"
+        cancelText="Cancel"
+        onConfirm={confirmResetWallet}
+        onCancel={cancelResetWallet}
+        variant="danger"
+      />
+    </div>
+  );
+}

package/extension/popup/screens/transactions/ReceiveScreen.tsx

@@ -0,0 +1,84 @@
+/**
+ * Receive Screen - Display address for receiving NOCK
+ */
+
+import { useStore } from '../../store';
+import { ScreenContainer } from '../../components/ScreenContainer';
+import { ChevronLeftIcon } from '../../components/icons/ChevronLeftIcon';
+import { CopyIcon } from '../../components/icons/CopyIcon';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+
+export function ReceiveScreen() {
+  const { navigate, wallet } = useStore();
+  const { copied, copyToClipboard } = useCopyToClipboard();
+
+  const address = wallet.currentAccount?.address || '';
+
+  return (
+    <ScreenContainer className="flex flex-col">
+      {/* Header with back button */}
+      <div className="flex items-center gap-3 mb-6">
+        <button
+          onClick={() => navigate('home')}
+          className="transition-colors"
+          style={{ color: 'var(--color-text-primary)' }}
+        >
+          <ChevronLeftIcon />
+        </button>
+        <h2 className="text-xl font-semibold" style={{ color: 'var(--color-text-primary)' }}>
+          Receive NOCK
+        </h2>
+      </div>
+
+      {/* Address section */}
+      <div className="mb-6">
+        <h3 className="text-center mb-4" style={{ color: 'var(--color-text-primary)' }}>
+          Your Address
+        </h3>
+        <div
+          className="rounded-lg p-4 mb-4"
+          style={{ backgroundColor: 'var(--color-surface-800)' }}
+        >
+          <p className="text-sm font-mono break-all" style={{ color: 'var(--color-text-primary)' }}>
+            {address}
+          </p>
+        </div>
+
+        {/* Copy button */}
+        <button
+          onClick={() => copyToClipboard(address)}
+          className="w-full font-semibold py-3 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
+          style={{
+            backgroundColor: 'var(--color-primary)',
+            color: '#000',
+          }}
+          onMouseEnter={e => {
+            e.currentTarget.style.opacity = '0.9';
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.opacity = '1';
+          }}
+        >
+          <CopyIcon />
+          {copied ? 'Copied!' : 'Copy Address'}
+        </button>
+      </div>
+
+      {/* Instructions */}
+      <div className="rounded-lg p-4 mb-6" style={{ backgroundColor: 'var(--color-surface-900)' }}>
+        <h4 className="text-sm font-semibold mb-2" style={{ color: 'var(--color-text-primary)' }}>
+          How to receive NOCK:
+        </h4>
+        <ul className="text-sm space-y-1" style={{ color: 'var(--color-text-muted)' }}>
+          <li>• Share this address with the sender</li>
+          <li>• Transactions will appear in your wallet</li>
+        </ul>
+      </div>
+
+      {/* Done button */}
+      <button onClick={() => navigate('home')} className="w-full btn-secondary mt-auto">
+        Done
+      </button>
+    </ScreenContainer>
+  );
+}

package/extension/popup/screens/transactions/SentScreen.tsx

@@ -0,0 +1,138 @@
+/**
+ * Sent Screen - Transaction confirmation after successful send
+ */
+
+import { useStore } from '../../store';
+import { ScreenContainer } from '../../components/ScreenContainer';
+import { ChevronLeftIcon } from '../../components/icons/ChevronLeftIcon';
+import { CheckIcon } from '../../components/icons/CheckIcon';
+import { ArrowUpRightIcon } from '../../components/icons/ArrowUpRightIcon';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+
+export function SentScreen() {
+  const { navigate, lastTransaction } = useStore();
+  const { copied, copyToClipboard } = useCopyToClipboard();
+
+  if (!lastTransaction) {
+    // If no transaction data, redirect to home
+    navigate('home');
+    return null;
+  }
+
+  const { txid, amount, fee } = lastTransaction;
+  const total = amount + fee;
+
+  function handleViewDetails() {
+    // TODO: Navigate to transaction details screen
+    // For now, just navigate home
+    navigate('home');
+  }
+
+  return (
+    <ScreenContainer className="flex flex-col">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <button
+          onClick={() => navigate('home')}
+          className="transition-colors"
+          style={{ color: 'var(--color-text-primary)' }}
+        >
+          <ChevronLeftIcon />
+        </button>
+        <h2 className="text-xl font-semibold" style={{ color: 'var(--color-text-primary)' }}>
+          Send NOCK
+        </h2>
+      </div>
+
+      {/* Success icon */}
+      <div className="flex justify-center mb-6">
+        <div
+          className="w-24 h-24 rounded-full flex items-center justify-center"
+          style={{ backgroundColor: 'var(--color-green-light)' }}
+        >
+          <CheckIcon className="w-12 h-12" style={{ color: 'var(--color-green)' }} />
+        </div>
+      </div>
+
+      {/* Success message */}
+      <h3
+        className="text-2xl font-semibold text-center mb-2"
+        style={{ color: 'var(--color-text-primary)' }}
+      >
+        Sent!
+      </h3>
+      <p className="text-center mb-8" style={{ color: 'var(--color-text-muted)' }}>
+        Your transaction has been broadcast to the network
+      </p>
+
+      {/* Transaction details */}
+      <div
+        className="rounded-lg p-4 mb-4 space-y-3"
+        style={{ backgroundColor: 'var(--color-surface-800)' }}
+      >
+        <div className="flex justify-between items-center">
+          <span className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
+            Amount
+          </span>
+          <span className="font-mono" style={{ color: 'var(--color-text-primary)' }}>
+            {amount} NOCK
+          </span>
+        </div>
+        <div className="flex justify-between items-center">
+          <span className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
+            Fee
+          </span>
+          <span className="font-mono" style={{ color: 'var(--color-text-primary)' }}>
+            {fee} NOCK
+          </span>
+        </div>
+        <div
+          className="pt-3 flex justify-between items-center"
+          style={{ borderTop: '1px solid var(--color-divider)' }}
+        >
+          <span className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
+            Total
+          </span>
+          <span className="font-mono font-semibold" style={{ color: 'var(--color-text-primary)' }}>
+            {total.toFixed(2)} NOCK
+          </span>
+        </div>
+      </div>
+
+      {/* Transaction ID */}
+      <div className="rounded-lg p-4 mb-6" style={{ backgroundColor: 'var(--color-surface-800)' }}>
+        <p className="text-sm mb-2" style={{ color: 'var(--color-text-muted)' }}>
+          Transaction ID:
+        </p>
+        <button onClick={() => copyToClipboard(txid)} className="w-full text-left">
+          <p
+            className="text-sm font-mono break-all mb-2"
+            style={{ color: 'var(--color-text-primary)' }}
+          >
+            {txid}
+          </p>
+        </button>
+        {copied && (
+          <p className="text-xs" style={{ color: 'var(--color-green)' }}>
+            Copied to clipboard!
+          </p>
+        )}
+        <button
+          onClick={handleViewDetails}
+          className="flex items-center gap-2 text-sm transition-colors mt-2"
+          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)')}
+        >
+          <ArrowUpRightIcon className="w-4 h-4" />
+          View Details
+        </button>
+      </div>
+
+      {/* Action button */}
+      <button onClick={() => navigate('home')} className="btn-primary">
+        View Details
+      </button>
+    </ScreenContainer>
+  );
+}