Quickstart

Guide to getting started with Valet OTA. NextJS will be used for the code snippet of the guide.

1. install the necessary dependencies:

pnpm add @valet/ota @avalet/ota-adapter @coral-xyz/anchor

1. Setup your env variables. You will need your VALET_PROJECT_ID, VALET_PROJECT_SECRET. Copy your VALET_PROJECT_ID and VALET_PROJECT_SECRET of your project from your Valet Portal dashboard. See guide on how to register your project if you haven’t done that. An .env file example in NextJS.

# .env
VALET_PROJECT_ID= # Project ID
VALET_PROJECT_SECRET= # Project Secret
DAPP_WALLET_SECRETKEY= # a base58 encoded Privatekey

1. Create a OtaDappServer client. To initialise it, you will need

   1. VALET_PROJECT_ID,
   2. VALET_PROJECT_SECRET,
   3. Anchor Wallet for your dApp,
   4. and the cookie methods of the server-side framework of your choice.

   This Wallet will be used to pay for the Valet user transaction fees.

   The code snippet below is an example for a NextJS application.

// lib/ota.ts
import { bs58 } from "@coral-xyz/anchor/dist/cjs/utils/bytes";
import { Keypair } from "@solana/web3.js";
import { OtaDappServer } from "@valet/ota";
import NodeWallet from "@coral-xyz/anchor/dist/cjs/nodewallet";
// NextJS cookie methods.
import { cookies } from "next/headers";

const dappKeypair = Keypair.fromSecretKey(
	bs58.decode(process.env.DAPP_WALLET_SECRETKEY!)
);

const dappWallet = new NodeWallet(dappKeypair);

export const otaDappServer = new OtaDappServer(
	process.env.VALET_PROJECT_ID!, // Project ID
	process.env.VALET_PROJECT_SECRET!, // Project Secret
	{
		wallet: dappWallet, // dApp wallet, fee payer of your valet user transactions
		cookie: {
			get: (key) => cookies().get(key)?.value,
			set: (key, value, options) => {
				cookies().set(key, value, options);
			},
			remove: (key, options) => {
				cookies().delete(key);
			},
		},
	}
);

1. Setup route to handle OTA request coming to your server. An example in NextJS with /ota route handling OTA requests:

// app/ota/route.ts
import { otaDappServer } from "@/lib/ota";

export async function POST(req: Request) {
	const data = await req.json();

	const response = await otaDappServer.dappRequest(data);

	return new Response(JSON.stringify(response));
}

1. Configure your server to set cookies whenever the user signs into your application. A NextJS example with using NextAuth for authentication

import { otaDappServer } from "@/lib/ota";
import { Provider } from "@valet/ota";
import { NextAuthOptions } from "next-auth";

export const authOptions: NextAuthOptions = {
	...
	callbacks: {
		async signIn({ account }) {
			if (account && account.id_token && account.provider === "google") {
				await otaDappServer.setProviderAndToken(
					Provider.Google,
					account.id_token,
					{
						path: "/",
						secure: false,
						httpOnly: true,
						sameSite: "lax",
						expires: new Date(Date.now() + 3600000),
						maxAge: 3600,
					}
				);
			}
			return true;
		},
	},
};