Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactoring and fixes #262

Merged
merged 5 commits into from
Nov 7, 2023
Merged

Refactoring and fixes #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9051e19
refresh on validator page shows add validator info for short time
manuelsc Nov 6, 2023
3cbee94
refactored performance dashboard
manuelsc Nov 6, 2023
7f91aa9
remove unused import
manuelsc Nov 6, 2023
94d50bc
Merge branch 'main' of github.com:gobitfly/eth2-beaconchain-explorer-…
manuelsc Nov 6, 2023
6b86c66
fix exec formatting
manuelsc Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
257 changes: 44 additions & 213 deletions src/app/components/dashboard/dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,219 +222,50 @@
</ion-segment>
<ion-list class="performances">
<ion-item lines="none">
<div *ngIf="rewardTab == 'combined'" class="grid">
<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div class="grid">
<ion-label class="value left" [class]="data.combinedPerformance.performance1d | valuestyle : 0">
{{ data.combinedPerformance.performance1d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div class="grid">
<ion-label class="income-title">
<span
tooltip="Today's consensus and execution reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network. "
trigger="click"
hideDelayAfterClick="5000"
>Today</span
>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.combinedPerformance.performance7d | valuestyle : 0">
{{ data.combinedPerformance.performance7d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Last 7d </ion-label>
</div>
</div>

<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value left" [class]="data.combinedPerformance.performance31d | valuestyle : 0">
{{ data.combinedPerformance.performance31d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title"> Last 31d </ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.combinedPerformance.total | valuestyle : 0">
{{ data.combinedPerformance.total | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Total </ion-label>
</div>
</div>

<div class="grid-cell left">
<div>
<ion-label class="value left" [class]="data.combinedPerformance.apr | valuestyle : 0"> {{ data.combinedPerformance.apr }} % </ion-label>
</div>
<div>
<ion-label class="income-title">
<span
tooltip="Estimated yearly returns on both consensus layer (staking) and execution layer (transaction fees), based on the last 31 days"
placement="right"
trigger="click"
hideDelayAfterClick="5000"
>APR</span
>
</ion-label>
</div>
</div>
</div>
<div *ngIf="rewardTab == 'cons'" class="grid">
<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div class="grid">
<ion-label class="value left" [class]="data.consensusPerformance.performance1d | valuestyle : 0">
{{ data.consensusPerformance.performance1d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div class="grid">
<ion-label class="income-title">
<span
tooltip="Today's consensus reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network. "
trigger="click"
hideDelayAfterClick="5000"
>Today</span
>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.consensusPerformance.performance7d | valuestyle : 0">
{{ data.consensusPerformance.performance7d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Last 7d </ion-label>
</div>
</div>

<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value left" [class]="data.consensusPerformance.performance31d | valuestyle : 0">
{{ data.consensusPerformance.performance31d | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title"> Last 31d </ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.consensusPerformance.total | valuestyle : 0">
{{ data.consensusPerformance.total | mcurrency : 'GWEI' : unit.pref.Cons }}
</ion-label>
</div>
<div>
<ion-label class="income-title right">
<span
tooltip="Contains your consensus rewards, your execution rewards and any claimed or unclaimed smoothing pool rewards. "
trigger="click"
hideDelayAfterClick="5000"
>Total</span
>
</ion-label>
</div>
</div>

<div class="grid-cell left">
<div>
<ion-label class="value left" [class]="data.consensusPerformance.apr | valuestyle : 0"> {{ data.consensusPerformance.apr }} % </ion-label>
</div>
<div>
<ion-label class="income-title">
<span
tooltip="Estimated yearly returns on consensus layer (staking), based on the last 31 days"
placement="right"
trigger="click"
hideDelayAfterClick="5000"
>APR</span
>
</ion-label>
</div>
</div>
</div>
<div *ngIf="rewardTab == 'exec'" class="grid">
<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div class="grid">
<ion-label class="value left" [class]="data.executionPerformance.performance1d | valuestyle : 0">
{{ data.executionPerformance.performance1d | mcurrency : 'GWEI' : unit.pref.Exec }}
</ion-label>
</div>
<div class="grid">
<ion-label class="income-title">
<span
tooltip="Today's execution reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network. "
trigger="click"
hideDelayAfterClick="5000"
>Today</span
>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.executionPerformance.performance7d | valuestyle : 0">
{{ data.executionPerformance.performance7d | mcurrency : 'GWEI' : unit.pref.Exec }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Last 7d </ion-label>
</div>
</div>

<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value left" [class]="data.executionPerformance.performance31d | valuestyle : 0">
{{ data.executionPerformance.performance31d | mcurrency : 'GWEI' : unit.pref.Exec }}
</ion-label>
</div>
<div>
<ion-label class="income-title"> Last 31d </ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value" [class]="data.executionPerformance.total | valuestyle : 0">
{{ data.executionPerformance.total | mcurrency : 'GWEI' : unit.pref.Exec }}
</ion-label>
</div>
<div>
<ion-label class="income-title right"> Total </ion-label>
</div>
</div>

<div class="grid-cell left">
<div>
<ion-label class="value left" [class]="data.executionPerformance.apr | valuestyle : 0"> {{ data.executionPerformance.apr }} % </ion-label>
</div>
<div>
<ion-label class="income-title">
<span
tooltip="Estimated yearly returns on execution layer (transaction fees), based on the last 31 days"
placement="right"
trigger="click"
hideDelayAfterClick="5000"
>APR</span
>
</ion-label>
</div>
</div>
<div class="grid">
<app-performance-item
*ngIf="rewardTab === 'combined'"
[targetCurrency]="unit.pref.Cons"
[performanceData]="data.combinedPerformance"
[currency]="'GWEI'"
[unit]="unit"
[todayTooltip]="
'Today\'s consensus and execution reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network.'
"
[last7DaysTooltip]=""
[last31DaysTooltip]=""
[totalTooltip]="'Total (Contains your consensus rewards, your execution rewards and any claimed or unclaimed smoothing pool rewards.)'"
[aprTooltip]="
'APR (Estimated yearly returns on both consensus layer (staking) and execution layer (transaction fees))'
"></app-performance-item>

<app-performance-item
*ngIf="rewardTab === 'cons'"
[targetCurrency]="unit.pref.Cons"
[performanceData]="data.consensusPerformance"
[currency]="'GWEI'"
[unit]="unit"
[todayTooltip]="
'Today\'s consensus reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network.'
"
[last7DaysTooltip]=""
[last31DaysTooltip]=""
[totalTooltip]="'Total (Contains your consensus rewards)'"
[aprTooltip]="'APR (Estimated yearly returns on consensus layer (staking))'"></app-performance-item>

<app-performance-item
*ngIf="rewardTab === 'exec'"
[targetCurrency]="unit.pref.Exec"
[performanceData]="data.executionPerformance"
[currency]="'GWEI'"
[unit]="unit"
[todayTooltip]="
'Today\'s execution reward income. Note that this is counted in beaconchain days, a beaconchain day might start mid day depending on the network.'
"
[last7DaysTooltip]=""
[last31DaysTooltip]=""
[totalTooltip]="'Total (Contains execution rewards without any claimed or unclaimed smoothing pool rewards.)'"
[aprTooltip]="'APR (Estimated yearly returns on execution layer (transaction fees))'"></app-performance-item>
</div>
</ion-item>
</ion-list>
Expand Down
2 changes: 2 additions & 0 deletions src/app/components/dashboard/dashboard.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { ClientupdateComponentModule } from '../../components/clientupdate/clien
import { MessageComponentModule } from '../../components/message/message.module'
import { TooltipModule } from 'ng2-tooltip-directive-major-angular-updates'
import { AdComponentModule } from '../ad/ad.module'
import { PerformanceItemComponentModule } from '../dashboard/performance-item.module'

@NgModule({
imports: [
Expand All @@ -41,6 +42,7 @@ import { AdComponentModule } from '../ad/ad.module'
MessageComponentModule,
TooltipModule,
AdComponentModule,
PerformanceItemComponentModule,
],
declarations: [DashboardComponent],
exports: [DashboardComponent],
Expand Down
88 changes: 88 additions & 0 deletions src/app/components/dashboard/performance-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!--
Copyright (C) 2020 - 2023 Bitfly GmbH

This file is part of Beaconchain Dashboard.

Beaconchain Dashboard is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Beaconchain Dashboard is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Beaconchain Dashboard. If not, see <http://www.gnu.org/licenses/>.
-->

<div class="grid">
<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div class="grid">
<ion-label class="value left" [class]="performanceData.performance1d | valuestyle : 0">
{{ performanceData.performance1d | mcurrency : currency : targetCurrency }}
</ion-label>
</div>
<div class="grid">
<ion-label class="income-title">
<span *ngIf="!todayTooltip">Today</span>
<span *ngIf="todayTooltip" [tooltip]="todayTooltip" trigger="click" hideDelayAfterClick="5000">Today</span>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value right" [class]="performanceData.performance7d | valuestyle : 0">
{{ performanceData.performance7d | mcurrency : currency : targetCurrency }}
</ion-label>
</div>
<div>
<ion-label class="income-title right">
<span *ngIf="!last7DaysTooltip">Last 7d</span>
<span *ngIf="last7DaysTooltip" [tooltip]="last7DaysTooltip" trigger="click" hideDelayAfterClick="5000">Last 7d</span>
</ion-label>
</div>
</div>

<div class="grid-cell left" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value left" [class]="performanceData.performance31d | valuestyle : 0">
{{ performanceData.performance31d | mcurrency : currency : targetCurrency }}
</ion-label>
</div>
<div>
<ion-label class="income-title">
<span *ngIf="!last31DaysTooltip">Last 31d</span>
<span *ngIf="last31DaysTooltip" [tooltip]="last31DaysTooltip" trigger="click" hideDelayAfterClick="5000">Last 31d</span>
</ion-label>
</div>
</div>

<div class="grid-cell" (click)="unit.switchCurrencyPipe()">
<div>
<ion-label class="value right" [class]="performanceData.total | valuestyle : 0">
{{ performanceData.total | mcurrency : currency : targetCurrency }}
</ion-label>
</div>
<div>
<ion-label class="income-title right">
<span *ngIf="!totalTooltip">Total</span>
<span *ngIf="totalTooltip" [tooltip]="totalTooltip" trigger="click" hideDelayAfterClick="5000">Total</span>
</ion-label>
</div>
</div>

<div class="grid-cell left">
<div>
<ion-label class="value left" [class]="performanceData.apr31d | valuestyle : 0"> {{ performanceData.apr31d }} % </ion-label>
</div>
<div>
<ion-label class="income-title">
<span *ngIf="!aprTooltip">APR 31d</span>
<span *ngIf="aprTooltip" [tooltip]="aprTooltip" trigger="click" hideDelayAfterClick="5000">APR 31d</span>
</ion-label>
</div>
</div>
</div>
Loading