@nockchain/rose 0.1.4-nightly.5

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

@@ -0,0 +1,236 @@
+/**
+ * Import Success Screen - Wallet imported successfully
+ */
+
+import { useStore } from '../../store';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+import checkmarkSuccessIcon from '../../assets/checkmark-success-icon.svg';
+import { InfoIcon } from '../../components/icons/InfoIcon';
+import { send } from '../../utils/messaging';
+import { useState, useEffect } from 'react';
+import { INTERNAL_METHODS } from '../../../shared/constants';
+
+export function ImportSuccessScreen() {
+  const { navigate, wallet, goBack, fetchBalance } = useStore();
+  const { copied, copyToClipboard } = useCopyToClipboard();
+  const [isV0, setIsV0] = useState(false);
+  useEffect(() => {
+    (async () => {
+      const res = await send<{ ok?: boolean; has?: boolean; error?: unknown }>(
+        INTERNAL_METHODS.HAS_V0_MNEMONIC,
+        []
+      );
+      if (res?.ok) {
+        setIsV0(Boolean(res.has));
+      }
+    })();
+  }, []);
+  // 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 imported
+        </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={checkmarkSuccessIcon} 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',
+                }}
+              >
+                {isV0 ? 'Wallet (v0) imported successfully!' : 'Wallet imported successfully!'}
+              </h1>
+              <p
+                className="font-sans text-[var(--color-text-muted)]"
+                style={{
+                  fontSize: 'var(--font-size-sm)',
+                  lineHeight: 'var(--line-height-snug)',
+                  letterSpacing: '0.02em',
+                }}
+              >
+                {isV0
+                  ? 'A new v1 wallet has been created for you. You can use the upgrade tool to move your v0 notes.'
+                  : 'Your wallet is ready to use'}
+              </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',
+              }}
+            >
+              {isV0 ? 'Your NEW v1 address' : '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>
+
+              {isV0 && (
+                <div
+                  className="flex items-start gap-2 p-3 rounded-lg"
+                  style={{
+                    backgroundColor: 'var(--color-surface-800)',
+                    border: '1px solid var(--color-surface-700)',
+                  }}
+                >
+                  <InfoIcon className="w-5 h-5 flex-shrink-0 mt-0.5 m-auto" />
+                  <div className="flex-1">
+                    <p
+                      className="font-sans text-center text-[var(--color-text-muted)]"
+                      style={{
+                        fontSize: 'var(--font-size-sm)',
+                        lineHeight: 'var(--line-height-snug)',
+                        letterSpacing: '0.01em',
+                      }}
+                    >
+                      Hint: Use the upgrade tool to move your v0 notes.
+                      <br />
+                      <a
+                        href="https://nocknames.com/upgrade"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline hover:opacity-70 text-[#37f] font-bold"
+                      >
+                        nocknames.com/upgrade
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              )}
+            </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/ResumeBackupScreen.tsx

@@ -0,0 +1,166 @@
+/**
+ * Resume Backup Screen
+ * Shown when user closed popup during onboarding and needs to complete backup
+ */
+
+import { useState } from 'react';
+import { useStore } from '../../store';
+import { send } from '../../utils/messaging';
+import { INTERNAL_METHODS } from '../../../shared/constants';
+import { formatWalletError } from '../../utils/formatWalletError';
+import { ScreenContainer } from '../../components/ScreenContainer';
+import { Alert } from '../../components/Alert';
+import { PasswordInput } from '../../components/PasswordInput';
+
+export function ResumeBackupScreen() {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const { navigate, setOnboardingMnemonic } = useStore();
+
+  async function handleContinue() {
+    setError('');
+
+    if (!password) {
+      setError('Please enter your password');
+      return;
+    }
+
+    // Retrieve mnemonic using password
+    const result = await send<{
+      ok?: boolean;
+      mnemonic?: string;
+      error?: string;
+    }>(INTERNAL_METHODS.GET_MNEMONIC, [password]);
+
+    if (result?.error) {
+      setError(formatWalletError(result.error));
+      setPassword(''); // Clear password on error
+    } else {
+      // Store mnemonic in Zustand for backup flow
+      setOnboardingMnemonic(result.mnemonic || '');
+      setPassword('');
+      // Navigate to backup screen
+      navigate('onboarding-backup');
+    }
+  }
+
+  return (
+    <div className="relative w-[357px] h-[600px]" style={{ backgroundColor: 'var(--color-bg)' }}>
+      {/* Header */}
+      <div
+        className="flex items-center justify-between h-16 px-4 py-3"
+        style={{ borderBottom: '1px solid var(--color-divider)' }}
+      >
+        <button
+          onClick={() => navigate('onboarding-start')}
+          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"
+          style={{
+            fontSize: 'var(--font-size-lg)',
+            lineHeight: 'var(--line-height-normal)',
+            letterSpacing: '0.01em',
+            color: 'var(--color-text-primary)',
+          }}
+        >
+          Complete Backup
+        </h2>
+        <div className="w-8" />
+      </div>
+
+      {/* Main content */}
+      <div className="flex flex-col justify-between h-[536px]">
+        <div className="px-4 py-2 flex flex-col gap-6">
+          <h1
+            className="font-serif font-medium text-center"
+            style={{
+              fontSize: 'var(--font-size-xl)',
+              lineHeight: 'var(--line-height-relaxed)',
+              letterSpacing: '-0.02em',
+              color: 'var(--color-text-primary)',
+            }}
+          >
+            Complete Your Backup
+          </h1>
+
+          <p
+            className="font-sans text-center"
+            style={{
+              fontSize: 'var(--font-size-sm)',
+              lineHeight: 'var(--line-height-snug)',
+              letterSpacing: '0.02em',
+              color: 'var(--color-text-muted)',
+            }}
+          >
+            You need to backup your secret phrase to secure your wallet. Enter your password to
+            continue.
+          </p>
+
+          <div className="rounded-lg p-3" style={{ backgroundColor: 'var(--color-red-light)' }}>
+            <p
+              className="font-sans font-medium text-center"
+              style={{
+                fontSize: 'var(--font-size-xs)',
+                lineHeight: 'var(--line-height-tight)',
+                letterSpacing: '0.02em',
+                color: 'var(--color-red)',
+              }}
+            >
+              <strong>Important:</strong> Without backing up your secret phrase, you risk losing
+              access to your wallet if you forget your password.
+            </p>
+          </div>
+
+          <PasswordInput
+            value={password}
+            onChange={value => {
+              setPassword(value);
+              setError('');
+            }}
+            placeholder="Password"
+            className="my-2"
+            onKeyDown={e => e.key === 'Enter' && handleContinue()}
+            autoFocus
+          />
+
+          {error && (
+            <Alert type="error" className="my-2">
+              {error}
+            </Alert>
+          )}
+        </div>
+
+        {/* Bottom button */}
+        <div className="px-4 py-3" style={{ borderTop: '1px solid var(--color-surface-800)' }}>
+          <button
+            onClick={handleContinue}
+            className="w-full h-12 px-5 py-[15px] rounded-lg flex items-center justify-center transition-opacity hover:opacity-90"
+            style={{
+              backgroundColor: 'var(--color-primary)',
+              color: '#000000',
+              fontFamily: 'var(--font-sans)',
+              fontSize: 'var(--font-size-base)',
+              fontWeight: 500,
+              lineHeight: 'var(--line-height-snug)',
+              letterSpacing: '0.01em',
+            }}
+          >
+            Continue Backup
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,142 @@
+/**
+ * Onboarding Start Screen - Create new or import wallet
+ */
+
+import { useStore } from '../../store';
+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 StartScreen() {
+  const { navigate } = useStore();
+
+  return (
+    <div className="relative w-[357px] h-[600px] bg-[var(--color-bg)] overflow-hidden">
+      {/* Decorative vector elements */}
+      <img
+        src={vectorLeft}
+        alt=""
+        className="absolute left-[-11px] top-[199px] w-[89px] h-[70px]"
+        aria-hidden="true"
+      />
+      <img
+        src={vectorRight}
+        alt=""
+        className="absolute left-[305px] top-[311px] w-[52px] h-[83px]"
+        aria-hidden="true"
+      />
+      <img
+        src={vectorTopRight}
+        alt=""
+        className="absolute left-[296px] top-[122px] w-[80px] h-[45px]"
+        aria-hidden="true"
+      />
+      <div
+        className="absolute"
+        style={{
+          left: 'calc(50% + 37px)',
+          top: 'calc(50% - 283px)',
+          transform: 'rotate(24.652deg)',
+          transformOrigin: 'center',
+        }}
+        aria-hidden="true"
+      >
+        <img src={vectorTopRightRotated} alt="" className="w-[63px] h-[67px]" />
+      </div>
+      <img
+        src={vectorBottomLeft}
+        alt=""
+        className="absolute left-[-23px] top-[362px] w-[64px] h-[64px]"
+        aria-hidden="true"
+      />
+
+      {/* Main content */}
+      <div className="flex flex-col items-center justify-between h-[600px] px-4 pt-[104px] pb-3">
+        {/* Top section: Logo and text */}
+        <div className="flex flex-col items-center gap-8 w-full">
+          {/* Logo */}
+          <img src={RoseLogo} alt="Rose Wallet" className="w-[104px] h-[104px]" />
+
+          {/* Text content */}
+          <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 to Rose
+            </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>
+
+        {/* Bottom section: Buttons */}
+        <div className="flex flex-col gap-4 w-full">
+          <button
+            onClick={() => navigate('onboarding-create')}
+            className="h-12 px-5 py-[15px] btn-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',
+              color: '#000000',
+            }}
+          >
+            Create new wallet
+          </button>
+
+          <button
+            onClick={() => {
+              navigate('onboarding-import');
+            }}
+            className="h-12 px-5 py-[15px] btn-secondary 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',
+              color: 'var(--color-bg)',
+            }}
+          >
+            I have a wallet
+          </button>
+
+          <button
+            onClick={() => {
+              navigate('onboarding-import-v0');
+            }}
+            className="h-12 px-5 py-[15px] btn-secondary 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',
+              color: 'var(--color-bg)',
+            }}
+          >
+            I have a v0 wallet
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}