@rango-dev/widget-embedded 0.0.0-experimental-e022ed95-20260421 → 0.0.0-experimental-e79b998c-20260503

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.0.0-experimental-e022ed95-20260421",
+  "version": "0.0.0-experimental-e79b998c-20260503",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,23 +25,23 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.12.1",
-    "@rango-dev/provider-all": "^0.0.0-experimental-e022ed95-20260421",
+    "@rango-dev/provider-all": "^0.61.1",
     "@rango-dev/queue-manager-core": "^0.33.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.60.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.61.1",
     "@rango-dev/queue-manager-react": "^0.33.0",
-    "@rango-dev/signer-solana": "^0.0.0-experimental-e022ed95-20260421",
-    "@rango-dev/ui": "^0.61.0",
-    "@rango-dev/wallets-core": "^0.57.0",
-    "@rango-dev/wallets-react": "^0.44.0",
-    "@rango-dev/wallets-shared": "^0.58.0",
+    "@rango-dev/signer-solana": "^0.47.1",
+    "@rango-dev/ui": "^0.0.0-experimental-e79b998c-20260503",
+    "@rango-dev/wallets-core": "^0.58.1",
+    "@rango-dev/wallets-react": "^0.45.1",
+    "@rango-dev/wallets-shared": "^0.59.1",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "ethers": "^6.13.2",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.70",
-    "rango-types": "^0.1.89",
+    "rango-sdk": "^0.1.77",
+    "rango-types": "^0.1.98",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",

package/src/constants/index.ts

@@ -1,6 +1,5 @@
 import { UI_ID } from '@rango-dev/ui';
 
-export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
 export const SCANNER_BASE_URL = 'https://explorer.rango.exchange';
 

package/src/containers/Inputs/Inputs.tsx

@@ -116,14 +116,9 @@ export function Inputs(props: PropTypes) {
           loadingBalance={fetchingBalance}
           tooltipContainer={getContainer()}
           onSelectMaxBalance={() => {
-            const tokenBalanceReal = numberToString(
-              fromBalanceAmount,
-              fromTokenBalance?.decimals
-            );
-
             // if a token hasn't any value, we will reset the input by setting an empty string.
-            const nextInputAmount = !!fromTokenBalance?.amount
-              ? tokenBalanceReal.split(',').join('')
+            const nextInputAmount = fromBalanceAmount.isGreaterThan(ZERO)
+              ? fromBalanceAmount.toFixed()
               : '';
 
             setInputAmount(nextInputAmount);

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -4,11 +4,12 @@ import type { PropsWithChildren } from 'react';
 import { setSolanaSignerConfig } from '@rango-dev/signer-solana';
 import React, { useEffect, useMemo } from 'react';
 
-import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
+import { DEFAULT_BASE_URL } from '../../constants';
 import { useFetchApiConfig } from '../../hooks/useFetchApiConfig';
 import useFontLoader from '../../hooks/useFontLoader';
 import QueueManager from '../../QueueManager';
 import { initConfig } from '../../utils/configs';
+import { getApiKeyFromEnvOrThrow } from '../../utils/env';
 import { WidgetWallets } from '../Wallets';
 import { WidgetInfo } from '../WidgetInfo';
 
@@ -32,7 +33,7 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
 
   useMemo(() => {
     initConfig({
-      API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
+      API_KEY: config?.apiKey || getApiKeyFromEnvOrThrow(),
       BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
     });
   }, [config.apiKey, config.apiUrl]);

package/src/store/quote.ts

@@ -26,6 +26,7 @@ import {
 import { isPositiveNumber, sanitizeInputAmount } from '../utils/numbers';
 import {
   ensureLeadingZeroForDecimal,
+  parseNumericValue,
   removeLeadingZeros,
 } from '../utils/sanitizers';
 import { getUsdInputFrom, getUsdOutputFrom } from '../utils/swap';
@@ -249,7 +250,7 @@ const initializer: StateCreator<
     }));
   },
   setInputAmount: (amount) => {
-    let sanitized = amount;
+    let sanitized = parseNumericValue(amount);
     if (!isZeroValue(amount)) {
       // sanitize once a meaningful digit is entered (e.g. "00001" → "1")
       sanitized = removeLeadingZeros(sanitized);

package/src/store/slices/wallets.ts

@@ -466,7 +466,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
       const { _balances, _aggregatedBalances } =
         computeNextStateAfterWalletBalanceRemoval(
           partialCurrentState,
-          walletType,
+          [walletType],
           options
         );
 
@@ -611,8 +611,10 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
       if (accounts.length === 0 || !accounts[0]) {
         return;
       }
-      // All the `accounts` have same `walletType` so we can pick the first one.
-      const walletType = accounts[0].walletType;
+
+      const walletTypes = [
+        ...new Set(accounts.map((account) => account.walletType)),
+      ];
 
       get().setConnectedWalletAsRefetching(accounts);
 
@@ -630,7 +632,6 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         return;
       }
       const walletsDetails = response.wallets;
-
       if (walletsDetails) {
         let nextBalances: BalanceState = get()._balances;
         let nextAggregatedBalances: AggregatedBalanceState =
@@ -657,7 +658,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
           const { _balances, _aggregatedBalances } =
             computeNextStateAfterWalletBalanceRemoval(
               partialCurrentState,
-              walletType,
+              walletTypes,
               {
                 chains: [wallet.blockChain],
               }
@@ -672,7 +673,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
           if (
             !get().connectedWallets.find(
               (connectedWallet) =>
-                connectedWallet.walletType === walletType &&
+                walletTypes.includes(connectedWallet.walletType) &&
                 connectedWallet.address === wallet.address &&
                 connectedWallet.chain === wallet.blockChain
             )
@@ -715,11 +716,23 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         if (retryOnFailedBalances) {
           const failedWallets: Wallet[] = walletsDetails
             .filter((wallet) => wallet.failed)
-            .map((wallet) => ({
-              chain: wallet.blockChain,
-              walletType: walletType,
-              address: wallet.address,
-            }));
+            .map((wallet) => {
+              const walletType = get().connectedWallets.find(
+                (connectedWallet) =>
+                  connectedWallet.chain === wallet.blockChain &&
+                  connectedWallet.address
+              )?.walletType;
+              // Return null if there is no related connected wallet.
+              if (!walletType) {
+                return null;
+              }
+              return {
+                chain: wallet.blockChain,
+                walletType: walletType,
+                address: wallet.address,
+              };
+            })
+            .filter((wallet) => !!wallet);
           if (failedWallets.length > 0) {
             await get().fetchMainTokensBalances(failedWallets, {
               retryOnFailedBalances: false,

package/src/store/utils/wallets.ts

@@ -164,14 +164,14 @@ export function computeNextStateAfterWalletBalanceRemoval(
     _aggregatedBalances: AggregatedBalanceState;
     connectedWallets: ConnectedWallet[];
   },
-  walletType: string,
+  walletTypes: string[],
   options?: {
     chains?: string[];
     namespaces?: Namespace[];
   }
 ) {
   let walletsNeedsToBeRemoved = paritalCurrentState.connectedWallets.filter(
-    (connectedWallet) => connectedWallet.walletType === walletType
+    (connectedWallet) => walletTypes.includes(connectedWallet.walletType)
   );
 
   /*
@@ -181,7 +181,7 @@ export function computeNextStateAfterWalletBalanceRemoval(
    * So we only delete balance when there is no connected wallet that has access to that specific chain and address.
    */
   paritalCurrentState.connectedWallets.forEach((connectedWallet) => {
-    if (connectedWallet.walletType !== walletType) {
+    if (!walletTypes.includes(connectedWallet.walletType)) {
       walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
         const isAnotherWalletHasSameAddressAndChain =
           wallet.chain === connectedWallet.chain &&

package/src/utils/configs.ts

@@ -1,8 +1,7 @@
 import type { Tokens, WidgetVariant } from '../types';
 import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
-import { RANGO_PUBLIC_API_KEY } from '../constants';
-
+import { getApiKeyFromEnvOrNotSet } from './env';
 import { areTokensEqual } from './wallets';
 
 export interface Configs {
@@ -17,7 +16,7 @@ type TokensConfig =
     };
 
 let configs: Configs = {
-  API_KEY: RANGO_PUBLIC_API_KEY,
+  API_KEY: getApiKeyFromEnvOrNotSet(),
 };
 
 export function getConfig(name: keyof Configs) {

package/src/utils/env.ts

@@ -0,0 +1,28 @@
+export function getApiKeyFromEnv(): string | undefined {
+  // NOTE: parcel doesn't support for dynamic keys, so we have to do it statically.
+  return process.env.REACT_APP_RANGO_API_KEY;
+}
+
+/**
+ * This is useful when the api key is mandatory and nothing works corectly without api key.
+ * You need to first fallback to user's input (widget config), then you can use this to try to find from envs (e.g. widget/app or widget/playground)
+ * Then throw an runtime error to panic the program.
+ */
+export function getApiKeyFromEnvOrThrow() {
+  // NOTE: parcel doesn't support for dynamic keys, so we have to do it statically.
+  const value = getApiKeyFromEnv();
+  if (value) {
+    return value;
+  }
+
+  throw new Error(
+    'Ensure you have set REACT_APP_RANGO_API_KEY in your env variables.'
+  );
+}
+
+/**
+ * You can use this whenever you want to use the api key in initialize process, but mark the key explictly as not set to debug more easily since you should never reach there.
+ */
+export function getApiKeyFromEnvOrNotSet(): string {
+  return getApiKeyFromEnv() || 'NOT_SET';
+}

package/src/utils/numbers.ts

@@ -134,5 +134,9 @@ export function sanitizeInputAmount(amount: string): string {
     return '0';
   }
 
+  if (amount.endsWith('.')) {
+    return amount.slice(0, -1);
+  }
+
   return stripTrailingZeros(amount);
 }

package/src/utils/sanitizers.test.ts

@@ -4,6 +4,7 @@ import { describe, expect, test } from 'vitest';
 import {
   ensureLeadingZeroForDecimal,
   formatThousandsWithCommas,
+  parseNumericValue,
   removeLeadingZeros,
   replaceSpacesWithDash,
   stripTrailingZeros,
@@ -119,4 +120,46 @@ describe('check sanitization behaviors', () => {
       expect(stripTrailingZeros('1000')).toBe('1000');
     });
   });
+
+  describe('parseNumericValue', () => {
+    test('removes commas and keeps digits', () => {
+      expect(parseNumericValue('300,222')).toBe('300222');
+    });
+
+    test('removes letters and keeps only the first decimal', () => {
+      expect(parseNumericValue('12a3.4b5')).toBe('123.45');
+    });
+
+    test('removes extra dots and keeps the first one', () => {
+      expect(parseNumericValue('1.2.3.4')).toBe('1.234');
+    });
+
+    test('keeps a leading decimal', () => {
+      expect(parseNumericValue('.5')).toBe('.5');
+    });
+
+    test('removes symbols and letters', () => {
+      expect(parseNumericValue('$1,2a3.4!')).toBe('123.4');
+    });
+
+    test('returns empty string if no digits', () => {
+      expect(parseNumericValue('abc!@#')).toBe('');
+    });
+
+    test('handles empty string', () => {
+      expect(parseNumericValue('')).toBe('');
+    });
+
+    test('keeps only the first dot if string starts with multiple dots', () => {
+      expect(parseNumericValue('...123.45')).toBe('.12345');
+    });
+
+    test('handles string with only dots', () => {
+      expect(parseNumericValue('....')).toBe('.');
+    });
+
+    test('handles string with digits only', () => {
+      expect(parseNumericValue('123456')).toBe('123456');
+    });
+  });
 });

package/src/utils/sanitizers.ts

@@ -39,3 +39,29 @@ export function stripTrailingZeros(input: string): string {
   const s = input.replace(/(\.\d*?[1-9])0+$/, '$1');
   return s.replace(/\.0+$/, '');
 }
+
+/**
+ * Normalize a numeric input string by removing all non-numeric characters
+ * except digits and a single decimal separator.
+ *
+ * This function:
+ * - strips letters, spaces, commas, and symbols
+ * - preserves digits (`0–9`)
+ * - keeps only the first `.` as the decimal point
+ *
+ * @example "300,222"     → "300222"
+ * @example "12a3.4b5"   → "123.45"
+ * @example "1.2.3.4"    → "1.234"
+ * @example ".5"         → ".5"
+ */
+export function parseNumericValue(value: string): string {
+  value = value
+    // 1. Remove everything except digits and dots
+    .replace(/[^\d.]/g, '')
+    // 2. Keep only the first dot
+    .replace(/\./g, (_, offset, string) =>
+      string.indexOf('.') === offset ? '.' : ''
+    );
+
+  return value;
+}