@rango-dev/widget-embedded 0.5.1-next.2 → 0.5.1-next.21

package/src/pages/WalletsPage.tsx

@@ -18,13 +18,15 @@ 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';
+import { WidgetConfig } from '../types';
+import { configWalletsToWalletName } from '../utils/providers';
 
 interface PropTypes {
-  supportedWallets?: WalletType[];
+  supportedWallets: WidgetConfig['wallets'];
   multiWallets: boolean;
 }
 
@@ -48,13 +50,16 @@ const LoaderContainer = styled('div', {
 const AlertContainer = styled('div', {
   paddingBottom: '$16',
 });
+
+const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
+
 export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const wallets = getlistWallet(
     state,
     getWalletInfo,
-    supportedWallets || Object.values(WalletTypes)
+    configWalletsToWalletName(supportedWallets) || ALL_SUPPORTED_WALLETS
   );
   const walletsRef = useRef<WalletInfo[]>();
 
@@ -66,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);
@@ -110,10 +114,9 @@ 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)}
-    >
+      onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}>
       <>
         {walletErrorMessage && (
           <AlertContainer>

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,27 +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((balance) => {
-            return balance.address === account.address &&
-              balance.chain === account.chain
-              ? { ...balance, loading: true }
-              : balance;
+          connectedWallets: state.connectedWallets.map((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;
                 }
               ),
@@ -160,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,5 +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.
@@ -100,6 +102,9 @@ export type BlockchainAndTokenConfig = {
  * @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
  * used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
  * that defines the various properties of the theme, such as colors, fonts, and others.
+ * @property {boolean} externalWallets
+ * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
+
  */
 export type WidgetConfig = {
   apiKey: string;
@@ -108,9 +113,10 @@ export type WidgetConfig = {
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
-  wallets?: WalletType[];
+  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/providers.ts

@@ -0,0 +1,53 @@
+import { allProviders } from '@rango-dev/provider-all';
+import { ProviderInterface } from '@rango-dev/wallets-core';
+import { WidgetConfig } from '../types';
+
+/**
+ *
+ * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
+ * @returns ProviderInterface[] a list of ProviderInterface
+ *
+ */
+export function matchAndGenerateProviders(
+  providers: WidgetConfig['wallets']
+): ProviderInterface[] {
+  const all = allProviders();
+
+  if (providers) {
+    const selectedProviders: ProviderInterface[] = [];
+
+    providers.forEach((requestedProvider) => {
+      // There are two types of provider we get, the first one is only passing the wallet name
+      // then we will match the wallet name with our providers (@rango-dev/provider-*).
+      // The second way is passing a custom provider which implemented ProviderInterface.
+      if (typeof requestedProvider === 'string') {
+        const result: ProviderInterface | undefined = all.find((provider) => {
+          return provider.config.type === requestedProvider;
+        });
+        if (result) {
+          selectedProviders.push(result);
+        } else {
+          console.warn(
+            `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
+          );
+        }
+      } else {
+        // It's a custom provider so we directly push it to the list.
+        selectedProviders.push(requestedProvider);
+      }
+    });
+    return selectedProviders;
+  }
+
+  return all;
+}
+
+export function configWalletsToWalletName(
+  config: WidgetConfig['wallets']
+): string[] {
+  const providers = matchAndGenerateProviders(config);
+  const names = providers.map((provider) => {
+    return provider.config.type;
+  });
+  return names;
+}

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(
@@ -349,9 +352,19 @@ export function createBestRouteRequestBody(
 
   const filteredBlockchains = removeDuplicateFrom(
     (initialRoute?.result?.swaps || []).reduce(
-      (blockchains: string[], swap) => (
-        blockchains.push(swap.from.blockchain, swap.to.blockchain), blockchains
-      ),
+      (blockchains: string[], swap) => {
+        blockchains.push(swap.from.blockchain, swap.to.blockchain);
+        // Check if internalSwaps array exists
+        if (swap.internalSwaps && Array.isArray(swap.internalSwaps)) {
+          swap.internalSwaps.map((internalSwap) => {
+            blockchains.push(
+              internalSwap.from.blockchain,
+              internalSwap.to.blockchain
+            );
+          });
+        }
+        return blockchains;
+      },
       []
     )
   );

package/src/utils/wallets.ts

@@ -93,13 +93,18 @@ export function prepareAccountsForWalletStore(
   const result: Wallet[] = [];
 
   function addAccount(network: Network, address: string) {
-    const newAccount: Wallet = {
-      address,
-      chain: network,
-      walletType: wallet,
-    };
+    const accountForChainAlreadyExists = !!result.find(
+      (account) => account.chain === network
+    );
+    if (!accountForChainAlreadyExists) {
+      const newAccount: Wallet = {
+        address,
+        chain: network,
+        walletType: wallet,
+      };
 
-    result.push(newAccount);
+      result.push(newAccount);
+    }
   }
 
   const supportedChains = supportedChainNames || [];
@@ -154,12 +159,26 @@ export function getRequiredChains(route: BestRouteResponse | null) {
   route?.result?.swaps.forEach((swap) => {
     const currentStepFromBlockchain = swap.from.blockchain;
     const currentStepToBlockchain = swap.to.blockchain;
-    let lastAddedWallet = wallets[wallets.length - 1];
-    if (currentStepFromBlockchain != lastAddedWallet)
+    if (!wallets.includes(currentStepFromBlockchain)) {
       wallets.push(currentStepFromBlockchain);
-    lastAddedWallet = wallets[wallets.length - 1];
-    if (currentStepToBlockchain != lastAddedWallet)
+    }
+    if (!wallets.includes(currentStepToBlockchain)) {
       wallets.push(currentStepToBlockchain);
+    }
+
+    // Check if internalSwaps array exists
+    if (swap.internalSwaps && Array.isArray(swap.internalSwaps)) {
+      swap.internalSwaps.forEach((internalSwap) => {
+        const internalStepFromBlockchain = internalSwap.from.blockchain;
+        const internalStepToBlockchain = internalSwap.to.blockchain;
+        if (!wallets.includes(internalStepFromBlockchain)) {
+          wallets.push(internalStepFromBlockchain);
+        }
+        if (!wallets.includes(internalStepToBlockchain)) {
+          wallets.push(internalStepToBlockchain);
+        }
+      });
+    }
   });
   return wallets;
 }
@@ -234,7 +253,8 @@ export function isAccountAndWalletMatched(
 ) {
   return (
     account.address === connectedWallet.address &&
-    account.chain === connectedWallet.chain
+    account.chain === connectedWallet.chain &&
+    account.walletType === connectedWallet.walletType
   );
 }
 

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;4BAIR,MAAM;;EAQtC"}

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/dist/mockData/pendingSwap.d.ts

@@ -1,2 +0,0 @@
-export declare const pendingSwap: any;
-//# sourceMappingURL=pendingSwap.d.ts.map

package/dist/mockData/pendingSwap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pendingSwap.d.ts","sourceRoot":"","sources":["../../src/mockData/pendingSwap.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,WAAW,EAAE,GA6lBzB,CAAC"}

package/src/hooks/useSelectLanguage.ts

@@ -1,15 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-export default function useSelectLanguage() {
-  const { i18n } = useTranslation();
-  // @ts-ignore
-  const currentLanguage = i18n?.language || 'en';
-  const changeLanguage = (value: string) => {
-    if (currentLanguage !== value) {
-      // @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;