Skip to content

[feature] Allow custom network ordering in network picker #5426

@PaulRBerg

Description

@PaulRBerg

What problem does this new feature solve?

When building multi-chain apps that support both EVM and Solana, there's no way to control the display order of networks in the network picker modal.

Currently, AppKit groups networks by chainNamespace internally:

  1. The ChainController.initialize() extracts unique namespaces from the networks array
  2. Networks are stored in a Map keyed by namespace
  3. getAllRequestedCaipNetworks() iterates the Map and pushes all networks of each namespace before moving to the next

This means even if you pass [Ethereum, Solana, Polygon, Optimism, ...] to createAppKit({ networks: [...] }), the picker will always display:

  1. ALL EVM networks (eip155 namespace)
  2. ALL Solana networks (solana namespace)

For our use case (Sablier), we want Solana to appear second in the list (right after Ethereum mainnet), not last after 20+ EVM networks. This is important for UX since Solana is a primary supported chain.

Describe the solution you'd like

Add a configuration option to control network display order in the picker, independent of namespace grouping. Something like:

createAppKit({
  networks: [...],
  networkOrder: 'preserve' | 'grouped', // default: 'grouped' for backwards compat
  // OR
  networkSortFn: (a, b) => number, // custom sort function
})

Alternatively, respect the array order passed to networks when rendering the picker, rather than grouping by namespace first.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions