Skip to content

feat(nextjs): gate mobile blocking behind env flag, default off #280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gianalarcon merged 1 commit into from
May 25, 2026
Merged

feat(nextjs): gate mobile blocking behind env flag, default off #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/frontend-prod.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} \
.
Expand Down
1 change: 1 addition & 0 deletions .github/workflows/frontend-staging.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} \
.
Expand Down
2 changes: 2 additions & 0 deletions docker/frontend.Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions packages/nextjs/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
8 changes: 8 additions & 0 deletions packages/nextjs/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`}>
Expand Down
7 changes: 7 additions & 0 deletions packages/nextjs/hooks/app/useMobileDetection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Loading