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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.0.0-experimental-e022ed95-20260421",
+  "version": "0.0.0-experimental-82bcc5d9-20260608",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -22,31 +22,43 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@hub3js/core": "^0.60.1",
+    "@hub3js/namespaces": "^0.1.1",
+    "@hub3js/std": "^0.1.1",
     "@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.0.0-experimental-82bcc5d9-20260608",
     "@rango-dev/queue-manager-core": "^0.33.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.60.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.0.0-experimental-82bcc5d9-20260608",
     "@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.48.0",
+    "@rango-dev/ui": "^0.0.0-experimental-82bcc5d9-20260608",
+    "@rango-dev/wallets-core": "^0.0.0-experimental-82bcc5d9-20260608",
+    "@rango-dev/wallets-react": "^0.0.0-experimental-82bcc5d9-20260608",
+    "@rango-dev/wallets-shared": "^0.0.0-experimental-82bcc5d9-20260608",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
+    "crypto-browserify": "^3.12.1",
     "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.5.0",
+    "rango-types": "^0.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",
     "zustand": "^4.3.2"
   },
+  "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "vm-browserify": "^1.1.2"
+  },
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,11 +1,9 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet } from '../../types';
 import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 
 import { i18n } from '@lingui/core';
 import { warn } from '@rango-dev/logging-core';
 import {
-  Divider,
   makeInfo,
   SelectableWallet,
   Typography,
@@ -13,42 +11,24 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
-import { useWallets } from '../..';
-import { WIDGET_UI_ID } from '../../constants';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
-import { getBlockchainDisplayNameFor } from '../../utils/meta';
-import {
-  getAddress,
-  getConciseAddress,
-  isExperimentalChain,
-} from '../../utils/wallets';
-import { WatermarkedModal } from '../common/WatermarkedModal';
+import { getAddress, getConciseAddress } from '../../utils/wallets';
 import { StatefulConnectModal } from '../StatefulConnectModal';
-import { ExperimentalChain } from '../WalletStatefulConnect';
-import { ExperimentalChainStatus } from '../WalletStatefulConnect/ExperimentalChainStatus';
 
 import { ShowMoreWallets } from './ConfirmWallets.styles';
 
 const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
-const TIME_TO_CLOSE_MODAL = 3_000;
 
 export function WalletList(props: PropTypes) {
   const { chain, quoteChains, isSelected, selectWallet, limit, onShowMore } =
     props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const { blockchains, connectedWallets } = useAppStore();
+  const { connectedWallets } = useAppStore();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<ExtendedModalWalletInfo>();
-  const [experimentalChainWallet, setExperimentalChainWallet] =
-    useState<Wallet | null>(null);
-  const [showExperimentalChainModal, setShowExperimentalChainModal] =
-    useState(false);
-  const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
-    useState<'in-progress' | 'completed' | 'rejected' | null>(null);
-  const { suggestAndConnect } = useWallets();
   const { list } = useWalletList({
     chain,
   });
@@ -57,45 +37,6 @@ export function WalletList(props: PropTypes) {
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
-  const addExperimentalChain = async (wallet: Wallet) => {
-    setShowExperimentalChainModal(false);
-    setAddingExperimentalChainStatus('in-progress');
-    try {
-      // 1. Finding wallet with namespaces info.
-      const walletWithNamespace = list.find(
-        (wallet) => wallet.type === wallet.type
-      );
-
-      /*
-       * 2. Getting namespaces info.
-       * Legacy and hub have different structure to handle each situation.
-       */
-      const needsNamespace = walletWithNamespace?.isHub
-        ? walletWithNamespace.properties?.find(
-            (item) => item.name === 'namespaces'
-          )?.value
-        : walletWithNamespace?.needsNamespace;
-
-      // 3. Finding target namespace.
-      const allBlockChains = blockchains();
-      const namespace = needsNamespace?.data.find((ns) =>
-        ns
-          .getSupportedChains(allBlockChains)
-          .some((chain) => chain.name === wallet.chain)
-      );
-      if (!namespace) {
-        throw new Error('Requested chain is not supported');
-      }
-      await suggestAndConnect(wallet.walletType, {
-        namespace: namespace.value,
-        network: wallet.chain,
-      });
-      setAddingExperimentalChainStatus('completed');
-    } catch {
-      setAddingExperimentalChainStatus('rejected');
-    }
-  };
-
   useEffect(() => {
     setSortedList((sortedList) => {
       const selectedWalletIndex = list.findIndex((wallet) =>
@@ -115,29 +56,6 @@ export function WalletList(props: PropTypes) {
     });
   }, [JSON.stringify(list)]);
 
-  const modalContainer = document.getElementById(
-    WIDGET_UI_ID.SWAP_BOX_ID
-  ) as HTMLDivElement;
-
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout> | null = null;
-    if (
-      addingExperimentalChainStatus === 'completed' ||
-      addingExperimentalChainStatus === 'rejected'
-    ) {
-      timeout = setTimeout(
-        () => setAddingExperimentalChainStatus(null),
-        TIME_TO_CLOSE_MODAL
-      );
-    }
-
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [addingExperimentalChainStatus]);
-
   return (
     <>
       {sortedList.slice(0, limit).map((wallet) => {
@@ -155,35 +73,11 @@ export function WalletList(props: PropTypes) {
         const isConnectedButDifferentThanTargetNamespace =
           isConnected && !!wallet.needsNamespace && !conciseAddress;
 
-        const experimentalChain = isExperimentalChain(blockchains(), chain);
-
-        const experimentalChainNotAdded = !connectedWallets.find(
-          (connectedWallet) =>
-            connectedWallet.walletType === wallet.type &&
-            connectedWallet.chain === chain
-        );
-
-        const couldAddExperimentalChain =
-          experimentalChain &&
-          experimentalChainNotAdded &&
-          wallet.state === WalletState.CONNECTED;
-
         const onSelectableWalletClick = async () => {
           const isDisconnected = wallet.state === WalletState.DISCONNECTED;
 
-          if (
-            isDisconnected ||
-            (isConnectedButDifferentThanTargetNamespace &&
-              !couldAddExperimentalChain)
-          ) {
+          if (isDisconnected || isConnectedButDifferentThanTargetNamespace) {
             setSelectedWalletToConnect(wallet);
-          } else if (couldAddExperimentalChain) {
-            setExperimentalChainWallet({
-              walletType: wallet.type,
-              chain,
-              address: address ?? '',
-            });
-            setShowExperimentalChainModal(true);
           } else {
             selectWallet({
               walletType: wallet.type,
@@ -196,12 +90,7 @@ export function WalletList(props: PropTypes) {
         const info = makeInfo(wallet.state);
 
         const getWalletDescription = () => {
-          if (couldAddExperimentalChain) {
-            return i18n.t({
-              id: 'Add {chain} chain',
-              values: { chain },
-            });
-          } else if (isConnectedButDifferentThanTargetNamespace) {
+          if (isConnectedButDifferentThanTargetNamespace) {
             return i18n.t('Chain not connected');
           } else if (conciseAddress) {
             return conciseAddress;
@@ -223,57 +112,17 @@ export function WalletList(props: PropTypes) {
           return info.color;
         };
 
-        const blockchainDisplayName: string | undefined =
-          experimentalChainWallet?.chain
-            ? getBlockchainDisplayNameFor(
-                experimentalChainWallet.chain,
-                blockchains()
-              )
-            : undefined;
         return (
-          <React.Fragment key={`${wallet.title}_${blockchainDisplayName}`}>
-            {!!experimentalChainWallet && (
-              <WatermarkedModal
-                id="widget-wallets-list-watermarked-modal"
-                open={!!experimentalChainWallet && showExperimentalChainModal}
-                container={modalContainer}
-                onClose={() => {
-                  setExperimentalChainWallet(null);
-                }}>
-                <ExperimentalChain
-                  id="widget-wallets-list-experimental-chain-container"
-                  displayName={blockchainDisplayName}
-                  onConfirm={() => {
-                    void addExperimentalChain(experimentalChainWallet);
-                  }}
-                />
-              </WatermarkedModal>
-            )}
-            {addingExperimentalChainStatus && (
-              <WatermarkedModal
-                id="widget-wallets-list-experimental-chain-watermarked-modal"
-                open={!!addingExperimentalChainStatus}
-                onClose={setAddingExperimentalChainStatus.bind(null, null)}
-                container={modalContainer}>
-                <ExperimentalChainStatus
-                  status={addingExperimentalChainStatus}
-                  displayName={blockchainDisplayName}
-                  image={wallet.image}
-                />
-                <Divider direction="vertical" size={32} />
-              </WatermarkedModal>
-            )}
-            <SelectableWallet
-              key={wallet.type}
-              id="widget-wallets-list-selectable-wallet-btn"
-              description={getWalletDescription()}
-              descriptionColor={getWalletDescriptionColor()}
-              onClick={onSelectableWalletClick}
-              selected={isSelected(wallet.type, chain)}
-              disabled={!isActiveTab}
-              {...wallet}
-            />
-          </React.Fragment>
+          <SelectableWallet
+            key={wallet.type}
+            id="widget-wallets-list-selectable-wallet-btn"
+            description={getWalletDescription()}
+            descriptionColor={getWalletDescriptionColor()}
+            onClick={onSelectableWalletClick}
+            selected={isSelected(wallet.type, chain)}
+            disabled={!isActiveTab}
+            {...wallet}
+          />
         );
       })}
       <StatefulConnectModal
@@ -301,7 +150,8 @@ export function WalletList(props: PropTypes) {
         <ShowMoreWallets
           selected={false}
           onClick={onShowMore}
-          id="widget-wallets-list-show-more-wallets-btn">
+          id="widget-wallets-list-show-more-wallets-btn"
+        >
           <Typography variant="label" size="medium">
             {i18n.t('Show more wallets')}
             <Typography variant="label" size="medium" color="$primary">

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -13,10 +13,10 @@ import React from 'react';
 
 import { DEFAULT_TOKEN_IMAGE_SRC } from '../../constants/customTokens';
 import { getContainer } from '../../utils/common';
+import { createTokenExplorerUrl } from '../../utils/meta';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { CUSTOM_TOKEN_LEARN_MORE_LINK } from './CustomTokenModal.constants';
-import { generateExplorerLink } from './CustomTokenModal.helpers';
 import {
   Container,
   FlexCenteredContainer,
@@ -29,7 +29,12 @@ const MAX_SYMBOL_LENGTH_THRESHOLD = 9;
 export function CustomTokenModal(props: PropTypes) {
   const { open, onClose, token, onExit, onSubmitClick, blockchain } = props;
 
-  const explorerLink = generateExplorerLink(token.address, blockchain);
+  const explorerLink = token.address
+    ? createTokenExplorerUrl({
+        contractAddress: token.address,
+        blockchainMeta: blockchain,
+      })
+    : undefined;
 
   const onClickLearnMore = () =>
     window.open(CUSTOM_TOKEN_LEARN_MORE_LINK, '_blank');

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -1,6 +1,6 @@
 import type { Result } from '../../hooks/useStatefulConnect';
 import type { WalletInfoWithExtra } from '../../types';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Namespace } from '@hub3js/namespaces';
 
 import { Divider } from '@rango-dev/ui';
 import React, { useEffect, useRef, useState } from 'react';

package/src/components/TokenList/TokenList.tsx

@@ -25,7 +25,7 @@ import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { createTintsAndShades } from '../../utils/colors';
 import { getContainer } from '../../utils/common';
-import { findBlockchain } from '../../utils/meta';
+import { createTokenExplorerUrl, findBlockchain } from '../../utils/meta';
 import { formatBalance } from '../../utils/wallets';
 import { ImportCustomToken } from '../ImportCustomToken';
 
@@ -262,6 +262,13 @@ export function TokenList(props: PropTypes) {
             }
           };
 
+          const url = address
+            ? createTokenExplorerUrl({
+                contractAddress: address,
+                blockchainMeta: blockchain,
+              })
+            : undefined;
+
           return (
             <ListItemContainer>
               <StyledListItemButton
@@ -292,9 +299,7 @@ export function TokenList(props: PropTypes) {
                   </ImageSection>
                 }
                 title={
-                  blockchain.type === 'COSMOS' ||
-                  !!token.name ||
-                  (!token.name && !address) ? (
+                  !!token.name || (!token.name && !address) ? (
                     <Title>
                       <Typography variant="title" size="xmedium">
                         {token.symbol}
@@ -321,16 +326,14 @@ export function TokenList(props: PropTypes) {
                   typeof token !== 'string' &&
                   !!blockchain.info &&
                   !!address &&
-                  blockchain.type !== 'COSMOS'
+                  !!url
                     ? renderDesc({
                         address,
                         token,
                         customCssForTag,
                         customCssForTagTitle,
                         name: token.name,
-                        url: blockchain.info.addressUrl
-                          .split('{wallet}')
-                          .join(address),
+                        url,
                       })
                     : token.name || undefined
                 }

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

@@ -1,4 +1,4 @@
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Namespace } from '@hub3js/namespaces';
 import type { DerivationPath } from '@rango-dev/wallets-shared';
 
 import { namespaces } from '@rango-dev/wallets-shared';

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -1,6 +1,6 @@
 import type { PropTypes } from './Detached.types';
+import type { Namespace } from '@hub3js/namespaces';
 import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { i18n } from '@lingui/core';
 import {

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

@@ -1,5 +1,5 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Namespace } from '@hub3js/namespaces';
 
 export interface PropTypes {
   value: NeedsNamespacesState;

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes } from './Namespaces.types';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Namespace } from '@hub3js/namespaces';
 
 import { i18n } from '@lingui/core';
 import {

package/src/components/WalletStatefulConnect/Namespaces.types.tsx

@@ -1,7 +1,7 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
+import type { NamespaceData } from '@hub3js/core/store';
+import type { Namespace } from '@hub3js/namespaces';
 import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-import type { NamespaceData } from '@rango-dev/wallets-core/store';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;

package/src/components/WalletStatefulConnect/index.ts

@@ -2,4 +2,3 @@ export { Namespaces } from './Namespaces';
 export { Detached } from './Detached';
 export { DerivationPath } from './DerivationPath';
 export { ConnectStatus } from './ConnectStatus';
-export { ExperimentalChain } from './ExperimentalChain';

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/constants/wallets.ts

@@ -1,5 +1,3 @@
-import { WalletTypes } from '@rango-dev/wallets-shared';
-
 export const BALANCE_SEPARATOR = '~';
 
-export const EXCLUDED_WALLETS = [WalletTypes.LEAP];
+export const EXCLUDED_WALLETS: string[] = [];

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/Wallets/Wallets.tsx

@@ -9,6 +9,7 @@ import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
 import type { PropsWithChildren } from 'react';
 
 import { Provider } from '@rango-dev/wallets-react';
+import { WalletTypes } from '@rango-dev/wallets-shared';
 import React, { createContext, useEffect, useMemo, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
@@ -104,6 +105,11 @@ function Main(props: PropsWithChildren<PropTypes>) {
         autoConnect={!!isActiveTab}
         configs={{
           wallets: config.wallets,
+          walletOptions: {
+            [WalletTypes.TON_CONNECT]: {
+              provider: { manifestUrl: config.tonConnect?.manifestUrl },
+            },
+          },
         }}>
         {props.children}
       </Provider>

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/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts

@@ -1 +1 @@
-export const MOST_USED_BLOCKCHAINS = ['ETH', 'COSMOS', 'OSMOSIS'];
+export const MOST_USED_BLOCKCHAINS = ['ETH'];