@nockchain/rose 0.1.4-nightly.5

package/extension/popup/screens/onboarding/SuccessScreen.tsx

@@ -0,0 +1,193 @@
+/**
+ * Onboarding Success Screen - Wallet created successfully
+ */
+
+import { useEffect } from 'react';
+import { useStore } from '../../store';
+import { markOnboardingComplete } from '../../../shared/onboarding';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+import checkmarkIcon from '../../assets/checkmark-icon.svg';
+
+export function SuccessScreen() {
+  const { navigate, wallet, goBack, fetchBalance } = useStore();
+  const { copied, copyToClipboard } = useCopyToClipboard();
+
+  // Mark onboarding as complete when user reaches this screen
+  useEffect(() => {
+    markOnboardingComplete();
+  }, []);
+
+  // Format address to show start and end with middle grayed out
+  function formatAddress(address: string) {
+    if (!address || address.length < 20) return address;
+    const start = address.slice(0, 6);
+    const middle = address.slice(6, -5);
+    const end = address.slice(-5);
+    return { start, middle, end };
+  }
+
+  const formattedAddress = formatAddress(wallet.address || '');
+
+  function handleStartUsing() {
+    // Start fetching balance in background (non-blocking)
+    fetchBalance();
+    // Navigate immediately - HomeScreen will show loading state
+    navigate('home');
+  }
+
+  return (
+    <div className="relative w-[357px] h-[600px] bg-[var(--color-bg)]">
+      {/* Header with back button */}
+      <div className="flex items-center justify-between h-16 px-4 py-3 border-b border-[var(--color-divider)]">
+        <button
+          onClick={goBack}
+          className="p-2 -ml-2 hover:opacity-70 transition-opacity"
+          aria-label="Go back"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M10 12L6 8L10 4"
+              stroke="var(--color-text-primary)"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+        <h2
+          className="font-sans font-medium text-[var(--color-text-primary)]"
+          style={{
+            fontSize: 'var(--font-size-lg)',
+            lineHeight: 'var(--line-height-normal)',
+            letterSpacing: '0.01em',
+          }}
+        >
+          Wallet created!
+        </h2>
+        <div className="w-8" /> {/* Spacer for centering */}
+      </div>
+
+      {/* Main content */}
+      <div className="flex flex-col justify-between h-[536px]">
+        <div className="px-4 py-2 flex flex-col gap-8">
+          {/* Icon and heading */}
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-10 h-10">
+              <img src={checkmarkIcon} alt="" className="w-full h-full" />
+            </div>
+            <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',
+                }}
+              >
+                Your wallet is ready!
+              </h1>
+              <p
+                className="font-sans text-[var(--color-text-muted)]"
+                style={{
+                  fontSize: 'var(--font-size-sm)',
+                  lineHeight: 'var(--line-height-snug)',
+                  letterSpacing: '0.02em',
+                }}
+              >
+                Welcome to Nockchain
+              </p>
+            </div>
+          </div>
+
+          {/* Address section */}
+          <div className="flex flex-col gap-1.5 w-full">
+            <p
+              className="font-sans font-medium text-center text-[var(--color-text-primary)]"
+              style={{
+                fontSize: 'var(--font-size-sm)',
+                lineHeight: 'var(--line-height-snug)',
+                letterSpacing: '0.02em',
+              }}
+            >
+              Your address
+            </p>
+            <div className="bg-[var(--color-surface-900)] rounded-lg p-3 flex flex-col gap-5 items-center">
+              {/* Address display */}
+              <p
+                className="font-sans font-medium text-center text-[var(--color-text-primary)] break-words w-full"
+                style={{
+                  fontSize: 'var(--font-size-base)',
+                  lineHeight: 'var(--line-height-snug)',
+                  letterSpacing: '0.01em',
+                }}
+              >
+                {typeof formattedAddress === 'string' ? (
+                  formattedAddress
+                ) : (
+                  <>
+                    {formattedAddress.start}
+                    <span className="text-[var(--color-text-muted)]">
+                      {formattedAddress.middle}
+                    </span>
+                    {formattedAddress.end}
+                  </>
+                )}
+              </p>
+
+              {/* Copy button */}
+              <button
+                onClick={() => copyToClipboard(wallet.address || '')}
+                className="border border-[var(--color-text-primary)] rounded-full px-4 py-1.5 flex items-center gap-1.5 hover:opacity-80 transition-opacity"
+              >
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M4 4V2.66667C4 2.29848 4.29848 2 4.66667 2H13.3333C13.7015 2 14 2.29848 14 2.66667V11.3333C14 11.7015 13.7015 12 13.3333 12H12"
+                    stroke="var(--color-text-primary)"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                  />
+                  <rect
+                    x="2"
+                    y="4"
+                    width="10"
+                    height="10"
+                    rx="0.666667"
+                    stroke="var(--color-text-primary)"
+                    strokeWidth="1.5"
+                  />
+                </svg>
+                <span
+                  className="font-sans font-medium text-[var(--color-text-primary)]"
+                  style={{
+                    fontSize: 'var(--font-size-base)',
+                    lineHeight: 'var(--line-height-snug)',
+                    letterSpacing: '0.01em',
+                  }}
+                >
+                  {copied ? 'Copied!' : 'Copy address'}
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom button */}
+        <div className="border-t border-[var(--color-surface-800)] p-3">
+          <button
+            onClick={handleStartUsing}
+            className="w-full h-12 px-5 py-[15px] btn-primary text-[#000000] 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',
+            }}
+          >
+            Start using wallet
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/extension/popup/screens/onboarding/VerifyScreen.tsx

@@ -0,0 +1,220 @@
+/**
+ * Onboarding Verify Screen - Verify user wrote down mnemonic correctly
+ */
+
+import { useState, useMemo } from 'react';
+import { useStore } from '../../store';
+import { Alert } from '../../components/Alert';
+import lockIcon from '../../assets/lock-icon.svg';
+
+/**
+ * Generates 6 unique random positions from 0-23 for secret phrase verification
+ */
+function generateRandomPositions(): number[] {
+  const positions = Array.from({ length: 24 }, (_, i) => i);
+  const selected: number[] = [];
+
+  // Fisher-Yates shuffle and take first 6
+  for (let i = positions.length - 1; i > 0 && selected.length < 6; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [positions[i], positions[j]] = [positions[j], positions[i]];
+    selected.push(positions[i]);
+  }
+
+  // Sort selected positions so they appear in order
+  return selected.sort((a, b) => a - b);
+}
+
+export function VerifyScreen() {
+  const { onboardingMnemonic, navigate, setOnboardingMnemonic } = useStore();
+  const [inputs, setInputs] = useState<Record<number, string>>({});
+  const [error, setError] = useState<string>('');
+
+  // Generate random positions once per mnemonic (stable across re-renders)
+  const testPositions = useMemo(() => generateRandomPositions(), [onboardingMnemonic]);
+
+  if (!onboardingMnemonic) {
+    return (
+      <div className="w-[357px] h-[600px] bg-[var(--color-bg)] flex items-center justify-center p-4">
+        <Alert type="error">No mnemonic found. Please restart onboarding.</Alert>
+      </div>
+    );
+  }
+
+  const words = onboardingMnemonic.split(' ');
+
+  function handleInputChange(position: number, value: string) {
+    setInputs(prev => ({ ...prev, [position]: value.trim().toLowerCase() }));
+    setError('');
+  }
+
+  function handleVerify() {
+    // Check if all positions are filled
+    const allFilled = testPositions.every(pos => inputs[pos]?.length > 0);
+    if (!allFilled) {
+      setError('Please fill in all word fields');
+      return;
+    }
+
+    // Verify all words are correct
+    const allCorrect = testPositions.every(pos => inputs[pos] === words[pos].toLowerCase());
+
+    if (allCorrect) {
+      // Clear the mnemonic from memory and navigate to success
+      setOnboardingMnemonic(null);
+      navigate('onboarding-success');
+    } else {
+      setError('One or more words are incorrect. Please check your secret phrase and try again.');
+    }
+  }
+
+  function handleBack() {
+    navigate('onboarding-backup');
+  }
+
+  return (
+    <div className="relative w-[357px] h-[600px] bg-[var(--color-bg)]">
+      {/* Header with back button */}
+      <div className="flex items-center justify-between h-16 px-4 py-3 border-b border-[var(--color-divider)]">
+        <button
+          onClick={handleBack}
+          className="p-2 -ml-2 hover:opacity-70 transition-opacity"
+          aria-label="Go back"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M10 12L6 8L10 4"
+              stroke="var(--color-text-primary)"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+        <h2
+          className="font-sans font-medium text-[var(--color-text-primary)]"
+          style={{
+            fontSize: 'var(--font-size-lg)',
+            lineHeight: 'var(--line-height-normal)',
+            letterSpacing: '0.01em',
+          }}
+        >
+          Save your secret phrase
+        </h2>
+        <div className="w-8" /> {/* Spacer for centering */}
+      </div>
+
+      {/* Main content */}
+      <div className="flex flex-col justify-between h-[536px]">
+        <div className="px-4 py-2 flex flex-col gap-6">
+          {/* Icon and heading */}
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-10 h-10">
+              <img src={lockIcon} alt="" className="w-full h-full" />
+            </div>
+            <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',
+                }}
+              >
+                Verify secret phrase.
+              </h1>
+              <p
+                className="font-sans text-[var(--color-text-muted)]"
+                style={{
+                  fontSize: 'var(--font-size-sm)',
+                  lineHeight: 'var(--line-height-snug)',
+                  letterSpacing: '0.02em',
+                }}
+              >
+                Please write down the words with this number
+              </p>
+            </div>
+          </div>
+
+          {/* Input fields */}
+          <div className="flex flex-col gap-2 w-full">
+            {[0, 1, 2].map(row => (
+              <div key={row} className="flex gap-2 w-full">
+                {[0, 1].map(col => {
+                  const index = row * 2 + col;
+                  const position = testPositions[index];
+                  const wordNumber = position + 1;
+
+                  return (
+                    <div
+                      key={col}
+                      className="flex-1 min-w-0 bg-[var(--color-bg)] border border-[var(--color-surface-700)] rounded-lg p-2 flex items-center gap-2.5 h-11"
+                    >
+                      <span
+                        className="bg-[var(--color-surface-900)] rounded w-7 h-7 flex items-center justify-center font-sans font-medium text-[var(--color-text-primary)] flex-shrink-0"
+                        style={{
+                          fontSize: 'var(--font-size-base)',
+                          lineHeight: 'var(--line-height-snug)',
+                          letterSpacing: '0.01em',
+                        }}
+                      >
+                        {wordNumber}
+                      </span>
+                      <input
+                        type="text"
+                        value={inputs[position] || ''}
+                        onChange={e => handleInputChange(position, e.target.value)}
+                        placeholder="word"
+                        className="flex-1 min-w-0 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',
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+
+          {/* Error message */}
+          {error && <Alert type="error">{error}</Alert>}
+        </div>
+
+        {/* Bottom buttons */}
+        <div className="border-t border-[var(--color-surface-800)] px-4 py-3">
+          <div className="flex gap-3">
+            <button
+              onClick={handleBack}
+              className="flex-1 h-12 px-5 py-[15px] bg-[var(--color-surface-800)] text-[var(--color-text-primary)] 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',
+              }}
+            >
+              Back
+            </button>
+            <button
+              onClick={handleVerify}
+              className="flex-1 h-12 px-5 py-[15px] btn-primary text-[#000000] 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',
+              }}
+            >
+              Create wallet
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}