@rango-dev/widget-embedded 0.12.1-next.9 → 0.13.0

package/src/store/slices/data.ts

@@ -0,0 +1,203 @@
+// We keep all the received data from server in this slice
+
+import type { ConfigSlice } from './config';
+import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
+import type { StateCreator } from 'zustand';
+
+import { httpService as sdk } from '../../services/httpService';
+import { containsText } from '../../utils/common';
+import { tokensAreEqual } from '../../utils/wallets';
+
+type BlockchainOptions = {
+  type?: 'source' | 'destination';
+};
+
+type TokenOptions = {
+  type?: 'source' | 'destination';
+  // filter by an specific blockchain
+  blockchain?: string;
+  searchFor?: string;
+};
+
+export interface DataSlice {
+  _blockchains: BlockchainMeta[];
+  _tokens: Token[];
+  _popularTokens: Token[];
+  _swappers: SwapperMeta[];
+
+  blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
+  tokens: (options?: TokenOptions) => Token[];
+  isTokenPinned: (token: Token) => boolean;
+
+  fetch: () => Promise<void>;
+}
+
+export const createDataSlice: StateCreator<
+  DataSlice & ConfigSlice,
+  [],
+  [],
+  DataSlice
+> = (set, get) => ({
+  // State
+  _blockchains: [],
+  _tokens: [],
+  _popularTokens: [],
+  _swappers: [],
+
+  // Selectors
+  blockchains: (options) => {
+    const blockchainsFromState = get()._blockchains;
+
+    if (!options || !options?.type) {
+      return blockchainsFromState;
+    }
+
+    const config = get().config;
+    const supportedBlockchainsFromConfig =
+      (options.type === 'source'
+        ? config.from?.blockchains
+        : config.to?.blockchains) ?? [];
+
+    const list = blockchainsFromState.filter((blockchain) => {
+      if (
+        supportedBlockchainsFromConfig.length > 0 &&
+        !supportedBlockchainsFromConfig.includes(blockchain.name)
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+
+    return list;
+  },
+  tokens: (options) => {
+    const tokensFromState = get()._tokens;
+
+    if (!options || !options?.type) {
+      return tokensFromState;
+    }
+
+    const config = get().config;
+    const supportedTokensFromConfig =
+      (options.type === 'source' ? config.from?.tokens : config.to?.tokens) ??
+      [];
+    const blockchains = get().blockchains({
+      type: options.type,
+    });
+
+    const list = tokensFromState
+      .filter((token) => {
+        // If there is a list of tokens in config, we only keep them.
+        if (
+          supportedTokensFromConfig.length > 0 &&
+          !supportedTokensFromConfig.some((asset) => {
+            return tokensAreEqual(asset, token);
+          })
+        ) {
+          return false;
+        }
+
+        // If a specific blockchain has passed, we only keep that blockchain's tokens.
+        if (!!options.blockchain && token.blockchain !== options.blockchain) {
+          return false;
+        }
+
+        // Check only available blockchains
+        if (
+          !blockchains.some((blockchain) => {
+            return blockchain.name === token.blockchain;
+          })
+        ) {
+          return false;
+        }
+
+        // Search functionality
+        if (options.searchFor) {
+          if (
+            containsText(token.symbol, options.searchFor) ||
+            containsText(token.address || '', options.searchFor) ||
+            containsText(token.name || '', options.searchFor)
+          ) {
+            return true;
+          }
+
+          return false;
+        }
+
+        return true;
+      })
+      .sort((a, b) => {
+        // Check pinned tokens
+        if (get().isTokenPinned(a)) {
+          return -1;
+        }
+        if (get().isTokenPinned(b)) {
+          return 1;
+        }
+
+        // Check secondary coins
+        if (a.isSecondaryCoin) {
+          return 1;
+        }
+        if (b.isSecondaryCoin) {
+          return -1;
+        }
+
+        // Check it has an address or not.
+        if (!a.address && b.address) {
+          return -1;
+        }
+        if (a.address && !b.address) {
+          return 1;
+        }
+
+        return 0;
+      });
+
+    return list;
+  },
+  isTokenPinned: (token) => {
+    const pinned = !!get().config.pinnedTokens?.some((pinnedToken) =>
+      tokensAreEqual(pinnedToken, token)
+    );
+    return pinned;
+  },
+
+  // Actions
+  fetch: async () => {
+    const response = await sdk().getAllMetadata();
+
+    const blockchains: BlockchainMeta[] = [];
+    const tokens: Token[] = [];
+    const popularTokens: Token[] = response.popularTokens;
+    const swappers: SwapperMeta[] = response.swappers;
+
+    const blockchainsWithAtLeastOneToken = new Set();
+
+    response.tokens.forEach((token) => {
+      blockchainsWithAtLeastOneToken.add(token.blockchain);
+
+      tokens.push(token);
+    });
+
+    response.blockchains.forEach((blockchain) => {
+      if (
+        blockchain.enabled &&
+        blockchainsWithAtLeastOneToken.has(blockchain.name)
+      ) {
+        blockchains.push(blockchain);
+      }
+    });
+
+    // Sort
+    blockchains.sort((a, b) => a.sort - b.sort);
+
+    set({
+      _blockchains: blockchains,
+      _tokens: tokens,
+      _popularTokens: popularTokens,
+      _swappers: swappers,
+    });
+  },
+});

package/src/store/wallets.ts

@@ -3,18 +3,14 @@ import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
-import { shallow } from 'zustand/shallow';
 
 import { httpService } from '../services/httpService';
 import {
-  getTokensWithBalance,
   isAccountAndWalletMatched,
   makeBalanceFor,
   resetConnectedWalletState,
-  sortTokens,
 } from '../utils/wallets';
 
-import { useBestRouteStore } from './bestRoute';
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
@@ -212,28 +208,5 @@ export const useWalletsStore = createSelectors(
   )
 );
 
-useWalletsStore.subscribe(
-  (state) => state.connectedWallets,
-  (connectedWallets) => {
-    useBestRouteStore.setState(({ sourceTokens, destinationTokens }) => {
-      const sourceTokensWithBalance = getTokensWithBalance(
-        sourceTokens,
-        connectedWallets
-      );
-      const destinationTokensWithBalance = getTokensWithBalance(
-        destinationTokens,
-        connectedWallets
-      );
-      return {
-        sourceTokens: sortTokens(sourceTokensWithBalance),
-        destinationTokens: sortTokens(destinationTokensWithBalance),
-      };
-    });
-  },
-  {
-    equalityFn: shallow,
-  }
-);
-
 export const fetchingBalanceSelector = (state: WalletsStore) =>
   !!state.connectedWallets.find((wallet) => wallet.loading);

package/src/types/config.ts

@@ -38,6 +38,8 @@ export type WidgetColors = {
  * border color
  * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
  * specifies the radius of the corners of a widget.
+ * @property {number} secondaryBorderRadius - `secondaryBorderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the buttons of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
  * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
@@ -47,6 +49,7 @@ export type WidgetTheme = {
   fontFamily?: string;
   colors?: { light: WidgetColors; dark: WidgetColors };
   borderRadius?: number;
+  secondaryBorderRadius?: number;
   width?: number;
   height?: number;
   singleTheme?: boolean;

package/src/utils/common.ts

@@ -78,3 +78,6 @@ export const generateRangeColors = (name: string, color: string) => {
   }
   return colors;
 };
+
+export const getContainer = () =>
+  document.getElementById('swap-box') as HTMLElement;

package/src/utils/configs.ts

@@ -1,9 +1,9 @@
+import { RANGO_PUBLIC_API_KEY } from '../constants';
+
 export interface Configs {
   API_KEY: string;
 }
 
-const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
-
 let configs: Configs = {
   API_KEY: RANGO_PUBLIC_API_KEY,
 };
@@ -18,6 +18,9 @@ export function setConfig(name: keyof Configs, value: any) {
   return value;
 }
 
+/**
+ * Getting new configs from params and reset the value of global `configs` with provided param.
+ */
 export function initConfig(nextConfigs: Configs) {
   let clonedConfigs;
   if (typeof structuredClone === 'function') {
@@ -28,3 +31,6 @@ export function initConfig(nextConfigs: Configs) {
   configs = clonedConfigs;
   return configs;
 }
+
+export const DEFAULT_PRIMARY_RADIUS = 20;
+export const DEFAULT_SECONDARY_RADIUS = 25;

package/src/utils/meta.ts

@@ -7,3 +7,10 @@ export function getBlockchainDisplayNameFor(
   return blockchains.find((blockchain) => blockchain.name === blockchainName)
     ?.displayName;
 }
+export function getBlockchainShortNameFor(
+  blockchainName: string,
+  blockchains: BlockchainMeta[]
+): string | undefined {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.shortName;
+}

package/src/utils/numbers.ts

@@ -147,8 +147,9 @@ export function removeExtraDecimals(num: string, maxDecimals: number): string {
   }
 }
 
-export const totalArrivalTime = (data: BestRouteResponse | null) =>
-  data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
+export const totalArrivalTime = (
+  data: { estimatedTimeInSeconds: number | null }[] | undefined
+) => data?.reduce((a, b) => a + (b.estimatedTimeInSeconds ?? 0), 0) || 0;
 
 export const rawFees = (data: BestRouteResponse): string =>
   (

package/src/utils/routing.ts

@@ -1,14 +1,29 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { BestRouteEqualityParams, Wallet } from '../types';
 import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { PriceImpactWarningLevel } from '@rango-dev/ui';
 import type {
   SimulationAssetAndAmount,
   SimulationValidationStatus,
 } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
-import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+import type {
+  Asset,
+  BestRouteResponse,
+  BlockchainMeta,
+  Token,
+} from 'rango-sdk';
 
 import BigNumber from 'bignumber.js';
 
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  HIGHT_PRICE_IMPACT,
+  LOW_PRICE_IMPACT,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../constants/routing';
+
 import { areEqual } from './common';
 import { numberToString } from './numbers';
 
@@ -149,43 +164,63 @@ export function isRouteParametersChanged(params: BestRouteEqualityParams) {
   return false;
 }
 
-export function getFormatedBestRoute(
+export function getFormattedBestRoute(
   bestRoute: BestRouteResponse | null
 ): BestRouteResponse | null {
   if (!bestRoute) {
     return null;
   }
 
-  const formatedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
+  const formattedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
     ...swap,
-    fromAmount: numberToString(swap.fromAmount, 6, 6),
-    toAmount: numberToString(swap.toAmount, 6, 6),
+    fromAmount: numberToString(
+      swap.fromAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    toAmount: numberToString(
+      swap.toAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
   }));
 
   return {
     ...bestRoute,
     ...(bestRoute.result && {
-      result: { ...bestRoute.result, swaps: formatedSwaps },
+      result: { ...bestRoute.result, swaps: formattedSwaps },
     }),
   };
 }
 
-export function getFormatedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
-  const formatedSteps = pendingSwap.steps.map((step) => ({
+export function getFormattedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
+  const formattedSteps = pendingSwap.steps.map((step) => ({
     ...step,
-    feeInUsd: numberToString(step.feeInUsd, 4, 4),
-    outputAmount: numberToString(step.outputAmount, 6, 6),
+    feeInUsd: numberToString(
+      step.feeInUsd,
+      GAS_FEE_MIN_DECIMALS,
+      GAS_FEE_MAX_DECIMALS
+    ),
+    outputAmount: numberToString(
+      step.outputAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
     expectedOutputAmountHumanReadable: numberToString(
       step.expectedOutputAmountHumanReadable,
-      6,
-      6
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
     ),
   }));
 
   return {
     ...pendingSwap,
-    inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
-    steps: formatedSteps,
+    inputAmount: numberToString(
+      pendingSwap.inputAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    steps: formattedSteps,
   };
 }
 
@@ -199,3 +234,30 @@ export const getBestRouteStatus = (loading: boolean, error: boolean) => {
   }
   return 'success';
 };
+
+export function getPriceImpactLevel(
+  priceImpact: number
+): PriceImpactWarningLevel {
+  let warningLevel: PriceImpactWarningLevel = undefined;
+  if (priceImpact <= LOW_PRICE_IMPACT && priceImpact > HIGHT_PRICE_IMPACT) {
+    warningLevel = 'low';
+  } else if (priceImpact <= HIGHT_PRICE_IMPACT) {
+    warningLevel = 'high';
+  }
+
+  return warningLevel;
+}
+
+export function findCommonTokens<T extends Asset[], R extends Asset[]>(
+  listA: T,
+  listB: R
+) {
+  const tokenToString = (token: Asset): string =>
+    `${token.symbol}-${token.blockchain}-${token.address ?? ''}`;
+
+  const set = new Set();
+
+  listA.forEach((token) => set.add(tokenToString(token)));
+
+  return listB.filter((token) => set.has(tokenToString(token))) as R;
+}

package/src/utils/settings.ts

@@ -55,3 +55,18 @@ export function getUniqueSwappersGroups(
 
   return uniqueSupportedSwappersGroups;
 }
+
+export function sortLiquiditySourcesByGroupTitle(
+  a: UniqueSwappersGroupType,
+  b: UniqueSwappersGroupType
+) {
+  if (a.groupTitle < b.groupTitle) {
+    return -1;
+  }
+
+  if (a.groupTitle > b.groupTitle) {
+    return 1;
+  }
+
+  return 0;
+}

package/src/utils/swap.ts

@@ -16,6 +16,7 @@ import type {
   Token,
 } from 'rango-sdk';
 
+import { i18n } from '@lingui/core';
 import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
 import BigNumber from 'bignumber.js';
 
@@ -23,6 +24,12 @@ import { isValidAddress } from '../components/ConfirmWalletsModal/ConfirmWallets
 import { errorMessages } from '../constants/errors';
 import { swapButtonTitles } from '../constants/messages';
 import { ZERO } from '../constants/numbers';
+import {
+  BALANCE_MAX_DECIMALS,
+  BALANCE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../constants/routing';
 import { useMetaStore } from '../store/meta';
 import { ButtonState } from '../types';
 
@@ -112,26 +119,62 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
   let fromAmountRangeError = '';
   let recommendation = '';
   if (!isExclusive && !!minimum && minimum.gt(swap.fromAmount)) {
-    fromAmountRangeError = `Required: >= ${numberToString(minimum)} ${
-      swap.from.symbol
-    }`;
+    fromAmountRangeError = i18n.t({
+      id: 'requiredEqualMin',
+      message: 'Required: >= {min} {symbol}',
+      values: {
+        min: numberToString(
+          minimum,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        ),
+        symbol: swap.from.symbol,
+      },
+    });
     recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
   } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) {
-    fromAmountRangeError = `Required: > ${numberToString(minimum)} ${
-      swap.from.symbol
-    }`;
+    fromAmountRangeError = i18n.t({
+      id: 'requiredMin',
+      message: 'Required: > {min} {symbol}',
+      values: {
+        min: numberToString(
+          minimum,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        ),
+        symbol: swap.from.symbol,
+      },
+    });
     recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
   }
 
   if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) {
-    fromAmountRangeError = `Required: <= ${numberToString(maximum)} ${
-      swap.from.symbol
-    }`;
+    fromAmountRangeError = i18n.t({
+      id: 'requiredEqualMax',
+      message: 'Required: <= {max} {symbol}',
+      values: {
+        max: numberToString(
+          maximum,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        ),
+        symbol: swap.from.symbol,
+      },
+    });
     recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
   } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) {
-    fromAmountRangeError = `Required: < ${numberToString(maximum)} ${
-      swap.from.symbol
-    }`;
+    fromAmountRangeError = i18n.t({
+      id: 'requiredMax',
+      message: 'Required: < {max} {symbol}',
+      values: {
+        max: numberToString(
+          maximum,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        ),
+        symbol: swap.from.symbol,
+      },
+    });
     recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
   }
 
@@ -492,14 +535,14 @@ export function getRouteOutputAmount(route: BestRouteResponse | null) {
 }
 
 export function getPercentageChange(
-  oldValue: string | number | null,
-  newValue: string | number | null
+  inputUsdValue: string | number | null,
+  outputUsdValue: string | number | null
 ) {
-  if (!oldValue || !newValue) {
+  if (!inputUsdValue || !outputUsdValue) {
     return null;
   }
-  return new BigNumber(newValue)
-    .div(new BigNumber(oldValue))
+  return new BigNumber(outputUsdValue)
+    .div(new BigNumber(inputUsdValue))
     .minus(1)
     .multipliedBy(100);
 }
@@ -544,25 +587,37 @@ export function getBalanceWarnings(
         new BigNumber(asset.currentAmount.amount).shiftedBy(
           -asset.currentAmount.decimals
         ),
-        8
+        BALANCE_MIN_DECIMALS,
+        BALANCE_MAX_DECIMALS
       );
       const requiredAmount = numberToString(
         new BigNumber(asset.requiredAmount.amount).shiftedBy(
           -asset.requiredAmount.decimals
         ),
-        8
+        BALANCE_MIN_DECIMALS,
+        BALANCE_MAX_DECIMALS
       );
       let reason = '';
       if (asset.reason === 'FEE') {
-        reason = ' for network fee';
+        reason = i18n.t(' for network fee');
       }
       if (asset.reason === 'INPUT_ASSET') {
-        reason = ' for swap';
+        reason = i18n.t(' for swap');
       }
       if (asset.reason === 'FEE_AND_INPUT_ASSET') {
-        reason = ' for input and network fee';
+        reason = i18n.t(' for input and network fee');
       }
-      const warningMessage = `Needs ≈ ${requiredAmount} ${symbol}${reason}, but you have ${currentAmount} ${symbol} in your ${asset.asset.blockchain} wallet.`;
+      const warningMessage = i18n.t({
+        id: 'balanceWarningMessage',
+        message: `Needs ≈ {requiredAmount} {symbol}{reason}, but you have {currentAmount} {symbol} in your {blockchain} wallet.`,
+        values: {
+          requiredAmount,
+          symbol,
+          reason,
+          currentAmount,
+          blockchain: asset.asset.blockchain,
+        },
+      });
       return warningMessage;
     });
 }
@@ -610,13 +665,14 @@ export function getSwapMessages(
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (currentStep?.networkStatus) {
       case PendingSwapNetworkStatus.WaitingForConnectingWallet:
-        message = message || 'Waiting for connecting wallet';
+        message = message || i18n.t('Waiting for connecting wallet');
         break;
       case PendingSwapNetworkStatus.WaitingForQueue:
-        message = message || 'Waiting for other running tasks to be finished';
+        message =
+          message || i18n.t('Waiting for other running tasks to be finished');
         break;
       case PendingSwapNetworkStatus.WaitingForNetworkChange:
-        message = message || 'Waiting for changing wallet network';
+        message = message || i18n.t('Waiting for changing wallet network');
         break;
       default:
         message = message || '';