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

package/src/utils/time.ts

@@ -0,0 +1,33 @@
+import type { PendingSwap } from 'rango-types';
+
+import { i18n } from '@lingui/core';
+
+const daysOfWeek = [
+  i18n.t('Sunday'),
+  i18n.t('Monday'),
+  i18n.t('Tuesday'),
+  i18n.t('Wednesday'),
+  i18n.t('Thursday'),
+  i18n.t('Friday'),
+  i18n.t('Saturday'),
+];
+
+export function timeSince(millisecond: number) {
+  const date = new Date(millisecond);
+  const day = date.getDate();
+  const month = date.toLocaleString('default', { month: 'long' });
+  const year = date.getFullYear();
+  const isToday = date.getDay() === new Date().getDay();
+  const formattedDate = isToday
+    ? i18n.t('Today')
+    : `${daysOfWeek[date.getDay()]} ${day} ${month} ${year}`;
+
+  return `${formattedDate}, ${new Date(millisecond).toLocaleTimeString()}`;
+}
+
+export function getSwapDate(pendingSwap: PendingSwap) {
+  const time = pendingSwap.finishTime
+    ? timeSince(parseInt(pendingSwap.finishTime))
+    : timeSince(parseInt(pendingSwap.creationTime));
+  return time;
+}

package/src/utils/ui.ts

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { WidgetTheme } from '../types';
+import type { createTheme } from '@rango-dev/ui';
+
+import {
+  theme as baseThemeTokens,
+  darkColors as defaultDarkColors,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { expandToGenerateThemeColors } from '../utils/colors';
+import { toHash } from '../utils/hash';
+
+import { THEME_CLASS_NAME_PREFIX } from './configs';
+
+type Tokens = Parameters<typeof createTheme>[0];
+interface CustomizedThemeValues {
+  id: string;
+  tokens: Tokens;
+}
+
+interface CustomizedTheme {
+  light: undefined | CustomizedThemeValues;
+  dark: undefined | CustomizedThemeValues;
+}
+
+export function customizedThemeTokens(
+  colors: WidgetTheme['colors']
+): CustomizedTheme {
+  const baseColors = baseThemeTokens.colors;
+  const baseDarkColors = {
+    ...baseColors,
+    ...defaultDarkColors,
+  };
+  let lightTheme: CustomizedTheme['light'] = undefined;
+  let darkTheme: CustomizedTheme['dark'] = undefined;
+
+  if (colors?.light) {
+    const lightColors = expandToGenerateThemeColors(baseColors, colors.light);
+    const tokens = { colors: lightColors };
+    const id = `${THEME_CLASS_NAME_PREFIX}-light-${toHash(tokens)}`;
+    lightTheme = {
+      id,
+      tokens: tokens as Tokens,
+    };
+  }
+
+  if (colors?.dark) {
+    const darkColors = expandToGenerateThemeColors(
+      baseDarkColors,
+      colors.dark,
+      {
+        reverseNeutralRange: true,
+      }
+    );
+    const tokens = { colors: darkColors };
+    const id = `${THEME_CLASS_NAME_PREFIX}-dark-${toHash(tokens)}`;
+    darkTheme = {
+      id,
+      tokens: tokens as Tokens,
+    };
+  }
+
+  return {
+    light: lightTheme,
+    dark: darkTheme,
+  };
+}
+
+export function joinList(
+  list: { element: React.JSX.Element; key: string }[],
+  divider: React.JSX.Element
+) {
+  if (list.length <= 1) {
+    return list.map(({ element, key }) => React.cloneElement(element, { key }));
+  }
+
+  const output: React.JSX.Element[] = [];
+  list.forEach((item, index) => {
+    const { element, key } = item;
+    output.push(React.cloneElement(element, { key }));
+    if (index < list.length - 1) {
+      const key = `divider-${index}`;
+      output.push(React.cloneElement(divider, { key }));
+    }
+  });
+
+  return output;
+}

package/src/utils/validation.test.ts

@@ -0,0 +1,121 @@
+import { faker } from '@faker-js/faker';
+import { describe, expect, test } from 'vitest';
+
+import {
+  isColorKeyOverridden,
+  isNumeric,
+  isValidCurrencyFormat,
+  isZeroValue,
+} from './validation';
+
+const FAKER_SEED = 14;
+const THREE_MAX_DECIMAL = 3;
+const FOUR_MAX_DECIMAL = 4;
+const SMALL_INT = { min: 1, max: 9 };
+const FLOAT_OPTS = { min: 0, max: 100, multipleOf: 0.01 };
+faker.seed(FAKER_SEED);
+
+describe('check validation behaviors', () => {
+  describe('check zero-value detection', () => {
+    test('should detect strings of zeros', () => {
+      expect(isZeroValue('0')).toBe(true);
+      expect(isZeroValue('000')).toBe(true);
+      expect(isZeroValue('000.00')).toBe(true);
+    });
+    test('should reject non-zero or fractional values', () => {
+      expect(isZeroValue('0.0001')).toBe(false);
+      expect(isZeroValue('000.0001')).toBe(false);
+      expect(isZeroValue(faker.number.int(SMALL_INT).toString())).toBe(false);
+    });
+    test('should return false for empty or non-numeric', () => {
+      expect(isZeroValue('')).toBe(false);
+      expect(isZeroValue('abc')).toBe(false);
+    });
+  });
+
+  describe('check currency format validation', () => {
+    // Default behavior (maxDecimals = 2)
+    test('should accepts integers and up to 2 decimals', () => {
+      expect(isValidCurrencyFormat('0')).toBe(true);
+      expect(isValidCurrencyFormat('10.2')).toBe(true);
+      expect(isValidCurrencyFormat('10.25')).toBe(true);
+    });
+
+    test('should rejects more than 2 decimals', () => {
+      expect(isValidCurrencyFormat('1.234')).toBe(false);
+      expect(isValidCurrencyFormat('0.001')).toBe(false);
+    });
+
+    test('should rejects leading zero on non-zero integer', () => {
+      expect(isValidCurrencyFormat('01')).toBe(false);
+      expect(isValidCurrencyFormat('00.5')).toBe(false);
+    });
+
+    test('should rejects non-numeric and malformed strings', () => {
+      expect(isValidCurrencyFormat('')).toBe(false);
+      expect(isValidCurrencyFormat('.5')).toBe(false);
+      expect(isValidCurrencyFormat('1.2.3')).toBe(false);
+      expect(isValidCurrencyFormat('abc')).toBe(false);
+      expect(isValidCurrencyFormat('0.1a')).toBe(false);
+    });
+
+    test('should allows up to specified decimals', () => {
+      expect(isValidCurrencyFormat('1.234', THREE_MAX_DECIMAL)).toBe(true);
+      expect(isValidCurrencyFormat('0.1234', FOUR_MAX_DECIMAL)).toBe(true);
+    });
+
+    test('should rejects if decimals exceed custom limit', () => {
+      expect(isValidCurrencyFormat('2.1234', THREE_MAX_DECIMAL)).toBe(false);
+      expect(isValidCurrencyFormat('0.12345', FOUR_MAX_DECIMAL)).toBe(false);
+    });
+
+    test('should rejects trailing dot', () => {
+      expect(isValidCurrencyFormat('10.')).toBe(false);
+    });
+
+    test('should handles zero with custom decimals edge', () => {
+      expect(isValidCurrencyFormat('0.0', 1)).toBe(true);
+      expect(isValidCurrencyFormat('0.00', 1)).toBe(false);
+    });
+
+    test('check large values within limits', () => {
+      expect(isValidCurrencyFormat('1234567890.12')).toBe(true);
+      expect(isValidCurrencyFormat('1234567890.123')).toBe(false);
+    });
+  });
+
+  describe('check numeric string validation', () => {
+    test('should accept integers and decimals', () => {
+      expect(isNumeric('0')).toBe(true);
+      expect(isNumeric('00.1')).toBe(true);
+      expect(isNumeric('123.456')).toBe(true);
+      expect(isNumeric(faker.number.float(FLOAT_OPTS).toString())).toBe(true);
+    });
+    test('should reject leading dot or letters', () => {
+      expect(isNumeric('.5')).toBe(false);
+      expect(isNumeric('abc')).toBe(false);
+      expect(isNumeric('1.2.3')).toBe(false);
+    });
+    test('should reject empty string', () => {
+      expect(isNumeric('')).toBe(false);
+    });
+  });
+
+  describe('check color key override detection', () => {
+    test('should detect numeric suffix keys', () => {
+      expect(isColorKeyOverridden('primary550')).toBe(true);
+      expect(isColorKeyOverridden('secondary100')).toBe(true);
+      expect(
+        isColorKeyOverridden(
+          faker.word.sample() +
+            faker.number.int({ min: 1, max: 999 }).toString()
+        )
+      ).toBe(true);
+    });
+    test('should reject keys without digits', () => {
+      expect(isColorKeyOverridden('primary')).toBe(false);
+      expect(isColorKeyOverridden('colorKey')).toBe(false);
+      expect(isColorKeyOverridden('')).toBe(false);
+    });
+  });
+});

package/src/utils/validation.ts

@@ -0,0 +1,45 @@
+/**
+ * Check if a string is composed only of zeros, optionally with decimal zeros.
+ * @param input - string to test, e.g. "0", "000.00"
+ * @returns true when input represents zero, otherwise false
+ */
+export function isZeroValue(input: string) {
+  const zeroPattern = /^0+(?:\.0+)?$/;
+  return zeroPattern.test(input);
+}
+
+/**
+ * Validate currency-style input: up to `maxDecimals` places after the decimal point.
+ * @param input - string to test, e.g. "0", "10.25"
+ * @param maxDecimals - maximum digits allowed after the decimal (default: 2)
+ * @returns true for valid money formats, false otherwise
+ */
+export function isValidCurrencyFormat(
+  input: string,
+  maxDecimals: number = 2
+): boolean {
+  // construct pattern like ^(?:0|[1-9]\d*)(?:\.\d{1,2})?$
+  const pattern = `^(?:0|[1-9]\\d*)(?:\\.\\d{1,${maxDecimals}})?$`;
+  const regex = new RegExp(pattern);
+  return regex.test(input);
+}
+
+/**
+ * Test if a string is a numeric literal (integers or decimals), allows leading zeros.
+ * @param input - string to test, e.g. "00.5", "123"
+ * @returns true when string is numeric, false otherwise
+ */
+export function isNumeric(input: string): boolean {
+  const numericPattern = /^\d+(?:\.\d+)?$/;
+  return numericPattern.test(input);
+}
+
+/**
+ * Detect if a color key name ends with digits (overriding default shades).
+ * @param key - color key, e.g. "primary", "secondary100"
+ * @returns true when key has numeric suffix, false otherwise
+ */
+export function isColorKeyOverridden(key: string): boolean {
+  const overridePattern = /\d+$/;
+  return overridePattern.test(key);
+}