🌍
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
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} />
);
};
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
i18n/es.json
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} />
);
};
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.