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

Jump to bottom

feat: replace mat-icon #574

Merged
merged 10 commits into from
Jul 26, 2023
Merged

feat: replace mat-icon #574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
557c595
feat: replace mat-icon
Senna46 Jul 25, 2023
7c01b9d
fix: explorer
Senna46 Jul 25, 2023
99e7ba8
fix: validator
Senna46 Jul 25, 2023
41d1c2b
fix: delete mat-type
Senna46 Jul 25, 2023
e48fb13
feat: explorer design
Senna46 Jul 25, 2023
4274ab2
fix: portal loading
Senna46 Jul 25, 2023
5e9cf55
fix: portal icon
Senna46 Jul 25, 2023
7553b92
fix: proposal list
Senna46 Jul 25, 2023
7ab7e8a
feat: material symbol
Senna46 Jul 26, 2023
85906e8
feat: fill
Senna46 Jul 26, 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
135 changes: 75 additions & 60 deletions projects/explorer/src/app/views/accounts/account/account.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,85 @@
<h2 class="mb-0">Account Info</h2>
<div class="card bg-base-100 shadow-xl mb-4">
<div class="card-body">
<div class="overflow-x-auto">
<table class="table w-full">
<tr>
<th>Address</th>
<td class="font-mono">
{{ address }}
<button mat-icon-button type="button" (click)="copyClipboard(address || '')">
<mat-icon>content_copy</mat-icon>
</button>
</td>
</tr>
<tr>
<th>Public Key</th>
<td class="font-mono">{{ publicKey }}</td>
</tr>
<tr>
<th>Account Number</th>
<td>{{ baseAccount?.account_number }}</td>
</tr>
<tr>
<th>Sequence</th>
<td>{{ baseAccount?.sequence }}</td>
</tr>
</table>
<div class="mx-auto max-w-screen-xl">
<div class="text-xl breadcrumbs">
<ul>
<li>Account Info</li>
</ul>
</div>
<div class="card bg-base-100 shadow-xl mb-4">
<div class="card-body">
<div class="overflow-x-auto">
<table class="table w-full">
<tr>
<th>Address</th>
<td class="font-mono">
<div class="flex items-center gap-2">
{{ address }}
<button
class="btn btn-circle btn-sm"
type="button"
(click)="copyClipboard(address || '')"
>
<span class="material-symbols-outlined">content_copy</span>
</button>
</div>
</td>
</tr>
<tr>
<th>Public Key</th>
<td class="font-mono">{{ publicKey }}</td>
</tr>
<tr>
<th>Account Number</th>
<td>{{ baseAccount?.account_number }}</td>
</tr>
<tr>
<th>Sequence</th>
<td>{{ baseAccount?.sequence }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>

<div class="card bg-base-100 shadow-xl mb-4">
<div class="card-body">
<h2 class="card-title">Balances</h2>
<div class="card bg-base-100 shadow-xl mb-4">
<div class="card-body">
<h2 class="card-title">Balances</h2>

<ng-container *ngIf="symbolBalancesMap === null; then loading; else loaded"></ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-dots loading-lg"></span>
</p>
</ng-template>
<ng-template #loaded>
<ng-container *ngIf="!symbolBalancesMap; then empty; else filled"></ng-container>
<ng-template #empty>
<p class="text-lg text-error">No Balance!</p>
<ng-container *ngIf="symbolBalancesMap === null; then loading; else loaded"></ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-ring loading-lg"></span>
</p>
</ng-template>
<ng-template #filled>
<div class="overflow-x-auto">
<table class="table w-full">
<tbody>
<tr *ngFor="let balance of symbolBalancesMap | keyvalue">
<th>
<div class="flex items-center space-x-3">
<div class="avatar mr-2" *ngIf="symbolImageMap && symbolImageMap[balance.key]">
<div class="mask mask-circle w-8 h-8">
<img src="{{ symbolImageMap[balance.key] }}" alt="Asset Symbol" />
<ng-template #loaded>
<ng-container *ngIf="!symbolBalancesMap; then empty; else filled"></ng-container>
<ng-template #empty>
<p class="text-lg text-error">No Balance!</p>
</ng-template>
<ng-template #filled>
<div class="overflow-x-auto">
<table class="table w-full">
<tbody>
<tr *ngFor="let balance of symbolBalancesMap | keyvalue">
<th>
<div class="flex items-center space-x-3">
<div
class="avatar mr-2"
*ngIf="symbolImageMap && symbolImageMap[balance.key]"
>
<div class="mask mask-circle w-8 h-8">
<img src="{{ symbolImageMap[balance.key] }}" alt="Asset Symbol" />
</div>
</div>
{{ balance.key }}
</div>
{{ balance.key }}
</div>
</th>
<td>{{ balance.value }}</td>
</tr>
</tbody>
</table>
</div>
</th>
<td>{{ balance.value }}</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
</ng-template>
</ng-template>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion projects/explorer/src/app/views/accounts/account/distribution/distribution.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ <h2 class="card-title">Validator Rewards</h2>
<ng-container *ngIf="commission === null; then loading; else loaded"></ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-dots loading-lg"></span>
<span class="loading loading-ring loading-lg"></span>
</p>
</ng-template>
<ng-template #loaded>
Expand Down
2 changes: 1 addition & 1 deletion projects/explorer/src/app/views/accounts/account/staking/staking.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ <h2 class="card-title">Delegator Rewards</h2>
<ng-container *ngIf="totalRewards === null; then loading; else loaded"></ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-dots loading-lg"></span>
<span class="loading loading-ring loading-lg"></span>
</p>
</ng-template>
<ng-template #loaded>
Expand Down
2 changes: 1 addition & 1 deletion projects/explorer/src/app/views/accounts/account/txs/txs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ <h2 class="card-title">Transactions</h2>
<ng-container *ngIf="txsWithPagination === null; then loading; else loaded"></ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-dots loading-lg"></span>
<span class="loading loading-ring loading-lg"></span>
</p>
</ng-template>
<ng-template #loaded>
Expand Down
12 changes: 6 additions & 6 deletions projects/explorer/src/app/views/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</div>
<app-node-tool></app-node-tool>
<button class="btn gap-1 btn-primary w-full md:w-auto md:px-8" (click)="onClickOpenPortal()">
<mat-icon class="md:ml-3">wallet</mat-icon>
<span class="material-symbols-outlined">wallet</span>
<span class="hidden md:inline">Open Portal</span>
</button>
</div>
Expand All @@ -47,39 +47,39 @@
<li>
<label for="drawer-main" class="flex gap-4" routerLink="/">
<span class="flex-none">
<mat-icon color="primary">other_houses</mat-icon>
<span class="material-symbols-outlined">other_houses</span>
</span>
<span class="flex-1">Home</span>
</label>
</li>
<li>
<label for="drawer-main" class="flex gap-4" routerLink="/blocks">
<span class="flex-none">
<mat-icon color="primary">account_tree</mat-icon>
<span class="material-symbols-outlined">account_tree</span>
</span>
<span class="flex-1">Blocks</span>
</label>
</li>
<li>
<label for="drawer-main" class="flex gap-4" routerLink="/txs">
<span class="flex-none">
<mat-icon color="primary">mail</mat-icon>
<span class="material-symbols-outlined">mail</span>
</span>
<span class="flex-1">Transactions</span>
</label>
</li>
<li>
<label for="drawer-main" class="flex gap-4" routerLink="/validators">
<span class="flex-none">
<mat-icon color="primary">savings</mat-icon>
<span class="material-symbols-outlined">savings</span>
</span>
<span class="flex-1">Validators</span>
</label>
</li>
<li>
<label for="drawer-main" class="flex gap-4" routerLink="/proposals">
<span class="flex-none">
<mat-icon color="primary">message</mat-icon>
<span class="material-symbols-outlined">message</span>
</span>
<span class="flex-1">Votes</span>
</label>
Expand Down
13 changes: 9 additions & 4 deletions projects/explorer/src/app/views/blocks/block/block.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<div class="flex flex-row items-center">
<h2 class="mb-0">Block #{{ block?.block?.header?.height }}</h2>
<div class="flex flex-row items-center gap-4">
<div class="text-xl breadcrumbs mb-4">
<ul>
<li routerLink=".."><a>Blocks</a></li>
<li>#{{ block?.block?.header?.height }}</li>
</ul>
</div>
<span class="flex-auto"></span>
<button class="btn btn-circle" routerLink="/blocks/{{ previousBlock }}" class="mr-4">
<mat-icon color="primary"> navigate_before </mat-icon>
<span class="material-symbols-outlined align-bottom">navigate_before</span>
</button>
<button routerLink="/blocks/{{ nextBlock }}">
<mat-icon color="primary"> navigate_next </mat-icon>
<span class="material-symbols-outlined align-bottom">navigate_next</span>
</button>
</div>
<h3 class="my-2">Block details</h3>
Expand Down
49 changes: 28 additions & 21 deletions projects/explorer/src/app/views/blocks/blocks.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,33 @@
</ul>
</div>
<span class="flex-auto"></span>
<div class="form-control">
<label class="label">
<span class="label-text">Items per page</span>
</label>
<label class="input-group">
<select class="select w-20 sm:w-64" [(ngModel)]="pageSize" (change)="onPaginationChange()">
<option disabled selected>Select items amount</option>
<ng-container *ngFor="let size of pageSizeOptions">
<option [value]="size">{{ size }}</option>
</ng-container>
</select>
<button class="btn" (click)="onPaginationChange(1)">«</button>
<span>Page {{ pageNumber || 1 }}</span>
<button class="btn" (click)="onPaginationChange(2)">»</button>
</label>
<label class="label">
<span class="label-text-alt"
>{{ calcItemsIndex().start }} - {{ calcItemsIndex().end }} of {{ pageLength }}items</span
>
</label>
<div class="flex gap-4">
<div class="form-control">
<label class="input-group">
<select
class="select w-20 sm:w-64"
[(ngModel)]="pageSize"
(change)="onPaginationChange()"
>
<option disabled selected>Select items amount</option>
<ng-container *ngFor="let size of pageSizeOptions">
<option [value]="size">{{ size }}</option>
</ng-container>
</select>
</label>
<label class="label">
<span class="label-text-alt"
>{{ calcItemsIndex().start }} - {{ calcItemsIndex().end }} of
{{ pageLength }}items</span
>
</label>
</div>

<div class="join join-horizontal">
<button class="btn join-item" (click)="onPaginationChange(1)">«</button>
<button class="btn join-item cursor-default">Page {{ pageNumber || 1 }}</button>
<button class="btn join-item" (click)="onPaginationChange(2)">»</button>
</div>
</div>
</div>

Expand All @@ -50,7 +57,7 @@ <h2 class="card-title"></h2>
<ng-container *ngIf="blocks === null; then loading; else loaded"> </ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-dots loading-lg"></span>
<span class="loading loading-ring loading-lg"></span>
</p>
</ng-template>
<ng-template #loaded>
Expand Down
2 changes: 1 addition & 1 deletion projects/explorer/src/app/views/dashboard/blocks/blocks.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h2 class="card-title">Latest Blocks</h2>
<ng-container *ngIf="blocks === null; then loading; else loaded"> </ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-dots loading-lg"></span>
<span class="loading loading-ring loading-lg"></span>
</p>
</ng-template>
<ng-template #loaded>
Expand Down
40 changes: 23 additions & 17 deletions projects/explorer/src/app/views/dashboard/dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,29 @@
<h2>Dashboard</h2>

<div class="stats stats-vertical md:stats-horizontal shadow">
<div class="stat">
<div class="stat-title">Latest Block Height</div>
<div class="stat-value text-primary">{{ latestBlockHeight }}</div>
<div class="stat-desc" routerLink="/blocks/{{ latestBlockHeight }}">Details</div>
<div class="mx-auto max-w-screen-xl">
<div class="text-xl breadcrumbs">
<ul>
<li>Dashboard</li>
</ul>
</div>

<div class="stat">
<div class="stat-title">Staked Ratio</div>
<div class="stat-value">{{ stakedRatio }} %</div>
<div class="stat-desc">
{{ stakedTokens | unitConversion }} / {{ totalSupply | unitConversion }}
<div class="stats stats-vertical md:stats-horizontal shadow">
<div class="stat">
<div class="stat-title">Latest Block Height</div>
<div class="stat-value text-primary">{{ latestBlockHeight }}</div>
<div class="stat-desc" routerLink="/blocks/{{ latestBlockHeight }}">Details</div>
</div>
</div>

<div class="stat">
<div class="stat-title">Inflation</div>
<div class="stat-value text-secondary">{{ inflation }} %</div>
<div class="stat-desc">Total supply increase of governance token</div>
<div class="stat">
<div class="stat-title">Staked Ratio</div>
<div class="stat-value">{{ stakedRatio }} %</div>
<div class="stat-desc">
{{ stakedTokens | unitConversion }} / {{ totalSupply | unitConversion }}
</div>
</div>

<div class="stat">
<div class="stat-title">Inflation</div>
<div class="stat-value text-secondary">{{ inflation }} %</div>
<div class="stat-desc">Total supply increase of governance token</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion projects/explorer/src/app/views/dashboard/txs/txs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h2 class="card-title">Transactions</h2>
<ng-container *ngIf="txs === null; then loading; else loaded"> </ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-dots loading-lg"></span>
<span class="loading loading-ring loading-lg"></span>
</p>
</ng-template>
<ng-template #loaded>
Expand Down
9 changes: 6 additions & 3 deletions projects/explorer/src/app/views/dashboard/validators/validators.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h2 class="card-title">Validators</h2>
<ng-container *ngIf="validators === null; then loading; else loaded"> </ng-container>
<ng-template #loading>
<p class="text-center">
<span class="loading loading-dots loading-lg"></span>
<span class="loading loading-ring loading-lg"></span>
</p>
</ng-template>
<ng-template #loaded>
Expand All @@ -37,9 +37,12 @@ <h2 class="card-title">Validators</h2>
routerLink="/validators/{{ validator.val.operator_address }}"
>
<th>
<mat-icon matListIcon [ngStyle]="{ color: getColorCode(validator.val) }">
<span
class="material-symbols-outlined"
[ngStyle]="{ color: getColorCode(validator.val) }"
>
circle
</mat-icon>
</span>
</th>
<td>
{{ validator.val.description?.moniker }}
Expand Down
Loading