@rango-dev/widget-embedded 0.23.1-next.8 → 0.24.0

package/src/utils/common.ts

@@ -1,4 +1,13 @@
+import type { Token } from 'rango-sdk';
+
 import { WIDGET_UI_ID } from '../constants';
+import {
+  MIN_LENGTH_SYMBOL_CONTAINS,
+  MIN_LENGTH_SYMBOL_START_WITH,
+  MIN_LENGTH_TOKEN_ADDRESS_CONTAINS,
+  MIN_LENGTH_TOKEN_NAME_CONTAINS,
+  MIN_LENGTH_TOKEN_NAME_EXACT_MATCH,
+} from '../constants/searchFor';
 
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
@@ -32,8 +41,180 @@ export function containsText(text: string, searchText: string): boolean {
   return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
 }
 
+export function exactText(text: string, searchText: string): boolean {
+  return text.toLowerCase() === searchText.toLowerCase();
+}
+
+export function startWithText(text: string, searchText: string): boolean {
+  return text.toLowerCase().startsWith(searchText.toLowerCase());
+}
+
 export const getContainer = () =>
   document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) as HTMLElement;
 
 export const getExpanded = () =>
   document.getElementById(WIDGET_UI_ID.EXPANDED_BOX_ID) as HTMLElement;
+
+function compareExactMatchText(
+  searchFor: string,
+  textA: string | null,
+  textB: string | null
+) {
+  const exactMatchA = !!textA && exactText(textA, searchFor);
+  const exactMatchB = !!textB && exactText(textB, searchFor);
+  if (exactMatchA !== exactMatchB) {
+    return exactMatchA ? -1 : 1;
+  }
+
+  return 0;
+}
+
+function compareContainsText(
+  searchFor: string,
+  textA: string | null,
+  textB: string | null
+) {
+  const textContainsA = !!textA && containsText(textA, searchFor);
+  const textContainsB = !!textB && containsText(textB, searchFor);
+  if (textContainsA !== textContainsB) {
+    return textContainsA ? -1 : 1;
+  }
+
+  // If both texts contains the searched term, The shorter one has priority
+  if (textContainsA && textContainsB && textA?.length !== textB?.length) {
+    return textA?.length - textB?.length;
+  }
+
+  return 0;
+}
+
+function compareStartWithText(
+  searchFor: string,
+  textA: string | null,
+  textB: string | null
+) {
+  const textStartWithA = !!textA && startWithText(textA, searchFor);
+  const textStartWithB = !!textB && startWithText(textB, searchFor);
+  if (textStartWithA !== textStartWithB) {
+    return textStartWithA ? -1 : 1;
+  }
+
+  // If both texts start with the searched term, The shorter one has priority
+  if (textStartWithA && textStartWithB && textA?.length !== textB?.length) {
+    return textA?.length - textB?.length;
+  }
+
+  return 0;
+}
+
+export function compareWithSearchFor(
+  tokenA: Token,
+  tokenB: Token,
+  searchFor?: string
+): number {
+  if (!searchFor) {
+    return 0;
+  }
+
+  // 1: Check the order to exact match the symbol
+  const symbolExactMatchCompare = compareExactMatchText(
+    searchFor,
+    tokenA.symbol,
+    tokenB.symbol
+  );
+  if (symbolExactMatchCompare) {
+    return symbolExactMatchCompare;
+  }
+
+  // 2: Check the order to exact match the token name
+  if (searchFor.length >= MIN_LENGTH_TOKEN_NAME_EXACT_MATCH) {
+    const tokenNameExactMatchCompare = compareExactMatchText(
+      searchFor,
+      tokenA.name,
+      tokenB.name
+    );
+    if (tokenNameExactMatchCompare) {
+      return tokenNameExactMatchCompare;
+    }
+  }
+
+  // 3: Check symbol start with searchFor
+  if (searchFor.length >= MIN_LENGTH_SYMBOL_START_WITH) {
+    const symbolStartWithCompare = compareStartWithText(
+      searchFor,
+      tokenA.symbol,
+      tokenB.symbol
+    );
+
+    if (symbolStartWithCompare) {
+      return symbolStartWithCompare;
+    }
+  }
+
+  // 4: Check symbol Contains searchFor
+  if (searchFor.length >= MIN_LENGTH_SYMBOL_CONTAINS) {
+    const symbolContainsCompare = compareContainsText(
+      searchFor,
+      tokenA.symbol,
+      tokenB.symbol
+    );
+
+    if (symbolContainsCompare) {
+      return symbolContainsCompare;
+    }
+  }
+
+  // 5: Check token name start with searchFor
+  if (searchFor.length >= MIN_LENGTH_TOKEN_NAME_CONTAINS) {
+    const tokenNameStartWithCompare = compareStartWithText(
+      searchFor,
+      tokenA.name,
+      tokenB.name
+    );
+
+    if (tokenNameStartWithCompare) {
+      return tokenNameStartWithCompare;
+    }
+  }
+
+  // 6: Check token name Contains searchFor
+  if (searchFor.length >= MIN_LENGTH_TOKEN_NAME_CONTAINS) {
+    const tokenNameContainsCompare = compareContainsText(
+      searchFor,
+      tokenA.name,
+      tokenB.name
+    );
+
+    if (tokenNameContainsCompare !== 0) {
+      return tokenNameContainsCompare;
+    }
+  }
+
+  // 7: Check address start with searchFor
+  if (searchFor.length >= MIN_LENGTH_TOKEN_ADDRESS_CONTAINS) {
+    const addressStartWithCompare = compareStartWithText(
+      searchFor,
+      tokenA.address,
+      tokenB.address
+    );
+
+    if (addressStartWithCompare) {
+      return addressStartWithCompare;
+    }
+  }
+
+  // 8: Check address Contains searchFor
+  if (searchFor.length >= MIN_LENGTH_TOKEN_ADDRESS_CONTAINS) {
+    const addressContainCompare = compareContainsText(
+      searchFor,
+      tokenA.address,
+      tokenB.address
+    );
+
+    if (addressContainCompare !== 0) {
+      return addressContainCompare;
+    }
+  }
+
+  return 0;
+}

package/src/utils/configs.ts

@@ -1,4 +1,4 @@
-import type { Tokens } from '../types';
+import type { Tokens, WidgetVariant } from '../types';
 import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
 import { RANGO_PUBLIC_API_KEY } from '../constants';
@@ -79,3 +79,14 @@ export const isBlockchainExcludedInConfig = (
     !blockchainsConfig.includes(blockchain.name)
   );
 };
+
+export const isVariantExpandable = (
+  isLargeScreen: boolean,
+  isExtraLargeScreen: boolean,
+  variant?: WidgetVariant
+) => {
+  return (
+    (variant === 'expanded' && (isLargeScreen || isExtraLargeScreen)) ||
+    (variant === 'full-expanded' && isExtraLargeScreen)
+  );
+};

package/src/utils/meta.ts

@@ -31,3 +31,24 @@ export function findToken(t: Asset, tokens: Token[]) {
 export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {
   return blockchains.find((blockchain) => blockchain.name === name) ?? null;
 }
+
+export function isTokenNative(
+  token: Token,
+  blockchain: BlockchainMeta | undefined
+) {
+  if (!blockchain || !token) {
+    return false;
+  }
+
+  for (const feeAsset of blockchain.feeAssets) {
+    if (
+      token?.blockchain === feeAsset?.blockchain &&
+      token?.symbol === feeAsset?.symbol &&
+      token?.address === feeAsset?.address
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}

package/src/utils/swap.ts

@@ -478,6 +478,7 @@ export function createQuoteRequestBody(params: {
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
   destination?: string;
+  enableCentralizedSwappers?: boolean;
 }): BestRouteRequest {
   const {
     fromToken,
@@ -493,6 +494,7 @@ export function createQuoteRequestBody(params: {
     affiliatePercent,
     affiliateWallets,
     destination,
+    enableCentralizedSwappers,
   } = params;
   const selectedWalletsMap = selectedWallets?.reduce(
     (
@@ -544,6 +546,7 @@ export function createQuoteRequestBody(params: {
       ),
       swappersGroupsExclude: false,
     }),
+    enableCentralizedSwappers,
   };
   return requestBody;
 }
@@ -747,11 +750,7 @@ export function getLastConvertedTokenInFailedSwap(
 }
 
 export function shouldRetrySwap(pendingSwap: PendingSwap) {
-  return (
-    pendingSwap.status === 'failed' &&
-    !!pendingSwap.finishTime &&
-    new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000
-  );
+  return pendingSwap.status === 'failed';
 }
 
 export function confirmSwapDisabled(
@@ -775,3 +774,11 @@ export function confirmSwapDisabled(
       !isValidAddress(lastStepToBlockchain, customDestination))
   );
 }
+
+export function isTokensIdentical(tokenA: Token, tokenB: Token) {
+  return (
+    tokenA.blockchain === tokenB.blockchain &&
+    tokenA.symbol === tokenB.symbol &&
+    tokenA.address === tokenB.address
+  );
+}

package/src/utils/ui.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
-import type React from 'react';
 
 import {
   theme as baseThemeTokens,
   darkColors as defaultDarkColors,
 } from '@rango-dev/ui';
+import React from 'react';
 
 import { generateColors } from '../utils/colors';
 import { toHash } from '../utils/hash';
@@ -73,18 +73,20 @@ export function customizedThemeTokens(
 }
 
 export function joinList(
-  list: React.JSX.Element[],
+  list: { element: React.JSX.Element; key: string }[],
   divider: React.JSX.Element
 ) {
   if (list.length <= 1) {
-    return list;
+    return list.map(({ element, key }) => React.cloneElement(element, { key }));
   }
 
   const output: React.JSX.Element[] = [];
   list.forEach((item, index) => {
-    output.push(item);
+    const { element, key } = item;
+    output.push(React.cloneElement(element, { key }));
     if (index < list.length - 1) {
-      output.push(divider);
+      const key = `divider-${index}`;
+      output.push(React.cloneElement(divider, { key }));
     }
   });
 

package/src/utils/wallets.ts

@@ -381,25 +381,18 @@ export function formatBalance(balance: Balance | null): Balance | null {
   return formattedBalance;
 }
 
-function sortTokensByBalance(
+export function compareTokenBalance(
   token1Balance: Balance | null,
   token2Balance: Balance | null
 ): number {
-  if (token1Balance?.usdValue && token2Balance?.usdValue) {
+  if (token1Balance?.usdValue || token2Balance?.usdValue) {
     return (
-      parseFloat(token2Balance.usdValue) - parseFloat(token1Balance.usdValue)
+      parseFloat(token2Balance?.usdValue || '0') -
+      parseFloat(token1Balance?.usdValue || '0')
     );
   }
 
-  if (!token1Balance?.usdValue && token2Balance?.usdValue) {
-    return 1;
-  }
-
-  if (token1Balance?.usdValue && !token2Balance?.usdValue) {
-    return -1;
-  }
-
-  if (!token1Balance?.usdValue && !token2Balance?.usdValue) {
+  if (token1Balance?.amount || token2Balance?.amount) {
     return (
       parseFloat(token2Balance?.amount || '0') -
       parseFloat(token1Balance?.amount || '0')
@@ -409,41 +402,6 @@ function sortTokensByBalance(
   return 0;
 }
 
-function sortTokensByPinnedToken(
-  token1: Token,
-  token2: Token,
-  isTokenPinned: (token: Token) => boolean
-): number {
-  const isToken1Pinned = isTokenPinned(token1);
-  const isToken2Pinned = isTokenPinned(token2);
-
-  if (isToken1Pinned === isToken2Pinned) {
-    return 0;
-  }
-  if (isToken1Pinned) {
-    return -1;
-  }
-  return 1;
-}
-export function sortTokens(
-  tokens: Token[],
-  getBalanceFor: (token: Token) => Balance | null,
-  isTokenPinned: (token: Token) => boolean
-) {
-  tokens.sort((token1, token2) => {
-    const token1Balance = getBalanceFor(token1);
-    const token2Balance = getBalanceFor(token2);
-    // Check pinned tokens
-    const isTokenPin = sortTokensByPinnedToken(token1, token2, isTokenPinned);
-
-    return isTokenPin !== 0
-      ? isTokenPin
-      : sortTokensByBalance(token1Balance, token2Balance);
-  });
-
-  return tokens;
-}
-
 export function areTokensEqual(
   tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null,
   tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null

package/dist/hooks/useMobileDetect.d.ts

@@ -1,3 +0,0 @@
-declare const useMobileDetect: () => boolean;
-export default useMobileDetect;
-//# sourceMappingURL=useMobileDetect.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useMobileDetect.d.ts","sourceRoot":"","sources":["../../src/hooks/useMobileDetect.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,eAAe,eAcpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/src/hooks/useMobileDetect.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const MIN_WIDTH_WINDOW = 768;
-
-const useMobileDetect = () => {
-  const [isMobile, setIsMobile] = useState(false);
-
-  const handleResize = () => {
-    setIsMobile(window.innerWidth < MIN_WIDTH_WINDOW);
-  };
-
-  useEffect(() => {
-    handleResize(); // Initial check
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return isMobile;
-};
-
-export default useMobileDetect;