Skip to content

Commit

Permalink
Merge pull request #610 from UnUniFi/send-tokens-ui
Browse files Browse the repository at this point in the history 
Send tokens UI
  • Loading branch information
@Senna46
Senna46 authored Aug 17, 2023
2 parents a945d1a + 6d6d974 commit 1cf9242
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 62 deletions.
77 changes: 49 additions & 28 deletions projects/portal/src/app/views/balance/send/send.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,37 +40,58 @@ <h2 class="card-title">Send Tokens</h2>
</span>

<ng-container *ngFor="let token of selectedTokens; let i = index">
<div class="w-full sm:w-auto sm:flex-auto">
<div class="join w-full">
<div
class="join-item btn btn-neutral btn-disabled"
*ngIf="symbolImageMap && symbolImageMap[token.symbol]"
<span class="label">
<span class="label-text">Enter amount</span>
<span class="label-text-alt flex flex-row gap-2">
<span
class="cursor-pointer"
(click)="token.amount = (symbolBalancesMap?.[token.symbol || ''] || 0) / 4"
>
25%
</span>
<span
class="cursor-pointer"
(click)="token.amount = (symbolBalancesMap?.[token.symbol || ''] || 0) / 2"
>
50%
</span>
<span
class="cursor-pointer"
(click)="token.amount = symbolBalancesMap?.[token.symbol || ''] || 0"
>
<div class="mask mask-circle w-8 h-8">
<img src="{{ symbolImageMap[token.symbol] }}" alt="Asset Symbol" />
</div>
100%
</span>
</span>
</span>
<div class="join">
<div
class="join-item btn btn-neutral btn-disabled"
*ngIf="symbolImageMap && symbolImageMap[token.symbol]"
>
<div class="mask mask-circle w-8 h-8">
<img src="{{ symbolImageMap[token.symbol] }}" alt="Asset Symbol" />
</div>
<input
#tokenNgModelRef="ngModel"
type="number"
required
placeholder="12.123456"
[min]="0"
[max]="symbolBalancesMap?.[token.symbol] || 0"
[step]="1"
pattern="^[0-9]*\.?[0-9]{0,6}$"
[(ngModel)]="token.amount"
name="amount{{ i }}"
class="join-item input input-bordered w-full"
[class]="{
'input-error': tokenNgModelRef.errors && tokenNgModelRef.touched
}"
/>
<div class="join-item btn btn-neutral btn-disabled">{{ token.symbol }}</div>
<label class="join-item btn btn-error" (click)="onClickDeleteToken(i)">
<span class="material-symbols-outlined">delete</span>
</label>
</div>
<input
#tokenNgModelRef="ngModel"
type="number"
required
placeholder="12.123456"
[min]="0"
[max]="symbolBalancesMap?.[token.symbol] || 0"
[step]="1"
pattern="^[0-9]*\.?[0-9]{0,6}$"
[(ngModel)]="token.amount"
name="amount{{ i }}"
class="join-item input input-bordered w-full"
[class]="{
'input-error': tokenNgModelRef.errors && tokenNgModelRef.touched
}"
/>
<div class="join-item btn btn-neutral btn-disabled">{{ token.symbol }}</div>
<label class="join-item btn btn-error" (click)="onClickDeleteToken(i)">
<span class="material-symbols-outlined">delete</span>
</label>
</div>
<span class="label">
<span class="label-text">Available:</span>
Expand Down
24 changes: 18 additions & 6 deletions ...l/src/app/views/dialogs/delegate/delegate-form-dialog/delegate-form-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,25 @@
</div>

<div class="form-control w-full">
<label class="label">
<span class="label">
<span class="label-text">Delegate Amount</span>
</label>
<span class="label-text-alt flex flex-row gap-2">
<span class="cursor-pointer" (click)="onClickAutoFill(balance?.amount, 0.25)">
25%
</span>
<span class="cursor-pointer" (click)="onClickAutoFill(balance?.amount, 0.5)">
50%
</span>
<span class="cursor-pointer" (click)="onClickAutoFill(balance?.amount, 1.0)">
100%
</span>
</span>
</span>
<label class="input-group">
<input
name="delegate-amount"
type="number"
placeholder="12.123456"
placeholder="0.00000"
class="input input-bordered w-full"
[(ngModel)]="delegateAmount"
[min]="0"
Expand All @@ -67,9 +78,10 @@
<span>{{ denom | coinDenom | async }}</span>
</label>

<label class="label">
<span class="label-text text-xs"> Available Balance: {{ balance | coin | async }} </span>
</label>
<span class="label">
<span class="label-text">Available Balance:</span>
<span class="label-text-alt">{{ balance | coin | async }} </span>
</span>
</div>

<!-- <h3 class="pt-3">Gas Settings</h3>
Expand Down
8 changes: 8 additions & 0 deletions ...tal/src/app/views/dialogs/delegate/delegate-form-dialog/delegate-form-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,14 @@ export class DelegateFormDialogComponent implements OnInit, OnChanges {
this.gasRatio = ratio;
}

onClickAutoFill(balance: string | undefined | null, percent: number) {
if (!this.denom) {
return;
}
const exponent = getDenomExponent(this.denom);
this.delegateAmount = (Number(balance) * percent) / 10 ** exponent;
}

onSubmit() {
if (
!this.currentStoredWallet ||
Expand Down
86 changes: 58 additions & 28 deletions projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,22 +51,18 @@ <h2 class="card-title">
<td>Vault ID</td>
<td>{{ vault?.vault?.id }}</td>
</tr>
<tr>
<td>Vault Address</td>
<td class="font-mono break-all">{{ vault?.vault_address }}</td>
</tr>
<!-- <tr>
<td>Vault Name</td>
<td>{{ 'Coming soon' }}</td>
</tr> -->
<tr>
<!-- <tr>
<td>Owner</td>
<td class="font-mono break-all">{{ vault?.vault?.owner }}</td>
</tr>
<tr>
<td>Owner's Deposit</td>
<td>{{ vault?.vault?.owner_deposit | coin | async }}</td>
</tr>
</tr> -->
<tr>
<td class="flex flex-row items-center gap-2">
<span>Withdraw Commission Rate</span>
Expand All @@ -78,7 +74,7 @@ <h2 class="card-title">
<span class="material-symbols-outlined">help</span>
</a>
</td>
<td>{{ vault?.vault?.withdraw_commission_rate | percent : '1.0-4' }}</td>
<td>{{ vault?.vault?.withdraw_commission_rate | percent : '1.0-2' }}</td>
</tr>
<tr>
<td class="flex flex-row items-center gap-2">
Expand All @@ -91,7 +87,7 @@ <h2 class="card-title">
<span class="material-symbols-outlined">help</span>
</a>
</td>
<td>{{ vault?.vault?.withdraw_reserve_rate | percent : '1.0-4' }}</td>
<td>{{ vault?.vault?.withdraw_reserve_rate | percent : '1.0-2' }}</td>
</tr>
</tbody>
</table>
Expand All @@ -109,7 +105,7 @@ <h2 class="card-title">
{{ totalDepositAmount?.symbolAmount }} {{ displaySymbol }}
</div>
<div class="stat-desc" *ngIf="totalWithdrawalBalance?.usdAmount">
${{ totalDepositAmount?.usdAmount | number }}
{{ totalDepositAmount?.usdAmount | currency }}
</div>
</div>
</div>
Expand All @@ -120,7 +116,7 @@ <h2 class="card-title">
<td>{{ totalBondedAmount?.symbolAmount }} {{ displaySymbol }}</td>
</div>
<div class="stat-desc" *ngIf="totalBondedAmount?.usdAmount">
${{ totalBondedAmount?.usdAmount | number }}
${{ totalBondedAmount?.usdAmount | currency }}
</div>
</div>
<div class="stat">
Expand All @@ -129,7 +125,7 @@ <h2 class="card-title">
{{ totalUnbondingAmount?.symbolAmount }} {{ displaySymbol }}
</div>
<div class="stat-desc" *ngIf="totalUnbondingAmount?.usdAmount">
${{ totalUnbondingAmount?.usdAmount | number }}
${{ totalUnbondingAmount?.usdAmount | currency }}
</div>
</div>
<div class="stat">
Expand All @@ -138,7 +134,7 @@ <h2 class="card-title">
{{ totalWithdrawalBalance?.symbolAmount }} {{ displaySymbol }}
</div>
<div class="stat-desc" *ngIf="totalWithdrawalBalance?.usdAmount">
${{ totalWithdrawalBalance?.usdAmount | number }}
${{ totalWithdrawalBalance?.usdAmount | currency }}
</div>
</div>
</div>
Expand All @@ -160,26 +156,46 @@ <h2 class="card-title">
<div class="w-full md:w-auto mb-8">
<div class="card bg-base-100 shadow-xl w-full">
<div class="tabs tabs-boxed w-full">
<a class="tab tab-lg w-1/2" [class.tab-active]="tab === 'mint'" (click)="tab = 'mint'"
>Deposit</a
>
<a class="tab tab-lg w-1/2" [class.tab-active]="tab === 'burn'" (click)="tab = 'burn'"
>Withdraw</a
>
<a class="tab tab-lg w-1/2" [class.tab-active]="tab === 'mint'" (click)="tab = 'mint'">
Deposit
</a>
<a class="tab tab-lg w-1/2" [class.tab-active]="tab === 'burn'" (click)="tab = 'burn'">
Withdraw
</a>
</div>
<div class="card-body" *ngIf="tab === 'mint'">
<form #depositFormRef="ngForm" (submit)="onSubmitDeposit()">
<div class="form-control">
<label class="label">
<span class="label-text">Enter amount</span>
<span class="label-text-alt flex flex-row gap-2">
<span
class="cursor-pointer"
(click)="mintAmount = (symbolBalancesMap?.[displaySymbol || ''] || 0) / 4"
>
25%
</span>
<span
class="cursor-pointer"
(click)="mintAmount = (symbolBalancesMap?.[displaySymbol || ''] || 0) / 2"
>
50%
</span>
<span
class="cursor-pointer"
(click)="mintAmount = symbolBalancesMap?.[displaySymbol || ''] || 0"
>
100%
</span>
</span>
</label>
<label class="input-group">
<input
#depositAmountRef
#depositAmountNgModelRef="ngModel"
required
type="number"
placeholder="12.123456"
placeholder="0.000000"
class="input input-bordered w-full"
[class]="{
'input-error': depositAmountNgModelRef.errors && depositAmountNgModelRef.touched
Expand All @@ -195,10 +211,7 @@ <h2 class="card-title">
</label>
<span class="label">
<span class="label-text-alt">Available balance:</span>
<label
class="label-text-alt cursor-pointer"
(click)="mintAmount = symbolBalancesMap?.[displaySymbol || '']"
>
<label class="label-text-alt">
{{ symbolBalancesMap?.[displaySymbol || ''] || 0 }} {{ displaySymbol }}
</label>
</span>
Expand Down Expand Up @@ -230,12 +243,32 @@ <h2 class="card-title">
<div class="form-control">
<label class="label">
<span class="label-text">Enter amount</span>
<span class="label-text-alt flex flex-row gap-2">
<span
class="cursor-pointer"
(click)="burnAmount = (symbolBalancesMap?.['YA-VAULT-'+ vault?.vault?.id] || 0) / 4"
>
25%
</span>
<span
class="cursor-pointer"
(click)="burnAmount = (symbolBalancesMap?.['YA-VAULT-'+ vault?.vault?.id] || 0) / 2"
>
50%
</span>
<span
class="cursor-pointer"
(click)="burnAmount = symbolBalancesMap?.['YA-VAULT-'+ vault?.vault?.id] || 0"
>
100%
</span>
</span>
</label>
<label class="input-group">
<input
#withdrawAmountRef
#withdrawAmountNgModelRef="ngModel"
placeholder="12.123456"
placeholder="0.000000"
required
type="number"
class="input input-bordered w-full"
Expand All @@ -253,10 +286,7 @@ <h2 class="card-title">
</label>
<span class="label">
<span class="label-text-alt">Available balance:</span>
<label
class="label-text-alt cursor-pointer"
(click)="burnAmount = symbolBalancesMap?.['YA-VAULT-'+ vault?.vault?.id]"
>
<label class="label-text-alt">
{{ symbolBalancesMap?.['YA-VAULT-'+ vault?.vault?.id] || 0 }}
{{ 'YA-VAULT-' + vault?.vault?.id }}
</label>
Expand Down

0 comments on commit 1cf9242

Please sign in to comment.