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

fix: withdraw mobile layout #701

Merged
merged 8 commits into from
Dec 5, 2023
Merged

fix: withdraw mobile layout #701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
42f0485
feat: transfer recipient
Senna46 Dec 4, 2023
3b591be
feat: token send & recieve
Senna46 Dec 4, 2023
596b5b1
fix: withdraw mobile
Senna46 Dec 5, 2023
e913a9f
Merge pull request #698 from UnUniFi/txs-address
Senna46 Dec 5, 2023
ae094dc
feat: vesting amount
Senna46 Dec 5, 2023
1eebffb
feat: explorer vesting
Senna46 Dec 5, 2023
d1238da
Merge branch 'develop' of https://github.com/UnUniFi/web-apps into ve…
Senna46 Dec 5, 2023
e45ce1b
Merge pull request #702 from UnUniFi/vesting
Senna46 Dec 5, 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
3 changes: 3 additions & 0 deletions projects/explorer/src/app/pages/accounts/account/txs/txs.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading