New all chains

angular.json

@@ -198,7 +198,10 @@
             "karmaConfig": "src/karma.conf.js",
             "styles": ["src/styles.scss"],
             "scripts": [],
-            "assets": ["src/favicon.ico", "src/assets"]
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
           }
         },
         "lint": {

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Inject, isDevMode } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, Inject, isDevMode } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { CookieService } from 'ngx-cookie-service';
@@ -8,7 +8,7 @@
 import { QueryParamsService } from '@core/services/query-params/query-params.service';
 import { GoogleTagManagerService } from '@core/services/google-tag-manager/google-tag-manager.service';
 import { isSupportedLanguage } from '@shared/models/languages/supported-languages';
-import { catchError, first, map, switchMap } from 'rxjs/operators';
+import { catchError, first, map } from 'rxjs/operators';
 import { forkJoin, Observable, of } from 'rxjs';
 import { WINDOW } from '@ng-web-apis/common';
 import { RubicWindow } from '@shared/utils/rubic-window';
@@ -18,6 +18,7 @@
 import { TokensStoreService } from './core/services/tokens/tokens-store.service';
 import { BalanceLoadingStateService } from './core/services/tokens/balance-loading-state.service';
 import { AssetsSelectorStateService } from './features/trade/components/assets-selector/services/assets-selector-state/assets-selector-state.service';
+import { TradePageService } from './features/trade/services/trade-page/trade-page.service';
 
 @Component({
   selector: 'app-root',
@@ -43,7 +44,9 @@
     private readonly walletConnectorService: WalletConnectorService,
     private readonly tokensStoreService: TokensStoreService,
     private readonly balanceLoadingStateService: BalanceLoadingStateService,
-    private readonly assetsSelectorStateService: AssetsSelectorStateService
+    private readonly assetsSelectorStateService: AssetsSelectorStateService,
+    private readonly tradePageService: TradePageService,
+    private readonly cdr: ChangeDetectorRef
   ) {
     this.printTimestamp();
     this.setupLanguage();
@@ -58,16 +61,20 @@
   }
 
   private subscribeOnWalletChanges(): void {
-    this.walletConnectorService.addressChange$
-      .pipe(
-        switchMap(() => {
-          this.balanceLoadingStateService.resetBalanceCalculatingStatuses();
-          return this.tokensStoreService.startBalanceCalculating(
-            this.assetsSelectorStateService.assetType
-          );
-        })
-      )
-      .subscribe();
+    this.walletConnectorService.addressChange$.subscribe(() => {
+      this.balanceLoadingStateService.resetBalanceCalculatingStatuses();
+
+      // load allchains in background if token's selector closed if not loaded yet
+      if (
+        this.assetsSelectorStateService.assetType !== 'allChains' &&
+        this.tradePageService.formContent === 'form' &&
+        !this.balanceLoadingStateService.isBalanceCalculated('allChains')
+      ) {
+        this.tokensStoreService.startBalanceCalculating('allChains');
+      }
+
+      this.tokensStoreService.startBalanceCalculating(this.assetsSelectorStateService.assetType);
+    });
   }
 
   /**
@@ -130,7 +137,7 @@
    * Waits for all initializing observables to complete.
    */
   private initApp(): void {
     forkJoin([this.loadPlatformConfig(), this.initQueryParamsSubscription()]).subscribe(
       ([isBackendAvailable]) => {
         this.isBackendAvailable = isBackendAvailable;
         document.getElementById('loader')?.classList.add('disabled');

src/app/core/services/backend/tokens-api/tokens-api.service.ts

@@ -25,12 +25,15 @@ import { defaultTokens } from './models/default-tokens';
 import { blockchainsToFetch, blockchainsWithOnePage } from './constants/fetch-blockchains';
 import {
   BackendBlockchain,
+  BLOCKCHAIN_NAME,
   BlockchainName,
   FROM_BACKEND_BLOCKCHAINS,
   TO_BACKEND_BLOCKCHAINS
 } from 'rubic-sdk';
 import { ENVIRONMENT } from 'src/environments/environment';
 
+import { compareAddresses, compareTokens } from '@app/shared/utils/utils';
+
 /**
  * Perform backend requests and transforms to get valid tokens.
  */
@@ -292,9 +295,29 @@ export class TokensApiService {
   }
 
   public fetchTokensListForAllChains(): Observable<List<Token>> {
-    return this.httpService
-      .get<BackendTokenForAllChains[]>('v2/tokens/allchains')
-      .pipe(map(backendTokens => TokensApiService.prepareTokens(backendTokens)));
+    return forkJoin([
+      this.httpService
+        .get<TokensBackendResponse>('v2/tokens/top')
+        .pipe(map(backendTokens => TokensApiService.prepareTokens(backendTokens.results))),
+      this.httpService
+        .get<BackendTokenForAllChains[]>('v2/tokens/allchains')
+        .pipe(map(backendTokens => TokensApiService.prepareTokens(backendTokens)))
+    ]).pipe(
+      map(([topTokens, allChainsTokens]) => {
+        // filters unique tokens from v2/tokens/allchains and api/v2/tokens/?pageSize=5000
+        return topTokens.concat(allChainsTokens).reduce((acc, token) => {
+          // not show 2nd metis native token in selector
+          if (
+            token.blockchain === BLOCKCHAIN_NAME.METIS &&
+            compareAddresses(token.address, '0xdeaddeaddeaddeaddeaddeaddeaddeaddead0000')
+          ) {
+            return acc;
+          }
+          const repeated = acc.find(t => compareTokens(t, token));
+          return repeated ? acc : acc.push(token);
+        }, List() as List<Token>);
+      })
+    );
   }
 
   public getFakeTokens(): BackendToken[] {

src/app/core/services/http/http.service.ts

@@ -16,7 +16,7 @@ export class HttpService {
     const request$ = this.http.get<T>((path || SERVER_REST_URL) + (url || ''), {
       params: data || {}
     });
-
+    // @FIX set timeout to 5_000
     return path ? request$ : request$.pipe(timeout(5_000), retry(1));
   }
 

src/app/core/services/tokens/balance-loader.service.ts

@@ -3,12 +3,20 @@
 import { TokenAmount } from '@app/shared/models/tokens/token-amount';
 import BigNumber from 'bignumber.js';
 import { List } from 'immutable';
-import { BlockchainName, BlockchainsInfo, Injector, Web3Public, Web3Pure } from 'rubic-sdk';
+import {
+  BlockchainName,
+  BlockchainsInfo,
+  Injector,
+  waitFor,
+  Web3Public,
+  Web3Pure
+} from 'rubic-sdk';
 import { AuthService } from '../auth/auth.service';
 import { ChainsToLoadFirstly, isTopChain } from './constants/first-loaded-chains';
 import { BalanceLoadingStateService } from './balance-loading-state.service';
 import { AssetType } from '@app/features/trade/models/asset';
 import { getWeb3PublicSafe } from '@app/shared/utils/is-native-address-safe';
+import { Iterable } from './utils/iterable';
 
 type TokensListOfTopChainsWithOtherChains = {
   [key in BlockchainName]: Token[];
@@ -29,8 +37,12 @@
 
   public updateBalancesForAllChains(
     tokensList: List<TokenAmount | Token>,
-    onBalanceLoaded: (tokensWithBalances: List<TokenAmount>, patchAllChains: boolean) => void
+    onChainLoaded: (tokensWithBalances: List<TokenAmount>, patchAllChains: boolean) => void,
+    onFinish?: (allChainsTokensWithBalances: List<TokenAmount>) => void
   ): void {
+    //  can be empty when v2/tokens/allchains response lower then first startBalanceCalculating call in app.component.ts
+    if (!tokensList.size) return;
+
     const tokensByChain: TokensListOfTopChainsWithOtherChains = {
       TOP_CHAINS: {}
     } as TokensListOfTopChainsWithOtherChains;
@@ -51,6 +63,20 @@
 
     this.balanceLoadingStateService.setBalanceLoading('allChains', true);
 
+    const allTokensWithPositiveBalances = List([]).asMutable() as List<TokenAmount>;
+    const chainsCount = Object.keys(tokensByChain).length;
+    const iterator = new Iterable(chainsCount);
+
+    // make some when every chain from tokensByChain loaded tokens with balances
+    if (onFinish) {
+      (async () => {
+        while (!iterator.done && !!this.authService.userAddress) {
+          await waitFor(100);
+        }
+        onFinish(allTokensWithPositiveBalances);
+      })();
+    }
+
     for (const key in tokensByChain) {
       if (key === 'TOP_CHAINS') {
         const topChainsTokens = tokensByChain.TOP_CHAINS;
@@ -68,20 +94,32 @@
           }
         );
 
-        Promise.all(promises).then(balances => {
-          const flattenBalances = balances.flat();
-          const flattenTokens = Object.values(topChainsTokens).flat();
-          const tokensWithBalances = flattenTokens.map((token, idx) => ({
-            ...token,
-            amount: flattenBalances[idx]
-              ? Web3Pure.fromWei(flattenBalances[idx], token.decimals)
-              : new BigNumber(NaN)
-          })) as TokenAmount[];
-
-          onBalanceLoaded(List(tokensWithBalances), true);
-          this.balanceLoadingStateService.setBalanceCalculated('allChains', true);
-          this.balanceLoadingStateService.setBalanceLoading('allChains', false);
-        });
+        Promise.all(promises)
+          .then(balances => {
+            const flattenBalances = balances.flat();
+            const flattenTokens = Object.values(topChainsTokens).flat();
+            const tokensWithBalancesList = List(
+              flattenTokens.map((token, idx) => ({
+                ...token,
+                amount: flattenBalances[idx]
+                  ? Web3Pure.fromWei(flattenBalances[idx], token.decimals)
+                  : new BigNumber(NaN)
+              })) as TokenAmount[]
+            );
+
+            const tokensWithPositiveBalances = tokensWithBalancesList.filter(
+              t => !t.amount.isNaN() && t.amount.gt(0)
+            );
+            allTokensWithPositiveBalances.concat(tokensWithPositiveBalances);
+
+            if (balances.length) {
+              this.balanceLoadingStateService.setBalanceCalculated('allChains', true);
+              this.balanceLoadingStateService.setBalanceLoading('allChains', false);
+            }
+
+            onChainLoaded(tokensWithBalancesList, true);
+          })
+          .finally(() => iterator.next());
       } else {
         const chain = key as Exclude<keyof TokensListOfTopChainsWithOtherChains, 'TOP_CHAINS'>;
         const chainTokens = tokensByChain[chain];
@@ -96,31 +134,49 @@
               .catch(() => chainTokens.map(() => new BigNumber(NaN)))
           : Promise.resolve(chainTokens.map(() => new BigNumber(NaN)));
 
-        balancesPromise.then(balances => {
-          const tokensWithBalances = chainTokens.map((token, idx) => ({
-            ...token,
-            amount: balances[idx]
-              ? Web3Pure.fromWei(balances[idx], token.decimals)
-              : new BigNumber(NaN)
-          })) as TokenAmount[];
-
-          onBalanceLoaded(List(tokensWithBalances), true);
-        });
+        balancesPromise
+          .then(balances => {
+            const tokensWithBalancesList = List(
+              chainTokens.map((token, idx) => ({
+                ...token,
+                amount: balances[idx]
+                  ? Web3Pure.fromWei(balances[idx], token.decimals)
+                  : new BigNumber(NaN)
+              })) as TokenAmount[]
+            );
+
+            const tokensWithPositiveBalances = tokensWithBalancesList.filter(t => {
+              // not show 2nd metis native token in selector
+              // if (
+              //   t.blockchain === BLOCKCHAIN_NAME.METIS &&
+              //   compareAddresses(t.address, '0xdeaddeaddeaddeaddeaddeaddeaddeaddead0000')
+              // ) {
+              //   return false;
+              // }
+              if (t.amount.isNaN() || t.amount.lte(0)) return false;
+
+              return false;
+            });
+            allTokensWithPositiveBalances.concat(tokensWithPositiveBalances);
+
+            onChainLoaded(tokensWithBalancesList, true);
+          })
+          .finally(() => iterator.next());
       }
     }
   }
 
   public async updateBalancesForSpecificChain(
     tokensList: List<Token>,
     blockchain: AssetType,
-    onBalanceLoaded: (tokensWithBalances: List<TokenAmount>, patchAllChains: boolean) => void
+    onFinish: (tokensWithBalances: List<TokenAmount>, userAddress: string | undefined) => void
   ): Promise<void> {
     this.balanceLoadingStateService.setBalanceLoading(blockchain, true);
     const tokensWithBalances = await this.getTokensWithBalance(tokensList);
 
-    onBalanceLoaded(tokensWithBalances, false);
     this.balanceLoadingStateService.setBalanceCalculated(blockchain, true);
     this.balanceLoadingStateService.setBalanceLoading(blockchain, false);
+    onFinish(tokensWithBalances, this.authService.userAddress);
   }
 
   /**
@@ -168,7 +224,7 @@
 
       return List(allTokensWithAmountArray);
     } catch (err) {
       console.log('%cgetAllChainsTokenBalances_ERROR', 'color: red; font-size: 20px;', err);
       return List([]);
     }
   }

src/app/core/services/tokens/balance-loading-state.service.ts

@@ -49,4 +49,8 @@ export class BalanceLoadingStateService {
   public isBalanceLoading$(blockchain: AssetType): Observable<boolean> {
     return this._isBalanceLoading$[blockchain].asObservable();
   }
+
+  public isBalanceLoading(blockchain: AssetType): boolean {
+    return this._isBalanceLoading$[blockchain].value;
+  }
 }

src/app/core/services/tokens/tokens-network.service.ts

@@ -13,6 +13,7 @@ import { List } from 'immutable';
 import { Token } from '@shared/models/tokens/token';
 import { BalanceLoaderService } from './balance-loader.service';
 import { BalanceLoadingStateService } from './balance-loading-state.service';
+import { TokensUpdaterService } from './tokens-updater.service';
 
 @Injectable({
   providedIn: 'root'
@@ -50,7 +51,8 @@ export class TokensNetworkService {
     private readonly balanceLoaderService: BalanceLoaderService,
     private readonly balanceLoadingStateService: BalanceLoadingStateService,
     private readonly tokensApiService: TokensApiService,
-    private readonly authService: AuthService
+    private readonly authService: AuthService,
+    private readonly tokensUpdaterService: TokensUpdaterService
   ) {
     this.setupSubscriptions();
   }
@@ -63,7 +65,7 @@ export class TokensNetworkService {
         }),
         tap(backendTokens => {
           this.tokensStoreService.updateStorageTokens(backendTokens);
-          this.tokensStoreService.patchTokens(backendTokens, false);
+          this.tokensStoreService.patchTokens(backendTokens);
         }),
         switchMap(backendTokens => {
           const uniqueBlockchains = [...new Set(backendTokens.map(bT => bT.blockchain))];
@@ -142,7 +144,8 @@ export class TokensNetworkService {
         })
       )
       .subscribe((tokens: TokenAmount[]) => {
-        this.tokensStoreService.patchTokens(List(tokens), false);
+        this.tokensStoreService.patchTokens(List(tokens));
+        this.tokensUpdaterService.triggerUpdateTokens();
       });
   }
 }