hyperweb-io / hyperweb-io/cosmos-kit

Allow customizing wallet selection behavior in WalletModal via props

Open
#599 1 comment 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.