Hooks Modals

Hooks Modals

Ouvrez les modales de manière programmatique via Hooks

Les Hooks suivants sont fournis pour permettre l'ouverture programmatique de modales n'importe où dans votre application.

• useConnectModal
• useAccountModal
• useChainModal

Chacun de ces Hooks renvoie un objet avec une fonction pour ouvrir sa modale respective. Notez que les fonctions retournées seront indéfinies si votre application n'est pas dans l'état requis pour que la modale s'ouvre.

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

Chaque hook renvoie également un booléen pour le statut de la modale. Il est généralement recommandé de s'appuyer uniquement sur les hooks Wagmi (c'est-à-dire useAccount) pour réagir directement au statut de connexion du portefeuille d'un utilisateur, plutôt que de dépendre de l'état de la modale de connexion.

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

RainbowKit est conçu pour être non intrusif et réactif, donc les dApps doivent toujours fournir une interface pour les utilisateurs qu'ils aient connecté ou non leur portefeuille. Un utilisateur pourrait connecter ou déconnecter son portefeuille directement depuis MetaMask, donc la dApp doit être réactive à l'état de connexion sous-jacent directement.

Les dApps qui s'appuient sur des mécanismes comme Sign-in with Ethereum pour la vérification des utilisateurs devraient plutôt s'appuyer sur la fonctionnalité Authentication.