[Issue-3920] Show well-known tokens on top

packages/extension-base/src/background/KoniTypes.ts

@@ -232,13 +232,13 @@
   externalUrl?: string;
   rarity?: string;
   description?: string;
   properties?: Record<any, any> | null;
 }
 
 interface NftItemExtraInfo {
   type?: _AssetType.ERC721 | _AssetType.PSP34 | RMRK_VER; // for sending
   rmrk_ver?: RMRK_VER;
   onChainOption?: any; // for sending PSP-34 tokens, should be done better
   assetHubType?: AssetHubNftType // for sending assetHub nft. There're 2 types nft
 }
 
@@ -543,7 +543,7 @@
   [ExtrinsicType.STAKING_COMPOUNDING]: RequestTuringStakeCompound,
   [ExtrinsicType.STAKING_CANCEL_COMPOUNDING]: RequestTuringCancelStakeCompound,
   [ExtrinsicType.STAKING_CANCEL_UNSTAKE]: RequestStakeCancelWithdrawal,
   [ExtrinsicType.STAKING_POOL_WITHDRAW]: any,
 
   // Yield
   [ExtrinsicType.JOIN_YIELD_POOL]: RequestYieldStepSubmit,
@@ -574,9 +574,9 @@
   [ExtrinsicType.CLAIM_BRIDGE]: RequestClaimBridge
 
   [ExtrinsicType.EVM_EXECUTE]: TransactionConfig,
   [ExtrinsicType.CROWDLOAN]: any,
   [ExtrinsicType.SWAP]: SwapTxData
   [ExtrinsicType.UNKNOWN]: any
 }
 
 export enum ExtrinsicStatus {
@@ -675,7 +675,7 @@
 //     : T extends ExtrinsicType.MINT_VDOT
 //       ? Pick<SubmitBifrostLiquidStaking, 'rewardTokenSlug' | 'estimatedAmountReceived'>
 //       : undefined;
 export interface TransactionHistoryItem<ET extends ExtrinsicType = ExtrinsicType.TRANSFER_BALANCE> {
   origin?: 'app' | 'migration' | 'subsquid' | 'subscan', // 'app' or history source
   callhash?: string,
   signature?: string,
@@ -700,7 +700,7 @@
   tip?: AmountData,
   fee?: AmountData,
   explorerUrl?: string,
   additionalInfo?: any,
   startBlock?: number,
   nonce?: number,
   addressPrefix?: number
@@ -931,12 +931,12 @@
   recipientAddress: string,
 
   nftItemName?: string, // Use for confirmation view only
   params: Record<string, any>,
   nftItem: NftItem
 }
 
 export interface EvmNftTransaction extends ValidateTransactionResponse {
   tx: Record<string, any> | null;
 }
 
 export interface ValidateNetworkResponse {
@@ -2294,6 +2294,11 @@
 
   /* Ledger */
   'pri(ledger.generic.allow)': [null, string[], string[]];
+  /* Ledger */
+
+  /* Popular tokens */
+  'pri(popular.tokens)': [null, Record<string, number>, Record<string, number>];
+  /* Popular tokens */
 }
 
 export interface ApplicationMetadataType {

packages/extension-base/src/koni/background/handlers/Extension.ts

@@ -3933,6 +3933,24 @@
 
   /* Ledger */
 
+  /* Popular tokens */
+
+  private subscribePopularTokens (id: string, port: chrome.runtime.Port): Record<string, number> {
+    const cb = createSubscription<'pri(popular.tokens)'>(id, port);
+
+    const subscription = this.#koniState.chainService.observablePopularTokens.popularTokens.subscribe(cb);
+
+    this.createUnsubscriptionHandle(id, subscription.unsubscribe);
+
+    port.onDisconnect.addListener((): void => {
+      this.cancelSubscription(id);
+    });
+
+    return this.#koniState.chainService.valuePopularTokens.popularTokens;
+  }
+
+  /* Popular tokens */
+
   // --------------------------------------------------------------
   // eslint-disable-next-line @typescript-eslint/require-await
   public async handle<TMessageType extends MessageTypes> (id: string, type: TMessageType, request: RequestTypes[TMessageType], port: chrome.runtime.Port): Promise<ResponseType<TMessageType>> {
@@ -4543,6 +4561,12 @@
       case 'pri(ledger.generic.allow)':
         return this.subscribeLedgerGenericAllowChains(id, port);
         /* Ledger */
+
+        /* Popular tokens */
+      case 'pri(popular.tokens)':
+        return this.subscribePopularTokens(id, port);
+        /* Popular tokens */
+
       // Default
       default:
         throw new Error(`Unable to handle message of type ${type}`);

packages/extension-base/src/services/chain-service/index.ts

@@ -92,6 +92,7 @@ export class ChainService {
   private assetLogoMapSubject = new BehaviorSubject<Record<string, string>>(AssetLogoMap);
   private chainLogoMapSubject = new BehaviorSubject<Record<string, string>>(ChainLogoMap);
   private ledgerGenericAllowChainsSubject = new BehaviorSubject<string[]>([]);
+  private popularTokensSubject = new BehaviorSubject<Record<string, number>>({});
 
   // Todo: Update to new store indexed DB
   private store: AssetSettingStore = new AssetSettingStore();
@@ -123,20 +124,28 @@ export class ChainService {
 
   public get value () {
     const ledgerGenericAllowChains = this.ledgerGenericAllowChainsSubject;
+    const popularTokens = this.popularTokensSubject;
 
     return {
       get ledgerGenericAllowChains () {
         return ledgerGenericAllowChains.value;
+      },
+      get popularTokens () {
+        return popularTokens.value;
       }
     };
   }
 
   public get observable () {
     const ledgerGenericAllowChains = this.ledgerGenericAllowChainsSubject;
+    const popularTokens = this.popularTokensSubject;
 
     return {
       get ledgerGenericAllowChains () {
         return ledgerGenericAllowChains.asObservable();
+      },
+      get popularTokens () {
+        return popularTokens.asObservable();
       }
     };
   }
@@ -767,6 +776,11 @@ export class ChainService {
     this.logger.log('Finished updating latest ledger generic allow chains');
   }
 
+  handleLatestPopularTokens (latestPopularTokens: Record<string, number>) {
+    this.popularTokensSubject.next(latestPopularTokens);
+    this.logger.log('Finished updating latest popular tokens');
+  }
+
   handleLatestData () {
     this.fetchLatestChainData().then((latestChainInfo) => {
       this.lockChainInfoMap = true; // do not need to check current lockChainInfoMap because all remains action is fast enough and don't affect this feature.
@@ -786,6 +800,12 @@ export class ChainService {
         this.handleLatestLedgerGenericAllowChains(latestledgerGenericAllowChains);
       })
       .catch(console.error);
+
+    this.fetchLatestPopularTokens()
+      .then((latestPopularTokens) => {
+        this.handleLatestPopularTokens(latestPopularTokens);
+      })
+      .catch(console.error);
   }
 
   private async initApis () {
@@ -1088,6 +1108,10 @@ export class ChainService {
     return await fetchStaticData<string[]>('chains/ledger-generic-allow-chains') || [];
   }
 
+  private async fetchLatestPopularTokens () {
+    return await fetchStaticData<Record<string, number>>('chain-assets/popular-tokens') || [];
+  }
+
   private async initChains () {
     const storedChainSettings = await this.dbService.getAllChainStore();
     const defaultChainInfoMap = filterChainInfoMap(ChainInfoMap, ignoredList);

packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx

@@ -17,7 +17,7 @@ import { UpperBlock } from '@subwallet/extension-koni-ui/Popup/Home/Tokens/Upper
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { AccountAddressItemType, ThemeProps, TransferParams } from '@subwallet/extension-koni-ui/types';
 import { TokenBalanceItemType } from '@subwallet/extension-koni-ui/types/balance';
-import { getTransactionFromAccountProxyValue, isAccountAll, sortTokenByValue } from '@subwallet/extension-koni-ui/utils';
+import { getTransactionFromAccountProxyValue, isAccountAll, sortToken } from '@subwallet/extension-koni-ui/utils';
 import { isTonAddress } from '@subwallet/keyring';
 import { Button, Icon, ModalContext, SwAlert } from '@subwallet/react-ui';
 import classNames from 'classnames';
@@ -47,6 +47,7 @@ const Component = (): React.ReactElement => {
     totalBalanceInfo }, tokenGroupStructure: { sortedTokenGroups } } = useContext(HomeContext);
   const notify = useNotification();
   const { onOpenReceive, receiveModalProps } = useCoreReceiveModalHelper();
+  const popularTokens = useSelector((state: RootState) => state.chainStore.popularTokens);
 
   const isZkModeSyncing = useSelector((state: RootState) => state.mantaPay.isSyncing);
   const zkModeSyncProgress = useSelector((state: RootState) => state.mantaPay.progress);
@@ -300,8 +301,8 @@ const Component = (): React.ReactElement => {
       }
     });
 
-    return result.sort(sortTokenByValue);
-  }, [sortedTokenGroups, tokenGroupBalanceMap]);
+    return sortToken(result, popularTokens);
+  }, [sortedTokenGroups, tokenGroupBalanceMap, popularTokens]);
 
   useEffect(() => {
     window.addEventListener('resize', handleResize);

packages/extension-koni-ui/src/contexts/DataContext.tsx

@@ -3,7 +3,7 @@
 
 import { ping } from '@subwallet/extension-koni-ui/messaging';
 import { persistor, store, StoreName } from '@subwallet/extension-koni-ui/stores';
-import { getMissionPoolData, subscribeAccountsData, subscribeAddressBook, subscribeAssetLogoMaps, subscribeAssetRegistry, subscribeAssetSettings, subscribeAuthorizeRequests, subscribeAuthUrls, subscribeBalance, subscribeBuyServices, subscribeBuyTokens, subscribeCampaignBannerData, subscribeCampaignConfirmationData, subscribeCampaignPopupData, subscribeCampaignPopupVisibility, subscribeChainInfoMap, subscribeChainLogoMaps, subscribeChainStakingMetadata, subscribeChainStateMap, subscribeChainStatusMap, subscribeConfirmationRequests, subscribeConfirmationRequestsTon, subscribeConnectWCRequests, subscribeCrowdloan, subscribeKeyringState, subscribeLedgerGenericAllowNetworks, subscribeMantaPayConfig, subscribeMantaPaySyncingState, subscribeMetadataRequests, subscribeMultiChainAssetMap, subscribeNftCollections, subscribeNftItems, subscribePrice, subscribeProcessingCampaign, subscribeRewardHistory, subscribeSigningRequests, subscribeStaking, subscribeStakingNominatorMetadata, subscribeStakingReward, subscribeSwapPairs, subscribeTransactionRequests, subscribeTxHistory, subscribeUiSettings, subscribeUnreadNotificationCount, subscribeWalletConnectSessions, subscribeWCNotSupportRequests, subscribeXcmRefMap, subscribeYieldMinAmountPercent, subscribeYieldPoolInfo, subscribeYieldPositionInfo, subscribeYieldReward } from '@subwallet/extension-koni-ui/stores/utils';
+import { getMissionPoolData, subscribeAccountsData, subscribeAddressBook, subscribeAssetLogoMaps, subscribeAssetRegistry, subscribeAssetSettings, subscribeAuthorizeRequests, subscribeAuthUrls, subscribeBalance, subscribeBuyServices, subscribeBuyTokens, subscribeCampaignBannerData, subscribeCampaignConfirmationData, subscribeCampaignPopupData, subscribeCampaignPopupVisibility, subscribeChainInfoMap, subscribeChainLogoMaps, subscribeChainStakingMetadata, subscribeChainStateMap, subscribeChainStatusMap, subscribeConfirmationRequests, subscribeConfirmationRequestsTon, subscribeConnectWCRequests, subscribeCrowdloan, subscribeKeyringState, subscribeLedgerGenericAllowNetworks, subscribeMantaPayConfig, subscribeMantaPaySyncingState, subscribeMetadataRequests, subscribeMultiChainAssetMap, subscribeNftCollections, subscribeNftItems, subscribePopularTokens, subscribePrice, subscribeProcessingCampaign, subscribeRewardHistory, subscribeSigningRequests, subscribeStaking, subscribeStakingNominatorMetadata, subscribeStakingReward, subscribeSwapPairs, subscribeTransactionRequests, subscribeTxHistory, subscribeUiSettings, subscribeUnreadNotificationCount, subscribeWalletConnectSessions, subscribeWCNotSupportRequests, subscribeXcmRefMap, subscribeYieldMinAmountPercent, subscribeYieldPoolInfo, subscribeYieldPositionInfo, subscribeYieldReward } from '@subwallet/extension-koni-ui/stores/utils';
 import Bowser from 'bowser';
 import React from 'react';
 import { Provider } from 'react-redux';
@@ -200,6 +200,7 @@ export const DataContextProvider = ({ children }: DataContextProviderProps) => {
   _DataContext.addHandler({ ...subscribeChainStatusMap, name: 'subscribeChainStatusMap', relatedStores: ['chainStore'], isStartImmediately: true });
   _DataContext.addHandler({ ...subscribeChainInfoMap, name: 'subscribeChainInfoMap', relatedStores: ['chainStore'], isStartImmediately: true });
   _DataContext.addHandler({ ...subscribeLedgerGenericAllowNetworks, name: 'subscribeLedgerGenericAllowNetworks', relatedStores: ['chainStore'], isStartImmediately: true });
+  _DataContext.addHandler({ ...subscribePopularTokens, name: 'subscribePopularTokens', relatedStores: ['chainStore'], isStartImmediately: true });
 
   _DataContext.addHandler({ ...subscribeAssetRegistry, name: 'subscribeAssetRegistry', relatedStores: ['assetRegistry'], isStartImmediately: true });
   _DataContext.addHandler({ ...subscribeMultiChainAssetMap, name: 'subscribeMultiChainAssetMap', relatedStores: ['assetRegistry'], isStartImmediately: true });

packages/extension-koni-ui/src/stores/feature/common/ChainStore.ts

@@ -11,6 +11,7 @@ const initialState: ChainStore = {
   chainStateMap: {},
   chainStatusMap: {},
   ledgerGenericAllowNetworks: [],
+  popularTokens: {},
   reduxStatus: ReduxStatus.INIT
 };
 
@@ -53,6 +54,15 @@ const chainStoreSlice = createSlice({
         ledgerGenericAllowNetworks: payload,
         reduxStatus: ReduxStatus.READY
       };
+    },
+    updatePopularTokens (state, action: PayloadAction<Record<string, number>>) {
+      const { payload } = action;
+
+      return {
+        ...state,
+        popularTokens: payload,
+        reduxStatus: ReduxStatus.READY
+      };
     }
   }
 });

packages/extension-koni-ui/src/stores/types.ts

@@ -126,6 +126,7 @@ export interface ChainStore extends BaseReduxStore {
   chainStateMap: Record<string, _ChainState>
   chainStatusMap: Record<string, _ChainApiStatus>
   ledgerGenericAllowNetworks: string[];
+  popularTokens: Record<string, number>;
 }
 
 export interface BalanceStore extends BaseReduxStore {

packages/extension-koni-ui/src/stores/utils/index.ts

@@ -508,3 +508,11 @@ export const updateUnreadNotificationCountMap = (data: Record<string, number>) =
 
 export const subscribeUnreadNotificationCount = lazySubscribeMessage('pri(inappNotification.subscribeUnreadNotificationCountMap)', null, updateUnreadNotificationCountMap, updateUnreadNotificationCountMap);
 /* Notification service */
+
+/* Popular tokens */
+export const updatePopularTokens = (data: Record<string, number>) => {
+  store.dispatch({ type: 'chainStore/updatePopularTokens', payload: data });
+};
+
+export const subscribePopularTokens = lazySubscribeMessage('pri(popular.tokens)', null, updatePopularTokens, updatePopularTokens);
+/* Popular tokens */

packages/extension-koni-ui/src/utils/sort/token.ts

@@ -12,3 +12,26 @@ export const sortTokenByValue = (a: TokenBalanceItemType, b: TokenBalanceItemTyp
     return b.total.value.minus(a.total.value).toNumber();
   }
 };
+
+export function sortToken (tokenGroupSlug: TokenBalanceItemType[], popularTokens: Record<string, number>) {
+  return tokenGroupSlug.sort((a, b) => {
+    const aIsPiorityToken = Object.keys(popularTokens).includes(a.slug);
+    const bIsPiorityToken = Object.keys(popularTokens).includes(b.slug);
+    const aPiority = popularTokens[a.slug];
+    const bPiority = popularTokens[b.slug];
+
+    if (aIsPiorityToken && !bIsPiorityToken) {
+      return -1;
+    } else if (!aIsPiorityToken && bIsPiorityToken) {
+      return 1;
+    } else if (!aIsPiorityToken && !bIsPiorityToken) {
+      return sortTokenByValue(a, b);
+    } else {
+      if (aPiority < bPiority) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
+  });
+}