update

Author: kien-ngo

apps/dashboard/.env.example

@@ -91,4 +91,5 @@ API_SERVER_SECRET=""
 
 # Used for the Faucet page (/<chain_id>)
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
-TURNSTILE_SECRET_KEY=""
+TURNSTILE_SECRET_KEY=""
+REDIS_URL=""

apps/dashboard/public/drop/README.md

@@ -0,0 +1 @@
+Medias in this folder are used for /drop/<slug>

apps/dashboard/public/drop/thumbnails/zero-x-thirdweb.mp4

@@ -8,9 +8,6 @@ export const IPFS_GATEWAY_URL =
   (process.env.NEXT_PUBLIC_IPFS_GATEWAY_URL as string) ||
   "https://{clientId}.ipfscdn.io/ipfs/{cid}/{path}";
 
-export const THIRDWEB_ENGINE_FAUCET_WALLET =
-  process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET || "";
-
 export const isProd =
   (process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV) ===
   "production";
@@ -24,5 +21,15 @@ export const DASHBOARD_STORAGE_URL =
 export const API_SERVER_URL =
   process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
 
+/**
+ * Faucet stuff
+ */
+// Cloudflare Turnstile Site key
 export const TURNSTILE_SITE_KEY =
   process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || "";
+export const THIRDWEB_ENGINE_FAUCET_WALLET =
+  process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET || "";
+export const THIRDWEB_ENGINE_URL = process.env.THIRDWEB_ENGINE_URL;
+export const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
+// Comma-separated list of chain IDs to disable faucet for.
+export const DISABLE_FAUCET_CHAIN_IDS = process.env.DISABLE_FAUCET_CHAIN_IDS;

apps/dashboard/src/@/constants/env.ts

@@ -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,15 @@ 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 { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 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";
@@ -113,6 +118,10 @@ export function FaucetButton({
     },
   });
 
+  const accountQuery = useAccount();
+  const userQuery = useLoggedInUser();
+  const [showOnboarding, setShowOnBoarding] = useState(false);
+
   const canClaimFaucetQuery = useQuery({
     queryKey: ["testnet-faucet-can-claim", chainId],
     queryFn: async () => {
@@ -133,6 +142,32 @@ export function FaucetButton({
 
   const form = useForm<z.infer<typeof claimFaucetSchema>>();
 
+  // Force users to log in to claim the faucet
+  if (!address || !userQuery.user) {
+    return (
+      <CustomConnectWallet
+        loginRequired={true}
+        connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"
+      />
+    );
+  }
+
+  if (accountQuery.isPending) {
+    return (
+      <Button variant="outline" className="w-full gap-2">
+        Loading account <Spinner className="size-3" />
+      </Button>
+    );
+  }
+
+  if (!accountQuery.data) {
+    return (
+      <Button variant="outline" className="w-full gap-2" disabled>
+        Failed to load account
+      </Button>
+    );
+  }
+
   // loading state
   if (faucetWalletBalanceQuery.isPending || canClaimFaucetQuery.isPending) {
     return (
@@ -145,7 +180,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,12 +203,24 @@ export function FaucetButton({
     );
   }
 
-  if (!address) {
+  // Email verification is required to claim from the faucet
+  if (accountQuery.data.status === "noCustomer") {
     return (
-      <CustomConnectWallet
-        loginRequired={false}
-        connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"
-      />
+      <>
+        <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>
+        )}
+      </>
     );
   }
 

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

@@ -1,17 +1,15 @@
+import {
+  DISABLE_FAUCET_CHAIN_IDS,
+  THIRDWEB_ACCESS_TOKEN,
+  THIRDWEB_ENGINE_FAUCET_WALLET,
+  THIRDWEB_ENGINE_URL,
+} from "@/constants/env";
 import { ipAddress } from "@vercel/functions";
 import { cacheTtl } from "lib/redis";
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import type { CanClaimResponseType } from "./CanClaimResponseType";
 
-const THIRDWEB_ENGINE_URL = process.env.THIRDWEB_ENGINE_URL;
-const NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET =
-  process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET;
-const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
-
-// Comma-separated list of chain IDs to disable faucet for.
-const DISABLE_FAUCET_CHAIN_IDS = process.env.DISABLE_FAUCET_CHAIN_IDS;
-
 // Note: This handler cannot use "edge" runtime because of Redis usage.
 export const GET = async (req: NextRequest) => {
   const searchParams = req.nextUrl.searchParams;
@@ -50,7 +48,7 @@ export const GET = async (req: NextRequest) => {
 
   if (
     !THIRDWEB_ENGINE_URL ||
-    !NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET ||
+    !THIRDWEB_ENGINE_FAUCET_WALLET ||
     !THIRDWEB_ACCESS_TOKEN ||
     isFaucetDisabled
   ) {

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

@@ -1,15 +1,18 @@
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import {
+  API_SERVER_URL,
+  THIRDWEB_ACCESS_TOKEN,
+  THIRDWEB_ENGINE_FAUCET_WALLET,
+  THIRDWEB_ENGINE_URL,
+} from "@/constants/env";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { ipAddress } from "@vercel/functions";
 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;
-const NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET =
-  process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET;
-const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
-
 interface RequestTestnetFundsPayload {
   chainId: number;
   toAddress: string;
@@ -18,8 +21,68 @@ interface RequestTestnetFundsPayload {
   turnstileToken: string;
 }
 
-// Note: This handler cannot use "edge" runtime because of Redis usage.
+/**
+ * How this endpoint works:
+ * Only users who have signed in to thirdweb.com with an account that is email-verified can claim.
+ * Those who satisfy the requirement above can claim once per 24 hours for every account
+ *
+ * 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: { data: Account } = await accountRes.json();
+
+  // Make sure the logged-in account has verified its email
+  if (account.data.status === "noCustomer") {
+    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)) {
@@ -28,7 +91,7 @@ export const POST = async (req: NextRequest) => {
 
   if (
     !THIRDWEB_ENGINE_URL ||
-    !NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET ||
+    !THIRDWEB_ENGINE_FAUCET_WALLET ||
     !THIRDWEB_ACCESS_TOKEN
   ) {
     return NextResponse.json(
@@ -89,15 +152,23 @@ export const POST = async (req: NextRequest) => {
 
   const ipCacheKey = `testnet-faucet:${chainId}:${ip}`;
   const addressCacheKey = `testnet-faucet:${chainId}:${toAddress}`;
+  const accountCacheKey = `testnet-faucet:${chainId}:${account.data.id}`;
 
   // Assert 1 request per IP/chain every 24 hours.
   // get the cached value
-  const [ipCacheValue, addressCache] = await Promise.all([
-    cacheGet(ipCacheKey),
-    cacheGet(addressCacheKey),
-  ]);
+  const [ipCacheValue, accountCacheValue, addressCacheValue] =
+    await Promise.all([
+      cacheGet(ipCacheKey),
+      cacheGet(accountCacheKey),
+      cacheGet(addressCacheKey),
+    ]);
+
   // if we have a cached value, return an error
-  if (ipCacheValue !== null || addressCache !== null) {
+  if (
+    ipCacheValue !== null ||
+    accountCacheValue !== null ||
+    addressCacheValue !== null
+  ) {
     return NextResponse.json(
       { error: "Already requested funds on this chain in the past 24 hours." },
       { status: 429 },
@@ -117,6 +188,7 @@ export const POST = async (req: NextRequest) => {
     // 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
@@ -126,7 +198,7 @@ export const POST = async (req: NextRequest) => {
       headers: {
         "Content-Type": "application/json",
         "x-idempotency-key": idempotencyKey,
-        "x-backend-wallet-address": NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET,
+        "x-backend-wallet-address": THIRDWEB_ENGINE_FAUCET_WALLET,
         Authorization: `Bearer ${THIRDWEB_ACCESS_TOKEN}`,
       },
       body: JSON.stringify({

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

@@ -0,0 +1,15 @@
+import { AppFooter } from "@/components/blocks/app-footer";
+import { DashboardHeader } from "app/components/Header/DashboardHeader";
+import { ErrorProvider } from "contexts/error-handler";
+
+export default function DashboardLayout(props: { children: React.ReactNode }) {
+  return (
+    <ErrorProvider>
+      <div className="flex min-h-screen flex-col bg-background">
+        <DashboardHeader />
+        <div className="flex grow flex-col">{props.children}</div>
+        <AppFooter />
+      </div>
+    </ErrorProvider>
+  );
+}