diff --git a/.github/workflows/frontend-prod.yaml b/.github/workflows/frontend-prod.yaml index 3792dee..bee10d5 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 36d1340..1aae2b6 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 bb76a5f..878865f 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 8e1d93d..d235b78 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 7344d83..9a0c43f 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 ( diff --git a/packages/nextjs/hooks/app/useMobileDetection.ts b/packages/nextjs/hooks/app/useMobileDetection.ts index c37facc..3a782c2 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;