Installation

npm install @treasure-dev/tdk-react

Quick Start

Configure context provider

Wrap your app in the TreasurePovider React Context provider and pass the required props:

import { TreasureProvider } from "@treasure-dev/tdk-react";

function App() {
  return (
    <TreasureProvider
      apiUri="https://tdk-api.spellcaster.lol"
      chainId={421614}
      clientId="..."
      sessionOptions={{
        backendWallet: "...",
        approvedTargets: [
          "0x55d0cf68a1afe0932aff6f36c87efa703508191c",
        ],
      }}
    >
      {/** ... */}
    </TreasureProvider>
  );
}

Ecosystem game partners should contact Treasure to obtain values for clientId and backendWallet.

See the TreasureProvider docs for more configuration options.

Add connect button

Now that the context provider is set up, you can begin to use the TDK’s hooks and components. First, import the Treasure styling in your app’s entry point:

import "@treasure-dev/tdk-react/dist/index.css";

Then, add the ConnectButton component to your app:

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

function Nav() {
  const { user } = useTreasure();
  return (
    {user ? `Logged in as ${user.smartAccountAddress}` : null}
    <ConnectButton appName="My App" />
  );
}

See the ConnectButton docs for more configuration options.

Call contract write

After starting a user session with approved target contract addresses, you can now use the TDKAPI object to call contract writes:

import { useTreasure } from "@treasure-dev/tdk-react";
import { parseEther } from "viem";

function Page() {
  const { tdk, user, contractAddresses } = useTreasure();

  const handleTransferMagic = async (amount: number) => {
    try {
      const transaction = await tdk.transaction.create({
        address: contractAddresses.MAGIC,
        functionName: "transfer",
        args: [
          "0xe647b2c46365741e85268ced243113d08f7e00b8",
          parseEther(amount.toString()),
        ],
      });
      console.log("Transaction details:", transaction);
    } catch (err) {
      console.error("Error transferring MAGIC:", err);
    }
  };

  return (
    <>
      {user ? (
        <button onClick={() => handleTransferMagic(10)}>
          Transfer 10 MAGIC
        </button>
      ) : (
        <ConnectButton appName="My App" />
      )}
    </>
  );
}