模态挂钩

通过 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）来直接响应用户的钱包连接状态，而不是依赖于 Connect Modal 的状态。

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

RainbowKit被设计为不中断且响应迅速，所以不论用户是否已连接他们的钱包，dApps应始终为用户呈现界面。用户可以直接通过MetaMask连接或断开他们的钱包，因此dApp必须直接响应底层连接状态。

依赖像以太坊登录等机制进行用户验证的dApps应改为依赖 Authentication 功能。

概览

入门

高级

模态挂钩

通过 Hooks 编程式打开模态框