Skip to content

feat: chain groups #9

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 9, 2025
Merged

feat: chain groups #9

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.6",
"version": "2.2.7",
"description": "The best way to connect a wallet",
"files": ["dist", "styles.css", "wallets"],
"type": "module",
Expand Down
221 changes: 162 additions & 59 deletions packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,12 @@ import {
sidebar,
sidebarCompactMode,
} from './DesktopOptions.css';
import type { ChainGroup } from '../../wallets/Wallet';
import { indexBy } from '../../utils/indexBy';

export enum WalletStep {
None = 'NONE',
SelectChainGroup = 'SELECT_CHAIN_GROUP',
LearnCompact = 'LEARN_COMPACT',
Get = 'GET',
Connect = 'CONNECT',
Expand Down Expand Up @@ -88,7 +91,28 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
.sort((a, b) => a.groupIndex - b.groupIndex);
const unfilteredWallets = useWalletConnectors();

const groupedWallets = groupBy(wallets, (wallet) => wallet.groupName);
const chainGroups = indexBy(
wallets.map((w) => w.chainGroup),
(cg) => cg.id,
);

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

const groupedByChainGroupWallets = groupBy(
wallets,
(wallet) => wallet.chainGroup.id,
);

const walletsFromSelectedChainGroup = selectedChainGroupId
? groupedByChainGroupWallets[selectedChainGroupId] || []
: [];

const groupedByGroupNameWallets = groupBy(
walletsFromSelectedChainGroup,
(wallet) => wallet.groupName,
);

const supportedI18nGroupNames = [
'Recommended',
Expand Down Expand Up @@ -208,10 +232,13 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
}
setWalletStep(newWalletStep);
};

const [initialWalletStep, setInitialWalletStep] = useState<WalletStep>(
WalletStep.None,
Object.values(chainGroups).length > 1
? WalletStep.SelectChainGroup
: WalletStep.None,
);
const [walletStep, setWalletStep] = useState<WalletStep>(WalletStep.None);
const [walletStep, setWalletStep] = useState<WalletStep>(initialWalletStep);

let walletContent = null;
let headerLabel = null;
Expand All @@ -228,11 +255,24 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
hasExtension && selectedWallet?.mobileDownloadUrl
);

const onChainGroupSelect = (chainGroupId: string) => {
setSelectedChainGroupId(chainGroupId);
changeWalletStep(WalletStep.None);
};

switch (walletStep) {
case WalletStep.SelectChainGroup:
headerLabel = i18n.t('connect.select_chain_group.title');
break;
case WalletStep.None:
headerLabel = i18n.t('connect.title');
walletContent = (
<ConnectModalIntro getWallet={() => changeWalletStep(WalletStep.Get)} />
);
headerBackButtonLink =
compactModeEnabled && Object.values(chainGroups).length > 1
? WalletStep.SelectChainGroup
: null;
break;
case WalletStep.LearnCompact:
walletContent = (
Expand Down Expand Up @@ -364,30 +404,74 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
default:
break;
}

const topContent = (() => {
if (!compactModeEnabled) return null;

if (walletStep === WalletStep.None) {
return (
<Box marginLeft="16" width="28">
{headerBackButtonLink && (
<Box
as="button"
className={touchableStyles({
active: 'shrinkSm',
hover: 'growLg',
})}
color="accentColor"
onClick={() => {
headerBackButtonLink &&
changeWalletStep(headerBackButtonLink, true);
headerBackButtonCallback?.();
}}
paddingX="8"
paddingY="4"
style={{
boxSizing: 'content-box',
height: 17,
willChange: 'transform',
}}
transition="default"
type="button"
>
<BackIcon />
</Box>
)}
</Box>
);
}

if (Disclaimer) {
return (
<Box marginLeft="16" width="28">
<InfoButton
onClick={() => changeWalletStep(WalletStep.LearnCompact)}
/>
</Box>
);
}

return <Box marginLeft="16" width="28" />;
})();

return (
<Box
display="flex"
flexDirection="row"
style={{ maxHeight: compactModeEnabled ? 468 : 504 }}
style={{ maxHeight: compactModeEnabled ? 468 : 504, height: '100%' }}
>
{(compactModeEnabled ? walletStep === WalletStep.None : true) && (
{(compactModeEnabled
? walletStep === WalletStep.None ||
walletStep === WalletStep.SelectChainGroup
: true) && (
<Box
className={compactModeEnabled ? sidebarCompactMode : sidebar}
display="flex"
flexDirection="column"
marginTop="16"
>
<Box display="flex" justifyContent="space-between">
{compactModeEnabled && Disclaimer && (
<Box marginLeft="16" width="28">
<InfoButton
onClick={() => changeWalletStep(WalletStep.LearnCompact)}
/>
</Box>
)}
{compactModeEnabled && !Disclaimer && (
<Box marginLeft="16" width="28" />
)}
{topContent}
<Box
marginLeft={compactModeEnabled ? '0' : '6'}
paddingBottom="8"
Expand All @@ -402,7 +486,7 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
weight="heavy"
testId={'connect-header-label'}
>
{i18n.t('connect.title')}
{headerLabel}
</Text>
</Box>
{compactModeEnabled && (
Expand All @@ -412,49 +496,65 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
)}
</Box>
<Box className={ScrollClassName} paddingBottom="18">
{Object.entries(groupedWallets).map(
([groupName, wallets], index) =>
wallets.length > 0 && (
<Fragment key={index}>
{groupName ? (
<Box marginBottom="8" marginTop="16" marginX="6">
<Text
color={
groupName === 'Installed'
? 'accentColor'
: 'modalTextSecondary'
}
size="14"
weight="bold"
>
{supportedI18nGroupNames.includes(groupName)
? i18n.t(
`connector_group.${groupName.toLowerCase()}`,
)
: groupName}
</Text>
{walletStep === WalletStep.SelectChainGroup ? (
<Box display="flex" flexDirection="column" gap="4" marginTop="16">
{Object.values(chainGroups).map((cg) => (
<ModalSelection
key={cg.id}
currentlySelected={cg.id === selectedChainGroupId}
iconUrl={cg.iconUrl}
name={cg.title}
onClick={() => onChainGroupSelect(cg.id)}
/>
))}
</Box>
) : (
Object.entries(groupedByGroupNameWallets).map(
([groupName, wallets], index) =>
wallets.length > 0 && (
<Fragment key={index}>
{groupName ? (
<Box marginBottom="8" marginTop="16" marginX="6">
<Text
color={
groupName === 'Installed'
? 'accentColor'
: 'modalTextSecondary'
}
size="14"
weight="bold"
>
{supportedI18nGroupNames.includes(groupName)
? i18n.t(
`connector_group.${groupName.toLowerCase()}`,
)
: groupName}
</Text>
</Box>
) : null}
<Box display="flex" flexDirection="column" gap="4">
{wallets.map((wallet) => {
return (
<ModalSelection
currentlySelected={wallet.id === selectedOptionId}
iconBackground={wallet.iconBackground}
iconUrl={wallet.iconUrl}
key={wallet.id}
name={wallet.name}
onClick={() => selectWallet(wallet)}
ready={wallet.ready}
recent={wallet.recent}
testId={`wallet-option-${wallet.id}`}
isRainbowKitConnector={
wallet.isRainbowKitConnector
}
/>
);
})}
</Box>
) : null}
<Box display="flex" flexDirection="column" gap="4">
{wallets.map((wallet) => {
return (
<ModalSelection
currentlySelected={wallet.id === selectedOptionId}
iconBackground={wallet.iconBackground}
iconUrl={wallet.iconUrl}
key={wallet.id}
name={wallet.name}
onClick={() => selectWallet(wallet)}
ready={wallet.ready}
recent={wallet.recent}
testId={`wallet-option-${wallet.id}`}
isRainbowKitConnector={wallet.isRainbowKitConnector}
/>
);
})}
</Box>
</Fragment>
),
</Fragment>
),
)
)}
</Box>
{compactModeEnabled && (
Expand Down Expand Up @@ -506,7 +606,10 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
)}
</Box>
)}
{(compactModeEnabled ? walletStep !== WalletStep.None : true) && (
{(compactModeEnabled
? walletStep !== WalletStep.SelectChainGroup &&
walletStep !== WalletStep.None
: true) && (
<>
{!compactModeEnabled && (
<Box background="generalBorder" minWidth="1" width="1" />
Expand Down
Loading