PoS Spending Limits UI (#298)

deso-protocol · Feb 13, 2024 · e3d1925 · e3d1925
1 parent fd55a7c
commit e3d1925
Show file tree

Hide file tree

Showing 14 changed files with 534 additions and 37 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -60,6 +60,8 @@ import { TransactionSpendingLimitDaoCoinLimitOrderComponent } from './transactio
 import { TransactionSpendingLimitNftComponent } from './transaction-spending-limit/transaction-spending-limit-nft/transaction-spending-limit-nft.component';
 import { TransactionSpendingLimitSectionComponent } from './transaction-spending-limit/transaction-spending-limit-section/transaction-spending-limit-section.component';
 import { TransactionSpendingLimitComponent } from './transaction-spending-limit/transaction-spending-limit.component';
+import { TransactionSpendingLimitStakeComponent } from './transaction-spending-limit/transaction-spending-limit-stake/transaction-spending-limit-stake.component';
+import { TransactionSpendingLimitLockupComponent } from './transaction-spending-limit/transaction-spending-limit-lockup/transaction-spending-limit-lockup.component';
 
 @NgModule({
   declarations: [
@@ -107,6 +109,8 @@ import { TransactionSpendingLimitComponent } from './transaction-spending-limit/
     RecoverySecretComponent,
     BackupSeedDialogComponent,
     RemoveAccountDialogComponent,
+    TransactionSpendingLimitStakeComponent,
+    TransactionSpendingLimitLockupComponent,
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/backend-api.service.ts b/src/app/backend-api.service.ts
@@ -147,7 +147,8 @@ export type LimitOperationString =
   | NFTLimitOperationString
   | AssociationOperationString
   | AccessGroupOperationString
-  | AccessGroupMemberOperationString;
+  | AccessGroupMemberOperationString
+  | LockupLimitOperationString;
 export type CreatorCoinOperationLimitMap =
   CoinOperationLimitMap<CreatorCoinLimitOperationString>;
 export type DAOCoinOperationLimitMap =
@@ -236,6 +237,42 @@ export type AccessGroupMemberLimitMapItem = {
   OpCount: number;
 };
 
+export type StakeLimitMapItem = {
+  ValidatorPublicKeyBase58Check: string;
+  StakeLimit: string; // Hex string
+};
+
+export type UnstakeLimitMapItem = {
+  ValidatorPublicKeyBase58Check: string;
+  UnstakeLimit: string; // Hex string
+};
+
+export type UnlockStakeLimitMapItem = {
+  ValidatorPublicKeyBase58Check: string;
+  OpCount: number;
+};
+
+export enum LockupLimitScopeType {
+  ANY = 'AnyCoins',
+  SCOPED = 'ScopedCoins',
+}
+
+export enum LockupLimitOperationString {
+  ANY = 'Any',
+  COIN_LOCKUP = 'CoinLockup',
+  UPDATE_COIN_LOCKUP_YIELD_CURVE = 'UpdateCoinLockupYieldCurve',
+  UPDATE_COIN_LOCKUP_TRANSFER_RESTRICTIONS = 'UpdateCoinLockupTransferRestrictions',
+  COIN_LOCKUP_TRANSFER = 'CoinLockupTransferOperationString',
+  COIN_UNLOCK = 'CoinLockupUnlock',
+}
+
+export type LockupLimitMapItem = {
+  ProfilePublicKeyBase58Check: string;
+  ScopeType: LockupLimitScopeType;
+  Operation: LockupLimitOperationString;
+  OpCount: number;
+};
+
 export interface TransactionSpendingLimitResponse {
   GlobalDESOLimit: number;
   // TODO: make enum for transaction type string
@@ -247,6 +284,10 @@ export interface TransactionSpendingLimitResponse {
   AssociationLimitMap?: AssociationLimitMapItem[];
   AccessGroupLimitMap?: AccessGroupLimitMapItem[];
   AccessGroupMemberLimitMap?: AccessGroupMemberLimitMapItem[];
+  StakeLimitMap?: StakeLimitMapItem[];
+  UnstakeLimitMap?: UnstakeLimitMapItem[];
+  UnlockStakeLimitMap?: UnlockStakeLimitMapItem[];
+  LockupLimitMap?: LockupLimitMapItem[];
   IsUnlimited?: boolean;
   DerivedKeyMemo?: string;
 }

diff --git a/...-limit/transaction-spending-limit-lockup/transaction-spending-limit-lockup.component.html b/...-limit/transaction-spending-limit-lockup/transaction-spending-limit-lockup.component.html
@@ -0,0 +1,29 @@
+<div class="display--flex justify--between margin-bottom--small">
+  <div class="text--left width--25">
+    <img
+      class="avatar--medium avatar--rounded margin-right--xsmall"
+      [appAvatar]="lockupLimitMapItem?.ProfilePublicKeyBase58Check"
+      *ngIf="
+        lockupLimitMapItem?.ProfilePublicKeyBase58Check &&
+        appUser?.ProfileEntryResponse?.Username
+      "
+    />
+    {{
+      appUser?.ProfileEntryResponse?.Username ||
+        lockupLimitMapItem?.ProfilePublicKeyBase58Check ||
+        (lockupLimitMapItem?.ScopeType === LockupLimitScopeType.ANY
+          ? 'Any Profile'
+          : 'DESO') | truncateAddressOrUsername
+    }}
+  </div>
+  <div class="display-flex justify--center width--50">
+    <code>
+      {{ getOperationString() }}
+    </code>
+  </div>
+  <div class="width--25 text--right">
+    <code>
+      {{ globalVars.formatTxCountLimit(lockupLimitMapItem?.OpCount) }}
+    </code>
+  </div>
+</div>
diff --git a/...-limit/transaction-spending-limit-lockup/transaction-spending-limit-lockup.component.scss b/...-limit/transaction-spending-limit-lockup/transaction-spending-limit-lockup.component.scss
diff --git a/...ng-limit/transaction-spending-limit-lockup/transaction-spending-limit-lockup.component.ts b/...ng-limit/transaction-spending-limit-lockup/transaction-spending-limit-lockup.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { GlobalVarsService } from 'src/app/global-vars.service';
+import {
+  LockupLimitMapItem,
+  LockupLimitOperationString,
+  LockupLimitScopeType,
+  User,
+} from '../../backend-api.service';
+import { TransactionSpendingLimitComponent } from '../transaction-spending-limit.component';
+
+@Component({
+  selector: 'app-transaction-spending-limit-lockup',
+  templateUrl: './transaction-spending-limit-lockup.component.html',
+  styleUrls: ['./transaction-spending-limit-lockup.component.scss'],
+})
+export class TransactionSpendingLimitLockupComponent implements OnInit {
+  @Input() lockupLimitMapItem: LockupLimitMapItem | undefined;
+  @Input() appUser: User | undefined;
+  TransactionSpendingLimitComponent = TransactionSpendingLimitComponent;
+  LockupLimitScopeType = LockupLimitScopeType;
+
+  constructor(public globalVars: GlobalVarsService) {}
+
+  ngOnInit(): void {}
+
+  getOperationString(): string {
+    switch (this.lockupLimitMapItem?.Operation) {
+      case LockupLimitOperationString.ANY:
+        return 'Any';
+      case LockupLimitOperationString.COIN_LOCKUP:
+        return 'Lockup';
+      case LockupLimitOperationString.COIN_LOCKUP_TRANSFER:
+        return 'Transfer';
+      case LockupLimitOperationString.UPDATE_COIN_LOCKUP_YIELD_CURVE:
+        return 'Update lockup yield curve';
+      case LockupLimitOperationString.UPDATE_COIN_LOCKUP_TRANSFER_RESTRICTIONS:
+        return 'Update transfer restriction';
+      case LockupLimitOperationString.COIN_UNLOCK:
+        return 'Unlock coins';
+      default:
+        return '';
+    }
+  }
+}
diff --git a/...imit/transaction-spending-limit-section/transaction-spending-limit-section.component.html b/...imit/transaction-spending-limit-section/transaction-spending-limit-section.component.html
@@ -220,6 +220,135 @@
           ></app-transaction-spending-limit-access-group-member>
         </div>
       </ng-container>
+      <ng-container
+        *ngIf="sectionTitle === TransactionSpendingLimitComponent.StakeSection"
+      >
+        <div class="display--flex justify--between items--center">
+          <div class="text--text-lightest">Validator</div>
+          <div class="text--text-lightest">Amount</div>
+        </div>
+        <div
+          *ngIf="anyValidatorItem"
+          class="display--flex flex--column padding-top--small justify--between"
+        >
+          <app-transaction-spending-limit-stake
+            [stakeLimitMapItem]="anyValidatorItem"
+            [operationName]="'Stake'"
+          ></app-transaction-spending-limit-stake>
+        </div>
+        <div
+          *ngFor="
+            let stakeLimitMapItem of stakeLimitMap
+              | slice : 0 : (showAll ? stakeLimitMap.length : defaultNumShown)
+          "
+          class="display--flex flex--column padding-top--small justify--between"
+        >
+          <app-transaction-spending-limit-stake
+            [stakeLimitMapItem]="stakeLimitMapItem"
+            [appUser]="userMap[stakeLimitMapItem.ValidatorPublicKeyBase58Check]"
+            [operationName]="'Stake'"
+          ></app-transaction-spending-limit-stake>
+        </div>
+      </ng-container>
+      <ng-container
+        *ngIf="
+          sectionTitle === TransactionSpendingLimitComponent.UnstakeSection
+        "
+      >
+        <div class="display--flex justify--between items--center">
+          <div class="text--text-lightest">Validator</div>
+          <div class="text--text-lightest">Amount</div>
+        </div>
+        <div
+          *ngIf="anyValidatorItem"
+          class="display--flex flex--column padding-top--small justify--between"
+        >
+          <app-transaction-spending-limit-stake
+            [stakeLimitMapItem]="anyValidatorItem"
+            [operationName]="'Unstake'"
+          ></app-transaction-spending-limit-stake>
+        </div>
+        <div
+          *ngFor="
+            let unstakeLimitMapItem of unstakeLimitMap
+              | slice : 0 : (showAll ? unstakeLimitMap.length : defaultNumShown)
+          "
+          class="display--flex flex--column padding-top--small justify--between"
+        >
+          <app-transaction-spending-limit-stake
+            [stakeLimitMapItem]="unstakeLimitMapItem"
+            [appUser]="
+              userMap[unstakeLimitMapItem.ValidatorPublicKeyBase58Check]
+            "
+            [operationName]="'Unstake'"
+          ></app-transaction-spending-limit-stake>
+        </div>
+      </ng-container>
+      <ng-container
+        *ngIf="
+          sectionTitle === TransactionSpendingLimitComponent.UnlockStakeSection
+        "
+      >
+        <div class="display--flex justify--between items--center">
+          <div class="text--text-lightest">Validator</div>
+          <div class="text--text-lightest">Txn Limit</div>
+        </div>
+        <div
+          *ngIf="anyValidatorItem"
+          class="display--flex flex--column padding-top--small justify--between"
+        >
+          <app-transaction-spending-limit-stake
+            [stakeLimitMapItem]="anyValidatorItem"
+            [operationName]="'Unlock Stake'"
+          ></app-transaction-spending-limit-stake>
+        </div>
+        <div
+          *ngFor="
+            let unlockStakeLimitMapItem of unlockStakeLimitMap
+              | slice
+                : 0
+                : (showAll ? unlockStakeLimitMap.length : defaultNumShown)
+          "
+          class="display--flex flex--column padding-top--small justify--between"
+        >
+          <app-transaction-spending-limit-stake
+            [stakeLimitMapItem]="unlockStakeLimitMapItem"
+            [appUser]="
+              userMap[unlockStakeLimitMapItem.ValidatorPublicKeyBase58Check]
+            "
+            [operationName]="'Unlock Stake'"
+          ></app-transaction-spending-limit-stake>
+        </div>
+      </ng-container>
+      <ng-container
+        *ngIf="sectionTitle === TransactionSpendingLimitComponent.LockupSection"
+      >
+        <div class="display--flex justify--between items--center">
+          <div class="text--text-lightest">Profile</div>
+          <div class="text--text-lightest">Operation</div>
+          <div class="text--text-lightest">Txn Limit</div>
+        </div>
+        <div
+          *ngFor="let lockupLimitItem of anyLockupLimitItems"
+          class="display--flex flex--column padding-top--small justify--between"
+        >
+          <app-transaction-spending-limit-lockup
+            [lockupLimitMapItem]="lockupLimitItem"
+          ></app-transaction-spending-limit-lockup>
+        </div>
+        <div
+          *ngFor="
+            let lockupLimitMapItem of lockupLimitMap
+              | slice : 0 : (showAll ? lockupLimitMap.length : defaultNumShown)
+          "
+          class="display--flex flex--column padding-top--small justify--between"
+        >
+          <app-transaction-spending-limit-lockup
+            [lockupLimitMapItem]="lockupLimitMapItem"
+            [appUser]="userMap[lockupLimitMapItem.ProfilePublicKeyBase58Check]"
+          ></app-transaction-spending-limit-lockup>
+        </div>
+      </ng-container>
     </div>
   </div>