diff --git a/extension/background/index.ts b/extension/background/index.ts index 006ec30..047d4a2 100644 --- a/extension/background/index.ts +++ b/extension/background/index.ts @@ -1077,7 +1077,7 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => { req.notes.forEach(assertNativeNote); const forPopup = { ...req, - notes: req.notes.map((n) => noteToProtobuf(n as Note)), + notes: req.notes.map(n => noteToProtobuf(n as Note)), }; sendResponse(forPopup); } else { diff --git a/extension/manifest.json b/extension/manifest.json index e61e198..d03b5c7 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -26,7 +26,7 @@ }, "permissions": ["storage", "alarms"], "content_security_policy": { - "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'" + "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; font-src 'self' https://cdn.jsdelivr.net" }, "content_scripts": [ { diff --git a/extension/popup/components/icons/ChevronDownIcon.tsx b/extension/popup/components/icons/ChevronDownIcon.tsx index 441979c..b1091a3 100644 --- a/extension/popup/components/icons/ChevronDownIcon.tsx +++ b/extension/popup/components/icons/ChevronDownIcon.tsx @@ -4,11 +4,12 @@ interface IconProps { className?: string; + style?: React.CSSProperties; } -export function ChevronDownIcon({ className = 'w-5 h-5' }: IconProps) { +export function ChevronDownIcon({ className = 'w-5 h-5', style }: IconProps) { return ( - + ); diff --git a/extension/popup/index.tsx b/extension/popup/index.tsx index 3185553..82c3804 100644 --- a/extension/popup/index.tsx +++ b/extension/popup/index.tsx @@ -6,13 +6,10 @@ import { createRoot } from 'react-dom/client'; import { Popup } from './Popup'; import { ThemeProvider } from './contexts/ThemeContext'; -import './styles.css'; - import '@fontsource/lora/400.css'; import '@fontsource/lora/500.css'; import '@fontsource/lora/600.css'; -import '@fontsource/inter/400.css'; -import '@fontsource/inter/500.css'; +import './styles.css'; const root = document.getElementById('root'); if (root) { diff --git a/extension/popup/screens/HomeScreen.tsx b/extension/popup/screens/HomeScreen.tsx index 8f8c173..c3fb8e0 100644 --- a/extension/popup/screens/HomeScreen.tsx +++ b/extension/popup/screens/HomeScreen.tsx @@ -15,7 +15,7 @@ import { ReceiveArrowIcon } from '../components/icons/ReceiveArrowIcon'; import { SentArrowIcon } from '../components/icons/SentArrowIcon'; import { ArrowUpRightIcon } from '../components/icons/ArrowUpRightIcon'; -import WalletDropdownArrow from '../assets/wallet-dropdown-arrow.svg'; +import { ChevronDownIcon } from '../components/icons/ChevronDownIcon'; import LockIconAsset from '../assets/lock-icon.svg'; import SettingsIconAsset from '../assets/settings-icon.svg'; import TrendUpArrow from '../assets/trend-up-arrow.svg'; @@ -368,7 +368,7 @@ export function HomeScreen() { style={{ color: 'var(--color-text-primary)' }} > {walletName} - +
( -

Review

+

+ Review Transfer +

@@ -126,114 +131,117 @@ export function SendReviewScreen() { style={{ backgroundColor: 'var(--color-bg)' }} >
- {/* Amount Section */} + {/* Amount Section - Figma: logo, amount, USD */}
-
- -
+
-

+

{amount} NOCK

- {formatNick(amountInNicks)} nicks + {usdValue > 0 + ? `$${usdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` + : '—'}

- {/* Details */} + {/* Wallet cards with circular middle - Figma layout */}
- {/* From/To */} -
-
-
From
-
- {fromAddress} -
-
-
- -
-
-
To
+
+ {/* Sender card */} +
- {toAddress} +
-
-
- - {/* Network fee & Total */} -
-
- {/* Fee row */} -
-
- Network fee +
+
+ {currentAccount?.name ?? 'Wallet'}
-
-
- {feeInNocks} NOCK -
-
- {formatNick(feeInNicks)} nicks -
+
+ {fromAddress}
+
- {/* Divider */} -
+ {/* Circular middle element - "weird circle" from Figma */} +
+ +
- {/* Total row */} -
-
- Total + {/* Receiver card */} +
+
+ {recipientAccount ? ( + + ) : ( + + )} +
+
+
+ {recipientLabel}
-
-
- {total} NOCK -
-
- {formatNick(totalInNicks)} nicks -
+
+ {toAddress}
- {/* Remaining balance */} + {/* Network fee - single row per Figma */}
- Balance after: {remainingBalance} NOCK +
+ Network fee +
+
+ {feeInNocks} NOCK +
@@ -269,37 +277,35 @@ export function SendReviewScreen() {
)} */} - {/* Actions */} + {/* Actions - Figma: gap-12, rounded-8 */}
-
- - -
+ +
diff --git a/extension/popup/screens/SendScreen.tsx b/extension/popup/screens/SendScreen.tsx index 4979e29..419ba9e 100644 --- a/extension/popup/screens/SendScreen.tsx +++ b/extension/popup/screens/SendScreen.tsx @@ -479,7 +479,8 @@ export function SendScreen() {
{accounts.length > 1 && ( )} diff --git a/extension/popup/screens/SendSubmittedScreen.tsx b/extension/popup/screens/SendSubmittedScreen.tsx index 12345e8..afd9d92 100644 --- a/extension/popup/screens/SendSubmittedScreen.tsx +++ b/extension/popup/screens/SendSubmittedScreen.tsx @@ -1,7 +1,7 @@ import { useStore } from '../store'; +import { formatNock } from '../../shared/currency'; import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon'; import { SendPaperPlaneIcon } from '../components/icons/SendPaperPlaneIcon'; -import { PlusIcon } from '../components/icons/PlusIcon'; export function SendSubmittedScreen() { const { navigate, lastTransaction, priceUsd } = useStore(); @@ -9,45 +9,20 @@ export function SendSubmittedScreen() { function handleBack() { navigate('home'); } - function handleViewActivity() { - navigate('home'); // show transactions on home - } - - // Dev function: Download transaction protobuf for debugging - function handleDownloadTx() { - if (!lastTransaction?.protobufTx) { - console.warn('[SendSubmitted] No transaction data available to download'); - return; - } - try { - // Convert protobuf object to JSON string - const txJson = JSON.stringify(lastTransaction.protobufTx, null, 2); - const blob = new Blob([txJson], { type: 'application/json' }); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = `tx-${lastTransaction.txid || 'unsigned'}.json`; - a.click(); - URL.revokeObjectURL(url); - } catch (err) { - console.error('[SendSubmitted] Failed to download transaction:', err); - } + if (!lastTransaction) { + navigate('home'); + return null; } - // Get real transaction data - const sentAmount = - lastTransaction?.amount.toLocaleString('en-US', { - maximumFractionDigits: 0, - }) || '0'; - - // Calculate USD value based on amount and current price - const amountInNock = lastTransaction?.amount || 0; - const usdValue = amountInNock * priceUsd; + const sentAmount = formatNock(lastTransaction.amount); const sentUsdValue = - usdValue > 0 - ? `$${usdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` - : '$0.00'; + priceUsd && lastTransaction.amount > 0 + ? `$${(lastTransaction.amount * priceUsd).toLocaleString('en-US', { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })}` + : '—'; return (
- {/* Activity Log Button (commented out - not in use) */} - {/*
- -
*/} - - {/* DEV: Download transaction button */} - {/* {lastTransaction?.protobufTx && ( -
- -
- )} */} - {/* Action Buttons */}
- {/* Content */} -
+ {/* Content - scrollable */} +
{approvedOrigins && approvedOrigins.length > 0 ? ( approvedOrigins.map(origin => ( @@ -114,6 +125,31 @@ export function WalletPermissionsScreen() { )}
+ + {/* Bottom button - pinned like other screens */} + {approvedOrigins && approvedOrigins.length > 0 && ( +
+ +
+ )}
); } diff --git a/extension/popup/screens/approvals/TransactionApprovalScreen.tsx b/extension/popup/screens/approvals/TransactionApprovalScreen.tsx index 520123f..9eee1a4 100644 --- a/extension/popup/screens/approvals/TransactionApprovalScreen.tsx +++ b/extension/popup/screens/approvals/TransactionApprovalScreen.tsx @@ -82,7 +82,7 @@ export function TransactionApprovalScreen() { {/* Amount */}
-
+
{formatNock(amountNum / NOCK_TO_NICKS)}{' '} NOCK
diff --git a/extension/popup/styles.css b/extension/popup/styles.css index bb15b81..5323eb1 100644 --- a/extension/popup/styles.css +++ b/extension/popup/styles.css @@ -1,11 +1,14 @@ @import 'tailwindcss'; -/* Import custom fonts */ -@import '@fontsource/lora/400.css'; -@import '@fontsource/lora/500.css'; -@import '@fontsource/lora/600.css'; -@import '@fontsource/inter/400.css'; -@import '@fontsource/inter/500.css'; +/* Raveo Display - variable font from https://github.com/jakubfoglar/raveo */ +@font-face { + font-family: 'Raveo Display'; + src: url('https://cdn.jsdelivr.net/gh/jakubfoglar/raveo@v1.1/fonts/variable/RaveoVF-subsetted.woff2') + format('woff2-variations'); + font-weight: 100 900; + font-style: normal; + font-display: swap; +} @theme { /* ============================================================================ @@ -20,10 +23,10 @@ --color-red-light: #412322; /* Dark Mode Greyscale (Default) */ - --color-bg: #050505; - --color-surface-900: #151515; - --color-surface-800: #1f1f1f; - --color-surface-700: #252525; + --color-bg: #0f0f0e; + --color-surface-900: #181818; + --color-surface-800: #222222; + --color-surface-700: #272727; --color-text-primary: #ffffff; --color-text-secondary: #aaaaaa; --color-text-muted: #909090; @@ -31,16 +34,16 @@ /* Home Screen Specific */ --color-home-accent: #191919; - --color-home-fill: #050505; + --color-home-fill: #0f0f0e; --color-tx-icon: #222222; /* Modals */ - --color-modal-overlay: #05050533; - --color-popover: #05050566; + --color-modal-overlay: #0f0f0e33; + --color-popover: #0f0f0e66; /* Font Families */ --font-serif: 'Lora', Georgia, serif; - --font-sans: 'Inter', system-ui, -apple-system, sans-serif; + --font-sans: 'Raveo Display', system-ui, sans-serif; /* Font Sizes */ --font-size-xs: 0.75rem; @@ -77,18 +80,18 @@ /* 2% */ /* Shadows */ - --shadow-xs: 0 0 4px 0 #05050514; - --shadow-md: 0 4px 12px 0 #0505051f; + --shadow-xs: 0 0 4px 0 #0f0f0e14; + --shadow-md: 0 4px 12px 0 #0f0f0e1f; /* Custom Figma Colors - Light Mode */ - --color-fn-bg: #ebebe9; + --color-fn-bg: #ebeae6; --color-fn-card: #ffffff; --color-fn-ink: #000000; - --color-fn-sub: #707070; + --color-fn-sub: #71706d; --color-fn-yellow: #ffc413; --color-fn-green: #369929; --color-fn-line: #e0e0e0; - --color-fn-line-muted: #dadad8; + --color-fn-line-muted: #dadad6; --color-fn-overlay: rgba(0, 0, 0, 0.6); --color-fn-overlay-light: rgba(0, 0, 0, 0.2); @@ -100,7 +103,7 @@ /* Custom Shadows */ --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.08); - /* Font Display (Lora) */ + /* Font Display */ --font-display: 'Lora', Georgia, serif; } @@ -113,12 +116,12 @@ html.light { /* Light Mode Greyscale */ --color-bg: #ffffff; --color-surface-900: #f2f2f0; - --color-surface-800: #ebebe9; - --color-surface-700: #dadad8; + --color-surface-800: #ebeae6; + --color-surface-700: #dadad6; --color-text-primary: #000000; - --color-text-secondary: #aaaaaa; - --color-text-muted: #707070; - --color-divider: #ebebe9; + --color-text-secondary: #aaaaa6; + --color-text-muted: #71706d; + --color-divider: #ebeae6; /* Light Mode Specific Colors */ --color-green: #369929; @@ -127,7 +130,7 @@ html.light { /* Home Screen Light Mode */ --color-home-accent: #ffffff; - --color-home-fill: #ebebe9; + --color-home-fill: #ebeae6; --color-tx-icon: #f2f2f0; /* Modals Light Mode */ diff --git a/package.json b/package.json index 227f7ca..efde083 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "vite": "^5.3.3" }, "dependencies": { - "@fontsource/inter": "^5.2.8", "@fontsource/lora": "^5.2.8", "@nockbox/iris-sdk": "github:nockbox/iris-sdk#feat/sdk-v0-and-bridge-APIs", "@scure/base": "^2.0.0", diff --git a/tailwind.config.ts b/tailwind.config.ts index aadb1d0..8c12ad5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,19 +5,20 @@ export default { theme: { extend: { fontFamily: { - display: ['Lora', 'serif'], - sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'Roboto'], + display: ['Lora', 'Georgia', 'serif'], + sans: ['Raveo Display', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'], + serif: ['Lora', 'Georgia', 'serif'], }, colors: { // Figma palette - flattened for Tailwind v4 - 'fn-bg': '#EBEBE9', + 'fn-bg': '#EBEAE6', 'fn-card': '#FFFFFF', 'fn-ink': '#000000', - 'fn-sub': '#707070', + 'fn-sub': '#71706D', 'fn-yellow': '#FFC413', 'fn-green': '#369929', 'fn-line': '#E0E0E0', - 'fn-lineMuted': '#DADAD8', + 'fn-lineMuted': '#DADAD6', 'fn-overlay': 'rgba(0,0,0,0.6)', 'fn-overlayLight': 'rgba(0,0,0,0.2)', },