WalletList

This component displays a list of wallets.

Usage

import { WalletList } from "@starknet-io/get-starknet-modal"
 
function App() {
  return (
    <WalletList>
      {({ isSelected, select, type, isLastConnected, ...wallet }) => (
        <div>
          {wallet.name} - {wallet.type}
        </div>
      )}
    </WalletList>
  )
}

Arguments

• sortAlgorithm: "alpha-asc" | "alpha-desc" | "random" | "recommended" | (wallets: readonly MaybeWallet[], lastConnectedWalletId: string | null) => MaybeWallet[] - The sorting algorithm to use for the list of wallets. Defaults to "recommended". If a custom sort function is provided, it will be used instead of the built-in algorithms.

  Note: when using "random", the order is stable for 10 minutes to prevent user misclicks.

• children: ({ isLastConnected, isSelected, select, type } & MaybeWallet) => ReactNode - The callback to render each wallet's selection button.

  • isLastConnected: boolean - Whether the wallet is the last connected wallet.
  • isSelected: boolean - Whether the wallet is selected.
  • select: () => void - Callback to select the wallet.
  • type: string - The type of the wallet (e.g. "InjectedWallet").

Custom Sort Function

You can provide a custom sort function to implement your own wallet ordering logic:

import {
  WalletList,
  type CustomSortFunction,
} from "@starknet-io/get-starknet-modal"
 
const myCustomSort: CustomSortFunction = (wallets, lastConnectedWalletId) => {
  // Sort available wallets first, then by name
  return wallets.slice().sort((a, b) => {
    if (a.state !== b.state) {
      return a.state === "available" ? -1 : 1
    }
    return a.name.localeCompare(b.name)
  })
}
 
function App() {
  return (
    <WalletList customSortFunction={myCustomSort}>
      {({ isSelected, select, type, isLastConnected, ...wallet }) => (
        <div>
          {wallet.name} - {wallet.type}
        </div>
      )}
    </WalletList>
  )
}