​
Installation

Install the TDK React package and its peer dependency thirdweb:

npm install --save thirdweb @treasure-dev/tdk-react

​
Quick Start

​
Configure context provider

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

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

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

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.address}` : null}
    <ConnectButton />
  );
}

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

See the connect-react example application for the full end-to-end source code.

MagicswapTreasureProvider