@rango-dev/widget-embedded 0.63.1-next.1 → 0.63.1-next.11

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,13 +1,17 @@
-import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
+import type {
+  HandleConnectOptions,
+  NamespaceData,
+  Result,
+} from './useStatefulConnect.types';
 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 {
@@ -75,9 +79,12 @@ export function useStatefulConnect(): UseStatefulConnect {
       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 +117,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 +213,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 +241,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 +323,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/store/AppStore.tsx

@@ -1,4 +1,4 @@
-import type { WidgetConfig } from '../types';
+import type { WidgetConfigWithoutLegacyProviders } from '../types';
 import type { PropsWithChildren } from 'react';
 
 import React, { createContext, useContext, useEffect, useRef } from 'react';
@@ -6,7 +6,9 @@ import React, { createContext, useContext, useEffect, useRef } from 'react';
 import { createAppStore } from './app';
 
 type AppStore = ReturnType<typeof createAppStore>;
-type AppStoreProviderProps = PropsWithChildren<{ config?: WidgetConfig }>;
+type AppStoreProviderProps = PropsWithChildren<{
+  config?: WidgetConfigWithoutLegacyProviders;
+}>;
 
 export const AppStoreContext = createContext<AppStore | null>(null);
 

package/src/store/app.ts

@@ -1,4 +1,7 @@
-import type { WidgetConfig } from '../types';
+import type {
+  WidgetConfig,
+  WidgetConfigWithoutLegacyProviders,
+} from '../types';
 import type { AppStoreState } from './slices/types';
 import type { StateCreator } from 'zustand';
 
@@ -21,7 +24,9 @@ export type StateCreatorWithInitialData<
 
 export type { AppStoreState };
 
-export function createAppStore(initialData?: WidgetConfig) {
+export function createAppStore(
+  initialData?: WidgetConfigWithoutLegacyProviders
+) {
   return create<AppStoreState>()(
     persist(
       (...a) => ({

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,21 +91,40 @@ export interface ConfigSlice {
   getAvailableProviders: () => VersionedProviders[];
 }
 
-function generateProviders() {
+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,
@@ -126,7 +152,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
     },
 
     // Actions
-    updateConfig: (nextConfig: WidgetConfig) => {
+    updateConfig: (nextConfig: WidgetConfigWithoutLegacyProviders) => {
       const currentConfig = get().config;
       const {
         _tokensMapByTokenHash: tokensMapByTokenHash,
@@ -194,7 +220,8 @@ export const createConfigSlice: StateCreatorWithInitialData<
     },
 
     buildAndSetProviders: () => {
-      const allBuiltProviders = generateProviders();
+      const { config } = get();
+      const allBuiltProviders = generateProviders(config);
 
       set({
         allProviders: allBuiltProviders,

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