djstein/RainbowKitButton.tsx

## _app.tsx
import Head from 'next/head'
import type { AppProps } from 'next/app'
import RainbowKitWrapper from '../components/RainbowKitWrapper'

const YOUR_APP = 'Your App'

const App = ({ Component, pageProps }: AppProps): JSX.Element => {
  return (
    <>
      <Head>
        <title>{YOUR_APP}</title>
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-touch-fullscreen" content="yes" />
        <meta name="apple-mobile-web-app-title" content={YOUR_APP} />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"
        />
      </Head>
      <RainbowKitWrapper>
        <Component {...pageProps} />
      </RainbowKitWrapper>
    </>
  )
}
export default App

## RainbowKitButton.tsx
import { ConnectButton } from '@rainbow-me/rainbowkit'

const RainbowKitButton = () => {
  return (
    <ConnectButton.Custom>
      {({
        account,
        chain,
        openAccountModal,
        openChainModal,
        openConnectModal,
        mounted
      }) => {
        return (
          <div
            {...(!mounted && {
              'aria-hidden': true,
              style: {
                opacity: 0,
                pointerEvents: 'none',
                userSelect: 'none'
              }
            })}
          >
            {(() => {
              if (!mounted || !account || !chain) {
                return (
                  <button
                    onClick={openConnectModal}
                    type="button"
                  >
                    Connect Wallet
                  </button>
                )
              }

              if (chain.unsupported) {
                return (
                  <button
                    onClick={openChainModal}
                    type="button"
                  >
                    Wrong network
                  </button>
                )
              }

              return (
                <div>
                  <button
                    onClick={openChainModal}
                    style={{ display: 'flex', alignItems: 'center' }}
                    type="button"
                  >
                    {chain.name}
                  </button>

                  <button
                    onClick={openAccountModal}
                    type="button"
                  >
                    {account.displayName}
                    {account.displayBalance
                      ? ` (${account.displayBalance})`
                      : ''}
                  </button>
                </div>
              )
            })()}
          </div>
        )
      }}
    </ConnectButton.Custom>
  )
}

export default RainbowKitButton

## RainbowKitWrapper.tsx
import '@rainbow-me/rainbowkit/styles.css'

import {
  apiProvider,
  configureChains,
  darkTheme,
  getDefaultWallets,
  lightTheme,
  RainbowKitProvider
} from '@rainbow-me/rainbowkit'
import { chain, createClient, WagmiProvider } from 'wagmi'

const YOUR_APP_NAME = 'Test App'

const RainbowKitWrapper = ({ children }: { children: React.ReactNode }) => {
  const { chains, provider } = configureChains(
    [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
    [apiProvider.alchemy(process.env.ALCHEMY_ID), apiProvider.fallback()]
  )

  const { connectors } = getDefaultWallets({
    appName: YOUR_APP_NAME,
    chains
  })

  const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider
  })

  return (
    <WagmiProvider client={wagmiClient}>
      <RainbowKitProvider
        chains={chains}
        theme={{
          lightMode: lightTheme(),
          darkMode: darkTheme()
      >
        {children}
      </RainbowKitProvider>
    </WagmiProvider>
  )
}

export default RainbowKitWrapper
	import Head from 'next/head'
	import type { AppProps } from 'next/app'
	import RainbowKitWrapper from '../components/RainbowKitWrapper'

	const YOUR_APP = 'Your App'

	const App = ({ Component, pageProps }: AppProps): JSX.Element => {
	return (
	<>
	<Head>
	<title>{YOUR_APP}</title>
	<meta name="mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<meta name="apple-mobile-web-app-title" content={YOUR_APP} />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta charSet="utf-8" />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"
	/>
	</Head>
	<RainbowKitWrapper>
	<Component {...pageProps} />
	</RainbowKitWrapper>
	</>
	)
	}
	export default App
	import { ConnectButton } from '@rainbow-me/rainbowkit'

	const RainbowKitButton = () => {
	return (
	<ConnectButton.Custom>
	{({
	account,
	chain,
	openAccountModal,
	openChainModal,
	openConnectModal,
	mounted
	}) => {
	return (
	<div
	{...(!mounted && {
	'aria-hidden': true,
	style: {
	opacity: 0,
	pointerEvents: 'none',
	userSelect: 'none'
	}
	})}
	>
	{(() => {
	if (!mounted \|\| !account \|\| !chain) {
	return (
	<button
	onClick={openConnectModal}
	type="button"
	>
	Connect Wallet
	</button>
	)
	}

	if (chain.unsupported) {
	return (
	<button
	onClick={openChainModal}
	type="button"
	>
	Wrong network
	</button>
	)
	}

	return (
	<div>
	<button
	onClick={openChainModal}
	style={{ display: 'flex', alignItems: 'center' }}
	type="button"
	>
	{chain.name}
	</button>

	<button
	onClick={openAccountModal}
	type="button"
	>
	{account.displayName}
	{account.displayBalance
	? ` (${account.displayBalance})`
	: ''}
	</button>
	</div>
	)
	})()}
	</div>
	)
	}}
	</ConnectButton.Custom>
	)
	}

	export default RainbowKitButton
	import '@rainbow-me/rainbowkit/styles.css'

	import {
	apiProvider,
	configureChains,
	darkTheme,
	getDefaultWallets,
	lightTheme,
	RainbowKitProvider
	} from '@rainbow-me/rainbowkit'
	import { chain, createClient, WagmiProvider } from 'wagmi'

	const YOUR_APP_NAME = 'Test App'

	const RainbowKitWrapper = ({ children }: { children: React.ReactNode }) => {
	const { chains, provider } = configureChains(
	[chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
	[apiProvider.alchemy(process.env.ALCHEMY_ID), apiProvider.fallback()]
	)

	const { connectors } = getDefaultWallets({
	appName: YOUR_APP_NAME,
	chains
	})

	const wagmiClient = createClient({
	autoConnect: true,
	connectors,
	provider
	})

	return (
	<WagmiProvider client={wagmiClient}>
	<RainbowKitProvider
	chains={chains}
	theme={{
	lightMode: lightTheme(),
	darkMode: darkTheme()
	>
	{children}
	</RainbowKitProvider>
	</WagmiProvider>
	)
	}

	export default RainbowKitWrapper