Drop link

Drop link is a URL for distributing tokens to a large number of wallets.

<DistributionSubmit />

DistributionSubmit component is a component for making the drop link. You can set the total amount to deposit, the amount per drop, and the expiration of the link. You can also specify the range of location information to enable the receive button at the time of receipt.

<DistributionReceive />

This is an example of actually receiving tokens from a drop link.

Distribute without location

How to create a link without setting location information.

<DistributionSubmit />

DistributionSubmit component is a component for making the link for token airdrop. You can set the total amount to deposit, the amount per drop, and the expiration of the link.

<DistributionReceive />

This is an example of actually receiving tokens from a drop link.

Drop Link List

How to display a list of drop links.

<DistributionHistory />

This is an example of displaying a list of requests

Custom Request List

This is an example of displaying a list of requests with custom content

Generate One-Time Secret

Generate one-time secret in server-side for secure distribution.

Register secret endpoint

Please add the following code to `app/api/register/route.ts`. This code saves the secret using distributionId as the key.

import { NextResponse } from 'next/server';
import { validateDistributionAndSecret } from '@prex0/prex-client';
import type { RegisterServerGeneratedSecretInput } from '@prex0/prex-client';
import { setSecret } from '@/lib/storage';

export async function POST(request: Request) {
  const requestBody: RegisterServerGeneratedSecretInput = await request.json();

  console.log(requestBody);

  try {
    const isValid = await validateDistributionAndSecret(requestBody);

    if (!isValid) {
      return NextResponse.json({ success: false }, { status: 400 });
    }

    await setSecret(requestBody.distributionId, requestBody.secret);
    await setSecret(requestBody.distributionId + '_sc', requestBody.shortCode);
    
    return NextResponse.json({ success: true }, { status: 200 });
  } catch (error) {
    console.error('Error registering secret:', error);
    return NextResponse.json({ success: false }, { status: 500 });
  }
}

Generate one-time secret endpoint

Please add the following code to `app/api/generate/route.ts`. This code generates an one-time secret that can be used only once from the secret.

import { NextResponse } from 'next/server';
import { createServerGeneratedSecret } from '@prex0/prex-client';
import type { ServerGeneratedSecretInput } from '@prex0/prex-client';
import { getSecret } from '@/lib/storage';

export async function POST(request: Request) {
  const requestBody: ServerGeneratedSecretInput = await request.json();
  const secret = await getSecret(requestBody.distributionId);
  const shortCode = await getSecret(requestBody.distributionId + '_sc');

  if (!secret) {
    return NextResponse.json({ message: 'Secret not found' }, { status: 404 });
  }

  if (!shortCode) {
    return NextResponse.json({ message: 'Short code not found' }, { status: 404 });
  }

  if (requestBody.shortCode !== shortCode.toString()) {
    return NextResponse.json({ message: 'Short code mismatch' }, { status: 400 });
  }

  try {
    const generatedSecret = await createServerGeneratedSecret(
      secret.toString(),
      requestBody
    );

    return NextResponse.json({ secret: generatedSecret }, { status: 200 });
  } catch (error) {
    console.error('Error generating secret:', error);
    return NextResponse.json({ message: 'Error generating secret' }, { status: 500 });
  }
}

Storage using Vercel KV

Please add the following code to `lib/storage.ts`.

import { createStorage } from "unstorage"
import vercelKVDriver from "unstorage/drivers/vercel-kv"

const storage = createStorage({
  driver: vercelKVDriver({
    url: process.env.KV_REST_API_URL,
    token: process.env.KV_REST_API_TOKEN,
    base: 'distribution',
    env: false,
  })
})

export function getSecret(distributionId: string) {
  return storage.getItem(distributionId);
}

export function setSecret(distributionId: string, secret: string) {
  return storage.setItem(distributionId, secret);
}

How to submit

You can get the secret and the URL(or Code) after submit.

<DistributionSubmit token={USDC_TOKEN_ARBITRUM} getURL={getURL} secretType='server_generated' registerPath='/api/register'>
...
  <DistributionSubmitCode showDownloadButton/>
</DistributionSubmit>

How to claim

Specify the endpoint to generate secret.


<DistributionReceive generateSecretPath='/api/generate'>
  ...
</DistributionReceive>