Join Button is a ready-made component that allows users to join the Turtle.club with your specified referral code.

You will need to pipe in the functions to sign the message and provide the logged in user. Since Turtle is cross-chain, we didn’t want to include every chain and library in the package so you can pipe in your own. Example usage of the JoinButton component with wagmi as the wallet provider:

import { JoinButton } from "@turtledev/react";
import { useState } from "react";
import { useAccount, useSignMessage } from "wagmi";

function Join() {
	const [error, setError] = useState<Error | null>(null);
	const [done, setDone] = useState(false);

	const { address: account, chainId } = useAccount();
	const { signMessageAsync } = useSignMessage();

	return (
		<div>
			{account && (
				<JoinButton
					user={account}
					network={chainId?.toString()}
					signMessage={(message) => signMessageAsync({ message })}
					onError={setError}
					startSigning={() => {
						setError(null);
						setDone(false);
					}}
					onSuccess={() => setDone(true)}
					referral="..."
				/>
			)}

			{!account && <p className="font-medium">Connect your wallet to join</p>}

			{error && <p className="text-red-500 font-medium">{error.message}</p>}

			{done && <p className="text-green-500 font-medium">Signup successful!</p>}
		</div>
	);
}