Skip to content

Conversation

@nichechristie
Copy link

Summary

  • Adds a GoogleTranslate client component that dynamically loads the Google Translate Element API, enabling automatic translation of base.org into 133 languages
  • Integrates the widget as a full-width banner at the top of the (base-org) layout, above the sidebar/content grid
  • Updates CSP headers in next.config.js to allow translate.google.com and translate.googleapis.com in default-src, img-src, and frame-src

Motivation

Base is a global platform. Many users and builders are non-English speakers. This lightweight integration provides immediate multilingual access without requiring a full i18n implementation with manually maintained translation files.

The CSP connect-src already allows translate.googleapis.com (line 121 of next.config.js), and react-intl is installed but not actively used — this suggests translation support has been considered before.

Files Changed

File Change
apps/web/src/components/Layout/GoogleTranslate/index.tsx New 'use client' component
apps/web/app/(base-org)/layout.tsx Import and render GoogleTranslate above the content grid
apps/web/next.config.js CSP header updates for Google Translate domains

Design Details

  • Widget loads asynchronously — no impact on initial page load performance
  • Fades in via opacity transition only after the Google Translate script has initialized
  • Includes a globe icon alongside the language selector for visual clarity
  • Supports dark mode via Tailwind (dark:bg-gray-90, dark:text-gray-40)
  • Uses aria-label for accessibility

Test plan

  • Verify the translate widget renders at the top of the page on desktop and mobile
  • Verify selecting a language translates the page content
  • Verify no CSP violations appear in the browser console
  • Verify dark mode styling works correctly
  • Verify the widget does not block or interfere with the sidebar, mobile nav, or gas price dropdown
  • Verify no layout shift occurs (widget fades in after load)

Closes #2932

🤖 Generated with Claude Code

Add a Google Translate widget at the top of the base.org layout to
make the site accessible to a global audience in 133 languages.

Changes:
- New GoogleTranslate client component that dynamically loads the
  Google Translate Element API
- Integrated into (base-org) layout above the main content grid
- Updated CSP headers to allow translate.google.com and
  translate.googleapis.com in default-src, img-src, and frame-src

Closes base#2932

Co-Authored-By: Claude Opus 4.5 <[email protected]>
@vercel
Copy link

vercel bot commented Jan 27, 2026

Someone is attempting to deploy a commit to the Coinbase Team on Vercel.

A member of the Team first needs to authorize it.

@cb-heimdall
Copy link
Collaborator

🟡 Heimdall Review Status

Requirement Status More Info
Reviews 🟡 0/2
Denominator calculation
Show calculation
1 if user is bot 0
1 if user is external 0
2 if repo is sensitive 0
From .codeflow.yml 1
Additional review requirements
Show calculation
Max 0
0
From CODEOWNERS 0
Global minimum 0
Max 1
1
1 if commit is unverified 1
Sum 2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Add Google Translate widget for 133-language support

2 participants