@rango-dev/widget-embedded 0.0.0-experimental-1624fbb4-20260708 → 0.0.0-experimental-99f1781b-20260920

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -128,6 +128,7 @@ export function WalletList(props: PropTypes) {
       <StatefulConnectModal
         id="widget-wallets-list-stateful-connect-modal"
         wallet={selectedWalletToConnect}
+        trigger="confirm-wallets-modal"
         options={{ defaultSelectedChains: quoteChains || [chain] }}
         onClose={() => {
           setSelectedWalletToConnect(undefined);
@@ -150,8 +151,7 @@ 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/NamespaceItem/NamespaceItem.styles.ts

@@ -80,6 +80,7 @@ export const NamespaceItemErrorDropdownToggle = styled('div', {
 
 export const NamespaceAccountAddress = styled(Typography, {
   maxWidth: '100px',
+  whiteSpace: 'nowrap',
 });
 
 export const NamespaceLogo = styled(Image, {

package/src/components/NamespaceItem/NamespaceItem.tsx

@@ -1,6 +1,7 @@
 import type { PropTypes } from './NamespaceItem.types';
 
 import { i18n } from '@lingui/core';
+import { getSupportedChainsFromNamespace } from '@rango-dev/internal-blockchains';
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -32,7 +33,10 @@ export function NamespaceItem(props: PropTypes) {
 
   useEffect(() => setErrorIsExpanded(false), [error]);
 
-  const supportedChains = namespace.getSupportedChains(blockchains);
+  const supportedChains = getSupportedChainsFromNamespace(
+    namespace,
+    blockchains
+  );
   const isSupportedChainsDisplayed =
     !error && !connected && supportedChains.length > 1;
 

package/src/components/NamespaceItem/NamespaceItem.types.ts

@@ -1,7 +1,7 @@
-import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+import type { NamespaceMeta } from '@rango-dev/wallets-react';
 
 export type PropTypes = {
-  namespace: LegacyNamespaceMeta;
+  namespace: NamespaceMeta;
   error?: string;
   suffix?: React.ReactNode;
   connected?: boolean;
@@ -10,5 +10,5 @@ export type PropTypes = {
 };
 
 export type NamespaceUnsupportedItemPropTypes = {
-  namespace: LegacyNamespaceMeta;
+  namespace: NamespaceMeta;
 };

package/src/components/Quote/Quote.tsx

@@ -362,7 +362,6 @@ export function Quote(props: QuoteProps) {
           quote={quote}
           fullExpandedMode
           time={totalTime}
-          fee={totalFee}
           feeWarning={feeWarning}
           timeWarning={timeWarning}
           showModalFee={showModalFee}
@@ -415,7 +414,6 @@ export function Quote(props: QuoteProps) {
           <QuoteCostDetails
             quote={quote}
             time={totalTime}
-            fee={totalFee}
             feeWarning={feeWarning}
             timeWarning={timeWarning}
             showModalFee={showModalFee}

package/src/components/Quote/Quote.types.ts

@@ -1,6 +1,5 @@
 import type { QuoteError, QuoteWarning, SelectedQuote } from '../../types';
 import type { Step } from '@rango-dev/ui';
-import type BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
 
 export type QuoteProps = {
@@ -46,7 +45,6 @@ export type QuoteTriggerImagesProps = {
 export type QuoteCostDetailsProps = {
   quote: SelectedQuote | null;
   steps: number;
-  fee: BigNumber;
   time: string;
   feeWarning?: boolean;
   timeWarning?: boolean;

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

@@ -1,4 +1,5 @@
 import type { Result } from '../../hooks/useStatefulConnect';
+import type { WithConnectTrigger } from '../../libs/connectLogging';
 import type { WalletInfoWithExtra } from '../../types';
 import type { Namespace } from '@hub3js/namespaces';
 
@@ -29,7 +30,7 @@ import {
 const KEEP_SUCCESS_MODAL_FOR = 3_000;
 const DELAY_SHOWING_MODAL_FOR = 300;
 
-interface PropTypes {
+interface PropTypes extends WithConnectTrigger {
   wallet: WalletInfoWithExtra | undefined;
   id: string;
   onClose: () => void;
@@ -56,7 +57,7 @@ export function StatefulConnectModal(props: PropTypes) {
     getState,
     resetState,
     handleDisconnect,
-  } = useStatefulConnect();
+  } = useStatefulConnect(props);
 
   const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
     handleNamespace(props.wallet!, selectedNamespaces)
@@ -208,6 +209,7 @@ export function StatefulConnectModal(props: PropTypes) {
           value={getState().namespace}
           selectedNamespaces={getState().selectedNamespaces}
           navigateToDerivationPath={handleNavigateToDerivationPath}
+          trigger={props.trigger}
         />
       )}
     </WatermarkedModal>

package/src/components/SwapDetails/SwapDetails.tsx

@@ -31,11 +31,13 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
+import { useConnectWithLogging } from '../../hooks/useConnectWithLogging';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
 import { UiEventTypes } from '../../types';
 import { getContainer } from '../../utils/common';
+import { tryRefineError } from '../../utils/errors';
 import { emitUiEvent } from '../../utils/events';
 import {
   numberToString,
@@ -78,7 +80,8 @@ const SUCCESS_SWITCH_NETWORK_MODAL_CLOSE_DELAY = 3000;
 
 export function SwapDetails(props: SwapDetailsProps) {
   const { swap, requestId, onDelete, onCancel } = props;
-  const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
+  const { canSwitchNetworkTo, getWalletInfo } = useWallets();
+  const connect = useConnectWithLogging();
   const blockchains = useAppStore().blockchains();
   const swappers = useAppStore().swappers();
   const { findToken } = useAppStore();
@@ -175,17 +178,23 @@ export function SwapDetails(props: SwapDetailsProps) {
   const handleSwitchNetwork = () => {
     if (switchNetworkIsAvailable) {
       handleShowSwitchNetworkLoading();
-      connect(currentStepWallet.walletType, [
-        {
-          namespace: currentStepNamespace.namespace,
-          network: currentStepNamespace.network,
-        },
-      ])
+      connect(
+        currentStepWallet.walletType,
+        [
+          {
+            namespace: currentStepNamespace.namespace,
+            network: currentStepNamespace.network,
+          },
+        ],
+        { trigger: 'swap-details-switch-network' }
+      )
         .then(() => {
           handleShowSwitchNetworkSucceeded();
         })
         .catch((error: unknown) => {
-          handleShowSwitchNetworkFailed(error as Error);
+          handleShowSwitchNetworkFailed(
+            tryRefineError(error) ?? (error as Error)
+          );
         });
     }
   };

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

@@ -14,8 +14,10 @@ import {
 import { useWallets } from '@rango-dev/wallets-react';
 import React, { useState } from 'react';
 
+import { useConnectWithLogging } from '../../hooks/useConnectWithLogging';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useUiStore } from '../../store/ui';
+import { tryRefineError } from '../../utils/errors';
 import { getConciseAddress } from '../../utils/wallets';
 import { NamespaceItem } from '../NamespaceItem';
 
@@ -30,7 +32,8 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
   const [error, setError] = useState<Error | null>(null);
   const { list } = useWalletList();
   const isActiveTab = useUiStore.use.isActiveTab();
-  const { state, connect } = useWallets();
+  const { state } = useWallets();
+  const connect = useConnectWithLogging();
 
   const wallet = list.find(
     (wallet) => wallet.type === currentStepWallet.walletType
@@ -44,15 +47,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) {
@@ -86,10 +86,11 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                 derivationPath: currentStepWallet.derivationPath,
               },
             ]
-          : undefined
+          : undefined,
+        { trigger: 'swap-details-reconnect' }
       );
     } catch (error) {
-      setError(error as Error);
+      setError(tryRefineError(error) ?? (error as Error));
     }
   };
 
@@ -106,9 +107,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 { useConnectWithLogging } from '../../hooks/useConnectWithLogging';
 import { NamespaceUnsupportedItem } from '../NamespaceItem/NamespaceUnsupportedItem';
 
 import { NamespacesHeader } from './Detached.styles';
@@ -28,10 +29,12 @@ export function Detached(props: PropTypes) {
     confirmText = i18n.t('Done'),
     onDisconnectWallet,
     navigateToDerivationPath,
+    trigger,
   } = props;
   const { targetWallet } = value;
 
-  const { connect, disconnect, state } = useWallets();
+  const { disconnect, state } = useWallets();
+  const connect = useConnectWithLogging();
   const walletType = targetWallet.type;
   const walletState = state(walletType);
   const namespacesProperty = targetWallet.properties?.find(
@@ -57,13 +60,17 @@ export function Detached(props: PropTypes) {
     if (derivationPathProperty && options?.shouldAskForDerivationPath) {
       navigateToDerivationPath(namespace);
     } else {
-      await connect(walletType, [
-        {
-          namespace: namespace,
-          network: '',
-          derivationPath: options?.derivationPath ?? undefined,
-        },
-      ]);
+      await connect(
+        walletType,
+        [
+          {
+            namespace: namespace,
+            network: '',
+            derivationPath: options?.derivationPath ?? undefined,
+          },
+        ],
+        { trigger }
+      );
     }
   };
 
@@ -119,7 +126,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/Detached.types.ts

@@ -1,7 +1,8 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
+import type { WithConnectTrigger } from '../../libs/connectLogging';
 import type { Namespace } from '@hub3js/namespaces';
 
-export interface PropTypes {
+export interface PropTypes extends WithConnectTrigger {
   value: NeedsNamespacesState;
   onConfirm: () => void;
   confirmText?: string;

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