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

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,7 +96,7 @@ export function useWalletList(params?: Params): API {
       if (isDetected && !detectedWalletsReported.has(wallet.type)) {
         detectedWalletsReported.add(wallet.type);
         emitWalletDetected({
-          walletName: wallet.title,
+          walletName: wallet.type,
         });
       }
     });
@@ -131,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';