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,8 +137,15 @@ 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) {
+  if (
+    faucetWalletBalanceQuery.isPending ||
+    canClaimFaucetQuery.isPending ||
+    accountQuery.isLoading
+  ) {
     return (
       <Button variant="outline" className="w-full gap-2">
         Checking Faucet <Spinner className="size-3" />
@@ -145,7 +156,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 +179,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 Onboarding 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 onOpenChange={setShowOnBoarding} />
+          </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 = `${addressCacheKey}:${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

apps/dashboard/src/components/onboarding/Modal.tsx

@@ -1,26 +1,32 @@
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 import { IconLogo } from "components/logo";
+import type { Dispatch, SetStateAction } from "react";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface OnboardingModalProps {
   isOpen: boolean;
   wide?: boolean;
+  isClosable?: boolean;
+
+  // Pass this props to make the modal closable (it will enable backdrop + the "x" icon)
+  onOpenChange?: Dispatch<SetStateAction<boolean>>;
 }
 
 export const OnboardingModal: ComponentWithChildren<OnboardingModalProps> = ({
   children,
   isOpen,
   wide,
+  onOpenChange,
 }) => {
   return (
-    <Dialog open={isOpen}>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent
         dialogOverlayClassName="z-[10000]"
         className={cn("z-[10001] max-h-[90vh] overflow-auto", {
           "!max-w-[768px]": wide,
         })}
-        dialogCloseClassName="hidden"
+        dialogCloseClassName={onOpenChange !== undefined ? "" : "hidden"}
       >
         <div className="flex flex-col gap-4">
           <div className="w-[40px]">

apps/dashboard/src/components/onboarding/index.tsx

@@ -5,7 +5,14 @@ import {
   useAccount,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Suspense, lazy, useEffect, useState } from "react";
+import {
+  type Dispatch,
+  type SetStateAction,
+  Suspense,
+  lazy,
+  useEffect,
+  useState,
+} from "react";
 import { useActiveWallet } from "thirdweb/react";
 import { useTrack } from "../../hooks/analytics/useTrack";
 import { LazyOnboardingBilling } from "./LazyOnboardingBilling";
@@ -42,7 +49,10 @@ type OnboardingState =
   | "skipped"
   | undefined;
 
-export const Onboarding: React.FC = () => {
+export const Onboarding: React.FC<{
+  // Pass this props to make the modal closable (it will enable backdrop + the "x" icon)
+  onOpenChange?: Dispatch<SetStateAction<boolean>>;
+}> = ({ onOpenChange }) => {
   const meQuery = useAccount();
 
   const { isLoggedIn } = useLoggedInUser();
@@ -202,7 +212,11 @@ export const Onboarding: React.FC = () => {
   }
 
   return (
-    <OnboardingModal isOpen={!!state} wide={state === "plan"}>
+    <OnboardingModal
+      isOpen={!!state}
+      wide={state === "plan"}
+      onOpenChange={onOpenChange}
+    >
       {state === "onboarding" && (
         <Suspense fallback={<Loading />}>
           <OnboardingGeneral