useModal

import { useModal } from "@getpara/react-sdk";

function ModalControl() {
  const { isOpen, openModal, closeModal } = useModal();
  const { data: account } = useAccount();

  return (
    <div>
      <button onClick={() => openModal()}>
        {account?.isConnected ? "Manage Wallet" : "Connect Wallet"}
      </button>

      {isOpen && (
        <div>
          <p>Modal is currently open</p>
          <button onClick={closeModal}>Close Modal</button>
        </div>
      )}
    </div>
  );
}

function ConditionalModalExample() {
  const { openModal } = useModal();
  const { data: account } = useAccount();
  const { data: wallet } = useWallet();

  const handleAction = () => {
    if (!account?.isConnected) {
      // Open modal for authentication
      openModal();
    } else if (!wallet) {
      // Open modal to select/create wallet
      openModal();
    } else {
      // User is ready, perform action
      console.log("Ready to perform action with wallet:", wallet.id);
    }
  };

  return (
    <button onClick={handleAction}>
      Perform Action
    </button>
  );
}

function DynamicAuthExample() {
  const { openModal } = useModal();

  const handleLogin = (userEmail: string) => {
    // Pass the identifier when opening — no need to update ParaProvider props
    openModal({ defaultAuthIdentifier: userEmail });
  };

  return (
    <button onClick={() => handleLogin("user@example.com")}>
      Log In
    </button>
  );
}

function AutoOpenModal() {
  const { openModal } = useModal();
  const { data: account } = useAccount();

  useEffect(() => {
    // Automatically open modal if user is not connected
    if (account && !account.isConnected) {
      openModal();
    }
  }, [account, openModal]);

  return <div>Welcome to our app!</div>;
}