@rango-dev/widget-embedded 0.5.1-next.8 → 0.6.0

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/bestRoute.ts

@@ -24,16 +24,18 @@ import { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
 
-const getUsdValue = (token: Token | null, amount: string) =>
-  new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
+const getUsdValue = (token: Token | null, amount: string): BigNumber | null =>
+  token?.usdPrice
+    ? new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0)
+    : null;
 
 export interface RouteState {
   fromChain: BlockchainMeta | null;
   toChain: BlockchainMeta | null;
   inputAmount: string;
-  inputUsdValue: BigNumber;
+  inputUsdValue: BigNumber | null;
   outputAmount: BigNumber | null;
-  outputUsdValue: BigNumber;
+  outputUsdValue: BigNumber | null;
   fromToken: TokenWithBalance | null;
   toToken: TokenWithBalance | null;
   loading: boolean;
@@ -262,8 +264,14 @@ const bestRoute = (
   const fetchBestRoute = () => {
     const { fromToken, toToken, inputAmount, resetRoute } =
       bestRouteStore.getState();
-    const { slippage, customSlippage, disabledLiquiditySources, affiliateRef } =
-      settingsStore.getState();
+    const {
+      slippage,
+      customSlippage,
+      disabledLiquiditySources,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+    } = settingsStore.getState();
     if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
     abortController?.abort();
     abortController = new AbortController();
@@ -276,7 +284,9 @@ const bestRoute = (
       [],
       disabledLiquiditySources,
       userSlippage,
-      affiliateRef
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets
     );
 
     if (!bestRouteStore.getState().loading) {
@@ -306,7 +316,7 @@ const bestRoute = (
   const bestRouteParamsListener = () => {
     const { fromToken, toToken, inputAmount, inputUsdValue, resetRoute } =
       useBestRouteStore.getState();
-    if (!isPositiveNumber(inputAmount) || inputUsdValue.eq(0))
+    if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0))
       return bestRouteStore.setState({ loading: false });
 
     if (tokensAreEqual(fromToken, toToken))

package/src/store/settings.ts

@@ -14,6 +14,8 @@ export interface SettingsState {
   disabledLiquiditySources: string[];
   theme: Theme;
   affiliateRef: string | null;
+  affiliatePercent: number | null;
+  affiliateWallets: { [key: string]: string } | null;
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
   toggleInfiniteApprove: () => void;
@@ -21,6 +23,10 @@ export interface SettingsState {
   setTheme: (theme: Theme) => void;
   toggleAllLiquiditySources: () => void;
   setAffiliateRef: (affiliateRef: string | null) => void;
+  setAffiliatePercent: (affiliatePercent: number | null) => void;
+  setAffiliateWallets: (
+    affiliateWallets: { [key: string]: string } | null
+  ) => void;
 }
 
 export const useSettingsStore = createSelectors(
@@ -31,6 +37,8 @@ export const useSettingsStore = createSelectors(
         customSlippage: null,
         infiniteApprove: false,
         affiliateRef: null,
+        affiliatePercent: null,
+        affiliateWallets: null,
         disabledLiquiditySources: [],
         theme: 'auto',
         setSlippage: (slippage) =>
@@ -45,6 +53,15 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             affiliateRef,
           })),
+        setAffiliatePercent: (affiliatePercent) =>
+          set(() => ({
+            affiliatePercent,
+          })),
+
+        setAffiliateWallets: (affiliateWallets) =>
+          set(() => ({
+            affiliateWallets,
+          })),
         toggleAllLiquiditySources: () =>
           set((state) => {
             const { swappers } = useMetaStore.getState().meta;

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.
@@ -51,6 +52,23 @@ export type WidgetTheme = {
   singleTheme?: boolean;
 };
 
+/**
+ * If you want to charge users fee per transaction, you should
+ * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
+ * @property {string | null} ref - To enable dApps to charge affiliate fees and generate income from
+ * users' transactions, the affiliate referral code should be provided. You can create this code by
+ * visiting the following link: https://app.rango.exchange/affiliate.
+ * @property {number | null} percent - If you want to change the default affiliate fee percentage,
+ * you can provide a new value here.
+ * @property {{ [key: string]: string }} wallets - If you want to change the default affiliate wallet
+ *  addresses, you can provide new values here. (Map of route blockchains to affiliate address)
+ */
+export type WidgeAffiliate = {
+  ref?: string;
+  percent?: number;
+  wallets?: { [key: string]: string };
+};
+
 /**
  * `BlockchainAndTokenConfig`
  *
@@ -75,8 +93,8 @@ export type BlockchainAndTokenConfig = {
  * and theme.
  *
  * @property {string} apiKey - The API key used to communicate with Rango API
- * @property {string} affiliateRef - The affiliate reference is an optional string property in the
- * WidgetConfig type. It is used to set and track referrals or affiliations for the dApps.
+ * @property {WidgeAffiliate} affiliate - If you want to charge users fee per transaction, you should 
+ * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
  * @property {number} amount - The default input amount.
  * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
  * `BlockchainAndTokenConfig` that specifies the default blockchain and token from which the user wants to
@@ -107,7 +125,7 @@ export type BlockchainAndTokenConfig = {
  */
 export type WidgetConfig = {
   apiKey: string;
-  affiliateRef?: string;
+  affiliate?: WidgeAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
@@ -115,7 +133,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';
@@ -22,22 +23,29 @@ import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 import { removeDuplicateFrom } from './common';
 
 export function getOutputRatio(
-  inputUsdValue: BigNumber,
-  outputUsdValue: BigNumber
+  inputUsdValue: BigNumber | null,
+  outputUsdValue: BigNumber | null
 ) {
-  if (inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) return 0;
+  if (
+    !inputUsdValue ||
+    !outputUsdValue ||
+    inputUsdValue.lte(ZERO) ||
+    outputUsdValue.lte(ZERO)
+  )
+    return 0;
   return outputUsdValue.div(inputUsdValue).minus(1).multipliedBy(100);
 }
 
 export function outputRatioHasWarning(
-  inputUsdValue: BigNumber,
+  inputUsdValue: BigNumber | null,
   outputRatio: BigNumber | 0
-) {
+): boolean {
   return (
-    (parseInt(outputRatio.toFixed(2) || '0') <= -10 &&
-      inputUsdValue.gte(new BigNumber(400))) ||
-    (parseInt(outputRatio.toFixed(2) || '0') <= -5 &&
-      inputUsdValue.gte(new BigNumber(1000)))
+    ((parseInt(outputRatio.toFixed(2) || '0') <= -10 &&
+      inputUsdValue?.gte(new BigNumber(400))) ||
+      (parseInt(outputRatio.toFixed(2) || '0') <= -5 &&
+        inputUsdValue?.gte(new BigNumber(1000)))) ??
+    false
   );
 }
 
@@ -132,40 +140,45 @@ 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(
   bestRoute: BestRouteResponse | null,
   inputAmount: string,
-  inputUsdValue: BigNumber,
-  outputUsdValue: BigNumber
+  inputUsdValue: BigNumber | null,
+  outputUsdValue: BigNumber | null
 ) {
   return !(
-    (inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) &&
+    (!inputUsdValue ||
+      !outputUsdValue ||
+      inputUsdValue.lte(ZERO) ||
+      outputUsdValue.lte(ZERO)) &&
     !!bestRoute?.result &&
     !!inputAmount &&
     inputAmount !== '0' &&
@@ -317,6 +330,8 @@ export function createBestRouteRequestBody(
   disabledLiquiditySources: string[],
   slippage: number,
   affiliateRef: string | null,
+  affiliatePercent: number | null,
+  affiliateWallets: { [key: string]: string } | null,
   initialRoute?: BestRouteResponse,
   destination?: string
 ): BestRouteRequest {
@@ -349,16 +364,28 @@ 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;
+      },
       []
     )
   );
 
   const requestBody: BestRouteRequest = {
     amount: inputAmount.toString(),
-    affiliateRef,
+    affiliateRef: affiliateRef ?? undefined,
+    affiliatePercent: affiliatePercent ?? undefined,
+    affiliateWallets: affiliateWallets ?? undefined,
     checkPrerequisites,
     from: {
       address: fromToken.address,

package/src/utils/wallets.ts

@@ -159,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;
 }

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;