Ganchos de Modal

Ganchos de Modal

Abrir modais programaticamente via Hooks

Os seguintes Hooks são fornecidos para permitir a abertura programática de modais em qualquer lugar do seu aplicativo.

• useConnectModal
• useAccountModal
• useChainModal

Cada um desses Hooks retorna um objeto com uma função para abrir seu modal correspondente. Note que as funções retornadas serão indefinidas se sua aplicação não estiver no estado necessário para que o modal seja aberto.

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

Cada Hook também retorna um booleano para o status do modal. É geralmente recomendado que você dependa apenas dos Hooks Wagmi (isto é, useAccount) para reagir diretamente ao status de conexão da carteira do usuário, ao invés de depender do estado do Connect Modal.

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

O RainbowKit foi projetado para ser não-disruptivo e responsivo, então os dApps devem sempre renderizar uma interface para os usuários, independentemente de terem conectado a carteira ou não. Um usuário pode conectar ou desconectar sua carteira diretamente do MetaMask, então o dApp deve ser responsivo ao status de conexão subjacente diretamente.

dApps que dependem de mecanismos como Sign-in with Ethereum para verificação do usuário, devem ao invés disso, depender da funcionalidade de Autenticação.