Skip to content

fix: chain group picker #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
petar-omni merged 1 commit into from
Oct 13, 2025
Merged

fix: chain group picker #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/rainbowkit/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@stakekit/rainbowkit",
"version": "2.2.7",
"version": "2.2.9",
"description": "The best way to connect a wallet",
"files": ["dist", "styles.css", "wallets"],
"type": "module",
Expand Down
7 changes: 6 additions & 1 deletion packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {

const [selectedChainGroupId, setSelectedChainGroupId] = useState<
ChainGroup['id'] | undefined
>(Object.values(chainGroups).length > 1 ? undefined : 'ethereum');
>(Object.values(chainGroups).length > 1 ? undefined : 'evm');

const groupedByChainGroupWallets = groupBy(
wallets,
Expand Down Expand Up @@ -230,6 +230,11 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
} else if (!isBack && newWalletStep === WalletStep.Connect) {
setInitialWalletStep(WalletStep.Connect);
}

if (newWalletStep === WalletStep.SelectChainGroup && selectedChainGroupId) {
setSelectedChainGroupId(undefined);
}

setWalletStep(newWalletStep);
};

Expand Down
26 changes: 22 additions & 4 deletions packages/rainbowkit/src/components/ConnectOptions/MobileOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ export function MobileOptions({ onClose }: { onClose: () => void }) {

const [selectedChainGroupId, setSelectedChainGroupId] = useState<
ChainGroup['id'] | undefined
>(Object.values(chainGroups).length > 1 ? undefined : 'ethereum');
>(Object.values(chainGroups).length > 1 ? undefined : 'evm');

const groupedByChainGroupWallets = groupBy(
wallets,
Expand All @@ -248,13 +248,31 @@ export function MobileOptions({ onClose }: { onClose: () => void }) {
: MobileWalletStep.Connect,
);

const changeWalletStep = (newWalletStep: MobileWalletStep) => {
if (
newWalletStep === MobileWalletStep.SelectChainGroup &&
selectedChainGroupId
) {
setSelectedChainGroupId(undefined);
}

setWalletStep(newWalletStep);
};

if (
walletStep === MobileWalletStep.SelectChainGroup &&
selectedChainGroupId
) {
setSelectedChainGroupId(undefined);
}
Comment on lines +262 to +267
Copy link

Copilot AI Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This state update in the component body will cause an infinite re-render loop. The setSelectedChainGroupId(undefined) call will trigger a re-render, which will execute this condition again. Move this logic inside a useEffect hook with appropriate dependencies.

Suggested change
if (
walletStep === MobileWalletStep.SelectChainGroup &&
selectedChainGroupId
) {
setSelectedChainGroupId(undefined);
}
useEffect(() => {
if (
walletStep === MobileWalletStep.SelectChainGroup &&
selectedChainGroupId
) {
setSelectedChainGroupId(undefined);
}
}, [walletStep, selectedChainGroupId]);

Copilot uses AI. Check for mistakes.

const { i18n } = useContext(I18nContext);

const ios = isIOS();

const onChainGroupSelect = (chainGroupId: string) => {
setSelectedChainGroupId(chainGroupId);
setWalletStep(MobileWalletStep.Connect);
changeWalletStep(MobileWalletStep.Connect);
};

switch (walletStep) {
Expand Down Expand Up @@ -343,7 +361,7 @@ export function MobileOptions({ onClose }: { onClose: () => void }) {
<Box display="flex" gap="14" justifyContent="center">
<ActionButton
label={i18n.t('intro.get.label')}
onClick={() => setWalletStep(MobileWalletStep.Get)}
onClick={() => changeWalletStep(MobileWalletStep.Get)}
size="large"
type="secondary"
/>
Expand Down Expand Up @@ -518,7 +536,7 @@ export function MobileOptions({ onClose }: { onClose: () => void }) {
display="flex"
marginLeft="4"
marginTop="20"
onClick={() => setWalletStep(headerBackButtonLink!)}
onClick={() => changeWalletStep(headerBackButtonLink!)}
padding="16"
style={{ height: 17, willChange: 'transform' }}
transition="default"
Expand Down
6 changes: 3 additions & 3 deletions packages/rainbowkit/src/utils/chain-groups.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ChainGroup } from '../wallets/Wallet';

export const ethereumChainGroup: ChainGroup = {
id: 'ethereum',
title: 'Ethereum',
export const evmChainGroup: ChainGroup = {
id: 'evm',
title: 'EVM',
iconUrl: 'https://assets.stakek.it/networks/ethereum.svg',
};
2 changes: 1 addition & 1 deletion packages/rainbowkit/src/wallets/Wallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export type RainbowKitDetails = Omit<Wallet, 'createConnector' | 'hidden'> & {
};

export interface ChainGroup {
id: 'ethereum' | (string & {});
id: 'evm' | (string & {});
title: string;
iconUrl: string;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/ZilPayWallet/zilPayWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import {
getInjectedConnector,
hasInjectedProvider,
Expand All @@ -21,7 +21,7 @@ export const zilPayWallet = ({
rdns: 'io.zilpay',
iconUrl: async () => (await import('./zilPayWallet.svg')).default,
iconBackground: '#ffffff',
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android: 'https://play.google.com/store/apps/details?id=com.zilpaymobile',
ios: 'https://apps.apple.com/ru/app/zilpay/id1547105860',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/argentWallet/argentWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import { isAndroid } from '../../../utils/isMobile';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import { getWalletConnectConnector } from '../../getWalletConnectConnector';
Expand Down Expand Up @@ -27,7 +27,7 @@ export const argentWallet = ({
: `argent://app/wc?uri=${encodeURIComponent(uri)}`;
},
},
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
qrCode: {
getUri: (uri: string) => uri,
instructions: {
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/backpackWallet/backpackWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import {
getInjectedConnector,
hasInjectedProvider,
Expand All @@ -13,7 +13,7 @@ export const backpackWallet = (): Wallet => {
iconUrl: async () => (await import('./backpackWallet.svg')).default,
iconBackground: '#0C0D10',
installed: hasInjectedProvider({ namespace: 'backpack.ethereum' }),
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android:
'https://play.google.com/store/apps/details?id=app.backpack.mobile',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/berasigWallet/berasigWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import {
getInjectedConnector,
Expand All @@ -24,7 +24,7 @@ export const berasigWallet = ({
iconUrl: async () => (await import('./berasigWallet.svg')).default,
iconBackground: '#ffffff',
installed: isBerasigWalletInjected,
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android: 'https://play.google.com/store/apps/details?id=io.berasig.ios',
ios: 'https://apps.apple.com/us/app/berasig-wallet-on-berachain/id6502052535',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/bestWallet/bestWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { Wallet } from '../../Wallet';
import { getWalletConnectConnector } from '../../getWalletConnectConnector';
import type { DefaultWalletOptions } from './../../Wallet';
Expand All @@ -13,7 +13,7 @@ export const bestWallet = ({
name: 'Best Wallet',
iconUrl: async () => (await import('./bestWallet.svg')).default,
iconBackground: '#5961FF',
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android: 'https://best.sng.link/Dnio2/rto7?_smtype=3',
ios: 'https://best.sng.link/Dnio2/rto7?_smtype=3',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/bifrostWallet/bifrostWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import { isAndroid } from '../../../utils/isMobile';
import type { Wallet } from '../../Wallet';
import {
Expand Down Expand Up @@ -31,7 +31,7 @@ export const bifrostWallet = ({
iconUrl: async () => (await import('./bifrostWallet.svg')).default,
iconBackground: '#fff',
installed: !shouldUseWalletConnect ? isBifrostInjected : undefined,
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android:
'https://play.google.com/store/apps/details?id=com.bifrostwallet.app',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/binanceWallet/binanceWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import { isAndroid } from '../../../utils/isMobile';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import {
Expand All @@ -25,7 +25,7 @@ export const binanceWallet = ({
iconUrl: async () => (await import('./binanceWallet.svg')).default,
iconBackground: '#000000',
installed: !shouldUseWalletConnect ? isBinanceInjected : undefined,
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android: 'https://play.google.com/store/apps/details?id=com.binance.dev',
ios: 'https://apps.apple.com/us/app/id1436799971',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/bitgetWallet/bitgetWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import { isAndroid } from '../../../utils/isMobile';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import {
Expand Down Expand Up @@ -27,7 +27,7 @@ export const bitgetWallet = ({
iconAccent: '#f6851a',
iconBackground: '#fff',
installed: !shouldUseWalletConnect ? isBitKeepInjected : undefined,
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android: 'https://web3.bitget.com/en/wallet-download?type=0',
ios: 'https://apps.apple.com/app/bitkeep/id1395301115',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/bitskiWallet/bitskiWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { Wallet } from '../../Wallet';
import {
getInjectedConnector,
Expand All @@ -11,7 +11,7 @@ export const bitskiWallet = (): Wallet => ({
installed: hasInjectedProvider({ flag: 'isBitski' }),
iconUrl: async () => (await import('./bitskiWallet.svg')).default,
iconBackground: '#fff',
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
chrome:
'https://chrome.google.com/webstore/detail/bitski/feejiigddaafeojfddjjlmfkabimkell',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/bitverseWallet/bitverseWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import { getWalletConnectConnector } from '../../getWalletConnectConnector';

Expand All @@ -12,7 +12,7 @@ export const bitverseWallet = ({
name: 'Bitverse Wallet',
iconUrl: async () => (await import('./bitverseWallet.svg')).default,
iconBackground: '#171728',
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android:
'https://play.google.com/store/apps/details?id=com.bitverse.app&pli=1',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/bloomWallet/bloomWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import { getWalletConnectConnector } from '../../getWalletConnectConnector';

Expand All @@ -11,7 +11,7 @@ export const bloomWallet = ({
iconBackground: '#000',
iconAccent: '#000',
iconUrl: async () => (await import('./bloomWallet.svg')).default,
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
desktop: 'https://bloomwallet.io/',
},
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/braveWallet/braveWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { Wallet } from '../../Wallet';
import {
getInjectedConnector,
Expand All @@ -12,7 +12,7 @@ export const braveWallet = (): Wallet => ({
iconUrl: async () => (await import('./braveWallet.svg')).default,
iconBackground: '#fff',
installed: hasInjectedProvider({ flag: 'isBraveWallet' }),
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
// We're opting not to provide a download prompt if Brave isn't the current
// browser since it's unlikely to be a desired behavior for users. It's
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/bybitWallet/bybitWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import {
getInjectedConnector,
Expand Down Expand Up @@ -31,7 +31,7 @@ export const bybitWallet = ({
iconUrl: async () => (await import('./bybitWallet.svg')).default,
installed: !shouldUseWalletConnect ? isBybitInjected : undefined,
iconBackground: '#000000',
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
chrome:
'https://chromewebstore.google.com/detail/bybit-wallet/pdliaogehgdbhbnmkklieghmmjkpigpa',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/clvWallet/clvWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import {
getInjectedConnector,
Expand All @@ -22,7 +22,7 @@ export const clvWallet = ({
iconBackground: '#fff',
iconAccent: '#BDFDE2',
installed: isCLVInjected,
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
chrome:
'https://chrome.google.com/webstore/detail/clv-wallet/nhnkbkgjikgcigadomkphalanndcapjk',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/coin98Wallet/coin98Wallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import {
getInjectedConnector,
Expand Down Expand Up @@ -26,7 +26,7 @@ export const coin98Wallet = ({
iconAccent: '#CDA349',
iconBackground: '#fff',
rdns: 'coin98.com',
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android:
'https://play.google.com/store/apps/details?id=coin98.crypto.finance.media',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import { type CreateConnectorFn, createConnector } from 'wagmi';
import {
type CoinbaseWalletParameters,
Expand Down Expand Up @@ -38,7 +38,7 @@ export const coinbaseWallet: CoinbaseWallet = ({ appName, appIcon }) => {
// prompting the user to connect or create a wallet via passkey. This means if you either have
// or don't have the coinbase wallet browser extension installed it'll do some action anyways
installed: true,
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android: 'https://play.google.com/store/apps/details?id=org.toshi',
ios: 'https://apps.apple.com/us/app/coinbase-wallet-store-crypto/id1278383455',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/compassWallet/compassWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { Wallet } from '../../Wallet';
import {
getInjectedConnector,
Expand All @@ -15,7 +15,7 @@ export const compassWallet = (): Wallet => {
rdns: 'io.leapwallet.CompassWallet',
iconUrl: async () => (await import('./compassWallet.svg')).default,
iconBackground: '#fff',
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
chrome:
'https://chromewebstore.google.com/detail/compass-wallet-for-sei/anokgmphncpekkhclmingpimjmcooifb',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/coreWallet/coreWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import type { DefaultWalletOptions, Wallet } from '../../Wallet';
import {
getInjectedConnector,
Expand All @@ -24,7 +24,7 @@ export const coreWallet = ({
iconUrl: async () => (await import('./coreWallet.svg')).default,
iconBackground: '#1A1A1C',
installed: !shouldUseWalletConnect ? isCoreInjected : undefined,
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
android: 'https://play.google.com/store/apps/details?id=com.avaxwallet',
ios: 'https://apps.apple.com/us/app/core-wallet/id6443685999',
Expand Down
4 changes: 2 additions & 2 deletions packages/rainbowkit/src/wallets/walletConnectors/dawnWallet/dawnWallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ethereumChainGroup } from '../../../utils/chain-groups';
import { evmChainGroup } from '../../../utils/chain-groups';
import { isIOS } from '../../../utils/isMobile';
import type { Wallet } from '../../Wallet';
import {
Expand All @@ -13,7 +13,7 @@ export const dawnWallet = (): Wallet => ({
iconBackground: '#000000',
installed: hasInjectedProvider({ flag: 'isDawn' }),
hidden: () => !isIOS(),
chainGroup: ethereumChainGroup,
chainGroup: evmChainGroup,
downloadUrls: {
ios: 'https://apps.apple.com/us/app/dawn-ethereum-wallet/id1673143782',
mobile: 'https://dawnwallet.xyz',
Expand Down
Loading