feat: vault create display-symbol

projects/portal/src/app/models/cosmos/bank.query.service.ts

@@ -99,6 +99,36 @@ export class BankQueryService {
     );
   }
 
+  getSymbolDisplayBalanceMap$(
+    address: string,
+    denoms?: string[],
+  ): Observable<{
+    [symbol: string]: number;
+  }> {
+    return zip(this.getBalance$(address, denoms), this.getDenomMetadataMap$(denoms)).pipe(
+      mergeMap(async ([balance, metadataMap]) => {
+        const map: { [symbol: string]: number } = {};
+        await Promise.all(
+          balance.map(async (b) => {
+            if (b.denom && b.amount) {
+              const metadata = metadataMap[b.denom];
+              if (!metadata) {
+                return;
+              }
+              const denomExponent = getDenomExponent(b.denom);
+              const amount = new Decimal(b.amount);
+              map[metadata.display!] = Number(
+                amount.dividedBy(new Decimal(10 ** denomExponent)).toFixed(6),
+              );
+            }
+          }),
+        );
+
+        return map;
+      }),
+    );
+  }
+
   getSymbolImageMap(symbols?: string[]): {
     [symbol: string]: string;
   } {

projects/portal/src/app/pages/balance/balance.component.ts

@@ -68,7 +68,7 @@ export class BalanceComponent implements OnInit {
     );
     this.symbolImageMap = this.bankQuery.getSymbolImageMap();
     this.symbolBalancesMap$ = address$.pipe(
-      mergeMap((address) => this.bankQuery.getSymbolBalanceMap$(address!)),
+      mergeMap((address) => this.bankQuery.getSymbolDisplayBalanceMap$(address!)),
     );
     const denomMetadataMap$ = this.bankQuery.getDenomMetadataMap$();
     const rewards$ = cosmosWallet$.pipe(

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

@@ -20,7 +20,7 @@ import { StrategyAll200ResponseStrategiesInner } from 'ununifi-client/esm/openap
 export class CreateComponent implements OnInit {
   address$: Observable<string>;
   denom$: Observable<string>;
-  availableSymbols$: Observable<string[]>;
+  availableSymbols$: Observable<({ symbol: string; display: string } | undefined)[]>;
   selectedSymbol$: Observable<string | undefined>;
   strategies$: Observable<StrategyAll200ResponseStrategiesInner[]>;
   symbolBalancesMap$: Observable<{ [symbol: string]: number }>;
@@ -56,15 +56,19 @@ export class CreateComponent implements OnInit {
           .map((strategy) => {
             const denomMetadata = denomMetadataMap[strategy.denom || ''];
             if (denomMetadata) {
-              return denomMetadata.symbol;
+              return {
+                symbol: denomMetadata.symbol!,
+                display: denomMetadata.display!,
+              };
             } else {
               return undefined;
             }
           })
-          .filter((symbol): symbol is string => typeof symbol == 'string');
+          .filter((symbol) => symbol !== undefined);
         return [...new Set(symbols)];
       }),
     );
+    this.availableSymbols$.subscribe((symbols) => console.log(symbols));
 
     this.selectedSymbol$ = combineLatest([this.denom$, denomMetadataMap$]).pipe(
       map(([denom, denomMetadataMap]) => {

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

@@ -84,7 +84,7 @@ <h3 class="font-bold text-lg">What is Vault Name?</h3>
                 >
               </option>
               <ng-container *ngFor="let symbol of availableSymbols">
-                <option [value]="symbol">{{ symbol }}</option>
+                <option [value]="symbol?.symbol">{{ symbol?.display }}</option>
               </ng-container>
             </select>
           </div>

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

@@ -14,7 +14,7 @@ export class CreateComponent implements OnInit {
   @Input()
   denom?: string | null;
   @Input()
-  availableSymbols?: string[] | null;
+  availableSymbols?: ({ symbol: string; display: string } | undefined)[] | null;
   @Input()
   selectedSymbol?: string | null;
   @Input()