From e077e047f5af67e86f1ca52037b82ece3dba5064 Mon Sep 17 00:00:00 2001 From: Gohlub <62673775+Gohlub@users.noreply.github.com> Date: Wed, 4 Mar 2026 01:11:52 -0500 Subject: [PATCH 1/5] change colors --- extension/popup/styles.css | 36 ++++++++++++++++++------------------ tailwind.config.ts | 6 +++--- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/extension/popup/styles.css b/extension/popup/styles.css index bb15b81..2c05ec2 100644 --- a/extension/popup/styles.css +++ b/extension/popup/styles.css @@ -20,10 +20,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,12 +31,12 @@ /* 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; @@ -77,18 +77,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); @@ -113,12 +113,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 +127,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/tailwind.config.ts b/tailwind.config.ts index aadb1d0..da0e9a8 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -10,14 +10,14 @@ export default { }, 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)', }, From aab7c52c0fb16e9f1ee05ae4b7423fd3ec23e2a3 Mon Sep 17 00:00:00 2001 From: Gohlub <62673775+Gohlub@users.noreply.github.com> Date: Wed, 4 Mar 2026 01:12:18 -0500 Subject: [PATCH 2/5] disconnect button for origins --- .../popup/screens/WalletPermissionsScreen.tsx | 42 +++++++++++++++++-- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/extension/popup/screens/WalletPermissionsScreen.tsx b/extension/popup/screens/WalletPermissionsScreen.tsx index ea1d395..31723a7 100644 --- a/extension/popup/screens/WalletPermissionsScreen.tsx +++ b/extension/popup/screens/WalletPermissionsScreen.tsx @@ -32,9 +32,20 @@ export function WalletPermissionsScreen() { } } + async function handleDisconnectAll() { + try { + for (const origin of approvedOrigins) { + await send(INTERNAL_METHODS.REVOKE_ORIGIN, [{ origin }]); + } + await loadApprovedOrigins(); + } catch (error) { + console.error('Failed to disconnect all:', error); + } + } + return (
{/* Header */} @@ -61,8 +72,8 @@ export function WalletPermissionsScreen() { - {/* 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 && ( +
+ +
+ )}
); } From 3769f2a2a1074f7b0cdb30fb48fe5eff2adb9401 Mon Sep 17 00:00:00 2001 From: Gohlub <62673775+Gohlub@users.noreply.github.com> Date: Wed, 4 Mar 2026 01:57:07 -0500 Subject: [PATCH 3/5] more styling changes --- extension/manifest.json | 2 +- .../components/icons/ChevronDownIcon.tsx | 5 +- extension/popup/index.tsx | 5 +- extension/popup/screens/HomeScreen.tsx | 4 +- extension/popup/screens/SendReviewScreen.tsx | 234 +++++------ extension/popup/screens/SendScreen.tsx | 3 +- .../popup/screens/SendSubmittedScreen.tsx | 388 ++++++++++++------ .../screens/TransactionDetailsScreen.tsx | 2 +- .../approvals/TransactionApprovalScreen.tsx | 2 +- extension/popup/styles.css | 19 +- package.json | 1 - tailwind.config.ts | 5 +- 12 files changed, 411 insertions(+), 259 deletions(-) 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..8b93bad 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} - +
acc.address.toLowerCase() === (lastTransaction.to || '').toLowerCase() + ); + const recipientLabel = recipientAccount?.name ?? 'Receiving address'; + + const usdValue = lastTransaction.amount * (priceUsd || 0); + const [isSending, setIsSending] = useState(false); const [error, setError] = useState(''); @@ -116,7 +119,9 @@ export function SendReviewScreen() { > -

Review

+

+ Review Transfer +

@@ -126,114 +131,113 @@ 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 -
-
-
- {total} NOCK -
+ {/* Receiver card */} +
+
+ {recipientAccount ? (
- {formatNick(totalInNicks)} nicks +
+ ) : ( + + )} +
+
+
+ {recipientLabel} +
+
+ {toAddress}
- {/* Remaining balance */} + {/* Network fee - single row per Figma */}
- Balance after: {remainingBalance} NOCK +
+ Network fee +
+
+ {feeInNocks} NOCK +
@@ -269,37 +273,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..b655216 100644 --- a/extension/popup/screens/SendSubmittedScreen.tsx +++ b/extension/popup/screens/SendSubmittedScreen.tsx @@ -1,58 +1,105 @@ +import { useEffect } from 'react'; import { useStore } from '../store'; +import { truncateAddress } from '../utils/format'; +import { formatNock } from '../../shared/currency'; import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon'; -import { SendPaperPlaneIcon } from '../components/icons/SendPaperPlaneIcon'; +import { ChevronRightIcon } from '../components/icons/ChevronRightIcon'; import { PlusIcon } from '../components/icons/PlusIcon'; +import { CheckIcon } from '../components/icons/CheckIcon'; +import { AccountIcon } from '../components/AccountIcon'; +import { useCopyToClipboard } from '../hooks/useCopyToClipboard'; +import IrisLogo40 from '../assets/iris-logo-40.svg'; +import IrisLogoBlue from '../assets/iris-logo-blue.svg'; export function SendSubmittedScreen() { - const { navigate, lastTransaction, priceUsd } = useStore(); + const { + navigate, + wallet, + lastTransaction, + priceUsd, + walletTransactions, + fetchBalance, + fetchWalletTransactions, + } = useStore(); + const { copied, copyToClipboard } = useCopyToClipboard(); - function handleBack() { + // Poll for status updates: fetchBalance triggers SYNC_UTXOS (updates vault with + // confirmation status), then fetchWalletTransactions reads the updated data + useEffect(() => { + const refresh = async () => { + await fetchBalance(); + await fetchWalletTransactions(); + }; + refresh(); + const interval = setInterval(refresh, 5000); + return () => clearInterval(interval); + }, [fetchBalance, fetchWalletTransactions]); + + if (!lastTransaction) { navigate('home'); + return null; } - function handleViewActivity() { - navigate('home'); // show transactions on home + + const tx = lastTransaction; + + // Find matching wallet transaction to get live status + const walletTx = walletTransactions.find( + wt => wt.txHash && tx.txid && wt.txHash.toLowerCase() === tx.txid.toLowerCase() + ); + const status = walletTx?.status; + const statusDisplay = + status === 'confirmed' + ? 'Confirmed' + : status === 'failed' || status === 'expired' + ? status === 'failed' + ? 'Failed' + : 'Expired' + : 'Pending'; + const statusColor = + status === 'confirmed' + ? 'var(--color-green)' + : status === 'failed' || status === 'expired' + ? 'var(--color-red)' + : '#C88414'; + const currentAccount = wallet.currentAccount; + const amount = formatNock(tx.amount); + const feeInNocks = formatNock(tx.fee); + const total = formatNock(tx.amount + tx.fee); + const fromAddress = truncateAddress(tx.from); + const toAddress = truncateAddress(tx.to); + + const recipientAccount = wallet.accounts?.find( + acc => acc.address.toLowerCase() === (tx.to || '').toLowerCase() + ); + const recipientLabel = recipientAccount?.name ?? 'Unknown wallet'; + + const amountUsd = tx.amount * (priceUsd || 0); + const totalUsd = (tx.amount + tx.fee) * (priceUsd || 0); + + function handleBack() { + navigate('home'); } - // Dev function: Download transaction protobuf for debugging - function handleDownloadTx() { - if (!lastTransaction?.protobufTx) { - console.warn('[SendSubmitted] No transaction data available to download'); - return; + function handleViewExplorer() { + if (tx.txid) { + window.open(`https://nockscan.net/tx/${tx.txid}`, '_blank'); } + } - 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); + function handleCopyTxId() { + if (tx.txid) { + copyToClipboard(tx.txid); } } - // 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 sentUsdValue = - usdValue > 0 - ? `$${usdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` - : '$0.00'; + function handleActivityLog() { + navigate('home'); + } return (
{/* Header */}
(e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')} + onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')} > -

- Submitted -

+

Sent

{/* Content */} -
-
- {/* Success Section */} +
+
+ {/* Amount Section - Figma: logo, -amount, USD */}
-
- -
-
-

- Your transaction -
- was submitted + +
+

+ -{amount} NOCK

- Check the transaction activity below + {amountUsd > 0 + ? `$${amountUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` + : '—'}

- {/* Transaction Summary */} -
+ {/* Status card */} +
+
Status
+ {statusDisplay} +
+
+ + {/* Wallet cards with circular middle - same as Review screen */} +
+
+ {/* Sender card */}
+
+ +
+
+
+ {currentAccount?.name ?? 'Wallet'} +
+
+ {fromAddress} +
+
+
+ + {/* Circular middle element */} +
+ +
+ + {/* Receiver card */} +
- You sent +
+ {recipientAccount ? ( +
+ +
+ ) : ( + + )} +
+
+
+ {recipientLabel} +
+
+ {toAddress} +
+
-
+
+ + {/* Network fee & Total card */} +
+
- {sentAmount} NOCK + Network fee
- {sentUsdValue} + {feeInNocks} NOCK +
+
+
+
+
Total
+
+
+ {total} NOCK +
+
+ {totalUsd > 0 + ? `$${totalUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` + : '—'} +
+ + {/* Action buttons - View on explorer, Copy transaction ID */} +
+ + +
-
- {/* Activity Log Button (commented out - not in use) */} - {/*
+ {/* Activity log button */} -
*/} - - {/* DEV: Download transaction button */} - {/* {lastTransaction?.protobufTx && ( -
- -
- )} */} - - {/* Action Buttons */} -
-
diff --git a/extension/popup/screens/TransactionDetailsScreen.tsx b/extension/popup/screens/TransactionDetailsScreen.tsx index 29f8f39..b9f81c8 100644 --- a/extension/popup/screens/TransactionDetailsScreen.tsx +++ b/extension/popup/screens/TransactionDetailsScreen.tsx @@ -193,7 +193,7 @@ export function TransactionDetailsScreen() { Iris

{transactionType === 'sent' && '-'} 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 2c05ec2..90dbece 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 { /* ============================================================================ @@ -40,7 +43,7 @@ /* 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; @@ -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; } 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 da0e9a8..8c12ad5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,8 +5,9 @@ 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 From 3ffe1804ea752058b0eb7da6df94c17594b1ed51 Mon Sep 17 00:00:00 2001 From: Gohlub <62673775+Gohlub@users.noreply.github.com> Date: Thu, 5 Mar 2026 01:26:15 -0500 Subject: [PATCH 4/5] more styling changes --- extension/popup/screens/HomeScreen.tsx | 2 +- extension/popup/screens/SendReviewScreen.tsx | 50 +-- .../popup/screens/SendSubmittedScreen.tsx | 338 ++++-------------- .../screens/TransactionDetailsScreen.tsx | 202 ++++++++--- 4 files changed, 235 insertions(+), 357 deletions(-) diff --git a/extension/popup/screens/HomeScreen.tsx b/extension/popup/screens/HomeScreen.tsx index 8b93bad..c3fb8e0 100644 --- a/extension/popup/screens/HomeScreen.tsx +++ b/extension/popup/screens/HomeScreen.tsx @@ -750,7 +750,7 @@ export function HomeScreen() { {group.items.map((t, i) => ( -

Sent

+

+ Submitted +

{/* Content */} -
-
- {/* Amount Section - Figma: logo, -amount, USD */} +
+
+ {/* Success Section */}
- -
-

- -{amount} NOCK +
+ +
+
+

+ Your transaction +
+ was submitted

- {amountUsd > 0 - ? `$${amountUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` - : '—'} + Check the transaction activity below

- {/* Status card */} -
-
Status
+ {/* Transaction Summary */} +
- {statusDisplay} -
-
- - {/* Wallet cards with circular middle - same as Review screen */} -
-
- {/* Sender card */} -
-
- -
-
-
- {currentAccount?.name ?? 'Wallet'} -
-
- {fromAddress} -
-
-
- - {/* Circular middle element */} -
- -
- - {/* Receiver card */}
-
- {recipientAccount ? ( -
- -
- ) : ( - - )} -
-
-
- {recipientLabel} -
-
- {toAddress} -
-
+ You sent
-
- - {/* Network fee & Total card */} -
-
+
- Network fee + {sentAmount} NOCK
- {feeInNocks} NOCK + {sentUsdValue}
-
-
-
Total
-
-
- {total} NOCK -
-
- {totalUsd > 0 - ? `$${totalUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` - : '—'} -
-
-
-
- - {/* Action buttons - View on explorer, Copy transaction ID */} -
- -
+
- {/* Activity log button */} + {/* Action Buttons */} +
diff --git a/extension/popup/screens/TransactionDetailsScreen.tsx b/extension/popup/screens/TransactionDetailsScreen.tsx index b9f81c8..8ee7202 100644 --- a/extension/popup/screens/TransactionDetailsScreen.tsx +++ b/extension/popup/screens/TransactionDetailsScreen.tsx @@ -3,8 +3,10 @@ import { useStore } from '../store'; import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon'; import { ChevronRightIcon } from '../components/icons/ChevronRightIcon'; import { CheckIcon } from '../components/icons/CheckIcon'; +import { AccountIcon } from '../components/AccountIcon'; import IrisLogo40 from '../assets/iris-logo-40.svg'; -import { truncateAddress, formatUTCTimestamp } from '../utils/format'; +import IrisLogoBlue from '../assets/iris-logo-blue.svg'; +import { truncateAddress } from '../utils/format'; import { NOCK_TO_NICKS } from '../../shared/constants'; export function TransactionDetailsScreen() { @@ -12,6 +14,7 @@ export function TransactionDetailsScreen() { navigate, selectedTransaction, wallet, + priceUsd, fetchWalletTransactions, walletTransactions, setSelectedTransaction, @@ -69,10 +72,10 @@ export function TransactionDetailsScreen() { maximumFractionDigits: 2, }); - // Only show USD value if we have historical price stored - const usdValue = selectedTransaction.priceUsdAtTime - ? `$${(amountNock * selectedTransaction.priceUsdAtTime).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` - : null; + const usdValue = + priceUsd && priceUsd > 0 + ? `$${(amountNock * priceUsd).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` + : null; // Determine status display let statusText: string; @@ -102,21 +105,41 @@ export function TransactionDetailsScreen() { statusColor = 'var(--color-text-muted)'; } - const currentAddress = wallet.currentAccount?.address || ''; + const currentAccount = wallet.currentAccount; + const currentAddress = currentAccount?.address || ''; const counterpartyAddress = selectedTransaction.direction === 'outgoing' ? selectedTransaction.recipient : selectedTransaction.sender; - const fromAddress = + // Resolve sender and receiver for wallet cards (like review screen) + const senderAccount = + selectedTransaction.direction === 'outgoing' + ? currentAccount + : wallet.accounts?.find( + acc => counterpartyAddress && acc.address.toLowerCase() === counterpartyAddress.toLowerCase() + ); + const receiverAccount = + selectedTransaction.direction === 'outgoing' + ? wallet.accounts?.find( + acc => counterpartyAddress && acc.address.toLowerCase() === counterpartyAddress.toLowerCase() + ) + : currentAccount; + + const senderLabel = senderAccount?.name ?? 'Unknown wallet'; + const receiverLabel = receiverAccount?.name ?? 'Receiving address'; + + const senderAddress = selectedTransaction.direction === 'outgoing' ? truncateAddress(currentAddress) : counterpartyAddress ? truncateAddress(counterpartyAddress) : 'Unknown'; - const toAddress = + const receiverAddress = selectedTransaction.direction === 'outgoing' - ? truncateAddress(counterpartyAddress || '') + ? counterpartyAddress + ? truncateAddress(counterpartyAddress) + : 'Unknown' : truncateAddress(currentAddress); // For incoming transactions, we don't have fee info @@ -128,13 +151,11 @@ export function TransactionDetailsScreen() { selectedTransaction.direction === 'outgoing' ? amountNock + feeNock : amountNock; const total = `${totalNock.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} NOCK`; - // Only show total USD if we have historical price stored - const totalUsd = selectedTransaction.priceUsdAtTime - ? `$${(totalNock * selectedTransaction.priceUsdAtTime).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` - : null; + const totalUsd = + priceUsd && priceUsd > 0 + ? `$${(totalNock * priceUsd).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` + : null; const transactionId = selectedTransaction.txHash || selectedTransaction.id; - const transactionTimeUTC = formatUTCTimestamp(selectedTransaction.createdAt); - function handleBack() { navigate('home'); } @@ -215,7 +236,7 @@ export function TransactionDetailsScreen() { {/* Status */}
Status
@@ -225,70 +246,133 @@ export function TransactionDetailsScreen() {
- {/* Transaction Time */} -
-
-
Time
+ {/* Wallet cards with circular middle - same as Review screen */} +
+
+ {/* Sender card */}
- {transactionTimeUTC} -
-
-
- - {/* From / To */} -
-
-
-
From
- {fromAddress} + {senderAccount ? ( + + ) : ( + + )} +
+
+
+ {senderLabel} +
+
+ {senderAddress} +
-
- + + {/* Circular middle element */} +
+
-
-
To
+ + {/* Receiver card */} +
- {toAddress} + {receiverAccount ? ( + + ) : ( + + )} +
+
+
+ {receiverLabel} +
+
+ {receiverAddress} +
- {/* Fee and Total */} + {/* Fee and Total - Figma 1357-4155 */}
-
-
Network fee
-
+
+
+ Network fee +
+
{networkFee}
-
-
-
Total
-
-
+
+
+
+ Total +
+
+
{total}
{totalUsd && (
{totalUsd} @@ -311,7 +395,7 @@ export function TransactionDetailsScreen() { }} onMouseEnter={e => { if (!e.currentTarget.disabled) { - e.currentTarget.style.backgroundColor = 'var(--color-surface-800)'; + e.currentTarget.style.backgroundColor = 'var(--color-surface-900)'; } }} onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')} @@ -329,7 +413,7 @@ export function TransactionDetailsScreen() { }} onMouseEnter={e => { if (!copiedTxId) { - e.currentTarget.style.backgroundColor = 'var(--color-surface-800)'; + e.currentTarget.style.backgroundColor = 'var(--color-surface-900)'; } }} onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')} From dd2bca1cb930f70aa80420ef3f2d510da98a7a9e Mon Sep 17 00:00:00 2001 From: Gohlub <62673775+Gohlub@users.noreply.github.com> Date: Thu, 5 Mar 2026 01:49:55 -0500 Subject: [PATCH 5/5] formatting --- extension/background/index.ts | 2 +- .../screens/TransactionDetailsScreen.tsx | 6 ++++-- extension/popup/styles.css | 20 +++++++++---------- 3 files changed, 15 insertions(+), 13 deletions(-) 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/popup/screens/TransactionDetailsScreen.tsx b/extension/popup/screens/TransactionDetailsScreen.tsx index 8ee7202..c3ed898 100644 --- a/extension/popup/screens/TransactionDetailsScreen.tsx +++ b/extension/popup/screens/TransactionDetailsScreen.tsx @@ -117,12 +117,14 @@ export function TransactionDetailsScreen() { selectedTransaction.direction === 'outgoing' ? currentAccount : wallet.accounts?.find( - acc => counterpartyAddress && acc.address.toLowerCase() === counterpartyAddress.toLowerCase() + acc => + counterpartyAddress && acc.address.toLowerCase() === counterpartyAddress.toLowerCase() ); const receiverAccount = selectedTransaction.direction === 'outgoing' ? wallet.accounts?.find( - acc => counterpartyAddress && acc.address.toLowerCase() === counterpartyAddress.toLowerCase() + acc => + counterpartyAddress && acc.address.toLowerCase() === counterpartyAddress.toLowerCase() ) : currentAccount; diff --git a/extension/popup/styles.css b/extension/popup/styles.css index 90dbece..5323eb1 100644 --- a/extension/popup/styles.css +++ b/extension/popup/styles.css @@ -23,7 +23,7 @@ --color-red-light: #412322; /* Dark Mode Greyscale (Default) */ - --color-bg: #0F0F0E; + --color-bg: #0f0f0e; --color-surface-900: #181818; --color-surface-800: #222222; --color-surface-700: #272727; @@ -34,12 +34,12 @@ /* Home Screen Specific */ --color-home-accent: #191919; - --color-home-fill: #0F0F0E; + --color-home-fill: #0f0f0e; --color-tx-icon: #222222; /* Modals */ - --color-modal-overlay: #0F0F0E33; - --color-popover: #0F0F0E66; + --color-modal-overlay: #0f0f0e33; + --color-popover: #0f0f0e66; /* Font Families */ --font-serif: 'Lora', Georgia, serif; @@ -80,11 +80,11 @@ /* 2% */ /* Shadows */ - --shadow-xs: 0 0 4px 0 #0F0F0E14; - --shadow-md: 0 4px 12px 0 #0F0F0E1f; + --shadow-xs: 0 0 4px 0 #0f0f0e14; + --shadow-md: 0 4px 12px 0 #0f0f0e1f; /* Custom Figma Colors - Light Mode */ - --color-fn-bg: #ebeaE6; + --color-fn-bg: #ebeae6; --color-fn-card: #ffffff; --color-fn-ink: #000000; --color-fn-sub: #71706d; @@ -116,12 +116,12 @@ html.light { /* Light Mode Greyscale */ --color-bg: #ffffff; --color-surface-900: #f2f2f0; - --color-surface-800: #ebeaE6; + --color-surface-800: #ebeae6; --color-surface-700: #dadad6; --color-text-primary: #000000; --color-text-secondary: #aaaaa6; --color-text-muted: #71706d; - --color-divider: #ebeaE6; + --color-divider: #ebeae6; /* Light Mode Specific Colors */ --color-green: #369929; @@ -130,7 +130,7 @@ html.light { /* Home Screen Light Mode */ --color-home-accent: #ffffff; - --color-home-fill: #ebeaE6; + --color-home-fill: #ebeae6; --color-tx-icon: #f2f2f0; /* Modals Light Mode */