From 0e0797ecd9433ca326d9180602a1fbea841a2361 Mon Sep 17 00:00:00 2001 From: hulxv Date: Fri, 27 Mar 2026 22:53:38 +0200 Subject: [PATCH] ui: replace emojis with icons --- package-lock.json | 7 + package.json | 1 + src/components/connection/ConnectionStatus.js | 4 +- src/components/log/Log.js | 8 +- src/components/market/Market.js | 20 +-- src/components/receive/AddressList.js | 10 +- src/components/receive/Receive.js | 14 +- src/components/send/Send.js | 24 +-- src/components/settings/FirstTimeSetup.js | 22 +-- src/components/settings/Settings.js | 20 +-- src/components/swap/Coinswap.js | 35 +++-- src/components/swap/Swap.js | 3 +- src/components/swap/SwapHistory.js | 9 +- src/components/swap/SwapReport.js | 40 ++--- src/components/taker/TakerInitialization.js | 10 +- src/components/wallet/TransactionsList.js | 14 +- src/js/icons.js | 145 ++++++++++++++++++ src/styles/output.css | 10 +- 18 files changed, 288 insertions(+), 108 deletions(-) create mode 100644 src/js/icons.js diff --git a/package-lock.json b/package-lock.json index 5b1a254..654dc19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@tailwindcss/cli": "^4.1.14", "electron-store": "^8.2.0", + "lucide": "^1.7.0", "tailwindcss": "^4.1.14" }, "devDependencies": { @@ -4771,6 +4772,12 @@ "node": ">=10" } }, + "node_modules/lucide": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/lucide/-/lucide-1.7.0.tgz", + "integrity": "sha512-aYNogbuIxea3a8offpKjdMGf2FsUk9GECFh0B4iJgXlJOX41+7/ncvLVluKki8477SoybEdyGGf+qGYLBDiEsA==", + "license": "ISC" + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", diff --git a/package.json b/package.json index 2484526..4b11c37 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "dependencies": { "@tailwindcss/cli": "^4.1.14", "electron-store": "^8.2.0", + "lucide": "^1.7.0", "tailwindcss": "^4.1.14" } } diff --git a/src/components/connection/ConnectionStatus.js b/src/components/connection/ConnectionStatus.js index 331c53a..403a5c6 100644 --- a/src/components/connection/ConnectionStatus.js +++ b/src/components/connection/ConnectionStatus.js @@ -2,6 +2,8 @@ * Bitcoin Core Connection Status Component * Shows connection progress and status while connecting to bitcoind */ +import { icons } from '../../js/icons.js'; + export function ConnectionStatusComponent(container, onConnected) { const connectionDiv = document.createElement('div'); connectionDiv.id = 'connection-status'; @@ -60,7 +62,7 @@ export function ConnectionStatusComponent(container, onConnected) { @@ -368,7 +370,7 @@ blockfilterindex=1 const label = document.createElement('span'); label.className = `text-sm ${result.ok ? 'text-green-400' : 'text-red-400'}`; - label.textContent = `${result.ok ? 'βœ…' : '❌'} ${result.label}`; + label.innerHTML = `${result.ok ? icons.checkCircle(14, 'mr-1 text-green-400') : icons.xCircle(14, 'mr-1 text-red-400')} ${result.label}`; const message = document.createElement('span'); message.className = 'text-xs text-gray-400 text-right'; @@ -538,14 +540,14 @@ blockfilterindex=1`; if (result.success) { alert( - `βœ… Backup created successfully!\n\nLocation: ${destinationPath}` + `Backup created successfully!\n\nLocation: ${destinationPath}` ); } else { - alert(`❌ Backup failed: ${result.error}`); + alert(`Backup failed: ${result.error}`); } } catch (error) { console.error('Backup error:', error); - alert(`❌ Backup failed: ${error.message}`); + alert(`Backup failed: ${error.message}`); } } @@ -641,7 +643,7 @@ blockfilterindex=1`; await navigator.clipboard.writeText(configText); const btn = content.querySelector('#copy-zmq-config-btn'); const originalText = btn.textContent; - btn.textContent = 'βœ“ Copied!'; + btn.innerHTML = icons.check(14, 'mr-1') + ' Copied!'; setTimeout(() => { btn.textContent = originalText; }, 2000); @@ -703,7 +705,7 @@ zmqpubrawtx=${rawtx}`; await navigator.clipboard.writeText(configText); const btn = content.querySelector('#copy-full-config-btn'); const originalText = btn.textContent; - btn.textContent = 'βœ“ Copied!'; + btn.innerHTML = icons.check(14, 'mr-1') + ' Copied!'; setTimeout(() => { btn.textContent = originalText; }, 2000); diff --git a/src/components/swap/Coinswap.js b/src/components/swap/Coinswap.js index ad2aa29..33971e0 100644 --- a/src/components/swap/Coinswap.js +++ b/src/components/swap/Coinswap.js @@ -1,4 +1,5 @@ import { SwapStateManager, formatElapsedTime } from './SwapStateManager.js'; +import { icons } from '../../js/icons.js'; export async function CoinswapComponent(container, swapConfig) { function normalizeProtocol(value, fallbackIsTaproot = false) { @@ -181,7 +182,7 @@ export async function CoinswapComponent(container, swapConfig) { function markAllMakersComplete() { for (let i = 0; i < swapData.makers; i++) { updateMakerVisibility(i, true); - updateHopStatus(i, 'βœ“ Complete', 'green'); + updateHopStatus(i, `${icons.check(14, 'mr-1')} Complete`, 'green'); } } @@ -317,7 +318,7 @@ export async function CoinswapComponent(container, swapConfig) { ); if (slot !== -1) { setTransactionConfirmed(slot); - updateHopStatus(slot, 'βœ“ Confirmed', 'green'); + updateHopStatus(slot, `${icons.check(14, 'mr-1')} Confirmed`, 'green'); const confirmedHops = swapData.transactions.filter( (tx) => tx.status === 'confirmed' @@ -342,7 +343,7 @@ export async function CoinswapComponent(container, swapConfig) { ); if (slot !== -1) { setTransactionConfirmed(slot); - updateHopStatus(slot, 'βœ“ Confirmed', 'green'); + updateHopStatus(slot, `${icons.check(14, 'mr-1')} Confirmed`, 'green'); // βœ… When outgoing is confirmed, light up ALL makers and mark intermediate hops as "Processing" if (slot === 0) { @@ -352,7 +353,7 @@ export async function CoinswapComponent(container, swapConfig) { } // Mark intermediate hops as processing (hops 1 to N-1) for (let i = 1; i < swapData.hops - 1; i++) { - updateHopStatus(i, 'πŸ”„ Processing...', 'blue'); + updateHopStatus(i, `${icons.refreshCw(14, 'mr-1 animate-spin')} Processing...`, 'blue'); } console.log( `βœ… Outgoing contract confirmed. All ${swapData.makers} makers now active` @@ -384,7 +385,7 @@ export async function CoinswapComponent(container, swapConfig) { ) { // Mark all intermediate hops as "Keys received" for (let i = 1; i < swapData.hops - 1; i++) { - updateHopStatus(i, 'πŸ”‘ Keys received', 'green'); + updateHopStatus(i, `${icons.key(14, 'mr-1')} Keys received`, 'green'); } } // V2: "Registered watcher for taker's incoming contract" @@ -395,7 +396,7 @@ export async function CoinswapComponent(container, swapConfig) { if (txMatch) { // This is the final hop - mark it const lastHop = swapData.hops - 1; - updateHopStatus(lastHop, 'πŸ“₯ Receiving...', 'blue'); + updateHopStatus(lastHop, `${icons.arrowDownCircle(14, 'mr-1')} Receiving...`, 'blue'); } } // V2: "Sweeping taker's incoming contract" @@ -408,19 +409,19 @@ export async function CoinswapComponent(container, swapConfig) { const txMatch = message.match(/([a-f0-9]{64})/i); if (txMatch) { const lastHop = swapData.hops - 1; - updateHopStatus(lastHop, 'βœ“ Swept', 'green'); + updateHopStatus(lastHop, `${icons.check(14, 'mr-1')} Swept`, 'green'); } } // V1: "Swaps settled successfully" else if (message.includes('Swaps settled successfully')) { for (let i = 0; i < swapData.hops; i++) { - updateHopStatus(i, 'βœ“ Complete', 'green'); + updateHopStatus(i, `${icons.check(14, 'mr-1')} Complete`, 'green'); } } // V2: "Taker sweep completed successfully" else if (message.includes('Taker sweep completed successfully')) { for (let i = 0; i < swapData.hops; i++) { - updateHopStatus(i, 'βœ“ Complete', 'green'); + updateHopStatus(i, `${icons.check(14, 'mr-1')} Complete`, 'green'); } // Make sure all makers are visible for (let i = 0; i < swapData.makers; i++) { @@ -431,7 +432,7 @@ export async function CoinswapComponent(container, swapConfig) { // V2: "Successfully Completed Taproot Coinswap" else if (message.includes('Successfully Completed Taproot Coinswap')) { for (let i = 0; i < swapData.hops; i++) { - updateHopStatus(i, 'βœ“ Complete', 'green'); + updateHopStatus(i, `${icons.check(14, 'mr-1')} Complete`, 'green'); } // Make sure all makers are visible for (let i = 0; i < swapData.makers; i++) { @@ -451,7 +452,7 @@ export async function CoinswapComponent(container, swapConfig) { else if (message.includes('Starting forward-flow private key handover')) { // Mark intermediate hops as doing key exchange for (let i = 1; i < swapData.hops - 1; i++) { - updateHopStatus(i, 'πŸ” Key exchange...', 'yellow'); + updateHopStatus(i, `${icons.keyRound(14, 'mr-1')} Key exchange...`, 'yellow'); } } // V2: "Downloading offer from taproot maker" @@ -486,7 +487,7 @@ export async function CoinswapComponent(container, swapConfig) { message.includes('Verified Taproot contract data from maker') ) { updateMakerVisibility(makerIndex, true); - updateHopStatus(makerIndex, 'βœ“ Contract ready', 'green'); + updateHopStatus(makerIndex, `${icons.check(14, 'mr-1')} Contract ready`, 'green'); } // V2: "Received private key from maker N" else if ( @@ -494,7 +495,7 @@ export async function CoinswapComponent(container, swapConfig) { message.includes('Received private key from maker') ) { updateMakerVisibility(makerIndex, true); - updateHopStatus(makerIndex, 'πŸ” Key received', 'green'); + updateHopStatus(makerIndex, `${icons.keyRound(14, 'mr-1')} Key received`, 'green'); } // V2: "Sending privkey to maker N and awaiting response" else if ( @@ -720,7 +721,7 @@ export async function CoinswapComponent(container, swapConfig) {
-

πŸ”’ Your funds are protected

+

${icons.shieldCheck(16, 'mr-2')} Your funds are protected

Recovery process has started automatically. Check your wallet for returned funds.

@@ -1023,7 +1024,7 @@ export async function CoinswapComponent(container, swapConfig) {
Locking Funds - ${outgoing.status === 'confirmed' ? 'βœ“ Confirmed' : outgoing.txid ? 'Broadcasted' : 'Pending'} + ${outgoing.status === 'confirmed' ? `${icons.check(14, 'mr-1')} Confirmed` : outgoing.txid ? 'Broadcasted' : 'Pending'}
${outgoing.txid ? `
${outgoing.txid}
` : '
Waiting for broadcast...
'} @@ -1033,7 +1034,7 @@ export async function CoinswapComponent(container, swapConfig) {
Receiving Funds - ${incoming.status === 'confirmed' ? 'βœ“ Received' : 'Waiting...'} + ${incoming.status === 'confirmed' ? `${icons.check(14, 'mr-1')} Received` : 'Waiting...'}
${incoming.txid ? `
${incoming.txid}
` : '
Sweep pending
'} @@ -1061,7 +1062,7 @@ export async function CoinswapComponent(container, swapConfig) {
Hop ${index + 1} - ${tx.status === 'confirmed' ? 'βœ“' : tx.status === 'broadcasting' ? 'πŸ“‘' : '⏳'} + ${tx.status === 'confirmed' ? icons.check(14) : tx.status === 'broadcasting' ? icons.radio(14) : icons.hourglass(14)}
${tx.txid ? tx.txid.substring(0, 12) + '...' : 'Pending'}
diff --git a/src/components/swap/Swap.js b/src/components/swap/Swap.js index 071ed97..5065080 100644 --- a/src/components/swap/Swap.js +++ b/src/components/swap/Swap.js @@ -1,3 +1,4 @@ +import { icons } from '../../js/icons.js'; import { SwapStateManager, formatRelativeTime } from './SwapStateManager.js'; import { buildSwapHistoryMarkup, @@ -768,7 +769,7 @@ export async function SwapComponent(container) { if (warnings.length > 0) { warningEl.innerHTML = warnings - .map((w) => `

⚠️ ${w}

`) + .map((w) => `

${icons.alertTriangle(12, 'mr-1')} ${w}

`) .join(''); warningEl.classList.remove('hidden'); startBtn.disabled = true; diff --git a/src/components/swap/SwapHistory.js b/src/components/swap/SwapHistory.js index fa3f8e6..818d193 100644 --- a/src/components/swap/SwapHistory.js +++ b/src/components/swap/SwapHistory.js @@ -3,6 +3,7 @@ import { formatRelativeTime, formatElapsedTime, } from './SwapStateManager.js'; +import { icons } from '../../js/icons.js'; let swapHistory = []; @@ -195,7 +196,7 @@ export function buildSwapHistoryMarkup(history) { if (history.length === 0) { return `
-
πŸ”„
+
${icons.refreshCw(64)}

No Swap History

You haven't completed any coinswaps yet.

@@ -222,7 +223,7 @@ export function buildSwapHistoryMarkup(history) {
- βœ“ + ${icons.check(24)}
@@ -341,7 +342,7 @@ export async function SwapHistoryComponent(container) { if (swapHistory.length === 0) { return `
-
πŸ”„
+
${icons.refreshCw(64)}

No Swap History

You haven't completed any coinswaps yet.

+
@@ -415,14 +417,14 @@ export function SwapReportComponent(container, swapReport) {
-

πŸ”’ Privacy Contribution

+

${icons.shieldCheck(16, 'mr-2')} Privacy Contribution

This maker broke the transaction link between hop ${makerIndex} and hop ${makerIndex + 2}, making it impossible to trace the flow of funds.

+ data-txid="${artifact.txid}" title="Copy">${icons.clipboardCopy(14, 'mr-1')} + data-txid="${artifact.txid}" title="View on Explorer">${icons.externalLink(14, 'mr-1')}
@@ -832,7 +834,7 @@ export function SwapReportComponent(container, swapReport) { You Completed βœ“ + text-anchor="middle" fill="#6EE7B7" font-size="${Math.max(8, youFont - 12)}">✓ Completed @@ -944,7 +946,7 @@ export function SwapReportComponent(container, swapReport) {
- πŸͺ™ + ${icons.circleDollarSign(20, 'mr-2')}

@@ -960,7 +962,7 @@ export function SwapReportComponent(container, swapReport) {
- βœ… SWAP COMPLETED SUCCESSFULLY + ${icons.checkCircle(20, 'mr-2')} SWAP COMPLETED SUCCESSFULLY
ID: @@ -1003,7 +1005,7 @@ export function SwapReportComponent(container, swapReport) {

- ℹ️ Report Summary + ${icons.info(16, 'mr-2')} Report Summary

${getReportInfoLines()} @@ -1017,7 +1019,7 @@ export function SwapReportComponent(container, swapReport) {

Swap Amount

- πŸ’° + ${icons.circleDollarSign(16, 'mr-2')}

${satsToBtc(report.targetAmount)} BTC

${formatNumber(report.targetAmount)} sats

@@ -1026,7 +1028,7 @@ export function SwapReportComponent(container, swapReport) {

Duration

- ⏱️ + ${icons.timer(16, 'mr-2')}

${formatDuration(report.swapDurationSeconds)}

${report.swapDurationSeconds.toFixed(1)}s total

@@ -1035,7 +1037,7 @@ export function SwapReportComponent(container, swapReport) {

On-Chain Artifacts

- πŸ”— + ${icons.link(16, 'mr-2')}

${report.artifactsCount} @@ -1048,7 +1050,7 @@ export function SwapReportComponent(container, swapReport) {

Swap Partners

- 🀝 + ${icons.handshake(16, 'mr-2')}

${report.makersCount || report.makerAddresses.length}

Makers recorded in the report

@@ -1057,7 +1059,7 @@ export function SwapReportComponent(container, swapReport) {

Total Fee

- πŸ’Έ + ${icons.receipt(16, 'mr-2')}

${report.feePercentage.toFixed(2)}%

${formatNumber(report.totalFee)} sats

@@ -1073,7 +1075,7 @@ export function SwapReportComponent(container, swapReport) {

- πŸ“ Transaction Artifacts + ${icons.fileText(16, 'mr-2')} Transaction Artifacts

${buildTransactionArtifactsHtml()} @@ -1083,7 +1085,7 @@ export function SwapReportComponent(container, swapReport) {

- 🀝 Swap Partners + ${icons.handshake(16, 'mr-2')} Swap Partners (Click for details)

@@ -1099,7 +1101,7 @@ export function SwapReportComponent(container, swapReport) {

- πŸ’° Fee Details + ${icons.circleDollarSign(16, 'mr-2')} Fee Details

@@ -1123,7 +1125,7 @@ export function SwapReportComponent(container, swapReport) {

- πŸ“¦ UTXO Summary + ${icons.package(16, 'mr-2')} UTXO Summary

@@ -1143,7 +1145,7 @@ export function SwapReportComponent(container, swapReport) {

- πŸ’‘ Tip: This is the password you set when creating your wallet. + ${icons.lightbulb(16, 'mr-1')} Tip: This is the password you set when creating your wallet.