[Lightning network explorer] Dashboard view

client/src/app.js

@@ -45,6 +45,9 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   , goScan$   = route('/scan-qr').mapTo(true)
   , goMempool$= route('/mempool')
   , goSearch$ = route('/search').map(loc => loc.query.q).filter(Boolean)
+  , goLnExplorer$ = route('/ln/recent')
+  , goLnChannels$ = route('/channels/recent')
+  , goLnNodes$ = route('/nodes/recent')
 
   // Elements only
   , goAsset$ = !process.env.IS_ELEMENTS ? O.empty() : route('/asset/:asset_id').map(loc => ({
@@ -228,6 +231,9 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
                   , goHome$.mapTo('dashBoard')
                   , goBlocks$.mapTo('recentBlocks')
                   , goRecent$.mapTo('recentTxs')
+                  , goLnExplorer$.mapTo('lnExplorer')
+                  , goLnChannels$.mapTo('lnChannels')
+                  , goLnNodes$.mapTo('lnNodes')
                   , block$.filter(notNully).mapTo('block')
                   , tx$.filter(notNully).mapTo('tx')
                   , addr$.filter(notNully).mapTo('addr')
@@ -249,7 +255,10 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
                    , goAssetList$.withLatestFrom(t$, (_, t) => t`Registered assets`)
                    , goPush$.withLatestFrom(t$, (_, t) => t`Broadcast transaction`)
                    , goMempool$.withLatestFrom(t$, (_, t) => t`Mempool`)
-                   , goRecent$.withLatestFrom(t$, (_, t) => t`Recent transactions`))
+                   , goRecent$.withLatestFrom(t$, (_, t) => t`Recent transactions`)
+                   , goLnExplorer$.withLatestFrom(t$, (_, t) => t`Lightning Explorer`)
+                   , goLnChannels$.withLatestFrom(t$, (_, t) => t`Lightning Channels`)
+                   , goLnNodes$.withLatestFrom(t$, (_, t) => t`Lightning Nodes`))
 
   // App state
   , state$ = combine({ t$, error$, tipHeight$, spends$
@@ -338,6 +347,12 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     , tickWhileViewing(5000, 'dashBoard', view$)
     .mapTo(                 { category: 'recent',     method: 'GET', path: '/mempool/recent', bg: true })
 
+    // // fetch recent Lightning network info when opening the recent LN explorer page
+    // , goLnExplorer$.mapTo(          { category: 'recent',     method: 'GET', path: '/mempool/recent' })
+    // // ... and every 5 seconds while it remains open
+    // , tickWhileViewing(5000, 'lnExplorer', view$)
+    //    .mapTo(                 { category: 'recent',     method: 'GET', path: '/mempool/recent', bg: true })
+
     , goHome$.flatMap(_ =>  [{ category: 'blocks',    method: 'GET', path: '/blocks' }
                               , { category: 'recent',    method: 'GET', path: '/mempool/recent' }])
     //

client/src/driver/ln-sample.js

@@ -0,0 +1,185 @@
+export const lnChannelData = [
+	{
+		"scid": "612015659904139264",
+		"signature": {
+			"node_signature_1": "d31645a7f98f3556d883c01a63070d936c7544c7d623a8e572db4abdc6ff7e640a2ae2cd306a778240b4b32a3bac9f83e1f39c55fc0275da3f26d92a13622c00",
+			"node_signature_2": "e0855eb6ca2e89135166e6a03c1d35b6b39dafe874a05004bb621cd286c9d12467ad584b0fe3a48c3301a6889f9742726a0859a89f0c808f9be954d0ef573cf6",
+			"bitcoin_signature_1": "71ee57ed19e83496e60f9b6b3acf93889d8983dc3f77c85583327162383a853b6a666b57c499ba088cd8d86d5f810f2e34f721a9114d22da08cfc32adce3debe",
+			"bitcoin_signature_2": "986a8a3d2ece5b04e0754e237a5983a197d6bbd0e6da4ea9929f00f8be7c05371c88ff206a1223b29cfc06e9f1bab2791e7c153f9f05a429562a63b4d84b05ec"
+		},
+		"features": "0",
+		"chain_hash": "000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f",
+		"short_channel_id": {
+			"block": 556625,
+			"tx_id": 1424,
+			"output_index": 0,
+			"short_channel_id": "556625x1424x0"
+		},
+		"node_id_1": "02ad6fb8d693dc1e4569bcedefadf5f72a931ae027dc0f0c544b34c1c6f3b9a02b",
+		"node_id_2": "033ac2f9f7ff643c235cc247c521663924aff73b26b38118a6c6821460afcde1b3",
+		"bitcoin_key_1": "0338d302d0db380a95f9df246eb1a6bdf5aadc9e641c06b7e15e74bae2fd7df47d",
+		"bitcoin_key_2": "03a35d8e3d0454f66029e8379465aad5ca40a9068630db43b9c13e86527516c30d"
+	},
+	{
+		"scid": "758808158703452160",
+		"signature": {
+			"node_signature_1": "4271355d84deb8992e9e4b9d8516cbb186363bc0ee38955e2e73741251de384002f04c0ef22abe3976a681b3e9ea8a5b6a35dabd73effc29b8bdbccda98fa167",
+			"node_signature_2": "f5f7d9d48dda4247fe8bacade010ebd1eb19287be39e4bd1029610e755099c1850ad3bb1c3124b4a76e2c5f7a5334df81f490aadb840cb64b5b71ee041548540",
+			"bitcoin_signature_1": "eadce954da0a7d30dc5d3b151b22b2441f60460651eabf24215d148b4dfa00922731f04e78cf59728bb29e5d9415134d7575c91b183631d27ee8d5a08c7e4d95",
+			"bitcoin_signature_2": "04dbd229d0ce39430e5aae8f86f7946aedb6137de4c5ece342e042ed4324f1741f3cbbc93919b06aa45de9f34a58e627da113a611f3218f994aa5cba106275a5"
+		},
+		"features": "0",
+		"chain_hash": "000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f",
+		"short_channel_id": {
+			"block": 690132,
+			"tx_id": 48,
+			"output_index": 0,
+			"short_channel_id": "690132x48x0"
+		},
+		"node_id_1": "02ad6fb8d693dc1e4569bcedefadf5f72a931ae027dc0f0c544b34c1c6f3b9a02b",
+		"node_id_2": "02c36420ae3cc417302673f266f32ca5f18718ed3c3d5bba37427355080cd7f013",
+		"bitcoin_key_1": "03b25acea1e1fb4c967ae6c53bd4b064f2fa355f7c6fdd94dc5977956b9d984356",
+		"bitcoin_key_2": "029381a4913c30c5a0d638bdbd0d78932e88e95e3f24763aa2a9f82191aec2d4f3"
+	},
+	{
+		"scid": "761022575222063104",
+		"signature": {
+			"node_signature_1": "037d3db6e2117dca8672d0f0cfb5eb31ac74fa670f5e5234c290fa9290cc579059e5bd7ba8efc7109292de38a145152f75a1ffbe81d8809ec59bd923873fecf7",
+			"node_signature_2": "468117cd36a18882e12d8fc0298e22e8cd7b0a9432fd9e6b9ecec0743b5c269c7f2aff267ef3079c5672753d20bc39ca1ac8d97eb7525e1ed6b424fa15f80886",
+			"bitcoin_signature_1": "cfaa93e258b5dcfbb56cb8a1082ebe49d0f39f2c49409ce6247dc3914ee43ade52e419660ab355c710a082c7d4ca219d5232a78f15066c5d15d0a14143902bff",
+			"bitcoin_signature_2": "c9e6c67f9142deba4d16dd16bdcb8cee4cd77e7956d8f41803fe5aa9786593a815e0a1018568d0062e3b54a1191dbec504053da6abd9b6a384bd6e115f135a1e"
+		},
+		"features": "0",
+		"chain_hash": "000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f",
+		"short_channel_id": {
+			"block": 692146,
+			"tx_id": 1578,
+			"output_index": 0,
+			"short_channel_id": "692146x1578x0"
+		},
+		"node_id_1": "02ad6fb8d693dc1e4569bcedefadf5f72a931ae027dc0f0c544b34c1c6f3b9a02b",
+		"node_id_2": "03d1ad1aed3692ce19b95a3e2c71cde91e1d339661cc0af83b434b5baafd1e6932",
+		"bitcoin_key_1": "0363e43be5839734b57065f4bffd5edbf95671dd4097daa512061dbf13420ac2c4",
+		"bitcoin_key_2": "02955c96246098a62208a79d3a5dde86658f10bdc23ea956b383840a0bac540fc8"
+	},
+	{
+		"scid": "812398355498795008",
+		"signature": {
+			"node_signature_1": "490a4130b5671e7b93b71cb8850a4ad024a88ab4596442d544f46cfde719562e4ce3f062657e75162923bdf58bc8a0b96f35529833feb336e3d0797ddf149e01",
+			"node_signature_2": "93cae6fd1233300ebc742c86bd7cf058437f66beb89a608eceee447bfd8227523a7b3161b1ac0a353c3a929bb05d5cd72eb52534052e4f3d49fa1096e4ab8c91",
+			"bitcoin_signature_1": "79efb60a8719956d68336ad35f4300eca4368526c73dff98b10e90c05e6c6ec732a2dffd502cad5dee995d0dce265f5ccd739affe55773674f686f2a4ce47c96",
+			"bitcoin_signature_2": "df414fbc3789843c809ad9e2c4c14f82a5660a3f702848042c8e5db61f51aa1f774fbca56d6cf6670909c47b3ea80424838355d30dc7a718341e1b3882ef5706"
+		},
+		"features": "0",
+		"chain_hash": "000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f",
+		"short_channel_id": {
+			"block": 738872,
+			"tx_id": 926,
+			"output_index": 0,
+			"short_channel_id": "738872x926x0"
+		},
+		"node_id_1": "0215e9649c6a14ca64109418a5b17b0ddefd446e8256486a0c692e1fd8ec72e316",
+		"node_id_2": "03df3f0a2fd6bea5429a596461ce784c922b2981ada1af89cfefcd9ccfb16c16a7",
+		"bitcoin_key_1": "037b5cee8449f2716602818b15a6c4cd93956cc87043a161733724e5937593547f",
+		"bitcoin_key_2": "0383b098b40b85389b260b1e12cf2e95d3fbf4677b56f5b98710552603db668f24"
+	},
+	{
+		"scid": "812404952712347648",
+		"signature": {
+			"node_signature_1": "e425999927e147f705b3fab46ef459f2629b3853100e894eb74e2ac42d41a77e6f08b15056e42289ff3ab40093dfa598c08acd6014c65ce008215ef94b874440",
+			"node_signature_2": "62560712dd80b801ae7ddf6af258f5f95e484e985d897f059f118864ad2004c5651c02bf80521804e1d0dcf46fb0f8ef66273a8b2639ee5ad3e2526d414ed9da",
+			"bitcoin_signature_1": "c13a626ec3e491f3c916f17df91522e34b5b581a411b85dee1ac3e670949474e28300186e50eb7c07e8a6da52e6bd9846930ae53049fb19fb2c1f0da42abf265",
+			"bitcoin_signature_2": "044537c7daddf2b9836f707c550c58f64968dbf1829b43eb5bc7b1c2f9014ed04fbb7bfdcde744fa35e0c9641a505e02e95ba56d289aa1efc654eca87ca4a094"
+		},
+		"features": "0",
+		"chain_hash": "000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f",
+		"short_channel_id": {
+			"block": 738878,
+			"tx_id": 3120,
+			"output_index": 0,
+			"short_channel_id": "738878x3120x0"
+		},
+		"node_id_1": "023fca3d779d3def8e99cfae86fb37b10b04c2f63324fe45aeece536eadce10947",
+		"node_id_2": "038fe1bd966b5cb0545963490c631eaa1924e2c4c0ea4e7dcb5d4582a1e7f2f1a5",
+		"bitcoin_key_1": "02bf94704de7900b8e15c79ac6597813837ea0480d8d54847610b32f7db1da60ee",
+		"bitcoin_key_2": "02af011517d69bd26dde2d1b1e84e0cddde4f0145cdf21138542c69bd3f18ae3b7"
+	}
+]
+
+export const lnNodeData = [
+	{
+		"node_id": "02267251607b23e94b331922d8e378dcaa7b049293b7f910e0b813a3d01e1b7d74",
+		"signature": "457d7528ec17c44b649ce8d57f6ac92a84f9dfef8eb9eb55846694544e5e47eb3ee3741020a98f8b224c03bf4399e6bb3bdf34ca0aba5c75ae9dfc2b5e9af3aa",
+		"features": "800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002000808252a1",
+		"timestamp": 1650888646,
+		"parsed_node_id": "02267251607b23e94b331922d8e378dcaa7b049293b7f910e0b813a3d01e1b7d74",
+		"rgb_color": "68f442",
+		"alias": "6d794e6f6465534b000000000000000000000000000000000000000000000000",
+		"abytes": 38,
+		"addresses": {
+			"type": 4,
+			"address": "d65611ff704b1c600d741a76cf370be34b01cfa7fa7b48ad1f343081c8fbcc8f568603",
+			"port": "2607"
+		}
+	},
+	{
+		"node_id": "039513a61a01cc2879768dfc68b082cdc7ca20ad6616a597306ae16b93ce0e3a39",
+		"signature": "2140c3f261e921e1e691113fd03de5e34973791522194e1299f7fd158c08353e6172ee1336a7f522968c999d41539283b197d7d1152d30a761c2d1398c3a73c3",
+		"features": "808252a1",
+		"timestamp": 1650889637,
+		"parsed_node_id": "039513a61a01cc2879768dfc68b082cdc7ca20ad6616a597306ae16b93ce0e3a39",
+		"rgb_color": "3399ff",
+		"alias": "3033393531336136316130316363323837393736000000000000000000000000",
+		"abytes": 38,
+		"addresses": {
+			"type": 4,
+			"address": "166acc3235e50225dbaade6dd2344ec2304dd9845c7393fa9e37bd431440a8f017f203",
+			"port": "2607"
+		}
+	},
+	{
+		"node_id": "0251c21a12e97d679c8b56bf5b61a59bcbe5eb2bf4b05e7c778a3174225e5726f6",
+		"signature": "09fa52be2d8179637de032ce5c90b47854bd5691f2d989315389fc7b22cd489f267680ec5657eb8a357448eddddd2a59d56fd193c139457dd627531d15481214",
+		"features": "800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002000808a52a1",
+		"timestamp": 1650889321,
+		"parsed_node_id": "0251c21a12e97d679c8b56bf5b61a59bcbe5eb2bf4b05e7c778a3174225e5726f6",
+		"rgb_color": "00008b",
+		"alias": "43727970746f57697a6172640000000000000000000000000000000000000000",
+		"abytes": 45,
+		"addresses": {
+			"type": 1,
+			"address": "143aa479",
+			"port": "2607"
+		}
+	},
+	{
+		"node_id": "034bfcece8861de39f85edd954de0ad7b54e3ce70998ca173f915e0692324efa9e",
+		"signature": "00f930091c98ae219877180de911af6ba5f9efbf9aab50105a4fe1d39f0bcfa00dc5858caf468b592ece35f38c56b0f0593c6787b90fe25ce73ca2d74c46adb5",
+		"features": "800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002000808252a1",
+		"timestamp": 1650890179,
+		"parsed_node_id": "034bfcece8861de39f85edd954de0ad7b54e3ce70998ca173f915e0692324efa9e",
+		"rgb_color": "3399ff",
+		"alias": "7777772e7370656e646d796274632e636f6d0000000000000000000000000000",
+		"abytes": 38,
+		"addresses": {
+			"type": 4,
+			"address": "b65e0a4952a83bfe47c3a7e9eee7ff56365ec19031e98504f279316e060293710eb003",
+			"port": "2607"
+		}
+	},
+	{
+		"node_id": "03a09f56bba3d2c200cc55eda2f1f069564a97c1fb74345e1560e2868a8ab3d7d0",
+		"signature": "a87e6d2d0ed98ebe7b6e4932865bafb4cdc167c33f882ab877660df9cb3c8ef722b68e2895c87da4ba9e6d1d29760478663af365c513171e0ca6fdde9fff9c9e",
+		"features": "800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002000808a52a1",
+		"timestamp": 1650889613,
+		"parsed_node_id": "03a09f56bba3d2c200cc55eda2f1f069564a97c1fb74345e1560e2868a8ab3d7d0",
+		"rgb_color": "3399ff",
+		"alias": "45696e756e647a77616e7a696700000000000000000000000000000000000000",
+		"abytes": 45,
+		"addresses": {
+			"type": 1,
+			"address": "3eab8bf0",
+			"port": "2607"
+		}
+	}
+]

client/src/views/index.js

@@ -1,6 +1,9 @@
 export { dashBoard }       from './home'
 export { recentBlocks }       from './blocks-all'
 export { recentTxs }          from './transactions-all'
+export { lnExplorer }         from './ln-explorer'
+export { lnChannels }         from './ln-channels-list'
+export { lnNodes }            from './ln-nodes-list'
 export { default as block }   from './block'
 export { default as addr }    from './addr'
 export { default as tx }      from './tx'

client/src/views/ln-channels-list.js

@@ -0,0 +1,18 @@
+import Snabbdom from 'snabbdom-pragma'
+import layout from './layout'
+import { channels } from './ln-channels'
+
+const isTouch = process.browser && ('ontouchstart' in window)
+
+const homeLayout = (body, { t, activeTab, ...S }) => layout(
+  <div>
+     { body }
+   </div>
+ , { t, isTouch, activeTab, ...S })
+
+export const lnChannels = ({ mempoolRecent, t, ...S }) => homeLayout(
+    <div className="container dash-container">
+      {channels(mempoolRecent, false, { t, ...S })}
+    </div>
+  , {...S, t, activeTab: 'lnChannels' })
+

client/src/views/ln-channels.js

@@ -0,0 +1,68 @@
+import Snabbdom from 'snabbdom-pragma'
+import { lnChannelData } from '../driver/ln-sample'
+
+var localData = lnChannelData;
+
+const staticRoot = process.env.STATIC_ROOT || ''
+
+const LN_API_URL = (process.env.LN_API_URL || 'http://localhost:3000/').replace(/\/+$/, '')
+
+async function getData() {
+  let response = await fetch(`${LN_API_URL}/channel_list`);
+  let data = await response.json();
+  localData = data;
+  return data;
+}
+
+getData();
+
+export const channels = (txs, viewMore, { t } ) => 
+      <div className="tx-container">
+      <div className="transactions-table">
+            <h3 className="table-title">{`Latest Channels`}</h3>
+            <div className="transactions-table-row header">
+              <div className="transactions-table-cell">{`Short Channel ID`}</div>
+              <div className="transactions-table-cell">{`block`}</div>
+              <div className="transactions-table-cell">{`tx_id`}</div>
+              <div className="transactions-table-cell">{`Output Index`}</div>
+            </div>
+            {
+              !viewMore ? 
+              localData.map(channel => { return(
+                <div className="transactions-table-link-row">
+                  <a className="transactions-table-row transaction-data" href={`channel/${channel.short_channel_id.short_channel_id}`}>
+                    <div className="transactions-table-cell highlighted-text" data-label={`TXID`}>{channel.short_channel_id.short_channel_id}</div>
+                    <div className="transactions-table-cell" data-label={`Value`}>{channel.short_channel_id.block}</div>
+                    <div className="transactions-table-cell" data-label={`Size`}>{channel.short_channel_id.tx_id}</div>
+                    <div className="transactions-table-cell" data-label={`Fee`}>{channel.short_channel_id.output_index}</div>
+                  </a>
+                </div>
+              )})
+              :
+              localData.slice(0,5).map(channel => { return(
+                <div className="transactions-table-link-row">
+                  <a className="transactions-table-row transaction-data" href={`channel/${channel.short_channel_id.short_channel_id}`}>
+                    <div className="transactions-table-cell highlighted-text" data-label={`TXID`}>{channel.short_channel_id.short_channel_id}</div>
+                    <div className="transactions-table-cell" data-label={`Value`}>{channel.short_channel_id.block}</div>
+                    <div className="transactions-table-cell" data-label={`Size`}>{channel.short_channel_id.tx_id}</div>
+                    <div className="transactions-table-cell" data-label={`Fee`}>{channel.short_channel_id.output_index}</div>
+                  </a>
+                </div>
+              )})
+            }
+            {
+              viewMore ? 
+              <a className="view-more" href="channels/recent">
+                <span>{t`View more Channels`}</span>
+                <div><img alt="" src={`${staticRoot}img/icons/arrow_right_blu.png`} /></div>
+              </a>
+              : 
+              <div className="load-more-container">
+                <div>
+                   <div className="load-more disabled"><span>{t`Load more`}</span><div><img src="img/Loading.gif" /></div></div> 
+                </div>
+              </div>
+            }
+        </div>
+    </div>
+

client/src/views/ln-explorer.js

@@ -0,0 +1,20 @@
+import Snabbdom from 'snabbdom-pragma'
+import layout from './layout'
+import { channels } from './ln-channels'
+import { nodes } from './ln-nodes' 
+
+const isTouch = process.browser && ('ontouchstart' in window)
+
+const homeLayout = (body, { t, activeTab, ...S }) => layout(
+  <div>
+     { body }
+   </div>
+ , { t, isTouch, activeTab, ...S })
+
+export const lnExplorer = ({ mempoolRecent, t, ...S }) => homeLayout(
+    <div className="container dash-container">
+      {channels(mempoolRecent, true, { t, ...S })}
+      {nodes(mempoolRecent, true, { t, ...S })}
+    </div>
+  , {...S, t, activeTab: 'lnExplorer' })
+

client/src/views/ln-nodes-list.js

@@ -0,0 +1,18 @@
+import Snabbdom from 'snabbdom-pragma'
+import layout from './layout'
+import { nodes } from './ln-nodes' 
+
+const isTouch = process.browser && ('ontouchstart' in window)
+
+const homeLayout = (body, { t, activeTab, ...S }) => layout(
+  <div>
+     { body }
+   </div>
+ , { t, isTouch, activeTab, ...S })
+
+export const lnNodes = ({ mempoolRecent, t, ...S }) => homeLayout(
+    <div className="container dash-container">
+      {nodes(mempoolRecent, false, { t, ...S })}
+    </div>
+  , {...S, t, activeTab: 'lnNodes' })
+