From 00b481196a452c15d2dbdc40ba1bf59ea20f0d8b Mon Sep 17 00:00:00 2001
From: BoHsuu <huygon764@gmail.com>
Date: Mon, 25 May 2026 14:09:15 +0700
Subject: [PATCH] feat(nextjs): gate mobile blocking behind env flag, default
 off

---
 .github/workflows/frontend-prod.yaml            | 1 +
 .github/workflows/frontend-staging.yaml         | 1 +
 docker/frontend.Dockerfile                      | 2 ++
 packages/nextjs/.env.example                    | 4 ++++
 packages/nextjs/app/layout.tsx                  | 8 ++++++++
 packages/nextjs/hooks/app/useMobileDetection.ts | 7 +++++++
 6 files changed, 23 insertions(+)

diff --git a/.github/workflows/frontend-prod.yaml b/.github/workflows/frontend-prod.yaml
index 3792dee0..bee10d5c 100644
--- a/.github/workflows/frontend-prod.yaml
+++ b/.github/workflows/frontend-prod.yaml
@@ -46,6 +46,7 @@ jobs:
             --build-arg NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }} \
             --build-arg NEXT_PUBLIC_NETWORK=${{ vars.NEXT_PUBLIC_NETWORK }} \
             --build-arg NEXT_PUBLIC_FEATURE_X402_DEPOSIT=${{ vars.NEXT_PUBLIC_FEATURE_X402_DEPOSIT }} \
+            --build-arg NEXT_PUBLIC_ENABLE_MOBILE_BLOCK=${{ vars.NEXT_PUBLIC_ENABLE_MOBILE_BLOCK }} \
             -f docker/frontend.Dockerfile \
             -t ${GCP_LOCATION}-docker.pkg.dev/${GCP_PROJECT_ID}/${GCP_REPOSITORY}/${GCP_IMAGE}:${SHORT_SHA} \
             .
diff --git a/.github/workflows/frontend-staging.yaml b/.github/workflows/frontend-staging.yaml
index 36d13409..1aae2b6a 100644
--- a/.github/workflows/frontend-staging.yaml
+++ b/.github/workflows/frontend-staging.yaml
@@ -46,6 +46,7 @@ jobs:
             --build-arg NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }} \
             --build-arg NEXT_PUBLIC_NETWORK=${{ vars.NEXT_PUBLIC_NETWORK }} \
             --build-arg NEXT_PUBLIC_FEATURE_X402_DEPOSIT=${{ vars.NEXT_PUBLIC_FEATURE_X402_DEPOSIT }} \
+            --build-arg NEXT_PUBLIC_ENABLE_MOBILE_BLOCK=${{ vars.NEXT_PUBLIC_ENABLE_MOBILE_BLOCK }} \
             -f docker/frontend.Dockerfile \
             -t ${GCP_LOCATION}-docker.pkg.dev/${GCP_PROJECT_ID}/${GCP_REPOSITORY}/${GCP_IMAGE}:${SHORT_SHA} \
             .
diff --git a/docker/frontend.Dockerfile b/docker/frontend.Dockerfile
index bb76a5fb..878865f3 100644
--- a/docker/frontend.Dockerfile
+++ b/docker/frontend.Dockerfile
@@ -57,11 +57,13 @@ COPY packages/nextjs ./packages/nextjs
 ARG NEXT_PUBLIC_API_URL
 ARG NEXT_PUBLIC_NETWORK
 ARG NEXT_PUBLIC_FEATURE_X402_DEPOSIT
+ARG NEXT_PUBLIC_ENABLE_MOBILE_BLOCK
 ARG STANDALONE=true
 
 ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
 ENV NEXT_PUBLIC_NETWORK=$NEXT_PUBLIC_NETWORK
 ENV NEXT_PUBLIC_FEATURE_X402_DEPOSIT=$NEXT_PUBLIC_FEATURE_X402_DEPOSIT
+ENV NEXT_PUBLIC_ENABLE_MOBILE_BLOCK=$NEXT_PUBLIC_ENABLE_MOBILE_BLOCK
 ENV STANDALONE=$STANDALONE
 
 # Build shared and frontend packages
diff --git a/packages/nextjs/.env.example b/packages/nextjs/.env.example
index 8e1d93db..d235b781 100644
--- a/packages/nextjs/.env.example
+++ b/packages/nextjs/.env.example
@@ -3,3 +3,7 @@ NEXT_PUBLIC_NETWORK="testnet"
 
 # x402 gasless USDC deposit (optional)
 NEXT_PUBLIC_FEATURE_X402_DEPOSIT=false
+
+# Block mobile devices (redirect to /mobile). Default off: mobile users see the
+# zoomed-out desktop layout. Set to "true" to re-enable mobile blocking.
+NEXT_PUBLIC_ENABLE_MOBILE_BLOCK=false
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
index 7344d837..9a0c43f9 100644
--- a/packages/nextjs/app/layout.tsx
+++ b/packages/nextjs/app/layout.tsx
@@ -25,6 +25,14 @@ export const metadata = getMetadata({
   description: "A secure and user-friendly wallet for your digital assets",
 });
 
+// When mobile blocking is off (default), force a desktop-width viewport so
+// mobile browsers render the full desktop layout (zoomed out) instead of
+// breaking. When blocking is on, fall back to device-width so the /mobile
+// screen renders correctly. Temporary while mobile is unsupported.
+export const viewport = {
+  width: process.env.NEXT_PUBLIC_ENABLE_MOBILE_BLOCK === "true" ? "device-width" : 1440,
+};
+
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning className={`${barlow.variable} ${repetitionScroll.variable} font-barlow`}>
diff --git a/packages/nextjs/hooks/app/useMobileDetection.ts b/packages/nextjs/hooks/app/useMobileDetection.ts
index c37faccf..3a782c22 100644
--- a/packages/nextjs/hooks/app/useMobileDetection.ts
+++ b/packages/nextjs/hooks/app/useMobileDetection.ts
@@ -10,6 +10,13 @@ export function useMobileDetection() {
   const router = useAppRouter();
 
   useEffect(() => {
+    // Mobile blocking is opt-in via env flag; disabled by default so mobile
+    // users see the (zoomed-out) desktop layout instead of the /mobile screen.
+    if (process.env.NEXT_PUBLIC_ENABLE_MOBILE_BLOCK !== "true") {
+      setIsLoading(false);
+      return;
+    }
+
     const checkMobile = () => {
       const isMobileDevice = window.innerWidth <= 780;