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

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

@@ -0,0 +1,14 @@
+import { Events } from '@rango-dev/wallets-react';
+
+/*
+ * Events the widget keeps to itself, never passed on to `onUpdateState`.
+ *
+ * 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
+ *
+ * AUTO_CONNECT_FAILED only exists so the widget can log it.
+ */
+export const INTERNAL_EVENTS = [
+  Events.PROVIDER_DISCONNECTED,
+  Events.AUTO_CONNECT_FAILED,
+] as const;

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

@@ -0,0 +1,67 @@
+import type { EventInfo, WalletState } from '@rango-dev/wallets-react';
+
+import { AutoConnectionAttemptError, Events } from '@rango-dev/wallets-react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { propagateEvents } from './Wallets.helpers';
+
+const CORE_STATE: WalletState = {
+  connected: false,
+  connecting: false,
+  reachable: false,
+  installed: true,
+  accounts: null,
+  network: null,
+};
+
+const INFO: EventInfo = {
+  supportedBlockchains: [],
+  isContractWallet: false,
+  isHub: true,
+};
+
+describe('propagating events to the integrator', () => {
+  it('passes an event on, unchanged', () => {
+    const onUpdateState = vi.fn();
+
+    propagateEvents(onUpdateState, [
+      'metamask',
+      Events.CONNECTED,
+      true,
+      CORE_STATE,
+      INFO,
+    ]);
+
+    expect(onUpdateState).toHaveBeenCalledWith(
+      'metamask',
+      Events.CONNECTED,
+      true,
+      CORE_STATE,
+      INFO
+    );
+  });
+
+  it('keeps provider disconnected and auto-connect failed events from the integrator', () => {
+    const onUpdateState = vi.fn();
+
+    propagateEvents(onUpdateState, [
+      'metamask',
+      Events.PROVIDER_DISCONNECTED,
+      undefined,
+      CORE_STATE,
+      INFO,
+    ]);
+    propagateEvents(onUpdateState, [
+      'metamask',
+      Events.AUTO_CONNECT_FAILED,
+      new AutoConnectionAttemptError({
+        errors: [new Error('boom')],
+        requestedNamespaces: [{ namespace: 'EVM', network: undefined }],
+      }),
+      CORE_STATE,
+      INFO,
+    ]);
+
+    expect(onUpdateState).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,7 +1,11 @@
-import type { OnUpdateState } from './Wallets.types';
-import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+import type { InternalEvent, OnUpdateState } from './Wallets.types';
+import type { EventHandler, Events } from '@rango-dev/wallets-react';
 
-import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
+import { INTERNAL_EVENTS } from './Wallets.constants';
+
+function isInternalEvent(event: Events): event is InternalEvent {
+  return (INTERNAL_EVENTS as readonly Events[]).includes(event);
+}
 
 /*
  * propagate updates for Dapps using external wallets
@@ -10,15 +14,11 @@ 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;
 
-  /*
-   * 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 (isInternalEvent(event)) {
     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}

package/src/containers/Wallets/Wallets.types.ts

@@ -1,9 +1,7 @@
-import type { WidgetConfig } from '../../types';
+import type { INTERNAL_EVENTS } from './Wallets.constants';
+import type { WidgetConfigWithoutLegacyProviders } from '../../types';
 import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
-import type {
-  LegacyEventHandler as EventHandler,
-  LegacyEvents,
-} from '@rango-dev/wallets-core/legacy';
+import type { EventHandler, Events } from '@rango-dev/wallets-react';
 
 export type OnWalletConnectHandler = (wallet: LastConnectedWallet) => void;
 export type OnWalletDisconnectHandler = (walletType: string) => void;
@@ -22,8 +20,10 @@ export interface WidgetContextInterface {
   onDisconnectWallet(handler: OnWalletDisconnectHandler): void;
 }
 
+export type InternalEvent = (typeof INTERNAL_EVENTS)[number];
+
 type EventHandlerParams = Parameters<EventHandler>;
-type EventParam = Exclude<LegacyEvents, LegacyEvents.PROVIDER_DISCONNECTED>;
+type EventParam = Exclude<Events, InternalEvent>;
 
 export type OnUpdateState = (
   type: EventHandlerParams[0],
@@ -35,5 +35,5 @@ export type OnUpdateState = (
 
 export interface PropTypes {
   onUpdateState?: OnUpdateState;
-  config: WidgetConfig;
+  config: WidgetConfigWithoutLegacyProviders;
 }

package/src/containers/Wallets/useUpdates.ts

@@ -2,20 +2,14 @@ import type {
   OnWalletConnectHandler,
   OnWalletDisconnectHandler,
 } from './Wallets.types';
+import type { Network } from '@rango-dev/internal-blockchains';
 import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
-import type {
-  LegacyEventHandler as EventHandler,
-  LegacyEventHandler,
-} from '@rango-dev/wallets-core/legacy';
+import type { EventHandler } from '@rango-dev/wallets-react';
 
-import {
-  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
-  legacyReadAccountAddress as readAccountAddress,
-} from '@rango-dev/wallets-core/legacy';
 import { Events } from '@rango-dev/wallets-react';
-import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
 
+import { logAutoConnectFailure } from '../../libs/connectLogging';
 import { useAppStore } from '../../store/AppStore';
 import {
   prepareAccountsForWalletStore,
@@ -39,8 +33,6 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     newWalletConnected,
     disconnectWallet,
     disconnectNamespaces,
-    connectedWallets,
-    removeBalancesForWallet,
     blockchains,
   } = useAppStore();
 
@@ -50,7 +42,7 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     .map((chain) => chain.name);
 
   const onAccountsEvent = (
-    event: Parameters<LegacyEventHandler>,
+    event: Parameters<EventHandler>,
     params: {
       supportedChainNames: Network[] | null;
     }
@@ -83,13 +75,7 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     }
   };
 
-  const handleUpdatesForHub: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    info
-  ) => {
+  const handler: EventHandler = (type, event, value, state, info) => {
     if (event === Events.ACCOUNTS) {
       const supportedChainNames: Network[] | null =
         walletAndSupportedChainsNames(info.supportedBlockchains);
@@ -116,97 +102,11 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     if (event === Events.NAMESPACE_DISCONNECTED) {
       disconnectNamespaces(type, value);
     }
-  };
-
-  const handleUpdatesForLegacy: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    info
-  ) => {
-    if (event === Events.ACCOUNTS) {
-      const supportedChainNames: Network[] | null =
-        walletAndSupportedChainsNames(info.supportedBlockchains);
-
-      /*
-       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
-       * To get their balances.
-       *
-       * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
-       * we need to clean the balances for old accounts.
-       *
-       * Note: hub will do the cleanup on namespace diconnected event.
-       */
-      const evmAccounts: string[] = [];
-      const nonEvmAccounts: string[] = [];
-
-      value?.forEach((account: string) => {
-        const { network } = readAccountAddress(account);
-        if (evmBasedChainNames.includes(network)) {
-          evmAccounts.push(account);
-        } else {
-          nonEvmAccounts.push(account);
-        }
-      });
-
-      const previousAccounts = connectedWallets
-        .filter((wallet) => wallet.walletType === type)
-        .map((wallet) =>
-          formatAddressWithNetwork(wallet.address, wallet.chain)
-        );
-
-      if (previousAccounts.length > 0) {
-        if (evmAccounts.length > 0) {
-          // We use same logic for removing as we use for adding.
-          const data = prepareAccountsForWalletStore(
-            type,
-            evmAccounts,
-            evmBasedChainNames,
-            supportedChainNames,
-            info.isContractWallet
-          );
-
-          removeBalancesForWallet(type, {
-            chains: data.map((account) => account.chain),
-          });
-        }
-
-        if (nonEvmAccounts.length > 0) {
-          removeBalancesForWallet(type, {
-            chains: nonEvmAccounts.map((account) => {
-              const { network } = readAccountAddress(account);
-              return network;
-            }),
-          });
-        }
-      }
 
-      // After cleaning up balances, it's time to add new accounts.
-      if (value) {
-        onAccountsEvent([type, event, value, state, info], {
-          supportedChainNames,
-        });
-      } else {
-        disconnectWallet(type);
-        if (!!onDisconnectWalletHandler.current) {
-          onDisconnectWalletHandler.current(type);
-        } else {
-          console.warn(
-            `onDisconnectWallet handler hasn't been set. Are you sure?`
-          );
-        }
-      }
+    if (event === Events.AUTO_CONNECT_FAILED) {
+      logAutoConnectFailure(type, value);
     }
-  };
 
-  const handleUpdatesForBoth: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    _info
-  ) => {
     if (event === Events.CONNECTED && value) {
       const walletFromEvent: LastConnectedWallet = {
         walletType: type,
@@ -234,16 +134,6 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     }
   };
 
-  const handler: EventHandler = (type, event, value, state, info) => {
-    if (info.isHub) {
-      handleUpdatesForHub(type, event, value, state, info);
-    } else {
-      handleUpdatesForLegacy(type, event, value, state, info);
-    }
-
-    handleUpdatesForBoth(type, event, value, state, info);
-  };
-
   return {
     handler,
   };

package/src/containers/WidgetProvider/WidgetProvider.helpers.ts

@@ -0,0 +1,10 @@
+import type { WalletType } from '@hub3js/core';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+
+import { Provider } from '@hub3js/core';
+
+export function isHubWallet(
+  wallet: WalletType | ProviderInterface | Provider
+): wallet is WalletType | Provider {
+  return typeof wallet === 'string' || wallet instanceof Provider;
+}

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -13,9 +13,18 @@ import { getApiKeyFromEnvOrThrow } from '../../utils/env';
 import { WidgetWallets } from '../Wallets';
 import { WidgetInfo } from '../WidgetInfo';
 
+import { isHubWallet } from './WidgetProvider.helpers';
+
 export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
   const { onUpdateState, config } = props;
 
+  const wallets = config?.wallets;
+  if (wallets && !wallets.every(isHubWallet)) {
+    throw new Error(
+      "Legacy providers aren't supported anymore. Expected a provider with version '1.0.0'."
+    );
+  }
+
   const fontFamily = props.config?.theme?.fontFamily;
 
   const { fetchApiConfig } = useFetchApiConfig();
@@ -45,7 +54,9 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
   }, [props.config?.signers?.customSolanaRPC]);
 
   return (
-    <WidgetWallets config={config} onUpdateState={onUpdateState}>
+    <WidgetWallets
+      config={{ ...config, wallets }}
+      onUpdateState={onUpdateState}>
       <QueueManager apiKey={config.apiKey}>
         <WidgetInfo>{props.children}</WidgetInfo>
       </QueueManager>

package/src/containers/WidgetProvider/WidgetProvider.types.ts

@@ -1,5 +1,5 @@
 import type { WidgetConfig } from '../../types';
-import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
+import type { EventHandler } from '@rango-dev/wallets-react';
 
 export type PropTypes = {
   onUpdateState?: EventHandler;

package/src/hooks/useConnectWithLogging/index.ts

@@ -0,0 +1 @@
+export { useConnectWithLogging } from './useConnectWithLogging';

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