@rango-dev/widget-embedded 0.0.0-experimental-1624fbb4-20260708 → 0.0.0-experimental-a84f27a7-20260921

package/src/components/Quote/QuoteCostDetails.tsx

@@ -1,6 +1,5 @@
 import type { QuoteCostDetailsProps } from './Quote.types';
 import type { NameOfFees } from '../../constants/quote';
-import type BigNumber from 'bignumber.js';
 
 import { i18n } from '@lingui/core';
 import {
@@ -12,6 +11,7 @@ import {
   QuoteCost,
   Typography,
 } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
 import React, { useState } from 'react';
 
 import { getFeeLabel } from '../../constants/quote';
@@ -62,7 +62,6 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const {
     steps,
     quote,
-    fee,
     time,
     feeWarning,
     timeWarning,
@@ -73,8 +72,20 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const container = fullExpandedMode ? getExpanded() : getContainer();
 
   const feesGroup = getFeesGroup(swaps);
+
+  /*
+   * The "Total Payable Fee" must reflect only the fees the user actually pays
+   * (feesGroup.payable). We sum the USD value of every payable fee group and use
+   * it for both the collapsed summary and the itemized rows in the modal, so the
+   * two never disagree.
+   */
+  const totalPayableFee = Object.values(feesGroup.payable).reduce(
+    (acc: BigNumber, fees) => acc.plus(getTotalFeesInUsd(fees)),
+    new BigNumber(0)
+  );
+
   const roundedFee = numberToString(
-    fee,
+    totalPayableFee,
     GAS_FEE_MIN_DECIMALS,
     GAS_FEE_MAX_DECIMALS
   );
@@ -181,7 +192,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
             <Typography variant="label" size="medium">
               $
               {numberToString(
-                fee,
+                totalPayableFee,
                 USD_VALUE_MIN_DECIMALS,
                 USD_VALUE_MAX_DECIMALS
               )}

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../hooks/useStatefulConnect';
 import { useWalletList } from '../../hooks/useWalletList';
 import { getContainer } from '../../utils/common';
+import { tryRefineErrorMessage } from '../../utils/errors';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import {
   ConnectStatus,
@@ -44,8 +45,13 @@ export function StatefulConnectModal(props: PropTypes) {
   const successModalTimerId = useRef<ReturnType<typeof setTimeout>>();
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState<string>();
-  const catchErrorOnHandle = (error: Error) => {
-    setError(error.message);
+  const catchErrorOnHandle = (error?: Error) => {
+    setError(
+      tryRefineErrorMessage(
+        error,
+        error?.message || 'An unknown error happened during connecting wallet.'
+      )
+    );
   };
   const { terminateConnectingWallets } = useWalletList();
 

package/src/components/SwapDetails/SwapDetails.tsx

@@ -36,6 +36,8 @@ import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
 import { UiEventTypes } from '../../types';
 import { getContainer } from '../../utils/common';
+import { trackConnection } from '../../utils/connectionReporting';
+import { tryRefineError } from '../../utils/errors';
 import { emitUiEvent } from '../../utils/events';
 import {
   numberToString,
@@ -175,17 +177,27 @@ export function SwapDetails(props: SwapDetailsProps) {
   const handleSwitchNetwork = () => {
     if (switchNetworkIsAvailable) {
       handleShowSwitchNetworkLoading();
-      connect(currentStepWallet.walletType, [
+      trackConnection(
+        connect(currentStepWallet.walletType, [
+          {
+            namespace: currentStepNamespace.namespace,
+            network: currentStepNamespace.network,
+          },
+        ]),
         {
-          namespace: currentStepNamespace.namespace,
-          network: currentStepNamespace.network,
-        },
-      ])
+          trigger: 'swap-details',
+          source: 'user',
+          walletType: currentStepWallet.walletType,
+          namespaces: [currentStepNamespace.namespace],
+        }
+      )
         .then(() => {
           handleShowSwitchNetworkSucceeded();
         })
         .catch((error: unknown) => {
-          handleShowSwitchNetworkFailed(error as Error);
+          handleShowSwitchNetworkFailed(
+            tryRefineError(error) ?? (error as Error)
+          );
         });
     }
   };

package/src/components/SwapDetailsModal/SwapDetailsModal.ConnectWallet.tsx

@@ -16,6 +16,8 @@ import React, { useState } from 'react';
 
 import { useWalletList } from '../../hooks/useWalletList';
 import { useUiStore } from '../../store/ui';
+import { trackConnection } from '../../utils/connectionReporting';
+import { tryRefineError } from '../../utils/errors';
 import { getConciseAddress } from '../../utils/wallets';
 import { NamespaceItem } from '../NamespaceItem';
 
@@ -44,15 +46,12 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
   }
 
   const walletState = state(currentStepWallet.walletType);
-  const namespaceState =
-    wallet.isHub && namespace?.namespace
-      ? walletState.namespaces?.get(namespace.namespace)
-      : null;
+  const namespaceState = namespace?.namespace
+    ? walletState.namespaces?.get(namespace.namespace)
+    : null;
 
   const connecting = walletState.connecting || namespaceState?.connecting;
-  const connected = wallet.isHub
-    ? namespaceState?.connected
-    : walletState.connected;
+  const connected = namespaceState?.connected;
 
   const getButtonTitle = () => {
     if (connected) {
@@ -76,20 +75,23 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
   const handleConnect = async () => {
     try {
       setError(null);
-      await connect(
-        wallet.type,
-        namespace?.namespace
-          ? [
-              {
-                namespace: namespace?.namespace,
-                network: undefined,
-                derivationPath: currentStepWallet.derivationPath,
-              },
-            ]
-          : undefined
-      );
+      const namespaces = namespace?.namespace
+        ? [
+            {
+              namespace: namespace?.namespace,
+              network: undefined,
+              derivationPath: currentStepWallet.derivationPath,
+            },
+          ]
+        : undefined;
+      await trackConnection(connect(wallet.type, namespaces), {
+        trigger: 'swap-details-modal',
+        source: 'user',
+        walletType: wallet.type,
+        namespaces: namespaces?.map((item) => item.namespace),
+      });
     } catch (error) {
-      setError(error as Error);
+      setError(tryRefineError(error) ?? (error as Error));
     }
   };
 
@@ -106,9 +108,7 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
     if (!connected) {
       return null;
     }
-    const firstAccountArray = wallet?.isHub
-      ? namespaceState?.accounts?.[0]?.split(':')
-      : walletState?.accounts?.[0]?.split(':');
+    const firstAccountArray = namespaceState?.accounts?.[0]?.split(':');
     const address = firstAccountArray?.[firstAccountArray?.length - 1];
 
     if (!address) {

package/src/components/SwapDetailsModal/SwapDetailsModal.InstallWallet.tsx

@@ -1,9 +1,15 @@
 import type { InstallWalletContentProps } from './SwapDetailsModal.types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, Image, MessageBox, WarningIcon } from '@rango-dev/ui';
+import {
+  Button,
+  detectInstallLink,
+  Divider,
+  Image,
+  MessageBox,
+  WarningIcon,
+} from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import { detectInstallLink } from '@rango-dev/wallets-shared';
 import React from 'react';
 
 import {

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -1,5 +1,5 @@
+import type { WalletType } from '@hub3js/core';
 import type { TargetNamespace } from '@rango-dev/queue-manager-rango-preset';
-import type { LegacyWalletType } from '@rango-dev/wallets-core/legacy';
 import type { PendingSwap } from 'rango-types';
 
 export type ModalState =
@@ -60,12 +60,12 @@ export interface NetworkStateContentProps {
 }
 
 export interface InstallWalletContentProps {
-  walletType: LegacyWalletType;
+  walletType: WalletType;
 }
 
 export interface ConnectWalletContentProps {
   wallet: {
-    walletType: LegacyWalletType;
+    walletType: WalletType;
     address: string;
     derivationPath?: string;
   };

package/src/components/TokenList/LoadingTokenList.tsx

@@ -8,9 +8,9 @@ import { End, List } from './TokenList.styles';
 export function LoadingTokenList(props: LoadingTokenListProps) {
   return (
     <List>
-      {Array.from(Array(props.size), (e) => (
+      {Array.from(Array(props.size), (_, index) => (
         <ListItem
-          key={e}
+          key={index}
           hasDivider
           start={<Skeleton variant="circular" width={35} height={35} />}
           end={

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

@@ -0,0 +1,98 @@
+import type { DerivationPathTemplate } from './DerivationPath.helpers';
+
+import { describe, expect, it } from 'vitest';
+
+import {
+  CUSTOM_DERIVATION_PATH,
+  getDerivationPaths,
+} from './DerivationPath.helpers';
+
+const LEDGER: DerivationPathTemplate[] = [
+  {
+    id: 'metamask',
+    label: `Metamask (m/44'/60'/0'/0/index)`,
+    namespace: 'EVM',
+    generateDerivationPath: (index) => `44'/60'/0'/0/${index}`,
+  },
+  {
+    id: 'ledgerLive',
+    label: `LedgerLive (m/44'/60'/index'/0/0)`,
+    namespace: 'EVM',
+    generateDerivationPath: (index) => `44'/60'/${index}'/0/0`,
+  },
+  {
+    id: 'legacy',
+    label: `Legacy (m/44'/60'/0'/index)`,
+    namespace: 'EVM',
+    generateDerivationPath: (index) => `44'/60'/0'/${index}`,
+  },
+  {
+    id: `(m/44'/501'/index')`,
+    label: `(m/44'/501'/index')`,
+    namespace: 'Solana',
+    generateDerivationPath: (index) => `44'/501'/${index}'`,
+  },
+  {
+    id: `(m/44'/501'/0'/index)`,
+    label: `(m/44'/501'/0'/index)`,
+    namespace: 'Solana',
+    generateDerivationPath: (index) => `44'/501'/0'/${index}`,
+  },
+];
+
+const TREZOR_UTXO: DerivationPathTemplate[] = [
+  {
+    id: 'bitcoin-native-segwit',
+    label: `Native SegWit (m/84'/0'/index')`,
+    namespace: 'UTXO',
+    generateDerivationPath: (index) => `84'/0'/${index}'/0/0`,
+  },
+  {
+    id: 'bitcoin-taproot',
+    label: `Taproot (m/86'/0'/index')`,
+    namespace: 'UTXO',
+    generateDerivationPath: (index) => `86'/0'/${index}'/0/0`,
+  },
+];
+
+describe('getDerivationPaths', () => {
+  it('returns only the templates of the selected namespace', () => {
+    expect(getDerivationPaths(LEDGER, 'EVM').map((path) => path.id)).toEqual([
+      'metamask',
+      'ledgerLive',
+      'legacy',
+      CUSTOM_DERIVATION_PATH.id,
+    ]);
+
+    expect(getDerivationPaths(LEDGER, 'Solana').map((path) => path.id)).toEqual(
+      [
+        `(m/44'/501'/index')`,
+        `(m/44'/501'/0'/index)`,
+        CUSTOM_DERIVATION_PATH.id,
+      ]
+    );
+  });
+
+  it('appends the custom template so a user can enter a full path', () => {
+    const paths = getDerivationPaths(TREZOR_UTXO, 'UTXO');
+
+    expect(paths.at(-1)).toBe(CUSTOM_DERIVATION_PATH);
+    expect(CUSTOM_DERIVATION_PATH.generateDerivationPath(`84'/0'/3'/0/0`)).toBe(
+      `84'/0'/3'/0/0`
+    );
+  });
+
+  it('generates the path the wallet expects for the picked index', () => {
+    const evm = getDerivationPaths(LEDGER, 'EVM');
+    const utxo = getDerivationPaths(TREZOR_UTXO, 'UTXO');
+
+    expect(evm[0]?.generateDerivationPath('2')).toBe(`44'/60'/0'/0/2`);
+    expect(evm[1]?.generateDerivationPath('2')).toBe(`44'/60'/2'/0/0`);
+    expect(utxo[0]?.generateDerivationPath('2')).toBe(`84'/0'/2'/0/0`);
+  });
+
+  it('returns nothing when the provider declares no template for the namespace', () => {
+    expect(getDerivationPaths(LEDGER, 'UTXO')).toEqual([]);
+    expect(getDerivationPaths([], 'EVM')).toEqual([]);
+  });
+});

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

@@ -1,24 +1,28 @@
+import type { ProviderProperty } from '@hub3js/core/store';
 import type { Namespace } from '@hub3js/namespaces';
-import type { DerivationPath } from '@rango-dev/wallets-shared';
 
-import { namespaces } from '@rango-dev/wallets-shared';
+export type DerivationPathTemplate = Extract<
+  ProviderProperty,
+  { name: 'derivationPath' }
+>['value']['data'][number];
 
-export const CUSTOM_DERIVATION_PATH: DerivationPath = {
+export type DerivationPathOption = Omit<DerivationPathTemplate, 'namespace'>;
+
+export const CUSTOM_DERIVATION_PATH: DerivationPathOption = {
   id: 'custom',
   label: 'Custom',
   generateDerivationPath: (index: string) => index,
 };
 
 export function getDerivationPaths(
+  derivationPaths: DerivationPathTemplate[],
   selectedNamespace?: Namespace
-): DerivationPath[] {
-  const selectedNamespaceDerivationPaths = selectedNamespace
-    ? namespaces[selectedNamespace]?.derivationPaths
-    : null;
+): DerivationPathOption[] {
+  const selectedNamespaceDerivationPaths = derivationPaths.filter(
+    (derivationPath) => derivationPath.namespace === selectedNamespace
+  );
 
-  const derivationPaths: DerivationPath[] = !!selectedNamespaceDerivationPaths
+  return selectedNamespaceDerivationPaths.length
     ? [...selectedNamespaceDerivationPaths, CUSTOM_DERIVATION_PATH]
     : [];
-
-  return derivationPaths;
 }

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -1,9 +1,9 @@
 import type { PropTypes } from './DerivationPath.types';
-import type { DerivationPath } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import { Divider, Image, MessageBox, Select, TextField } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import { useWallets } from '@rango-dev/wallets-react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import {
   CUSTOM_DERIVATION_PATH,
@@ -26,6 +26,8 @@ export function DerivationPath(props: PropTypes) {
     providerType: type,
   } = props.value;
 
+  const { getWalletInfo } = useWallets();
+
   const [selectedDerivationPathId, setSelectedDerivationPathId] = useState<
     string | null
   >(null);
@@ -36,7 +38,14 @@ export function DerivationPath(props: PropTypes) {
   const isCustomOptionSelected =
     selectedDerivationPathId === CUSTOM_DERIVATION_PATH.id;
 
-  const derivationPaths = getDerivationPaths(selectedNamespace);
+  const derivationPaths = useMemo(
+    () =>
+      getDerivationPaths(
+        getWalletInfo(type).needsDerivationPath?.data ?? [],
+        selectedNamespace
+      ),
+    [type, selectedNamespace]
+  );
 
   const handleDerivationPathItemClick = ({ value }: { value: string }) => {
     const selectedDerivationPath = derivationPaths?.find(
@@ -75,10 +84,8 @@ export function DerivationPath(props: PropTypes) {
   };
 
   useEffect(() => {
-    setSelectedDerivationPathId(
-      getDerivationPaths(selectedNamespace)[0]?.id || null
-    );
-  }, [selectedNamespace]);
+    setSelectedDerivationPathId(derivationPaths[0]?.id || null);
+  }, [derivationPaths]);
 
   return (
     <>

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 { NamespaceMeta } from '@rango-dev/wallets-react';
 
 import { i18n } from '@lingui/core';
 import {
@@ -14,6 +14,7 @@ import {
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
+import { trackConnection } from '../../utils/connectionReporting';
 import { NamespaceUnsupportedItem } from '../NamespaceItem/NamespaceUnsupportedItem';
 
 import { NamespacesHeader } from './Detached.styles';
@@ -57,13 +58,21 @@ export function Detached(props: PropTypes) {
     if (derivationPathProperty && options?.shouldAskForDerivationPath) {
       navigateToDerivationPath(namespace);
     } else {
-      await connect(walletType, [
+      await trackConnection(
+        connect(walletType, [
+          {
+            namespace: namespace,
+            network: '',
+            derivationPath: options?.derivationPath ?? undefined,
+          },
+        ]),
         {
-          namespace: namespace,
-          network: '',
-          derivationPath: options?.derivationPath ?? undefined,
-        },
-      ]);
+          trigger: 'wallet-modal-namespace',
+          source: 'user',
+          walletType,
+          namespaces: [namespace],
+        }
+      );
     }
   };
 
@@ -119,7 +128,7 @@ export function Detached(props: PropTypes) {
     );
   };
 
-  const renderNamespaceItem = (namespace: LegacyNamespaceMeta) => {
+  const renderNamespaceItem = (namespace: NamespaceMeta) => {
     if (namespace.unsupported) {
       return <NamespaceUnsupportedItem namespace={namespace} />;
     }

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -4,6 +4,7 @@ import { i18n } from '@lingui/core';
 import { Button, Spinner } from '@rango-dev/ui';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 
+import { tryRefineError } from '../../utils/errors';
 import { getConciseAddress } from '../../utils/wallets';
 import { NamespaceItem } from '../NamespaceItem';
 
@@ -39,7 +40,7 @@ export function NamespaceDetachedItem(props: NamespaceDetachedItemPropTypes) {
       processingConnectAttempt.current = true;
       await handleConnect(options);
     } catch (error) {
-      setError(error as Error);
+      setError(tryRefineError(error) ?? (error as Error));
     } finally {
       processingConnectAttempt.current = false;
     }

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -2,6 +2,7 @@ import type { PropTypes } from './Namespaces.types';
 import type { Namespace } from '@hub3js/namespaces';
 
 import { i18n } from '@lingui/core';
+import { getSupportedChainsFromNamespace } from '@rango-dev/internal-blockchains';
 import {
   Alert,
   Button,
@@ -24,13 +25,8 @@ export function Namespaces(props: PropTypes) {
   const namespacesProperty = targetWallet.properties?.find(
     (property) => property.name === 'namespaces'
   );
-  const isHub = targetWallet.isHub;
-  const singleNamespace = targetWallet.isHub
-    ? namespacesProperty?.value.selection === 'single'
-    : targetWallet.needsNamespace?.selection === 'single';
-  const needsNamespace = isHub
-    ? namespacesProperty?.value
-    : targetWallet.needsNamespace;
+  const singleNamespace = namespacesProperty?.value.selection === 'single';
+  const needsNamespace = namespacesProperty?.value;
   const providerImage = targetWallet.image;
 
   const blockchains = useAppStore().blockchains();
@@ -83,11 +79,9 @@ export function Namespaces(props: PropTypes) {
       if (!!props.value.defaultSelectedChains?.length) {
         const namespacesContainingDefaultSelectedChains =
           supportedNamespaces.filter((namespace) =>
-            namespace
-              .getSupportedChains(blockchains)
-              .some((chain) =>
-                props.value.defaultSelectedChains?.includes(chain.name)
-              )
+            getSupportedChainsFromNamespace(namespace, blockchains).some(
+              (chain) => props.value.defaultSelectedChains?.includes(chain.name)
+            )
           );
         setSelectedNamespaces(
           namespacesContainingDefaultSelectedChains.map(

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 { NamespaceMeta } from '@rango-dev/wallets-react';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;
@@ -11,7 +11,7 @@ export interface PropTypes {
 interface NamespaceItemSharedPropTypes {
   onClick: () => void;
   type: 'radio' | 'checkbox';
-  namespace: LegacyNamespaceMeta;
+  namespace: NamespaceMeta;
 }
 
 interface RadioNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
@@ -28,7 +28,7 @@ export type NamespaceItemPropTypes =
   | CheckboxNamespaceItemPropTypes;
 
 export type NamespaceDetachedItemPropTypes = {
-  namespace: LegacyNamespaceMeta;
+  namespace: NamespaceMeta;
   state: NamespaceData;
   initialConnect?: boolean;
   disabled?: boolean;

package/src/constants/errors.ts

@@ -7,6 +7,9 @@ import { QuoteErrorType } from '../types';
 export const errorMessages = () => {
   return {
     genericServerError: i18n.t('Failed Network, Please retry your swap.'),
+    moduleLoadError: i18n.t(
+      'A network error occurred while processing your request. Please check your internet connection or refresh the page and try again.'
+    ),
     liquiditySourcesError: {
       title: i18n.t('Please reset your liquidity sources.'),
       description: i18n.t(

package/src/containers/Wallets/Wallets.helpers.ts

@@ -1,7 +1,7 @@
 import type { OnUpdateState } from './Wallets.types';
-import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+import type { EventHandler } from '@rango-dev/wallets-react';
 
-import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
+import { Events } from '@rango-dev/wallets-react';
 
 /*
  * propagate updates for Dapps using external wallets
@@ -10,7 +10,7 @@ import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
  */
 export function propagateEvents(
   cb: OnUpdateState,
-  eventParams: Parameters<LegacyEventHandler>
+  eventParams: Parameters<EventHandler>
 ): void {
   const [walletType, event, value, coreState, info] = eventParams;
 
@@ -18,7 +18,7 @@ export function propagateEvents(
    * PROVIDER_DISCONNECTED has conflict with WalletEventTypes.DISCONNECT since they are doing samething, the first one is using only for Hub, the second one is what we exposed to the lib users.
    * so for backward-compat we need to keep the behavior of WalletEventTypes.DISCONNECT
    */
-  if (event === LegacyEvents.PROVIDER_DISCONNECTED) {
+  if (event === Events.PROVIDER_DISCONNECTED) {
     return;
   }
 

package/src/containers/Wallets/Wallets.tsx

@@ -5,11 +5,11 @@ import type {
   WidgetContextInterface,
 } from './Wallets.types';
 import type { ProvidersOptions } from '../../utils/providers';
-import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+import type { EventHandler } from '@rango-dev/wallets-react';
 import type { PropsWithChildren } from 'react';
 
+import { WalletTypes } from '@rango-dev/provider-all';
 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';
@@ -89,7 +89,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         allBlockChains={blockchains}
         providers={providers}
         onUpdateState={(type, event, value, state, info) => {
-          const eventParams: Parameters<LegacyEventHandler> = [
+          const eventParams: Parameters<EventHandler> = [
             type,
             event,
             value,
@@ -109,9 +109,26 @@ function Main(props: PropsWithChildren<PropTypes>) {
             [WalletTypes.TON_CONNECT]: {
               provider: { manifestUrl: config.tonConnect?.manifestUrl },
             },
+            [WalletTypes.OKX]: {
+              provider: {
+                tonConnectManifestUrl: config.tonConnect?.manifestUrl,
+              },
+            },
             [WalletTypes.TREZOR]: {
               provider: { manifest: config.trezorManifest },
             },
+            [WalletTypes.WALLET_CONNECT_2]: {
+              provider: {
+                WC_PROJECT_ID: config.walletConnectProjectId || '',
+                DISABLE_MODAL_AND_OPEN_LINK:
+                  config.__UNSTABLE_OR_INTERNAL__
+                    ?.walletConnectListedDesktopWalletLink,
+                meta: blockchains,
+              },
+            },
+            [WalletTypes.LEDGER_WALLET]: {
+              provider: config.ledgerWallet,
+            },
           },
         }}>
         {props.children}