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

package/src/components/WidgetEvents.tsx

@@ -10,7 +10,7 @@ import { useWalletsStore } from '../store/wallets';
 
 export function WidgetEvents() {
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
+  const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
 
   const widgetEvents = useEvents();
 
@@ -20,7 +20,7 @@ export function WidgetEvents() {
       const shouldRefetchBalance =
         (event.type === StepEventType.TX_EXECUTION &&
           event.status === StepExecutionEventStatus.TX_SENT &&
-          isApprovalTX(step)) ||
+          !isApprovalTX(step)) ||
         event.type === StepEventType.SUCCEEDED;
 
       if (shouldRefetchBalance) {
@@ -33,8 +33,8 @@ export function WidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getOneOfWalletsDetails(fromAccount);
-        toAccount && getOneOfWalletsDetails(toAccount);
+        fromAccount && getWalletsDetails([fromAccount]);
+        toAccount && getWalletsDetails([toAccount]);
       }
     });
 

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>
   );
 }

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/store/wallets.ts

@@ -45,7 +45,7 @@ interface WalletsStore {
   initSelectedWallets: () => void;
   setSelectedWallet: (wallet: SelectableWallet) => void;
   clearConnectedWallet: () => void;
-  getOneOfWalletsDetails: (account: Wallet) => void;
+  getWalletsDetails: (accounts: Wallet[], shouldRetry?: boolean) => void;
   setCustomDestination: (customDestination: string) => void;
 }
 
@@ -56,7 +56,7 @@ export const useWalletsStore = createSelectors(
       selectedWallets: [],
       customDestination: '',
       connectWallet: (accounts) => {
-        const getOneOfWalletsDetails = get().getOneOfWalletsDetails;
+        const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
           connectedWallets: state.connectedWallets
             .filter((wallet) => wallet.walletType !== accounts[0].walletType)
@@ -72,7 +72,7 @@ export const useWalletsStore = createSelectors(
               }))
             ),
         }));
-        accounts.forEach(async (account) => getOneOfWalletsDetails(account));
+        getWalletsDetails(accounts);
       },
       disconnectWallet: (walletType) => {
         set((state) => ({
@@ -131,26 +131,50 @@ export const useWalletsStore = createSelectors(
           connectedWallets: [],
           selectedWallets: [],
         })),
-      getOneOfWalletsDetails: async (account: Wallet) => {
-        const tokens = useMetaStore.getState().meta.tokens;
+      getWalletsDetails: async (accounts, shouldRetry = true) => {
+        const getWalletsDetails = get().getWalletsDetails;
+        const { tokens } = useMetaStore.getState().meta;
         set((state) => ({
           connectedWallets: state.connectedWallets.map((wallet) => {
-            return isAccountAndWalletMatched(account, wallet)
+            return accounts.find((account) =>
+              isAccountAndWalletMatched(account, wallet)
+            )
               ? { ...wallet, loading: true }
               : wallet;
           }),
         }));
         try {
-          const response = await httpService().getWalletsDetails([
-            { address: account.address, blockchain: account.chain },
-          ]);
-          const retrivedBalance = response.wallets[0];
+          const data = accounts.map(({ address, chain }) => ({
+            address,
+            blockchain: chain,
+          }));
+          const response = await httpService().getWalletsDetails(data);
+          const retrivedBalance = response.wallets;
           if (retrivedBalance) {
             set((state) => ({
               connectedWallets: state.connectedWallets.map(
                 (connectedWallet) => {
-                  return isAccountAndWalletMatched(account, connectedWallet)
-                    ? makeBalanceFor(account, retrivedBalance, tokens)
+                  const matchedAccount = accounts.find((account) =>
+                    isAccountAndWalletMatched(account, connectedWallet)
+                  );
+                  const retrivedBalanceAccount = retrivedBalance.find(
+                    (balance) =>
+                      balance.address === connectedWallet.address &&
+                      balance.blockChain === connectedWallet.chain
+                  );
+                  if (
+                    retrivedBalanceAccount?.failed &&
+                    matchedAccount &&
+                    shouldRetry
+                  ) {
+                    getWalletsDetails([matchedAccount], false);
+                  }
+                  return matchedAccount && retrivedBalanceAccount
+                    ? makeBalanceFor(
+                        matchedAccount,
+                        retrivedBalanceAccount,
+                        tokens
+                      )
                     : connectedWallet;
                 }
               ),
@@ -159,7 +183,9 @@ export const useWalletsStore = createSelectors(
         } catch (error) {
           set((state) => ({
             connectedWallets: state.connectedWallets.map((balance) => {
-              return isAccountAndWalletMatched(account, balance)
+              return accounts.find((account) =>
+                isAccountAndWalletMatched(account, balance)
+              )
                 ? resetConnectedWalletState(balance)
                 : balance;
             }),

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;