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

package/src/store/slices/config.ts

@@ -1,13 +1,20 @@
 import type { DataSlice } from './data';
 import type { SettingsSlice } from './settings';
-import type { WidgetConfig } from '../../types';
+import type {
+  WidgetConfig,
+  WidgetConfigWithoutLegacyProviders,
+} from '../../types';
 import type { StateCreatorWithInitialData } from '../app';
 import type { VersionedProviders } from '@hub3js/core/utils';
 
-import { allProviders as getAllProviders } from '@rango-dev/provider-all';
+import {
+  allProviders as getAllProviders,
+  WalletTypes,
+} from '@rango-dev/provider-all';
 
 import { cacheService } from '../../services/cacheService';
 import {
+  configWalletsToWalletName,
   matchAndGenerateProviders,
   type ProvidersOptions,
 } from '../../utils/providers';
@@ -27,7 +34,7 @@ function makeProvidersOptionsFromConfig(
   return options;
 }
 
-export const DEFAULT_CONFIG: WidgetConfig = {
+export const DEFAULT_CONFIG: WidgetConfigWithoutLegacyProviders = {
   apiKey: '',
   title: undefined,
   multiWallets: true,
@@ -62,13 +69,13 @@ const DEFAULT_CAMPAIGN_MODE: CampaignMode = {
 
 export interface ConfigSlice {
   // What user can set directly.
-  config: WidgetConfig;
+  config: WidgetConfigWithoutLegacyProviders;
   campaignMode: CampaignMode;
   isInCampaignMode: () => boolean;
   getLiquiditySources: () => string[];
   getDisabledLiquiditySources: () => string[];
   excludeLiquiditySources: () => boolean;
-  updateConfig: (config: WidgetConfig) => void;
+  updateConfig: (config: WidgetConfigWithoutLegacyProviders) => void;
   updateCampaignMode: <K extends keyof CampaignMode>(
     name: K,
     value: CampaignMode[K]
@@ -84,36 +91,40 @@ export interface ConfigSlice {
   getAvailableProviders: () => VersionedProviders[];
 }
 
-function generateProviders(config: WidgetConfig) {
-  const options = makeProvidersOptionsFromConfig(config);
-  const envs = {
-    walletconnect2: {
-      WC_PROJECT_ID: options?.walletConnectProjectId || '',
-      DISABLE_MODAL_AND_OPEN_LINK:
-        options?.walletConnectListedDesktopWalletLink,
-    },
-    selectedProviders: config.wallets,
-    tonConnect: options?.tonConnect?.manifestUrl
-      ? { manifestUrl: options?.tonConnect.manifestUrl }
-      : undefined,
-  };
-  const allProviders = getAllProviders(envs);
+function generateProviders(
+  config: WidgetConfigWithoutLegacyProviders
+): VersionedProviders[] {
+  const allProviders = getAllProviders();
   const allBuiltProviders = allProviders.map((build) => build());
 
-  return allBuiltProviders;
+  const providerNames = configWalletsToWalletName(allBuiltProviders);
+
+  const filteredProviders = allBuiltProviders.filter((_, index) => {
+    if (
+      providerNames[index] === WalletTypes.LEDGER_WALLET &&
+      (!config.ledgerWallet?.apiKey || !config.ledgerWallet?.dAppIdentifier)
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return filteredProviders;
 }
 
 export const createConfigSlice: StateCreatorWithInitialData<
-  WidgetConfig,
+  WidgetConfigWithoutLegacyProviders,
   ConfigSlice & SettingsSlice & DataSlice,
   ConfigSlice
 > = (initialData, set, get) => {
-  const allBuiltProviders = generateProviders({
+  const config: WidgetConfigWithoutLegacyProviders = {
     ...DEFAULT_CONFIG,
     ...initialData,
-  });
+  };
+  const allBuiltProviders = generateProviders(config);
   return {
-    config: { ...DEFAULT_CONFIG, ...initialData },
+    config,
     iframe: DEFAULT_IFRAME_CONFIGS,
     campaignMode: DEFAULT_CAMPAIGN_MODE,
     allProviders: allBuiltProviders,
@@ -141,7 +152,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
     },
 
     // Actions
-    updateConfig: (nextConfig: WidgetConfig) => {
+    updateConfig: (nextConfig: WidgetConfigWithoutLegacyProviders) => {
       const currentConfig = get().config;
       const {
         _tokensMapByTokenHash: tokensMapByTokenHash,

package/src/store/slices/data.test.ts

@@ -1,4 +1,4 @@
-import type { WidgetConfig } from '../../types';
+import type { WidgetConfigWithoutLegacyProviders } from '../../types';
 import type { AppStoreState } from '../app';
 import type { EvmBlockchainMeta, Token } from 'rango-sdk';
 
@@ -18,7 +18,7 @@ let appStoreState: AppStoreState;
 let customTokens: [Token, Token, Token];
 let rangoBlockchain: EvmBlockchainMeta;
 
-const DEFAULT_CONFIG: WidgetConfig = {
+const DEFAULT_CONFIG: WidgetConfigWithoutLegacyProviders = {
   apiKey: '',
   walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
   title: undefined,

package/src/test-utils/fixtures.ts

@@ -1,5 +1,9 @@
 import type { AppStoreState } from '../store/app';
-import type { Blockchain, TokenHash, WidgetConfig } from '../types';
+import type {
+  Blockchain,
+  TokenHash,
+  WidgetConfigWithoutLegacyProviders,
+} from '../types';
 import type { BlockchainMeta, EvmBlockchainMeta, Token } from 'rango-sdk';
 
 import { faker } from '@faker-js/faker';
@@ -216,7 +220,7 @@ export function createInitialAppStore() {
 
 export function updateAppStoreConfig(
   appStoreState: AppStoreState,
-  config: Partial<WidgetConfig>
+  config: Partial<WidgetConfigWithoutLegacyProviders>
 ): AppStoreState {
   appStoreState.config = {
     ...appStoreState.config,

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/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/connectionReporting.test.ts

@@ -0,0 +1,379 @@
+import type { ConnectionReportContext } from './connectionReporting';
+
+import { WalletConnectionError } from '@hub3js/std/utils';
+import { error as logError } from '@rango-dev/logging-core';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+import {
+  CONNECTION_TIMEOUT_MS,
+  reportConnectionError,
+  trackConnection,
+} from './connectionReporting';
+
+vi.mock('@rango-dev/logging-core', () => ({ error: vi.fn() }));
+
+const context: ConnectionReportContext = {
+  trigger: 'wallet-modal',
+  source: 'user',
+  walletType: 'phantom',
+};
+
+const namespaceState = {
+  network: null,
+  connected: false,
+  connecting: true,
+  connectArgs: null,
+};
+
+function createConnectionError(
+  type: 'rejected' | 'locked' | 'timeout' | 'unknown',
+  cause?: unknown
+) {
+  return new WalletConnectionError({
+    walletType: 'phantom',
+    namespace: 'solana',
+    type,
+    state: namespaceState,
+    cause,
+  });
+}
+
+function catchThrown(run: () => unknown): unknown {
+  try {
+    run();
+  } catch (error) {
+    return error;
+  }
+
+  return undefined;
+}
+
+function createPendingAttempt() {
+  let resolve!: (value: string) => void;
+  let reject!: (reason: unknown) => void;
+  const attempt = new Promise<string>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  return { attempt, resolve, reject };
+}
+
+function reportedEvent(call = 0) {
+  const [error, data] = vi.mocked(logError).mock.calls[call] ?? [];
+
+  return { error, data };
+}
+
+beforeEach(() => {
+  vi.mocked(logError).mockReset();
+});
+
+describe('reporting a connection error', () => {
+  test('drop a rejected connection failure without any event', () => {
+    catchThrown(() =>
+      reportConnectionError(createConnectionError('rejected'), context)
+    );
+
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  test('drop a locked wallet without any event', () => {
+    catchThrown(() =>
+      reportConnectionError(createConnectionError('locked'), context)
+    );
+
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  test('log an unknown connection failure once', () => {
+    catchThrown(() =>
+      reportConnectionError(createConnectionError('unknown'), context)
+    );
+
+    expect(logError).toHaveBeenCalledTimes(1);
+  });
+
+  test('log a timeout connection failure once', () => {
+    catchThrown(() =>
+      reportConnectionError(createConnectionError('timeout'), context)
+    );
+
+    expect(logError).toHaveBeenCalledTimes(1);
+  });
+
+  test('log the error itself with its own tags and context', () => {
+    const connectionError = createConnectionError('unknown');
+
+    catchThrown(() => reportConnectionError(connectionError, context));
+
+    const { error, data } = reportedEvent();
+    expect(error).toBe(connectionError);
+    expect(data).toEqual({
+      tags: {
+        name: 'WalletConnectionError',
+        type: 'unknown',
+        trigger: 'wallet-modal',
+        source: 'user',
+        walletType: 'phantom',
+        namespace: 'solana',
+      },
+      context: {
+        walletType: 'phantom',
+        namespace: 'solana',
+        state: namespaceState,
+      },
+    });
+  });
+
+  test('keep the wallet raw error as the cause of the event', () => {
+    const walletError = { code: -32603, message: 'Internal error' };
+
+    catchThrown(() =>
+      reportConnectionError(
+        createConnectionError('unknown', walletError),
+        context
+      )
+    );
+
+    expect(reportedEvent().error).toHaveProperty('cause', walletError);
+  });
+
+  test('keep the trigger and source a failure already carries', () => {
+    const connectionError = createConnectionError('unknown');
+    connectionError.trigger = 'swap-details';
+    connectionError.source = 'auto-connect';
+
+    catchThrown(() => reportConnectionError(connectionError, context));
+
+    expect(reportedEvent().data).toMatchObject({
+      tags: { trigger: 'swap-details', source: 'auto-connect' },
+    });
+  });
+
+  test('wrap an unexpected error keeping its real message', () => {
+    const unexpected = new TypeError('Cannot read properties of undefined');
+
+    catchThrown(() => reportConnectionError(unexpected, context));
+
+    const { error, data } = reportedEvent();
+    expect(error).toMatchObject({
+      name: 'RangoError',
+      type: 'unknown',
+      message: 'Cannot read properties of undefined',
+      cause: unexpected,
+    });
+    expect(data).toMatchObject({
+      tags: {
+        name: 'RangoError',
+        type: 'unknown',
+        trigger: 'wallet-modal',
+        source: 'user',
+        walletType: 'phantom',
+      },
+    });
+  });
+
+  test('log a thrown value that is not an error', () => {
+    catchThrown(() => reportConnectionError('boom', context));
+
+    expect(logError).toHaveBeenCalledTimes(1);
+    expect(reportedEvent().error).toMatchObject({ message: 'boom' });
+  });
+
+  test('rethrow the original error as the same object', () => {
+    const rejected = createConnectionError('rejected');
+    const unknown = createConnectionError('unknown');
+    const unexpected = new TypeError('boom');
+
+    expect(catchThrown(() => reportConnectionError(rejected, context))).toBe(
+      rejected
+    );
+    expect(catchThrown(() => reportConnectionError(unknown, context))).toBe(
+      unknown
+    );
+    expect(catchThrown(() => reportConnectionError(unexpected, context))).toBe(
+      unexpected
+    );
+  });
+
+  test('rethrow the original error when logging fails', () => {
+    vi.mocked(logError).mockImplementationOnce(() => {
+      throw new Error('the log sink is down');
+    });
+    const connectionError = createConnectionError('unknown');
+
+    expect(
+      catchThrown(() => reportConnectionError(connectionError, context))
+    ).toBe(connectionError);
+  });
+});
+
+describe('tracking a connection attempt', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('resolve with the value of a successful attempt without any event', async () => {
+    const { attempt, resolve } = createPendingAttempt();
+
+    const tracked = trackConnection(attempt, context);
+    resolve('connected');
+
+    await expect(tracked).resolves.toBe('connected');
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  test('report a failed attempt and rethrow the same error', async () => {
+    const { attempt, reject } = createPendingAttempt();
+    const connectionError = createConnectionError('unknown');
+
+    const tracked = trackConnection(attempt, context);
+    reject(connectionError);
+
+    await expect(tracked).rejects.toBe(connectionError);
+    expect(logError).toHaveBeenCalledTimes(1);
+  });
+
+  test('rethrow a rejection without any event', async () => {
+    const { attempt, reject } = createPendingAttempt();
+    const connectionError = createConnectionError('rejected');
+
+    const tracked = trackConnection(attempt, context);
+    reject(connectionError);
+
+    await expect(tracked).rejects.toBe(connectionError);
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  test('send one timeout event when the attempt is still pending after three minutes', async () => {
+    const { attempt } = createPendingAttempt();
+
+    void trackConnection(attempt, { ...context, namespaces: ['solana'] });
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS);
+
+    expect(logError).toHaveBeenCalledTimes(1);
+    const { error, data } = reportedEvent();
+    expect(error).toBeInstanceOf(WalletConnectionError);
+    expect(error).toMatchObject({
+      type: 'timeout',
+      message: "Your wallet didn't respond.",
+    });
+    expect(data).toMatchObject({
+      tags: {
+        name: 'WalletConnectionError',
+        type: 'timeout',
+        trigger: 'wallet-modal',
+        source: 'user',
+        walletType: 'phantom',
+        namespace: 'solana',
+      },
+    });
+  });
+
+  test('wait for the full three minutes before the timeout event', async () => {
+    const { attempt } = createPendingAttempt();
+
+    void trackConnection(attempt, context);
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS - 1);
+
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  test('send at most one timeout event per attempt', async () => {
+    const { attempt } = createPendingAttempt();
+
+    void trackConnection(attempt, context);
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS * 2);
+
+    expect(logError).toHaveBeenCalledTimes(1);
+  });
+
+  test('name every requested namespace on the timeout event', async () => {
+    const { attempt } = createPendingAttempt();
+
+    void trackConnection(attempt, {
+      ...context,
+      namespaces: ['solana', 'evm', 'solana'],
+    });
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS);
+
+    expect(reportedEvent().data).toMatchObject({
+      tags: { namespace: 'evm,solana' },
+    });
+  });
+
+  test('send no timeout event when the attempt succeeds first', async () => {
+    const { attempt, resolve } = createPendingAttempt();
+
+    const tracked = trackConnection(attempt, context);
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS - 1);
+    resolve('connected');
+    await tracked;
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS * 2);
+
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  test('send no timeout event when the attempt fails first', async () => {
+    const { attempt, reject } = createPendingAttempt();
+
+    const tracked = trackConnection(attempt, context);
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS - 1);
+    reject(createConnectionError('rejected'));
+    await tracked.catch(() => undefined);
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS * 2);
+
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  test('clear the timer once the attempt settles', async () => {
+    const { attempt, resolve } = createPendingAttempt();
+
+    const tracked = trackConnection(attempt, context);
+    expect(vi.getTimerCount()).toBe(1);
+    resolve('connected');
+    await tracked;
+
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  test('send no timeout event for auto connect', async () => {
+    const { attempt } = createPendingAttempt();
+
+    void trackConnection(attempt, { ...context, source: 'auto-connect' });
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS * 2);
+
+    expect(vi.getTimerCount()).toBe(0);
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  test('keep the attempt going after the timeout event', async () => {
+    const { attempt, resolve } = createPendingAttempt();
+
+    const tracked = trackConnection(attempt, context);
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS);
+    resolve('connected');
+
+    await expect(tracked).resolves.toBe('connected');
+    expect(logError).toHaveBeenCalledTimes(1);
+  });
+
+  test('report a real failure that arrives after the timeout event', async () => {
+    const { attempt, reject } = createPendingAttempt();
+    const connectionError = createConnectionError('unknown');
+
+    const tracked = trackConnection(attempt, context);
+    await vi.advanceTimersByTimeAsync(CONNECTION_TIMEOUT_MS);
+    reject(connectionError);
+
+    await expect(tracked).rejects.toBe(connectionError);
+    expect(logError).toHaveBeenCalledTimes(2);
+    expect(reportedEvent(0).error).toMatchObject({ type: 'timeout' });
+    expect(reportedEvent(1).error).toBe(connectionError);
+  });
+});