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

package/src/utils/connectionReporting.ts

@@ -0,0 +1,94 @@
+import type { WalletType } from '@hub3js/core';
+
+import { getRangoError, WalletConnectionError } from '@hub3js/std/utils';
+import { error as logError } from '@rango-dev/logging-core';
+
+export type ConnectionTrigger =
+  | 'wallet-modal'
+  | 'wallet-modal-namespace'
+  | 'swap-details-modal'
+  | 'swap-details'
+  | 'queue-manager';
+
+export type ConnectionSource = 'user' | 'auto-connect';
+
+export type ConnectionReportContext = {
+  trigger: ConnectionTrigger;
+  source: ConnectionSource;
+  walletType: WalletType;
+};
+
+export type ConnectionAttemptContext = ConnectionReportContext & {
+  namespaces?: string[];
+};
+
+// 3 minutes
+export const CONNECTION_TIMEOUT_MS = 180_000;
+
+// The user's own doing: dropped, never downgraded to a lower level.
+const NOT_REPORTED_TYPES: readonly string[] = ['rejected', 'locked'];
+
+function logConnectionError(error: unknown, context: ConnectionReportContext) {
+  try {
+    const { trigger, source, walletType } = context;
+    const rangoError = getRangoError(error, { trigger, source, walletType });
+
+    if (NOT_REPORTED_TYPES.includes(rangoError.type)) {
+      return;
+    }
+
+    logError(rangoError, {
+      tags: rangoError.getErrorTags(),
+      context: rangoError.getErrorContext(),
+    });
+  } catch {
+    // Reporting must never change what the caller sees.
+  }
+}
+
+/**
+ * Logs a connection failure unless the user caused it, then throws the
+ * original error, the same object, for the caller's own handling.
+ */
+export function reportConnectionError(
+  error: unknown,
+  context: ConnectionReportContext
+): never {
+  logConnectionError(error, context);
+
+  throw error;
+}
+
+/**
+ * Follows a connection attempt: reports its failure and rethrows it, and
+ * reports a `timeout` when an attempt the user started is still pending after
+ * 3 minutes. The timer never cancels or rejects the attempt.
+ */
+export async function trackConnection<T>(
+  attempt: Promise<T>,
+  context: ConnectionAttemptContext
+): Promise<T> {
+  const { namespaces = [], ...reportContext } = context;
+
+  const timeoutTimer =
+    reportContext.source === 'user'
+      ? setTimeout(() => {
+          logConnectionError(
+            new WalletConnectionError({
+              walletType: reportContext.walletType,
+              namespace: [...new Set(namespaces)].sort().join(','),
+              type: 'timeout',
+            }),
+            reportContext
+          );
+        }, CONNECTION_TIMEOUT_MS)
+      : undefined;
+
+  try {
+    return await attempt;
+  } catch (error) {
+    return reportConnectionError(error, reportContext);
+  } finally {
+    clearTimeout(timeoutTimer);
+  }
+}

package/src/utils/errors.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, test } from 'vitest';
+
+import {
+  isModuleLoadError,
+  tryRefineError,
+  tryRefineErrorMessage,
+} from './errors';
+
+describe('error refinement', () => {
+  describe('recognizing a failed dynamic import', () => {
+    test('should match a thrown error', () => {
+      const error = new TypeError(
+        'Failed to fetch dynamically imported module: https://cdn.example/signer.js'
+      );
+
+      expect(isModuleLoadError(error)).toBe(true);
+    });
+
+    test('should match webpack failures named instead of worded', () => {
+      const error = new Error('Loading failed');
+      error.name = 'ChunkLoadError';
+
+      expect(isModuleLoadError(error)).toBe(true);
+    });
+
+    test('should match a message that was already stringified', () => {
+      expect(
+        isModuleLoadError('TypeError: importing a module script failed')
+      ).toBe(true);
+    });
+
+    test('match a failed import carried as the cause of another error', () => {
+      const failedImport = new TypeError(
+        'Failed to fetch dynamically imported module: https://cdn.example/ledger.js'
+      );
+      const connectionError = new Error("Couldn't connect to your wallet.", {
+        cause: failedImport,
+      });
+
+      expect(isModuleLoadError(connectionError)).toBe(true);
+    });
+
+    test('match a failed import several causes down', () => {
+      const failedImport = new TypeError('loading chunk 42 failed');
+      const error = new Error('outer', {
+        cause: new Error('middle', { cause: failedImport }),
+      });
+
+      expect(isModuleLoadError(error)).toBe(true);
+    });
+
+    test('stop following causes that refer to each other', () => {
+      const first = new Error('first');
+      const second = new Error('second', { cause: first });
+      first.cause = second;
+
+      expect(isModuleLoadError(first)).toBe(false);
+    });
+  });
+
+  describe('leaving unrecognized failures alone', () => {
+    test('should not match an unrelated error', () => {
+      expect(
+        isModuleLoadError(new Error('User rejected the transaction'))
+      ).toBe(false);
+    });
+
+    test('should not match empty input', () => {
+      expect(isModuleLoadError(null)).toBe(false);
+      expect(isModuleLoadError(undefined)).toBe(false);
+      expect(isModuleLoadError('')).toBe(false);
+    });
+
+    test('leave an error whose cause is unrelated alone', () => {
+      const error = new Error("Couldn't connect to your wallet.", {
+        cause: { code: 4001, message: 'User rejected the request.' },
+      });
+
+      expect(isModuleLoadError(error)).toBe(false);
+    });
+  });
+
+  describe('refining into a user facing error', () => {
+    test('should keep the original as the cause', () => {
+      const error = new TypeError('failed to load module script');
+      const refined = tryRefineError(error);
+
+      expect(refined).toBeInstanceOf(Error);
+      expect(refined?.cause).toBe(error);
+      expect(refined?.message).not.toBe(error.message);
+    });
+
+    test('refine a connection failure that carries a failed import as its cause', () => {
+      const failedImport = new TypeError('failed to load module script');
+      const connectionError = new Error("Couldn't connect to your wallet.", {
+        cause: failedImport,
+      });
+      const refined = tryRefineError(connectionError);
+
+      expect(refined?.cause).toBe(connectionError);
+      expect(refined?.message).not.toBe(connectionError.message);
+    });
+
+    test('should return null for an unrecognized failure', () => {
+      expect(tryRefineError(new Error('boom'))).toBeNull();
+    });
+
+    test('should fall back to the given message', () => {
+      const fallback = 'An unknown error happened during connecting wallet.';
+
+      expect(tryRefineErrorMessage(new Error('boom'), fallback)).toBe(fallback);
+    });
+
+    test('should refine instead of falling back when recognized', () => {
+      const fallback = 'An unknown error happened during connecting wallet.';
+
+      expect(
+        tryRefineErrorMessage(
+          new TypeError('loading chunk 42 failed'),
+          fallback
+        )
+      ).not.toBe(fallback);
+    });
+  });
+});

package/src/utils/errors.ts

@@ -0,0 +1,88 @@
+import { errorMessages } from '../constants/errors';
+
+/*
+ * A failed `import()` has no standard error, so each engine and bundler words
+ * it differently. Lowercase, they are matched against a lowercased message.
+ */
+const MODULE_LOAD_ERROR_MESSAGES = [
+  // Chromium
+  'failed to fetch dynamically imported module',
+  // Firefox
+  'error loading dynamically imported module',
+  // Safari
+  'importing a module script failed',
+  // A stale chunk answered with the index page instead of a module
+  'failed to load module script',
+  // Vite
+  'unable to preload css',
+  // Webpack
+  'loading chunk',
+  'loading css chunk',
+  'chunkloaderror',
+];
+
+const MAX_CAUSE_DEPTH = 5;
+
+function toMessage(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (value instanceof Error) {
+    // Webpack names its failures rather than wording them.
+    return `${value.name} ${value.message}`;
+  }
+
+  return '';
+}
+
+export function isModuleLoadError(value: unknown): boolean {
+  /*
+   * A connection failure carries the wallet's own error as its cause, so a
+   * failed import can sit a few causes down.
+   */
+  let current = value;
+  for (let depth = 0; depth < MAX_CAUSE_DEPTH; depth++) {
+    const message = toMessage(current).toLowerCase();
+    if (
+      message &&
+      MODULE_LOAD_ERROR_MESSAGES.some((candidate) =>
+        message.includes(candidate)
+      )
+    ) {
+      return true;
+    }
+
+    if (!(current instanceof Error)) {
+      return false;
+    }
+    current = current.cause;
+  }
+
+  return false;
+}
+
+/**
+ * Replace a failure we recognize with one worth showing to a user.
+ *
+ * Every place the widget calls into another package routes its failures through
+ * here, so a new class of failure only has to be taught to the widget once.
+ *
+ * @param error - a thrown error, or a message already stringified from one.
+ * @returns a user facing error keeping the original as `cause`, or `null` when
+ * the failure is not one we recognize.
+ */
+export function tryRefineError(error: unknown): Error | null {
+  if (isModuleLoadError(error)) {
+    return new Error(errorMessages().moduleLoadError, { cause: error });
+  }
+
+  return null;
+}
+
+export function tryRefineErrorMessage(
+  error: unknown,
+  fallback: string
+): string {
+  return tryRefineError(error)?.message ?? fallback;
+}

package/src/utils/providers.ts

@@ -1,5 +1,4 @@
 import type { WidgetConfig } from '../types';
-import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
 
 import { Provider } from '@hub3js/core';
 import {
@@ -19,11 +18,10 @@ export interface ProvidersOptions {
 
 /**
  *
- * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
- * @returns BothProvidersInterface[] a list of BothProvidersInterface
+ * Generate a list of providers by passing a provider name (e.g. metamask) or a custom hub `Provider`.
+ * @returns VersionedProviders[] a list of VersionedProviders
  *
  */
-type BothProvidersInterface = LegacyProviderInterface | Provider;
 export function matchAndGenerateProviders({
   allProviders,
   configWallets,
@@ -43,30 +41,13 @@ export function matchAndGenerateProviders({
       /*
        * There are two types of provider we get, the first one is only passing the wallet name
        * then we will match the wallet name with our providers (@rango-dev/provider-*).
-       * The second way is passing a custom provider which implemented ProviderInterface.
+       * The second way is passing a custom hub `Provider` instance.
        */
       if (typeof requestedWallet === 'string') {
-        const result = allProviders.find((provider) => {
-          /*
-           * To find a provider in allProviders,
-           * a version of each provider should be picked
-           * and validated based on that version scheme.
-           * If the corresponding provider to a wallet was found in allProvider,
-           * it will be add to selected providers.
-           */
-          const versionedProvider =
-            pickProviderVersionWithFallbackToLegacy(provider);
-          if (versionedProvider instanceof Provider) {
-            return versionedProvider.id === requestedWallet;
-          }
-          return versionedProvider.config.type === requestedWallet;
-        });
+        const result = allProviders.find(
+          (provider) => pickProviderVersion(provider).id === requestedWallet
+        );
 
-        /*
-         * A provider may have multiple versions
-         * (e.g., 0.0, also known as legacy, and 1.0, also known as hub).
-         * We should ensure that all existing versions of a provider are added to selectedProviders.
-         */
         if (result) {
           selectedProviders.push(result);
         } else {
@@ -77,15 +58,15 @@ export function matchAndGenerateProviders({
         }
       } else {
         // It's a custom provider so we directly push it to the list.
-        if (requestedWallet instanceof Provider) {
-          selectedProviders.push(
-            defineVersions().version('1.0.0', requestedWallet).build()
-          );
-        } else {
-          selectedProviders.push(
-            defineVersions().version('0.0.0', requestedWallet).build()
+        if (!(requestedWallet instanceof Provider)) {
+          throw new Error(
+            `Legacy providers aren't supported anymore. Pass a hub 'Provider' instance in 'wallets' instead.`
           );
         }
+
+        selectedProviders.push(
+          defineVersions().version('1.0.0', requestedWallet).build()
+        );
       }
     });
 
@@ -95,27 +76,12 @@ export function matchAndGenerateProviders({
   return allProviders;
 }
 
-export function pickProviderVersionWithFallbackToLegacy(
-  provider: VersionedProviders
-): BothProvidersInterface {
-  try {
-    return pickVersion(provider, '1.0.0')[1];
-  } catch {
-    // Fallback to legacy version, if target version doesn't exists.
-    return pickVersion(provider, '0.0.0')[1];
-  }
+export function pickProviderVersion(provider: VersionedProviders): Provider {
+  return pickVersion(provider, '1.0.0')[1];
 }
 
 export function configWalletsToWalletName(
   providers: VersionedProviders[]
 ): string[] {
-  const names = providers
-    .map((provider) => pickProviderVersionWithFallbackToLegacy(provider))
-    .map((provider) => {
-      if (provider instanceof Provider) {
-        return provider.id;
-      }
-      return provider.config.type;
-    });
-  return names;
+  return providers.map((provider) => pickProviderVersion(provider).id);
 }

package/src/utils/swap.ts

@@ -9,8 +9,8 @@ import type {
   SwapButtonState,
   Wallet,
 } from '../types';
+import type { WalletType } from '@hub3js/core';
 import type { ExtendedWalletInfo } from '@rango-dev/wallets-react';
-import type { WalletType } from '@rango-dev/wallets-shared';
 import type {
   BestRouteRequest,
   BlockchainMeta,
@@ -49,6 +49,7 @@ import {
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../constants/routing';
 
+import { tryRefineError } from './errors';
 import { getBlockchainShortNameFor, isValidTokenAddress } from './meta';
 import { numberToString } from './numbers';
 import { getRequiredBalanceOfWallet } from './quote';
@@ -737,6 +738,12 @@ export function getSwapMessages(
   }
   detailedMessage = detailedMessage || '';
   message = message || '';
+  const refined = tryRefineError(message) ?? tryRefineError(detailedMessage);
+  if (refined) {
+    detailedMessage = [message, detailedMessage].filter(Boolean).join('\n');
+    message = refined.message;
+  }
+
   const isRpc =
     message?.indexOf('code') !== -1 && message?.indexOf('reason') !== -1;
 

package/src/utils/wallets.ts

@@ -5,30 +5,27 @@ import type {
   Wallet,
   WalletInfoWithExtra,
 } from '../types';
+import type { WalletType } from '@hub3js/core';
+import type { Network } from '@rango-dev/internal-blockchains';
 import type {
   ExtendedWalletInfo,
   ProviderContext,
 } from '@rango-dev/wallets-react';
-import type {
-  Network,
-  WalletType,
-  WalletTypes,
-} from '@rango-dev/wallets-shared';
 import type { BlockchainMeta, Token, TransactionType } from 'rango-sdk';
 
+import {
+  getBlockChainNameFromId,
+  HYPERLIQUID_SIGN_NETWORK,
+  Networks,
+  readAccountAddress,
+} from '@rango-dev/internal-blockchains';
 import {
   BlockchainCategories,
+  detectInstallLink,
   WalletState as WalletStatus,
 } from '@rango-dev/ui';
-import { legacyReadAccountAddress as readAccountAddress } from '@rango-dev/wallets-core/legacy';
-import {
-  detectInstallLink,
-  HYPERLIQUID_SIGN_NETWORK,
-  getBlockChainNameFromId,
-  isEvmAddress,
-  Networks,
-} from '@rango-dev/wallets-shared';
 import BigNumber from 'bignumber.js';
+import { isAddress as isEvmAddress } from 'ethers';
 
 import { ZERO } from '../constants/numbers';
 import {
@@ -86,7 +83,7 @@ export function mapWalletTypesToWalletInfo(
   chain?: string
 ): ExtendedModalWalletInfo[] {
   return list
-    .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
+    .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet))
     .filter((wallet) => {
       const { supportedChains, isContractWallet } = getWalletInfo(wallet);
 
@@ -528,7 +525,7 @@ export function checkIsWalletPartiallyConnected(
   wallet: ExtendedWalletInfo,
   walletState: ReturnType<ProviderContext['state']>
 ) {
-  if (!wallet.isHub || !wallet.needsNamespace || !walletState.connected) {
+  if (!wallet.needsNamespace || !walletState.connected) {
     return false;
   }
   const namespaces = wallet.needsNamespace.data;