or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

i18n.mdindex.mdreact-provider.mdtypes.mdutilities.mdweb3-provider.md
tile.json

i18n.mddocs/

Internationalization

Built-in locale support with complete translations for English and Chinese, plus extensible locale system for adding custom languages and overriding specific text strings in Web3 UI components.

Capabilities

Built-in Locales

Pre-configured locale objects for supported languages.

/**
 * English locale with complete translations
 */
const en_US: RequiredLocale;

/**
 * Chinese (Simplified) locale with complete translations
 */
const zh_CN: RequiredLocale;

/**
 * Default locale configuration (English)
 */
const defaultLocale: RequiredLocale;

Locale Interfaces

Complete locale structure and partial override interfaces.

/**
 * Complete locale structure with all required text strings
 */
interface RequiredLocale {
  /** Connect button text strings */
  ConnectButton: {
    /** Text for connect action */
    connect: string;
    /** Text for disconnect action */
    disconnect: string;
    /** Text for copy address action */
    copyAddress: string;
    /** Text shown when address is copied */
    addressCopied: string;
    /** Label for wallet address display */
    walletAddress: string;
  };
  /** Connect modal text strings */
  ConnectModal: {
    /** Modal title */
    title: string;
    /** Guide section title */
    guideTitle: string;
    /** First guide info title */
    guideInfos1Title: string;
    /** First guide info description */
    guideInfos1Desc: string;
    /** Second guide info title */
    guideInfos2Title: string;
    /** Second guide info description */
    guideInfos2Desc: string;
    /** Third guide info title */
    guideInfos3Title: string;
    /** Third guide info description */
    guideInfos3Desc: string;
    /** Get wallet button text in guide */
    guideInfosGetWalletBtnText: string;
    /** More info link text */
    guideInfosMoreLinkText: string;
    /** Get wallet button text */
    getWalletBtnText: string;
    /** Get wallet panel title */
    getWalletPanelTitle: string;
    /** Get wallet panel info title */
    getWalletPanelInfoTitle: string;
    /** Get wallet panel info description */
    getWalletPanelInfoDesc: string;
    /** QR code panel title for download */
    qrCodePanelTitleForDownload: string;
    /** QR code panel title for scan */
    qrCodePanelTitleForScan: string;
    /** QR code panel download link text */
    qrCodePanelLinkForDownload: string;
    /** QR code panel connect link text */
    qrCodePanelLinkForConnect: string;
    /** QR code download tip when wallet ready */
    qrCodePanelDownloadTipForReady: string;
    /** QR code download tip when wallet not ready */
    qrCodePanelDownloadTipForNotReady: string;
    /** Wallet card panel title */
    walletCardPanelTitle: string;
    /** Wallet card app title */
    walletCardAppTitle: string;
    /** Wallet card app description */
    walletCardAppDesc: string;
    /** Wallet card extension title */
    walletCardExtensionTitle: string;
  };
  /** NFT card text strings */
  NFTCard: {
    /** Action button text */
    actionText: string;
  };
}

/**
 * Partial locale override interface for customizing specific text strings
 */
interface Locale {
  /** Optional connect button text overrides */
  ConnectButton?: Partial<RequiredLocale['ConnectButton']>;
  /** Optional connect modal text overrides */
  ConnectModal?: Partial<RequiredLocale['ConnectModal']>;
  /** Optional NFT card text overrides */
  NFTCard?: Partial<RequiredLocale['NFTCard']>;
}

Usage Examples

Using Built-in Locales

import { 
  Web3ConfigProvider, 
  en_US, 
  zh_CN, 
  defaultLocale 
} from '@ant-design/web3-common';

// Use English locale
function EnglishApp() {
  return (
    <Web3ConfigProvider locale={en_US}>
      <YourComponents />
    </Web3ConfigProvider>
  );
}

// Use Chinese locale
function ChineseApp() {
  return (
    <Web3ConfigProvider locale={zh_CN}>
      <YourComponents />
    </Web3ConfigProvider>
  );
}

// Use default locale (English)
function DefaultApp() {
  return (
    <Web3ConfigProvider>
      <YourComponents />
    </Web3ConfigProvider>
  );
}

Custom Locale Overrides

import { 
  Web3ConfigProvider, 
  type Locale 
} from '@ant-design/web3-common';

// Override specific text strings
const customLocale: Locale = {
  ConnectButton: {
    connect: "Link My Wallet",
    disconnect: "Unlink Wallet"
  },
  ConnectModal: {
    title: "Link Your Wallet",
    guideTitle: "Wallet Guide"
  }
};

function CustomLocalizedApp() {
  return (
    <Web3ConfigProvider locale={customLocale}>
      <YourComponents />
    </Web3ConfigProvider>
  );
}

Creating Complete Custom Locales

import { type RequiredLocale } from '@ant-design/web3-common';

// Spanish locale example
const es_ES: RequiredLocale = {
  ConnectButton: {
    connect: "Conectar Billetera",
    disconnect: "Desconectar",
    copyAddress: "Copiar Dirección",
    addressCopied: "¡Dirección Copiada!",
    walletAddress: "Dirección de billetera"
  },
  ConnectModal: {
    title: "Conectar Billetera",
    guideTitle: "¿Qué es una Billetera?",
    guideInfos1Title: "Gestiona tu clave privada y activos",
    guideInfos1Desc: "Gestiona tu clave privada y los activos de la dirección de cadena correspondiente",
    guideInfos2Title: "Te ayuda a conectarte a DApp",
    guideInfos2Desc: "Autoriza a DApp para obtener tu dirección, similar al inicio de sesión",
    guideInfos3Title: "Llamar contrato inteligente",
    guideInfos3Desc: "A través de la autorización de firma de clave privada, inicia la interacción con el contrato inteligente en la cadena",
    guideInfosGetWalletBtnText: "Obtener una Billetera",
    guideInfosMoreLinkText: "Saber Más",
    getWalletBtnText: "Obtener",
    getWalletPanelTitle: "Obtener una Billetera",
    getWalletPanelInfoTitle: "¿No es lo que buscas?",
    getWalletPanelInfoDesc: "Selecciona una billetera a la izquierda para comenzar con un proveedor de billetera diferente.",
    qrCodePanelTitleForDownload: "Descargar {walletName}",
    qrCodePanelTitleForScan: "Escanear con {walletName}",
    qrCodePanelLinkForDownload: "Haz clic para ir a la página de descarga",
    qrCodePanelLinkForConnect: "Haz clic para conectar directamente",
    qrCodePanelDownloadTipForReady: "Escanea el código QR para descargar la billetera.",
    qrCodePanelDownloadTipForNotReady: "No tienes",
    walletCardPanelTitle: "Obtener {selectedWalletName}",
    walletCardAppTitle: "{selectedWalletName} para Móvil",
    walletCardAppDesc: "Usa la billetera móvil para explorar el mundo de Ethereum.",
    walletCardExtensionTitle: "{selectedWalletName} para {selectedExtensionBrowserName}"
  },
  NFTCard: {
    actionText: "Comprar Ahora"
  }
};

function SpanishApp() {
  return (
    <Web3ConfigProvider locale={es_ES}>
      <YourComponents />
    </Web3ConfigProvider>
  );
}

Dynamic Locale Switching

import React, { useState } from 'react';
import { 
  Web3ConfigProvider, 
  en_US, 
  zh_CN, 
  type RequiredLocale 
} from '@ant-design/web3-common';

function MultiLanguageApp() {
  const [currentLocale, setCurrentLocale] = useState<RequiredLocale>(en_US);

  const switchToEnglish = () => setCurrentLocale(en_US);
  const switchToChinese = () => setCurrentLocale(zh_CN);

  return (
    <div>
      <div>
        <button onClick={switchToEnglish}>English</button>
        <button onClick={switchToChinese}>中文</button>
      </div>
      
      <Web3ConfigProvider locale={currentLocale}>
        <YourComponents />
      </Web3ConfigProvider>
    </div>
  );
}

Accessing Locale in Components

import React, { useContext } from 'react';
import { ConfigContext } from '@ant-design/web3-common';

function LocalizedButton() {
  const { locale, defaultLocale } = useContext(ConfigContext);
  
  // Use custom locale override or fall back to default
  const connectText = locale?.ConnectButton?.connect || 
                    defaultLocale.ConnectButton.connect;
  const disconnectText = locale?.ConnectButton?.disconnect || 
                       defaultLocale.ConnectButton.disconnect;

  return (
    <div>
      <button>{connectText}</button>
      <button>{disconnectText}</button>
    </div>
  );
}

// Custom hook for locale access
function useLocale() {
  const { locale, defaultLocale } = useContext(ConfigContext);
  
  return {
    // Helper function to get localized text with fallback
    getText: (
      path: keyof RequiredLocale,
      key: string,
      fallback?: string
    ) => {
      const customText = locale?.[path]?.[key];
      const defaultText = defaultLocale[path][key];
      return customText || defaultText || fallback || key;
    },
    locale,
    defaultLocale
  };
}

function ComponentWithHook() {
  const { getText } = useLocale();
  
  return (
    <div>
      <h1>{getText('ConnectModal', 'title')}</h1>
      <p>{getText('ConnectModal', 'guideInfos1Desc')}</p>
      <button>{getText('ConnectButton', 'connect')}</button>
    </div>
  );
}

Template String Support

Some locale strings support template variables (indicated by {variableName}):

// Example of template string usage
const { defaultLocale } = useContext(ConfigContext);

// Template: "Download {walletName}"
const downloadTitle = defaultLocale.ConnectModal.qrCodePanelTitleForDownload
  .replace('{walletName}', 'MetaMask');
// Result: "Download MetaMask"

// Template: "Get {selectedWalletName}"
const panelTitle = defaultLocale.ConnectModal.walletCardPanelTitle
  .replace('{selectedWalletName}', 'WalletConnect');
// Result: "Get WalletConnect"

// Template: "{selectedWalletName} for {selectedExtensionBrowserName}"
const extensionTitle = defaultLocale.ConnectModal.walletCardExtensionTitle
  .replace('{selectedWalletName}', 'MetaMask')
  .replace('{selectedExtensionBrowserName}', 'Chrome');
// Result: "MetaMask for Chrome"

Complete Locale Reference

English Locale (en_US):

  • Connect button texts for wallet connection/disconnection
  • Comprehensive connect modal with wallet guides and instructions
  • NFT card action text

Chinese Locale (zh_CN):

  • Complete Chinese translations for all interface text
  • Culturally appropriate phrasing and terminology
  • Proper Chinese punctuation and formatting

Both locales provide complete coverage of all UI text strings used in Ant Design Web3 components, ensuring consistent user experiences across different languages while maintaining the ability to customize specific strings as needed.