merge #674

projects/portal/src/app/models/yield-aggregators/yield-aggregator.service.ts

@@ -180,6 +180,28 @@ export class YieldAggregatorService {
       });
   }
 
+  async getAllOsmoPool(): Promise<OsmosisPools> {
+    const url = 'https://api-osmosis.imperator.co/apr/v2/all';
+    return this.http
+      .get(url)
+      .toPromise()
+      .then((res: any) => {
+        const pools = res as OsmosisPools;
+        return pools;
+      });
+  }
+
+  async getOsmoPool(poolId: string): Promise<OsmosisPools> {
+    const url = 'https://api-osmosis.imperator.co/apr/v2/' + poolId;
+    return this.http
+      .get(url)
+      .toPromise()
+      .then((res: any) => {
+        const pool = res as OsmosisPools;
+        return pool;
+      });
+  }
+
   async getStrategyAPR(strategyInfo?: YieldInfo): Promise<number> {
     if (!strategyInfo) {
       return 0;
@@ -192,7 +214,7 @@ export class YieldAggregatorService {
     return strategyInfo.minApy || 0;
   }
 
-  async calcVaultAPY(vault: Vault200Response, config?: Config): Promise<YieldInfo> {
+  calcVaultAPY(vault: Vault200Response, config: Config, osmoPools: OsmosisPools): YieldInfo {
     if (!vault.vault?.strategy_weights) {
       return {
         id: vault.vault?.id || '',
@@ -208,15 +230,30 @@ export class YieldAggregatorService {
     }
     let vaultAPY = 0;
     let vaultAPYCertainty = false;
+
     for (const strategyWeight of vault.vault.strategy_weights) {
       const strategyInfo = config?.strategiesInfo?.find(
         (strategyInfo) =>
           strategyInfo.id === strategyWeight.strategy_id &&
           strategyInfo.denom === vault.vault?.denom,
       );
-      const strategyAPY = await this.getStrategyAPR(strategyInfo);
-      vaultAPY += Number(strategyAPY) * Number(strategyWeight.weight);
+      if (!strategyInfo || !strategyInfo.poolInfo) {
+        continue;
+      }
+      const poolInfo = strategyInfo.poolInfo;
+      if (poolInfo.type === 'osmosis') {
+        const pool = osmoPools.find((pool) => pool.pool_id.toString() === poolInfo.poolId);
+        if (!pool) {
+          continue;
+        }
+        let totalApr = 0;
+        for (const apr of pool.apr_list) {
+          totalApr += apr.apr_superfluid;
+        }
+        vaultAPY += (Number(totalApr) / 100) * Number(strategyWeight.weight);
+      }
     }
+
     return {
       id: vault.vault?.id || '',
       denom: vault.vault?.denom || '',

projects/portal/src/app/pages/apps/app-yield-aggregator/app-yield-aggregator.component.html

@@ -1,3 +1,6 @@
-<view-app-yield-aggregator [apps]="apps$ | async" [navigations]="navigations$ | async"
+<view-app-yield-aggregator
+  [apps]="apps$ | async"
+  [navigations]="navigations$ | async"
+  [address]="address$ | async"
   ><router-outlet></router-outlet
 ></view-app-yield-aggregator>

projects/portal/src/app/pages/apps/app-yield-aggregator/app-yield-aggregator.component.ts

@@ -1,7 +1,9 @@
 import { AppNavigation, ConfigService } from '../../../models/config.service';
+import { StoredWallet } from '../../../models/wallets/wallet.model';
+import { WalletService } from '../../../models/wallets/wallet.service';
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-app-yield-aggregator',
@@ -11,8 +13,12 @@ import { map } from 'rxjs/operators';
 export class AppYieldAggregatorComponent implements OnInit {
   apps$: Observable<AppNavigation[] | undefined>;
   navigations$: Observable<{ name: string; link: string; icon: string }[] | undefined>;
+  address$: Observable<string>;
 
-  constructor(private readonly configS: ConfigService) {
+  constructor(
+    private readonly configS: ConfigService,
+    private readonly walletService: WalletService,
+  ) {
     const config$ = this.configS.config$;
     this.apps$ = config$.pipe(map((conf) => conf?.apps));
     this.navigations$ = config$.pipe(
@@ -49,6 +55,10 @@ export class AppYieldAggregatorComponent implements OnInit {
         return navigation;
       }),
     );
+    this.address$ = this.walletService.currentStoredWallet$.pipe(
+      filter((wallet): wallet is StoredWallet => wallet !== undefined && wallet !== null),
+      map((wallet) => wallet.address),
+    );
   }
 
   ngOnInit(): void {}

projects/portal/src/app/pages/yieldaggregator/strategies/strategies.component.ts

@@ -27,7 +27,7 @@ export class StrategiesComponent implements OnInit {
     private readonly bankQuery: BankQueryService,
     private readonly iyaQuery: YieldAggregatorQueryService,
   ) {
-    this.denom$ = this.route.params.pipe(map((params) => params.denom));
+    this.denom$ = this.route.params.pipe(map((params) => params.denom || 'all'));
     this.denomMetadataMap$ = this.bankQuery.getDenomMetadataMap$();
     this.symbolImageMap = this.bankQuery.getSymbolImageMap();
     const allStrategies$ = this.iyaQuery.listStrategies$();

projects/portal/src/app/pages/yieldaggregator/vaults/vault/vault.component.ts

@@ -19,7 +19,7 @@ import {
 import { YieldAggregatorQueryService } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.query.service';
 import { YieldAggregatorService } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.service';
 import { ExternalChain } from 'projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component';
-import { BehaviorSubject, combineLatest, Observable, of, timer } from 'rxjs';
+import { BehaviorSubject, combineLatest, from, Observable, of, timer } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
 import {
   EstimateMintAmount200Response,
@@ -152,8 +152,9 @@ export class VaultComponent implements OnInit {
         return this.iyaQuery.getEstimatedRedeemAmount$(id, (burn * 10 ** exponent).toString());
       }),
     );
-    this.vaultInfo$ = combineLatest([this.vault$, this.configService.config$]).pipe(
-      mergeMap(async ([vault, config]) => this.iyaService.calcVaultAPY(vault, config)),
+    const osmoPools$ = from(this.iyaService.getAllOsmoPool());
+    this.vaultInfo$ = combineLatest([this.vault$, this.configService.config$, osmoPools$]).pipe(
+      map(([vault, config, pools]) => this.iyaService.calcVaultAPY(vault, config!, pools)),
     );
     const balances$ = this.address$.pipe(mergeMap((addr) => this.bankQuery.getBalance$(addr)));
     this.vaultBalance$ = combineLatest([vaultId$, balances$]).pipe(

projects/portal/src/app/pages/yieldaggregator/vaults/vaults.component.ts

@@ -10,7 +10,7 @@ import { YieldAggregatorQueryService } from '../../../models/yield-aggregators/y
 import { YieldAggregatorService } from '../../../models/yield-aggregators/yield-aggregator.service';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, from, Observable } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
 import { VaultAll200ResponseVaultsInner } from 'ununifi-client/esm/openapi';
 
@@ -48,9 +48,10 @@ export class VaultsComponent implements OnInit {
     this.keyword$ = this.route.queryParams.pipe(map((params) => params.keyword));
     const denomMetadataMap$ = this.bankQuery.getDenomMetadataMap$();
     const symbolMetadataMap$ = this.bankQuery.getSymbolMetadataMap$();
-    const vaultYields$ = combineLatest([vaults$, config$]).pipe(
-      mergeMap(async ([vaults, config]) =>
-        Promise.all(vaults.map(async (vault) => this.iyaService.calcVaultAPY(vault, config))),
+    const osmoPools$ = from(this.iyaService.getAllOsmoPool());
+    const vaultYields$ = combineLatest([vaults$, config$, osmoPools$]).pipe(
+      map(([vaults, config, pools]) =>
+        vaults.map((vault) => this.iyaService.calcVaultAPY(vault, config!, pools)),
       ),
     );
     const vaultDeposits$ = combineLatest([vaults$, denomMetadataMap$, symbolMetadataMap$]).pipe(

projects/portal/src/app/pages/yieldaggregator/yield-aggregator.component.html

@@ -2,4 +2,5 @@
   [symbolMetadataMap]="symbolMetadataMap$ | async"
   [availableSymbols]="availableSymbols$ | async"
   [vaults]="vaults$ | async"
+  [strategies]="strategies$ | async"
 ></view-yield-aggregator>

projects/portal/src/app/pages/yieldaggregator/yield-aggregator.component.ts

@@ -4,7 +4,10 @@ import { Component, OnInit } from '@angular/core';
 import cosmosclient from '@cosmos-client/core';
 import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { VaultAll200ResponseVaultsInner } from 'ununifi-client/esm/openapi';
+import {
+  StrategyAll200ResponseStrategiesInner,
+  VaultAll200ResponseVaultsInner,
+} from 'ununifi-client/esm/openapi';
 
 @Component({
   selector: 'app-yield-aggregator',
@@ -17,6 +20,7 @@ export class YieldAggregatorComponent implements OnInit {
   }>;
   availableSymbols$: Observable<string[]>;
   vaults$: Observable<VaultAll200ResponseVaultsInner[]>;
+  strategies$: Observable<StrategyAll200ResponseStrategiesInner[]>;
 
   constructor(
     private readonly bankQuery: BankQueryService,
@@ -42,6 +46,7 @@ export class YieldAggregatorComponent implements OnInit {
       }),
     );
     this.vaults$ = this.iyaQuery.listVaults$();
+    this.strategies$ = this.iyaQuery.listStrategies$();
   }
 
   ngOnInit(): void {}

projects/portal/src/app/views/apps/app-yield-aggregator/app-yield-aggregator.component.html

@@ -51,7 +51,7 @@
           <li>
             <label class="flex gap-4" routerLink="/yield-aggregator/vaults">
               <span class="flex-none">
-                <span class="material-symbols-outlined">storage</span>
+                <span class="material-symbols-outlined">folder</span>
               </span>
               <span class="flex-1">Vaults</span>
             </label>
@@ -64,6 +64,22 @@
               <span class="flex-1">Strategies</span>
             </label>
           </li>
+          <li>
+            <label class="flex gap-4" routerLink="/yield-aggregator/vaults/deposit/{{ address }}">
+              <span class="flex-none">
+                <span class="material-symbols-outlined"> folder_open </span>
+              </span>
+              <span class="flex-1">Deposited Vaults</span>
+            </label>
+          </li>
+          <li>
+            <label class="flex gap-4" routerLink="/yield-aggregator/vaults/owner/{{ address }}">
+              <span class="flex-none">
+                <span class="material-symbols-outlined"> folder_shared </span>
+              </span>
+              <span class="flex-1">Own Vaults</span>
+            </label>
+          </li>
           <li>
             <label class="flex gap-4" routerLink="/yield-aggregator/vaults/create">
               <span class="flex-none">

projects/portal/src/app/views/apps/app-yield-aggregator/app-yield-aggregator.component.ts

@@ -11,6 +11,8 @@ export class AppYieldAggregatorComponent implements OnInit {
   navigations?: { name: string; link: string; icon: string }[] | null;
   @Input()
   apps?: AppNavigation[] | null;
+  @Input()
+  address?: string | null;
 
   constructor() {}
 

projects/portal/src/app/views/yieldaggregator/vaults/create/create.component.html

@@ -71,12 +71,13 @@ <h3 class="font-bold text-lg">What is Vault Name?</h3>
               </div>
             </label>
             <input
+              required
               type="text"
               #nameNgModelRef="ngModel"
               placeholder="Enter your vault name"
               class="input input-bordered w-full"
               [class]="{
-                'input-error': nameNgModelRef.errors && nameNgModelRef.touched
+                'input-error': nameNgModelRef.errors
               }"
               [(ngModel)]="name"
               name="name"
@@ -121,11 +122,12 @@ <h3 class="font-bold text-lg">What is Fee Collector?</h3>
               </div>
             </label>
             <input
+              required
               type="text"
               #collectorNgModelRef="ngModel"
               class="input input-bordered w-full"
               [class]="{
-                'input-error': collectorNgModelRef.errors && collectorNgModelRef.touched
+                'input-error': collectorNgModelRef.errors
               }"
               [(ngModel)]="address"
               name="collector"
@@ -273,7 +275,7 @@ <h3 class="font-bold text-lg">What is the strategies?</h3>
                   target="_blank"
                 >
                   {{ strategy.name }}
-                  <span class="material-symbols-outlined">info</span>
+                  <!-- <span class="material-symbols-outlined">info</span> -->
                 </a>
                 <div class="w-full sm:w-auto sm:flex-auto">
                   <div class="join w-full">

projects/portal/src/app/views/yieldaggregator/vaults/deposit/deposit.component.html

@@ -14,6 +14,9 @@ <h2 class="card-title">Deposited Vaults</h2>
         <div class="stats shadow">
           <div class="stat">
             <div class="stat-title">Total Deposited Amount</div>
+            <div class="stat-value" *ngIf="usdTotalAmount === null">
+              <div class="animate-pulse bg-slate-700 w-32 h-12 rounded-full"></div>
+            </div>
             <div class="stat-value">{{ usdTotalAmount | currency }}</div>
           </div>
         </div>

projects/portal/src/app/views/yieldaggregator/vaults/vaults.component.html

@@ -78,7 +78,7 @@ <h2 class="card-title">Available Vaults</h2>
             <!-- head -->
             <thead>
               <tr>
-                <th>
+                <!-- <th>
                   <button class="btn btn-ghost btn-xs flex-nowrap" (click)="onSort('id')">
                     <span>ID</span>
                     <span
@@ -88,7 +88,7 @@ <h2 class="card-title">Available Vaults</h2>
                       keyboard_arrow_down
                     </span>
                   </button>
-                </th>
+                </th> -->
                 <td>
                   <button class="btn btn-ghost btn-xs flex-nowrap" (click)="onSort('name')">
                     <span>Name</span>
@@ -113,7 +113,7 @@ <h2 class="card-title">Available Vaults</h2>
                     </span>
                   </button>
                 </td>
-                <td>
+                <!-- <td>
                   <button class="btn btn-ghost btn-xs flex-nowrap" (click)="onSort('commission')">
                     <span>Commission Rate</span>
                     <span
@@ -123,10 +123,10 @@ <h2 class="card-title">Available Vaults</h2>
                       keyboard_arrow_down
                     </span>
                   </button>
-                </td>
+                </td> -->
                 <td>
                   <button class="btn btn-ghost btn-xs flex-nowrap" (click)="onSort('deposit')">
-                    <span>Total Deposited (USD)</span>
+                    <span>TVL</span>
                     <span
                       class="material-symbols-outlined"
                       [class]="{ 'text-info': sortType === 'deposit' }"
@@ -140,10 +140,10 @@ <h2 class="card-title">Available Vaults</h2>
             <tbody>
               <ng-container *ngFor="let vault of vaults; let i = index">
                 <tr class="hover cursor-pointer" routerLink="{{ vault.vault?.id }}">
-                  <th>#{{ vault.vault?.id }}</th>
+                  <!-- <th>#{{ vault.vault?.id }}</th> -->
                   <div class="dropdown dropdown-hover items-center">
                     <label tabindex="0">
-                      <td style="max-width: 10rem" class="truncate">
+                      <td style="max-width: 15rem" class="truncate">
                         {{ vault.vault?.name }}
                       </td>
                     </label>
@@ -163,30 +163,44 @@ <h3 class="card-title truncate max-w-full">
                     {{ vault.vault?.description }}
                   </td>
                   <td>
-                    <div class="flex items-center space-x-3 gap-2" *ngIf="symbols">
-                      <ng-container *ngIf="symbols[i]?.img">
+                    <div class="flex items-center space-x-3 gap-2">
+                      <ng-container *ngIf="symbols && symbols[i]?.img">
                         <div class="avatar">
                           <div class="mask mask-circle w-6 h-6">
                             <img src="{{ symbols[i].img }}" alt="Asset Symbol" />
                           </div>
                         </div>
                       </ng-container>
-                      <ng-container *ngIf="!symbols[i]?.img">
+                      <ng-container *ngIf="!symbols || !symbols[i]?.img">
                         <span class="material-symbols-outlined">question_mark</span>
                       </ng-container>
-                      <span>
+                      <div
+                        class="animate-pulse bg-slate-700 w-24 h-6 rounded-full"
+                        *ngIf="symbols === null"
+                      ></div>
+                      <span *ngIf="symbols">
                         {{ symbols[i].display }}
                       </span>
                     </div>
                   </td>
                   <td>
+                    <div
+                      class="animate-pulse bg-slate-700 w-12 h-6 rounded-full"
+                      *ngIf="vaultsInfo === null"
+                    ></div>
                     <span>{{ vaultsInfo?.[i]?.minApy | percent : '1.0-2' }}</span>
                     <span *ngIf="vaultsInfo?.[i]?.minApy !== vaultsInfo?.[i]?.maxApy">
                       ~{{vaultsInfo?.[i]?.maxApy | percent : '1.0-2'}}
                     </span>
                   </td>
-                  <td>{{ vault.vault?.withdraw_commission_rate | percent : '1.0-2' }}</td>
-                  <td>{{ totalDeposited?.[i]?.usdAmount | currency }}</td>
+                  <!-- <td>{{ vault.vault?.withdraw_commission_rate | percent : '1.0-2' }}</td> -->
+                  <td>
+                    <div
+                      class="animate-pulse bg-slate-700 w-12 h-6 rounded-full"
+                      *ngIf="totalDeposited === null"
+                    ></div>
+                    {{ totalDeposited?.[i]?.usdAmount | currency }}
+                  </td>
                 </tr>
               </ng-container>
             </tbody>