@rango-dev/widget-embedded 0.5.1-next.18 → 0.5.1-next.19

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":";AAmEA,wBAAgB,IAAI,gBA6JnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":";AAoEA,wBAAgB,IAAI,gBA6JnB"}

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;CACvB;AAyBD,wBAAgB,WAAW,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,SAAS,eA0FxE"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;CACvB;AAyBD,wBAAgB,WAAW,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,SAAS,eAyFxE"}

package/dist/types/config.d.ts

@@ -1,6 +1,7 @@
 import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { ProviderInterface } from '@rango-dev/wallets-core';
+import { Language } from '@rango-dev/ui';
 /**
  * The above type defines a set of optional color properties for a widget.
  * @property {string} background
@@ -114,7 +115,7 @@ export type WidgetConfig = {
     wallets?: (WalletType | ProviderInterface)[];
     multiWallets?: boolean;
     customDestination?: boolean;
-    language?: string;
+    language?: Language;
     theme?: WidgetTheme;
     externalWallets?: boolean;
 };

package/dist/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/types/swap.d.ts

@@ -1,4 +1,4 @@
-import { SwapSavedSettings } from '@rango-dev/ui/dist/types/swaps';
+import { SwapSavedSettings } from 'rango-types/lib';
 export type PendingSwapSettings = Omit<SwapSavedSettings, 'disabledSwappersIds'>;
 export type SwapButtonState = ({
     disabled: true;

package/dist/types/swap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/types/swap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,iBAAiB,EACjB,qBAAqB,CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAC1B;IAAE,QAAQ,EAAE,IAAI,CAAA;CAAE,GAClB;IAAE,QAAQ,EAAE,KAAK,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAC5C,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,GAAG,IAAI,CAAC"}
+{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/types/swap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,iBAAiB,EACjB,qBAAqB,CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAC1B;IAAE,QAAQ,EAAE,IAAI,CAAA;CAAE,GAClB;IAAE,QAAQ,EAAE,KAAK,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAC5C,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,GAAG,IAAI,CAAC"}

package/dist/utils/routing.d.ts

@@ -1,4 +1,4 @@
-import { SimulationAssetAndAmount, SimulationValidationStatus } from '@rango-dev/ui/dist/types/swaps';
+import { SimulationAssetAndAmount, SimulationValidationStatus } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
 import BigNumber from 'bignumber.js';
 import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import { BestRouteEqualityParams, Wallet } from '../types';

package/dist/utils/routing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/utils/routing.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,gCAAgC,CAAC;AACxC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAErE,OAAO,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAkBd;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAUnC;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,uBAAuB,uBA4BvE;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,iBAAiB,GAAG,IAAI,CAe1B;AAED,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CAiB5E;AAGD,eAAO,MAAM,kBAAkB,YAAa,OAAO,SAAS,OAAO,qCAIlE,CAAC"}
+{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/utils/routing.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAErE,OAAO,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAkBd;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAUnC;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,uBAAuB,uBA4BvE;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,iBAAiB,GAAG,IAAI,CAe1B;AAED,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CAiB5E;AAGD,eAAO,MAAM,kBAAkB,YAAa,OAAO,SAAS,OAAO,qCAIlE,CAAC"}

package/dist/utils/swap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.5.1-next.18",
+  "version": "0.5.1-next.19",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -27,9 +27,6 @@
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
-    "i18next": "^22.4.11",
-    "i18next-browser-languagedetector": "^7.0.1",
-    "i18next-http-backend": "^2.1.1",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
     "rango-sdk": "^0.1.34",

package/src/Wallets.tsx

@@ -9,7 +9,6 @@ import {
 } from './utils/wallets';
 import { useWalletsStore } from './store/wallets';
 import { isEvmBlockchain } from 'rango-sdk';
-import './i18n';
 import { useWalletProviders } from './hooks/useWalletProviders';
 import { WidgetConfig } from './types';
 import { createContext, useRef } from 'react';

package/src/Widget.tsx

@@ -1,4 +1,4 @@
-import { SwapContainer, styled } from '@rango-dev/ui';
+import { SwapContainer, styled, I18nManager } from '@rango-dev/ui';
 import React, {
   PropsWithChildren,
   useContext,
@@ -12,8 +12,6 @@ import { Layout } from './components/Layout';
 import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import { WidgetConfig } from './types';
-import useSelectLanguage from './hooks/useSelectLanguage';
-import './i18n';
 import QueueManager from './QueueManager';
 import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
@@ -37,7 +35,6 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
   globalFont(config?.theme?.fontFamily || 'Roboto');
 
   const { activeTheme } = useTheme(config?.theme || {});
-  const { changeLanguage } = useSelectLanguage();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
@@ -52,30 +49,28 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
     }
   }, [config]);
 
-  useEffect(() => {
-    changeLanguage(config?.language || 'en');
-  }, [config?.language]);
-
   useEffect(() => {
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
 
   return (
-    <MainContainer id="swap-container" className={activeTheme}>
-      <QueueManager>
-        <WidgetEvents />
-        <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
-          <AppRouter
-            lastConnectedWallet={lastConnectedWalletWithNetwork}
-            disconnectedWallet={disconnectedWallet}
-            clearDisconnectedWallet={() => {
-              setDisconnectedWallet(undefined);
-            }}>
-            <Layout config={config} />
-          </AppRouter>
-        </SwapContainer>
-      </QueueManager>
-    </MainContainer>
+    <I18nManager language={config?.language}>
+      <MainContainer id="swap-container" className={activeTheme}>
+        <QueueManager>
+          <WidgetEvents />
+          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
+            <AppRouter
+              lastConnectedWallet={lastConnectedWalletWithNetwork}
+              disconnectedWallet={disconnectedWallet}
+              clearDisconnectedWallet={() => {
+                setDisconnectedWallet(undefined);
+              }}>
+              <Layout config={config} />
+            </AppRouter>
+          </SwapContainer>
+        </QueueManager>
+      </MainContainer>
+    </I18nManager>
   );
 }
 

package/src/components/BottomLogo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@rango-dev/ui';
 import { Typography } from '@rango-dev/ui';
-import { useTranslation } from 'react-i18next';
+import { i18n } from '@lingui/core';
 
 const Container = styled('div', {
   display: 'flex',
@@ -25,12 +25,10 @@ const StyledAnchor = styled('a', {
 });
 
 export function BottomLogo() {
-  const { t } = useTranslation();
-
   return (
     <Container>
       <Typography variant="caption" color="$neutral600">
-        {t('Powered By')}
+        {i18n.t('Powered By')}
       </Typography>
       <StyledAnchor href="https://rango.exchange" target="_blank">
         <Logo xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.68 29">

package/src/components/ChangeSlippageButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@rango-dev/ui';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { i18n } from '@lingui/core';
 
 export function ChangeSlippageButton() {
   const navigate = useNavigate();
@@ -11,9 +12,8 @@ export function ChangeSlippageButton() {
       type="primary"
       variant="outlined"
       size="small"
-      onClick={() => navigate('/' + navigationRoutes.settings)}
-    >
-      Change Slippage
+      onClick={() => navigate('/' + navigationRoutes.settings)}>
+      {i18n.t('Change Slippage')}
     </Button>
   );
 }

package/src/components/ConfirmSwapWarnings.tsx

@@ -1,25 +1,22 @@
-import { ConfirmSwapWarningTypes, ConfirmSwapWarnings } from '../types';
+import {
+  ConfirmSwapWarningTypes,
+  ConfirmSwapWarnings as ConfirmSwapWarningsType,
+} from '../types';
 
-export function ConfirmSwapWarnings(warnings: ConfirmSwapWarnings[]) {
+export function ConfirmSwapWarnings(warnings: ConfirmSwapWarningsType[]) {
   return warnings.flatMap((warning) => {
     switch (warning.type) {
       case ConfirmSwapWarningTypes.ROUTE_UPDATED:
-        return "Route has been updated.";
+        return 'Route has been updated.';
       case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
-        return (
-          `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`
-        );
+        return `Output amount changed to ${warning.newOutputAmount} (${warning.percentageChange}% change).`;
 
       case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
-        return (
-          "Route swappers has been updated."
-        );
+        return 'Route swappers has been updated.';
       case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
-        return (
-          "Route internal coins has been updated."
-        );
+        return 'Route internal coins has been updated.';
       default:
         return [];
     }
   });
-}
+}

package/src/components/HeaderButtons.tsx

@@ -9,6 +9,7 @@ import {
 } from '@rango-dev/ui';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { i18n } from '@lingui/core';
 
 const ButtonsContainer = styled('div', {
   display: 'flex',
@@ -24,28 +25,25 @@ export function HeaderButtons(props: PropTypes) {
 
   return (
     <ButtonsContainer>
-      <Tooltip content="Refresh">
+      <Tooltip content={i18n.t('Refresh')}>
         <Button
           variant="ghost"
           onClick={onClickRefresh}
-          disabled={!onClickRefresh}
-        >
+          disabled={!onClickRefresh}>
           <RetryIcon size={24} disabled={!onClickRefresh} />
         </Button>
       </Tooltip>
-      <Tooltip content="Transactions History">
+      <Tooltip content={i18n.t('Transactions History')}>
         <Button
           variant="ghost"
-          onClick={() => navigate(navigationRoutes.swaps)}
-        >
+          onClick={() => navigate(navigationRoutes.swaps)}>
           <HistoryIcon size={24} />
         </Button>
       </Tooltip>
-      <Tooltip content="Settings">
+      <Tooltip content={i18n.t('Settings')}>
         <Button
           variant="ghost"
-          onClick={() => navigate(navigationRoutes.settings)}
-        >
+          onClick={() => navigate(navigationRoutes.settings)}>
           <SettingsIcon size={24} />
         </Button>
       </Tooltip>

package/src/components/Layout.tsx

@@ -20,7 +20,7 @@ import {
 } from '../utils/wallets';
 import { removeDuplicateFrom } from '../utils/common';
 import { WidgetConfig } from '../types';
-import { useTranslation } from 'react-i18next';
+import { i18n } from '@lingui/core';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
@@ -57,7 +57,7 @@ export function Layout({ config }: LayoutProps) {
   const { getWalletInfo } = useWallets();
   const connectedWalletsImages = removeDuplicateFrom(
     getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(
-      w => w.image
+      (w) => w.image
     )
   );
   const { blockchains, tokens } = useMetaStore.use.meta();
@@ -69,17 +69,17 @@ export function Layout({ config }: LayoutProps) {
   const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
 
   const totalBalance = calculateWalletUsdValue(connectedWallets);
-  const connectWalletsButtonDisabled = useUiStore.use.connectWalletsButtonDisabled();
+  const connectWalletsButtonDisabled =
+    useUiStore.use.connectWalletsButtonDisabled();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
 
-  const { t } = useTranslation();
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(
-        chain => chain.name === config?.to?.blockchain
+        (chain) => chain.name === config?.to?.blockchain
       );
-      const token = tokens.find(t =>
+      const token = tokens.find((t) =>
         tokensAreEqual(t, config?.to?.token || null)
       );
       setToChain(chain || null);
@@ -94,9 +94,9 @@ export function Layout({ config }: LayoutProps) {
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(
-        chain => chain.name === config?.from?.blockchain
+        (chain) => chain.name === config?.from?.blockchain
       );
-      const token = tokens.find(t =>
+      const token = tokens.find((t) =>
         tokensAreEqual(t, config?.from?.token || null)
       );
 
@@ -132,12 +132,11 @@ export function Layout({ config }: LayoutProps) {
                 ))}
               </WalletImages>
             ) : null
-          }
-        >
+          }>
           <div className="balance">
             <Typography variant="body2">
               {!connectedWallets?.length
-                ? t('Connect Wallet')
+                ? i18n.t('Connect Wallet')
                 : `$${totalBalance || 0}`}
             </Typography>
             {fetchingBalance && <Spinner />}

package/src/components/SwapDetailsPlaceholder.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SecondaryPage, Spinner, Alert, styled } from '@rango-dev/ui';
+import { i18n } from '@lingui/core';
 
 const PlaceholderContainer = styled('div', { height: '450px' });
 
@@ -21,7 +22,10 @@ export function SwapDetailsPlaceholder(props: PropTypes) {
   const { requestId, loading, onBack } = props;
 
   return (
-    <SecondaryPage title="Swap Details" textField={false} onBack={onBack}>
+    <SecondaryPage
+      title={i18n.t('Swap Details')}
+      textField={false}
+      onBack={onBack}>
       <PlaceholderContainer>
         {loading ? (
           <LoaderContainer>
@@ -30,7 +34,11 @@ export function SwapDetailsPlaceholder(props: PropTypes) {
         ) : (
           <Alert
             type="secondary"
-            title={`Swap with request ID = ${requestId} not found.`}
+            title={i18n.t(
+              'swapNotFound',
+              { requestId },
+              { message: 'Swap with request ID = ${requestId} not found.' }
+            )}
           />
         )}
       </PlaceholderContainer>

package/src/components/TokenInfo.tsx

@@ -17,7 +17,8 @@ import { numberToString } from '../utils/numbers';
 import BigNumber from 'bignumber.js';
 import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
-import { useTranslation } from 'react-i18next';
+import { Trans } from '@lingui/react';
+import { i18n } from '@lingui/core';
 import { PercentageChange } from './PercentageChange';
 
 type PropTypes = (
@@ -136,7 +137,6 @@ export function TokenInfo(props: PropTypes) {
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const fetchingBestRoute = useBestRouteStore.use.loading();
   const navigate = useNavigate();
-  const { t } = useTranslation();
 
   const tokenBalance =
     !!fromChain && !!fromToken
@@ -175,8 +175,7 @@ export function TokenInfo(props: PropTypes) {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-      }}
-    >
+      }}>
       {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
       <AngleDownIcon />
     </div>
@@ -187,7 +186,11 @@ export function TokenInfo(props: PropTypes) {
       <Container type={props.type === 'From' ? 'filled' : 'outlined'}>
         <div className="head">
           <Typography variant="body2" color="neutral800">
-            {t(type)}
+            {type === 'From' ? (
+              <Trans id="swap from" message="From" />
+            ) : (
+              <Trans id="swap to" message="To" />
+            )}
           </Typography>
           {props.type === 'From' ? (
             <Options>
@@ -196,14 +199,13 @@ export function TokenInfo(props: PropTypes) {
                 onClick={() => {
                   if (tokenBalance !== '0')
                     setInputAmount(tokenBalanceReal.split(',').join(''));
-                }}
-              >
-                <Typography variant="body3" color="neutral600">{`${t(
-                  'Balance'
-                )}: ${tokenBalance} ${fromToken?.symbol || ''}`}</Typography>
+                }}>
+                <Typography variant="body3" color="neutral600">
+                  {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''}
+                </Typography>
                 <Divider size={4} />
                 <Button type="primary" variant="ghost" size="compact">
-                  {t('Max')}
+                  <Trans id="maximum amount of asset" message="Max" />
                 </Button>
               </div>
             </Options>
@@ -216,8 +218,9 @@ export function TokenInfo(props: PropTypes) {
               <div>
                 <Typography
                   variant="caption"
-                  color="neutral600"
-                >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+                  color="neutral600">{`$${numberToString(
+                  props.outputUsdValue
+                )}`}</Typography>
               </div>
             </div>
           )}
@@ -240,11 +243,10 @@ export function TokenInfo(props: PropTypes) {
             }
             suffix={ItemSuffix}
             align="start"
-            size="large"
-          >
+            size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
-              : t('Chain')}
+              : i18n.t('Chain')}
           </Button>
           <Divider size={12} direction="horizontal" />
           <Button
@@ -268,9 +270,10 @@ export function TokenInfo(props: PropTypes) {
             }
             suffix={ItemSuffix}
             size="large"
-            align="start"
-          >
-            {loadingStatus === 'success' && token ? token.symbol : t('Token')}
+            align="start">
+            {loadingStatus === 'success' && token
+              ? token.symbol
+              : i18n.t('Token')}
           </Button>
           <Divider size={12} direction="horizontal" />
           <div className="amount">
@@ -290,12 +293,12 @@ export function TokenInfo(props: PropTypes) {
                       position: 'absolute',
                       right: '4px',
                       bottom: '2px',
-                    }}
-                  >
+                    }}>
                     <Typography
                       variant="caption"
-                      color="neutral800"
-                    >{`$${numberToString(inputUsdValue)}`}</Typography>
+                      color="neutral800">{`$${numberToString(
+                      inputUsdValue
+                    )}`}</Typography>
                   </span>
                 }
                 value={props.inputAmount || ''}

package/src/components/TokenPreview.tsx

@@ -8,7 +8,7 @@ import {
   Image,
 } from '@rango-dev/ui';
 import { LoadingStatus } from '../store/meta';
-import { useTranslation } from 'react-i18next';
+import { i18n } from '@lingui/core';
 import BigNumber from 'bignumber.js';
 import { numberToString } from '../utils/numbers';
 
@@ -105,7 +105,6 @@ interface PropTypes {
 
 export function TokenPreview(props: PropTypes) {
   const { chain, token, loadingStatus, percentageChange } = props;
-  const { t } = useTranslation();
 
   const ItemSuffix = (
     <div
@@ -113,8 +112,7 @@ export function TokenPreview(props: PropTypes) {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-      }}
-    >
+      }}>
       {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
     </div>
   );
@@ -132,8 +130,9 @@ export function TokenPreview(props: PropTypes) {
               <Typography
                 variant="caption"
                 color="neutral600"
-                className="usd-value"
-              >{`$${numberToString(props.usdValue)}`}</Typography>
+                className="usd-value">{`$${numberToString(
+                props.usdValue
+              )}`}</Typography>
             )}
           </div>
         </div>
@@ -151,11 +150,10 @@ export function TokenPreview(props: PropTypes) {
             }
             suffix={ItemSuffix}
             align="start"
-            size="large"
-          >
+            size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
-              : t('Chain')}
+              : i18n.t('Chain')}
           </Button>
           <Divider size={12} direction="horizontal" />
           <Button
@@ -171,9 +169,10 @@ export function TokenPreview(props: PropTypes) {
             }
             suffix={ItemSuffix}
             size="large"
-            align="start"
-          >
-            {loadingStatus === 'success' && token ? token.symbol : t('Token')}
+            align="start">
+            {loadingStatus === 'success' && token
+              ? token.symbol
+              : i18n.t('Token')}
           </Button>
           <Divider size={12} direction="horizontal" />
           <div className="amount">

package/src/components/warnings/BalanceErrors.tsx

@@ -1,6 +1,6 @@
 import { Divider, styled, Typography } from '@rango-dev/ui';
 import React from 'react';
-
+import { i18n } from '@lingui/core';
 interface PropTypes {
   messages: string[];
 }
@@ -32,7 +32,7 @@ export function BalanceErrors({ messages }: PropTypes) {
   return (
     <>
       <Typography className="title" variant="title" color={'error'}>
-        Insufficent Balance:
+        {i18n.t('Insufficent Balance:')}
       </Typography>
       <Divider size={8} />
       <List showListStyle={showListStyle}>
@@ -44,4 +44,4 @@ export function BalanceErrors({ messages }: PropTypes) {
       </List>
     </>
   );
-}
+}

package/src/components/warnings/HighSlippageWarning.tsx

@@ -1,6 +1,7 @@
 import { Alert } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
+import { i18n } from '@lingui/core';
 
 interface PropTypes {
   selectedSlippage: number;
@@ -11,8 +12,14 @@ export function HighSlippageWarning(props: PropTypes) {
 
   return (
     <Alert type="warning" footer={<ChangeSlippageButton />}>
-      Caution, your slippage is high (=
-      {selectedSlippage}). Your trade may be front run.
+      {i18n.t(
+        'highSlippage',
+        { selectedSlippage },
+        {
+          message:
+            ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
+        }
+      )}
     </Alert>
   );
 }