Registering a Tipping Token from a React App

Your can interact directly with the Onchain Tipping Registry smart contract to register new tipping tokens on Ham chain. See the OTR docs for more info.

Here's an incomplete example of how you can all the register function from your react app. After registering the tipping token, but before you can tip the token you will need to convert the original token to the tippable version. See the mint and convert method in the example tipping token code on the Ham block explorer.

import { useWriteContract, useAccount } from "wagmi";
import { toHex, Address, zeroAddress } from "viem";

export function useCreateToken() {
  const write = useWriteContract();
  const { address } = useAccount();

  // NOTE: Ensure that the wallet has approved OTR to transfer at least 250,000 $TN100x on their behalf.
  // TN100x on Ham chain is located at 0xE8DD44d0791B73afe9066C3A77721f42d0844bEB
  const create = (params: { tippingSymbol: string, tokenAddress: Address }) => {
    write.writeContract({
      account: address,
      address: "0x0181795609a431A8C39eF020ad58f20fE77E8525",
      // You can get this from the Contract ABI section here https://explorer.ham.fun/address/0x87a8a4F4F4c5e1b4de47C36D4c70076E304E7DE4?tab=contract
      abi: otrAbi,
      functionName: "register",
      args: [
        tokenAddress,
        // Make sure you use the toHex function
        toHex(tippingSymbol),
        // Optional fee
        0n,
        // Optional fee receiver
        zeroAddress,
      ],
    });
  };

  return {
    create,
  };
}

// Somewhere else in your app
// ...

const { create } = useCreateToken();

//...

create({
  tippingSymbol: "$TIPPY",
  tokenAddress: "0xSOME_ERC20_ON_HAM_CHAIN",
});

// ...