diff --git a/.github/docs/BOLT12-Offers.md b/.github/docs/BOLT12-Offers.md new file mode 100644 index 00000000..be467dbc --- /dev/null +++ b/.github/docs/BOLT12-Offers.md @@ -0,0 +1,38 @@ +# BOLT12 Offers + +A BOLT12 **offer** is a *reusable* payment code: unlike a BOLT11 invoice it +does not expire after one payment — any number of payers can pay it, any +number of times, each payment fetching its own fresh invoice from your node. + +## Create an offer + +1. Click **Receive** on the Lightning Wallet card. +2. Switch the payment type radio from **Invoice** to **Offer**. +3. Enter a **Description**. Leave **Amount** empty for an *any-amount* offer + (the payer chooses what to pay — ideal for tips/donations), or set a fixed + amount: + + ![Offer form](../images/walkthroughs/offer-01-form.png) + +4. Click **Generate Offer**. The app calls the node's `offer` RPC and shows + the `lno1…` offer string as a QR code. This QR can be printed or published + permanently — it never becomes stale: + + ![Offer QR](../images/walkthroughs/offer-02-qr.png) + +## The same offer, paid more than once + +Each payer scans the same offer, their wallet runs `fetchinvoice` against it, +and pays the returned invoice. Here the offer above was paid **twice by two +different nodes** — 15,000 sats and 20,000 sats — and both payments appear as +separate entries with the offer's description: + +![Same offer paid twice](../images/walkthroughs/offer-03-paid-twice-list.png) + +## The Offers tab + +The **Offers** tab of the Lightning Wallet card lists every offer created on +the node with its status — *Active* and *Multi Use* below. This is where you +can find or disable an offer later: + +![Offers tab](../images/walkthroughs/offer-04-offers-tab.png) diff --git a/.github/docs/Bookkeeper.md b/.github/docs/Bookkeeper.md new file mode 100644 index 00000000..3cf2556b --- /dev/null +++ b/.github/docs/Bookkeeper.md @@ -0,0 +1,55 @@ +# Bookkeeper + +Bookkeeper is the accounting side of the application, built on Core +Lightning's `bookkeeper` plugin. Open it with the **Bookkeeper** button in +the header (the button turns into **Dashboard** to switch back). + +## Bookkeeper dashboard + +The landing page summarizes the node's accounting in three cards, each with +a **View More** that opens the full feature: + +![Bookkeeper Dashboard](../images/walkthroughs/bookkeeper-dashboard.png) + +- **Account Events** — track account activity at any given time: total + invoices received, total payments sent, routing revenue and on-chain fees. +- **Sats Flow** — inflow and outflow this month. +- **Volume Chart** — route performance: the routes with the most and least + forwarded traffic. + +## Account Events + +Balances of every account — the on-chain **wallet** plus each channel +(by short channel id) — stacked over time: + +![Account Events](../images/walkthroughs/account-events.png) + +- Filter by **Time Granularity** (daily/weekly/monthly), a **date range**, + and specific **channels**; **Show Zero Activity** includes empty periods. +- The chart stacks each account's balance per period, color-coded per + account. +- The table below breaks a selected period down: short channel id, remote + alias, balance, percentage of the total, and the underlying account id. + +## Sats Flow + +Money movement over time — inflows drawn upward, outflows downward, with a +net-flow line across the bars: + +![Sats Flow](../images/walkthroughs/satsflow.png) + +- The same granularity/date-range controls apply, plus an **event-type + filter**. Event types include Routed, Invoice Fee, Received Invoice, + Paid Invoice, Deposit and Onchain Fee, and the filter can either + **Include** or **Exclude** the selected set: + + ![Sats Flow event filter](../images/walkthroughs/satsflow-filter.png) + +## Volume Chart + +Where routed traffic actually flows: a two-ring chart pairing the +**inbound channel (inner circle)** with the **outbound channel (outer +circle)** for forwarded payments, so you can see which route pairs carry +the volume. Channels can be filtered with the dropdown: + +![Volume Chart](../images/walkthroughs/volume-chart-filtered.png) diff --git a/.github/docs/Dashboard.md b/.github/docs/Dashboard.md new file mode 100644 index 00000000..fcf4d0f2 --- /dev/null +++ b/.github/docs/Dashboard.md @@ -0,0 +1,57 @@ +# The CLN Dashboard + +The home page of the application is a single dashboard that surfaces the +node's full state at a glance: + +![CLN Dashboard](../images/walkthroughs/cln-dashboard.png) + +## Header + +- **Node identity** — the node's alias, version and connection status + (green dot = connected). +- **Bookkeeper** — opens the [Bookkeeper dashboard](Bookkeeper.md) with + accounting and routing analytics. +- **Settings** — units (SATS/BTC), fiat currency, light/dark theme and + password configuration. +- The lock icon logs out of the session; the moon/sun icon toggles the theme + directly. + +## Balance and node summary + +- **Total Balance** — combined on-chain + Lightning funds. +- The summary strip beside it shows **Active Channels**, connected **Peers**, + and **Maximum Send / Maximum Receive** — the node's total outbound and + inbound Lightning capacity. + +## Bitcoin Wallet card + +On-chain funds. **Withdraw** sends to a bitcoin address, **Deposit** +generates a receive address, and the list below shows on-chain transactions +(deposits and withdrawals) with their fiat value. + +## Lightning Wallet card + +Off-chain funds. **Send** pays a BOLT11 invoice, BOLT12 offer or keysend; +**Receive** generates invoices and offers. Two tabs list the node's +**Transactions** (paid/received payments) and **Offers**. Step-by-step +guides: [Send & Receive Payments](Send-Receive.md) and +[BOLT12 Offers](BOLT12-Offers.md). + +## Payment Channels card + +Every channel with its state dot (green = active, yellow = pending, +red = inactive), peer alias and a liquidity bar (yellow = local / +spendable, grey = remote / receivable). Clicking a channel opens its +detail view; **Open Channel** starts a new one — see +[Opening a Channel](Open-Channel.md). + +## Step-by-step guides + +Detailed walkthroughs, with screenshots, for the flows available from this +dashboard: + +| Guide | What it covers | +|---|---| +| [Send & Receive](Send-Receive.md) | Receiving via BOLT11 invoice + QR, and paying a pasted invoice | +| [BOLT12 Offers](BOLT12-Offers.md) | Creating a reusable offer, its QR, and the same offer paid more than once | +| [Opening a Channel](Open-Channel.md) | Peer + amount → pending → active, and reading a channel's liquidity | diff --git a/.github/docs/Open-Channel.md b/.github/docs/Open-Channel.md new file mode 100644 index 00000000..eab280f1 --- /dev/null +++ b/.github/docs/Open-Channel.md @@ -0,0 +1,50 @@ +# Opening a Payment Channel + +Channels are managed from the **Payment Channels** card on the home page. + +## Open a channel + +1. Click **Open Channel** at the bottom of the Payment Channels card. +2. Fill in: + - **Node ID** — the peer in `pubkey@ip:port` form. + - **Amount** — the channel capacity in sats, funded from the on-chain + (Bitcoin) wallet. The valid range is shown in the placeholder. + - **Announce** — leave on for a public channel, off for a private one. + - **Fee Rate** — Slow / Normal / Urgent, or tick *Custom Fee Rate* to + enter an exact perkw rate. + + ![Open channel form](../images/walkthroughs/channel-01-open-form.png) + +3. Click **Open Channel**. The app connects to the peer, funds the channel + and broadcasts the funding transaction; a green alert shows the new + channel id: + + ![Channel opened](../images/walkthroughs/channel-02-opened-success.png) + +## Pending → Active + +Until the funding transaction confirms, the channel sits in the list with a +**yellow dot** (state `CHANNELD_AWAITING_LOCKIN`) — it cannot route payments +yet: + +![Pending channel](../images/walkthroughs/channel-03-pending.png) + +After enough confirmations (6 blocks here) the dot turns **green** and the +channel is active and ready to route: + +![Active channel](../images/walkthroughs/channel-04-active.png) + +## Reading a channel's liquidity + +Every list entry shows a liquidity bar: the **yellow** portion is the local +balance (what you can send through this channel) and the **grey** portion is +the remote balance (what you can receive). A freshly opened channel is all +local balance — you funded the whole capacity — so you can send but not yet +receive through it. + +Clicking a channel opens **Channel Detail** with the full picture: the +liquidity bar, short channel id, who opened it, channel type, dust limit, +**Spendable** / **Receivable** amounts and the channel/funding ids. The +channel can also be closed from here: + +![Channel detail with liquidity](../images/walkthroughs/channel-05-liquidity-details.png) diff --git a/.github/docs/Send-Receive.md b/.github/docs/Send-Receive.md new file mode 100644 index 00000000..aa954a11 --- /dev/null +++ b/.github/docs/Send-Receive.md @@ -0,0 +1,56 @@ +# Send & Receive Payments + +The **Lightning Wallet** card on the home page is the entry point for both +flows. + +## Receive — create an invoice + +1. Click **Receive** on the Lightning Wallet card. +2. Keep the payment type on **Invoice** (the default; **Offer** creates a + reusable BOLT12 offer instead — see [BOLT12 Offers](BOLT12-Offers.md)). +3. Enter a **Description** (required) and an **Amount** in sats. Leaving the + amount empty creates an *open* (any-amount) invoice. The fiat equivalent is + previewed under the amount field. + + ![Receive form](../images/walkthroughs/receive-01-form.png) + +4. Click **Generate Invoice**. The app calls the node's `invoice` RPC and + shows the BOLT11 string as a QR code, ready to be scanned by the payer. + Clicking the QR or the copy icon copies the invoice. + + ![Invoice QR](../images/walkthroughs/receive-02-invoice-qr.png) + +5. Once the payer settles the invoice, it appears at the top of the + **Transactions** list with its description, the received amount and the + *Paid at* timestamp: + + ![Paid invoice in the transactions list](../images/walkthroughs/receive-03-paid-list.png) + +6. Clicking the entry expands its details (payment hash, preimage, etc.): + + ![Paid invoice detail](../images/walkthroughs/receive-04-paid-detail.png) + +## Send — pay an invoice + +1. Click **Send** on the Lightning Wallet card. +2. Keep the payment type on **Invoice** (**Offer** pays a BOLT12 offer, + **Keysend** pays a node pubkey directly without an invoice). +3. Paste (or scan) the BOLT11 invoice into the **Invoice** field. The app + decodes it immediately and shows the invoice's description and amount + underneath the field, so you can verify what you are about to pay — + this is the confirmation step: + + ![Pasted invoice decoded for confirmation](../images/walkthroughs/send-01-pasted-decoded.png) + + *For an open (any-amount) invoice an extra Amount field appears so you + choose how much to send.* + +4. Click **Send Payment**. On success the app shows a green alert with the + payment hash: + + ![Payment sent](../images/walkthroughs/send-02-paid.png) + +5. The outgoing payment shows up in the **Transactions** list with a + *Created at* timestamp and a negative amount: + + ![Sent payment in the transactions list](../images/walkthroughs/send-03-sent-list.png) diff --git a/.github/images/walkthroughs/account-events.png b/.github/images/walkthroughs/account-events.png new file mode 100644 index 00000000..ef751a0a Binary files /dev/null and b/.github/images/walkthroughs/account-events.png differ diff --git a/.github/images/walkthroughs/bookkeeper-dashboard.png b/.github/images/walkthroughs/bookkeeper-dashboard.png new file mode 100644 index 00000000..5f5f4786 Binary files /dev/null and b/.github/images/walkthroughs/bookkeeper-dashboard.png differ diff --git a/.github/images/walkthroughs/channel-01-open-form.png b/.github/images/walkthroughs/channel-01-open-form.png new file mode 100644 index 00000000..a33b5e3a Binary files /dev/null and b/.github/images/walkthroughs/channel-01-open-form.png differ diff --git a/.github/images/walkthroughs/channel-02-opened-success.png b/.github/images/walkthroughs/channel-02-opened-success.png new file mode 100644 index 00000000..7df6054d Binary files /dev/null and b/.github/images/walkthroughs/channel-02-opened-success.png differ diff --git a/.github/images/walkthroughs/channel-03-pending.png b/.github/images/walkthroughs/channel-03-pending.png new file mode 100644 index 00000000..6b7dea8e Binary files /dev/null and b/.github/images/walkthroughs/channel-03-pending.png differ diff --git a/.github/images/walkthroughs/channel-04-active.png b/.github/images/walkthroughs/channel-04-active.png new file mode 100644 index 00000000..654635a0 Binary files /dev/null and b/.github/images/walkthroughs/channel-04-active.png differ diff --git a/.github/images/walkthroughs/channel-05-liquidity-details.png b/.github/images/walkthroughs/channel-05-liquidity-details.png new file mode 100644 index 00000000..c002d5a3 Binary files /dev/null and b/.github/images/walkthroughs/channel-05-liquidity-details.png differ diff --git a/.github/images/walkthroughs/cln-dashboard.png b/.github/images/walkthroughs/cln-dashboard.png new file mode 100644 index 00000000..a1422afb Binary files /dev/null and b/.github/images/walkthroughs/cln-dashboard.png differ diff --git a/.github/images/walkthroughs/offer-01-form.png b/.github/images/walkthroughs/offer-01-form.png new file mode 100644 index 00000000..46a8e7cb Binary files /dev/null and b/.github/images/walkthroughs/offer-01-form.png differ diff --git a/.github/images/walkthroughs/offer-02-qr.png b/.github/images/walkthroughs/offer-02-qr.png new file mode 100644 index 00000000..d5668cd0 Binary files /dev/null and b/.github/images/walkthroughs/offer-02-qr.png differ diff --git a/.github/images/walkthroughs/offer-03-paid-twice-list.png b/.github/images/walkthroughs/offer-03-paid-twice-list.png new file mode 100644 index 00000000..cf215c73 Binary files /dev/null and b/.github/images/walkthroughs/offer-03-paid-twice-list.png differ diff --git a/.github/images/walkthroughs/offer-04-offers-tab.png b/.github/images/walkthroughs/offer-04-offers-tab.png new file mode 100644 index 00000000..8636db67 Binary files /dev/null and b/.github/images/walkthroughs/offer-04-offers-tab.png differ diff --git a/.github/images/walkthroughs/receive-01-form.png b/.github/images/walkthroughs/receive-01-form.png new file mode 100644 index 00000000..05f35d59 Binary files /dev/null and b/.github/images/walkthroughs/receive-01-form.png differ diff --git a/.github/images/walkthroughs/receive-02-invoice-qr.png b/.github/images/walkthroughs/receive-02-invoice-qr.png new file mode 100644 index 00000000..66bbedc2 Binary files /dev/null and b/.github/images/walkthroughs/receive-02-invoice-qr.png differ diff --git a/.github/images/walkthroughs/receive-03-paid-list.png b/.github/images/walkthroughs/receive-03-paid-list.png new file mode 100644 index 00000000..ca42ff68 Binary files /dev/null and b/.github/images/walkthroughs/receive-03-paid-list.png differ diff --git a/.github/images/walkthroughs/receive-04-paid-detail.png b/.github/images/walkthroughs/receive-04-paid-detail.png new file mode 100644 index 00000000..b09f322d Binary files /dev/null and b/.github/images/walkthroughs/receive-04-paid-detail.png differ diff --git a/.github/images/walkthroughs/satsflow-filter.png b/.github/images/walkthroughs/satsflow-filter.png new file mode 100644 index 00000000..788adeff Binary files /dev/null and b/.github/images/walkthroughs/satsflow-filter.png differ diff --git a/.github/images/walkthroughs/satsflow.png b/.github/images/walkthroughs/satsflow.png new file mode 100644 index 00000000..e1846ea8 Binary files /dev/null and b/.github/images/walkthroughs/satsflow.png differ diff --git a/.github/images/walkthroughs/send-01-pasted-decoded.png b/.github/images/walkthroughs/send-01-pasted-decoded.png new file mode 100644 index 00000000..dc17ec97 Binary files /dev/null and b/.github/images/walkthroughs/send-01-pasted-decoded.png differ diff --git a/.github/images/walkthroughs/send-02-paid.png b/.github/images/walkthroughs/send-02-paid.png new file mode 100644 index 00000000..f02a9466 Binary files /dev/null and b/.github/images/walkthroughs/send-02-paid.png differ diff --git a/.github/images/walkthroughs/send-03-sent-list.png b/.github/images/walkthroughs/send-03-sent-list.png new file mode 100644 index 00000000..c7892441 Binary files /dev/null and b/.github/images/walkthroughs/send-03-sent-list.png differ diff --git a/.github/images/walkthroughs/volume-chart-filtered.png b/.github/images/walkthroughs/volume-chart-filtered.png new file mode 100644 index 00000000..65cf5b9d Binary files /dev/null and b/.github/images/walkthroughs/volume-chart-filtered.png differ diff --git a/README.md b/README.md index 2a542a7e..c1549c47 100644 --- a/README.md +++ b/README.md @@ -147,6 +147,19 @@ --- +# Feature Walkthroughs + +Step-by-step guides for basic node management flows by the +CLN application, captured against a Core Lightning regtest network +(5 nodes, the app connected to node *ODDSPORK*). + +| Guide | What it covers | +|---|---| +| [CLN Dashboard](.github/docs/Dashboard.md) | The home page: balances, wallets, channels — with guides for sending & receiving payments, BOLT12 offers and opening channels | +| [Bookkeeper](.github/docs/Bookkeeper.md) | Accounting dashboard: Account Events, Sats Flow and the Volume Chart | + +--- + # Contributing - We welcome and appreciate new contributions!