Summary
I'd like to lazy load most of cosmos-kit and related wallets, and in order to do this, I can't use ChainProvider from @cosmos-kit/react and instead build my logic on top of jotai store.
But the built-in WalletModal and WalletListView hardcode their dependency on SelectedWalletRepoContext for reading and setting the selected wallet name. There is no way to override this behavior via props, which forces consumers to copy-paste the entire modal implementation just to customize how wallet selection state is managed.
Problem
WalletModal internally calls useSelectedWalletRepoContext() to get selectedWalletRepoName and selectWalletRepoName. This has two issues:
-
If a consumer uses a different state management solution (e.g., Jotai, Zustand, Redux) or replaces ChainProvider with a custom setup, they cannot reuse the built-in modal — the only option is to fork both WalletModal and WalletListView, changing ~2 lines in each.
-
The context is required — rendering WalletModal outside of SelectedWalletRepoProvider throws, even if the consumer wants to provide the selection behavior entirely via props.
Proposal
Accept optional props on WalletModal that override the context-based defaults, and only access the context when the props are not provided:
type WalletModalComponentProps = WalletModalProps & ThemeCustomizationProps & {
modalOptions?: ModalOptions;
includeAllWalletsOnMobile?: boolean;
// New optional props:
selectedWalletName?: string;
onSelectWallet?: (walletName: string) => void;
};Inside the component, access context conditionally:
const context = !selectedWalletName ? useSelectedWalletRepoContext() : null;
const selectedName = selectedWalletName ?? context?.selectedWalletRepoName;
const selectName = onSelectWallet ?? context?.selectWalletRepoName;
This keeps the current behavior as the default while allowing consumers to:
- Plug in custom state management without forking the modal
- Render
WalletModal outside of SelectedWalletRepoProvider when providing props directly
Summary
I'd like to lazy load most of cosmos-kit and related wallets, and in order to do this, I can't use
ChainProviderfrom@cosmos-kit/reactand instead build my logic on top of jotai store.But the built-in
WalletModalandWalletListViewhardcode their dependency onSelectedWalletRepoContextfor reading and setting the selected wallet name. There is no way to override this behavior via props, which forces consumers to copy-paste the entire modal implementation just to customize how wallet selection state is managed.Problem
WalletModalinternally callsuseSelectedWalletRepoContext()to getselectedWalletRepoNameandselectWalletRepoName. This has two issues:If a consumer uses a different state management solution (e.g., Jotai, Zustand, Redux) or replaces
ChainProviderwith a custom setup, they cannot reuse the built-in modal — the only option is to fork bothWalletModalandWalletListView, changing ~2 lines in each.The context is required — rendering
WalletModaloutside ofSelectedWalletRepoProviderthrows, even if the consumer wants to provide the selection behavior entirely via props.Proposal
Accept optional props on
WalletModalthat override the context-based defaults, and only access the context when the props are not provided:Inside the component, access context conditionally:
This keeps the current behavior as the default while allowing consumers to:
WalletModaloutside ofSelectedWalletRepoProviderwhen providing props directly