Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-07-03 23:33:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

website: redesign part 31

Browse Source
This commit is contained in:
nym21
2026-06-18 22:39:28 +02:00
parent 408d83c350
commit 00f7d69ea6
37 changed files with 811 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website_next/wallets/wallet/actions/style.css
+26
View File
@@ -0,0 +1,26 @@
main.wallets {
.wallets__wallet-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: end;
justify-content: end;
@media (max-width: 34rem) {
justify-content: start;
}
> button {
border-color: var(--orange);
color: var(--black);
background: var(--orange);
&:disabled {
border-color: color-mix(in oklch, var(--gray) 35%, transparent);
color: var(--gray);
background: transparent;
cursor: default;
}
}
}
}
website_next/wallets/wallet/address/index.js
+8 -8
View File
@@ -14,14 +14,14 @@ export function createGroupedAddress(text) {
const groups = text.match(/.{1,4}/g) ?? [];
for (let groupIndex = 0; groupIndex < groups.length; groupIndex += 1) {
const group = createElement("span", "wallets__address-group");
const group = document.createElement("span");
for (const character of groups[groupIndex]) {
const span = createElement(
"span",
Number.isNaN(Number(character))
? "wallets__address-letter"
: "wallets__address-number",
const span = document.createElement("span");
span.setAttribute(
"data-wallets-address-character",
Number.isNaN(Number(character)) ? "letter" : "number",
);
span.append(character);
@@ -55,7 +55,7 @@ function createPrivateAddress(address) {
* @param {WalletAddress} row
*/
function createAddressBadge(row) {
const badge = createElement("span", "wallets__address-badge");
const badge = document.createElement("span");
const label = row.branchLabel?.toLowerCase() ?? "address";
badge.setAttribute("data-wallets-address-branch", label);
@@ -69,7 +69,7 @@ function createAddressBadge(row) {
*/
export function createAddressCellContent(row) {
const element = createElement("div", "wallets__address-cell");
const anonSet = createElement("span", "wallets__address-meta");
const anonSet = document.createElement("span");
anonSet.append(`anon set: ${formatNumber(row.historyBucketSize)}`);
element.append(
website_next/wallets/wallet/address/style.css
+25 -25
View File
@@ -2,24 +2,24 @@ main.wallets {
.wallets__address-cell {
display: grid;
gap: 0.25rem;
}
.wallets__address-meta {
color: var(--gray);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
}
> span:first-child {
display: inline-flex;
align-items: center;
justify-self: start;
min-height: 1rem;
border: 1px solid color-mix(in oklch, var(--gray) 28%, transparent);
border-radius: 0.25rem;
padding: 0 0.25rem;
color: color-mix(in oklch, var(--white) 76%, var(--gray));
line-height: 1;
}
.wallets__address-badge {
display: inline-flex;
align-items: center;
justify-self: start;
min-height: 1rem;
border: 1px solid color-mix(in oklch, var(--gray) 28%, transparent);
border-radius: 0.25rem;
padding: 0 0.25rem;
color: color-mix(in oklch, var(--white) 76%, var(--gray));
line-height: 1;
> span:last-child {
color: var(--gray);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
}
}
.wallets__address {
@@ -27,17 +27,17 @@ main.wallets {
flex-wrap: wrap;
gap: 0 0.375rem;
max-width: 40rem;
}
.wallets__address-group {
white-space: nowrap;
}
> span {
white-space: nowrap;
}
.wallets__address-letter {
color: var(--white);
}
[data-wallets-address-character="letter"] {
color: var(--white);
}
.wallets__address-number {
color: color-mix(in oklch, var(--white) 50%, var(--gray));
[data-wallets-address-character="number"] {
color: color-mix(in oklch, var(--white) 50%, var(--gray));
}
}
}
website_next/wallets/wallet/index.js
+7 -7
View File
@@ -9,7 +9,7 @@ import { renderTransactions } from "./transactions/index.js";
* @typedef {Parameters<typeof transactionCache.load>[0]} TransactionClient
*
* @typedef {Object} WalletPanel
* @property {HTMLElement} settings
* @property {HTMLElement} actions
* @property {HTMLElement} summary
* @property {HTMLElement} status
* @property {HTMLElement} results
@@ -20,22 +20,22 @@ import { renderTransactions } from "./transactions/index.js";
* @returns {WalletPanel}
*/
export function createWalletPanel() {
const settings = createElement("section", "wallets__settings");
const actions = createElement("section", "wallets__wallet-actions");
const summary = createElement("section", "wallets__summary");
const status = createElement("p", "wallets__status");
const status = document.createElement("p");
const results = createElement("section", "wallets__results");
settings.setAttribute("aria-label", "Wallet settings");
actions.setAttribute("aria-label", "Wallet actions");
status.setAttribute("role", "status");
summary.setAttribute("aria-label", "Wallets summary");
results.setAttribute("aria-label", "Wallets results");
return {
settings,
actions,
summary,
status,
results,
nodes: [settings, summary, status, results],
nodes: [actions, summary, status, results],
};
}
@@ -46,7 +46,7 @@ export function createWalletPanel() {
*/
export function renderWalletPanel(scan, panel, client) {
renderWalletSummary(panel.summary, scan.addresses, scan.btcUsdPrice);
renderReceiveButton(panel.settings, scan.receiveAddress);
renderReceiveButton(panel.actions, scan.receiveAddress);
panel.results.replaceChildren("Loading activity");
void transactionCache.load(client, scan.addresses).then((transactions) => {
if (panel.results.isConnected) {
website_next/wallets/wallet/receive/index.js
+3 -5
View File
@@ -46,7 +46,6 @@ function createReceiveQr(receiveAddress) {
const image = document.createElement("img");
const uri = `bitcoin:${receiveAddress.address}`;
image.className = "wallets__receive-qr";
image.alt = `QR code for ${receiveAddress.address}`;
image.src = createQrDataUrl(uri);
@@ -57,7 +56,7 @@ function createReceiveQr(receiveAddress) {
* @param {ReceiveAddress} receiveAddress
*/
function createReceiveAddress(receiveAddress) {
const element = createElement("div", "wallets__receive-address");
const element = document.createElement("div");
element.append(createGroupedAddress(receiveAddress.address));
@@ -82,8 +81,8 @@ function openReceiveDialog(receiveAddress) {
"dialog",
"wallets__dialog wallets__receive-dialog",
);
const content = createElement("div", "wallets__receive-card");
const actions = createElement("div", "wallets__receive-actions");
const content = document.createElement("div");
const actions = document.createElement("div");
const copy = document.createElement("button");
const close = document.createElement("button");
@@ -128,7 +127,6 @@ export function renderReceiveButton(element, receiveAddress) {
const button = document.createElement("button");
button.type = "button";
button.className = "wallets__receive-button";
button.disabled = !receiveAddress;
button.append("Receive");
button.addEventListener("click", () => {
website_next/wallets/wallet/receive/style.css
+37 -38
View File
@@ -1,46 +1,45 @@
main.wallets {
.wallets__receive-button:disabled {
border-color: color-mix(in oklch, var(--gray) 35%, transparent);
color: var(--gray);
background: transparent;
cursor: default;
}
.wallets__receive-dialog {
width: min(100% - 2rem, 32rem);
}
.wallets__receive-card {
display: grid;
gap: 1rem;
> div {
display: grid;
gap: 1rem;
h2 {
margin: 0;
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-lg);
h2 {
margin: 0;
font-size: var(--font-size-lg);
font-weight: 400;
line-height: var(--line-height-lg);
}
> img {
justify-self: center;
width: min(100%, 18rem);
aspect-ratio: 1;
padding: 1rem;
background: var(--white);
image-rendering: pixelated;
}
> div:first-of-type {
color: var(--white);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
> div:last-of-type {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: end;
> button:first-child {
border-color: var(--orange);
color: var(--black);
background: var(--orange);
}
}
}
}
.wallets__receive-qr {
justify-self: center;
width: min(100%, 18rem);
aspect-ratio: 1;
padding: 1rem;
background: var(--white);
image-rendering: pixelated;
}
.wallets__receive-address {
color: var(--white);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
.wallets__receive-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: end;
}
}
website_next/wallets/wallet/settings/index.js
-40
View File
@@ -1,40 +0,0 @@
import {
createAddressScriptSelect,
readAddressScript,
} from "./script.js";
import { createElement } from "../../dom.js";
import { createField } from "../../form/index.js";
import { isOutputDescriptor } from "../../derive/index.js";
/**
* @typedef {import("../../derive/address.js").AddressScript} AddressScript
* @typedef {import("../../vault/index.js").StoredWallet} StoredWallet
*/
/**
* @typedef {Object} WalletSettingsOptions
* @property {(script: AddressScript, select: HTMLSelectElement, status: HTMLElement) => void | Promise<void>} onScriptChange
*/
/**
* @param {HTMLElement} element
* @param {StoredWallet} wallet
* @param {WalletSettingsOptions} options
*/
export function renderSettings(element, wallet, options) {
if (isOutputDescriptor(wallet.source)) {
element.replaceChildren();
return;
}
const script = createAddressScriptSelect(
/** @type {AddressScript} */ (wallet.script),
);
const status = createElement("p", "wallets__status");
status.setAttribute("role", "status");
script.addEventListener("change", () => {
void options.onScriptChange(readAddressScript(script), script, status);
});
element.replaceChildren(createField("Address type", script), status);
}
website_next/wallets/wallet/settings/script.js
-33
View File
@@ -1,33 +0,0 @@
import { addressScripts } from "../../derive/script.js";
/**
* @typedef {import("../../derive/address.js").AddressScript} AddressScript
*/
/**
* @param {AddressScript} [value]
*/
export function createAddressScriptSelect(value) {
const select = document.createElement("select");
select.name = "script";
for (const { id, label } of addressScripts) {
const option = document.createElement("option");
option.value = id;
option.selected = id === value;
option.append(label);
select.append(option);
}
return select;
}
/**
* @param {HTMLSelectElement} select
* @returns {AddressScript}
*/
export function readAddressScript(select) {
return /** @type {AddressScript} */ (select.value);
}
website_next/wallets/wallet/settings/style.css
-21
View File
@@ -1,21 +0,0 @@
main.wallets {
.wallets__settings {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: end;
justify-content: end;
}
.wallets__settings .wallets__field {
min-width: min(100%, 14rem);
}
}
@media (max-width: 34rem) {
main.wallets {
.wallets__settings {
justify-content: start;
}
}
}
website_next/wallets/wallet/summary/index.js
+4 -4
View File
@@ -1,5 +1,5 @@
import { createElement } from "../../dom.js";
import { formatBtc, formatUsd } from "../../format.js";
import { createBtcAmount } from "../../amount/index.js";
import { formatUsd } from "../../format.js";
import { redaction } from "../../redaction/index.js";
/**
@@ -11,8 +11,8 @@ import { redaction } from "../../redaction/index.js";
* @param {number} btcUsdPrice
*/
function createBalanceSummary(balance, btcUsdPrice) {
const element = createElement("p", "wallets__balance");
const btc = redaction.createValue("strong", formatBtc(balance), "fixed");
const element = document.createElement("p");
const btc = createBtcAmount("strong", balance);
const usd = redaction.createValue(
"span",
formatUsd((balance / 100_000_000) * btcUsdPrice),
website_next/wallets/wallet/summary/style.css
+17 -26
View File
@@ -1,35 +1,26 @@
main.wallets {
.wallets__summary {
min-height: 5rem;
}
.wallets__balance {
display: grid;
gap: 0.5rem;
margin: 0;
> p {
display: grid;
gap: 0.5rem;
margin: 0;
strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-size: 3rem;
font-weight: 620;
line-height: 1;
}
span {
color: var(--gray);
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}
}
}
@media (max-width: 34rem) {
main.wallets {
.wallets__balance {
strong {
font-size: 2.25rem;
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-family: var(--font-serif);
font-size: 4rem;
font-weight: 400;
line-height: 1;
}
> span {
color: var(--gray);
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}
}
}
website_next/wallets/wallet/transactions/index.js
+35 -60
View File
@@ -1,5 +1,5 @@
import { createElement } from "../../dom.js";
import { formatBtc } from "../../format.js";
import { createBtcAmount } from "../../amount/index.js";
import { redaction } from "../../redaction/index.js";
import { createAddressCellContent } from "../address/index.js";
@@ -21,107 +21,82 @@ function formatTxid(txid) {
}
/**
* @param {number} sats
*/
function formatSignedBtc(sats) {
if (sats > 0) return `+${formatBtc(sats)}`;
if (sats < 0) return `-${formatBtc(Math.abs(sats))}`;
return formatBtc(sats);
}
/**
* @param {HTMLElement} element
* @param {WalletTransaction} transaction
*/
function getTransactionDetail(transaction) {
function appendTransactionDetail(element, transaction) {
if (transaction.type === "consolidation") {
return `${transaction.addresses.length} wallet addresses · fee only`;
element.append(
`${transaction.addresses.length} wallet addresses · fee only`,
);
return;
}
if (transaction.type === "send") {
return `to external wallet · fee ${formatBtc(transaction.fee)}`;
element.append(
"to external wallet · fee ",
createBtcAmount("span", transaction.fee),
);
return;
}
return transaction.status;
element.append(transaction.status);
}
/**
* @param {WalletTransaction} transaction
*/
function createTransactionDetails(transaction) {
const dialog = createElement("dialog", "wallets__dialog wallets__tx-dialog");
const content = createElement("div", "wallets__tx-details");
const title = document.createElement("h2");
const content = document.createElement("div");
const txid = document.createElement("code");
const meta = document.createElement("p");
const list = createElement("div", "wallets__tx-addresses");
const close = document.createElement("button");
const list = document.createElement("div");
title.append(typeLabels[transaction.type]);
redaction.setTitle(txid, transaction.txid);
redaction.setValue(txid, transaction.txid);
meta.append(
transaction.status,
" · ",
redaction.createValue("span", formatSignedBtc(transaction.amount), "fixed"),
createBtcAmount("span", transaction.amount, { signed: true }),
" · fee ",
redaction.createValue("span", formatBtc(transaction.fee), "fixed"),
createBtcAmount("span", transaction.fee),
);
for (const address of transaction.addresses) {
list.append(createAddressCellContent(address.walletAddress));
}
close.type = "button";
close.append("Close");
content.append(title, txid, meta, list, close);
dialog.append(content);
close.addEventListener("click", () => {
dialog.close();
});
dialog.addEventListener("close", () => {
dialog.remove();
});
dialog.addEventListener("click", (event) => {
if (event.target === dialog) {
dialog.close();
}
});
content.append(txid, meta, list);
return dialog;
return content;
}
/**
* @param {WalletTransaction} transaction
*/
function createTransactionRow(transaction) {
const row = createElement("li", "wallets__tx");
const main = createElement("div", "wallets__tx-main");
const row = document.createElement("li");
const main = document.createElement("div");
const label = document.createElement("strong");
const amount = redaction.createValue(
const amount = createBtcAmount(
"span",
formatSignedBtc(transaction.amount),
"fixed",
transaction.amount,
{ signed: true },
);
const detail = createElement("p", "wallets__tx-detail");
const detail = document.createElement("p");
const txid = document.createElement("code");
const more = document.createElement("button");
const details = document.createElement("details");
const summary = document.createElement("summary");
label.append(typeLabels[transaction.type]);
amount.dataset.walletsTxAmount =
transaction.amount >= 0 ? "positive" : "negative";
redaction.setTitle(txid, transaction.txid);
redaction.setValue(txid, formatTxid(transaction.txid));
more.type = "button";
more.append("View more");
detail.append(getTransactionDetail(transaction), " · ", txid);
summary.append("Details");
appendTransactionDetail(detail, transaction);
detail.append(" · ", txid);
details.append(summary, createTransactionDetails(transaction));
main.append(label, amount);
row.append(main, detail, more);
more.addEventListener("click", () => {
const dialog = createTransactionDetails(transaction);
const mainElement = document.querySelector("main.wallets") ?? document.body;
mainElement.append(dialog);
dialog.showModal();
});
row.append(main, detail, details);
return row;
}
@@ -164,11 +139,11 @@ export function renderTransactions(element, transactions) {
}
for (const [date, group] of groups) {
const section = createElement("section", "wallets__tx-group");
const section = document.createElement("section");
const heading = document.createElement("h3");
const list = createElement("ol", "wallets__tx-list");
const list = document.createElement("ol");
heading.append(date);
heading.append(redaction.createValue("span", date, "fixed"));
for (const transaction of group) {
list.append(createTransactionRow(transaction));
}
website_next/wallets/wallet/transactions/style.css
+109 -92
View File
@@ -9,9 +9,7 @@ main.wallets {
display: grid;
gap: 1.25rem;
h2,
h3,
p {
:is(h2, h3, p) {
margin: 0;
}
@@ -29,113 +27,132 @@ main.wallets {
line-height: var(--line-height-xs);
text-transform: uppercase;
}
}
.wallets__tx-group {
display: grid;
gap: 0.5rem;
}
> section {
display: grid;
gap: 0.5rem;
.wallets__tx-list {
display: grid;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
}
> ol {
display: grid;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
.wallets__tx {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.25rem 1rem;
align-items: center;
padding: 0.875rem 0;
border-bottom: 1px solid color-mix(in oklch, var(--gray) 18%, transparent);
}
> li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.25rem 1rem;
align-items: center;
padding: 0.875rem 0;
border-bottom: 1px solid color-mix(
in oklch,
var(--gray) 18%,
transparent
);
.wallets__tx-main {
display: flex;
gap: 1rem;
align-items: baseline;
justify-content: space-between;
min-width: 0;
@media (max-width: 34rem) {
grid-template-columns: 1fr;
}
strong {
color: var(--white);
font-weight: 500;
}
> div:first-child {
display: flex;
gap: 1rem;
align-items: baseline;
justify-content: space-between;
min-width: 0;
span {
color: var(--white);
white-space: nowrap;
}
strong {
color: var(--white);
font-weight: 500;
}
span[data-wallets-tx-amount="positive"] {
color: var(--green);
}
> span {
color: var(--white);
white-space: nowrap;
span[data-wallets-tx-amount="negative"] {
color: var(--red);
}
}
&[data-wallets-tx-amount="positive"] {
color: var(--green);
}
.wallets__tx-detail {
grid-column: 1;
min-width: 0;
color: var(--gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
&[data-wallets-tx-amount="negative"] {
color: var(--red);
}
}
}
code {
color: inherit;
font-family: inherit;
}
}
> p {
grid-column: 1;
min-width: 0;
color: var(--gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
.wallets__tx button {
grid-column: 2;
grid-row: 1 / span 2;
height: 2rem;
padding-inline: 0.625rem;
background: transparent;
}
code {
color: inherit;
font-family: inherit;
}
}
.wallets__tx-dialog {
width: min(100% - 2rem, 42rem);
}
> details {
grid-column: 2;
grid-row: 1 / span 2;
.wallets__tx-details {
display: grid;
gap: 1rem;
@media (max-width: 34rem) {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
h2,
p {
margin: 0;
}
&[open] {
display: grid;
grid-column: 1 / -1;
grid-row: auto;
gap: 0.75rem;
}
code {
overflow-wrap: anywhere;
color: var(--white);
font-family: inherit;
}
}
> summary {
display: grid;
place-items: center;
height: 2rem;
border: 1px solid color-mix(
in oklch,
var(--gray) 45%,
transparent
);
border-radius: 0.375rem;
padding-inline: 0.625rem;
color: var(--white);
background: transparent;
line-height: 1;
list-style: none;
cursor: pointer;
.wallets__tx-addresses {
display: grid;
gap: 0.75rem;
}
}
&::marker,
&::-webkit-details-marker {
display: none;
content: "";
}
}
@media (max-width: 34rem) {
main.wallets {
.wallets__tx {
grid-template-columns: 1fr;
}
> div {
display: grid;
gap: 1rem;
.wallets__tx button {
grid-column: 1;
grid-row: auto;
justify-self: start;
code {
overflow-wrap: anywhere;
color: var(--white);
font-family: inherit;
}
> div {
display: grid;
gap: 0.75rem;
}
}
}
}
}
}
}
}