[WIP] feat: New Select token Modal

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

@@ -1,3 +1,4 @@
+import { DenomOnChain } from '../../pages/yieldaggregator/vaults/vault/vault.component';
 import { Config, StrategyInfo } from '../config.service';
 import { getDenomExponent } from '../cosmos/bank.model';
 import { BankQueryService } from '../cosmos/bank.query.service';
@@ -259,4 +260,27 @@ export class YieldAggregatorService {
       poolInfos,
     };
   }
+
+  addOtherChainsTokens(denoms: DenomOnChain[], symbol: string): DenomOnChain[] {
+    if (symbol === 'ATOM') {
+      denoms.push({
+        denom: 'uatom',
+        symbol: 'ATOM',
+        chain: 'Cosmos',
+        chainImg:
+          'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/color/atom.svg',
+        ibc: true,
+      });
+    }
+    if (symbol === 'OSMO') {
+      denoms.push({
+        denom: 'uosmo',
+        symbol: 'OSMO',
+        chain: 'Osmosis',
+        chainImg: 'assets/osmosis-logo.svg',
+        ibc: true,
+      });
+    }
+    return denoms;
+  }
 }

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

@@ -27,6 +27,12 @@ import {
   Vault200Response,
 } from 'ununifi-client/esm/openapi';
 
+export type DenomOnChain = DenomInfos200ResponseInfoInner & {
+  chain: string;
+  chainImg: string;
+  ibc: boolean;
+};
+
 @Component({
   selector: 'app-vault',
   templateUrl: './vault.component.html',
@@ -36,7 +42,7 @@ export class VaultComponent implements OnInit {
   address$: Observable<string>;
   vault$: Observable<Vault200Response>;
   denom$: Observable<string | null | undefined>;
-  availableDenoms$: Observable<DenomInfos200ResponseInfoInner[]>;
+  availableDenoms$: Observable<DenomOnChain[]>;
   symbol$: Observable<string | undefined>;
   denomBalancesMap$: Observable<{ [symbol: string]: cosmosclient.proto.cosmos.base.v1beta1.ICoin }>;
   denomMetadataMap$: Observable<{
@@ -85,7 +91,17 @@ export class VaultComponent implements OnInit {
     );
     const denomInfos$ = this.iyaQuery.listDenomInfos$();
     this.availableDenoms$ = combineLatest([this.symbol$, denomInfos$]).pipe(
-      map(([symbol, infos]) => infos.filter((info) => info.symbol === symbol)),
+      map(([symbol, infos]) => {
+        const denoms = infos
+          .filter((info) => info.symbol === symbol)
+          .map((info) => ({
+            ...info,
+            chain: 'UnUniFi',
+            chainImg: 'assets/UnUniFi-logo.png',
+            ibc: false,
+          }));
+        return symbol ? this.iyaService.addOtherChainsTokens(denoms, symbol) : denoms;
+      }),
     );
 
     const timer$ = timer(0, 1000 * 60);

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

@@ -220,38 +220,7 @@ <h3 class="font-bold text-lg">What is the withdrawal reserve rate?</h3>
       </div>
       <div class="card-body" *ngIf="tab === 'mint'">
         <form #depositFormRef="ngForm" (submit)="onSubmitDeposit()">
-          <div class="form-control">
-            <label class="label">
-              <span class="label-text">Chain that you deposit from</span>
-              <span class="label-text-alt"></span>
-            </label>
-            <button type="button" class="btn btn-block" onclick="chain_select_modal.showModal()">
-              {{ selectedChain.display }}
-            </button>
-
-            <dialog id="chain_select_modal" class="modal">
-              <form method="dialog" class="modal-box">
-                <h3 class="font-bold text-lg">Chain that you deposit from</h3>
-
-                <div class="flex flex-row flex-wrap gap-2 mt-2">
-                  <ng-container *ngFor="let chain of chains">
-                    <button
-                      type="button"
-                      class="btn btn-outline"
-                      [disabled]="chain.disabled"
-                      (click)="onClickChain(chain.id)"
-                    >
-                      {{ chain.display }}
-                    </button>
-                  </ng-container>
-                </div>
-              </form>
-              <form method="dialog" class="modal-backdrop">
-                <button type="button" onclick="chain_select_modal.close()">close</button>
-              </form>
-            </dialog>
-          </div>
-          <div class="form-control" *ngIf="selectedChain.external">
+          <!-- <div class="form-control" *ngIf="selectedChain.external">
             <label class="label">
               <span class="label-text">{{ selectedChain.display }} Address</span>
             </label>
@@ -264,7 +233,7 @@ <h3 class="font-bold text-lg">Chain that you deposit from</h3>
                 value="{{ externalWalletAddress }}"
               />
             </label>
-          </div>
+          </div> -->
           <div class="form-control">
             <label class="label">
               <span class="label-text">Enter amount</span>
@@ -292,7 +261,69 @@ <h3 class="font-bold text-lg">Chain that you deposit from</h3>
                 name="mintAmount"
                 (input)="onDepositAmountChange()"
               />
-              <select
+
+              <button type="button" class="btn w-1/4" onclick="token_select_modal.showModal()">
+                <div *ngIf="selectedDenom" class="grid grid-flow-col items-center gap-2 text-lg">
+                  <div class="avatar">
+                    <div class="w-8 rounded-full">
+                      <img src="{{ symbolImage }}" />
+                    </div>
+                    <div class="avatar -ml-2 mt-4" *ngIf="symbolImage !== selectedDenom.chainImg">
+                      <div class="w-4 rounded-full">
+                        <img src="{{ selectedDenom.chainImg }}" />
+                      </div>
+                    </div>
+                  </div>
+                  {{ selectedDenom.symbol }}
+                  <span
+                    class="badge badge-sm badge-primary"
+                    *ngIf="detectIBCDenom(selectedDenom.denom)"
+                  >
+                    IBC
+                  </span>
+                </div>
+                <div *ngIf="!selectedDenom">Select a token</div>
+                <div class="material-symbols-outlined">keyboard_arrow_down</div>
+              </button>
+
+              <dialog id="token_select_modal" class="modal">
+                <form method="dialog" class="modal-box">
+                  <h3 class="font-bold text-lg mb-4">Please select a token</h3>
+                  <ul class="menu menu-lg bg-base-200 w-full rounded-box">
+                    <ng-container *ngFor="let availableDenom of availableDenoms">
+                      <li>
+                        <a (click)="onClickChain(availableDenom)">
+                          <div class="avatar">
+                            <div class="w-8 rounded-full">
+                              <img src="{{ symbolImage }}" />
+                            </div>
+                            <div
+                              class="avatar -ml-2 mt-4"
+                              *ngIf="symbolImage !== availableDenom.chainImg"
+                            >
+                              <div class="w-4 rounded-full">
+                                <img src="{{ availableDenom.chainImg }}" />
+                              </div>
+                            </div>
+                          </div>
+                          {{ availableDenom.symbol }}
+                          <span class="badge badge-sm">{{ availableDenom.chain }}</span>
+                          <span
+                            class="badge badge-sm badge-primary"
+                            *ngIf="detectIBCDenom(availableDenom.denom)"
+                          >
+                            IBC
+                          </span>
+                        </a>
+                      </li>
+                    </ng-container>
+                  </ul>
+                </form>
+                <form method="dialog" class="modal-backdrop">
+                  <button type="button" onclick="token_select_modal.close()">close</button>
+                </form>
+              </dialog>
+              <!-- <select
                 class="select select-bordered text-center w-auto sm:w-64"
                 [class]="{
                   'select-error': !denom
@@ -308,9 +339,9 @@ <h3 class="font-bold text-lg">Chain that you deposit from</h3>
                     {{ denomInfo.denom | coinDenom | async }}
                   </option>
                 </ng-container>
-              </select>
+              </select> -->
             </label>
-            <span class="label" *ngIf="selectedChain.id === 'ununifi'">
+            <span class="label">
               <span class="label-text-alt">Available balance:</span>
               <label class="label-text-alt">
                 {{ denomBalancesMap?.[denom || '']?.amount | coinAmount: denom }}
@@ -319,7 +350,7 @@ <h3 class="font-bold text-lg">Chain that you deposit from</h3>
             </span>
           </div>
 
-          <div class="form-control" *ngIf="!selectedChain.cosmos">
+          <div class="form-control" *ngIf="selectedDenom?.chain !== 'UnUniFi'">
             <label class="label">
               <span class="label-text">Converted to</span>
             </label>

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

@@ -7,6 +7,7 @@ import {
   WithdrawFromVaultRequest,
   WithdrawFromVaultWithUnbondingRequest,
 } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.model';
+import { DenomOnChain } from 'projects/portal/src/app/pages/yieldaggregator/vaults/vault/vault.component';
 import { CoinAmountPipe } from 'projects/portal/src/app/pipes/coin-amount.pipe';
 import {
   DenomInfos200ResponseInfoInner,
@@ -43,7 +44,7 @@ export class VaultComponent implements OnInit, OnChanges {
   @Input()
   denom?: string | null;
   @Input()
-  availableDenoms?: DenomInfos200ResponseInfoInner[] | null;
+  availableDenoms?: DenomOnChain[] | null;
   @Input()
   symbolImage?: string | null;
   @Input()
@@ -89,13 +90,6 @@ export class VaultComponent implements OnInit, OnChanges {
   mintAmount?: number;
   burnAmount?: number;
   tab: 'mint' | 'burn' = 'mint';
-  selectedChain: ExternalChain = {
-    id: 'ununifi',
-    display: 'UnUniFi',
-    disabled: false,
-    external: false,
-    cosmos: true,
-  };
   withdrawOptions: WithdrawOption[] = [
     {
       id: 0,
@@ -113,71 +107,7 @@ export class VaultComponent implements OnInit, OnChanges {
     },
   ];
   selectedWithdrawOption?: WithdrawOption;
-  chains: ExternalChain[] = [
-    {
-      id: 'ununifi',
-      display: 'UnUniFi',
-      disabled: false,
-      external: false,
-      cosmos: true,
-    },
-    {
-      id: 'ethereum',
-      display: 'Ethereum',
-      disabled: true,
-      external: true,
-      cosmos: false,
-    },
-    {
-      id: 'avalanche',
-      display: 'Avalanche',
-      disabled: true,
-      external: true,
-      cosmos: false,
-    },
-    {
-      id: 'polygon',
-      display: 'Polygon',
-      disabled: true,
-      external: true,
-      cosmos: false,
-    },
-    {
-      id: 'arbitrum',
-      display: 'Arbitrum',
-      disabled: true,
-      external: true,
-      cosmos: false,
-    },
-    {
-      id: 'cosmoshub',
-      display: 'Cosmos Hub',
-      disabled: true,
-      external: true,
-      cosmos: true,
-    },
-    {
-      id: 'neutron',
-      display: 'Neutron',
-      disabled: true,
-      external: true,
-      cosmos: true,
-    },
-    {
-      id: 'osmosis',
-      display: 'Osmosis',
-      disabled: true,
-      external: true,
-      cosmos: true,
-    },
-    {
-      id: 'sei',
-      display: 'Sei',
-      disabled: true,
-      external: true,
-      cosmos: true,
-    },
-  ];
+  selectedDenom?: DenomOnChain;
 
   constructor(private coinAmountPipe: CoinAmountPipe) {
     this.changeDeposit = new EventEmitter();
@@ -191,12 +121,18 @@ export class VaultComponent implements OnInit, OnChanges {
 
   ngOnInit(): void {}
 
-  ngOnChanges(): void {}
+  ngOnChanges(): void {
+    if (!this.selectedDenom && this.availableDenoms) {
+      this.selectedDenom = this.availableDenoms[0];
+    }
+  }
 
-  onClickChain(id: string) {
-    this.selectedChain = this.chains.find((chain) => chain.id === id)!;
-    this.appClickChain.emit(this.selectedChain);
-    (global as any).chain_select_modal.close();
+  onClickChain(denom: DenomOnChain) {
+    this.selectedDenom = denom;
+    if (denom.chain === 'ethereum') {
+      this.appClickChain.emit();
+    }
+    (global as any).token_select_modal.close();
   }
 
   onClickWithdrawOption(option: WithdrawOption) {
@@ -284,4 +220,11 @@ export class VaultComponent implements OnInit, OnChanges {
       Number(vault.withdraw_reserve)
     ).toString();
   }
+
+  detectIBCDenom(denom?: string): boolean {
+    if (!denom) {
+      return false;
+    }
+    return denom.startsWith('ibc/');
+  }
 }