Skip to content

Commit 5786db6

Browse files
kien-ngokien-ngo
committed
update
1 parent f40d247 commit 5786db6

File tree

6 files changed

+182
-55
lines changed

6 files changed

+182
-55
lines changed

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ export const IPFS_GATEWAY_URL =
88
(process.env.NEXT_PUBLIC_IPFS_GATEWAY_URL as string) ||
99
"https://{clientId}.ipfscdn.io/ipfs/{cid}/{path}";
1010

11-
export const THIRDWEB_ENGINE_FAUCET_WALLET =
12-
process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET || "";
13-
1411
export const isProd =
1512
(process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV) ===
1613
"production";
@@ -24,5 +21,15 @@ export const DASHBOARD_STORAGE_URL =
2421
export const API_SERVER_URL =
2522
process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
2623

24+
/**
25+
* Faucet stuff
26+
*/
27+
// Cloudflare Turnstile Site key
2728
export const TURNSTILE_SITE_KEY =
2829
process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || "";
30+
export const THIRDWEB_ENGINE_FAUCET_WALLET =
31+
process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET || "";
32+
export const THIRDWEB_ENGINE_URL = process.env.THIRDWEB_ENGINE_URL;
33+
export const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
34+
// Comma-separated list of chain IDs to disable faucet for.
35+
export const DISABLE_FAUCET_CHAIN_IDS = process.env.DISABLE_FAUCET_CHAIN_IDS;

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

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
34
import { Spinner } from "@/components/ui/Spinner/Spinner";
45
import { Button } from "@/components/ui/button";
56
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
@@ -9,11 +10,14 @@ import {
910
} from "@/constants/env";
1011
import { useThirdwebClient } from "@/constants/thirdweb.client";
1112
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
13+
import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
1214
import { Turnstile } from "@marsidev/react-turnstile";
1315
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
1416
import type { CanClaimResponseType } from "app/api/testnet-faucet/can-claim/CanClaimResponseType";
17+
import { Onboarding } from "components/onboarding";
1518
import { mapV4ChainToV5Chain } from "contexts/map-chains";
1619
import { useTrack } from "hooks/analytics/useTrack";
20+
import { useState } from "react";
1721
import { useForm } from "react-hook-form";
1822
import { toast } from "sonner";
1923
import { toUnits } from "thirdweb";
@@ -113,18 +117,27 @@ export function FaucetButton({
113117
},
114118
});
115119

120+
const accountQuery = useAccount();
121+
const [showOnboarding, setShowOnBoarding] = useState(false);
122+
116123
const canClaimFaucetQuery = useQuery({
117124
queryKey: ["testnet-faucet-can-claim", chainId],
118125
queryFn: async () => {
126+
if (!accountQuery.data) {
127+
throw new Error("Account not connected");
128+
}
119129
const response = await fetch(
120-
`/api/testnet-faucet/can-claim?chainId=${chainId}`,
130+
`/api/testnet-faucet/can-claim?chainId=${chainId}&accountId=${accountQuery.data.id}`,
121131
);
122132
if (!response.ok) {
123133
throw new Error("Failed to get claim status");
124134
}
125135
const data = (await response.json()) as CanClaimResponseType;
126136
return data;
127137
},
138+
// Only run this query if user has logged in
139+
// since we rely on the account id to check for the claim eligibility
140+
enabled: !!accountQuery.data,
128141
});
129142

130143
const isFaucetEmpty =
@@ -133,8 +146,22 @@ export function FaucetButton({
133146

134147
const form = useForm<z.infer<typeof claimFaucetSchema>>();
135148

149+
// Force users to log in to claim the faucet
150+
if (!address || !accountQuery.data) {
151+
return (
152+
<CustomConnectWallet
153+
loginRequired={true}
154+
connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"
155+
/>
156+
);
157+
}
158+
136159
// loading state
137-
if (faucetWalletBalanceQuery.isPending || canClaimFaucetQuery.isPending) {
160+
if (
161+
faucetWalletBalanceQuery.isPending ||
162+
canClaimFaucetQuery.isPending ||
163+
accountQuery.isLoading
164+
) {
138165
return (
139166
<Button variant="outline" className="w-full gap-2">
140167
Checking Faucet <Spinner className="size-3" />
@@ -145,7 +172,7 @@ export function FaucetButton({
145172
// faucet is empty
146173
if (isFaucetEmpty) {
147174
return (
148-
<Button variant="outline" disabled className="!opacity-100 w-full ">
175+
<Button variant="outline" disabled className="!opacity-100 w-full">
149176
Faucet is empty right now
150177
</Button>
151178
);
@@ -168,12 +195,24 @@ export function FaucetButton({
168195
);
169196
}
170197

171-
if (!address) {
198+
// Email verification is required to claim from the faucet
199+
if (accountQuery.data.status === "noCustomer") {
172200
return (
173-
<CustomConnectWallet
174-
loginRequired={false}
175-
connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"
176-
/>
201+
<>
202+
<Button
203+
variant="outline"
204+
className="!opacity-100 w-full"
205+
onClick={() => setShowOnBoarding(true)}
206+
>
207+
Verify your email
208+
</Button>
209+
{/* We will show the modal only if the user click on it, because this is a public page */}
210+
{showOnboarding && (
211+
<ChakraProviderSetup>
212+
<Onboarding onOpenChange={setShowOnBoarding} />
213+
</ChakraProviderSetup>
214+
)}
215+
</>
177216
);
178217
}
179218

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

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
1+
import {
2+
DISABLE_FAUCET_CHAIN_IDS,
3+
THIRDWEB_ACCESS_TOKEN,
4+
THIRDWEB_ENGINE_FAUCET_WALLET,
5+
THIRDWEB_ENGINE_URL,
6+
} from "@/constants/env";
17
import { cacheTtl } from "lib/redis";
28
import { NextResponse } from "next/server";
39
import type { NextRequest } from "next/server";
410
import type { CanClaimResponseType } from "./CanClaimResponseType";
511

6-
const THIRDWEB_ENGINE_URL = process.env.THIRDWEB_ENGINE_URL;
7-
const NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET =
8-
process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET;
9-
const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
10-
11-
// Comma-separated list of chain IDs to disable faucet for.
12-
const DISABLE_FAUCET_CHAIN_IDS = process.env.DISABLE_FAUCET_CHAIN_IDS;
13-
1412
// Note: This handler cannot use "edge" runtime because of Redis usage.
1513
export const GET = async (req: NextRequest) => {
1614
const searchParams = req.nextUrl.searchParams;
@@ -36,6 +34,19 @@ export const GET = async (req: NextRequest) => {
3634
);
3735
}
3836

37+
const accountId = searchParams.get("accountId");
38+
39+
if (!accountId) {
40+
return NextResponse.json(
41+
{
42+
error: "Account not connected",
43+
},
44+
{ status: 400 },
45+
);
46+
}
47+
// No need to verify if the accountId is valid. That is done in /api/testnet-faucet/claim
48+
// We only need the accountId here for checking the claim countdown (using Redis)
49+
3950
// Check if faucet is disabled for this chain.
4051
let isFaucetDisabled = false;
4152
if (DISABLE_FAUCET_CHAIN_IDS) {
@@ -49,7 +60,7 @@ export const GET = async (req: NextRequest) => {
4960

5061
if (
5162
!THIRDWEB_ENGINE_URL ||
52-
!NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET ||
63+
!THIRDWEB_ENGINE_FAUCET_WALLET ||
5364
!THIRDWEB_ACCESS_TOKEN ||
5465
isFaucetDisabled
5566
) {
@@ -60,20 +71,7 @@ export const GET = async (req: NextRequest) => {
6071
return NextResponse.json(res);
6172
}
6273

63-
// CF header, fallback to req.ip, then X-Forwarded-For
64-
const ipAddress =
65-
req.headers.get("CF-Connecting-IP") ||
66-
req.ip ||
67-
req.headers.get("X-Forwarded-For");
68-
if (!ipAddress) {
69-
return NextResponse.json(
70-
{
71-
error: "Could not validate eligibility.",
72-
},
73-
{ status: 400 },
74-
);
75-
}
76-
const cacheKey = `testnet-faucet:${chainId}:${ipAddress}`;
74+
const cacheKey = `testnet-faucet:${chainId}:${accountId}`;
7775
const ttlSeconds = await cacheTtl(cacheKey);
7876

7977
const res: CanClaimResponseType = {

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

Lines changed: 79 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
2+
import {
3+
API_SERVER_URL,
4+
THIRDWEB_ACCESS_TOKEN,
5+
THIRDWEB_ENGINE_FAUCET_WALLET,
6+
THIRDWEB_ENGINE_URL,
7+
} from "@/constants/env";
8+
import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
19
import { startOfToday } from "date-fns";
210
import { cacheGet, cacheSet } from "lib/redis";
311
import { type NextRequest, NextResponse } from "next/server";
4-
import { ZERO_ADDRESS } from "thirdweb";
12+
import { ZERO_ADDRESS, getAddress } from "thirdweb";
513
import { getFaucetClaimAmount } from "./claim-amount";
614

7-
const THIRDWEB_ENGINE_URL = process.env.THIRDWEB_ENGINE_URL;
8-
const NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET =
9-
process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET;
10-
const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
11-
1215
interface RequestTestnetFundsPayload {
1316
chainId: number;
1417
toAddress: string;
@@ -17,8 +20,68 @@ interface RequestTestnetFundsPayload {
1720
turnstileToken: string;
1821
}
1922

20-
// Note: This handler cannot use "edge" runtime because of Redis usage.
23+
/**
24+
* How this endpoint works:
25+
* Only users who have signed in to thirdweb.com with an account that is email-verified can claim.
26+
* Those who satisfy the requirement above can claim once per 24 hours for every account
27+
*
28+
* Note: This handler cannot use "edge" runtime because of Redis usage.
29+
*/
2130
export const POST = async (req: NextRequest) => {
31+
// Make sure user's connected to the site
32+
const activeAccount = req.cookies.get(COOKIE_ACTIVE_ACCOUNT)?.value;
33+
34+
if (!activeAccount) {
35+
return NextResponse.json(
36+
{
37+
error: "No wallet detected",
38+
},
39+
{ status: 400 },
40+
);
41+
}
42+
const authCookieName = COOKIE_PREFIX_TOKEN + getAddress(activeAccount);
43+
44+
const authCookie = req.cookies.get(authCookieName);
45+
46+
if (!authCookie) {
47+
return NextResponse.json(
48+
{
49+
error: "No wallet connected",
50+
},
51+
{ status: 400 },
52+
);
53+
}
54+
55+
// Make sure the connected wallet has a thirdweb account
56+
const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
57+
method: "GET",
58+
headers: {
59+
Authorization: `Bearer ${authCookie.value}`,
60+
},
61+
});
62+
63+
if (accountRes.status !== 200) {
64+
// Account not found on this connected address
65+
return NextResponse.json(
66+
{
67+
error: "thirdweb account not found",
68+
},
69+
{ status: 400 },
70+
);
71+
}
72+
73+
const account: Account = await accountRes.json();
74+
75+
// Make sure the logged-in account has verified its email
76+
if (account.status === "noCustomer") {
77+
return NextResponse.json(
78+
{
79+
error: "Account owner hasn't verified email",
80+
},
81+
{ status: 400 },
82+
);
83+
}
84+
2285
const requestBody = (await req.json()) as RequestTestnetFundsPayload;
2386
const { chainId, toAddress, turnstileToken } = requestBody;
2487
if (Number.isNaN(chainId)) {
@@ -27,7 +90,7 @@ export const POST = async (req: NextRequest) => {
2790

2891
if (
2992
!THIRDWEB_ENGINE_URL ||
30-
!NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET ||
93+
!THIRDWEB_ENGINE_FAUCET_WALLET ||
3194
!THIRDWEB_ACCESS_TOKEN
3295
) {
3396
return NextResponse.json(
@@ -86,17 +149,17 @@ export const POST = async (req: NextRequest) => {
86149
);
87150
}
88151

89-
const ipCacheKey = `testnet-faucet:${chainId}:${ipAddress}`;
90152
const addressCacheKey = `testnet-faucet:${chainId}:${toAddress}`;
153+
const accountCacheKey = `testnet-faucet:${chainId}:${account.id}`;
91154

92-
// Assert 1 request per IP/chain every 24 hours.
155+
// Assert 1 request per userId every 24 hours.
93156
// get the cached value
94-
const [ipCacheValue, addressCache] = await Promise.all([
95-
cacheGet(ipCacheKey),
157+
const [accountCacheValue, addressCache] = await Promise.all([
158+
cacheGet(accountCacheKey),
96159
cacheGet(addressCacheKey),
97160
]);
98161
// if we have a cached value, return an error
99-
if (ipCacheValue !== null || addressCache !== null) {
162+
if (accountCacheValue !== null || addressCache !== null) {
100163
return NextResponse.json(
101164
{ error: "Already requested funds on this chain in the past 24 hours." },
102165
{ status: 429 },
@@ -109,13 +172,13 @@ export const POST = async (req: NextRequest) => {
109172
todayLocal.getTime() - todayLocal.getTimezoneOffset() * 60000,
110173
);
111174
const todayUTCSeconds = Math.floor(todayUTC.getTime() / 1000);
112-
const idempotencyKey = `${ipCacheKey}:${todayUTCSeconds}`;
175+
const idempotencyKey = `${addressCacheKey}:${todayUTCSeconds}`;
113176
const amountToClaim = getFaucetClaimAmount(chainId).toString();
114177

115178
try {
116179
// Store the claim request for 24 hours.
117180
await Promise.all([
118-
cacheSet(ipCacheKey, "claimed", 24 * 60 * 60),
181+
cacheSet(accountCacheKey, "claimed", 24 * 60 * 60),
119182
cacheSet(addressCacheKey, "claimed", 24 * 60 * 60),
120183
]);
121184
// then actually transfer the funds
@@ -125,7 +188,7 @@ export const POST = async (req: NextRequest) => {
125188
headers: {
126189
"Content-Type": "application/json",
127190
"x-idempotency-key": idempotencyKey,
128-
"x-backend-wallet-address": NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET,
191+
"x-backend-wallet-address": THIRDWEB_ENGINE_FAUCET_WALLET,
129192
Authorization: `Bearer ${THIRDWEB_ACCESS_TOKEN}`,
130193
},
131194
body: JSON.stringify({

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
11
import { Dialog, DialogContent } from "@/components/ui/dialog";
22
import { cn } from "@/lib/utils";
33
import { IconLogo } from "components/logo";
4+
import type { Dispatch, SetStateAction } from "react";
45
import type { ComponentWithChildren } from "types/component-with-children";
56

67
interface OnboardingModalProps {
78
isOpen: boolean;
89
wide?: boolean;
10+
isClosable?: boolean;
11+
12+
// Pass this props to make the modal closable (it will enable backdrop + the "x" icon)
13+
onOpenChange?: Dispatch<SetStateAction<boolean>>;
914
}
1015

1116
export const OnboardingModal: ComponentWithChildren<OnboardingModalProps> = ({
1217
children,
1318
isOpen,
1419
wide,
20+
onOpenChange,
1521
}) => {
1622
return (
17-
<Dialog open={isOpen}>
23+
<Dialog open={isOpen} onOpenChange={onOpenChange}>
1824
<DialogContent
1925
dialogOverlayClassName="z-[10000]"
2026
className={cn("z-[10001] max-h-[90vh] overflow-auto", {
2127
"!max-w-[768px]": wide,
2228
})}
23-
dialogCloseClassName="hidden"
29+
dialogCloseClassName={onOpenChange !== undefined ? "" : "hidden"}
2430
>
2531
<div className="flex flex-col gap-4">
2632
<div className="w-[40px]">

0 commit comments

Comments
 (0)