esplora/client/src/views/ln-channels.js at 8c03f74dabba343cd84f77855e7b737f39ba6c37 · Blockstream/esplora · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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>