모달 훅스

훅스를 통해 프로그래밍 방식으로 모달 열기

응용 프로그램에서 모달을 프로그래밍 방식으로 열 수 있도록 하기 위해 다음 훅스가 제공됩니다.

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

각 훅은 모달의 상태에 대한 boolean도 반환합니다. 사용자의 지갑 연결 상태에 직접 반응하도록 Wagmi 훅스(예: useAccount)에만 의존하는 것이 일반적으로 권장되며, Connect Modal의 상태에 의존하지 않는 것이 좋습니다.

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

RainbowKit은 비간섭적이며 반응성이 좋도록 설계되어 있으므로 사용자들이 지갑을 연결하지 않더라도 항상 사용자 인터페이스를 표시해야 합니다. 사용자는 MetaMask에서 직접 지갑을 연결하거나 연결 해제할 수 있으므로 dApp은 기본 연결 상태에 직접 반응해야 합니다.

Ethereum과 같은 메커니즘으로 서명을 기반으로 사용자 검증을 의존하는 dApp은 대신 Authentication 기능을 사용해야 합니다.

개요

시작하기

고급

모달 훅스

훅스를 통해 프로그래밍 방식으로 모달 열기