<div *ngIf="errorMessage?.trim() === '';  else errorBlock" class="mt-1" fxLayout="column" fxFlex="100"fxLayoutAlign="space-between stretch">
  <div>
    <h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4>
    <div class="overflow-wrap dashboard-info-value">{{balances.lightning | number:'1.0-0'}} Sats</div>
    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.lightning/balances.total*100}}" />
  </div>
  <div>
    <h4 fxLayoutAlign="start" class="dashboard-info-title">On-chain</h4>
    <div class="overflow-wrap dashboard-info-value">{{balances.onchain | number:'1.0-0'}} Sats</div>
    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.onchain/balances.total*100}}" />
  </div>
  <div>
    <h4 fxLayoutAlign="start" class="dashboard-info-title">Total</h4>
    <div class="overflow-wrap dashboard-info-value">{{balances.total | number:'1.0-0'}} Sats</div>
  </div>
</div>
<ng-template #errorBlock>
  <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between" class="p-2">
    <p>{{errorMessage}}</p>
  </div>
</ng-template>
