hyperweb-io / hyperweb-io/cosmos-kit
Allow customizing wallet selection behavior in WalletModal via props
- Dominant language
- TypeScript
- Stars
- 201
- Forks
- 159
- PR merge metrics
- No merged PRs in 30d
Description
## 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:
1. 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.
2. 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:
```tsx
type WalletModalComponentProps = WalletModalProps & ThemeCustomizationProps & {
modalOptions?: ModalOptions;
includeAllWalletsOnMobile?: boolean;
// New optional props:
selectedWalletName?: string;
onSelectWallet?: (walletName: string) => void;
};
```
Inside the component, access context conditionally:
```tsx
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
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.