@nockchain/rose 0.1.4-nightly.5

package/extension/popup/screens/approvals/TransactionApprovalScreen.tsx

@@ -0,0 +1,167 @@
+import { useStore } from '../../store';
+import { ChevronRightIcon } from '../../components/icons/ChevronRightIcon';
+import { AccountIcon } from '../../components/AccountIcon';
+import { SiteIcon } from '../../components/SiteIcon';
+import { truncateAddress } from '../../utils/format';
+import { send } from '../../utils/messaging';
+import {
+  INTERNAL_METHODS,
+  NOCK_TO_NICKS,
+  DEFAULT_TRANSACTION_FEE,
+} from '../../../shared/constants';
+import { formatNock, formatNick } from '../../../shared/currency';
+import { useAutoRejectOnClose } from '../../hooks/useAutoRejectOnClose';
+
+export function TransactionApprovalScreen() {
+  const { navigate, pendingTransactionRequest, setPendingTransactionRequest, wallet } = useStore();
+
+  if (!pendingTransactionRequest) {
+    navigate('home');
+    return null;
+  }
+
+  const { id, origin, to, amount } = pendingTransactionRequest;
+  const fee = DEFAULT_TRANSACTION_FEE;
+  const total = amount + fee;
+  const displayOrigin = origin.includes('://') ? new URL(origin).hostname : origin;
+
+  useAutoRejectOnClose(id, INTERNAL_METHODS.REJECT_TRANSACTION);
+
+  async function handleReject() {
+    await send(INTERNAL_METHODS.REJECT_TRANSACTION, [id]);
+    setPendingTransactionRequest(null);
+    window.close();
+  }
+
+  async function handleApprove() {
+    await send(INTERNAL_METHODS.APPROVE_TRANSACTION, [id]);
+    setPendingTransactionRequest(null);
+    window.close();
+  }
+
+  const bg = 'var(--color-bg)';
+  const surface = 'var(--color-surface-800)';
+  const textPrimary = 'var(--color-text-primary)';
+  const textMuted = 'var(--color-text-muted)';
+  const divider = 'var(--color-divider)';
+
+  return (
+    <div className="h-screen flex items-center justify-center" style={{ backgroundColor: bg }}>
+      <div
+        className="w-full h-full flex flex-col"
+        style={{ backgroundColor: bg, maxWidth: '357px', maxHeight: '600px' }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-center px-4 py-4 shrink-0">
+          <h2 className="text-xl font-semibold" style={{ color: textPrimary }}>
+            Approve Transaction
+          </h2>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <div className="px-4 pb-2">
+            {/* Site Badge */}
+            <div
+              className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg mb-3"
+              style={{ backgroundColor: surface }}
+            >
+              <span className="text-xs" style={{ color: textMuted }}>
+                From
+              </span>
+              <SiteIcon origin={origin} domain={displayOrigin} size="sm" />
+              <span
+                className="text-sm font-semibold truncate max-w-[160px]"
+                style={{ color: textPrimary }}
+              >
+                {displayOrigin}
+              </span>
+            </div>
+
+            {/* Amount */}
+            <div className="text-center mb-4">
+              <div className="font-[Lora] text-[32px] font-semibold leading-none">
+                {formatNock(amount / NOCK_TO_NICKS)} <span style={{ color: textMuted }}>NOCK</span>
+              </div>
+              <div className="text-[10px] mt-1" style={{ color: textMuted }}>
+                {formatNick(amount)} nicks
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              {/* From/To */}
+              <div
+                className="rounded-lg p-3 flex items-center gap-2"
+                style={{ backgroundColor: surface }}
+              >
+                <div className="flex-1">
+                  <div className="text-xs mb-1" style={{ color: textMuted }}>
+                    From
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <AccountIcon
+                      styleId={wallet.currentAccount?.iconStyleId}
+                      color={wallet.currentAccount?.iconColor}
+                      className="w-4 h-4"
+                    />
+                    <span className="text-sm">
+                      {truncateAddress(wallet.currentAccount?.address)}
+                    </span>
+                  </div>
+                </div>
+                <ChevronRightIcon className="w-4 h-4 shrink-0" />
+                <div className="flex-1">
+                  <div className="text-xs mb-1" style={{ color: textMuted }}>
+                    To
+                  </div>
+                  <span className="text-sm">{truncateAddress(to)}</span>
+                </div>
+              </div>
+
+              {/* Fee & Total */}
+              <div className="rounded-lg p-3 space-y-2" style={{ backgroundColor: surface }}>
+                <div className="flex justify-between text-sm">
+                  <span>Network fee</span>
+                  <div className="text-right">
+                    <div>{formatNock(fee / NOCK_TO_NICKS)} NOCK</div>
+                    <div className="text-[10px]" style={{ color: textMuted }}>
+                      {formatNick(fee)} nicks
+                    </div>
+                  </div>
+                </div>
+                <div className="h-px" style={{ backgroundColor: 'var(--color-surface-700)' }} />
+                <div className="flex justify-between text-sm font-semibold">
+                  <span>Total</span>
+                  <div className="text-right">
+                    <div>{formatNock(total / NOCK_TO_NICKS)} NOCK</div>
+                    <div className="text-[10px] font-normal" style={{ color: textMuted }}>
+                      {formatNick(total)} nicks
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Balance After */}
+              <div className="text-center text-xs py-2" style={{ color: textMuted }}>
+                Balance after: {formatNock(wallet.balance - total / NOCK_TO_NICKS)} NOCK
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer Buttons */}
+        <div
+          className="px-4 py-2.5 shrink-0 flex gap-3"
+          style={{ borderTop: `1px solid ${divider}` }}
+        >
+          <button onClick={handleReject} className="btn-secondary flex-1">
+            Reject
+          </button>
+          <button onClick={handleApprove} className="btn-primary flex-1">
+            Approve
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,254 @@
+/**
+ * Onboarding Backup Screen - Display mnemonic for user to write down
+ */
+
+import { useState } from 'react';
+import { useStore } from '../../store';
+import { Alert } from '../../components/Alert';
+import { CheckIcon } from '../../components/icons/CheckIcon';
+import lockIcon from '../../assets/lock-icon.svg';
+
+export function BackupScreen() {
+  const { onboardingMnemonic, navigate } = useStore();
+  const [isRevealed, setIsRevealed] = useState(false);
+  const [hasConfirmed, setHasConfirmed] = useState(false);
+  const [copiedAll, setCopiedAll] = useState(false);
+
+  async function handleCopyAll() {
+    if (onboardingMnemonic) {
+      try {
+        await navigator.clipboard.writeText(onboardingMnemonic);
+        setCopiedAll(true);
+        setTimeout(() => setCopiedAll(false), 2000);
+      } catch (err) {
+        console.error('Failed to copy secret phrase:', err);
+      }
+    }
+  }
+
+  if (!onboardingMnemonic) {
+    // Should never happen, but handle gracefully
+    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 handleContinue() {
+    if (hasConfirmed) {
+      navigate('onboarding-verify');
+    }
+  }
+
+  return (
+    <div className="w-[357px] h-[600px] flex flex-col 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)] shrink-0">
+        <button
+          onClick={() => navigate('onboarding-create')}
+          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 - scrollable */}
+      <div className="flex-1 overflow-y-auto no-scrollbar">
+        <div className="px-4 py-2 pb-4 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>
+            <h1
+              className="font-serif font-medium text-center text-[var(--color-text-primary)]"
+              style={{
+                fontSize: 'var(--font-size-xl)',
+                lineHeight: 'var(--line-height-relaxed)',
+                letterSpacing: '-0.02em',
+              }}
+            >
+              Write these words
+              <br />
+              down in order.
+            </h1>
+          </div>
+
+          {/* Secret phrase section */}
+          <div className="flex flex-col gap-3">
+            {/* Warning box */}
+            <div className="bg-[var(--color-surface-900)] rounded-lg p-3">
+              <p
+                className="font-sans font-medium text-center text-[var(--color-text-muted)]"
+                style={{
+                  fontSize: 'var(--font-size-xs)',
+                  lineHeight: 'var(--line-height-tight)',
+                  letterSpacing: '0.02em',
+                }}
+              >
+                This is your ONLY way to recover your wallet.
+              </p>
+            </div>
+
+            {/* Secret phrase grid */}
+            <div className="relative">
+              <div className="grid grid-cols-2 gap-2">
+                {words.map((word, index) => (
+                  <div
+                    key={index}
+                    className="bg-[var(--color-bg)] border border-[var(--color-surface-900)] rounded-lg p-2 flex items-center gap-2.5 h-11"
+                  >
+                    <span
+                      className="bg-[var(--color-surface-900)] rounded min-w-[28px] h-7 flex items-center justify-center font-sans font-medium text-[var(--color-text-primary)]"
+                      style={{
+                        fontSize: 'var(--font-size-base)',
+                        lineHeight: 'var(--line-height-snug)',
+                        letterSpacing: '0.01em',
+                      }}
+                    >
+                      {index + 1}
+                    </span>
+                    <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',
+                      }}
+                    >
+                      {word}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              {/* Blur overlay when not revealed */}
+              {!isRevealed && (
+                <div
+                  className="absolute inset-0 backdrop-blur-[6px] rounded-lg"
+                  style={{
+                    backgroundColor: 'var(--color-popover)',
+                    border: '1px solid var(--color-surface-900)',
+                  }}
+                />
+              )}
+            </div>
+          </div>
+
+          {/* Checkbox confirmation */}
+          <div className="bg-[var(--color-surface-900)] rounded-lg p-3 flex items-center gap-2.5">
+            <button
+              onClick={() => setHasConfirmed(!hasConfirmed)}
+              className={`w-7 h-7 rounded-md flex items-center justify-center transition-colors ${
+                hasConfirmed
+                  ? 'btn-primary'
+                  : 'bg-transparent border-2 border-[var(--color-surface-700)]'
+              }`}
+              aria-label="Confirm you've written down the secret phrase"
+            >
+              {hasConfirmed && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path
+                    d="M16 6L7.5 14.5L4 11"
+                    stroke="#000000"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              )}
+            </button>
+            <p
+              className="flex-1 font-sans font-medium text-[var(--color-text-muted)]"
+              style={{
+                fontSize: 'var(--font-size-xs)',
+                lineHeight: 'var(--line-height-tight)',
+                letterSpacing: '0.02em',
+              }}
+            >
+              I've securely written down all 24 words of my secret phrase
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom buttons - Pinned to bottom */}
+      <div className="border-t border-[var(--color-surface-800)] px-4 py-3 bg-[var(--color-bg)] shrink-0">
+        {!isRevealed ? (
+          <button
+            onClick={() => setIsRevealed(true)}
+            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',
+            }}
+          >
+            Show secret phrase
+          </button>
+        ) : (
+          <div className="flex gap-3">
+            <button
+              onClick={handleCopyAll}
+              disabled={copiedAll}
+              className="flex-1 h-12 px-5 py-[15px] rounded-lg flex items-center justify-center gap-2 transition-opacity bg-[var(--color-surface-900)] text-[var(--color-text-primary)] hover:opacity-90 disabled:opacity-100"
+              style={{
+                fontFamily: 'var(--font-sans)',
+                fontSize: 'var(--font-size-base)',
+                fontWeight: 500,
+                lineHeight: 'var(--line-height-snug)',
+                letterSpacing: '0.01em',
+              }}
+            >
+              {copiedAll && <CheckIcon className="w-5 h-5" />}
+              {copiedAll ? 'Copied!' : 'Copy all'}
+            </button>
+            <button
+              onClick={handleContinue}
+              disabled={!hasConfirmed}
+              className={`flex-1 h-12 px-5 py-[15px] rounded-lg flex items-center justify-center transition-opacity ${
+                hasConfirmed
+                  ? 'btn-secondary text-[var(--color-bg)] hover:opacity-90'
+                  : 'bg-[var(--color-surface-700)] text-[var(--color-text-muted)] cursor-not-allowed opacity-50'
+              }`}
+              style={{
+                fontFamily: 'var(--font-sans)',
+                fontSize: 'var(--font-size-base)',
+                fontWeight: 500,
+                lineHeight: 'var(--line-height-snug)',
+                letterSpacing: '0.01em',
+              }}
+            >
+              Continue
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,273 @@
+/**
+ * Onboarding Create Screen - Set password and create wallet
+ */
+
+import { useState } from 'react';
+import { INTERNAL_METHODS, UI_CONSTANTS } from '../../../shared/constants';
+import { setOnboardingInProgress } from '../../../shared/onboarding';
+import { useStore } from '../../store';
+import { send } from '../../utils/messaging';
+import { formatWalletError } from '../../utils/formatWalletError';
+import { Alert } from '../../components/Alert';
+import lockIcon from '../../assets/lock-icon.svg';
+import { EyeIcon } from '../../components/icons/EyeIcon';
+import { EyeOffIcon } from '../../components/icons/EyeOffIcon';
+
+export function CreateScreen() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [error, setError] = useState('');
+  const { navigate, syncWallet, setOnboardingMnemonic } = useStore();
+
+  async function handleCreate() {
+    // Clear previous errors
+    setError('');
+
+    // Validate password
+    if (!password) {
+      setError('Please enter a password');
+      return;
+    }
+
+    if (password.length < UI_CONSTANTS.MIN_PASSWORD_LENGTH) {
+      setError(`Password must be at least ${UI_CONSTANTS.MIN_PASSWORD_LENGTH} characters`);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    // Create wallet
+    const result = await send<{
+      ok?: boolean;
+      address?: string;
+      mnemonic?: string;
+      error?: string;
+    }>(INTERNAL_METHODS.SETUP, [password]);
+
+    if (result?.error) {
+      setError(formatWalletError(result.error));
+    } else {
+      // Mark onboarding as in-progress (backup not yet complete)
+      await setOnboardingInProgress();
+
+      // Store mnemonic temporarily for backup/verification flow
+      setOnboardingMnemonic(result.mnemonic || '');
+      // After setup, we have the first account (Wallet 1)
+      const firstAccount = {
+        name: 'Wallet 1',
+        address: result.address || '',
+        index: 0,
+      };
+      syncWallet({
+        locked: false,
+        address: result.address || null,
+        accounts: [firstAccount],
+        currentAccount: firstAccount,
+        balance: 0, // New wallet starts with 0 balance
+        availableBalance: 0,
+        spendableBalance: 0,
+        accountBalances: {},
+        accountSpendableBalances: {},
+        accountBalanceDetails: {},
+      });
+      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={() => 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 text-[var(--color-text-primary)]"
+          style={{
+            fontSize: 'var(--font-size-lg)',
+            lineHeight: 'var(--line-height-normal)',
+            letterSpacing: '0.01em',
+          }}
+        >
+          Create new wallet
+        </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>
+            <h1
+              className="font-serif font-medium text-center text-[var(--color-text-primary)]"
+              style={{
+                fontSize: 'var(--font-size-xl)',
+                lineHeight: 'var(--line-height-relaxed)',
+                letterSpacing: '-0.02em',
+              }}
+            >
+              First, let's secure your
+              <br />
+              wallet with a password
+            </h1>
+          </div>
+
+          {/* Password inputs */}
+          <div className="flex flex-col gap-6">
+            {/* Create password */}
+            <div className="flex flex-col gap-1.5">
+              <label
+                htmlFor="password"
+                className="font-sans font-medium text-[var(--color-text-primary)]"
+                style={{
+                  fontSize: 'var(--font-size-sm)',
+                  lineHeight: 'var(--line-height-snug)',
+                  letterSpacing: '0.02em',
+                }}
+              >
+                Create password
+              </label>
+              <div className="relative">
+                <input
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={e => {
+                    setPassword(e.target.value);
+                    setError('');
+                  }}
+                  className="w-full h-[52px] px-3 py-4 bg-transparent border border-[var(--color-surface-700)] rounded-lg font-sans font-medium text-[var(--color-text-primary)] placeholder:text-[var(--color-text-secondary)] focus:outline-none focus:border-[var(--color-primary)]"
+                  style={{
+                    fontSize: 'var(--font-size-base)',
+                    lineHeight: 'var(--line-height-snug)',
+                    letterSpacing: '0.01em',
+                  }}
+                  autoFocus
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors"
+                  tabIndex={-1}
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                >
+                  {showPassword ? (
+                    <EyeIcon className="w-4 h-4" />
+                  ) : (
+                    <EyeOffIcon className="w-4 h-4" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Confirm password */}
+            <div className="flex flex-col gap-1.5">
+              <label
+                htmlFor="confirmPassword"
+                className="font-sans font-medium text-[var(--color-text-primary)]"
+                style={{
+                  fontSize: 'var(--font-size-sm)',
+                  lineHeight: 'var(--line-height-snug)',
+                  letterSpacing: '0.02em',
+                }}
+              >
+                Confirm password
+              </label>
+              <div className="relative">
+                <input
+                  id="confirmPassword"
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  value={confirmPassword}
+                  onChange={e => {
+                    setConfirmPassword(e.target.value);
+                    setError('');
+                  }}
+                  onKeyDown={e => e.key === 'Enter' && handleCreate()}
+                  className="w-full h-[52px] px-3 py-4 bg-transparent border border-[var(--color-surface-700)] rounded-lg font-sans font-medium text-[var(--color-text-primary)] placeholder:text-[var(--color-text-secondary)] focus:outline-none focus:border-[var(--color-primary)]"
+                  style={{
+                    fontSize: 'var(--font-size-base)',
+                    lineHeight: 'var(--line-height-snug)',
+                    letterSpacing: '0.01em',
+                  }}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors"
+                  tabIndex={-1}
+                  aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}
+                >
+                  {showConfirmPassword ? (
+                    <EyeIcon className="w-4 h-4" />
+                  ) : (
+                    <EyeOffIcon className="w-4 h-4" />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Info box */}
+          <div className="bg-[var(--color-surface-900)] rounded-lg p-3">
+            <p
+              className="font-sans font-medium text-center text-[var(--color-text-muted)]"
+              style={{
+                fontSize: 'var(--font-size-xs)',
+                lineHeight: 'var(--line-height-tight)',
+                letterSpacing: '0.02em',
+              }}
+            >
+              This password encrypts your wallet on this device. Choose something strong but
+              memorable. Your private keys never leave your browser.
+            </p>
+          </div>
+
+          {/* Error message */}
+          {error && (
+            <Alert type="error" className="mt-2">
+              {error}
+            </Alert>
+          )}
+        </div>
+
+        {/* Bottom button */}
+        <div className="border-t border-[var(--color-surface-800)] px-4 py-3">
+          <button
+            onClick={handleCreate}
+            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',
+            }}
+          >
+            Continue
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}