@rango-dev/widget-embedded 0.0.0-experimental-e022ed95-20260421 → 0.0.0-experimental-82bcc5d9-20260608

package/src/utils/common.ts

@@ -237,7 +237,6 @@ export const isBlockchainTypeInCategory = (
     case BlockchainCategories.OTHER:
       return (
         blockchainType !== TransactionType.TRANSFER &&
-        blockchainType !== TransactionType.COSMOS &&
         blockchainType !== TransactionType.EVM
       );
     default:

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/meta.ts

@@ -70,3 +70,16 @@ export function isValidTokenAddress(
   const valid = regex.filter((r) => new RegExp(r).test(address)).length > 0;
   return valid;
 }
+
+export function createTokenExplorerUrl(params: {
+  contractAddress: string;
+  blockchainMeta: BlockchainMeta;
+}): string | undefined {
+  const { contractAddress, blockchainMeta } = params;
+
+  if (blockchainMeta.info?.tokenUrl) {
+    return blockchainMeta.info.tokenUrl.replace('{address}', contractAddress);
+  }
+
+  return blockchainMeta.info?.addressUrl.replace('{wallet}', contractAddress);
+}

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/providers.ts

@@ -1,12 +1,12 @@
 import type { WidgetConfig } from '../types';
 import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
 
+import { Provider } from '@hub3js/core';
 import {
   defineVersions,
   pickVersion,
-  Provider,
   type VersionedProviders,
-} from '@rango-dev/wallets-core';
+} from '@hub3js/core/utils';
 
 export interface ProvidersOptions {
   walletConnectProjectId?: WidgetConfig['walletConnectProjectId'];

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;
+}

package/src/utils/wallets.ts

@@ -23,13 +23,10 @@ import {
 import { legacyReadAccountAddress as readAccountAddress } from '@rango-dev/wallets-core/legacy';
 import {
   detectInstallLink,
-  getCosmosExperimentalChainInfo,
   isEvmAddress,
-  KEPLR_COMPATIBLE_WALLETS,
   Networks,
 } from '@rango-dev/wallets-shared';
 import BigNumber from 'bignumber.js';
-import { isCosmosBlockchain } from 'rango-types';
 
 import { ZERO } from '../constants/numbers';
 import {
@@ -314,35 +311,6 @@ function numberWithThousandSeparator(number: string | number): string {
   return parts.join('.');
 }
 
-export const isExperimentalChain = (
-  blockchains: BlockchainMeta[],
-  wallet: string
-): boolean => {
-  const cosmosExperimentalChainInfo = getCosmosExperimentalChainInfo(
-    Object.entries(blockchains)
-      .map(([, blockchainMeta]) => blockchainMeta)
-      .filter(isCosmosBlockchain)
-  );
-  return (
-    cosmosExperimentalChainInfo &&
-    !!cosmosExperimentalChainInfo[wallet]?.experimental
-  );
-};
-
-export const getKeplrCompatibleConnectedWallets = (
-  selectableWallets: Wallet[]
-): WalletType[] => {
-  const connectedWalletTypes = new Set(
-    selectableWallets.map((wallet) => {
-      return wallet.walletType;
-    })
-  );
-
-  return KEPLR_COMPATIBLE_WALLETS.filter((compatibleWallet) =>
-    connectedWalletTypes.has(compatibleWallet)
-  );
-};
-
 function representAmountInNumber(amount: string, decimals: number): string {
   return new BigNumber(amount).shiftedBy(-decimals).toFixed();
 }

package/dist/components/CustomTokenModal/CustomTokenModal.helpers.d.ts

@@ -1,3 +0,0 @@
-import type { BlockchainMeta } from 'rango-types';
-export declare function generateExplorerLink(address: string | null, blockchain: BlockchainMeta): string;
-//# sourceMappingURL=CustomTokenModal.helpers.d.ts.map

package/dist/components/CustomTokenModal/CustomTokenModal.helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomTokenModal.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/CustomTokenModal/CustomTokenModal.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,UAAU,EAAE,cAAc,GACzB,MAAM,CAaR"}

package/dist/components/WalletStatefulConnect/ExperimentalChain.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface PropTypes {
-    displayName?: string;
-    onConfirm: () => void;
-    id: string;
-}
-export declare function ExperimentalChain(props: PropTypes): React.JSX.Element;
-export {};
-//# sourceMappingURL=ExperimentalChain.d.ts.map

package/dist/components/WalletStatefulConnect/ExperimentalChain.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExperimentalChain.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/ExperimentalChain.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,qBA4BjD"}

package/dist/components/WalletStatefulConnect/ExperimentalChainStatus.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './ExperimentalChainStatus.types';
-import React from 'react';
-export declare function ExperimentalChainStatus(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=ExperimentalChainStatus.d.ts.map

package/dist/components/WalletStatefulConnect/ExperimentalChainStatus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExperimentalChainStatus.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/ExperimentalChainStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,SAAS,qBAsBvD"}

package/dist/components/WalletStatefulConnect/ExperimentalChainStatus.helpers.d.ts

@@ -1,8 +0,0 @@
-import type { PropTypes } from './ExperimentalChainStatus.types';
-import type { MessageType } from '@rango-dev/ui';
-export declare function generateMessageByStatus(status: PropTypes['status'], blockchainDisplayName: string | undefined): {
-    type: MessageType;
-    title: string;
-    description: string;
-};
-//# sourceMappingURL=ExperimentalChainStatus.helpers.d.ts.map

package/dist/components/WalletStatefulConnect/ExperimentalChainStatus.helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExperimentalChainStatus.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/ExperimentalChainStatus.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIjD,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,EAC3B,qBAAqB,EAAE,MAAM,GAAG,SAAS,GACxC;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB,CAwCA"}

package/dist/components/WalletStatefulConnect/ExperimentalChainStatus.types.d.ts

@@ -1,6 +0,0 @@
-export interface PropTypes {
-    displayName?: string;
-    status: 'in-progress' | 'completed' | 'rejected';
-    image: string;
-}
-//# sourceMappingURL=ExperimentalChainStatus.types.d.ts.map

package/dist/components/WalletStatefulConnect/ExperimentalChainStatus.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExperimentalChainStatus.types.d.ts","sourceRoot":"","sources":["../../../src/components/WalletStatefulConnect/ExperimentalChainStatus.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;CACf"}

package/src/components/CustomTokenModal/CustomTokenModal.helpers.ts

@@ -1,19 +0,0 @@
-import type { BlockchainMeta } from 'rango-types';
-
-export function generateExplorerLink(
-  address: string | null,
-  blockchain: BlockchainMeta
-): string {
-  // We don't have Cosmos explorer url in API.
-  if (blockchain.type === 'COSMOS') {
-    return '';
-  }
-
-  const explorerLinkPattern = blockchain.info?.addressUrl;
-
-  if (!explorerLinkPattern || !address) {
-    return '';
-  }
-
-  return explorerLinkPattern.replace('{wallet}', address);
-}

package/src/components/WalletStatefulConnect/ExperimentalChain.tsx

@@ -1,39 +0,0 @@
-import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox } from '@rango-dev/ui';
-import React from 'react';
-
-interface PropTypes {
-  displayName?: string;
-  onConfirm: () => void;
-  id: string;
-}
-
-export function ExperimentalChain(props: PropTypes) {
-  const { displayName, onConfirm, id } = props;
-
-  return (
-    <MessageBox
-      id={id}
-      title={i18n.t({
-        id: 'Add {blockchainDisplayName} Chain',
-        values: { blockchainDisplayName: displayName },
-      })}
-      type="warning"
-      description={i18n.t({
-        id: 'Would you like to add the {blockchainDisplayName} experimental chain to your wallet?',
-        values: { blockchainDisplayName: displayName },
-      })}>
-      <Divider size={18} />
-      <Divider size={32} />
-      <Button
-        id="widget-experimental-chain-confirm-btn"
-        onClick={onConfirm}
-        variant="outlined"
-        type="primary"
-        fullWidth
-        size="large">
-        {i18n.t('Confirm')}
-      </Button>
-    </MessageBox>
-  );
-}

package/src/components/WalletStatefulConnect/ExperimentalChainStatus.helpers.ts

@@ -1,53 +0,0 @@
-import type { PropTypes } from './ExperimentalChainStatus.types';
-import type { MessageType } from '@rango-dev/ui';
-
-import { i18n } from '@lingui/core';
-
-export function generateMessageByStatus(
-  status: PropTypes['status'],
-  blockchainDisplayName: string | undefined
-): {
-  type: MessageType;
-  title: string;
-  description: string;
-} {
-  switch (status) {
-    case 'in-progress':
-      return {
-        type: 'loading',
-        title: i18n.t({
-          id: 'Add {blockchainDisplayName} Chain',
-          values: { blockchainDisplayName },
-        }),
-        description: i18n.t({
-          id: 'Please approve the experimental chain pop-up in your wallet.',
-          values: { blockchainDisplayName },
-        }),
-      };
-    case 'completed':
-      return {
-        type: 'success',
-        title: i18n.t({
-          id: '{blockchainDisplayName} Chain Added',
-          values: { blockchainDisplayName },
-        }),
-        description: i18n.t({
-          id: 'The {blockchainDisplayName} chain has been successfully added to your wallet.',
-          values: { blockchainDisplayName },
-        }),
-      };
-    case 'rejected':
-      return {
-        type: 'error',
-        title: i18n.t('Request Rejected'),
-        description: i18n.t({
-          id: "You've rejected adding {blockchainDisplayName} chain to your wallet.",
-          values: { blockchainDisplayName },
-        }),
-      };
-    default:
-      throw new Error(
-        `Showing information about an experimentation chain status needs to be defined first. status: ${status}`
-      );
-  }
-}

package/src/components/WalletStatefulConnect/ExperimentalChainStatus.tsx

@@ -1,36 +0,0 @@
-import type { PropTypes } from './ExperimentalChainStatus.types';
-
-import { Image, MessageBox } from '@rango-dev/ui';
-import React from 'react';
-
-import {
-  LogoContainer,
-  Spinner,
-  WalletImageContainer,
-} from '../ConfirmWalletsModal/WalletList.styles';
-
-import { generateMessageByStatus } from './ExperimentalChainStatus.helpers';
-
-export function ExperimentalChainStatus(props: PropTypes) {
-  const { status, displayName, image } = props;
-  const data = generateMessageByStatus(status, displayName);
-  const hasImage = status == 'in-progress';
-
-  return (
-    <MessageBox
-      type={data.type}
-      title={data.title}
-      description={data.description}
-      icon={
-        hasImage ? (
-          <LogoContainer>
-            <WalletImageContainer>
-              <Image src={image} size={45} />
-            </WalletImageContainer>
-            <Spinner />
-          </LogoContainer>
-        ) : undefined
-      }
-    />
-  );
-}

package/src/components/WalletStatefulConnect/ExperimentalChainStatus.types.ts

@@ -1,5 +0,0 @@
-export interface PropTypes {
-  displayName?: string;
-  status: 'in-progress' | 'completed' | 'rejected';
-  image: string;
-}