Fee box fixes.
This commit is contained in:
		
							parent
							
								
									bc92fb669b
								
							
						
					
					
						commit
						67dbea3faf
					
				@ -1,18 +1,15 @@
 | 
				
			|||||||
<div class="text-center" class="blockchain-wrapper">
 | 
					<div class="text-center" class="blockchain-wrapper">
 | 
				
			||||||
  <div class="position-container">
 | 
					  <div class="position-container" [hidden]="isLoading">
 | 
				
			||||||
 | 
					    <span>
 | 
				
			||||||
    <span [hidden]="isLoading">
 | 
					 | 
				
			||||||
      <app-mempool-blocks></app-mempool-blocks>
 | 
					      <app-mempool-blocks></app-mempool-blocks>
 | 
				
			||||||
      <app-blockchain-blocks></app-blockchain-blocks>
 | 
					      <app-blockchain-blocks></app-blockchain-blocks>
 | 
				
			||||||
      <div id="divider"></div>
 | 
					      <div id="divider"></div>
 | 
				
			||||||
    </span>
 | 
					    </span>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
    <ng-template [ngIf]="isLoading">
 | 
					  <div *ngIf="isLoading" class="position-container loading">
 | 
				
			||||||
    <div class="loading-block">
 | 
					    <div class="loading-block">
 | 
				
			||||||
      <h3>Waiting for blocks...</h3>
 | 
					      <h3>Waiting for blocks...</h3>
 | 
				
			||||||
      <div class="spinner-border text-light mt-2"></div>
 | 
					      <div class="spinner-border text-light mt-2"></div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    </ng-template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
@ -28,7 +28,10 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
@media (max-width: 767.98px) {
 | 
					@media (max-width: 767.98px) {
 | 
				
			||||||
  .position-container {
 | 
					  .position-container {
 | 
				
			||||||
    left: 97%;
 | 
					    left: 95%;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .position-container.loading {
 | 
				
			||||||
 | 
					    left: 50%;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -4,7 +4,7 @@
 | 
				
			|||||||
    <td class="border-top-0">30 minutes</td>
 | 
					    <td class="border-top-0">30 minutes</td>
 | 
				
			||||||
    <td class="border-top-0">Next block</td>
 | 
					    <td class="border-top-0">Next block</td>
 | 
				
			||||||
  </tr>
 | 
					  </tr>
 | 
				
			||||||
  <tr *ngIf="(feeEstimations$ | async) as feeEstimations; else loadingFees">
 | 
					  <tr *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
 | 
				
			||||||
    <td class="d-none d-md-table-cell">{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td>
 | 
					    <td class="d-none d-md-table-cell">{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td>
 | 
				
			||||||
    <td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td>
 | 
					    <td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td>
 | 
				
			||||||
    <td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td>
 | 
					    <td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td>
 | 
				
			||||||
 | 
				
			|||||||
@ -17,12 +17,14 @@ interface FeeEstimations {
 | 
				
			|||||||
})
 | 
					})
 | 
				
			||||||
export class FeesBoxComponent implements OnInit {
 | 
					export class FeesBoxComponent implements OnInit {
 | 
				
			||||||
  feeEstimations$: Observable<FeeEstimations>;
 | 
					  feeEstimations$: Observable<FeeEstimations>;
 | 
				
			||||||
 | 
					  isLoadingWebSocket$: Observable<boolean>;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  constructor(
 | 
					  constructor(
 | 
				
			||||||
    private stateService: StateService,
 | 
					    private stateService: StateService,
 | 
				
			||||||
  ) { }
 | 
					  ) { }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  ngOnInit(): void {
 | 
					  ngOnInit(): void {
 | 
				
			||||||
 | 
					    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
 | 
				
			||||||
    this.feeEstimations$ = this.stateService.mempoolBlocks$
 | 
					    this.feeEstimations$ = this.stateService.mempoolBlocks$
 | 
				
			||||||
      .pipe(
 | 
					      .pipe(
 | 
				
			||||||
        filter((blocks) => !!blocks.length),
 | 
					        filter((blocks) => !!blocks.length),
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user