🌍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 translation projects on Crowdin:

Widget

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.

Rather than trying to add a language via config, it's best to first consider helping us to translate the language you 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} />
  );
};

⚛️Compatibility with Next.js, Remix, Nuxt, etc.