Getting started

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { OniymProvider } from "@oniym/react";
 
const queryClient = new QueryClient();
 
export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <OniymProvider config={{ indexerUrl: "https://api.oniym.xyz" }}>
        {/* your app */}
      </OniymProvider>
    </QueryClientProvider>
  );
}

import { useResolve, useName, useAvailable, useRegister } from "@oniym/react";
 
function Profile({ address }: { address: string }) {
  const { data: name } = useName(address);
  const { data: result } = useResolve(name ?? undefined);
 
  return (
    <div>
      <p>{name ?? address}</p>
      <p>Expires: {result?.expiresAt}</p>
    </div>
  );
}
 
function Register() {
  const { data: available } = useAvailable("alice", "web3");
  const { mutate: register, isPending } = useRegister(undefined); // pass walletClient
 
  return (
    <button
      disabled={!available || isPending}
      onClick={() => register({ name: "alice", tld: "web3", reverseRecord: true })}
    >
      {isPending ? "Registering..." : "Register alice.web3"}
    </button>
  );
}