🌍Internationalization

Unlock global communities with effortless internationalization support

LI.FI Widget supports internationalization (i18n) and, with the help of our community, is translated into multiple languages to provide a localized user experience to your users, making it easier for them to understand and interact with the widget.

See supported languages and help us translate by joining our translations projects on Crowdin:

Widget

Jumper.Exchange

• https://crowdin.com/project/lifi-widget

• https://crowdin.com/project/jumper-exchange

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'],
  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.

It's always better to help us translate to the language of your need by joining our Crowdin translation project. 🙂

widget.tsx

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} />
  );
};

i18n/es.json

{
  "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} />
  );
};

Language Detection

Widget has automatic language detection based on browser information. If you don't need this feature you can disable it by setting disableLanguageDetector config option to true.