@opensea/i18n

Centralized internationalization (i18n) package for OpenSea applications. This package consolidates all translation keys and i18n utilities into a single location with a unified Smartling project.

Overview

• Translation Management: All translation keys from web and wallet applications in one place
• Namespace Structure: Web translations at root level, wallet translations under wallet.* namespace
• Next.js Integration: Built on top of next-intl for seamless Next.js integration
• Single Smartling Project: Unified translation workflow with one Smartling project

Installation

This package is already included in the workspace. To add it as a dependency:

{
  "dependencies": {
    "@opensea/i18n": "workspace:*"
  }
}

Structure

packages/i18n/
├── locales/              # Translation files for all locales
│   ├── en-US/
│   │   └── messages.json
│   ├── de-DE/
│   ├── es/
│   ├── fr/
│   ├── ja/
│   ├── kr/
│   ├── zh-CN/
│   └── zh-TW/
└── src/
    ├── providers/        # IntlProvider and LocaleProvider
    ├── hooks/            # useMessages, useLocale
    ├── types.ts          # Locale type definition
    └── constants.ts      # DEFAULT_TIMEZONE constant

Note: Next.js-specific server configuration (i18n/request.ts) remains in apps/web/ as it's framework-specific.

Usage

Client Components

import { useTranslations } from "next-intl"

export function MyComponent() {
  const t = useTranslations("MyComponent")

  return <h1>{t("title")}</h1>
}

Wallet Components

For wallet-specific translations, use the wallet namespace:

import { useTranslations } from "next-intl"

export function WalletComponent() {
  const t = useTranslations("wallet.WalletComponent")

  return <button>{t("connect")}</button>
}

Server Components

Server-side i18n configuration is handled by apps/web/i18n/request.ts, which loads translations from the @opensea/i18n package:

import { getTranslations } from "next-intl/server"

export default async function ServerComponent() {
  const t = await getTranslations("ServerComponent")

  return <h1>{t("title")}</h1>
}

Provider Setup

import { IntlProvider, LocaleProvider, DEFAULT_TIMEZONE } from "@opensea/i18n"

export function App({ locale, messages, children }) {
  return (
    <LocaleProvider value={locale}>
      <IntlProvider
        locale={locale}
        messages={messages}
        timeZone={DEFAULT_TIMEZONE}
      >
        {children}
      </IntlProvider>
    </LocaleProvider>
  )
}

Translation File Structure

Translations are organized by namespace:

{
  "smartling": { "string_format": "icu" },
  "ComponentName": {
    "key": "Translation value"
  },
  "wallet": {
    "WalletComponent": {
      "key": "Wallet translation value"
    }
  }
}

Smartling Integration

• Upload Source: packages/i18n/locales/en-US/messages.json
• Download Target: packages/i18n/locales/{locale}/messages.json
• Project: Single Smartling project for all translations

All translation keys are maintained directly in packages/i18n/locales/. Web translations are at the root level, and wallet translations are under the wallet namespace

Exports

• IntlProvider - Client-side i18n provider (wraps NextIntlClientProvider)
• LocaleProvider - Locale context provider
• LocaleContext - React context for locale
• useMessages - Hook to load messages for a specific locale
• useLocale - Hook to get current locale
• DEFAULT_TIMEZONE - Default timezone constant
• Locale - TypeScript type for supported locales

Note: Server-side next-intl configuration (getRequestConfig) remains in apps/web/i18n/request.ts.

Development

See i18n.md for detailed usage guide and best practices.