Internationalization

LI.FI Widget supports internationalization (i18n). The widget shows its text in the language of your users. This makes it easier for them to understand and interact with the widget.

Supported languages

The widget supports these languages out of the box. You do not need to add language resources for them.

Code	Language
`en`	English (default)
`bn`	Bengali
`de`	German
`es`	Spanish
`fr`	French
`hi`	Hindi
`id`	Indonesian
`it`	Italian
`ja`	Japanese
`ko`	Korean
`pl`	Polish
`pt`	Portuguese
`th`	Thai
`tr`	Turkish
`uk`	Ukrainian
`vi`	Vietnamese
`zh`	Chinese (Simplified)

Use these codes in the languages and languageResources options.

Configure languages

By default, the widget is in English. You can configure the default language, which languages you want to show inside the widget, or in which language your users can see the widget if you hide the in-built language selection. There are allow, deny, and default options for language configuration.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  // hide the language selection part of the UI
  // hiddenUI: { language: true },
  languages: {
    // default to German
    default: 'de',
    // allow German and Spanish languages only
    allow: ['de', 'es'],
    // disable Chinese from being shown in the languages list
    // deny: ['zh'],
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Language resources

You can customize the widget to support any language that your dApp needs by providing language resources. If the widget does not support the language that you need, consider adding the language to the widget itself. Then all integrators can use it. See Contribute translations.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import es from './i18n/es.json';

const widgetConfig: WidgetConfig = {
  languageResources: {
    es,
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

{
  "language": {
    "name": "Español",
    "title": "Idioma"
  }
}

Also, you can customize the existing language resources if you want to adjust some text. Find the complete list of key-value pairs in the reference en.json in our repository here.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  languageResources: {
    en: {
      button: { swap: 'Test swap' },
    },
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Contribute translations

The widget translations are in the lifinance/widget repository. To fix or improve a translation, open a pull request in that repository:

Change the locale file of the language: packages/widget/src/i18n/<code>.json or packages/wallet-management/src/i18n/<code>.json.
Follow the translation guide (TRANSLATING.md). The guide gives the rules and a glossary for each language.

To add a new language, open a pull request that adds the language and its translations. Follow the same translation guide.

Getting Started

Basic Setup

Advanced

Widget Light (iframe)

Misc.

Internationalization

Supported languages

Configure languages

Language resources

Contribute translations

​Supported languages

​Configure languages

​Language resources

​Contribute translations

Supported languages

Configure languages

Language resources

Contribute translations