Merge pull request #683 from UnUniFi/develop

CSV download & faucet amount change
UnUniFi · Oct 19, 2023 · a62b388 · a62b388
2 parents 93c6796 + 89bac57
commit a62b388
Show file tree

Hide file tree

Showing 43 changed files with 299 additions and 1,076 deletions.
diff --git a/projects/explorer/src/app/pages/accounts/yieldaggregator/address/address.component.html b/projects/explorer/src/app/pages/accounts/yieldaggregator/address/address.component.html
@@ -3,4 +3,7 @@
   [depositMsgs]="depositMsgs$ | async"
   [withdrawMsgs]="withdrawMsgs$ | async"
   [tvl]="tvl$ | async"
+  (appDownloadDeposits)="downloadDepositsCSV($event)"
+  (appDownloadDepositMsgs)="downloadDepositHistoryCSV($event)"
+  (appDownloadWithdrawalMsgs)="downloadWithdrawHistoryCSV($event)"
 ></view-address>
diff --git a/projects/explorer/src/app/pages/accounts/yieldaggregator/address/address.component.ts b/projects/explorer/src/app/pages/accounts/yieldaggregator/address/address.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import cosmosclient from '@cosmos-client/core';
+import { ms } from 'date-fns/locale';
 import { BandProtocolService } from 'projects/portal/src/app/models/band-protocols/band-protocol.service';
 import { CosmosSDKService } from 'projects/portal/src/app/models/cosmos-sdk.service';
 import { BankQueryService } from 'projects/portal/src/app/models/cosmos/bank.query.service';
 import { YieldAggregatorQueryService } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.query.service';
+import { CSVCommonService } from 'projects/shared/src/lib/models/csv/csv-common.service';
 import { Observable, combineLatest, timer } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
 import ununificlient from 'ununifi-client';
@@ -45,6 +47,7 @@ export class AddressComponent implements OnInit {
     private readonly bankQuery: BankQueryService,
     private readonly iyaQuery: YieldAggregatorQueryService,
     private readonly bandProtocolService: BandProtocolService,
+    private readonly csvCommonService: CSVCommonService,
   ) {
     this.address$ = this.route.params.pipe(map((params) => params.address));
     const timer$ = timer(0, this.pollingInterval * 1000);
@@ -101,7 +104,6 @@ export class AddressComponent implements OnInit {
         return msgs;
       }),
     );
-    this.depositMsgs$.subscribe((msgs) => console.log(msgs[0].msg.amount));
     this.withdrawMsgs$ = combineLatest([txsResponse$, this.address$]).pipe(
       map(([txs, address]) => {
         const msgs: {
@@ -146,7 +148,11 @@ export class AddressComponent implements OnInit {
       mergeMap(async ([balances, denomMetadataMap]) => {
         const vaultBalances = balances
           ?.filter((balance) => balance.denom?.includes('yieldaggregator/vaults/'))
-          .reverse();
+          .sort(
+            (a, b) =>
+              Number(a.denom?.replace('yieldaggregator/vaults/', '')) -
+              Number(b.denom?.replace('yieldaggregator/vaults/', '')),
+          );
         const amounts = await Promise.all(
           vaultBalances?.map(async (balance) => {
             const amount = await this.iyaQuery.getEstimatedRedeemAmount(
@@ -172,4 +178,75 @@ export class AddressComponent implements OnInit {
   }
 
   ngOnInit(): void {}
+
+  downloadDepositsCSV(address: string) {
+    this.tvl$?.subscribe((tvl) => {
+      const data = tvl.vaultBalances?.map((vaultBalance, index) => {
+        return {
+          vault: vaultBalance.denom?.replace('yieldaggregator/vaults/', ''),
+          amount: vaultBalance.amount,
+          value: tvl.values[index],
+        };
+      });
+      if (!data) {
+        alert('No data');
+        return;
+      }
+      const csvString = this.csvCommonService.jsonToCsv(data, ',');
+      const now = new Date();
+      this.csvCommonService.downloadCsv(
+        csvString,
+        'UYA-Deposits-' + address + '-' + now.toISOString(),
+      );
+    });
+  }
+
+  downloadDepositHistoryCSV(address: string) {
+    this.depositMsgs$?.subscribe((msgs) => {
+      if (msgs.length === 0) {
+        alert('No deposit history data');
+        return;
+      }
+      const data = msgs.reverse().map((msg) => {
+        return {
+          height: msg.height,
+          timestamp: msg.timestamp,
+          txHash: msg.txHash,
+          vault: msg.msg.vault_id,
+          amount: msg.msg.amount?.amount,
+          denom: msg.msg.amount?.denom,
+        };
+      });
+      const csvString = this.csvCommonService.jsonToCsv(data, ',');
+      const now = new Date();
+      this.csvCommonService.downloadCsv(
+        csvString,
+        'UYA-MsgDepositToVault-' + address + '-' + now.toISOString(),
+      );
+    });
+  }
+
+  downloadWithdrawHistoryCSV(address: string) {
+    this.withdrawMsgs$?.subscribe((msgs) => {
+      if (msgs.length === 0) {
+        alert('No withdrawal history data');
+        return;
+      }
+      const data = msgs.reverse().map((msg) => {
+        return {
+          height: msg.height,
+          timestamp: msg.timestamp,
+          txHash: msg.txHash,
+          vault: msg.msg.vault_id,
+          amount: msg.msg.lp_token_amount,
+        };
+      });
+      const csvString = this.csvCommonService.jsonToCsv(data, ',');
+      const now = new Date();
+      this.csvCommonService.downloadCsv(
+        csvString,
+        'UYA-MsgWithdrawFromVault-' + address + '-' + now.toISOString(),
+      );
+    });
+  }
 }
diff --git a/projects/explorer/src/app/pages/accounts/yieldaggregator/yieldaggregator.component.html b/projects/explorer/src/app/pages/accounts/yieldaggregator/yieldaggregator.component.html
@@ -1,4 +1,5 @@
 <view-yieldaggregator
   [depositors]="depositors$ | async"
   [addressTVLs]="addressTVLs$ | async"
+  (appDownloadCSV)="downloadTVLsCSV()"
 ></view-yieldaggregator>
diff --git a/projects/explorer/src/app/pages/accounts/yieldaggregator/yieldaggregator.component.ts b/projects/explorer/src/app/pages/accounts/yieldaggregator/yieldaggregator.component.ts
@@ -4,6 +4,7 @@ import cosmosclient from '@cosmos-client/core';
 import { BandProtocolService } from 'projects/portal/src/app/models/band-protocols/band-protocol.service';
 import { BankQueryService } from 'projects/portal/src/app/models/cosmos/bank.query.service';
 import { YieldAggregatorQueryService } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.query.service';
+import { CSVCommonService } from 'projects/shared/src/lib/models/csv/csv-common.service';
 import { Observable, combineLatest, timer } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
 import ununificlient from 'ununifi-client';
@@ -36,6 +37,7 @@ export class YieldaggregatorComponent implements OnInit {
     private readonly bankQuery: BankQueryService,
     private readonly iyaQuery: YieldAggregatorQueryService,
     private readonly bandProtocolService: BandProtocolService,
+    private readonly csvCommonService: CSVCommonService,
   ) {
     const timer$ = timer(0, this.pollingInterval * 1000);
     const sdk$ = timer$.pipe(mergeMap((_) => this.cosmosSDK.sdk$));
@@ -154,8 +156,24 @@ export class YieldaggregatorComponent implements OnInit {
           }),
         ),
       ),
+      map((addressTVLs) => addressTVLs.sort((a, b) => b.tvl - a.tvl)),
     );
   }
 
   ngOnInit(): void {}
+
+  downloadTVLsCSV() {
+    this.addressTVLs$?.subscribe((addressTVLs) => {
+      const data = addressTVLs.map((addressTVL, index) => {
+        return {
+          rank: index + 1,
+          address: addressTVL.address,
+          tvl: addressTVL.tvl,
+        };
+      });
+      const csvString = this.csvCommonService.jsonToCsv(data, ',');
+      const now = new Date();
+      this.csvCommonService.downloadCsv(csvString, 'UYA-TVLs-' + now.toISOString());
+    });
+  }
 }
diff --git a/projects/explorer/src/app/views/accounts/yieldaggregator/address/address.component.html b/projects/explorer/src/app/views/accounts/yieldaggregator/address/address.component.html
@@ -57,6 +57,13 @@
           <span class="material-symbols-outlined">account_circle</span>
           <span class="hidden md:inline">More Info</span>
         </button>
+        <button
+          class="btn btn-outline btn-primary w-full gap-1 md:w-auto md:px-8"
+          (click)="downloadDeposits()"
+        >
+          <span class="material-symbols-outlined">download</span>
+          <span class="hidden md:inline">Download</span>
+        </button>
       </div>
     </div>
   </div>
@@ -99,6 +106,15 @@ <h3 class="card-title">Deposit History</h3>
           </ng-template>
         </ng-template>
       </div>
+      <div class="card-actions justify-end">
+        <button
+          class="btn btn-outline btn-primary w-full gap-1 md:w-auto md:px-8"
+          (click)="downloadDepositMsgs()"
+        >
+          <span class="material-symbols-outlined">download</span>
+          <span class="hidden md:inline">Download</span>
+        </button>
+      </div>
     </div>
   </div>
 
@@ -142,6 +158,15 @@ <h3 class="card-title">Withdrawal History</h3>
           </ng-template>
         </ng-template>
       </div>
+      <div class="card-actions justify-end">
+        <button
+          class="btn btn-outline btn-primary w-full gap-1 md:w-auto md:px-8"
+          (click)="downloadWithdrawalMsgs()"
+        >
+          <span class="material-symbols-outlined">download</span>
+          <span class="hidden md:inline">Download</span>
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/projects/explorer/src/app/views/accounts/yieldaggregator/address/address.component.ts b/projects/explorer/src/app/views/accounts/yieldaggregator/address/address.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import cosmosclient from '@cosmos-client/core';
 import ununificlient from 'ununifi-client';
 
@@ -34,8 +34,36 @@ export class AddressComponent implements OnInit {
     values: number[];
     tvl: number;
   } | null;
+  @Output()
+  appDownloadDeposits: EventEmitter<string> = new EventEmitter();
+  @Output()
+  appDownloadDepositMsgs: EventEmitter<string> = new EventEmitter();
+  @Output()
+  appDownloadWithdrawalMsgs: EventEmitter<string> = new EventEmitter();
 
   constructor() {}
 
   ngOnInit(): void {}
+
+  downloadDeposits() {
+    if (!this.address) {
+      alert('Invalid address');
+      return;
+    }
+    this.appDownloadDeposits.emit();
+  }
+  downloadDepositMsgs() {
+    if (!this.address) {
+      alert('Invalid address');
+      return;
+    }
+    this.appDownloadDepositMsgs.emit();
+  }
+  downloadWithdrawalMsgs() {
+    if (!this.address) {
+      alert('Invalid address');
+      return;
+    }
+    this.appDownloadWithdrawalMsgs.emit();
+  }
 }
diff --git a/projects/explorer/src/app/views/accounts/yieldaggregator/yieldaggregator.component.html b/projects/explorer/src/app/views/accounts/yieldaggregator/yieldaggregator.component.html
@@ -6,6 +6,7 @@
   </div>
   <div class="card bg-base-100 text-base-content shadow-xl mb-4">
     <div class="card-body">
+      <h3>Leader Board</h3>
       <div class="overflow-x-auto">
         <ng-container *ngIf="addressTVLs === null; then loading; else loaded"></ng-container>
         <ng-template #loading>
@@ -21,16 +22,18 @@
           <ng-template #filled>
             <table class="table w-full">
               <thead>
-                <th>Address</th>
+                <td>Rank</td>
+                <td>Address</td>
                 <td>Deposited Vaults</td>
                 <td>TVL</td>
               </thead>
               <tbody>
                 <tr
-                  *ngFor="let addressTVL of addressTVLs"
+                  *ngFor="let addressTVL of addressTVLs; let i = index"
                   class="hover cursor-pointer"
                   routerLink="{{ addressTVL.address }}"
                 >
+                  <td>#{{ i }}</td>
                   <th class="font-mono">
                     {{ addressTVL.address }}
                   </th>
@@ -50,6 +53,17 @@
           </tr>
         </ng-template>
       </div>
+      <div>
+        <div class="card-actions justify-end">
+          <button
+            class="btn btn-outline btn-primary w-full gap-1 md:w-auto md:px-8"
+            (click)="downloadCSV()"
+          >
+            <span class="material-symbols-outlined">download</span>
+            <span class="hidden md:inline">Download CSV</span>
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/projects/explorer/src/app/views/accounts/yieldaggregator/yieldaggregator.component.ts b/projects/explorer/src/app/views/accounts/yieldaggregator/yieldaggregator.component.ts
@@ -1,6 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import cosmosclient from '@cosmos-client/core';
-import ununificlient from 'ununifi-client';
 
 @Component({
   selector: 'view-yieldaggregator',
@@ -19,8 +18,14 @@ export class YieldaggregatorComponent implements OnInit {
         tvl: number;
       }[]
     | null;
+  @Output()
+  appDownloadCSV: EventEmitter<{}> = new EventEmitter();
 
   constructor() {}
 
   ngOnInit(): void {}
+
+  downloadCSV() {
+    this.appDownloadCSV.emit();
+  }
 }