Hooks de modal

Hooks de modal

Ouvrir des modales de manière programmatique via des Hooks

Les Hooks suivants sont fournis pour permettre l'ouverture programmatique de modales partout 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 renvoyées seront indéfinies si votre application n'est pas dans l'état requis pour que la modale puisse être ouverte.

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 l'état de la modale. Il est généralement recommandé de se fier uniquement aux hooks de Wagmi (c'est-à-dire useAccount) pour réagir directement à l'état de connexion du portefeuille d'un utilisateur, plutôt que de se fier à l'état de la Connect Modal.

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 rendre une interface pour les utilisateurs qu'ils aient ou non connecté leur portefeuille. Un utilisateur pourrait connecter ou déconnecter son portefeuille directement à partir de MetaMask, donc la dApp doit réagir directement à l'état de connexion sous-jacent.

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.