@rango-dev/widget-embedded 0.42.3-next.3 → 0.42.3-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.42.3-next.3",
+  "version": "0.42.3-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.45.2-next.4",
     "@rango-dev/queue-manager-react": "^0.29.0",
     "@rango-dev/signer-solana": "^0.39.1-next.1",
-    "@rango-dev/ui": "^0.46.2-next.5",
+    "@rango-dev/ui": "^0.46.2-next.6",
     "@rango-dev/wallets-core": "^0.43.1-next.3",
     "@rango-dev/wallets-react": "^0.30.2-next.4",
     "@rango-dev/wallets-shared": "^0.44.2-next.4",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Slippage/Slippage.tsx

@@ -14,6 +14,7 @@ import { MAX_SLIPPAGE, SLIPPAGES } from '../../constants/swapSettings';
 import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
 import { getSlippageValidation } from '../../utils/settings';
+import { isValidCurrencyFormat } from '../../utils/validation';
 
 import {
   BaseContainer,
@@ -55,9 +56,8 @@ export function Slippage() {
 
   const onInput = (event: React.FormEvent<HTMLInputElement>) => {
     const input = event.target as HTMLInputElement;
-    const regex = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
     const value = input.value;
-    if (!regex.test(value)) {
+    if (!isValidCurrencyFormat(value)) {
       input.value = value.slice(0, -1);
     }
   };

package/src/containers/Inputs/Inputs.tsx

@@ -34,6 +34,7 @@ export function Inputs(props: PropTypes) {
     toToken,
     toBlockchain,
     setInputAmount,
+    sanitizeInputAmount,
     inputAmount,
     inputUsdValue,
     outputAmount,
@@ -79,6 +80,7 @@ export function Inputs(props: PropTypes) {
           label={i18n.t('From')}
           mode="From"
           onInputChange={setInputAmount}
+          onInputBlur={sanitizeInputAmount}
           balance={fromTokenFormattedBalance}
           chain={{
             displayName: fromBlockchain?.displayName || '',

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -83,6 +83,7 @@ export function useSyncUrlAndStore() {
   useEffect(() => {
     const { autoConnect, clientUrl, utmQueryParams, blockchain } =
       getUrlSearchParams();
+
     if (isInRouterContext && fetchMetaStatus === 'success') {
       updateUrlSearchParams({
         [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
@@ -107,6 +108,7 @@ export function useSyncUrlAndStore() {
     toBlockchain,
     toToken,
     campaignMode,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {

package/src/pages/LiquiditySourcePage.tsx

@@ -22,6 +22,7 @@ import {
 } from '../components/SettingsContainer';
 import { useAppStore } from '../store/AppStore';
 import { containsText } from '../utils/numbers';
+import { replaceSpacesWithDash } from '../utils/sanitizers';
 import { getUniqueSwappersGroups } from '../utils/settings';
 
 interface PropTypes {
@@ -70,9 +71,10 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const list = liquiditySources.map((sourceItem) => {
     const { selected, groupTitle, logo, id, ...restSourceItem } = sourceItem;
     return {
-      id: `widget-setting-liquidity-source-${id
-        .toLowerCase()
-        .replace(/\s+/g, '-')}-item-btn`,
+      id: `widget-setting-liquidity-source-${replaceSpacesWithDash(
+        id.toLowerCase()
+      )}-item-btn`,
+
       start: <Image src={logo} size={22} type="circular" />,
       onClick: () => {
         if (!campaignMode) {

package/src/store/quote.ts

@@ -21,8 +21,13 @@ import {
   type Wallet,
   WidgetEvents,
 } from '../types';
-import { isPositiveNumber } from '../utils/numbers';
+import { isPositiveNumber, sanitizeInputAmount } from '../utils/numbers';
+import {
+  ensureLeadingZeroForDecimal,
+  removeLeadingZeros,
+} from '../utils/sanitizers';
 import { getUsdInputFrom, getUsdOutputFrom } from '../utils/swap';
+import { isZeroValue } from '../utils/validation';
 
 import createSelectors from './selectors';
 
@@ -87,6 +92,7 @@ export interface QuoteState {
     value: SomeQuoteState[K]
   ) => void;
   setInputAmount: (amount: string) => void;
+  sanitizeInputAmount: (amount: string) => void;
   setSelectedQuote: (quote: SelectedQuote | null) => void;
   retry: (retryQuote: RetryQuote) => void;
   switchFromAndTo: () => void;
@@ -223,16 +229,29 @@ export const useQuoteStore = createSelectors(
           }),
         }));
       },
+      sanitizeInputAmount: (amount) => {
+        const sanitized = sanitizeInputAmount(amount);
+
+        set(() => ({
+          inputAmount: sanitized,
+        }));
+      },
       setInputAmount: (amount) => {
+        let sanitized = amount;
+        if (!isZeroValue(amount)) {
+          // sanitize once a meaningful digit is entered (e.g. "00001" → "1")
+          sanitized = removeLeadingZeros(sanitized);
+          sanitized = ensureLeadingZeroForDecimal(sanitized);
+        }
         set((state) => ({
-          inputAmount: amount,
-          ...(!amount && {
+          inputAmount: sanitized,
+          ...(!sanitized && {
             outputAmount: null,
             outputUsdValue: new BigNumber(0),
             selectedQuote: null,
           }),
           ...(!!state.fromToken && {
-            inputUsdValue: getUsdValue(state.fromToken, amount),
+            inputUsdValue: getUsdValue(state.fromToken, sanitized),
           }),
         }));
       },

package/src/utils/colors.ts

@@ -2,6 +2,8 @@
 // Types
 import type { ThemeColors, WidgetColors, WidgetColorsKeys } from '../types';
 
+import { isColorKeyOverridden } from './validation';
+
 type RGB = {
   red: number;
   green: number;
@@ -40,15 +42,6 @@ function expandShortHexColor(hexColor: string) {
   return `#${hexColor}`;
 }
 
-/*
- * We letting users to override some specific colors (e.g. `primary550`, `secondary100`).
- * So we are generating a range of colors if `primary` (or other keys) has passed but if user is passing a specific color,
- * we will override the user color to generated range.
- */
-function isOverridingColor(colorKey: string): boolean {
-  return /[0-9]+$/.test(colorKey);
-}
-
 // pad a hexadecimal string with zeros if it needs it
 function pad(number: string, length: number) {
   return number.padStart(length, '0');
@@ -171,7 +164,7 @@ export function expandToGenerateThemeColors(
      */
     const isSingleColor = ['background', 'foreground'].includes(colorKey);
 
-    if (!isSingleColor && !isOverridingColor(colorKey)) {
+    if (!isSingleColor && !isColorKeyOverridden(colorKey)) {
       const expandedHexColor = expandShortHexColor(expandColor);
       Object.assign(
         output,

package/src/utils/numbers.ts

@@ -4,6 +4,9 @@ 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
@@ -125,3 +128,11 @@ export const containsText = (text: string, searchText: string) =>
 
 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/sanitizers.test.ts

@@ -0,0 +1,122 @@
+import { faker } from '@faker-js/faker';
+import { describe, expect, test } from 'vitest';
+
+import {
+  ensureLeadingZeroForDecimal,
+  formatThousandsWithCommas,
+  removeLeadingZeros,
+  replaceSpacesWithDash,
+  stripTrailingZeros,
+} from './sanitizers';
+
+const WORD_COUNT = 5;
+const FAKER_SEED = 12;
+const LONG_NUMBER_LENGTH = 50;
+faker.seed(FAKER_SEED);
+
+describe('check sanitization behaviors', () => {
+  describe('check leading zero removal', () => {
+    test('should remove zeros at start before digits', () => {
+      expect(removeLeadingZeros('000123')).toBe('123');
+      expect(removeLeadingZeros('00123')).toBe('123');
+    });
+
+    test('should preserve lone zero or non-digit prefixes', () => {
+      expect(removeLeadingZeros('0')).toBe('0');
+      expect(removeLeadingZeros('0000')).toBe('0');
+      expect(removeLeadingZeros('00.1')).toBe('0.1');
+      expect(removeLeadingZeros('00a')).toBe('0a');
+    });
+
+    test('should leave strings with no leading zeros unchanged', () => {
+      const val = faker.number.int({ min: 1, max: 999 }).toString();
+      expect(removeLeadingZeros(val)).toBe(val);
+    });
+  });
+
+  describe('check decimal leading zero insertion', () => {
+    test('should add a zero before lone decimal points', () => {
+      expect(ensureLeadingZeroForDecimal('.5')).toBe('0.5');
+      expect(ensureLeadingZeroForDecimal('.000')).toBe('0.000');
+      expect(ensureLeadingZeroForDecimal('0.001')).toBe('0.001');
+      expect(ensureLeadingZeroForDecimal('000.000')).toBe('000.000');
+    });
+
+    test('should not alter other inputs', () => {
+      expect(ensureLeadingZeroForDecimal('0.5')).toBe('0.5');
+      expect(ensureLeadingZeroForDecimal('2.')).toBe('2.');
+      expect(ensureLeadingZeroForDecimal('')).toBe('');
+    });
+  });
+
+  describe('check thousand separator formatting', () => {
+    test('should insert commas every three digits for 4–6 digit numbers', () => {
+      expect(formatThousandsWithCommas('1000')).toBe('1,000');
+      expect(formatThousandsWithCommas('12345')).toBe('12,345');
+      expect(formatThousandsWithCommas('123456')).toBe('123,456');
+    });
+
+    test('should handle large numbers correctly', () => {
+      expect(formatThousandsWithCommas('1234567')).toBe('1,234,567');
+      expect(formatThousandsWithCommas('1234567890')).toBe('1,234,567,890');
+    });
+
+    test('should not add commas for numbers below 1000', () => {
+      expect(formatThousandsWithCommas('0')).toBe('0');
+      expect(formatThousandsWithCommas('999')).toBe('999');
+    });
+  });
+
+  describe('check space-to-dash replacement', () => {
+    test('should convert any spaces to a single dash', () => {
+      const words = faker.lorem.words(WORD_COUNT).split(' ');
+      const spaced = words.join('   ');
+      expect(replaceSpacesWithDash(spaced)).toBe(words.join('-'));
+    });
+
+    test('should convert tabs and newlines into dashes', () => {
+      const words = faker.lorem.words(WORD_COUNT).split(' ');
+      expect(replaceSpacesWithDash(words.join('\t'))).toBe(words.join('-'));
+      expect(replaceSpacesWithDash(words.join('\n'))).toBe(words.join('-'));
+    });
+
+    test('should handle empty or single-word strings', () => {
+      expect(replaceSpacesWithDash('')).toBe('');
+      expect(replaceSpacesWithDash('nospace')).toBe('nospace');
+    });
+  });
+
+  describe('check trailing zero stripping', () => {
+    test('should trim only zeros after last non-zero digit', () => {
+      expect(stripTrailingZeros('0.0010000')).toBe('0.001');
+      expect(stripTrailingZeros('123.45000')).toBe('123.45');
+      expect(stripTrailingZeros('5.1000')).toBe('5.1');
+    });
+
+    test('should remove entire fractional part if all zeros', () => {
+      expect(stripTrailingZeros('10.000')).toBe('10');
+      expect(stripTrailingZeros('0.000')).toBe('0');
+    });
+
+    test('should leave inputs without trailing zeros untouched', () => {
+      expect(stripTrailingZeros('42')).toBe('42');
+      expect(stripTrailingZeros('7.89')).toBe('7.89');
+      expect(stripTrailingZeros('0.123')).toBe('0.123');
+    });
+
+    test('edge: very long fractional zeros', () => {
+      const long =
+        '0.' +
+        '0'.repeat(LONG_NUMBER_LENGTH) +
+        '1' +
+        '0'.repeat(LONG_NUMBER_LENGTH);
+      expect(stripTrailingZeros(long)).toBe(
+        '0.' + '0'.repeat(LONG_NUMBER_LENGTH) + '1'
+      );
+    });
+
+    test('edge: no decimal point', () => {
+      expect(stripTrailingZeros('1000')).toBe('1000');
+    });
+  });
+});

package/src/utils/sanitizers.ts

@@ -0,0 +1,41 @@
+/**
+ * Remove leading zeros when followed by another digit.
+ * @example "000123" → "123"
+ */
+export function removeLeadingZeros(input: string): string {
+  return input.replace(/^0+(?=\d)/g, '');
+}
+
+/**
+ * Ensure a leading zero before a decimal point.
+ * @example ".45" → "0.45"
+ */
+export function ensureLeadingZeroForDecimal(input: string): string {
+  return input.replace(/^\.(\d+)/, '0.$1');
+}
+
+/**
+ * Insert commas as thousand separators.
+ * @example "1234567" → "1,234,567"
+ */
+export function formatThousandsWithCommas(input: string): string {
+  return input.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+/**
+ * Replace spaces (one or more) with a single dash.
+ * @example "a b  c" → "a-b-c"
+ */
+export function replaceSpacesWithDash(input: string): string {
+  return input.replace(/\s+/g, '-');
+}
+
+/**
+ * Strip any trailing zeros in the fractional part, and remove a dangling decimal point.
+ * @example "0.0010000" → "0.001"
+ * @example "10.000"    → "10"
+ */
+export function stripTrailingZeros(input: string): string {
+  const s = input.replace(/(\.\d*?[1-9])0+$/, '$1');
+  return s.replace(/\.0+$/, '');
+}

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, precision: 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);
+}

package/src/utils/wallets.ts

@@ -41,6 +41,7 @@ import { EXCLUDED_WALLETS } from '../constants/wallets';
 
 import { isBlockchainTypeInCategory, removeDuplicateFrom } from './common';
 import { numberToString } from './numbers';
+import { formatThousandsWithCommas } from './sanitizers';
 
 export type ExtendedModalWalletInfo = WalletInfoWithExtra &
   Pick<ExtendedWalletInfo, 'properties' | 'isHub'>;
@@ -295,7 +296,7 @@ export const calculateWalletUsdValue = (balances: BalanceState) => {
 
 function numberWithThousandSeparator(number: string | number): string {
   const parts = number.toString().split('.');
-  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  parts[0] = formatThousandsWithCommas(parts[0]);
   return parts.join('.');
 }