feat: Checkout i18next support (#1278)

immutable · Dec 21, 2023 · a4a7bb2 · a4a7bb2
1 parent 9ce982e
commit a4a7bb2
Show file tree

Hide file tree

Showing 61 changed files with 2,583 additions and 315 deletions.
diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts
@@ -7,4 +7,10 @@ import { WidgetTheme } from './theme';
 export type WidgetConfiguration = {
   /** The theme of the Checkout Widget (default: "DARK") */
   theme?: WidgetTheme;
+  language?: WidgetLanguage;
 };
+
+/**
+ * Widget Language represents the language options for the Checkout Widgets.
+ */
+export type WidgetLanguage = 'en' | 'ja' | 'ko' | 'zh';
diff --git a/packages/checkout/sdk/src/widgets/definitions/events/bridge.ts b/packages/checkout/sdk/src/widgets/definitions/events/bridge.ts
@@ -5,6 +5,7 @@ export enum BridgeEventType {
   CLOSE_WIDGET = 'close-widget',
   FAILURE = 'failure',
   TRANSACTION_SENT = 'transaction-sent',
+  LANGUAGE_CHANGED = 'language-changed',
 }
 
 /**

diff --git a/packages/checkout/sdk/src/widgets/definitions/events/connect.ts b/packages/checkout/sdk/src/widgets/definitions/events/connect.ts
@@ -8,6 +8,7 @@ export enum ConnectEventType {
   CLOSE_WIDGET = 'close-widget',
   SUCCESS = 'success',
   FAILURE = 'failure',
+  LANGUAGE_CHANGED = 'language-changed',
 }
 
 /**

diff --git a/packages/checkout/sdk/src/widgets/definitions/events/onramp.ts b/packages/checkout/sdk/src/widgets/definitions/events/onramp.ts
@@ -5,6 +5,7 @@ export enum OnRampEventType {
   CLOSE_WIDGET = 'close-widget',
   SUCCESS = 'success',
   FAILURE = 'failure',
+  LANGUAGE_CHANGED = 'language-changed',
 }
 
 /**

diff --git a/packages/checkout/sdk/src/widgets/definitions/events/sale.ts b/packages/checkout/sdk/src/widgets/definitions/events/sale.ts
@@ -7,6 +7,7 @@ export enum SaleEventType {
   FAILURE = 'failure',
   REJECTED = 'rejected',
   TRANSACTION_SUCCESS = 'transaction-success',
+  LANGUAGE_CHANGED = 'language-changed',
 }
 
 /**

diff --git a/packages/checkout/sdk/src/widgets/definitions/events/swap.ts b/packages/checkout/sdk/src/widgets/definitions/events/swap.ts
@@ -6,6 +6,7 @@ export enum SwapEventType {
   SUCCESS = 'success',
   FAILURE = 'failure',
   REJECTED = 'rejected',
+  LANGUAGE_CHANGED = 'language-changed',
 }
 
 /**

diff --git a/packages/checkout/sdk/src/widgets/definitions/events/wallet.ts b/packages/checkout/sdk/src/widgets/definitions/events/wallet.ts
@@ -7,6 +7,7 @@ export enum WalletEventType {
   CLOSE_WIDGET = 'close-widget',
   NETWORK_SWITCH = 'network-switch',
   DISCONNECT_WALLET = 'disconnect-wallet',
+  LANGUAGE_CHANGED = 'language-changed',
 }
 
 /**

diff --git a/packages/checkout/sdk/src/widgets/definitions/events/widgets.ts b/packages/checkout/sdk/src/widgets/definitions/events/widgets.ts
@@ -1,4 +1,5 @@
 import { Web3Provider } from '@ethersproject/providers';
+import { WidgetLanguage } from '../configurations';
 
 /**
  * Enum representing the events emitted by the widgets.
@@ -26,3 +27,10 @@ export enum ProviderEventType {
 export type ProviderUpdated = {
   provider: Web3Provider;
 };
+
+/**
+ * Payload type for the LANGUAGE_CHANGED event
+ */
+export type LanguageChanged = {
+  language: WidgetLanguage;
+};
diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/bridge.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/bridge.ts
@@ -1,5 +1,6 @@
 /* eslint-disable max-len */
 import { WalletProviderName } from '../../../types';
+import { WidgetLanguage } from '../configurations';
 
 /**
  * Bridge Widget parameters
@@ -14,4 +15,6 @@ export type BridgeWidgetParams = {
   amount?: string;
   /** The wallet provider name to use for the bridge widget */
   walletProviderName?: WalletProviderName;
+  /** The language to use for the bridge widget */
+  language?: WidgetLanguage;
 };
diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/connect.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/connect.ts
@@ -1,7 +1,11 @@
+import { WidgetLanguage } from '../configurations';
+
 export enum ConnectTargetLayer {
   LAYER1 = 'LAYER1',
   LAYER2 = 'LAYER2',
 }
 
 export type ConnectWidgetParams = {
+  /** The language to use for the connect widget */
+  language?: WidgetLanguage;
 };
diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/onramp.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/onramp.ts
@@ -1,4 +1,5 @@
 import { WalletProviderName } from '../../../types';
+import { WidgetLanguage } from '../configurations';
 /**
  * OnRamp Widget parameters
  * @property {string | undefined} tokenAddress
@@ -12,4 +13,6 @@ export type OnRampWidgetParams = {
   amount?: string;
   /** The wallet provider name to use for the onramp widget */
   walletProviderName?: WalletProviderName;
+  /** The language to use for the onramp widget */
+  language?: WidgetLanguage;
 };
diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/sale.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/sale.ts
@@ -1,4 +1,5 @@
 import { WalletProviderName } from '../../../types';
+import { WidgetLanguage } from '../configurations';
 
 // Fixme: In SaleWidgetParams pass environmentId through from sdk when it is sorted with hub
 
@@ -19,6 +20,8 @@ export type SaleWidgetParams = {
   items?: SaleItem[];
   /** The wallet provider name to default to if no web3Provider is passed */
   walletProviderName?: WalletProviderName;
+  /** The language to use for the sales widget */
+  language?: WidgetLanguage;
 };
 
 /**

diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/swap.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/swap.ts
@@ -1,4 +1,5 @@
 import { WalletProviderName } from '../../../types';
+import { WidgetLanguage } from '../configurations';
 
 /**
  * Swap Widget parameters
@@ -16,4 +17,6 @@ export type SwapWidgetParams = {
   toTokenAddress?: string;
   /** The wallet provider name to use for the swap widget */
   walletProviderName?: WalletProviderName;
+  /** The language to use for the swap widget */
+  language?: WidgetLanguage;
 };
diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/wallet.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/wallet.ts
@@ -1,11 +1,14 @@
 /* eslint-disable max-len */
 import { WalletProviderName } from '../../../types';
+import { WidgetLanguage } from '../configurations';
 
 /**
  * Wallet Widget parameters
  * @property {WalletProviderName | undefined} walletProviderName
  */
 export type WalletWidgetParams = {
   /** The wallet provider name to use for the wallet widget */
-  walletProviderName?: WalletProviderName
+  walletProviderName?: WalletProviderName;
+  /** The language to use for the wallet widget */
+  language?: WidgetLanguage;
 };
diff --git a/packages/checkout/widgets-lib/package.json b/packages/checkout/widgets-lib/package.json
@@ -30,8 +30,11 @@
     "crypto-browserify": "^3.12.0",
     "ethers": "^5.7.2",
     "https-browserify": "^1.0.0",
+    "i18next": "^23.7.6",
+    "i18next-browser-languagedetector": "^7.2.0",
     "os-browserify": "^0.3.0",
     "pako": "^2.1.0",
+    "react-i18next": "^13.5.0",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "url": "^0.11.0"

diff --git a/packages/checkout/widgets-lib/rollup.config.js b/packages/checkout/widgets-lib/rollup.config.js
@@ -7,6 +7,7 @@ import replace from '@rollup/plugin-replace';
 import nodePolyfills from 'rollup-plugin-polyfill-node';
 
 const defaultPlugin = [
+  json(),
   replace({
     preventAssignment: true,
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
@@ -41,7 +42,6 @@ export default [
       }),
       nodePolyfills(),
       commonjs(),
-      json(),
       ...defaultPlugin,
       terser(),
     ]

diff --git a/packages/checkout/widgets-lib/src/components/NotEnoughImx/NotEnoughImx.tsx b/packages/checkout/widgets-lib/src/components/NotEnoughImx/NotEnoughImx.tsx
@@ -2,14 +2,14 @@ import {
   Body,
   Drawer, Box, Button, FramedImage, Heading, Logo,
 } from '@biom3/react';
+import { useTranslation } from 'react-i18next';
 import {
   containerStyles,
   contentTextStyles,
   actionButtonStyles,
   actionButtonContainerStyles,
   logoContainerStyles,
 } from './NotEnoughImxStyles';
-import { text } from '../../resources/text/textConfig';
 
 type NotEnoughImxProps = {
   visible: boolean;
@@ -22,8 +22,8 @@ type NotEnoughImxProps = {
 export function NotEnoughImx({
   visible, showAdjustAmount, hasZeroImx, onCloseDrawer, onAddCoinsClick,
 }: NotEnoughImxProps) {
-  const { content, buttons } = text.drawers.notEnoughImx;
-  const { noImx, insufficientImx } = content;
+  const { t } = useTranslation();
+  // const { noImx, insufficientImx } = content;
 
   const imxLogo = 'https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--imx.svg';
 
@@ -49,10 +49,10 @@ export function NotEnoughImx({
             sx={contentTextStyles}
             testId="not-enough-gas-heading"
           >
-            {hasZeroImx ? noImx.heading : insufficientImx.heading}
+            {t(`drawers.notEnoughImx.content.${hasZeroImx ? 'noImx' : 'insufficientImx'}.heading`)}
           </Heading>
           <Body sx={contentTextStyles}>
-            {hasZeroImx ? noImx.body : insufficientImx.body}
+            {t(`drawers.notEnoughImx.content.${hasZeroImx ? 'noImx' : 'insufficientImx'}.body`)}
           </Body>
           <Box sx={actionButtonContainerStyles}>
             {showAdjustAmount && (
@@ -62,7 +62,7 @@ export function NotEnoughImx({
                 variant="tertiary"
                 onClick={onCloseDrawer}
               >
-                {buttons.adjustAmount}
+                {t('drawers.notEnoughImx.buttons.adjustAmount')}
               </Button>
             )}
             <Button
@@ -71,15 +71,15 @@ export function NotEnoughImx({
               variant="tertiary"
               onClick={onAddCoinsClick}
             >
-              {buttons.addMoreImx}
+              {t('drawers.notEnoughImx.buttons.addMoreImx')}
             </Button>
             <Button
               sx={actionButtonStyles}
               variant="tertiary"
               onClick={onCloseDrawer}
               testId="not-enough-gas-cancel-button"
             >
-              {buttons.cancel}
+              {t('drawers.notEnoughImx.buttons.cancel')}
             </Button>
           </Box>
           <Box sx={logoContainerStyles}>

diff --git a/packages/checkout/widgets-lib/src/factory.ts b/packages/checkout/widgets-lib/src/factory.ts
@@ -17,6 +17,7 @@ import {
   sendProviderUpdatedEvent,
   addProviderListenersForWidgetRoot,
 } from './lib';
+import './i18n';
 
 export class WidgetsFactory implements IWidgetsFactory {
   private sdk: Checkout;

diff --git a/packages/checkout/widgets-lib/src/i18n.ts b/packages/checkout/widgets-lib/src/i18n.ts
@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+// eslint-disable-next-line import/no-named-as-default
+import i18n, { type Resource } from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import enTranslations from './locales/en.json';
+import jaTranslations from './locales/ja.json';
+import koTranslations from './locales/ko.json';
+import zhTranslations from './locales/zh.json';
+
+const resources: Resource = {
+  en: {
+    translation: enTranslations,
+  },
+  ja: {
+    translation: jaTranslations,
+  },
+  ko: {
+    translation: koTranslations,
+  },
+  zh: {
+    translation: zhTranslations,
+  },
+};
+
+// eslint-disable-next-line import/no-named-as-default-member
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .use(LanguageDetector)
+  .init({
+    fallbackLng: 'en',
+    resources,
+    // lng: 'en', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng optio
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;