モーダルフック

フックを使用してプログラムでモーダルを開く

次のフックは、アプリケーション内でどこからでもモーダルをプログラム的に開くために提供されます。

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>
      )}
    </>
  );
};

各フックはまた、モーダルのステータスを示すブール値を返します。一般的に、ウォレット接続のステータスに応じてユーザーの反応を直接確認するために、Connect Modalの状態に頼るのではなく、Wagmiのフック（例：useAccount）のみに頼ることが推奨されます。

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

RainbowKitは非中断的かつレスポンシブに設計されているため、dAppはユーザーがウォレットを接続しているかどうかにかかわらず、常にインターフェースを表示すべきです。ユーザーはMetaMaskから直接ウォレットを接続または切断することができるため、dAppは基礎となる接続ステータスに直接応答する必要があります。

ユーザー認証にEthereumでのサインインのようなメカニズムを使用しているdAppは、代わりにAuthentication機能を利用する必要があります。

概要

入門

高度な設定

モーダルフック

フックを使用してプログラムでモーダルを開く