Rainbowkitで作成したウォレット接続ボタンをstorybookで見る方法

import { MockConnector } from '@wagmi/core/connectors/mock'
import { Story } from '@storybook/react'
import { CustomAvatar, wagmiClient } from '../src/pages/_app'
import React from 'react'
import { publicProvider } from 'wagmi/providers/public'

const { chains, provider, webSocketProvider } = configureChains([polygonMumbai], [publicProvider()])

export const WagmiDecorator = (Story: Story) => {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains} modalSize='compact' avatar={CustomAvatar}>
        <Story />
      </RainbowKitProvider>
    </WagmiConfig>
  )
}

export const mockWagmiClient = (wallet: Wallet) =>
  createClient({
    autoConnect: true,
    provider,
    webSocketProvider,
    connectors: [
      new MockConnector({
        chains,
        options: {
          signer: wallet,
          chainId: 80001
        }
      })
    ]
  })

export const MockWagmiDecorator = (wallet: Wallet) => (Story: Story) => {
  return (
    <WagmiConfig client={mockWagmiClient(wallet)}>
      <RainbowKitProvider chains={chains} modalSize='compact'>
        <Story />
      </RainbowKitProvider>
    </WagmiConfig>
  )
}

import type { ComponentMeta, ComponentStoryObj } from '@storybook/react'
import { Wallet } from 'ethers'

import { MockWagmiDecorator } from '上記で作ったdecoratorsからインポート'

import WalletConnectButton from '.'

const demoWallet = new Wallet('0x00000000000') // 適当なアドレス

export default {
  title: 'Button/WalletConectButton',
  component: WalletConnectButton,
  decorators: [MockWagmiDecorator(demoWallet)]
} as ComponentMeta<typeof WalletConnectButton>

export const Default: ComponentStoryObj<typeof WalletConnectButton> = {
  args: {},
  parameters: {}
  }
}