Skip to content

Commit

Permalink
Merge pull request #701 from UnUniFi/develop
Browse files Browse the repository at this point in the history 
fix: withdraw mobile layout
  • Loading branch information
@Senna46
Senna46 authored Dec 5, 2023
2 parents c16517b + e45ce1b commit b7cad06
Show file tree
Hide file tree
Showing 14 changed files with 592 additions and 171 deletions.
3 changes: 3 additions & 0 deletions projects/explorer/src/app/pages/accounts/account/txs/txs.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
[txs]="txs$ | async"
[pageInfo]="paginationInfo$ | async"
[pageLength]="pageLength$ | async"
[maxPageNumber]="maxPageNumber$ | async"
[pageSizeOptions]="pageSizeOptions"
[txType]="txType$ | async"
(paginationChange)="appPaginationChanged($event)"
(txTypeChange)="appTxTypeChanged($event)"
></view-txs>
52 changes: 36 additions & 16 deletions projects/explorer/src/app/pages/accounts/account/txs/txs.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export class TxsComponent implements OnInit {
paginationInfo$: Observable<PaginationInfo>;
paginationInfoChanged$: Observable<PaginationInfo>;
pageLength$: Observable<number | undefined>;
maxPageNumber$: Observable<number>;
txType$: Observable<string>;
txs$: Observable<BroadcastTx200ResponseTxResponse[] | undefined>;

constructor(
Expand All @@ -34,21 +36,19 @@ export class TxsComponent implements OnInit {
this.address$ = this.route.params.pipe(map((params) => params.address));
const timer$ = timer(0, this.pollingInterval * 1000);
const sdk$ = timer$.pipe(mergeMap((_) => this.cosmosSDK.sdk$));
const txsResponse$ = combineLatest([sdk$, this.address$]).pipe(
switchMap(([sdk, address]) => {
this.txType$ = this.route.queryParams.pipe(map((params) => params.txType || 'send'));
const txEvent$ = combineLatest([this.address$, this.txType$]).pipe(
map(([address, type]) => {
return type === 'send'
? `coin_spent.spender='${address}'`
: `coin_received.receiver='${address}'`;
}),
);
const txsResponse$ = combineLatest([sdk$, txEvent$]).pipe(
switchMap(([sdk, event]) => {
return cosmosclient.rest.tx
.getTxsEvent(
sdk.rest,
[`message.sender='${address}'`],
undefined,
undefined,
undefined,
true,
true,
2 as any,
)
.getTxsEvent(sdk.rest, [event], undefined, undefined, undefined, true, true, 2 as any)
.then((res) => {
console.log(res);
return res.data;
})
.catch((error) => {
Expand Down Expand Up @@ -84,18 +84,28 @@ export class TxsComponent implements OnInit {
}),
);

this.maxPageNumber$ = combineLatest([this.txsTotalCount$, this.paginationInfo$]).pipe(
map(([txTotalCount, paginationInfo]) => {
if (txTotalCount === undefined) {
return 0;
}
const maxPageNumber = Math.ceil(Number(txTotalCount) / paginationInfo.pageSize);
return maxPageNumber;
}),
);

this.paginationInfoChanged$ = this.paginationInfo$.pipe(
distinctUntilChanged(),
map((paginationInfo) => paginationInfo),
);

this.txs$ = this.paginationInfoChanged$.pipe(
withLatestFrom(sdk$, this.address$),
mergeMap(([paginationInfo, sdk, address]) => {
withLatestFrom(sdk$, txEvent$),
mergeMap(([paginationInfo, sdk, event]) => {
return cosmosclient.rest.tx
.getTxsEvent(
sdk.rest,
[`message.sender='${address}'`],
[event],
undefined,
undefined,
paginationInfo.pageSize.toString(),
Expand Down Expand Up @@ -126,4 +136,14 @@ export class TxsComponent implements OnInit {
queryParamsHandling: 'merge',
});
}

appTxTypeChanged(txType: string): void {
this.router.navigate([], {
relativeTo: this.route,
queryParams: {
txType: txType,
},
queryParamsHandling: 'merge',
});
}
}
156 changes: 155 additions & 1 deletion projects/explorer/src/app/views/accounts/account/account.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ <h2 class="card-title">Balances</h2>
question_mark
</span>
</div>
{{ denomMetadataMap?.[balance.key]?.display || balance.key }}
{{ balance.key | coinDenom | async }}
</div>
</th>
<td>{{ balance.value.amount | coinAmount : balance.key }}</td>
Expand All @@ -92,4 +92,158 @@ <h2 class="card-title">Balances</h2>
</ng-template>
</div>
</div>

<div class="card bg-base-100 shadow-xl mb-4" *ngIf="vestingAccount">
<div class="card-body">
<h2 class="card-title">Vesting</h2>

<div class="overflow-x-auto">
<table class="table w-full">
<tbody>
<tr *ngFor="let vest of vestingAccount.base_vesting_account?.delegated_vesting">
<th>
<div class="flex items-center space-x-3">
<div class="avatar mr-2">
<div
class="mask mask-circle w-6 h-6"
*ngIf="symbolImageMap &&symbolImageMap[denomMetadataMap?.[vest.denom||'']?.symbol || '']"
>
<img
src="{{ symbolImageMap[denomMetadataMap?.[vest.denom||'']?.symbol || ''] }}"
alt="Asset Symbol"
/>
</div>

<span
class="material-symbols-outlined"
*ngIf="!symbolImageMap ||!symbolImageMap[denomMetadataMap?.[vest.denom||'']?.symbol || '']"
>
question_mark
</span>
</div>
{{ vest.denom | coinDenom | async }}
</div>
</th>
<td>{{ vest.amount | coinAmount : vest.denom }}</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>Vesting Start</th>
<th>Vesting End</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{{ vestingAccount.start_time.toNumber() * 1000 | date : 'yyyy-MM-dd a hh:mm:ss z' }}
</td>
<td>
{{
(vestingAccount.base_vesting_account?.end_time?.toNumber() || 0) * 1000
| date : 'yyyy-MM-dd a hh:mm:ss z'
}}
</td>
</tr>
</tbody>
</table>
</div>
<div class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box mb-4">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium">Click to See Vesting Detail</div>
<div class="collapse-content overflow-x-auto">
<p class="break-all">
A user may choose to delegate their tokens to validators. This may be done with tokens
that are vested or are still vesting. As such, vesting tokens which are delegated will
be listed under <b>Delegated Vesting</b>. Vested tokens which are delegated will be
listed under Delegated Free. Both are variable values that will change based on the
amount being delegated and may be updated as more and more tokens become vested.
</p>
<p class="break-all">
For more information on vesting, please see the
<a
href="https://docs.cosmos.network/main/build/modules/auth/vesting#vesting-account-specification"
target="_blank"
><u class="text-info">Cosmos SDK documentation</u></a
>.
</p>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>Delegated Vesting</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let del of vestingAccount.base_vesting_account?.delegated_vesting">
<th>
<div class="flex items-center space-x-3">
<div class="avatar mr-2">
<div
class="mask mask-circle w-6 h-6"
*ngIf="symbolImageMap &&symbolImageMap[denomMetadataMap?.[del.denom||'']?.symbol || '']"
>
<img
src="{{ symbolImageMap[denomMetadataMap?.[del.denom||'']?.symbol || ''] }}"
alt="Asset Symbol"
/>
</div>

<span
class="material-symbols-outlined"
*ngIf="!symbolImageMap ||!symbolImageMap[denomMetadataMap?.[del.denom||'']?.symbol || '']"
>
question_mark
</span>
</div>
{{ del.denom | coinDenom | async }}
</div>
</th>
<td>{{ del.amount | coinAmount : del.denom }}</td>
</tr>
</tbody>
<thead>
<tr>
<th>Delegated Free</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let free of vestingAccount.base_vesting_account?.delegated_free">
<th>
<div class="flex items-center space-x-3">
<div class="avatar mr-2">
<div
class="mask mask-circle w-6 h-6"
*ngIf="symbolImageMap &&symbolImageMap[denomMetadataMap?.[free.denom||'']?.symbol || '']"
>
<img
src="{{ symbolImageMap[denomMetadataMap?.[free.denom||'']?.symbol || ''] }}"
alt="Asset Symbol"
/>
</div>

<span
class="material-symbols-outlined"
*ngIf="!symbolImageMap ||!symbolImageMap[denomMetadataMap?.[free.denom||'']?.symbol || '']"
>
question_mark
</span>
</div>
{{ free.denom | coinDenom | async }}
</div>
</th>
<td>{{ free.amount | coinAmount : free.denom }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
66 changes: 36 additions & 30 deletions projects/explorer/src/app/views/accounts/account/distribution/distribution.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,16 @@ <h2 class="card-title">Validator Rewards</h2>
</ng-template>

<ng-template #filled>
<table class="table w-full">
<tr>
<th>Validator Accumulated Commission</th>
<td *ngFor="let c of commission?.commission?.commission">
{{ c | coin | async }}
</td>
</tr>
</table>
<div class="overflow-x-auto">
<table class="table w-full">
<tr>
<th>Validator Accumulated Commission</th>
<td *ngFor="let c of commission?.commission?.commission">
{{ c | coin | async }}
</td>
</tr>
</table>
</div>
</ng-template>
</ng-template>

Expand All @@ -37,14 +39,16 @@ <h2 class="card-title">Validator Rewards</h2>
</ng-template>

<ng-template #filledReward>
<table class="table w-full">
<tr>
<th>Outstanding Reward (For Delegator)</th>
<td *ngFor="let r of rewards?.rewards?.rewards">
{{ r | coin | async }}
</td>
</tr>
</table>
<div class="overflow-x-auto">
<table class="table w-full">
<tr>
<th>Outstanding Reward (For Delegator)</th>
<td *ngFor="let r of rewards?.rewards?.rewards">
{{ r | coin | async }}
</td>
</tr>
</table>
</div>
</ng-template>
</ng-template>

Expand All @@ -56,20 +60,22 @@ <h2 class="card-title">Validator Rewards</h2>
<ng-template #emptySlash></ng-template>

<ng-template #filledSlash>
<table class="table w-full">
<thead>
<tr>
<th>Period</th>
<td>Fraction</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let slash of slashes?.slashes">
<th>{{ slash.validator_period }}</th>
<td>{{ slash.fraction }}</td>
</tr>
</tbody>
</table>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>Period</th>
<td>Fraction</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let slash of slashes?.slashes">
<th>{{ slash.validator_period }}</th>
<td>{{ slash.fraction }}</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
</ng-template>
</div>
Expand Down
Loading

0 comments on commit b7cad06

Please sign in to comment.