Hook for accessing the login and account modal UIs without using the ConnectButton component.

​
Usage

import { useConnect, useTreasure } from "@treasure-dev/tdk-react";

function App() {
  const { user } = useTreasure();
  const {
    openConnectModal,
    openAccountModal
  } = useConnect();
  return (
    <>
      {user ? (
        <button onClick={() => openAccountModal()}>
          {user.address}
        </button>
      ) : (
        <button onClick={() => openConnectModal()}>
          Connect
        </button>
      )}
    </>
  );
}

​
Props

​
connectModalSize

"lg" | "xl" | "2xl" | "3xl" | undefined

  • Controls the maximum width of the connect modal. See Tailwind CSS docs for rem and pixel values.
  • Defaults to "lg".

​
disablePasskey

boolean | undefined

  • Disables the passkey login option in the connect modal.
  • Defaults to false.

​
disableWallet

boolean | undefined

  • Disables the Web3 wallet login option in the connect modal.
  • Defaults to false.

​
supportedChainIds

number[] | undefined

  • List of chain IDs that are supported by the app to show in chain switcher in the connected account modal.

​
authMode

"popup" | "redirect" | undefined

  • Determines the authentication mode for SSO login options in the connect modal.
  • Defaults to "popup".

​
redirectUrl

string | undefined

  • Optional URL to redirect to after SSO login.

​
hideDisconnect

boolean | undefined

  • Hides the disconnect button in the account modal.
  • Defaults to false.

​
Return Type

​
openConnectModal

() => void

  • Opens a modal for the connect flow.

​
openAccountModal

() => void

  • Opens a modal for the active account’s details, disconnect button and other options.
ConnectButtonuseTreasure