Access group spending limits. (#222)

* associations transcoders, access levels, and approve flow descriptions

* fix transcoders for associations

* check in draft of associations in spending limits (#219)

* check in draft of associations in spending limits

* Associations spending limits. (#221)

* Associations spending limits.

* Use avatar directive.

* Dont show icon.

Co-authored-by: Matt Foley <[email protected]>

* Access group spending limits.

* More updates to support access group spending limits.

* Build out new modules.

* Fix wording in spending limit UI.

* Resolve conflicts moar.

* Fix case.

Co-authored-by: Lazy Nina <>
Co-authored-by: lazynina <[email protected]>
Co-authored-by: Lazy Nina <[email protected]>

Author: mattfoley8

src/app/app.module.ts

@@ -51,9 +51,9 @@ import { ArrowToggleComponent } from './arrow-toggle/arrow-toggle.component';
 import { TruncateAddressOrUsernamePipe } from 'src/lib/pipes/truncate-deso-address.pipe';
 import { LogInOptionsComponent } from './log-in-options/log-in-options.component';
 import { AccountSelectComponent } from './account-select/account-select.component';
-import {
-  TransactionSpendingLimitAssociationComponent
-} from './transaction-spending-limit/transaction-spending-limit-association/transaction-spending-limit-association.component';
+import { TransactionSpendingLimitAssociationComponent } from './transaction-spending-limit/transaction-spending-limit-association/transaction-spending-limit-association.component';
+import { TransactionSpendingLimitAccessGroupComponent } from './transaction-spending-limit/transaction-spending-limit-access-group/transaction-spending-limit-access-group.component';
+import { TransactionSpendingLimitAccessGroupMemberComponent } from './transaction-spending-limit/transaction-spending-limit-access-group-member/transaction-spending-limit-access-group-member.component';
 
 @NgModule({
   declarations: [
@@ -95,6 +95,8 @@ import {
     AccountSelectComponent,
     MessagingGroupComponent,
     TransactionSpendingLimitAssociationComponent,
+    TransactionSpendingLimitAccessGroupComponent,
+    TransactionSpendingLimitAccessGroupMemberComponent,
   ],
   imports: [
     BrowserModule,

src/app/backend-api.service.ts

@@ -142,7 +142,9 @@ export type LimitOperationString =
   | DAOCoinLimitOperationString
   | CreatorCoinLimitOperationString
   | NFTLimitOperationString
-  | AssociationOperationString;
+  | AssociationOperationString
+  | AccessGroupOperationString
+  | AccessGroupMemberOperationString;
 export type CreatorCoinOperationLimitMap =
   CoinOperationLimitMap<CreatorCoinLimitOperationString>;
 export type DAOCoinOperationLimitMap =
@@ -171,21 +173,20 @@ export type NFTOperationLimitMap = {
   };
 };
 
-
 export enum AssociationClass {
-  USER = 'user',
-  POST = 'post',
+  USER = 'User',
+  POST = 'Post',
 }
 
 export enum AssociationAppScopeType {
-  ANY = 'any',
-  SCOPED = 'scoped',
+  ANY = 'Any',
+  SCOPED = 'Scoped',
 }
 
 export enum AssociationOperationString {
-  ANY = 'any',
-  CREATE = 'create',
-  DELETE = 'delete',
+  ANY = 'Any',
+  CREATE = 'Create',
+  DELETE = 'Delete',
 }
 
 export type AssociationLimitMapItem = {
@@ -197,6 +198,40 @@ export type AssociationLimitMapItem = {
   OpCount: number;
 }
 
+export enum AccessGroupScopeType {
+  ANY = 'any',
+  SCOPED = 'scoped',
+}
+
+export enum AccessGroupOperationString {
+  ANY = 'Any',
+  CREATE = 'Create',
+  UPDATE = 'Update',
+}
+
+export type AccessGroupLimitMapItem = {
+  AccessGroupOwnerPublicKeyBase58Check: string;
+  ScopeType: AccessGroupScopeType;
+  AccessGroupKeyName: string;
+  OperationType: AccessGroupOperationString;
+  OpCount: number;
+}
+
+export enum AccessGroupMemberOperationString {
+  ANY = 'Any',
+  ADD = 'Add',
+  REMOVE = 'Remove',
+  UPDATE = 'Update',
+}
+
+export type AccessGroupMemberLimitMapItem = {
+  AccessGroupOwnerPublicKeyBase58Check: string;
+  ScopeType: AccessGroupScopeType;
+  AccessGroupKeyName: string;
+  OperationType: AccessGroupMemberOperationString;
+  OpCount: number;
+}
+
 export interface TransactionSpendingLimitResponse {
   GlobalDESOLimit: number;
   // TODO: make enum for transaction type string
@@ -206,6 +241,8 @@ export interface TransactionSpendingLimitResponse {
   NFTOperationLimitMap?: NFTOperationLimitMap;
   DAOCoinLimitOrderLimitMap?: DAOCoinLimitOrderLimitMap;
   AssociationLimitMap?: AssociationLimitMapItem[];
+  AccessGroupLimitMap?: AccessGroupLimitMapItem[];
+  AccessGroupMemberLimitMap?: AccessGroupMemberLimitMapItem[];
   IsUnlimited?: boolean;
   DerivedKeyMemo?: string;
 }

src/app/transaction-spending-limit/transaction-spending-limit-access-group-member/transaction-spending-limit-access-group-member.component.html

@@ -0,0 +1,10 @@
+<div class="d-flex flex-column border br-12px border-primary p-1">
+  <div class="d-flex justify-content-between align-items-center">
+    <div class="d-flex justify-content-start align-items-center py-10px col-12">
+      {{ getOperationString() }}{{ !isScoped() ? ' any of' : '' }}
+      {{ (appUser?.ProfileEntryResponse?.Username || accessGroupMemberLimitMapItem?.AccessGroupOwnerPublicKeyBase58Check | truncateAddressOrUsername)}}'s
+      access group{{ isScoped() ? ' "' + accessGroupMemberLimitMapItem?.AccessGroupKeyName + '"' : 's' }}
+      ({{ accessGroupMemberLimitMapItem?.OpCount }}x).
+    </div>
+  </div>
+</div>

src/app/transaction-spending-limit/transaction-spending-limit-access-group-member/transaction-spending-limit-access-group-member.component.scss

@@ -0,0 +1,48 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {GlobalVarsService} from 'src/app/global-vars.service';
+import {
+  AccessGroupMemberLimitMapItem,
+  AccessGroupMemberOperationString,
+  AccessGroupScopeType,
+  BackendAPIService,
+  User
+} from '../../backend-api.service';
+import {TransactionSpendingLimitComponent} from '../transaction-spending-limit.component';
+
+@Component({
+  selector: 'app-transaction-spending-limit-access-group-member',
+  templateUrl: './transaction-spending-limit-access-group-member.component.html',
+  styleUrls: ['./transaction-spending-limit-access-group-member.component.scss'],
+})
+export class TransactionSpendingLimitAccessGroupMemberComponent implements OnInit {
+  @Input() accessGroupMemberLimitMapItem: AccessGroupMemberLimitMapItem | undefined;
+  @Input() appUser: User | undefined;
+  TransactionSpendingLimitComponent = TransactionSpendingLimitComponent;
+
+  constructor(
+    private backendApi: BackendAPIService,
+    public globalVars: GlobalVarsService
+  ) {}
+
+  ngOnInit(): void {
+  }
+
+  isScoped(): boolean {
+    return this.accessGroupMemberLimitMapItem?.ScopeType === AccessGroupScopeType.SCOPED;
+  }
+
+  getOperationString(): string {
+    switch (this.accessGroupMemberLimitMapItem?.OperationType) {
+      case AccessGroupMemberOperationString.ANY:
+        return 'Add, remove, or update members from';
+      case AccessGroupMemberOperationString.ADD:
+        return 'Add members to';
+      case AccessGroupMemberOperationString.REMOVE:
+        return 'Remove members from';
+      case AccessGroupMemberOperationString.UPDATE:
+        return 'Update members from';
+      default:
+        return '';
+    }
+  }
+}

src/app/transaction-spending-limit/transaction-spending-limit-access-group-member/transaction-spending-limit-access-group-member.component.ts

@@ -0,0 +1,10 @@
+<div class="d-flex flex-column border br-12px border-primary p-1">
+  <div class="d-flex justify-content-between align-items-center">
+    <div class="d-flex justify-content-start align-items-center py-10px col-12">
+      {{ getOperationString() }}{{ !isScoped() ? ' any of' : '' }}
+      {{ (appUser?.ProfileEntryResponse?.Username || accessGroupLimitMapItem?.AccessGroupOwnerPublicKeyBase58Check | truncateAddressOrUsername)}}'s
+      access group{{ isScoped() ? ' "' + accessGroupLimitMapItem?.AccessGroupKeyName + '"' : 's' }}
+      ({{ accessGroupLimitMapItem?.OpCount }}x).
+    </div>
+  </div>
+</div>

src/app/transaction-spending-limit/transaction-spending-limit-access-group/transaction-spending-limit-access-group.component.html

@@ -0,0 +1,46 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {GlobalVarsService} from 'src/app/global-vars.service';
+import {
+  AccessGroupLimitMapItem,
+  AccessGroupOperationString,
+  AccessGroupScopeType,
+  BackendAPIService,
+  User
+} from '../../backend-api.service';
+import {TransactionSpendingLimitComponent} from '../transaction-spending-limit.component';
+
+@Component({
+  selector: 'app-transaction-spending-limit-access-group',
+  templateUrl: './transaction-spending-limit-access-group.component.html',
+  styleUrls: ['./transaction-spending-limit-access-group.component.scss'],
+})
+export class TransactionSpendingLimitAccessGroupComponent implements OnInit {
+  @Input() accessGroupLimitMapItem: AccessGroupLimitMapItem | undefined;
+  @Input() appUser: User | undefined;
+  TransactionSpendingLimitComponent = TransactionSpendingLimitComponent;
+
+  constructor(
+    private backendApi: BackendAPIService,
+    public globalVars: GlobalVarsService
+  ) {}
+
+  ngOnInit(): void {
+  }
+
+  isScoped(): boolean {
+    return this.accessGroupLimitMapItem?.ScopeType === AccessGroupScopeType.SCOPED;
+  }
+
+  getOperationString(): string {
+    switch (this.accessGroupLimitMapItem?.OperationType) {
+      case AccessGroupOperationString.ANY:
+        return 'Create or update';
+      case AccessGroupOperationString.CREATE:
+        return 'Create';
+      case AccessGroupOperationString.UPDATE:
+        return 'Update';
+      default:
+        return '';
+    }
+  }
+}

src/app/transaction-spending-limit/transaction-spending-limit-access-group/transaction-spending-limit-access-group.component.scss

@@ -175,6 +175,50 @@
           ></app-transaction-spending-limit-association>
         </div>
       </ng-container>
+      <ng-container
+        *ngIf="
+          sectionTitle === TransactionSpendingLimitComponent.AccessGroupSection
+        "
+      >
+        <div
+          *ngFor="
+            let accessGroupLimitMapItem of accessGroupLimitMap
+              | slice
+                : 0
+                : (showAll
+                    ? accessGroupLimitMap.length
+                    : defaultNumShown)
+          "
+          class="d-flex flex-column pb-15px"
+        >
+          <app-transaction-spending-limit-access-group
+            [accessGroupLimitMapItem]="accessGroupLimitMapItem"
+            [appUser]="userMap[accessGroupLimitMapItem.AccessGroupOwnerPublicKeyBase58Check]"
+          ></app-transaction-spending-limit-access-group>
+        </div>
+      </ng-container>
+      <ng-container
+        *ngIf="
+          sectionTitle === TransactionSpendingLimitComponent.AccessGroupMemberSection
+        "
+      >
+        <div
+          *ngFor="
+            let accessGroupMemberLimitMapItem of accessGroupMemberLimitMap
+              | slice
+                : 0
+                : (showAll
+                    ? accessGroupMemberLimitMap.length
+                    : defaultNumShown)
+          "
+          class="d-flex flex-column pb-15px"
+        >
+          <app-transaction-spending-limit-access-group-member
+            [accessGroupMemberLimitMapItem]="accessGroupMemberLimitMapItem"
+            [appUser]="userMap[accessGroupMemberLimitMapItem.AccessGroupOwnerPublicKeyBase58Check]"
+          ></app-transaction-spending-limit-access-group-member>
+        </div>
+      </ng-container>
     </div>
   </div>
 

src/app/transaction-spending-limit/transaction-spending-limit-access-group/transaction-spending-limit-access-group.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import {
+  AccessGroupLimitMapItem,
+  AccessGroupMemberLimitMapItem,
   AssociationLimitMapItem,
   CreatorCoinLimitOperationString,
   CreatorCoinOperationLimitMap,
@@ -27,7 +29,9 @@ export class TransactionSpendingLimitSectionComponent implements OnInit {
     | DAOCoinOperationLimitMap
     | NFTOperationLimitMap
     | DAOCoinLimitOrderLimitMap
-    | AssociationLimitMapItem[] = {};
+    | AssociationLimitMapItem[]
+    | AccessGroupLimitMapItem[]
+    | AccessGroupMemberLimitMapItem[] = {};
   @Input() sectionTitle: string = '';
 
   @Input() userMap: { [k: string]: User } = {};
@@ -47,6 +51,8 @@ export class TransactionSpendingLimitSectionComponent implements OnInit {
   daoCoinLimitOrderLimitMap: DAOCoinLimitOrderLimitMap = {};
   daoCoinLimitOrderLimitItems: DAOCoinLimitOrderLimitItem[] = [];
   associationLimitMap: AssociationLimitMapItem[] = [];
+  accessGroupLimitMap: AccessGroupLimitMapItem[] = [];
+  accessGroupMemberLimitMap: AccessGroupMemberLimitMapItem[] = [];
 
   constructor(public globalVars: GlobalVarsService) {}
 
@@ -96,6 +102,12 @@ export class TransactionSpendingLimitSectionComponent implements OnInit {
         break;
       case TransactionSpendingLimitComponent.AssociationSection:
         this.associationLimitMap = this.sectionMap as AssociationLimitMapItem[];
+        break;
+      case TransactionSpendingLimitComponent.AccessGroupSection:
+        this.accessGroupLimitMap = this.sectionMap as AccessGroupLimitMapItem[];
+        break;
+      case TransactionSpendingLimitComponent.AccessGroupMemberSection:
+        this.accessGroupMemberLimitMap = this.sectionMap as AccessGroupMemberLimitMapItem[];
     }
 
     this.showAll = this.getSectionMapLength() <= this.defaultNumShown;
@@ -115,6 +127,10 @@ export class TransactionSpendingLimitSectionComponent implements OnInit {
         return 'DAO coin limit order';
       case TransactionSpendingLimitComponent.AssociationSection:
         return 'Association';
+      case TransactionSpendingLimitComponent.AccessGroupSection:
+        return 'Access Group';
+      case TransactionSpendingLimitComponent.AccessGroupMemberSection:
+        return 'Access Group Member';
       default:
         return '';
     }
@@ -156,6 +172,10 @@ export class TransactionSpendingLimitSectionComponent implements OnInit {
         return this.daoCoinLimitOrderLimitItems.length;
       case TransactionSpendingLimitComponent.AssociationSection:
         return this.associationLimitMap.length;
+      case TransactionSpendingLimitComponent.AccessGroupSection:
+        return this.accessGroupLimitMap.length;
+      case TransactionSpendingLimitComponent.AccessGroupMemberSection:
+        return this.accessGroupMemberLimitMap.length;
       default:
         return this.globalVars.ObjectKeyLength(this.sectionMap);
     }