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

package/src/types/config.ts

@@ -1,7 +1,6 @@
-import type { Provider } from '@hub3js/core';
+import type { Provider, WalletType } from '@hub3js/core';
 import type { Language, theme } from '@rango-dev/ui';
-import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { Asset } from 'rango-sdk';
 import type { ReactElement } from 'react';
 
@@ -186,6 +185,21 @@ export type TonConnectConfig = {
   manifestUrl?: string;
 };
 
+/**
+ * Configuration for the Ledger wallet integration.
+ *
+ * @property {string} dAppIdentifier - Unique identifier of your dApp, registered with Ledger to authorize the integration.
+ * @property {string} apiKey - API key issued by Ledger, used to authenticate requests from your dApp.
+ * @property {'fatal' | 'error' | 'warn' | 'info' | 'debug'} [loggerLevel] - Verbosity of the Ledger logger.
+ * @property {boolean} [hideButton] - When `true`, hides the built-in Ledger floating button.
+ */
+export type LedgerWalletConfig = {
+  dAppIdentifier: string;
+  apiKey: string;
+  loggerLevel?: 'fatal' | 'error' | 'warn' | 'info' | 'debug';
+  hideButton?: boolean;
+};
+
 /**
  * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
  * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
@@ -254,13 +268,18 @@ export type WidgetConfig = {
   title?: string;
   walletConnectProjectId?: string;
   trezorManifest?: TrezorManifest;
+  ledgerWallet?: LedgerWalletConfig;
   tonConnect?: TonConnectConfig;
   affiliate?: WidgetAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
-  wallets?: (WalletType | LegacyProviderInterface | Provider)[];
+  /**
+   * Passing a `ProviderInterface` is deprecated. Pass a hub `Provider` instead.
+   * Legacy providers will be removed in future versions.
+   */
+  wallets?: (WalletType | ProviderInterface | Provider)[];
   multiWallets?: boolean;
   customDestination?: boolean;
   defaultCustomDestinations?: { [blockchain: string]: string };
@@ -289,3 +308,11 @@ export type WidgetConfig = {
   };
   routing?: Routing;
 };
+
+// TODO: remove this when ProviderInterface gets removed
+export type WidgetConfigWithoutLegacyProviders = WidgetConfig & {
+  wallets?: Exclude<
+    NonNullable<WidgetConfig['wallets']>[number],
+    ProviderInterface
+  >[];
+};

package/src/types/event.ts

@@ -83,10 +83,10 @@ export type ConnectWalletEventPayload = {
 
 export type DisconnectWalletEventPayload = {
   walletType: string;
+  walletName: string;
 };
 
 export type WalletDetectedEventPayload = {
-  walletType: string;
   walletName: string;
 };
 

package/src/types/wallets.ts

@@ -1,5 +1,5 @@
+import type { WalletType } from '@hub3js/core';
 import type { WalletInfo } from '@rango-dev/ui';
-import type { WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
   chain: string;

package/src/utils/common.ts

@@ -294,3 +294,9 @@ export function filterBlockchainsWithAtLeastOneToken(
     blockchainsWithAtLeastOneToken.has(blockchain.name)
   );
 }
+
+export function detectMobileScreens(): boolean {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+}

package/src/utils/errors.test.ts

@@ -0,0 +1,78 @@
+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);
+    });
+  });
+
+  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);
+    });
+  });
+
+  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('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,69 @@
+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',
+];
+
+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 {
+  const message = toMessage(value).toLowerCase();
+
+  return (
+    !!message &&
+    MODULE_LOAD_ERROR_MESSAGES.some((candidate) => message.includes(candidate))
+  );
+}
+
+/**
+ * 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;