Merge pull request #60 from AElfProject/feature/nextjs-15

fix: captcha
AElfProject · Nov 14, 2024 · d36ba34 · d36ba34
2 parents be52aaa + 9698c82
commit d36ba34
Show file tree

Hide file tree

Showing 5 changed files with 315 additions and 33 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,7 +7,8 @@ import clsx from "clsx";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { getGoogleAnalyticsTag } from "@/lib/env";
 import Providers from "@/components/providers";
-import { Toaster } from "@/components/ui/toaster"
+import { Toaster } from "@/components/ui/toaster";
+import { PublicEnvScript } from 'next-runtime-env';
 
 const font = Poppins({
   weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
@@ -25,7 +26,10 @@ export default function RootLayout({ children }: PropsWithChildren) {
 
   return (
     <html lang="en">
-      <body className={clsx(font.className, "overflow-hidden")}>
+      <head>
+        <PublicEnvScript />
+      </head>
+      <body className={clsx(font.className, "overflow-hidden !pointer-events-auto")}>
         <Providers>
           <TopMenu />
           <main className="h-[calc(100vh-66px)] overflow-auto">

diff --git a/components/build-deploy-panel.tsx b/components/build-deploy-panel.tsx
@@ -24,11 +24,11 @@ import { AuditType } from "@/data/audit";
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
-  DialogHeader,
+  DialogPortal
 } from "@/components/ui/dialog";
 import { useWallet } from "@/data/wallet";
-import { getFaucetUrl, getGoogleCaptchaSitekey } from "@/lib/env";
+import { env } from 'next-runtime-env';
+import { DialogOverlay } from "@radix-ui/react-dialog";
 
 export function BuildDeployPanel() {
   const commands = useCliCommands();
@@ -45,8 +45,8 @@ export function BuildDeployPanel() {
   const id = useWorkspaceId();
   const recaptchaRef = useRef<ReCAPTCHA>(null);
   const wallet = useWallet();
-  const faucetUrl = getFaucetUrl();
-  const captchaSitekey = getGoogleCaptchaSitekey();
+  const faucetUrl = env('NEXT_PUBLIC_FAUCET_API_URL');
+  const captchaSitekey = env('NEXT_PUBLIC_GOOGLE_CAPTCHA_SITEKEY');
 
   const { data: isDeployable } = useSWR(
     id ? `deployable-${id}` : undefined,
@@ -218,23 +218,37 @@ export function BuildDeployPanel() {
     },
   ];
 
+  const checkBalanceRecursive = async (type: "audit" | "deploy" | "") => {
+    if (type === "") return false;
+    let hasBalance = await isBalanceAvailable(type);
+    if (!hasBalance) {
+      // wait 1s before checking again
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return await checkBalanceRecursive(type);
+    }
+    return true;
+  }
+
   const handleCaptchaSuccess = async (captchaToken:string) => {
     try {
       if (captchaType === "deploy") {
         setIsDeploying(true);
         const res = await getTokenBalance(captchaToken);
+        await checkBalanceRecursive(checkingBalanceType);
         setCheckingBalanceType("");
         res && (await commands.deploy());
       } else if (captchaType === "audit") {
         setIsAuditing(true);
         const res = await getTokenBalance(captchaToken);
+        await checkBalanceRecursive(checkingBalanceType);
         setCheckingBalanceType("");
         res && (await commands.audit(AuditType.DEFAULT));
       }
     } catch (err) {
     } finally {
       setIsDeploying(false);
       setIsAuditing(false);
+      closeRecaptcha();
     }
   };
 
@@ -268,23 +282,22 @@ export function BuildDeployPanel() {
           </Button>
         </Tooltip>
       ))}
+
       <Dialog
         open={isRecaptchaCheck}
-        onOpenChange={closeRecaptcha}
       >
-        <DialogContent>
-          <DialogHeader>
-            <DialogDescription>
-              <div className="flex items-center justify-center min-h-[90px]">
-                <ReCAPTCHA
-                  ref={recaptchaRef}
-                  sitekey={captchaSitekey as string}
-                  onChange={onReCAPTCHAChange}
-                />
-              </div>
-            </DialogDescription>
-          </DialogHeader>
-        </DialogContent>
+        <DialogPortal>
+          <DialogOverlay />
+          <DialogContent>
+            <div className="flex items-center justify-center min-h-[90px]">
+              <ReCAPTCHA
+                ref={recaptchaRef}
+                sitekey={captchaSitekey as string}
+                onChange={onReCAPTCHAChange}
+              />
+            </div>
+          </DialogContent>
+        </DialogPortal>
       </Dialog>
       <UploadModal />
     </div>

diff --git a/lib/env.ts b/lib/env.ts
@@ -24,15 +24,4 @@ export function getGitHubToken() {
 
 export function getSolidityEnabled() {
   return getEnv("SOLIDITY_ENABLED") === "true";
-}
-
-export function getFaucetUrl() {
-  // https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser:~:text=Note%20that%20dynamic%20lookups%20will%20not%20be%20inlined%2C%20such%20as%3A
-  const varName = "NEXT_PUBLIC_FAUCET_API_URL";
-  return process.env[varName];
-}
-
-export function getGoogleCaptchaSitekey() {
-  const varName = "NEXT_PUBLIC_GOOGLE_CAPTCHA_SITEKEY";
-  return process.env[varName];
 }