Skip to content

Commit

Permalink
feat: colloquial chain names (#1408)
Browse files Browse the repository at this point in the history 
* feat: chain name overrides

* chore: changeset

* fix: `BSC` chain name
  • Loading branch information
@DanielSinclair
DanielSinclair authored Jul 18, 2023
1 parent d303a3b commit f1e98e8
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 96 deletions.
5 changes: 5 additions & 0 deletions .changeset/nice-wombats-exist.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rainbow-me/rainbowkit': patch
---

RainbowKit now adopts standardized colloquial chain names like `Arbitrum` and `Optimism` for mainnet chains to simplify the chain switching experience
186 changes: 96 additions & 90 deletions packages/rainbowkit/src/components/ChainModal/ChainModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,111 +72,117 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
)}
<Box display="flex" flexDirection="column" gap="4" padding="2">
{switchNetwork ? (
rainbowkitChains.map(({ iconBackground, iconUrl, id }, idx) => {
const chain = chains.find(c => c.id === id);
if (!chain) return null;
rainbowkitChains.map(
({ iconBackground, iconUrl, id, name }, idx) => {
const chain = chains.find(c => c.id === id);
if (!chain) return null;

const isCurrentChain = chain.id === activeChain?.id;
const switching =
!isCurrentChain && chain.id === pendingChainId;
const isCurrentChain = chain.id === activeChain?.id;
const switching =
!isCurrentChain && chain.id === pendingChainId;

return (
<Fragment key={chain.id}>
<MenuButton
currentlySelected={isCurrentChain}
onClick={
isCurrentChain
? undefined
: () => switchNetwork(chain.id)
}
testId={`chain-option-${chain.id}`}
>
<Box fontFamily="body" fontSize="16" fontWeight="bold">
<Box
alignItems="center"
display="flex"
flexDirection="row"
justifyContent="space-between"
>
return (
<Fragment key={chain.id}>
<MenuButton
currentlySelected={isCurrentChain}
onClick={
isCurrentChain
? undefined
: () => switchNetwork(chain.id)
}
testId={`chain-option-${chain.id}`}
>
<Box fontFamily="body" fontSize="16" fontWeight="bold">
<Box
alignItems="center"
display="flex"
flexDirection="row"
gap="4"
height={chainIconSize}
justifyContent="space-between"
>
{iconUrl && (
<Box height="full" marginRight="8">
<AsyncImage
alt={chain.name}
background={iconBackground}
borderRadius="full"
height={chainIconSize}
src={iconUrl}
width={chainIconSize}
/>
</Box>
)}
<div>{chain.name}</div>
</Box>
{isCurrentChain && (
<Box
alignItems="center"
display="flex"
flexDirection="row"
marginRight="6"
gap="4"
height={chainIconSize}
>
<Text
color="accentColorForeground"
size="14"
weight="medium"
>
Connected
</Text>
<Box
background="connectionIndicator"
borderColor="selectedOptionBorder"
borderRadius="full"
borderStyle="solid"
borderWidth="1"
height="8"
marginLeft="8"
width="8"
/>
{iconUrl && (
<Box height="full" marginRight="8">
<AsyncImage
alt={name ?? chain.name}
background={iconBackground}
borderRadius="full"
height={chainIconSize}
src={iconUrl}
width={chainIconSize}
/>
</Box>
)}
<div>{name ?? chain.name}</div>
</Box>
)}
{switching && (
<Box
alignItems="center"
display="flex"
flexDirection="row"
marginRight="6"
>
<Text color="modalText" size="14" weight="medium">
Confirm in Wallet
</Text>
{isCurrentChain && (
<Box
background="standby"
borderRadius="full"
height="8"
marginLeft="8"
width="8"
/>
</Box>
)}
alignItems="center"
display="flex"
flexDirection="row"
marginRight="6"
>
<Text
color="accentColorForeground"
size="14"
weight="medium"
>
Connected
</Text>
<Box
background="connectionIndicator"
borderColor="selectedOptionBorder"
borderRadius="full"
borderStyle="solid"
borderWidth="1"
height="8"
marginLeft="8"
width="8"
/>
</Box>
)}
{switching && (
<Box
alignItems="center"
display="flex"
flexDirection="row"
marginRight="6"
>
<Text
color="modalText"
size="14"
weight="medium"
>
Confirm in Wallet
</Text>
<Box
background="standby"
borderRadius="full"
height="8"
marginLeft="8"
width="8"
/>
</Box>
)}
</Box>
</Box>
</Box>
</MenuButton>
{mobile && idx < rainbowkitChains.length - 1 && (
<Box
background="generalBorderDim"
height="1"
marginX="8"
/>
)}
</Fragment>
);
})
</MenuButton>
{mobile && idx < rainbowkitChains.length - 1 && (
<Box
background="generalBorderDim"
height="1"
marginX="8"
/>
)}
</Fragment>
);
}
)
) : (
<Box
background="generalBorder"
Expand Down
3 changes: 2 additions & 1 deletion packages/rainbowkit/src/components/ConnectButton/ConnectButtonRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export function ConnectButtonRenderer({
const rainbowKitChain = activeChain
? rainbowkitChainsById[activeChain.id]
: undefined;
const chainName = rainbowKitChain?.name ?? undefined;
const chainIconUrl = rainbowKitChain?.iconUrl ?? undefined;
const chainIconBackground = rainbowKitChain?.iconBackground ?? undefined;

Expand Down Expand Up @@ -118,7 +119,7 @@ export function ConnectButtonRenderer({
iconBackground: chainIconBackground,
iconUrl: resolvedChainIconUrl,
id: activeChain.id,
name: activeChain.name,
name: chainName ?? activeChain.name,
unsupported: activeChain.unsupported,
}
: undefined,
Expand Down
1 change: 1 addition & 0 deletions packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { provideRainbowKitChains } from './provideRainbowKitChains';

export interface RainbowKitChain {
id: number;
name?: string;
iconUrl?: string | (() => Promise<string>) | null;
iconBackground?: string;
}
Expand Down
11 changes: 6 additions & 5 deletions packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ type IconMetadata = {

type ChainMetadata = {
chainId: number;
name?: string;
} & IconMetadata;

const arbitrumIcon: IconMetadata = {
Expand Down Expand Up @@ -90,13 +91,13 @@ const zoraIcon: IconMetadata = {
};

const chainMetadataByName: Record<ChainName, ChainMetadata | null> = {
arbitrum: { chainId: 42_161, ...arbitrumIcon },
arbitrum: { chainId: 42_161, name: 'Arbitrum', ...arbitrumIcon },
arbitrumGoerli: { chainId: 421_613, ...arbitrumIcon },
avalanche: { chainId: 43_114, ...avalancheIcon },
avalancheFuji: { chainId: 43_113, ...avalancheIcon },
base: { chainId: 8453, ...baseIcon },
baseGoerli: { chainId: 84531, ...baseIcon },
bsc: { chainId: 56, ...bscIcon },
bsc: { chainId: 56, name: 'BSC', ...bscIcon },
bscTestnet: { chainId: 97, ...bscIcon },
cronos: { chainId: 25, ...cronosIcon },
cronosTestnet: { chainId: 338, ...cronosIcon },
Expand All @@ -105,7 +106,7 @@ const chainMetadataByName: Record<ChainName, ChainMetadata | null> = {
kovan: { chainId: 42, ...ethereumIcon },
localhost: { chainId: 1_337, ...ethereumIcon },
mainnet: { chainId: 1, ...ethereumIcon },
optimism: { chainId: 10, ...optimismIcon },
optimism: { chainId: 10, name: 'Optimism', ...optimismIcon },
optimismGoerli: { chainId: 420, ...optimismIcon },
optimismKovan: { chainId: 69, ...optimismIcon },
polygon: { chainId: 137, ...polygonIcon },
Expand All @@ -123,11 +124,11 @@ const chainMetadataById = Object.fromEntries(
.map(({ chainId, ...metadata }) => [chainId, metadata])
);

/** @description Decorates an array of wagmi `Chain` objects with RainbowKitChain properties if not already provided */
/** @description Decorates an array of wagmi `Chain` objects with RainbowKitChain property overrides */
export const provideRainbowKitChains = <Chain extends RainbowKitChain>(
chains: Chain[]
): Chain[] =>
chains.map(chain => ({
...(chainMetadataById[chain.id] ?? {}),
...chain,
...(chainMetadataById[chain.id] ?? {}),
}));

2 comments on commit f1e98e8

@vercel
Copy link

@vercel vercel bot commented on f1e98e8 Jul 18, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

rainbowkit-site – ./

rainbowkit-site-git-main-rainbowdotme.vercel.app
rainbowkit-site-rainbowdotme.vercel.app
rainbowkit.vercel.app
rainbowkit.com
www.rainbowkit.com

@vercel
Copy link

@vercel vercel bot commented on f1e98e8 Jul 18, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

rainbowkit-example – ./

rainbowkit-example.vercel.app
rainbowkit-example-rainbowdotme.vercel.app
rainbowkit-example-git-main-rainbowdotme.vercel.app

Please sign in to comment.