@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/types/quote.ts

@@ -0,0 +1,133 @@
+/* eslint-disable @typescript-eslint/prefer-enum-initializers */
+
+import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type BigNumber from 'bignumber.js';
+import type {
+  Asset,
+  BlockchainValidationStatus,
+  RouteTag,
+  RoutingResultType,
+  SwapResult,
+} from 'rango-sdk';
+
+export enum QuoteErrorType {
+  NO_RESULT,
+  REQUEST_FAILED,
+  REQUEST_CANCELED,
+  BRIDGE_LIMIT,
+  INSUFFICIENT_SLIPPAGE,
+}
+
+export type NoResultError = {
+  type: QuoteErrorType.NO_RESULT;
+  diagnosisMessage?: string;
+};
+
+export type BridgeLimitError = {
+  type: QuoteErrorType.BRIDGE_LIMIT;
+  swap: SwapResult;
+  recommendation: string;
+  fromAmountRangeError: string;
+};
+
+export type InsufficientSlippageError = {
+  type: QuoteErrorType.INSUFFICIENT_SLIPPAGE;
+  recommendedSlippages: RecommendedSlippages | null;
+  minRequiredSlippage: string | null;
+};
+
+export type QuoteRequestFailed = {
+  type: QuoteErrorType.REQUEST_FAILED;
+  diagnosisMessage?: string;
+};
+export type QuoteRequestCanceled = { type: QuoteErrorType.REQUEST_CANCELED };
+
+export type QuoteError =
+  | NoResultError
+  | BridgeLimitError
+  | InsufficientSlippageError
+  | QuoteRequestFailed
+  | QuoteRequestCanceled;
+
+export enum QuoteWarningType {
+  HIGH_VALUE_LOSS,
+  UNKNOWN_PRICE,
+  INSUFFICIENT_SLIPPAGE,
+  HIGH_SLIPPAGE,
+  EXCESSIVE_OUTPUT_AMOUNT_CHANGE,
+}
+
+export type RecommendedSlippages = Record<number, string>;
+
+export type InsufficientSlippageWarning = {
+  type: QuoteWarningType.INSUFFICIENT_SLIPPAGE;
+  recommendedSlippages: RecommendedSlippages | null;
+  minRequiredSlippage: string | null;
+};
+
+export type HighSlippageWarning = {
+  type: QuoteWarningType.HIGH_SLIPPAGE;
+  slippage: string | null;
+};
+
+export type HighValueLossWarning = {
+  type: QuoteWarningType.HIGH_VALUE_LOSS;
+  warningLevel: PriceImpactWarningLevel;
+  inputUsdValue: BigNumber;
+  outputUsdValue: BigNumber;
+  totalFee: BigNumber;
+  priceImpact: number;
+};
+
+export type UnknownPriceWarning = {
+  type: QuoteWarningType.UNKNOWN_PRICE;
+};
+
+export type ExcessiveOutputAmountChange = {
+  type: QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE;
+  usdValueChange: string;
+  percentageChange: string;
+};
+
+export type QuoteWarning =
+  | HighValueLossWarning
+  | ExcessiveOutputAmountChange
+  | UnknownPriceWarning
+  | InsufficientSlippageWarning
+  | HighSlippageWarning;
+
+export type ConfirmSwapWarnings = {
+  quote: QuoteWarning | null;
+  balance: { messages: string[] } | null;
+};
+
+export type QuoteResponse = {
+  requestId: string;
+  swaps?: SwapResult[];
+  diagnosisMessages: string[] | null;
+};
+
+export type SelectedQuote = {
+  swaps: SwapResult[];
+  requestId: string;
+  outputAmount?: string;
+  resultType?: RoutingResultType;
+  tags?: RouteTag[];
+  validationStatus: BlockchainValidationStatus[] | null;
+  requestAmount: string;
+};
+
+export type QuoteErrorResponse = {
+  message: string;
+  options: QuoteError;
+};
+
+export type QuoteInputs = {
+  fromBlockchain: string | null;
+  toBlockchain: string | null;
+  fromToken: Asset | null;
+  toToken: Asset | null;
+  requestAmount: string;
+};
+
+export type UpdateQuoteInputs = (params: Partial<QuoteInputs>) => void;

package/src/types/swap.ts

@@ -0,0 +1,19 @@
+import type { SwapSavedSettings } from 'rango-types';
+
+export type PendingSwapSettings = Omit<
+  SwapSavedSettings,
+  'disabledSwappersIds'
+>;
+
+export type SwapButtonState = {
+  disabled: boolean;
+  title: string;
+  action: 'connect-wallet' | 'confirm-warning' | 'confirm-swap';
+};
+
+export type ConvertedToken = {
+  symbol: string;
+  address: string | null;
+  blockchain: string;
+  outputAmount: string | null;
+} | null;

package/src/types/wallets.ts

@@ -0,0 +1,29 @@
+import type { WalletInfo } from '@rango-dev/ui';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+export interface Wallet {
+  chain: string;
+  address: string;
+  walletType: WalletType;
+  isContractWallet?: boolean;
+  derivationPath?: string;
+}
+
+export type Balance = {
+  amount: string;
+  decimals: number;
+  usdValue: string | null;
+};
+
+export type Blockchain = string;
+type TokenSymbol = string;
+type Address = string;
+
+/** `blockchain-symbol-Address` */
+export type TokenHash = `${Blockchain}-${TokenSymbol}-${Address}`;
+
+export type TokensBalance = {
+  [key: TokenHash]: Balance;
+};
+
+export type WalletInfoWithExtra = WalletInfo;

package/src/utils/colors.ts

@@ -0,0 +1,180 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+// Types
+import type { ThemeColors, WidgetColors, WidgetColorsKeys } from '../types';
+
+import { isColorKeyOverridden } from './validation';
+
+type RGB = {
+  red: number;
+  green: number;
+  blue: number;
+};
+
+type ShadeOrTintFunction = (rgb: RGB, step: number) => RGB;
+
+const HEX_BASE = 16;
+const MAX_COLOR_VALUE = 255;
+const PERCENT = 0.11;
+
+// Utility Functions
+
+function expandShortHexColor(hexColor: string) {
+  // Remove '#' if it exists
+  if (hexColor.startsWith('#')) {
+    hexColor = hexColor.slice(1);
+  }
+
+  // Check if the hexColor has a length of 3
+  if (hexColor.length === 3) {
+    // Convert the string to an array of characters
+    const characters = hexColor.split('');
+
+    // Duplicate each character and combine them into a single string
+    const expandedHex = characters.reduce(function (acc, char) {
+      return acc + char + char;
+    }, '');
+
+    // Return the resulting 6-character hex color
+    return `#${expandedHex}`;
+  }
+
+  // Return the original hexColor if it's not 3 characters
+  return `#${hexColor}`;
+}
+
+// pad a hexadecimal string with zeros if it needs it
+function pad(number: string, length: number) {
+  return number.padStart(length, '0');
+}
+
+// Convert an integer to a 2-character hex string
+function intToHex(value: number) {
+  const clampedValue = Math.min(
+    Math.max(Math.round(value), 0),
+    MAX_COLOR_VALUE
+  );
+  return pad(clampedValue.toString(HEX_BASE), 2);
+}
+
+// convert one of our rgb color objects to a full hex color string
+function rgbToHex(rgb: RGB) {
+  return `#${intToHex(rgb.red)}${intToHex(rgb.green)}${intToHex(rgb.blue)}`;
+}
+
+// Convert a hex color string to an RGB object
+function hexToRGB(hex: string): RGB {
+  const red = parseInt(hex.slice(1, 3), HEX_BASE);
+  const green = parseInt(hex.slice(3, 5), HEX_BASE);
+  const blue = parseInt(hex.slice(5, 7), HEX_BASE);
+
+  return { red, green, blue };
+}
+
+// Generate a shade of a given RGB color
+function generateShade(rgb: RGB, step: number): RGB {
+  const factor = 1 - PERCENT * step;
+  return {
+    red: rgb.red * factor,
+    green: rgb.green * factor,
+    blue: rgb.blue * factor,
+  };
+}
+
+// Generate a tint of a given RGB color
+function generateTint(rgb: RGB, step: number): RGB {
+  const factor = PERCENT * step;
+  return {
+    red: rgb.red + (MAX_COLOR_VALUE - rgb.red) * factor,
+    green: rgb.green + (MAX_COLOR_VALUE - rgb.green) * factor,
+    blue: rgb.blue + (MAX_COLOR_VALUE - rgb.blue) * factor,
+  };
+}
+
+// Main Functions
+
+// Calculate an array of shades from a hex color string
+export function calculateShades(hex: string): string[] {
+  return calculateColors(hex, generateShade);
+}
+
+// Calculate an array of tints from a hex color string
+export function calculateTints(hex: string): string[] {
+  return calculateColors(hex, generateTint);
+}
+
+// General function to calculate shades or tints
+function calculateColors(
+  hex: string,
+  generateColor: ShadeOrTintFunction
+): string[] {
+  const rgb = hexToRGB(hex);
+  const colors: string[] = [];
+  for (let i = 1; i < 9; i++) {
+    colors.push(rgbToHex(generateColor(rgb, i)));
+  }
+  return colors;
+}
+
+// Create tints and shades for a given color
+export function createTintsAndShades(
+  hex: string,
+  colorKey: string,
+  isReversed?: boolean
+): { [key: string]: string } {
+  const BASE_INDEX = 100;
+  const STEP = 50;
+
+  const tints = calculateTints(hex).reverse().concat(hex);
+  const shades = calculateShades(hex);
+  const combinedColors = tints.concat(shades);
+
+  const colorMap: { [key: string]: string } = {};
+  const length = combinedColors.length;
+
+  for (let i = 0; i < length; i++) {
+    const index = BASE_INDEX + (isReversed ? length - 1 - i : i) * STEP;
+    const color = combinedColors[i];
+    if (color) {
+      colorMap[`${colorKey}${index}`] = color;
+    }
+  }
+
+  return colorMap;
+}
+
+// Generate a color palette based on base colors and "Expand Colors"
+export function expandToGenerateThemeColors(
+  baseColors: ThemeColors,
+  expandColors: WidgetColors,
+  options?: { reverseNeutralRange?: boolean }
+): ThemeColors {
+  const output = { ...baseColors };
+
+  for (const colorKey in expandColors) {
+    const expandColor = expandColors[colorKey as WidgetColorsKeys] as string;
+    const isNeutralReversed =
+      colorKey === 'neutral' && !!options?.reverseNeutralRange;
+    /*
+     *Most of the colors are range but there are some colors that should be a single value e.g.
+     *{
+     *  // single value
+     *   background: "#fff",
+     *   // range
+     *   primary: '#1C3CF1',
+     *    primary500: '#1C3CF1',
+     *    primary550: '#0B27C4',
+     *}
+     */
+    const isSingleColor = ['background', 'foreground'].includes(colorKey);
+
+    if (!isSingleColor && !isColorKeyOverridden(colorKey)) {
+      const expandedHexColor = expandShortHexColor(expandColor);
+      Object.assign(
+        output,
+        createTintsAndShades(expandedHexColor, colorKey, isNeutralReversed)
+      );
+    }
+  }
+
+  return { ...output, ...expandColors };
+}

package/src/utils/common.ts

@@ -0,0 +1,297 @@
+import type { WalletInfoWithExtra } from '../types';
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+import { BlockchainCategories, WalletState } from '@rango-dev/ui';
+import { TransactionType } from 'rango-sdk';
+
+import { WIDGET_UI_ID } from '../constants';
+import { SUPPORTED_FONTS } from '../constants/fonts';
+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));
+}
+
+export function areEqual(
+  array1: (number | string)[],
+  array2: (number | string)[]
+) {
+  return (
+    array1.length === array2.length && array1.every((v, i) => v === array2[i])
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+export function debounce(fn: Function, time: number) {
+  let timeoutId: ReturnType<typeof setTimeout> | null;
+  return wrapper;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function wrapper(...args: any) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      fn(...args);
+    }, time);
+  }
+}
+
+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;
+}
+
+export const isBlockchainTypeInCategory = (
+  blockchainType: TransactionType,
+  category: string
+): boolean => {
+  switch (category) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchainType === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchainType !== TransactionType.TRANSFER &&
+        blockchainType !== TransactionType.COSMOS &&
+        blockchainType !== TransactionType.EVM
+      );
+    default:
+      return blockchainType === category;
+  }
+};
+
+export const getFontUrlByName = (fontName: string) => {
+  const font = SUPPORTED_FONTS.find((font) => font.value === fontName);
+  return font?.url;
+};
+
+export function isSingleWalletActive(
+  wallets: WalletInfoWithExtra[],
+  multiWallets?: boolean
+) {
+  const atLeastOneWalletIsConnected = !!wallets.find(
+    (w) => w.state === WalletState.CONNECTED
+  );
+  return multiWallets === false && atLeastOneWalletIsConnected;
+}
+
+/**
+ * A simple memo implementation
+ * you can use it when you want to memoize a value in js space
+ */
+export function memoizedResult(): <R>(fn: () => R, key: number | string) => R {
+  let currentKey: number | string;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let result: any;
+
+  return (fn, key) => {
+    if (!result || !currentKey || currentKey !== key) {
+      currentKey = key;
+      result = fn();
+      return result;
+    }
+
+    return result;
+  };
+}
+
+export function filterBlockchainsWithAtLeastOneToken(
+  blockchains: BlockchainMeta[],
+  tokens: Token[]
+) {
+  const blockchainsWithAtLeastOneToken = new Set<string>();
+
+  tokens.forEach((token) => {
+    blockchainsWithAtLeastOneToken.add(token.blockchain);
+  });
+
+  return blockchains.filter((blockchain) =>
+    blockchainsWithAtLeastOneToken.has(blockchain.name)
+  );
+}