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

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -1,6 +1,7 @@
 import { Divider, Typography, styled } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
+import { i18n } from '@lingui/core';
 
 interface PropTypes {
   minRequiredSlippage: string | null;
@@ -13,10 +14,16 @@ const StyledMessage = styled(Typography, {
 export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
   return (
     <StyledMessage variant="body2">
-      We recommend you to increase slippage to at least &nbsp;
-      {minRequiredSlippage}
-      &nbsp; for this route.
-      <Divider size={8}/>
+      {i18n.t(
+        'increaseSlippage',
+        { minRequiredSlippage },
+        {
+          message:
+            'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+        }
+      )}
+
+      <Divider size={8} />
       <ChangeSlippageButton />
     </StyledMessage>
   );

package/src/hooks/useConfirmSwap.ts

@@ -10,7 +10,7 @@ import {
   ConfirmSwapWarnings,
   PendingSwapSettings,
 } from '../types';
-import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
+
 import {
   createBestRouteRequestBody,
   getBalanceWarnings,
@@ -33,7 +33,10 @@ import {
 } from '../utils/routing';
 import { numberToString } from '../utils/numbers';
 import { BestRouteResponse } from 'rango-sdk';
-import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import {
+  calculatePendingSwap,
+  PendingSwap,
+} from '@rango-dev/queue-manager-rango-preset';
 
 type ConfirmSwap = {
   loading: boolean;
@@ -63,7 +66,7 @@ export function useConfirmSwap(): ConfirmSwap {
   const userSlippage = customSlippage || slippage;
   const proceedAnywayRef = useRef(false);
   const confiremedRouteRef = useRef<BestRouteResponse | null>(null);
-  let abortControllerRef = useRef<AbortController | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<ConfirmSwapError[]>([]);

package/src/pages/ConfirmSwapPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useWalletsStore } from '../store/wallets';
 import { useWallets } from '@rango-dev/wallets-core';
+import { i18n } from '@lingui/core';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
   getKeplrCompatibleConnectedWallets,
@@ -20,7 +21,6 @@ import { useMetaStore } from '../store/meta';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { TokenPreview } from '../components/TokenPreview';
-import { t } from 'i18next';
 import { Divider, ConfirmSwap, LoadingFailedAlert } from '@rango-dev/ui';
 import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -179,7 +179,7 @@ export function ConfirmSwapPage({
             }}
             usdValue={inputUsdValue}
             amount={fromAmount}
-            label={t('From')}
+            label={i18n.t('From')}
             loadingStatus={
               loadingMetaStatus !== 'success'
                 ? loadingMetaStatus
@@ -198,7 +198,7 @@ export function ConfirmSwapPage({
             }}
             usdValue={outputUsdValue}
             amount={toAmount}
-            label={t('To')}
+            label={i18n.t('To')}
             loadingStatus={
               loadingMetaStatus !== 'success'
                 ? loadingMetaStatus
@@ -239,8 +239,8 @@ export function ConfirmSwapPage({
       }
       confirmButtonTitle={
         warnings.length > 0 || errors.length > 0
-          ? 'Proceed anyway!'
-          : 'Confirm swap!'
+          ? `${i18n.t('Proceed anyway!')}`
+          : `${i18n.t('Confirm swap!')}`
       }
     />
   );

package/src/pages/Home.tsx

@@ -8,6 +8,7 @@ import {
   Header,
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
+import { i18n } from '@lingui/core';
 import { useInRouterContext, useNavigate } from 'react-router-dom';
 import { TokenInfo } from '../components/TokenInfo';
 import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
@@ -136,7 +137,7 @@ export function Home() {
   return (
     <Container>
       <Header
-        title="SWAP"
+        title={i18n.t('SWAP')}
         suffix={
           <HeaderButtons
             onClickRefresh={

package/src/pages/WalletsPage.tsx

@@ -18,7 +18,7 @@ import { useWallets } from '@rango-dev/wallets-core';
 import { useUiStore } from '../store/ui';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { useTranslation } from 'react-i18next';
+import { i18n } from '@lingui/core';
 import { useMetaStore } from '../store/meta';
 import { Spinner } from '@rango-dev/ui';
 import { LoadingFailedAlert } from '@rango-dev/ui';
@@ -71,7 +71,6 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const toggleConnectWalletsButton =
     useUiStore.use.toggleConnectWalletsButton();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const { t } = useTranslation();
 
   const onSelectWallet = async (type: WalletType) => {
     const wallet = state(type);
@@ -115,7 +114,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
 
   return (
     <SecondaryPage
-      title={t('Select Wallet') || ''}
+      title={i18n.t('Select Wallet') || ''}
       textField={false}
       onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}>
       <>

package/src/types/config.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.
@@ -115,7 +116,7 @@ export type WidgetConfig = {
   wallets?: (WalletType | ProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
-  language?: string;
+  language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
 };

package/src/types/swap.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,

package/src/utils/routing.ts

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

package/src/utils/swap.ts

@@ -6,6 +6,7 @@ import {
   SwapResult,
   Token,
 } from 'rango-sdk';
+import { i18n } from '@lingui/core';
 import { ConnectedWallet } from '../store/wallets';
 import { ZERO } from '../constants/numbers';
 import { numberToString } from './numbers';
@@ -132,30 +133,32 @@ export function getSwapButtonState(
   inputAmount: string
 ): SwapButtonState {
   if (loadingMetaStatus !== 'success')
-    return { title: 'Connect Wallet', disabled: true };
+    return { title: `${i18n.t('Connect Wallet')}`, disabled: true };
   if (connectedWallets.length == 0)
-    return { title: 'Connect Wallet', disabled: false };
-  if (loading) return { title: 'Finding Best Route...', disabled: true };
+    return { title: `${i18n.t('Connect Wallet')}`, disabled: false };
+  if (loading)
+    return { title: `${i18n.t('Finding Best Route...')}`, disabled: true };
   else if (!inputAmount || inputAmount === '0')
-    return { title: 'Enter an amount', disabled: true };
+    return { title: `${i18n.t('Enter an amount')}`, disabled: true };
   else if (!bestRoute || !bestRoute.result)
-    return { title: 'Swap', disabled: true };
-  else if (hasLimitError) return { title: 'Limit Error', disabled: true };
+    return { title: `${i18n.t('Swap')}`, disabled: true };
+  else if (hasLimitError)
+    return { title: `${i18n.t('Limit Error')}`, disabled: true };
   else if (highValueLoss)
-    return { title: 'Price impact is too high!', disabled: true };
+    return { title: `${i18n.t('Price impact is too high!')}`, disabled: true };
   else if (priceImpactCanNotBeComputed)
     return {
-      title: 'USD price is unknown, price impact might be high!',
+      title: `${i18n.t('USD price is unknown, price impact might be high!')}`,
       disabled: false,
       hasWarning: true,
     };
   else if (needsToWarnEthOnPath)
     return {
-      title: 'The route goes through Ethereum. Continue?',
+      title: `${i18n.t('The route goes through Ethereum. Continue?')}`,
       disabled: false,
       hasWarning: true,
     };
-  else return { title: 'Swap', disabled: false };
+  else return { title: `${i18n.t('Swap')}`, disabled: false };
 }
 
 export function canComputePriceImpact(

package/dist/hooks/useSelectLanguage.d.ts

@@ -1,5 +0,0 @@
-export default function useSelectLanguage(): {
-    changeLanguage: (value: string) => void;
-    currentLanguage: string;
-};
-//# sourceMappingURL=useSelectLanguage.d.ts.map

package/dist/hooks/useSelectLanguage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSelectLanguage.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelectLanguage.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,iBAAiB;4BAKR,MAAM;;EAStC"}

package/dist/i18n.d.ts

@@ -1,3 +0,0 @@
-export default i18n;
-import i18n from "i18next";
-//# sourceMappingURL=i18n.d.ts.map

package/dist/i18n.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.js"],"names":[],"mappings":""}

package/src/hooks/useSelectLanguage.ts

@@ -1,17 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-export default function useSelectLanguage() {
-  const { i18n } = useTranslation();
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const currentLanguage = i18n?.language || 'en';
-  const changeLanguage = (value: string) => {
-    if (currentLanguage !== value) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      i18n.changeLanguage(value);
-    }
-  };
-
-  return { changeLanguage, currentLanguage };
-}

package/src/i18n.js

@@ -1,30 +0,0 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import en from './languages/en.json';
-import tr from './languages/tr.json';
-import Backend from 'i18next-http-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
-
-const languages = ['en', 'tr'];
-
-i18n
-  .use(Backend)
-  // detect user language
-  .use(LanguageDetector)
-  // pass the i18n instance to react-i18next.
-  .use(initReactI18next)
-  .init({
-    resources: {
-      en: {
-        translation: en,
-      },
-      tr: {
-        translation: tr,
-      },
-    },
-    fallbackLng: 'en',
-    debug: true,
-    whitelist: languages,
-  });
-
-export default i18n;