@rango-dev/widget-embedded 0.23.1-next.20 → 0.23.1-next.22

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/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/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