You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
14 KiB
HTML
238 lines
14 KiB
HTML
<div fxLayout="column" fxLayout.gt-sm="row wrap">
|
|
<div fxFlex="25" class="padding-gap">
|
|
<mat-card [ngClass]="{'custom-card error-border': flgLoading[2]==='error','custom-card': true}">
|
|
<mat-card-header class="bg-primary" fxLayoutAlign="center end">
|
|
<mat-card-title class="m-0 pt-2">
|
|
<h5>Wallet Balance</h5>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
|
|
<mat-card-content class="mt-1">
|
|
<mat-icon class="icon-large">account_balance_wallet</mat-icon>
|
|
</mat-card-content>
|
|
<span *ngIf="information?.currency_unit; else withoutData">
|
|
<h3 *ngIf="settings?.satsToBTC; else smallerUnit1">{{BTCtotalBalance | number}} {{information?.currency_unit}}</h3>
|
|
<ng-template #smallerUnit1><h3>{{totalBalance | number}} {{information?.smaller_currency_unit}}</h3></ng-template>
|
|
</span>
|
|
</mat-card-content>
|
|
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[2]===true" mode="indeterminate"></mat-progress-bar>
|
|
<mat-divider></mat-divider>
|
|
</mat-card>
|
|
</div>
|
|
<div fxFlex="25" class="padding-gap">
|
|
<mat-card [ngClass]="{'custom-card error-border': flgLoading[0]==='error','custom-card': true}">
|
|
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
|
|
<mat-card-title class="m-0 pt-2">
|
|
<h5>Peers</h5>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
|
|
<mat-card-content class="mt-1">
|
|
<mat-icon class="icon-large">group</mat-icon>
|
|
</mat-card-content>
|
|
<h3 *ngIf="information.num_peers; else zeroPeers">{{totalPeers | number}}</h3>
|
|
<ng-template #zeroPeers>
|
|
<h3>0</h3>
|
|
</ng-template>
|
|
</mat-card-content>
|
|
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
|
<mat-divider></mat-divider>
|
|
</mat-card>
|
|
</div>
|
|
<div fxFlex="25" class="padding-gap">
|
|
<mat-card [ngClass]="{'custom-card error-border': flgLoading[3]==='error','custom-card': true}">
|
|
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
|
|
<mat-card-title class="m-0 pt-2">
|
|
<h5>Channel Balance</h5>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
|
|
<mat-card-content class="mt-1">
|
|
<mat-icon class="icon-large">linear_scale</mat-icon>
|
|
</mat-card-content>
|
|
<span *ngIf="information?.currency_unit; else withoutData">
|
|
<h3 *ngIf="settings?.satsToBTC; else smallerUnit2">{{BTCchannelBalance | number}} {{information?.currency_unit}}</h3>
|
|
<ng-template #smallerUnit2><h3>{{channelBalance | number}} {{information?.smaller_currency_unit}}</h3></ng-template>
|
|
</span>
|
|
</mat-card-content>
|
|
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[3]===true || flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
|
<mat-divider></mat-divider>
|
|
</mat-card>
|
|
</div>
|
|
<div fxFlex="25" class="padding-gap">
|
|
<mat-card [ngClass]="{'custom-card error-border': flgLoading[0]==='error','custom-card': true}">
|
|
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
|
|
<mat-card-title class="m-0 pt-2">
|
|
<h5>Chain Sync Status</h5>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
|
|
<mat-card-content class="mt-1">
|
|
<mat-icon class="icon-large">sync</mat-icon>
|
|
</mat-card-content>
|
|
<mat-icon *ngIf="information?.synced_to_chain; else notSynced" class="size-30 green sync-to-chain">check_circle</mat-icon>
|
|
<ng-template #notSynced>
|
|
<mat-icon class="size-30 red">cancel</mat-icon>
|
|
</ng-template>
|
|
</mat-card-content>
|
|
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
|
<mat-divider></mat-divider>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
<div fxLayout="column" fxLayout.gt-sm="row wrap">
|
|
<div fxFlex="25" class="padding-gap">
|
|
<div fxLayout="column">
|
|
<mat-card fxFlex="100" [ngClass]="{'custom-card error-border': flgLoading[1]==='error','custom-card': true}">
|
|
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
|
|
<mat-card-title class="m-0 pt-2">
|
|
<h5>Fee Report</h5>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div fxLayout="column" class="pl-4">
|
|
<mat-list fxFlex="100" fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Daily ({{information?.smaller_currency_unit}})</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{fees?.day_fee_sum}}</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxFlex="100" fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Weekly ({{information?.smaller_currency_unit}})</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{fees?.week_fee_sum}}</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxFlex="100" fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Monthly ({{information?.smaller_currency_unit}})</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{fees?.month_fee_sum}}</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
</div>
|
|
<mat-progress-bar *ngIf="flgLoading[1]===true" mode="indeterminate"></mat-progress-bar>
|
|
<mat-divider></mat-divider>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
<mat-card fxFlex="100" [ngClass]="{'mt-2 custom-card error-border': flgLoading[5]==='error','mt-2 custom-card': true}">
|
|
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
|
|
<mat-card-title class="m-0 pt-2">
|
|
<h5>Channel Status</h5>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div fxLayout="column" class="pl-4">
|
|
<mat-list fxFlex="100" fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Active</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start"><p class="mat-button-text pt-2">{{activeChannels}}</p></mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxFlex="100" fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Inactive</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start"><p class="mat-button-text pt-2">{{inactiveChannels}}</p></mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxFlex="100" fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Pending</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start"><p class="mat-button-text pt-2">{{pendingChannels}}</p></mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
</div>
|
|
<mat-progress-bar *ngIf="flgLoading[6]===true" mode="indeterminate" class="mt-minus-5"></mat-progress-bar>
|
|
<mat-divider></mat-divider>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
<div fxFlex="40" class="padding-gap">
|
|
<mat-card [ngClass]="{'custom-card error-border': flgLoading[5]==='error','custom-card': true}">
|
|
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
|
|
<mat-card-title class="m-0 pt-2">
|
|
<h5>Local-Remote Channel Capacity</h5>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div fxLayout="row" class="card-chnl-balances">
|
|
<div fxFlex="100" fxLayoutAlign="center center" *ngIf="flgTotalCalculated">
|
|
<ngx-charts-bar-vertical
|
|
[view]="view"
|
|
[scheme]="colorScheme"
|
|
[results]="totalBalances"
|
|
[yAxisLabel]="yAxisLabel"
|
|
[yScaleMax]="maxBalanceValue"
|
|
xAxis="false"
|
|
yAxis="true"
|
|
showYAxis="true"
|
|
showDataLabel="true"
|
|
tooltipDisabled="true">
|
|
</ngx-charts-bar-vertical>
|
|
</div>
|
|
</div>
|
|
<mat-progress-bar *ngIf="flgLoading[5]===true" mode="indeterminate" class="mt-minus-5"></mat-progress-bar>
|
|
<mat-divider></mat-divider>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
<div fxFlex="35" class="padding-gap">
|
|
<mat-card [ngClass]="{'custom-card error-border': flgLoading[5]==='error','custom-card': true}">
|
|
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
|
|
<mat-card-title class="m-0 pt-2">
|
|
<h5>Network Information</h5>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div fxLayout="column" class="pl-4 network-info-list">
|
|
<mat-list fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start" *ngIf="settings?.satsToBTC; else smallerUnit6">Network Capacity ({{information?.currency_unit}})</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start" *ngIf="settings?.satsToBTC; else smallerData6">{{networkInfo?.btc_total_network_capacity | number}}</mat-list-item>
|
|
<ng-template #smallerUnit6><mat-list-item fxFlex="65" fxLayoutAlign="start start">Network Capacity ({{information?.smaller_currency_unit}})</mat-list-item></ng-template>
|
|
<ng-template #smallerData6><mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.total_network_capacity | number}}</mat-list-item></ng-template>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Number of Nodes</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.num_nodes | number}}</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Number of Channels</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.num_channels | number}}</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Max Out Degree</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.max_out_degree | number}}</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Avg Out Degree</mat-list-item>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.avg_out_degree | number:'1.0-2'}}</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start" *ngIf="settings?.satsToBTC; else smallerUnit7">Max Channel Size ({{information?.currency_unit}})</mat-list-item>
|
|
<ng-template #smallerUnit7><mat-list-item fxFlex="65" fxLayoutAlign="start start">Max Channel Size ({{information?.smaller_currency_unit}})</mat-list-item></ng-template>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start" *ngIf="settings?.satsToBTC; else smallerData7">{{networkInfo?.btc_max_channel_size | number}}</mat-list-item>
|
|
<ng-template #smallerData7><mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.max_channel_size | number}}</mat-list-item></ng-template>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start" *ngIf="settings?.satsToBTC; else smallerUnit8">Avg Channel Size ({{information?.currency_unit}})</mat-list-item>
|
|
<ng-template #smallerUnit8><mat-list-item fxFlex="65" fxLayoutAlign="start start">Avg Channel Size ({{information?.smaller_currency_unit}})</mat-list-item></ng-template>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start" *ngIf="settings?.satsToBTC; else smallerData8">{{networkInfo?.btc_avg_channel_size | number}}</mat-list-item>
|
|
<ng-template #smallerData8><mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.avg_channel_size | number:'1.0-2'}}</mat-list-item></ng-template>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
<mat-list fxLayoutAlign="start start">
|
|
<mat-list-item fxFlex="65" fxLayoutAlign="start start" *ngIf="settings?.satsToBTC; else smallerUnit9">Min Channel Size ({{information?.currency_unit}})</mat-list-item>
|
|
<ng-template #smallerUnit9><mat-list-item fxFlex="65" fxLayoutAlign="start start">Min Channel Size ({{information?.smaller_currency_unit}})</mat-list-item></ng-template>
|
|
<mat-list-item fxFlex="25" fxLayoutAlign="end start" *ngIf="settings?.satsToBTC; else smallerData9">{{networkInfo?.btc_min_channel_size | number}}</mat-list-item>
|
|
<ng-template #smallerData9><mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.min_channel_size | number}}</mat-list-item></ng-template>
|
|
<mat-divider></mat-divider>
|
|
</mat-list>
|
|
</div>
|
|
<mat-progress-bar *ngIf="flgLoading[4]===true" mode="indeterminate"></mat-progress-bar>
|
|
<mat-divider></mat-divider>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
<ng-template #withoutData><h3>Sats</h3></ng-template>
|