模态钩子

通过 Hooks 编程式打开模态

提供以下钩子以允许在您的应用程序中任何地方编程式地打开模态。

useConnectModal
useAccountModal
useChainModal

每个钩子返回一个包含打开其相应模态功能的对象。请注意，如果您的应用程序未处于模态可以打开的所需状态，则返回的函数将是未定义的。

import {
  useConnectModal,
  useAccountModal,
  useChainModal,
} from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  const { openConnectModal } = useConnectModal();
  const { openAccountModal } = useAccountModal();
  const { openChainModal } = useChainModal();

  return (
    <>
      {openConnectModal && (
        <button onClick={openConnectModal} type="button">
          Open Connect Modal
        </button>
      )}

      {openAccountModal && (
        <button onClick={openAccountModal} type="button">
          Open Account Modal
        </button>
      )}

      {openChainModal && (
        <button onClick={openChainModal} type="button">
          Open Chain Modal
        </button>
      )}
    </>
  );
};

每个钩子还返回一个表示模态状态的布尔值。通常建议您完全依赖 Wagmi 钩子（例如 useAccount）来直接响应用户钱包连接状态，而不是依赖于连接模态的状态。

const { connectModalOpen } = useConnectModal();
const { accountModalOpen } = useAccountModal();
const { chainModalOpen } = useChainModal();

RainbowKit 设计为非打扰性和响应性，因此 dApp 无论用户是否已连接钱包都应始终呈现用户界面。用户可以直接从 MetaMask 连接或断开其钱包，因此 dApp 必须对底层连接状态直接作出响应。

依赖于以太坊身份验证机制进行用户验证的 dApp 应当改为依赖于认证功能。

概览

入门

高级

模态钩子

通过 Hooks 编程式打开模态