Update

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
@@ -9,11 +10,14 @@ import {
 } from "@/constants/env";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { Turnstile } from "@marsidev/react-turnstile";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { CanClaimResponseType } from "app/api/testnet-faucet/can-claim/CanClaimResponseType";
+import { Onboarding } from "components/onboarding";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { toUnits } from "thirdweb";
@@ -133,6 +137,9 @@ export function FaucetButton({
 
   const form = useForm<z.infer<typeof claimFaucetSchema>>();
 
+  const accountQuery = useAccount();
+  const [showOnboarding, setShowOnBoarding] = useState(false);
+
   // loading state
   if (faucetWalletBalanceQuery.isPending || canClaimFaucetQuery.isPending) {
     return (
@@ -145,7 +152,7 @@ export function FaucetButton({
   // faucet is empty
   if (isFaucetEmpty) {
     return (
-      <Button variant="outline" disabled className="!opacity-100 w-full ">
+      <Button variant="outline" disabled className="!opacity-100 w-full">
         Faucet is empty right now
       </Button>
     );
@@ -168,15 +175,40 @@ export function FaucetButton({
     );
   }
 
-  if (!address) {
+  if (!address || !accountQuery.data) {
     return (
       <CustomConnectWallet
-        loginRequired={false}
+        loginRequired={true}
         connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"
       />
     );
   }
 
+  // Email verification is required to claim from the faucet
+  // same logic with the Onbrading state
+  if (
+    !accountQuery.data.emailConfirmedAt &&
+    !accountQuery.data.unconfirmedEmail
+  ) {
+    return (
+      <>
+        <Button
+          variant="outline"
+          className="!opacity-100 w-full"
+          onClick={() => setShowOnBoarding(true)}
+        >
+          Verify your email
+        </Button>
+        {/* We will show the modal only if the user click on it, because this is a public page */}
+        {showOnboarding && (
+          <ChakraProviderSetup>
+            <Onboarding />
+          </ChakraProviderSetup>
+        )}
+      </>
+    );
+  }
+
   const claimFunds = (values: z.infer<typeof claimFaucetSchema>) => {
     // Instead of having a dedicated endpoint (/api/verify-token),
     // we can just attach the token in the payload and send it to the claim-faucet endpoint, to avoid a round-trip request

apps/dashboard/src/app/api/testnet-faucet/claim/route.ts

@@ -1,7 +1,10 @@
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { API_SERVER_URL } from "@/constants/env";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { startOfToday } from "date-fns";
 import { cacheGet, cacheSet } from "lib/redis";
 import { type NextRequest, NextResponse } from "next/server";
-import { ZERO_ADDRESS } from "thirdweb";
+import { ZERO_ADDRESS, getAddress } from "thirdweb";
 import { getFaucetClaimAmount } from "./claim-amount";
 
 const THIRDWEB_ENGINE_URL = process.env.THIRDWEB_ENGINE_URL;
@@ -19,6 +22,60 @@ interface RequestTestnetFundsPayload {
 
 // Note: This handler cannot use "edge" runtime because of Redis usage.
 export const POST = async (req: NextRequest) => {
+  // Make sure user's connected to the site
+  const activeAccount = req.cookies.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+
+  if (!activeAccount) {
+    return NextResponse.json(
+      {
+        error: "No wallet detected",
+      },
+      { status: 400 },
+    );
+  }
+  const authCookieName = COOKIE_PREFIX_TOKEN + getAddress(activeAccount);
+
+  const authCookie = req.cookies.get(authCookieName);
+
+  if (!authCookie) {
+    return NextResponse.json(
+      {
+        error: "No wallet connected",
+      },
+      { status: 400 },
+    );
+  }
+
+  // Make sure the connected wallet has a thirdweb account
+  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${authCookie.value}`,
+    },
+  });
+
+  if (accountRes.status !== 200) {
+    // Account not found on this connected address
+    return NextResponse.json(
+      {
+        error: "thirdweb account not found",
+      },
+      { status: 400 },
+    );
+  }
+
+  const account: Account = await accountRes.json();
+
+  // Make sure the logged-in account has verified its email
+  if (!account.emailConfirmedAt && !account.unconfirmedEmail) {
+    return NextResponse.json(
+      {
+        error: "Account owner hasn't verified email",
+      },
+      { status: 400 },
+    );
+  }
+
   const requestBody = (await req.json()) as RequestTestnetFundsPayload;
   const { chainId, toAddress, turnstileToken } = requestBody;
   if (Number.isNaN(chainId)) {
@@ -86,17 +143,17 @@ export const POST = async (req: NextRequest) => {
     );
   }
 
-  const ipCacheKey = `testnet-faucet:${chainId}:${ipAddress}`;
   const addressCacheKey = `testnet-faucet:${chainId}:${toAddress}`;
+  const accountCacheKey = `testnet-faucet:${chainId}:${account.id}`;
 
-  // Assert 1 request per IP/chain every 24 hours.
+  // Assert 1 request per userId every 24 hours.
   // get the cached value
-  const [ipCacheValue, addressCache] = await Promise.all([
-    cacheGet(ipCacheKey),
+  const [accountCacheValue, addressCache] = await Promise.all([
+    cacheGet(accountCacheKey),
     cacheGet(addressCacheKey),
   ]);
   // if we have a cached value, return an error
-  if (ipCacheValue !== null || addressCache !== null) {
+  if (accountCacheValue !== null || addressCache !== null) {
     return NextResponse.json(
       { error: "Already requested funds on this chain in the past 24 hours." },
       { status: 429 },
@@ -109,13 +166,13 @@ export const POST = async (req: NextRequest) => {
     todayLocal.getTime() - todayLocal.getTimezoneOffset() * 60000,
   );
   const todayUTCSeconds = Math.floor(todayUTC.getTime() / 1000);
-  const idempotencyKey = `${ipCacheKey}:${todayUTCSeconds}`;
+  const idempotencyKey = `${accountCacheValue}:${todayUTCSeconds}`;
   const amountToClaim = getFaucetClaimAmount(chainId).toString();
 
   try {
     // Store the claim request for 24 hours.
     await Promise.all([
-      cacheSet(ipCacheKey, "claimed", 24 * 60 * 60),
+      cacheSet(accountCacheKey, "claimed", 24 * 60 * 60),
       cacheSet(addressCacheKey, "claimed", 24 * 60 * 60),
     ]);
     // then actually transfer the funds