Simplify wallet ordering to respect order provided by application (#887)

* simplify wallet ordering to respect app order

* changeset

.changeset/pretty-actors-itch.md

@@ -0,0 +1,7 @@
+---
+'@solana/wallet-adapter-material-ui': patch
+'@solana/wallet-adapter-ant-design': patch
+'@solana/wallet-adapter-react-ui': patch
+---
+
+Simplify wallet ordering to respect order provided by application

packages/ui/ant-design/src/WalletModal.tsx

@@ -24,20 +24,17 @@ export const WalletModal: FC<WalletModalProps> = ({
 
     const [featured, more] = useMemo(() => {
         const installed: Wallet[] = [];
-        const loadable: Wallet[] = [];
-        const notDetected: Wallet[] = [];
+        const notInstalled: Wallet[] = [];
 
         for (const wallet of wallets) {
-            if (wallet.readyState === WalletReadyState.NotDetected) {
-                notDetected.push(wallet);
-            } else if (wallet.readyState === WalletReadyState.Loadable) {
-                loadable.push(wallet);
-            } else if (wallet.readyState === WalletReadyState.Installed) {
+            if (wallet.readyState === WalletReadyState.Installed) {
                 installed.push(wallet);
+            } else {
+                notInstalled.push(wallet);
             }
         }
 
-        const orderedWallets = [...installed, ...loadable, ...notDetected];
+        const orderedWallets = [...installed, ...notInstalled];
         return [orderedWallets.slice(0, featuredWallets), orderedWallets.slice(featuredWallets)];
     }, [wallets, featuredWallets]);
 

packages/ui/material-ui/src/WalletDialog.tsx

@@ -23,8 +23,8 @@ import { WalletReadyState } from '@solana/wallet-adapter-base';
 import { useWallet, type Wallet } from '@solana/wallet-adapter-react';
 import type { FC, ReactElement, SyntheticEvent } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
-import { useWalletDialog } from './useWalletDialog.js';
 import { WalletListItem } from './WalletListItem.js';
+import { useWalletDialog } from './useWalletDialog.js';
 
 const RootDialog = styled(Dialog)(({ theme }: { theme: Theme }) => ({
     '& .MuiDialog-paper': {
@@ -97,20 +97,17 @@ export const WalletDialog: FC<WalletDialogProps> = ({
 
     const [featured, more] = useMemo(() => {
         const installed: Wallet[] = [];
-        const loadable: Wallet[] = [];
-        const notDetected: Wallet[] = [];
+        const notInstalled: Wallet[] = [];
 
         for (const wallet of wallets) {
-            if (wallet.readyState === WalletReadyState.NotDetected) {
-                notDetected.push(wallet);
-            } else if (wallet.readyState === WalletReadyState.Loadable) {
-                loadable.push(wallet);
-            } else if (wallet.readyState === WalletReadyState.Installed) {
+            if (wallet.readyState === WalletReadyState.Installed) {
                 installed.push(wallet);
+            } else {
+                notInstalled.push(wallet);
             }
         }
 
-        const orderedWallets = [...installed, ...loadable, ...notDetected];
+        const orderedWallets = [...installed, ...notInstalled];
         return [orderedWallets.slice(0, featuredWallets), orderedWallets.slice(featuredWallets)];
     }, [wallets, featuredWallets]);
 

packages/ui/react-ui/src/WalletModal.tsx

@@ -6,9 +6,9 @@ import type { FC, MouseEvent } from 'react';
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Collapse } from './Collapse.js';
-import { useWalletModal } from './useWalletModal.js';
 import { WalletListItem } from './WalletListItem.js';
 import { WalletSVG } from './WalletSVG.js';
+import { useWalletModal } from './useWalletModal.js';
 
 export interface WalletModalProps {
     className?: string;
@@ -25,33 +25,17 @@ export const WalletModal: FC<WalletModalProps> = ({ className = '', container =
 
     const [listedWallets, collapsedWallets] = useMemo(() => {
         const installed: Wallet[] = [];
-        const loadable: Wallet[] = [];
-        const notDetected: Wallet[] = [];
+        const notInstalled: Wallet[] = [];
 
         for (const wallet of wallets) {
-            if (wallet.readyState === WalletReadyState.NotDetected) {
-                notDetected.push(wallet);
-            } else if (wallet.readyState === WalletReadyState.Loadable) {
-                loadable.push(wallet);
-            } else if (wallet.readyState === WalletReadyState.Installed) {
+            if (wallet.readyState === WalletReadyState.Installed) {
                 installed.push(wallet);
+            } else {
+                notInstalled.push(wallet);
             }
         }
 
-        let listed: Wallet[] = [];
-        let collapsed: Wallet[] = [];
-
-        if (installed.length) {
-            listed = installed;
-            collapsed = [...loadable, ...notDetected];
-        } else if (loadable.length) {
-            listed = loadable;
-            collapsed = notDetected;
-        } else {
-            collapsed = notDetected;
-        }
-
-        return [listed, collapsed];
+        return installed.length ? [installed, notInstalled] : [notInstalled, []];
     }, [wallets]);
 
     const hideModal = useCallback(() => {