From 9e022acfdd475049ee6b2c69d946c618e44ac0db Mon Sep 17 00:00:00 2001 From: Magomed Khamidov <53529533+KosmosKey@users.noreply.github.com> Date: Thu, 1 Feb 2024 22:25:37 +0000 Subject: [PATCH 1/4] chore: expose 'Chains' type and refactor getDefaultConfig --- .../components/RainbowKitProvider/RainbowKitChainContext.tsx | 2 ++ packages/rainbowkit/src/config/getDefaultConfig.ts | 4 ++-- packages/rainbowkit/src/index.ts | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx index 42e11a647c..255717eec9 100644 --- a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx +++ b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx @@ -8,6 +8,8 @@ export interface RainbowKitChain extends Chain { iconBackground?: string; } +export type RainbowKitChains = readonly [RainbowKitChain, ...RainbowKitChain[]]; + interface RainbowKitChainContextValue { chains: RainbowKitChain[]; initialChainId?: number; diff --git a/packages/rainbowkit/src/config/getDefaultConfig.ts b/packages/rainbowkit/src/config/getDefaultConfig.ts index 8286f8547b..ef99eeaacd 100644 --- a/packages/rainbowkit/src/config/getDefaultConfig.ts +++ b/packages/rainbowkit/src/config/getDefaultConfig.ts @@ -1,7 +1,7 @@ import { Transport } from 'viem'; import { http } from 'wagmi'; import { WagmiProviderProps, createConfig } from 'wagmi'; -import { type Chain } from 'wagmi/chains'; +import { type RainbowKitChain } from '../components/RainbowKitProvider/RainbowKitChainContext'; import type { WalletList } from '../wallets/Wallet'; import { computeWalletConnectMetaData } from '../wallets/computeWalletConnectMetaData'; import { connectorsForWallets } from '../wallets/connectorsForWallets'; @@ -12,7 +12,7 @@ import { walletConnectWallet, } from '../wallets/walletConnectors'; -export type _chains = readonly [Chain, ...Chain[]]; +export type _chains = readonly [RainbowKitChain, ...RainbowKitChain[]]; // Define the '_transports' type as a Record // It maps each 'Chain' id to a 'Transport' diff --git a/packages/rainbowkit/src/index.ts b/packages/rainbowkit/src/index.ts index 174b4983bf..1d3d196ec9 100644 --- a/packages/rainbowkit/src/index.ts +++ b/packages/rainbowkit/src/index.ts @@ -29,6 +29,8 @@ export type { export type { Locale } from './locales/'; export type { DisclaimerComponent } from './components/RainbowKitProvider/AppContext'; export type { AvatarComponent } from './components/RainbowKitProvider/AvatarContext'; +export type { RainbowKitChain as Chain } from './components/RainbowKitProvider/RainbowKitChainContext'; +export type { RainbowKitChains as Chains } from './components/RainbowKitProvider/RainbowKitChainContext'; export { lightTheme } from './themes/lightTheme'; export { darkTheme } from './themes/darkTheme'; export { midnightTheme } from './themes/midnightTheme'; From 96b8ae105f382ff50b7bdf60d77122232d1b4457 Mon Sep 17 00:00:00 2001 From: Magomed Khamidov <53529533+KosmosKey@users.noreply.github.com> Date: Thu, 1 Feb 2024 22:38:29 +0000 Subject: [PATCH 2/4] refactor: provideRainbowKitChains --- .../RainbowKitProvider/provideRainbowKitChains.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts b/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts index aa3afb8a34..5fae7c58a9 100644 --- a/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts +++ b/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts @@ -1,4 +1,3 @@ -import { Chain } from 'wagmi/chains'; import { isNotNullish } from '../../utils/isNotNullish'; import { RainbowKitChain } from './RainbowKitChainContext'; @@ -153,13 +152,16 @@ const chainMetadataById = Object.fromEntries( .map(({ chainId, ...metadata }) => [chainId, metadata]), ); -export const provideRainbowKitChains = (chains: readonly [Chain, ...Chain[]]) => +/** @description Decorates an array of wagmi `Chain` objects with RainbowKitChain property overrides */ +export const provideRainbowKitChains = ( + chains: readonly [Chain, ...Chain[]], +): Chain[] => chains.map((chain) => { const defaultMetadata = chainMetadataById[chain.id] ?? {}; return { ...chain, - name: defaultMetadata.name ?? chain.name, // Favor colloquial names - iconUrl: defaultMetadata.iconUrl, - iconBackground: defaultMetadata.iconBackground, - } as RainbowKitChain; + name: defaultMetadata.name ?? chain.name, // favor colloquial names + iconUrl: chain.iconUrl ?? defaultMetadata.iconUrl, + iconBackground: chain.iconBackground ?? defaultMetadata.iconBackground, + } as Chain; }); From 75bcf76bafa7474429a3be1ac1c6e26959758718 Mon Sep 17 00:00:00 2001 From: Daniel Sinclair Date: Mon, 5 Feb 2024 03:31:41 -0500 Subject: [PATCH 3/4] example: add custom chain avalanche --- packages/example/pages/_app.tsx | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index 789e5c5409..cbdf041b27 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -3,6 +3,7 @@ import './global.css'; import { AvatarComponent, + type Chain, DisclaimerComponent, Locale, RainbowKitProvider, @@ -59,7 +60,7 @@ import { SessionProvider, signOut } from 'next-auth/react'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import { useRouter } from 'next/router'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { WagmiProvider, useDisconnect } from 'wagmi'; import { arbitrum, @@ -79,6 +80,7 @@ import { zora, zoraSepolia, } from 'wagmi/chains'; + import { AppContextProps } from '../lib/AppContextProps'; const RAINBOW_TERMS = 'https://rainbow.me/terms-of-use'; @@ -88,6 +90,26 @@ const projectId = const { wallets } = getDefaultWallets(); +const avalanche = { + id: 43_114, + name: 'Avalanche', + iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png', + iconBackground: '#fff', + nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 }, + rpcUrls: { + default: { http: ['https://api.avax.network/ext/bc/C/rpc'] }, + }, + blockExplorers: { + default: { name: 'SnowTrace', url: 'https://snowtrace.io' }, + }, + contracts: { + multicall3: { + address: '0xca11bde05977b3631167028862be2a173976ca11', + blockCreated: 11_907_934, + }, + }, +} as const satisfies Chain; + const config = getDefaultConfig({ appName: 'RainbowKit Demo', projectId, @@ -100,6 +122,7 @@ const config = getDefaultConfig({ zora, bsc, zkSync, + avalanche, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [ goerli, From 1dff211757416d6fdb1681c5267aad56ee647532 Mon Sep 17 00:00:00 2001 From: Daniel Sinclair Date: Mon, 5 Feb 2024 03:57:43 -0500 Subject: [PATCH 4/4] revert: chains type --- .../components/RainbowKitProvider/RainbowKitChainContext.tsx | 2 -- packages/rainbowkit/src/index.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx index 255717eec9..42e11a647c 100644 --- a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx +++ b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx @@ -8,8 +8,6 @@ export interface RainbowKitChain extends Chain { iconBackground?: string; } -export type RainbowKitChains = readonly [RainbowKitChain, ...RainbowKitChain[]]; - interface RainbowKitChainContextValue { chains: RainbowKitChain[]; initialChainId?: number; diff --git a/packages/rainbowkit/src/index.ts b/packages/rainbowkit/src/index.ts index 1d3d196ec9..4eb62378c2 100644 --- a/packages/rainbowkit/src/index.ts +++ b/packages/rainbowkit/src/index.ts @@ -30,7 +30,6 @@ export type { Locale } from './locales/'; export type { DisclaimerComponent } from './components/RainbowKitProvider/AppContext'; export type { AvatarComponent } from './components/RainbowKitProvider/AvatarContext'; export type { RainbowKitChain as Chain } from './components/RainbowKitProvider/RainbowKitChainContext'; -export type { RainbowKitChains as Chains } from './components/RainbowKitProvider/RainbowKitChainContext'; export { lightTheme } from './themes/lightTheme'; export { darkTheme } from './themes/darkTheme'; export { midnightTheme } from './themes/midnightTheme';