diff --git a/packages/ui/src/app/utils/wallets.ts b/packages/ui/src/app/utils/wallets.ts index 42cf654d..c5d062e2 100644 --- a/packages/ui/src/app/utils/wallets.ts +++ b/packages/ui/src/app/utils/wallets.ts @@ -31,6 +31,20 @@ export function applyWalletsListConfiguration( ); } + if (configuration.customOrder?.length) { + const uniqueOrderedNames = [...new Set(configuration.customOrder)]; + + const customOrderedWallets = uniqueOrderedNames + .map(orderedName => walletsList.find(wallet => wallet.appName === orderedName)) + .filter((wallet): wallet is WalletInfo => wallet !== undefined); + + const remainingWallets = walletsList.filter( + wallet => !uniqueOrderedNames.includes(wallet.appName) + ); + + walletsList = [...customOrderedWallets, ...remainingWallets]; + } + return walletsList; } diff --git a/packages/ui/src/models/wallets-list-configuration.ts b/packages/ui/src/models/wallets-list-configuration.ts index 4d6d4e0b..bcda0257 100644 --- a/packages/ui/src/models/wallets-list-configuration.ts +++ b/packages/ui/src/models/wallets-list-configuration.ts @@ -8,4 +8,10 @@ export type WalletsListConfiguration = { * Allows to include extra wallets to the wallets list in the modal. */ includeWallets?: UIWallet[]; + + /** + * List of wallet IDs to be displayed first in the specified order. + * Other wallets will be shown below in their original order. + */ + customOrder?: string[]; };