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

package/src/hooks/useConnectWithLogging/useConnectWithLogging.test.ts

@@ -0,0 +1,138 @@
+import type {
+  ConnectResult,
+  NamespaceInputForConnect,
+} from '@rango-dev/wallets-react';
+
+import { WalletConnectionError } from '@hub3js/std/utils';
+import { error as logError } from '@rango-dev/logging-core';
+import { WalletConnectionAttemptError } from '@rango-dev/wallets-react';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useConnectWithLogging } from './useConnectWithLogging';
+
+const { connect } = vi.hoisted(() => ({ connect: vi.fn() }));
+
+vi.mock('@rango-dev/logging-core', () => ({ error: vi.fn() }));
+vi.mock('@rango-dev/wallets-react', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useWallets: () => ({ connect }),
+}));
+
+const loggedError = vi.mocked(logError);
+
+const THREE_MINUTES = 180_000;
+
+const NAMESPACES: NamespaceInputForConnect[] = [
+  { namespace: 'EVM', network: undefined },
+];
+
+const CONNECTED: ConnectResult[] = [{ accounts: [], network: null }];
+
+type ConnectWithLogging = ReturnType<typeof useConnectWithLogging>;
+
+async function pending(): Promise<ConnectResult[]> {
+  return new Promise<ConnectResult[]>(() => undefined);
+}
+
+function failedAttempt(): WalletConnectionAttemptError {
+  return new WalletConnectionAttemptError({
+    errors: [
+      new WalletConnectionError({ namespace: 'EVM', cause: new Error('boom') }),
+    ],
+    requestedNamespaces: NAMESPACES,
+  });
+}
+
+function renderConnect(): ConnectWithLogging {
+  let rendered: ConnectWithLogging | undefined;
+  function Probe() {
+    rendered = useConnectWithLogging();
+    return null;
+  }
+
+  renderToStaticMarkup(createElement(Probe));
+
+  if (!rendered) {
+    throw new Error('The hook was not rendered.');
+  }
+
+  return rendered;
+}
+
+beforeEach(() => {
+  loggedError.mockReset();
+  connect.mockReset();
+  connect.mockResolvedValue(CONNECTED);
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('connecting without a trigger', () => {
+  it('calls connect with the same wallet type and namespaces and resolves with its result', async () => {
+    await expect(renderConnect()('metamask', NAMESPACES)).resolves.toBe(
+      CONNECTED
+    );
+
+    expect(connect).toHaveBeenCalledWith('metamask', NAMESPACES);
+  });
+
+  it('logs nothing when the attempt fails and rethrows its error unchanged', async () => {
+    const received = failedAttempt();
+    connect.mockRejectedValue(received);
+
+    await expect(renderConnect()('metamask', NAMESPACES)).rejects.toBe(
+      received
+    );
+
+    expect(loggedError).not.toHaveBeenCalled();
+  });
+
+  it('logs nothing when the attempt is still pending after three minutes', () => {
+    connect.mockReturnValue(pending());
+
+    void renderConnect()('metamask', NAMESPACES);
+    vi.advanceTimersByTime(THREE_MINUTES);
+
+    expect(loggedError).not.toHaveBeenCalled();
+  });
+});
+
+describe('connecting with a trigger', () => {
+  it('logs the error the attempt failed with, tagged with the trigger, and rethrows it unchanged', async () => {
+    const received = failedAttempt();
+    connect.mockRejectedValue(received);
+
+    await expect(
+      renderConnect()('metamask', NAMESPACES, {
+        trigger: 'swap-details-reconnect',
+      })
+    ).rejects.toBe(received);
+
+    expect(connect).toHaveBeenCalledWith('metamask', NAMESPACES);
+    expect(loggedError).toHaveBeenCalledTimes(1);
+    expect(loggedError.mock.calls[0]?.[0]).toBe(received);
+    expect(loggedError.mock.calls[0]?.[1]?.tags).toEqual({
+      walletType: 'metamask',
+      namespaces: 'EVM',
+      trigger: 'swap-details-reconnect',
+      category: 'wallet',
+    });
+  });
+
+  it('logs a timeout when the attempt is still pending after three minutes', () => {
+    connect.mockReturnValue(pending());
+
+    void renderConnect()('metamask', NAMESPACES, { trigger: 'wallets-page' });
+    vi.advanceTimersByTime(THREE_MINUTES);
+
+    expect(loggedError).toHaveBeenCalledTimes(1);
+    expect(loggedError.mock.calls[0]?.[1]?.tags).toEqual(
+      expect.objectContaining({ trigger: 'wallets-page', category: 'timeout' })
+    );
+  });
+});

package/src/hooks/useConnectWithLogging/useConnectWithLogging.ts

@@ -0,0 +1,36 @@
+import type { WithConnectTrigger } from '../../libs/connectLogging';
+import type { WalletType } from '@hub3js/core';
+import type {
+  ConnectResult,
+  NamespaceInputForConnect,
+} from '@rango-dev/wallets-react';
+
+import { useWallets } from '@rango-dev/wallets-react';
+
+import { runConnectWithLogging } from '../../libs/connectLogging';
+
+type ConnectWithLogging = (
+  walletType: WalletType,
+  namespaces?: NamespaceInputForConnect[],
+  options?: WithConnectTrigger
+) => Promise<ConnectResult[]>;
+
+/**
+ * `connect` from `useWallets`, logging the attempts that fail. Without a
+ * trigger it's `connect` itself: nothing is logged and no timer runs.
+ */
+export function useConnectWithLogging(): ConnectWithLogging {
+  const { connect } = useWallets();
+
+  return async (walletType, namespaces, options) => {
+    const trigger = options?.trigger;
+    if (!trigger) {
+      return connect(walletType, namespaces);
+    }
+
+    return runConnectWithLogging(
+      { walletType, trigger, requestedNamespaces: namespaces ?? [] },
+      async () => connect(walletType, namespaces)
+    );
+  };
+}

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,14 +1,20 @@
-import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
+import type {
+  HandleConnectOptions,
+  NamespaceData,
+  Result,
+} from './useStatefulConnect.types';
+import type { WithConnectTrigger } from '../../libs/connectLogging';
 import type { WalletInfoWithExtra } from '../../types';
 import type { Namespace } from '@hub3js/namespaces';
-import type { NamespaceData } from '@rango-dev/wallets-shared';
 
 import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import { useReducer } from 'react';
 
 import { isOnDetached } from '../../components/StatefulConnectModal';
+import { tryRefineErrorMessage } from '../../utils/errors';
 import { type ExtendedModalWalletInfo } from '../../utils/wallets';
+import { useConnectWithLogging } from '../useConnectWithLogging';
 
 import {
   isStateOnDerivationPathStep,
@@ -48,8 +54,11 @@ export interface UseStatefulConnect {
  * or what derivation path should be used for.
  *
  */
-export function useStatefulConnect(): UseStatefulConnect {
-  const { state, disconnect, connect } = useWallets();
+export function useStatefulConnect({
+  trigger,
+}: WithConnectTrigger = {}): UseStatefulConnect {
+  const { state, disconnect } = useWallets();
+  const connect = useConnectWithLogging();
 
   const [connectState, dispatch] = useReducer(reducer, initState);
 
@@ -71,13 +80,16 @@ export function useStatefulConnect(): UseStatefulConnect {
         ...namespaceInput,
         network: undefined,
       }));
-      await connect(wallet.type, legacyNamespacesInput);
+      await connect(wallet.type, legacyNamespacesInput, { trigger });
       return { status: ResultStatus.Connected };
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      const message = e?.message
-        ? `Error: ${e.message}`
-        : 'An unknown error happened during connecting wallet.';
+      const message = tryRefineErrorMessage(
+        e,
+        e?.message
+          ? `Error: ${e.message}`
+          : 'An unknown error happened during connecting wallet.'
+      );
 
       if (options?.disconnectOnError) {
         try {
@@ -110,16 +122,13 @@ export function useStatefulConnect(): UseStatefulConnect {
        * 3. Target wallet contains only one namespace, in this situation we should check if that namespace needs derivation path and based on that, try to connect to the related provider or display derivation path modal.
        */
 
-      // Legacy and hub have different structure to handle each situation.
-      const isHub = !!wallet.isHub;
-      const needsNamespace = isHub
-        ? wallet.properties?.find((item) => item.name === 'namespaces')?.value
-        : wallet.needsNamespace;
+      const needsNamespace = wallet.properties?.find(
+        (item) => item.name === 'namespaces'
+      )?.value;
 
-      const needsDerivationPath = isHub
-        ? wallet.properties?.find((item) => item.name === 'derivationPath')
-            ?.value
-        : wallet.needsDerivationPath;
+      const needsDerivationPath = wallet.properties?.find(
+        (item) => item.name === 'derivationPath'
+      )?.value;
 
       // Forced namespaces are used to bypass namespace selection flow.
       if (forceConnectToNamespaces) {
@@ -209,7 +218,7 @@ export function useStatefulConnect(): UseStatefulConnect {
      * and forced namespaces are not enabled,
      * we should display detached modal
      */
-    if (!!wallet.isHub && !options?.forceConnectToNamespaces) {
+    if (!options?.forceConnectToNamespaces) {
       const needsNamespace = wallet.properties?.find(
         (item) => item.name === 'namespaces'
       )?.value;
@@ -237,14 +246,13 @@ export function useStatefulConnect(): UseStatefulConnect {
     wallet: ExtendedModalWalletInfo,
     selectedNamespaces: Namespace[]
   ): Promise<Result> => {
-    const isHub = !!wallet.isHub;
-    const needsNamespace = isHub
-      ? wallet.properties?.find((item) => item.name === 'namespaces')?.value
-      : wallet.needsNamespace;
+    const needsNamespace = wallet.properties?.find(
+      (item) => item.name === 'namespaces'
+    )?.value;
 
-    const needsDerivationPath = isHub
-      ? wallet.properties?.find((item) => item.name === 'derivationPath')?.value
-      : wallet.needsDerivationPath;
+    const needsDerivationPath = wallet.properties?.find(
+      (item) => item.name === 'derivationPath'
+    )?.value;
 
     const isSingleNamespace = needsNamespace?.selection === 'single';
     const firstSelectedNamespace = selectedNamespaces[0];
@@ -320,10 +328,9 @@ export function useStatefulConnect(): UseStatefulConnect {
     const selectedNamespace = connectState.derivationPath.namespace;
     const namespaces = [{ namespace: selectedNamespace, derivationPath }];
 
-    const isHub = !!wallet.isHub;
-    const needsNamespace = isHub
-      ? wallet.properties?.find((item) => item.name === 'namespaces')?.value
-      : wallet.needsNamespace;
+    const needsNamespace = wallet.properties?.find(
+      (item) => item.name === 'namespaces'
+    )?.value;
 
     const namespaceIsAvailable =
       !!needsNamespace?.data && needsNamespace.data.length > 1;

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -1,6 +1,11 @@
 import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 import type { Namespace } from '@hub3js/namespaces';
 
+export interface NamespaceData {
+  namespace: Namespace;
+  derivationPath?: string;
+}
+
 export interface HandleConnectOptions {
   // To have a switch between connect and disconnect when user is clicking on a button, this option can be helpful.
   forceConnectToNamespaces?: Namespace[];
@@ -15,9 +20,7 @@ export interface NeedsNamespacesState {
 
 export interface DetachedPayload {
   targetWallet: ExtendedModalWalletInfo;
-  selectedNamespaces:
-    | { namespace: Namespace; derivationPath?: string }[]
-    | null;
+  selectedNamespaces: NamespaceData[] | null;
   derivationPath?: string;
 }
 

package/src/hooks/useWalletList.ts

@@ -1,12 +1,13 @@
 import type { ExtendedModalWalletInfo } from '../utils/wallets';
 import type { WalletInfo } from '@rango-dev/ui';
 
+import { WalletTypes } from '@rango-dev/provider-all';
 import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import { detectMobileScreens, WalletTypes } from '@rango-dev/wallets-shared';
 import { useCallback, useEffect } from 'react';
 
 import { useAppStore } from '../store/AppStore';
+import { detectMobileScreens } from '../utils/common';
 import { emitWalletDetected } from '../utils/events';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
@@ -37,6 +38,12 @@ const NON_INJECTED_WALLET_TYPES = new Set<string>([
   WalletTypes.DEFAULT,
 ]);
 
+const DEFAULT_EVM_WALLETS = new Set<string>([
+  WalletTypes.DEFAULT,
+  WalletTypes.WALLET_CONNECT_2,
+  WalletTypes.LEDGER,
+]);
+
 interface Params {
   chain?: string;
 }
@@ -89,8 +96,7 @@ export function useWalletList(params?: Params): API {
       if (isDetected && !detectedWalletsReported.has(wallet.type)) {
         detectedWalletsReported.add(wallet.type);
         emitWalletDetected({
-          walletType: wallet.type,
-          walletName: wallet.title,
+          walletName: wallet.type,
         });
       }
     });
@@ -132,11 +138,7 @@ export function useWalletList(params?: Params): API {
     const isEvmWalletInstalledExceptDefault = wallets.filter(
       (wallet) =>
         wallet.state != WalletState.NOT_INSTALLED &&
-        ![
-          WalletTypes.DEFAULT,
-          WalletTypes.WALLET_CONNECT_2,
-          WalletTypes.LEDGER,
-        ].includes(wallet.type as WalletTypes) &&
+        !DEFAULT_EVM_WALLETS.has(wallet.type) &&
         getWalletInfo(wallet.type).supportedChains.filter(
           (blockchain) => blockchain.type == 'EVM'
         ).length > 0

package/src/hooks/useWalletProviders/useWalletProviders.helpers.ts

@@ -1,19 +1,12 @@
-import type { ProviderInterface } from '@rango-dev/wallets-react';
+import type { Provider } from '@hub3js/core';
 
-import { Provider } from '@hub3js/core';
-
-export function hashProviders(
-  providers: (string | ProviderInterface | Provider)[]
-): string {
+export function hashProviders(providers: (string | Provider)[]): string {
   return providers
     .map((provider) => {
       if (typeof provider === 'string') {
         return provider;
       }
-      if (provider instanceof Provider) {
-        return provider.id;
-      }
-      return provider.config.type;
+      return provider.id;
     })
     .join('-');
 }

package/src/hooks/useWalletProviders/useWalletProviders.ts

@@ -1,4 +1,4 @@
-import type { WidgetConfig } from '../../types';
+import type { WidgetConfigWithoutLegacyProviders } from '../../types';
 import type { ProvidersOptions } from '../../utils/providers';
 
 import { useEffect } from 'react';
@@ -8,7 +8,7 @@ import { useAppStore } from '../../store/AppStore';
 import { hashProviders } from './useWalletProviders.helpers';
 
 export function useWalletProviders(
-  configWallets: WidgetConfig['wallets'],
+  configWallets: WidgetConfigWithoutLegacyProviders['wallets'],
   options?: ProvidersOptions
 ) {
   const { clearConnectedWallet, getAvailableProviders, buildAndSetProviders } =

package/src/index.ts

@@ -14,6 +14,7 @@ import type {
   WidgetTheme,
   WidgetVariant,
 } from './types';
+import type { WalletType } from '@hub3js/core';
 import type {
   PendingSwapWithQueueID,
   Route,
@@ -36,16 +37,14 @@ import type {
   StepTxExecutionUpdatedEvent,
 } from '@rango-dev/queue-manager-rango-preset';
 import type {
-  LegacyEventHandler as HandleWalletsUpdate,
-  LegacyProviderInterface as ProviderInterface,
-} from '@rango-dev/wallets-core/legacy';
-import type {
+  EventHandler as HandleWalletsUpdate,
+  ProviderInterface,
   WalletInfo,
   WalletState,
-  WalletType,
-} from '@rango-dev/wallets-shared';
+} from '@rango-dev/wallets-react';
 import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
+import { Networks, readAccountAddress } from '@rango-dev/internal-blockchains';
 import {
   EventSeverity,
   RouteEventType,
@@ -53,9 +52,7 @@ import {
   StepExecutionBlockedEventStatus,
   StepExecutionEventStatus,
 } from '@rango-dev/queue-manager-rango-preset';
-import { legacyReadAccountAddress as readAccountAddress } from '@rango-dev/wallets-core/legacy';
 import { useWallets, Events as WalletEvents } from '@rango-dev/wallets-react';
-import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
 import { PendingSwapNetworkStatus } from 'rango-types';
 
 import {
@@ -87,7 +84,7 @@ import {
   WalletEventTypes,
   WidgetEvents,
 } from './types';
-import { pickProviderVersionWithFallbackToLegacy } from './utils/providers';
+import { pickProviderVersion } from './utils/providers';
 import { customizedThemeTokens } from './utils/ui';
 
 export const StatefulConnect = {
@@ -105,6 +102,9 @@ export type {
   WidgetTheme,
   WidgetColors,
   WidgetColorsKeys,
+  /**
+   * @deprecated Pass a hub `Provider` instead. This type will be removed in future versions.
+   */
   ProviderInterface,
   BlockchainAndTokenConfig,
   WidgetProps,
@@ -183,10 +183,9 @@ export type {
 // Internal function and enum exports for Rango
 export {
   readAccountAddress,
-  pickProviderVersionWithFallbackToLegacy,
+  pickProviderVersion,
   Networks,
   WalletEvents,
-  WalletTypes,
   PendingSwapNetworkStatus,
   EventSeverity,
 };

package/src/libs/connectLogging/connectLogging.constants.ts

@@ -0,0 +1,17 @@
+/** How long a wallet may leave an attempt unanswered before it's logged. */
+export const CONNECT_TIMEOUT = 180_000;
+
+export const CONNECT_TIMEOUT_MESSAGE =
+  'Wallet connection still pending after 3 minutes';
+
+export const UNREADABLE_FAILURE_MESSAGE = 'Failure could not be described';
+
+/** No class is named like this, so it can't be mistaken for a real name. */
+export const UNREADABLE_FAILURE_NAME = '(unreadable)';
+
+export const ATTEMPT_ERROR_NAMES: readonly string[] = [
+  'WalletConnectionAttemptError',
+  'AutoConnectionAttemptError',
+];
+
+export const CONNECTION_ERROR_NAME = 'WalletConnectionError';