RTL/src/app/clightning/on-chain/on-chain.component.html

<div fxLayout="column" fxLayoutAlign="center center" class="test-banner mx-1">
  <h5>Don't be #reckless. #craefulgang #craefulgang #craefulgang.</h5>
</div>
<div fxLayout="column" fxLayout.gt-sm="row wrap">
  <div fxFlex="34" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoadingWallet==='error','custom-card': true}">
      <mat-card-header class="bg-primary p-1" fxLayoutAlign="center center">
        <mat-card-title class="m-0 pt-1">
          <h5>Total Balance</h5>
          <mat-progress-bar *ngIf="flgLoadingWallet===true" mode="indeterminate"></mat-progress-bar>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content fxLayout="column" fxLayoutAlign="center center">
        <mat-card-content class="mt-1">
          <svg style="width:70px;height:70px" viewBox="0 0 24 24">
            <path fill="currentColor"
              d="M10,2H14A2,2 0 0,1 16,4V6H20A2,2 0 0,1 22,8V19A2,2 0 0,1 20,21H4C2.89,21 2,20.1 2,19V8C2,6.89 2.89,6 4,6H8V4C8,2.89 8.89,2 10,2M14,6V4H10V6H14Z" />
          </svg>
        </mat-card-content>
        <span *ngIf="information?.currency_unit; else withoutData">
          <h3 *ngIf="selNode?.satsToBTC; else smallerUnit1">{{balance?.btc_totalBalance | number}}
            {{information?.currency_unit}}</h3>
          <ng-template #smallerUnit1>
            <h3>{{balance?.totalBalance | number}} {{information?.smaller_currency_unit}}</h3>
          </ng-template>
        </span>
      </mat-card-content>
      <mat-progress-bar class="mt-minus-5" *ngIf="flgLoadingWallet===true" mode="indeterminate"></mat-progress-bar>
      <mat-divider></mat-divider>
    </mat-card>
  </div>
  <div fxFlex="33" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoadingWallet==='error','custom-card': true}">
      <mat-card-header class="bg-primary p-1" fxLayoutAlign="center center">
        <mat-card-title class="m-0 pt-1">
          <h5>Confirmed Balance</h5>
          <mat-progress-bar *ngIf="flgLoadingWallet===true" mode="indeterminate"></mat-progress-bar>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content fxLayout="column" fxLayoutAlign="center center">
        <mat-card-content class="mt-1">
          <svg style="width:70px;height:70px" viewBox="0 0 24 24">
            <path fill="currentColor"
              d="M10,2H14A2,2 0 0,1 16,4V6H20A2,2 0 0,1 22,8V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V8A2,2 0 0,1 4,6H8V4A2,2 0 0,1 10,2M14,6V4H10V6H14M10.5,17.5L17.09,10.91L15.68,9.5L10.5,14.67L8.41,12.59L7,14L10.5,17.5Z" />
          </svg>
        </mat-card-content>
        <span *ngIf="information?.currency_unit; else withoutData">
          <h3 *ngIf="selNode?.satsToBTC; else smallerUnit2">{{balance?.btc_confBalance | number}}
            {{information?.currency_unit}}</h3>
          <ng-template #smallerUnit2>
            <h3>{{balance?.confBalance | number}} {{information?.smaller_currency_unit}}</h3>
          </ng-template>
        </span>
      </mat-card-content>
      <mat-progress-bar class="mt-minus-5" *ngIf="flgLoadingWallet===true" mode="indeterminate"></mat-progress-bar>
      <mat-divider></mat-divider>
    </mat-card>
  </div>
  <div fxFlex="33" class="padding-gap">
    <mat-card [ngClass]="{'custom-card error-border': flgLoadingWallet==='error','custom-card': true}">
      <mat-card-header class="bg-primary p-1" fxLayoutAlign="center center">
        <mat-card-title class="m-0 pt-1">
          <h5>Unconfirmed Balance</h5>
          <mat-progress-bar *ngIf="flgLoadingWallet===true" mode="indeterminate"></mat-progress-bar>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content fxLayout="column" fxLayoutAlign="center center">
        <mat-card-content class="mt-1">
          <svg style="width:70px;height:70px" viewBox="0 0 24 24">
            <path fill="currentColor"
              d="M14,2A2,2 0 0,1 16,4V6H20A2,2 0 0,1 22,8L10.85,19C10.85,20.1 10.85,19.5 10.85,21H4C2.89,21 2,20.1 2,19V8C2,6.89 2.89,6 4,6H8V4C8,2.89 8.89,2 10,2H14M14,6V4H10V6H14M21.04,12.13C20.9,12.13 20.76,12.19 20.65,12.3L19.65,13.3L21.7,15.35L22.7,14.35C22.92,14.14 22.92,13.79 22.7,13.58L21.42,12.3C21.31,12.19 21.18,12.13 21.04,12.13M19.07,13.88L13,19.94V22H15.06L21.12,15.93L19.07,13.88Z" />
          </svg>
        </mat-card-content>
        <span *ngIf="information?.currency_unit; else withoutData">
          <h3 *ngIf="selNode?.satsToBTC; else smallerUnit3">{{balance?.btc_unconfBalance | number}}
            {{information?.currency_unit}}</h3>
          <ng-template #smallerUnit3>
            <h3>{{balance?.unconfBalance | number}} {{information?.smaller_currency_unit}}</h3>
          </ng-template>
        </span>
      </mat-card-content>
      <mat-progress-bar class="mt-minus-5" *ngIf="flgLoadingWallet===true" mode="indeterminate"></mat-progress-bar>
      <mat-divider></mat-divider>
    </mat-card>
  </div>
  <div fxFlex="100" class="padding-gap">
    <mat-card>
      <mat-card-header>
        <mat-card-subtitle>
          <h2>Receive Funds</h2>
        </mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div fxLayout="column" fxFlex="100" fxLayout.lt-md="top-minus-25px">
          <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap">
            <div fxFlex="15" fxLayoutAlign="start end">
              <mat-form-field fxFlex="99">
                <mat-select [(ngModel)]="selectedAddress" placeholder="Address Type" name="address_type" tabindex="1">
                  <mat-option *ngFor="let addressType of addressTypes" [value]="addressType">
                    {{addressType.addressTp}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div fxFlex="25" fxLayoutAlign="space-between end">
              <div fxFlex.gt-md="65" fxFlex.lt-lg="49" fxLayoutAlign="start end">
                <button fxLayoutAlign="center center" mat-raised-button color="primary"
                  [disabled]="undefined === selectedAddress.addressId" (click)="onGenerateAddress()" tabindex="2"
                  class="top-minus-15px">Generate Address</button>
              </div>
              <div fxFlex.gt-md="30" fxFlex.lt-lg="49" fxLayoutAlign="start end">
                <button fxLayoutAlign="center center" mat-stroked-button color="accent" tabindex="3"
                  (click)="resetReceiveData()" class="top-minus-15px">Clear</button>
              </div>
            </div>
            <div fxFlex="42" fxLayoutAlign="start end">
              <mat-form-field fxFlex="100">
                <input matInput [value]="newAddress" placeholder="Generated Address" readonly>
              </mat-form-field>
            </div>
            <div fxFlex.lt-lg="40" fxFlex.gt-md="14" fxLayoutAlign="center center">
              <qrcode [qrdata]="newAddress" [size]="120" [level]="'L'" [allowEmptyString]="true"
                [ngStyle]="{'visibility': (newAddress === '') ? 'hidden' : 'visible'}" class="top-minus-5px qr-border">
              </qrcode>
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="100" class="padding-gap">
    <mat-card>
      <mat-card-header>
        <mat-card-subtitle>
          <h2>Send Funds</h2>
        </mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="space-between start"
          (ngSubmit)="sendFundForm.form.valid && onSendFunds()" #sendFundForm="ngForm">
          <mat-form-field fxFlex="35" fxLayoutAlign="start end">
            <input matInput [(ngModel)]="transaction.address" placeholder="Address" name="address" tabindex="4" required
              name="address" #address="ngModel">
          </mat-form-field>
          <mat-form-field fxFlex="10" fxLayoutAlign="start end">
            <input matInput [(ngModel)]="transaction.satoshis" placeholder="Amount (mSats)" type="number" step="1000" min="1"
              tabindex="5" required name="amount" #amount="ngModel">
          </mat-form-field>
          <mat-form-field fxFlex="10" fxLayoutAlign="start end">
            <mat-select tabindex="6" placeholder="Fee Rate" [(value)]="transaction.feeRate">
              <mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
                {{feeRateType.feeRateType}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-checkbox fxFlex="20" fxFlex.lt-lg="35" tabindex="7" [(ngModel)]="flgMinConf" name="flgMinConf">
            <mat-form-field fxFlex="100">
              <input matInput [(ngModel)]="transaction.minconf" placeholder="Min Confirmation Blocks" type="number"
                name="blocks" step="1" min="0" tabindex="8" #blocks="ngModel" [required]="flgMinConf"
                [disabled]="!flgMinConf">
            </mat-form-field>
          </mat-checkbox>
          <div fxFlex="10" fxLayoutAlign="end start">
              <button fxFlex="90" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="invalidValues" type="submit" tabindex="8">
                <p *ngIf="invalidValues && (address.touched || address.dirty) && (amount.touched || amount.dirty); else sendText">Invalid Values</p>
                <ng-template #sendText><p>Send</p></ng-template>
              </button>
            </div>
            <div fxFlex="10" fxLayoutAlign="end start">
              <button fxFlex="90" fxLayoutAlign="center center" mat-stroked-button color="accent" tabindex="9" type="reset"
                (click)="resetData()">Clear</button>
            </div>
          </form>

        



      </mat-card-content>
    </mat-card>
  </div>
</div>
<ng-template #withoutData>
  <h3>Sats</h3>
</ng-template>