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 {
    status,
    description,
    openConnectModal,
    openAccountModal
  } = useConnect({
    appName: "My App",
  });
  return (
    <>
      {user ? (
        <button onClick={() => openAccountModal()}>
          {user.smartAccountAddress}
        </button>
      ) : status === "error" ? (
        <p>
          Error: {description}
        </p>
      ) : status === "loading" ? (
        <p>
          Loading: {description}
        </p>
      ) : (
        <button onClick={() => openConnectModal()}>
          Connect
        </button>
      )}
    </>
  );
}

Props

appName

string

  • Application name to display in the connect modal.

appIconUri

string | undefined

  • Application icon to display in the connect modal, if desired.

theme

"light" | "dark" | undefined

  • Theme to use for the connect and account details modals.
  • Defaults to "light".

Return Type

status

"idle" | "loading" | "error"

Current status of the connect flow.

description

string | undefined

  • Description text for the current status, if applicable.

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.