Simple CLN bookkeeper web app powered by lnsocket & Golang - part 1

Before we started that live session, I created a custom Lightning Network running on regtest with:

• 2 nodes l1 and l2,

• one channel from the node l1 to the node l2 and another channel from l2 to l1,

• I made some payment from l1 to l2 and l2 to l1,

• and also a withdrawal by the node l1.

This way we have some data to work with and we can reproduce them.

Here is how we produce that Lightning network.

We start two Lightning nodes running on the Bitcoin regtest chain by sourcing the script lightning/contrib/startup_regtest.sh provided in CLN repository and by running the command start_ln:

◉ tony@tony:~/lnroom:
$ source lightning/contrib/startup_regtest.sh
...
◉ tony@tony:~/lnroom:
$ start_ln
...

We connect the node l1 and l2 using the handy command connect (from lightning/contrib/startup_regtest.sh) like this:

◉ tony@tony:~/clnlive:
$ connect 1 2
{
   "id": "0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382",
   "features": "08a0000a0269a2",
   "direction": "out",
   "address": {
      "type": "ipv4",
      "address": "127.0.0.1",
      "port": 7272
   }
}

Then we fund the node l1 and a channel from l1 to l2 using the command fund_nodes (from lightning/contrib/startup_regtest.sh):

◉ tony@tony:~/clnlive:
$ fund_nodes
Mining into address bcrt1qxehk2f0rknajvny4cajsuwmd94vvakz2apx7x2... done.
bitcoind balance: 50.00000000
Waiting for lightning node funds... found.
Funding channel from node 1 to node 2. Waiting for confirmation... done.

Finally, we can run the script lnregtest.bash:

◉ tony@tony:~/clnlive:
$ ./lnregtest.bash
...

Note that the script lnregtest.bash assumes that we ran the previous commands above.

The commando API changed a little bit in CLN v23.02 and lnsocket took into account this changes just after we did that live session (add new required fields for commando jsonrpc #21).

So in that video, we set allow-deprecated-apis to true in the config file of the node l1:

network=regtest
log-level=debug
log-file=/tmp/l1-regtest/log
addr=localhost:7171
allow-deprecated-apis=false

We stop the node l1 and restart it with that new config:

◉ tony@tony:~/clnlive:
$ l1-cli stop
"Shutdown complete"
◉ tony@tony:~/clnlive:
$ lightningd --lightning-dir=/tmp/l1-regtest --daemon

Note that this is no longer necessary.

To connect to the node l1 we need its node id, host and port. We get that information by running:

◉ tony@tony:~/clnlive:
$ l1-cli getinfo
{
   "id": "03e216b2e609dea193e1a8d2db41c24a0e2279c3a656e0b220ab96c00e0b7c6181",
   "alias": "VIOLETSPATULA",
   "color": "03e216",
   "num_peers": 1,
   "num_pending_channels": 0,
   "num_active_channels": 2,
   "num_inactive_channels": 0,
   "address": [],
   "binding": [
      {
         "type": "ipv4",
         "address": "127.0.0.1",
         "port": 7171
      }
   ],
   "version": "v23.05.2",
   "blockheight": 117,
   "network": "regtest",
   "fees_collected_msat": 0,
   "lightning-dir": "/tmp/l1-regtest/regtest",
   "our_features": {
      "init": "08a0000a0269a2",
      "node": "88a0000a0269a2",
      "channel": "",
      "invoice": "02000002024100"
   }
}

To connect to the node l1 with main.go program using lnsocket, we first define the struct ln with lnsocket.LNSocket() call, we generate a key for main.go with ln.GenKey() method and we try to connect to the node l1 calling the method ln.ConnectAndInit() to which we pass the correct information about the node l1. Finally, at the end we wait 10 seconds before the program terminate to let us observe that l1 is connected to that program:

package main

import (
  "fmt"
  "time"
  lnsocket "github.com/jb55/lnsocket/go"
)

var HOSTNAME = "127.0.0.1:7171"
var NODEID = "03e216b2e609dea193e1a8d2db41c24a0e2279c3a656e0b220ab96c00e0b7c6181"

func main() {
  ln := lnsocket.LNSocket{}
  ln.GenKey()
  err := ln.ConnectAndInit(HOSTNAME, NODEID)
  if err != nil {fmt.Println("not connected to peer")}
  time.Sleep(10 * time.Second)
}

Before we run main.go, we switch to another terminal and check that the node l1 is only connected to one node being the node l2:

# TERMINAL 2

◉ tony@tony:~/clnlive:
$ alias l1-cli='lightning-cli --lightning-dir=/tmp/l1-regtest'
◉ tony@tony:~/clnlive:
$ l1-cli listpeers
{
   "peers": [
      {
         "id": "0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382",
         "connected": true,
         "num_channels": 2,
         "netaddr": [
            "127.0.0.1:7272"
         ],
         "features": "08a0000a0269a2",
         "channels": [...]
      }
   ]
}

In the terminal 1 we run main.go

◉ tony@tony:~/clnlive:
$ go run main.go

and we see in the terminal 2 that l1 is now connected to a second node (being main.go):

# TERMINAL 2

◉ tony@tony:~/clnlive:
$ l1-cli listpeers
{
   "peers": [
      {
         "id": "0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382",
         "connected": true,
         "num_channels": 2,
         "netaddr": [
            "127.0.0.1:7272"
         ],
         "features": "08a0000a0269a2",
         "channels": [...]
      },
      {
         "id": "030b1736a879486b03aa77fbbf386e38e34568d7096122fd1e3d3a29da047cbf90",
         "connected": true,
         "num_channels": 0,
         "netaddr": [
            "127.0.0.1:54270"
         ],
         "features": "",
         "channels": []
      }
   ]
}

Let's see how to send commando messages to the node l1 asking it to run the method getinfo.

To do that we need a rune which authorizes main.go to run the getinfo method using commando messages. We can generate a unrestricted rune like this:

◉ tony@tony:~/clnlive:
$ l1-cli commando-rune
{
   "rune": "BhOlLq7GtF8EfoeipYpXzB-WAY3O4odwu_JeZqZy9Rc9MQ==",
   "unique_id": "1",
   "warning_unrestricted_rune": "WARNING: This rune has no restrictions! Anyone who has access to this rune could drain funds from your node. Be careful when giving this to apps that you don't trust. Consider using the restrictions parameter to only allow access to specific rpc methods."
}

Now, with that rune and the method ln.Rpc() we can send a commando message with getinfo as method to run:

package main

import (
  "fmt"
  "time"
  lnsocket "github.com/jb55/lnsocket/go"
)

var RUNE = "BhOlLq7GtF8EfoeipYpXzB-WAY3O4odwu_JeZqZy9Rc9MQ=="
var HOSTNAME = "127.0.0.1:7171"
var NODEID = "03e216b2e609dea193e1a8d2db41c24a0e2279c3a656e0b220ab96c00e0b7c6181"

func main() {
  ln := lnsocket.LNSocket{}
  ln.GenKey()
  err := ln.ConnectAndInit(HOSTNAME, NODEID)
  if err != nil {fmt.Println("not connected to peer")}
  body, _ :=ln.Rpc(RUNE, "getinfo", "[]")
  fmt.Println(body)
}

Back to our terminal, we run main.go and get the information about the node l1 printed out (in the result field):

◉ tony@tony:~/clnlive:
$ go run main.go
{"jsonrpc":"2.0","id":"(null)commando:getinfo#43","result":{"id":"03e216b2e609dea193e1a8d2db41c24a0e2279c3a656e0b220ab96c00e0b7c6181","alias":"VIOLETSPATULA","color":"03e216","num_peers":2,"num_pending_channels":0,"num_active_channels":2,"num_inactive_channels":0,"address":[],"binding":[{"type":"ipv4","address":"127.0.0.1","port":7171}],"version":"v23.05.2","blockheight":117,"network":"regtest","fees_collected_msat":0,"lightning-dir":"/tmp/l1-regtest/regtest","our_features":{"init":"08a0000a0269a2","node":"88a0000a0269a2","channel":"","invoice":"02000002024100"}}}

• The bookkeeper plugin is written in C, what is the interface between that code in C and this code in Go?

• So you're kinda like writing another plugin in Go that is communicating with the Lightning node and manipulating the output of the bookkeeper plugin but not communicating with that bookkeeper plugin directly?

By running the command bkpr-listbalances we can see that the node l1 has one onchain account and two opened channels:

◉ tony@tony:~/clnlive:
$ l1-cli bkpr-listbalances
{
   "accounts": [
      {
         "account": "wallet",
         "balances": [
            {
               "balance_msat": 293999705000,
               "coin_type": "bcrt"
            }
         ]
      },
      {
         "account": "c715632ba5902529ee099588f9ca12ecf877c04d583849bc08c17dcd0280397d",
         "peer_id": "0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382",
         "we_opened": true,
         "account_closed": false,
         "account_resolved": false,
         "balances": [
            {
               "balance_msat": 999900000,
               "coin_type": "bcrt"
            }
         ]
      },
      {
         "account": "8861954c02c26b6a1f9950e82d9caa24edf789a0c83aad0fbb116700a459d6a0",
         "peer_id": "0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382",
         "we_opened": false,
         "account_closed": false,
         "account_resolved": false,
         "balances": [
            {
               "balance_msat": 180000,
               "coin_type": "bcrt"
            }
         ]
      }
   ]
}

If we replace getinfo by bkpr-listbalances in main.go

...
func main() {
  ...
  body, _ :=ln.Rpc(RUNE, "bkpr-listbalances", "[]")
  fmt.Println(body)
}

we get the same information as above by running main.go program:

◉ tony@tony:~/clnlive:
$ go run main.go
{"jsonrpc":"2.0","id":"(null)commando:bkpr-listbalances#45","result":{"accounts":[{"account":"wallet","balances":[{"balance_msat":293999705000,"coin_type":"bcrt"}]},{"account":"c715632ba5902529ee099588f9ca12ecf877c04d583849bc08c17dcd0280397d","peer_id":"0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382","we_opened":true,"account_closed":false,"account_resolved":false,"balances":[{"balance_msat":999900000,"coin_type":"bcrt"}]},{"account":"8861954c02c26b6a1f9950e82d9caa24edf789a0c83aad0fbb116700a459d6a0","peer_id":"0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382","we_opened":false,"account_closed":false,"account_resolved":false,"balances":[{"balance_msat":180000,"coin_type":"bcrt"}]}]}}
◉ tony@tony:~/clnlive:

As we are writing an application which only uses bookkeeper commands, we don't want to use an unrestricted rune.

To generate a new rune restricted to the methods starting by bkpr-, we run the following command:

◉ tony@tony:~/clnlive:
$ l1-cli commando-rune null '[["method^bkpr-"]]'
{
   "rune": "vxfQM55ofNCEVh7U9EekbBJN39WQtjupFniqylktprM9MiZtZXRob2ReYmtwci0=",
   "unique_id": "2"
}

Now, we replace in main.go the unrestricted run by this new rune and we also replace bkpr-listbalances by getinfo in order to check that this rune doesn't authorize main.go to run getinfo on the node l1 using commando messages:

var RUNE = "vxfQM55ofNCEVh7U9EekbBJN39WQtjupFniqylktprM9MiZtZXRob2ReYmtwci0="
...
func main() {
  ...
  body, _ :=ln.Rpc(RUNE, "getinfo", "[]")
  fmt.Println(body)
}

Back to our terminal we get the following expected error:

◉ tony@tony:~/clnlive:
$ go run main.go
{"error":{"code":19537,"message":"Not authorized: method does not start with bkpr-"}}

To have human understable information about runes we can use the command decode like this:

◉ tony@tony:~/clnlive:
$ l1-cli -k decode string=vxfQM55ofNCEVh7U9EekbBJN39WQtjupFniqylktprM9MiZtZXRob2ReYmtwci0=
{
   "type": "rune",
   "unique_id": "2",
   "string": "bf17d0339e687cd084561ed4f447a46c124ddfd590b63ba91678aaca592da6b3:=2&method^bkpr-",
   "restrictions": [
      {
         "alternatives": [
            "method^bkpr-"
         ],
         "summary": "method (of command) starts with 'bkpr-'"
      }
   ],
   "valid": true
}

Before we move on, let's replace getinfo by bkpr-listbalances in main.go

var RUNE = "vxfQM55ofNCEVh7U9EekbBJN39WQtjupFniqylktprM9MiZtZXRob2ReYmtwci0="
...
func main() {
  ...
  body, _ :=ln.Rpc(RUNE, "bkpr-listbalances", "[]")
  fmt.Println(body)
}

and check that everything works as expected:

◉ tony@tony:~/clnlive:
$ go run main.go
{"jsonrpc":"2.0","id":"(null)commando:bkpr-listbalances#50","result":{"accounts":[{"account":"wallet","balances":[{"balance_msat":293999705000,"coin_type":"bcrt"}]},{"account":"c715632ba5902529ee099588f9ca12ecf877c04d583849bc08c17dcd0280397d","peer_id":"0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382","we_opened":true,"account_closed":false,"account_resolved":false,"balances":[{"balance_msat":999900000,"coin_type":"bcrt"}]},{"account":"8861954c02c26b6a1f9950e82d9caa24edf789a0c83aad0fbb116700a459d6a0","peer_id":"0262e4c2059fe147015b33b316157f303c8e54e8c40b02b08a8ba593ef558af382","we_opened":false,"account_closed":false,"account_resolved":false,"balances":[{"balance_msat":180000,"coin_type":"bcrt"}]}]}}

We use the library net/http to start a server on localhost on port 8080.

In the home page (root /), we print foo. To do that, we define a http.HandlerFunc named myHandler which writes foo to its argument w. The function myHandler is used in http.HandleFunc() method to produce the home page (root /). Finally, we start the server with http.ListenAndServe() method:

package main

import (
  "fmt"
  "log"
  "net/http"
  lnsocket "github.com/jb55/lnsocket/go"
)

var RUNE = "vxfQM55ofNCEVh7U9EekbBJN39WQtjupFniqylktprM9MiZtZXRob2ReYmtwci0="
var HOSTNAME = "127.0.0.1:7171"
var NODEID = "03e216b2e609dea193e1a8d2db41c24a0e2279c3a656e0b220ab96c00e0b7c6181"

func myHandler (w http.ResponseWriter, req *http.Request) {
  fmt.Fprintln(w, "foo")
}

func main() {
  ln := lnsocket.LNSocket{}
  ln.GenKey()
  err := ln.ConnectAndInit(HOSTNAME, NODEID)
  if err != nil {fmt.Println("not connected to peer")}
  http.HandleFunc("/", myHandler)
  log.Fatal(http.ListenAndServe(":8080", nil))
}

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

and by visiting http://localhost:8080 in the browser.

As we would like to pass ln struct and RUNE variable to the http.Handler function that we pass to http.HandleFunc, we define the function makeHomeHandler that takes as argument &ln and RUNE and returns and http.Handler closure which write bar to its argument w:

package main

import (
  "fmt"
  "log"
  "net/http"
  lnsocket "github.com/jb55/lnsocket/go"
)

var RUNE = "vxfQM55ofNCEVh7U9EekbBJN39WQtjupFniqylktprM9MiZtZXRob2ReYmtwci0="
var HOSTNAME = "127.0.0.1:7171"
var NODEID = "03e216b2e609dea193e1a8d2db41c24a0e2279c3a656e0b220ab96c00e0b7c6181"

func makeHomeHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    fmt.Fprintln(w, "bar")
  }
}

func main() {
  ln := lnsocket.LNSocket{}
  ln.GenKey()
  err := ln.ConnectAndInit(HOSTNAME, NODEID)
  if err != nil {fmt.Println("not connected to peer")}
  http.HandleFunc("/", makeHomeHandler(&ln, RUNE))
  log.Fatal(http.ListenAndServe(":8080", nil))
}

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

and by visiting http://localhost:8080 in the browser.

Now, in the closure returned by makeHomeHandler, we do a commando request to the node l1 that runs bkpr-listbalances and we write the answer we get to w (http.ResponseWriter):

...
func makeHomeHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    body, _ :=ln.Rpc(RUNE, "bkpr-listbalances", "[]")
    fmt.Fprintln(w, body)
  }
}
...

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

and by visiting http://localhost:8080 in the browser and by seeing that bkpr-listbalances data are printed.

We use the builtin Go library html/template for the html template. And the template for the home page will be defined in the file index.html and we start with this skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="CLN Bookkeeper Web App" />
    <link rel="stylesheet" type="text/css" href="/assets/bkpr.css" />
    <script src="https://unpkg.com/htmx.org@1.9.4"></script>
    <script src="https://unpkg.com/hyperscript.org@0.9.9"></script>
    <title>CLN Bookkeeper Web App</title>
  </head>
  <body>
    <h1 id="header">CLN Bookkeeper</h1>
    <div id="content">
      <div id="tabs">
        <div id="tab-accounts"
             class="tab"
             >
          Accounts
        </div>
        <div>|</div>
        <div id="tab-listincome"
             class="tab"
             >
          Income Events
        </div>
      </div>
      <div id="accounts-or-listincome">
        <!-- ... -->
      </div>
    </div>
  </body>
</html>

To use the template index.html in the home page we import html/template and we do the following modifications in main.go:

...
import (
  "fmt"
  "log"
  "net/http"
  "html/template"
  lnsocket "github.com/jb55/lnsocket/go"
)
...
func makeHomeHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    tpl, _ := template.ParseFiles("index.html")
    tpl.Execute(w, nil)
  }
}
...

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

and by visiting http://localhost:8080 in the browser and by seeing that the template has been used in the home page.

In tpl.Execute() call we can pass bkpr-listconfigs data instead of nil like this

...
func makeHomeHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    body, _ :=ln.Rpc(RUNE, "bkpr-listbalances", "[]")
    tpl, _ := template.ParseFiles("index.html")
    tpl.Execute(w, body)
  }
}
...

and to get that data used in the template we add {{.}} in the file index.html where we want the data to be used:

...
<div id="accounts-or-listincome">
  {{.}}
</div>
...

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

and by visiting http://localhost:8080 in the browser and by seeing that bkpr-listbalances data are printed along with the template.

Now instead of passing the raw string body containing bkpr-listbalances data directly to the template we transform body into an array of accounts of type Account named accounts that we pass to the template:

package main

import (
  "fmt"
  "log"
  "net/http"
  "html/template"
  "github.com/tidwall/gjson"
  lnsocket "github.com/jb55/lnsocket/go"
)

// var RUNE = "BhOlLq7GtF8EfoeipYpXzB-WAY3O4odwu_JeZqZy9Rc9MQ=="
var RUNE = "vxfQM55ofNCEVh7U9EekbBJN39WQtjupFniqylktprM9MiZtZXRob2ReYmtwci0="
var HOSTNAME = "127.0.0.1:7171"
var NODEID = "03e216b2e609dea193e1a8d2db41c24a0e2279c3a656e0b220ab96c00e0b7c6181"

type Account struct {
  Account string
  BalanceMsat string
}

func makeHomeHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    body, _ := ln.Rpc(RUNE, "bkpr-listbalances", "[]")
    accArr := gjson.Get(body, "result.accounts").Array()
    accounts := make([]Account, len(accArr))
    for i, account := range accArr {
      accounts[i] = Account{
        Account: account.Get("account").String(),
        BalanceMsat: account.Get("balances.0.balance_msat").String(),
      }
    }
    tpl, _ := template.ParseFiles("index.html")
    tpl.Execute(w, accounts)
  }
}
...

We also need to modify index.html template:

<div id="accounts-or-listincome">
  <li class="account">
    <div>Account: {{.Account}}</div>
    <div>Balance: {{.BalanceMsat}} msat</div>
  </li>
</div>

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

and by visiting http://localhost:8080 in the browser and by seeing that bkpr-listbalances data are printed.

Now that we get the template system working, let's add some CSS to make the UI more pleasant.

To use the CSS file bkpr.css defined in the directory assets we use the method http.Handle and http.FileServer as follow:

...
func main() {
  ln := lnsocket.LNSocket{}
  ln.GenKey()
  err := ln.ConnectAndInit(HOSTNAME, NODEID)
  if err != nil {fmt.Println("not connected to peer")}
  http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("./assets"))))
  http.HandleFunc("/", makeHomeHandler(&ln, RUNE))
  log.Fatal(http.ListenAndServe(":8080", nil))
}

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

and by visiting http://localhost:8080 in the browser.

Note that in that css file we defined only 4 type of tags describing the movement descriptor of the coins present in the data returned by bkpr-listincome:

.tag-onchain_fee {background-color: #7CB2DF;}
.tag-invoice {background-color: #ffe08a;}
.tag-deposit {background-color: #DFA87C;}
.tag-withdrawal {background-color: #E9A5A9;}

If you want the complete list of these tags and their meaning you can check:

• coin_movement notification topic documentation (or in the source code lightning:common/coin_mvt.c): deposit, withdrawal, penalty, invoice, routed, pushed, channel_open, channel_close, delayed_to_us, htlc_timeout, htlc_fulfill, htlc_tx, to_wallet, ignored, anchor, to_them, penalized, stolen, to_miner, opener, lease_fee, leased, stealable, channel_proposed and

• lightning:plugins/bkpr/account_entry.c: journal_entry, penalty_adj, invoice_fee, rebalance_fee.

Now:

1. if we click on Accounts we will swap the content of the div with id accounts-or-listincome with the html returned at the root /accounts (but as we haven't assigned yet the root /accounts a handler function, an ajax request to that root returns the home page) and

2. if we click on Income events we will swap the content of the div with id accounts-or-listincome with the html returned at the root /listincome (we assigned that root a handler function just below).

To do that we use the attributes hx-get, hx-swap and hx-target provided by HTMX library like this in index.html template:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <h1 id="header">CLN Bookkeeper</h1>
    <div id="content">
      <div id="tabs">
        <div id="tab-accounts"
             class="tab selected"
             hx-get="/accounts"
             hx-swap="innerHTML"
             hx-target="#accounts-or-listincome"
             >
          Accounts
        </div>
        <div>|</div>
        <div id="tab-listincome"
             class="tab"
             hx-get="/listincome"
             hx-swap="innerHTML"
             hx-target="#accounts-or-listincome"
             >
          Income Events
        </div>
      </div>
      <div id="accounts-or-listincome">
        ...
      </div>
    </div>
  </body>
</html>

We also have to define the new root /listincome which will return foo:

func listincomeHandler (w http.ResponseWriter, req *http.Request) {
  fmt.Fprintln(w, "foo")
}
...
func main() {
  ...
  http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("./assets"))))
  http.HandleFunc("/", makeHomeHandler(&ln, RUNE))
  http.HandleFunc("/listincome", listincomeHandler)
  log.Fatal(http.ListenAndServe(":8080", nil))
}

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

by visiting http://localhost:8080 in the browser and by clicking on Accounts and Income Events buttons.

When we click on Accounts we want to swap the content of the div with id accounts-or-listincome with the html returned at the root /accounts.

So we have to assign that root a handler function.

First we create the fragment template accounts in index.html template file using {{block ...}} construct such that we can use it in or Go code:

...
<div id="accounts-or-listincome">
  {{block "accounts" .}}
  <ul id="accounts">
    {{range .}}
    <li class="account">
      <div>Account: {{.Account}}</div>
      <div>Balance: {{.BalanceMsat}} msat</div>
    </li>
    {{end}}
  </ul>
  {{end}}
</div>
...

Now we can define the function makeAccountsHandler which returns a closure that uses the fragment template accounts (using tpl.ExecuteTemplate() method) and we assigned that closure to the root /accounts like this:

...
func makeAccountsHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    body, _ := ln.Rpc(RUNE, "bkpr-listbalances", "[]")
    accArr := gjson.Get(body, "result.accounts").Array()
    accounts := make([]Account, len(accArr))
    for i, account := range accArr {
      accounts[i] = Account{
        Account: account.Get("account").String(),
        BalanceMsat: account.Get("balances.0.balance_msat").String(),
      }
    }
    tpl, _ := template.ParseFiles("index.html")
    tpl.ExecuteTemplate(w, "accounts", accounts)
  }
}
...
func main() {
  ...
  http.HandleFunc("/accounts", makeAccountsHandler(&ln, RUNE))
  log.Fatal(http.ListenAndServe(":8080", nil))
}

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

by visiting http://localhost:8080 in the browser and by clicking on Accounts and Income Events buttons.

We can see in main.go that we have unnecessary duplicated code in the function makeHomeHandler and makeAccountsHandler.

Let's do a bit of refactoring.

We define the new function listAccounts which returns the array of accounts that we will pass as argument to the methods tpl.Execute() and tpl.ExecuteTemplate().

...
type Account struct {
  Account string
  BalanceMsat string
}

func listAccounts(ln *lnsocket.LNSocket, rune string) []Account {
  body, _ := ln.Rpc(RUNE, "bkpr-listbalances", "[]")
  accArr := gjson.Get(body, "result.accounts").Array()
  accounts := make([]Account, len(accArr))
  for i, account := range accArr {
    accounts[i] = Account{
      Account: account.Get("account").String(),
      BalanceMsat: account.Get("balances.0.balance_msat").String(),
    }
  }
  return accounts
}

func makeHomeHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    tpl, _ := template.ParseFiles("index.html")
    tpl.Execute(w, listAccounts(ln, rune))
  }
}

func makeAccountsHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    tpl, _ := template.ParseFiles("index.html")
    tpl.ExecuteTemplate(w, "accounts", listAccounts(ln, rune))
  }
}
...

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

by visiting http://localhost:8080 in the browser and by clicking on Accounts and Income Events buttons.

Let's update index.html template with a bit of hyperscript in order to toggle .selected class when we click on the divs Accounts and Income Events.

We add hyperscript snippets as value of the attribute _ like this:

<div id="tabs">
  <div id="tab-accounts"
       class="tab selected"
       hx-get="/accounts"
       hx-swap="innerHTML"
       hx-target="#accounts-or-listincome"
       _="on click
          add .selected to me
          remove .selected from #tab-listincome"
       >
    Accounts
  </div>
  <div>|</div>
  <div id="tab-listincome"
       class="tab"
       hx-get="/listincome"
       hx-swap="innerHTML"
       hx-target="#accounts-or-listincome"
       _="on click
          add .selected to me
          remove .selected from #tab-accounts"
       >
    Income Events
  </div>
</div>

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

by visiting http://localhost:8080 in the browser and by clicking on Accounts and Income Events buttons.

In that section we write the code for the data returned by bkpr-listincomes command that we ask the node l1 to run by sending it a commando message.

Let's take a look at the data returned by bkpr-listincomes command:

◉ tony@tony:~/clnlive:
$ l1-cli bkpr-listincome
{
   "income_events": [
      {
         "account": "wallet",
         "tag": "deposit",
         "credit_msat": 100000000000,
         "debit_msat": 0,
         "currency": "bcrt",
         "timestamp": 1691069981,
         "outpoint": "4404f8982b99b2a8b424aa4a4069a2ac102ee09539a70b9413f0fe7f52273a8b:1"
      },
      {
         "account": "c715632ba5902529ee099588f9ca12ecf877c04d583849bc08c17dcd0280397d",
         "tag": "invoice",
         "credit_msat": 0,
         "debit_msat": 10000,
         "currency": "bcrt",
         "timestamp": 1691070075,
         "description": "pizza",
         "payment_id": "e3b10008930c43d884dbbe7fc3e410f7d07264b1b17951fcc5928daa828612b7"
      },
      {
         "account": "c715632ba5902529ee099588f9ca12ecf877c04d583849bc08c17dcd0280397d",
         "tag": "invoice",
         "credit_msat": 0,
         "debit_msat": 20000,
         "currency": "bcrt",
         "timestamp": 1691070077,
         "description": "pizza",
         "payment_id": "5b37b6acc53bbda10a71e734ee3b195a6c01e6aa561c58c70468569e473b422a"
      },
      {
         "account": "c715632ba5902529ee099588f9ca12ecf877c04d583849bc08c17dcd0280397d",
         "tag": "invoice",
         "credit_msat": 0,
         "debit_msat": 30000,
         "currency": "bcrt",
         "timestamp": 1691070079,
         "description": "pizza",
         "payment_id": "8b64023279d255ab7cad79ae9c6fb88bd687edc27df688ab482c0f6e667d76cf"
      },
      {
         "account": "c715632ba5902529ee099588f9ca12ecf877c04d583849bc08c17dcd0280397d",
         "tag": "invoice",
         "credit_msat": 0,
         "debit_msat": 40000,
         "currency": "bcrt",
         "timestamp": 1691070082,
         "description": "pizza",
         "payment_id": "24bc4ff483dda7256bfdb8b908f5a730e1174a3fba061a6f142b3c1166243237"
      },
      {
         "account": "wallet",
         "tag": "deposit",
         "credit_msat": 200000000000,
         "debit_msat": 0,
         "currency": "bcrt",
         "timestamp": 1691070102,
         "outpoint": "12811f534a59262fdd007e64425298c0bff472493bdf6c43d027d1b6cfa4626e:1"
      },
      {
         "account": "8861954c02c26b6a1f9950e82d9caa24edf789a0c83aad0fbb116700a459d6a0",
         "tag": "invoice",
         "credit_msat": 50000,
         "debit_msat": 0,
         "currency": "bcrt",
         "timestamp": 1691070165,
         "description": "pizza",
         "payment_id": "6e8490f0129f89c5a5d0427008d5c1d987ed6623542a74d7c60d6068262c31ba"
      },
      {
         "account": "wallet",
         "tag": "withdrawal",
         "credit_msat": 0,
         "debit_msat": 5000000000,
         "currency": "bcrt",
         "timestamp": 1691070167,
         "outpoint": "e31469500f8c0ac33cb044577cbc8b77de048e288b2f1b860521c8f66e3de12e:0"
      },
      {
         "account": "8861954c02c26b6a1f9950e82d9caa24edf789a0c83aad0fbb116700a459d6a0",
         "tag": "invoice",
         "credit_msat": 60000,
         "debit_msat": 0,
         "currency": "bcrt",
         "timestamp": 1691070167,
         "description": "pizza",
         "payment_id": "c4a85c2f5279a7fbd53ffe520b9ba9bcffa1d7ae4c680b027273af6f6e444ca2"
      },
      {
         "account": "8861954c02c26b6a1f9950e82d9caa24edf789a0c83aad0fbb116700a459d6a0",
         "tag": "invoice",
         "credit_msat": 70000,
         "debit_msat": 0,
         "currency": "bcrt",
         "timestamp": 1691070169,
         "description": "pizza",
         "payment_id": "3502d6e21dbda004677854be1c96101d10c94a2cbf063a8c61a545627194eabc"
      },
      {
         "account": "wallet",
         "tag": "onchain_fee",
         "credit_msat": 0,
         "debit_msat": 141000,
         "currency": "bcrt",
         "timestamp": 1691070193,
         "txid": "e31469500f8c0ac33cb044577cbc8b77de048e288b2f1b860521c8f66e3de12e"
      },
      {
         "account": "c715632ba5902529ee099588f9ca12ecf877c04d583849bc08c17dcd0280397d",
         "tag": "onchain_fee",
         "credit_msat": 0,
         "debit_msat": 154000,
         "currency": "bcrt",
         "timestamp": 1691070012,
         "txid": "7c398002cd7dc108bc4938584dc077f8ec12caf9889509ee292590a52b6315c7"
      }
   ]
}

For each income events we are going to use only the field account, tag, credit_msat and debit_msat.

Here is the code that we add to main.go to take care of bkpr-listincome data:

...
type IncomeEvent struct {
  Account string
  Tag string
  CreditMsat int64
  DebitMsat int64
}

func makeIncomeEventsHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    body, _ := ln.Rpc(RUNE, "bkpr-listincome", "[]")
    incEvtArr := gjson.Get(body, "result.income_events").Array()
    incomeEvents := make([]IncomeEvent, len(incEvtArr))
    for i, incomeEvent := range incEvtArr {
      incomeEvents[i] = IncomeEvent{
        Account: abbrevAccount(incomeEvent.Get("account").String()),
        Tag: incomeEvent.Get("tag").String(),
        CreditMsat: incomeEvent.Get("credit_msat").Int(),
        DebitMsat: incomeEvent.Get("debit_msat").Int(),
      }
    }
    tpl, _ := template.ParseFiles("listincome.html")
    tpl.Execute(w, incomeEvents)
  }
}

func main() {
  ...
  http.HandleFunc("/listincome", makeIncomeEventsHandler(&ln, RUNE))
  http.HandleFunc("/accounts", makeAccountsHandler(&ln, RUNE))
  log.Fatal(http.ListenAndServe(":8080", nil))
}

To get that code working we define the template listincome.html like this:

<ul id="income-events">
  {{range .}}
  <li class="income-event">
    <div class="income-event-left">
      <div>{{.Account}}</div>
      <div class="tag tag-{{.Tag}}">{{.Tag}}</div>
    </div>
    {{if .CreditMsat}}
    <div class="credit">{{.CreditMsat}} msat</div>
    {{else}}
    <div>-{{.DebitMsat}} msat</div>
    {{end}}
  </li>
  {{end}}
</ul>

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

by visiting http://localhost:8080 in the browser and by clicking on Accounts and Income Events buttons.

As account names can be channel id, they can be large and take too much space in the UI. In that section we are going to abbreviate them.

To do so we define the function abbrevAccount that we use in listAccounts and in makeIncomeEventsHandler functions:

...
func abbrevAccount(acc string) string{
  if len(acc) > 15 {
    return acc[:6] + "..." + acc[len(acc) - 6:]
  } else {
    return acc
  }
}

func listAccounts(ln *lnsocket.LNSocket, rune string) []Account {
  ...
  for i, account := range accArr {
    accounts[i] = Account{
      Account: abbrevAccount(account.Get("account").String()),
      ...
    }
  }
  ...
}
...
func makeIncomeEventsHandler(ln *lnsocket.LNSocket, rune string) http.HandlerFunc {
  return func(w http.ResponseWriter, req *http.Request) {
    ...
    for i, incomeEvent := range incEvtArr {
      incomeEvents[i] = IncomeEvent{
        Account: abbrevAccount(incomeEvent.Get("account").String()),
        ...
      }
    }
    ...
  }
}
...

Back to our terminal we verify that this is working by running

◉ tony@tony:~/clnlive:
$ go run main.go

by visiting http://localhost:8080 in the browser and by clicking on Accounts and Income Events buttons.

We are done!