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

package/src/utils/configs.ts

@@ -0,0 +1,95 @@
+import type { Tokens, WidgetVariant } from '../types';
+import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
+
+import { RANGO_PUBLIC_API_KEY } from '../constants';
+
+import { areTokensEqual } from './wallets';
+
+export interface Configs {
+  API_KEY: string;
+  BASE_URL?: string;
+}
+
+type TokensConfig =
+  | Asset[]
+  | {
+      [blockchain: string]: Tokens;
+    };
+
+let configs: Configs = {
+  API_KEY: RANGO_PUBLIC_API_KEY,
+};
+
+export function getConfig(name: keyof Configs) {
+  return configs[name] || '';
+}
+
+export function setConfig(name: keyof Configs, value: any) {
+  configs[name] = value;
+
+  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') {
+    clonedConfigs = structuredClone(nextConfigs);
+  } else {
+    clonedConfigs = JSON.parse(JSON.stringify(nextConfigs));
+  }
+  configs = clonedConfigs;
+  return configs;
+}
+
+export const DEFAULT_PRIMARY_RADIUS = 20;
+export const DEFAULT_SECONDARY_RADIUS = 25;
+
+export const THEME_CLASS_NAME_PREFIX = `theme-widget`;
+
+export const isTokenExcludedInConfig = (
+  token: Token | null,
+  tokensConfig?: TokensConfig
+) => {
+  let result = false;
+
+  if (tokensConfig && token) {
+    if (Array.isArray(tokensConfig)) {
+      result = !tokensConfig.some((asset) => areTokensEqual(asset, token));
+    } else if (!Array.isArray(tokensConfig)) {
+      const configForChain = tokensConfig[token.blockchain];
+      if (configForChain) {
+        result = !!configForChain.tokens.some((asset) =>
+          areTokensEqual(asset, token)
+        );
+        const isExcluded = configForChain.isExcluded;
+        return (!isExcluded && !result) || (isExcluded && result);
+      }
+    }
+  }
+  return result;
+};
+
+export const isBlockchainExcludedInConfig = (
+  blockchain: BlockchainMeta | null,
+  blockchainsConfig?: string[]
+) => {
+  return (
+    blockchain &&
+    blockchainsConfig &&
+    !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/date.ts

@@ -0,0 +1,81 @@
+import type { GroupBy } from '../components/HistoryGroupedList/HistoryGroupedList.types';
+import type { PendingSwap } from 'rango-types';
+
+import { i18n } from '@lingui/core';
+import dayjs from 'dayjs';
+
+export const groupSwapsByDate: GroupBy = (swaps) => {
+  const output: Map<
+    string,
+    {
+      title: string;
+      swaps: PendingSwap[];
+    }
+  > = new Map([
+    [
+      'today',
+      {
+        title: i18n.t('Today'),
+        swaps: [],
+      },
+    ],
+    [
+      'week',
+      {
+        title: i18n.t('This week'),
+        swaps: [],
+      },
+    ],
+    [
+      'month',
+      {
+        title: i18n.t('This month'),
+        swaps: [],
+      },
+    ],
+    [
+      'year',
+      {
+        title: i18n.t('This year'),
+        swaps: [],
+      },
+    ],
+  ]);
+
+  function addYearsToOutput(key: string, swap: PendingSwap) {
+    if (!output.has(key)) {
+      output.set(key, {
+        title: key,
+        swaps: [],
+      });
+    }
+    output.get(key)?.swaps.push(swap);
+  }
+
+  const now = dayjs();
+  swaps.forEach((swap) => {
+    const time = Number(swap.creationTime);
+    const swapDate = dayjs(time);
+    if (now.isSame(swapDate, 'day')) {
+      output.get('today')?.swaps.push(swap);
+    } else if (now.isSame(swapDate, 'week')) {
+      output.get('week')?.swaps.push(swap);
+    } else if (now.isSame(swapDate, 'month')) {
+      output.get('month')?.swaps.push(swap);
+    } else if (now.isSame(swapDate, 'year')) {
+      output.get('year')?.swaps.push(swap);
+    } else {
+      const year = new Date(time).getFullYear().toString();
+      addYearsToOutput(year, swap);
+    }
+  });
+
+  const groupedSwaps = Array.from(output.values()).filter(
+    (item) => item.swaps.length > 0
+  );
+  const items = groupedSwaps.flatMap((group) => group.swaps);
+  const groupCounts = groupedSwaps.map((group) => group.swaps.length);
+  const groups = groupedSwaps.map((group) => group.title);
+
+  return { swaps: items, groupCounts, groups };
+};

package/src/utils/events.ts

@@ -0,0 +1,27 @@
+import { eventEmitter } from '../services/eventEmitter';
+import { type UiEventData, WidgetEvents } from '../types';
+
+type UiEvent = {
+  type: UiEventData['type'];
+  payload?: Omit<UiEventData['payload'], 'preventDefault'>;
+};
+
+export function emitPreventableEvent(event: UiEvent, action: () => void): void {
+  let defaultPrevented = false;
+
+  const extendedPayload = {
+    preventDefault() {
+      defaultPrevented = true;
+    },
+    ...(event.payload === undefined && { payload: event.payload }),
+  };
+
+  eventEmitter.emit(WidgetEvents.UiEvent, {
+    type: event.type,
+    payload: extendedPayload,
+  });
+
+  if (!defaultPrevented) {
+    action();
+  }
+}

package/src/utils/hash.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+// Original Code: https://github.com/stitchesjs/stitches/blob/canary/packages/core/src/convert/toHash.js
+
+const toAlphabeticChar = (code: number) =>
+  String.fromCharCode(code + (code > 25 ? 39 : 97));
+
+const toAlphabeticName = (code: number) => {
+  let name = '';
+  let x;
+
+  for (x = Math.abs(code); x > 52; x = (x / 52) | 0) {
+    name = toAlphabeticChar(x % 52) + name;
+  }
+
+  return toAlphabeticChar(x % 52) + name;
+};
+
+const toPhash = (h: number, x: string) => {
+  let i = x.length;
+  while (i) {
+    h = (h * 33) ^ x.charCodeAt(--i);
+  }
+  return h;
+};
+
+export const toHash = (value: object) =>
+  toAlphabeticName(toPhash(5381, JSON.stringify(value)) >>> 0);

package/src/utils/meta.ts

@@ -0,0 +1,72 @@
+import type { TokenHash } from '../types';
+import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
+
+export function getBlockchainDisplayNameFor(
+  blockchainName: string,
+  blockchains: BlockchainMeta[]
+): string | undefined {
+  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;
+}
+
+export function getBlockchainImage(
+  blockchainName: string,
+  blockchains: BlockchainMeta[]
+): string | undefined {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.logo;
+}
+
+export function getSwapperDisplayName(
+  swapperId: string,
+  swappers: SwapperMeta[]
+) {
+  return swappers.find((swapper) => swapper.id === swapperId)?.title;
+}
+
+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;
+}
+
+export function createTokenHash(asset: Asset): TokenHash {
+  return `${asset.blockchain.toLowerCase()}-${asset.symbol.toLowerCase()}-${(
+    asset.address ?? ''
+  ).toLowerCase()}`;
+}
+
+export function isValidTokenAddress(
+  chain: BlockchainMeta,
+  address: string
+): boolean {
+  const regex = chain.addressPatterns;
+  const valid = regex.filter((r) => new RegExp(r).test(address)).length > 0;
+  return valid;
+}

package/src/utils/numbers.ts

@@ -0,0 +1,138 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import type { BestRouteResponse } from 'rango-sdk';
+
+import { BigNumber } from 'bignumber.js';
+
+import { stripTrailingZeros } from './sanitizers';
+import { isZeroValue } from './validation';
+
+/*
+ * if time > 1h -> rounded with 5 minutes precision
+ * if time < 1h -> rounded with 15 seconds precision
+ */
+export const roundedSecondsToString = (s: number): string => {
+  const seconds = Math.floor((s % 60) / 15) * 15;
+  const minutes = parseInt((s / 60).toString());
+  if (minutes >= 60) {
+    return `${Math.floor(minutes / 5) * 5}:00`;
+  }
+  return `${minutes.toString().padStart(2, '0')}:${seconds
+    .toString()
+    .padStart(2, '0')}`;
+};
+
+export const numberToString = (
+  number: BigNumber | string | number | null | undefined,
+  minDecimals: number | null = null,
+  maxDecimals: number | null = null
+): string => {
+  if (number === null || number === undefined) {
+    return '';
+  }
+  if (number === '') {
+    return '';
+  }
+  const n = new BigNumber(number);
+  const roundingMode = 1;
+  let maxI = 1000;
+  for (let i = 0; i < 60; i++) {
+    if (new BigNumber(n.toFixed(i, roundingMode)).eq(n)) {
+      maxI = i;
+      break;
+    }
+  }
+
+  if (n.gte(10000)) {
+    return n.toFormat(0, roundingMode);
+  }
+  if (n.gte(1000)) {
+    return n.toFormat(
+      Math.min(
+        maxI,
+        Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))
+      ),
+      roundingMode
+    );
+  }
+  if (n.gte(100)) {
+    return n.toFormat(
+      Math.min(
+        maxI,
+        Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))
+      ),
+      roundingMode
+    );
+  }
+  if (n.gte(1)) {
+    return n.toFormat(
+      Math.min(
+        maxI,
+        Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 2))
+      ),
+      roundingMode
+    );
+  }
+  if (n.gte(0.01)) {
+    return n.toFormat(
+      Math.min(
+        maxI,
+        Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 4))
+      ),
+      roundingMode
+    );
+  }
+  for (let i = minDecimals || 4; i < 17; i++) {
+    if (n.gte(Math.pow(10, -i))) {
+      return n.toFormat(
+        Math.min(
+          maxI,
+          Math.min(maxDecimals || 100, Math.max(minDecimals || 0, i))
+        ),
+        roundingMode
+      );
+    }
+  }
+  if (n.isEqualTo(0)) {
+    return '0';
+  }
+
+  return n.toFormat(
+    Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))),
+    roundingMode
+  );
+};
+
+export const uint8ArrayToHex = (buffer: Uint8Array): string => {
+  // buffer is an ArrayBuffer
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return [...buffer].map((x) => x.toString(16).padStart(2, '0')).join('');
+};
+
+export const totalArrivalTime = (
+  data: { estimatedTimeInSeconds: number | null }[] | undefined
+) => data?.reduce((a, b) => a + (b.estimatedTimeInSeconds ?? 0), 0) || 0;
+
+export const rawFees = (data: BestRouteResponse): string =>
+  (
+    data?.result?.swaps?.flatMap((s) =>
+      s.fee.map((f) => ({ swapperId: s.swapperId, fee: f }))
+    ) || []
+  )
+    .reduce((partialSum, a) => partialSum + parseFloat(a.fee.amount), 0)
+    .toFixed(3);
+
+export const containsText = (text: string, searchText: string) =>
+  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+
+export const isPositiveNumber = (text?: string) =>
+  !!text && parseFloat(text) > 0;
+
+export function sanitizeInputAmount(amount: string): string {
+  if (isZeroValue(amount)) {
+    return '0';
+  }
+
+  return stripTrailingZeros(amount);
+}

package/src/utils/providers.ts

@@ -0,0 +1,121 @@
+import type { WidgetConfig } from '../types';
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
+
+import {
+  defineVersions,
+  pickVersion,
+  Provider,
+  type VersionedProviders,
+} from '@rango-dev/wallets-core';
+
+export interface ProvidersOptions {
+  walletConnectProjectId?: WidgetConfig['walletConnectProjectId'];
+  walletConnectListedDesktopWalletLink?: NonNullable<
+    WidgetConfig['__UNSTABLE_OR_INTERNAL__']
+  >['walletConnectListedDesktopWalletLink'];
+  trezorManifest: WidgetConfig['trezorManifest'];
+  tonConnect: WidgetConfig['tonConnect'];
+}
+
+/**
+ *
+ * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
+ * @returns BothProvidersInterface[] a list of BothProvidersInterface
+ *
+ */
+type BothProvidersInterface = LegacyProviderInterface | Provider;
+export function matchAndGenerateProviders({
+  allProviders,
+  configWallets,
+}: {
+  allProviders: VersionedProviders[];
+  configWallets: WidgetConfig['wallets'];
+  options?: ProvidersOptions;
+}): VersionedProviders[] {
+  if (configWallets) {
+    /*
+     * If `wallets`  is included in widget config,
+     * allProviders should be filtered based on wallets list
+     */
+    const selectedProviders: VersionedProviders[] = [];
+
+    configWallets.forEach((requestedWallet) => {
+      /*
+       * There are two types of provider we get, the first one is only passing the wallet name
+       * then we will match the wallet name with our providers (@rango-dev/provider-*).
+       * The second way is passing a custom provider which implemented ProviderInterface.
+       */
+      if (typeof requestedWallet === 'string') {
+        const result = allProviders.find((provider) => {
+          /*
+           * To find a provider in allProviders,
+           * a version of each provider should be picked
+           * and validated based on that version scheme.
+           * If the corresponding provider to a wallet was found in allProvider,
+           * it will be add to selected providers.
+           */
+          const versionedProvider =
+            pickProviderVersionWithFallbackToLegacy(provider);
+          if (versionedProvider instanceof Provider) {
+            return versionedProvider.id === requestedWallet;
+          }
+          return versionedProvider.config.type === requestedWallet;
+        });
+
+        /*
+         * A provider may have multiple versions
+         * (e.g., 0.0, also known as legacy, and 1.0, also known as hub).
+         * We should ensure that all existing versions of a provider are added to selectedProviders.
+         */
+        if (result) {
+          selectedProviders.push(result);
+        } else {
+          console.warn(
+            // A provider name is included in config but was not found in allProviders
+            `Couldn't find ${requestedWallet} provider. Please make sure you are passing the correct name.`
+          );
+        }
+      } else {
+        // It's a custom provider so we directly push it to the list.
+        if (requestedWallet instanceof Provider) {
+          selectedProviders.push(
+            defineVersions().version('1.0.0', requestedWallet).build()
+          );
+        } else {
+          selectedProviders.push(
+            defineVersions().version('0.0.0', requestedWallet).build()
+          );
+        }
+      }
+    });
+
+    return selectedProviders;
+  }
+
+  return allProviders;
+}
+
+export function pickProviderVersionWithFallbackToLegacy(
+  provider: VersionedProviders
+): BothProvidersInterface {
+  try {
+    return pickVersion(provider, '1.0.0')[1];
+  } catch {
+    // Fallback to legacy version, if target version doesn't exists.
+    return pickVersion(provider, '0.0.0')[1];
+  }
+}
+
+export function configWalletsToWalletName(
+  providers: VersionedProviders[]
+): string[] {
+  const names = providers
+    .map((provider) => pickProviderVersionWithFallbackToLegacy(provider))
+    .map((provider) => {
+      if (provider instanceof Provider) {
+        return provider.id;
+      }
+      return provider.config.type;
+    });
+  return names;
+}

package/src/utils/queue.ts

@@ -0,0 +1,24 @@
+import type { Manager } from '@rango-dev/queue-manager-core';
+import type {
+  PendingSwapWithQueueID,
+  SwapStorage,
+} from '@rango-dev/queue-manager-rango-preset';
+
+export const getPendingSwaps = (manager: Manager | undefined) => {
+  const result: PendingSwapWithQueueID[] = [];
+
+  manager?.getAll().forEach((q, id) => {
+    const storage = q.list.getStorage() as SwapStorage;
+
+    if (storage?.swapDetails) {
+      result.push({
+        id,
+        swap: storage?.swapDetails,
+      });
+    }
+  });
+
+  return result.sort(
+    (a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime)
+  );
+};