Merge branch 'master' into nymkappa/search-autofocus

frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.html

@@ -1,19 +1,43 @@
 <div class="box">
-  <table class="table table-borderless table-striped">
+  <div class="starting-balance" *ngIf="showStartingBalance">
-    <tbody>
+    <h5 i18n="lightning.starting-balance|Channel starting balance">Starting balance</h5>
-      <tr></tr>
+    <div class="nodes">
-      <tr>
+      <h5 class="alias">{{ left.alias }}</h5>
-        <td i18n="lightning.starting-balance|Channel starting balance">Starting balance</td>
+      <h5 class="alias">{{ right.alias }}</h5>
-        <td *ngIf="showStartingBalance && minStartingBalance === maxStartingBalance"><app-sats [satoshis]="minStartingBalance"></app-sats></td>
+    </div>
-        <td *ngIf="showStartingBalance && minStartingBalance !== maxStartingBalance">{{ minStartingBalance | number : '1.0-0' }} - {{ maxStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></td>
+    <div class="balances">
-        <td *ngIf="!showStartingBalance">?</td>
+      <div class="balance left">
-      </tr>
+        <span class="value" *ngIf="minStartingBalance !== maxStartingBalance">{{ minStartingBalance | number : '1.0-0' }} - {{ maxStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
-      <tr *ngIf="channel.status === 2">
+        <span class="value" *ngIf="minStartingBalance === maxStartingBalance">{{ minStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
-        <td i18n="lightning.closing-balance|Channel closing balance">Closing balance</td>
+      </div>
-        <td *ngIf="showClosingBalance && minClosingBalance === maxClosingBalance"><app-sats [satoshis]="minClosingBalance"></app-sats></td>
+      <div class="balance right">
-        <td *ngIf="showClosingBalance && minClosingBalance !== maxClosingBalance">{{ minClosingBalance | number : '1.0-0' }} - {{ maxClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></td>
+        <span class="value" *ngIf="minStartingBalance !== maxStartingBalance">{{ channel.capacity - maxStartingBalance | number : '1.0-0' }} - {{ channel.capacity - minStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
-        <td *ngIf="!showClosingBalance">?</td>
+        <span class="value" *ngIf="minStartingBalance === maxStartingBalance">{{ channel.capacity - maxStartingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
-      </tr>
+      </div>
-    </tbody>
+    </div>
-  </table>
+    <div class="balance-bar">
+      <div class="bar left" [class.hide-value]="hideStartingLeft" [style]="startingBalanceStyle.left"></div>
+      <div class="bar center" [style]="startingBalanceStyle.center"></div>
+      <div class="bar right"  [class.hide-value]="hideStartingRight" [style]="startingBalanceStyle.right"></div>
+    </div>
+  </div>
+  <br>
+  <div class="closing-balance" *ngIf="showClosingBalance">
+    <h5 i18n="lightning.closing-balance|Channel closing balance">Closing balance</h5>
+    <div class="balances">
+      <div class="balance left">
+        <span class="value" *ngIf="minClosingBalance !== maxClosingBalance">{{ minClosingBalance | number : '1.0-0' }} - {{ maxClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
+        <span class="value" *ngIf="minClosingBalance === maxClosingBalance">{{ minClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
+      </div>
+      <div class="balance right">
+        <span class="value" *ngIf="minClosingBalance !== maxClosingBalance">{{ channel.capacity - maxClosingBalance | number : '1.0-0' }} - {{ channel.capacity - minClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
+        <span class="value" *ngIf="minClosingBalance === maxClosingBalance">{{ channel.capacity - maxClosingBalance | number : '1.0-0' }}<app-sats [valueOverride]=" "></app-sats></span>
+      </div>
+    </div>
+    <div class="balance-bar">
+      <div class="bar left" [class.hide-value]="hideClosingLeft" [style]="closingBalanceStyle.left"></div>
+      <div class="bar center" [style]="closingBalanceStyle.center"></div>
+      <div class="bar right" [class.hide-value]="hideClosingRight" [style]="closingBalanceStyle.right"></div>
+    </div>
+  </div>
 </div>

frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss

@@ -6,4 +6,98 @@
   .box {
     margin-bottom: 20px;
   }
+}
+
+.starting-balance, .closing-balance {
+  width: 100%;
+
+  h5 {
+    text-align: center;
+  }
+}
+
+.nodes {
+  display: none;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    display: flex;
+	}
+}
+
+.balances {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 8px;
+
+  .balance {
+    &.left {
+      text-align: start;
+    }
+    &.right {
+      text-align: end;
+    }
+  }
+}
+
+.balance-bar {
+  width: 100%;
+  height: 2em;
+  position: relative;
+
+  .bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    &.left {
+      background: #105fb0;
+    }
+    &.center {
+      background: repeating-linear-gradient(
+        60deg,
+        #105fb0 0,
+        #105fb0 12px,
+        #1a9436 12px,
+        #1a9436 24px
+      );
+    }
+    &.right {
+      background: #1a9436;
+    }
+
+    .value {
+      flex: 0;
+      white-space: nowrap;
+    }
+
+    &.hide-value {
+      .value {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    height: 1em;
+
+    .bar.center {
+      background: repeating-linear-gradient(
+        60deg,
+        #105fb0 0,
+        #105fb0 8px,
+        #1a9436 8px,
+        #1a9436 16px
+      )
+    }
+	}
 }

frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.ts

@@ -8,8 +8,8 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f
 })
 export class ChannelCloseBoxComponent implements OnChanges {
   @Input() channel: any;
-  @Input() local: any;
+  @Input() left: any;
-  @Input() remote: any;
+  @Input() right: any;
 
   showStartingBalance: boolean = false;
   showClosingBalance: boolean = false;
@@ -18,29 +18,55 @@ export class ChannelCloseBoxComponent implements OnChanges {
   minClosingBalance: number;
   maxClosingBalance: number;
 
+  startingBalanceStyle: {
+    left: string,
+    center: string,
+    right: string,
+  } = {
+    left: '',
+    center: '',
+    right: '',
+  };
+
+  closingBalanceStyle: {
+    left: string,
+    center: string,
+    right: string,
+  } = {
+    left: '',
+    center: '',
+    right: '',
+  };
+
+  hideStartingLeft: boolean = false;
+  hideStartingRight: boolean = false;
+  hideClosingLeft: boolean = false;
+  hideClosingRight: boolean = false;
+
   constructor() { }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (this.channel && this.local && this.remote) {
+    let closingCapacity;
-      this.showStartingBalance = (this.local.funding_balance || this.remote.funding_balance) && this.channel.funding_ratio;
+    if (this.channel && this.left && this.right) {
-      this.showClosingBalance = this.local.closing_balance || this.remote.closing_balance;
+      this.showStartingBalance = (this.left.funding_balance || this.right.funding_balance) && this.channel.funding_ratio;
+      this.showClosingBalance = this.left.closing_balance || this.right.closing_balance;
 
       if (this.channel.single_funded) {
-        if (this.local.funding_balance) {
+        if (this.left.funding_balance) {
           this.minStartingBalance = this.channel.capacity;
           this.maxStartingBalance = this.channel.capacity;
-        } else if (this.remote.funding_balance) {
+        } else if (this.right.funding_balance) {
           this.minStartingBalance = 0;
           this.maxStartingBalance = 0;
         }
       } else {
-        this.minStartingBalance = clampRound(0, this.channel.capacity, this.local.funding_balance * this.channel.funding_ratio);
+        this.minStartingBalance = clampRound(0, this.channel.capacity, this.left.funding_balance * this.channel.funding_ratio);
-        this.maxStartingBalance = clampRound(0, this.channel.capacity, this.channel.capacity - (this.remote.funding_balance * this.channel.funding_ratio));
+        this.maxStartingBalance = clampRound(0, this.channel.capacity, this.channel.capacity - (this.right.funding_balance * this.channel.funding_ratio));
       }
 
-      const closingCapacity = this.channel.capacity - this.channel.closing_fee;
+      closingCapacity = this.channel.capacity - this.channel.closing_fee;
-      this.minClosingBalance = clampRound(0, closingCapacity, this.local.closing_balance);
+      this.minClosingBalance = clampRound(0, closingCapacity, this.left.closing_balance);
-      this.maxClosingBalance = clampRound(0, closingCapacity, closingCapacity - this.remote.closing_balance);
+      this.maxClosingBalance = clampRound(0, closingCapacity, closingCapacity - this.right.closing_balance);
 
       // margin of error to account for 2 x 330 sat anchor outputs
       if (Math.abs(this.minClosingBalance - this.maxClosingBalance) <= 660) {
@@ -50,6 +76,26 @@ export class ChannelCloseBoxComponent implements OnChanges {
       this.showStartingBalance = false;
       this.showClosingBalance = false;
     }
+
+    const startingMinPc = (this.minStartingBalance / this.channel.capacity) * 100;
+    const startingMaxPc = (this.maxStartingBalance / this.channel.capacity) * 100;
+    this.startingBalanceStyle = {
+      left: `left: 0%; right: ${100 - startingMinPc}%;`,
+      center: `left: ${startingMinPc}%; right: ${100 -startingMaxPc}%;`,
+      right: `left: ${startingMaxPc}%; right: 0%;`,
+    };
+    this.hideStartingLeft = startingMinPc < 15;
+    this.hideStartingRight = startingMaxPc > 85;
+
+    const closingMinPc = (this.minClosingBalance / closingCapacity) * 100;
+    const closingMaxPc = (this.maxClosingBalance / closingCapacity) * 100;
+    this.closingBalanceStyle = {
+      left: `left: 0%; right: ${100 - closingMinPc}%;`,
+      center: `left: ${closingMinPc}%; right: ${100 - closingMaxPc}%;`,
+      right: `left: ${closingMaxPc}%; right: 0%;`,
+    };
+    this.hideClosingLeft = closingMinPc < 15;
+    this.hideClosingRight = closingMaxPc > 85;
   }
 }
 

frontend/src/app/lightning/channel/channel.component.html

@@ -75,14 +75,14 @@
   <div class="row row-cols-1 row-cols-md-2" *ngIf="!error">
     <div class="col">
       <app-channel-box [channel]="channel.node_left"></app-channel-box>
-      <app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_left" [remote]="channel.node_right"></app-channel-close-box>
     </div>
     <div class="col">
       <app-channel-box [channel]="channel.node_right"></app-channel-box>
-      <app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_right" [remote]="channel.node_left"></app-channel-close-box>
     </div>
   </div>
 
+  <app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [left]="channel.node_left" [right]="channel.node_right"></app-channel-close-box>
+
   <br>
 
   <ng-container *ngIf="transactions$ | async as transactions">