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

package/src/containers/Wallets/Wallets.types.ts

@@ -1,9 +1,6 @@
-import type { WidgetConfig } from '../../types';
+import type { WidgetConfigWithoutLegacyProviders } from '../../types';
 import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
-import type {
-  LegacyEventHandler as EventHandler,
-  LegacyEvents,
-} from '@rango-dev/wallets-core/legacy';
+import type { EventHandler, Events } from '@rango-dev/wallets-react';
 
 export type OnWalletConnectHandler = (wallet: LastConnectedWallet) => void;
 export type OnWalletDisconnectHandler = (walletType: string) => void;
@@ -23,7 +20,7 @@ export interface WidgetContextInterface {
 }
 
 type EventHandlerParams = Parameters<EventHandler>;
-type EventParam = Exclude<LegacyEvents, LegacyEvents.PROVIDER_DISCONNECTED>;
+type EventParam = Exclude<Events, Events.PROVIDER_DISCONNECTED>;
 
 export type OnUpdateState = (
   type: EventHandlerParams[0],
@@ -35,5 +32,5 @@ export type OnUpdateState = (
 
 export interface PropTypes {
   onUpdateState?: OnUpdateState;
-  config: WidgetConfig;
+  config: WidgetConfigWithoutLegacyProviders;
 }

package/src/containers/Wallets/useUpdates.ts

@@ -2,18 +2,11 @@ import type {
   OnWalletConnectHandler,
   OnWalletDisconnectHandler,
 } from './Wallets.types';
+import type { Network } from '@rango-dev/internal-blockchains';
 import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
-import type {
-  LegacyEventHandler as EventHandler,
-  LegacyEventHandler,
-} from '@rango-dev/wallets-core/legacy';
+import type { EventHandler } from '@rango-dev/wallets-react';
 
-import {
-  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
-  legacyReadAccountAddress as readAccountAddress,
-} from '@rango-dev/wallets-core/legacy';
 import { Events } from '@rango-dev/wallets-react';
-import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
 
 import { useAppStore } from '../../store/AppStore';
@@ -39,8 +32,6 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     newWalletConnected,
     disconnectWallet,
     disconnectNamespaces,
-    connectedWallets,
-    removeBalancesForWallet,
     blockchains,
   } = useAppStore();
 
@@ -50,7 +41,7 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     .map((chain) => chain.name);
 
   const onAccountsEvent = (
-    event: Parameters<LegacyEventHandler>,
+    event: Parameters<EventHandler>,
     params: {
       supportedChainNames: Network[] | null;
     }
@@ -83,13 +74,7 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     }
   };
 
-  const handleUpdatesForHub: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    info
-  ) => {
+  const handler: EventHandler = (type, event, value, state, info) => {
     if (event === Events.ACCOUNTS) {
       const supportedChainNames: Network[] | null =
         walletAndSupportedChainsNames(info.supportedBlockchains);
@@ -116,97 +101,7 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     if (event === Events.NAMESPACE_DISCONNECTED) {
       disconnectNamespaces(type, value);
     }
-  };
 
-  const handleUpdatesForLegacy: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    info
-  ) => {
-    if (event === Events.ACCOUNTS) {
-      const supportedChainNames: Network[] | null =
-        walletAndSupportedChainsNames(info.supportedBlockchains);
-
-      /*
-       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
-       * To get their balances.
-       *
-       * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
-       * we need to clean the balances for old accounts.
-       *
-       * Note: hub will do the cleanup on namespace diconnected event.
-       */
-      const evmAccounts: string[] = [];
-      const nonEvmAccounts: string[] = [];
-
-      value?.forEach((account: string) => {
-        const { network } = readAccountAddress(account);
-        if (evmBasedChainNames.includes(network)) {
-          evmAccounts.push(account);
-        } else {
-          nonEvmAccounts.push(account);
-        }
-      });
-
-      const previousAccounts = connectedWallets
-        .filter((wallet) => wallet.walletType === type)
-        .map((wallet) =>
-          formatAddressWithNetwork(wallet.address, wallet.chain)
-        );
-
-      if (previousAccounts.length > 0) {
-        if (evmAccounts.length > 0) {
-          // We use same logic for removing as we use for adding.
-          const data = prepareAccountsForWalletStore(
-            type,
-            evmAccounts,
-            evmBasedChainNames,
-            supportedChainNames,
-            info.isContractWallet
-          );
-
-          removeBalancesForWallet(type, {
-            chains: data.map((account) => account.chain),
-          });
-        }
-
-        if (nonEvmAccounts.length > 0) {
-          removeBalancesForWallet(type, {
-            chains: nonEvmAccounts.map((account) => {
-              const { network } = readAccountAddress(account);
-              return network;
-            }),
-          });
-        }
-      }
-
-      // After cleaning up balances, it's time to add new accounts.
-      if (value) {
-        onAccountsEvent([type, event, value, state, info], {
-          supportedChainNames,
-        });
-      } else {
-        disconnectWallet(type);
-        if (!!onDisconnectWalletHandler.current) {
-          onDisconnectWalletHandler.current(type);
-        } else {
-          console.warn(
-            `onDisconnectWallet handler hasn't been set. Are you sure?`
-          );
-        }
-      }
-    }
-  };
-
-  const handleUpdatesForBoth: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    _info
-  ) => {
     if (event === Events.CONNECTED && value) {
       const walletFromEvent: LastConnectedWallet = {
         walletType: type,
@@ -234,16 +129,6 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     }
   };
 
-  const handler: EventHandler = (type, event, value, state, info) => {
-    if (info.isHub) {
-      handleUpdatesForHub(type, event, value, state, info);
-    } else {
-      handleUpdatesForLegacy(type, event, value, state, info);
-    }
-
-    handleUpdatesForBoth(type, event, value, state, info);
-  };
-
   return {
     handler,
   };

package/src/containers/WidgetProvider/WidgetProvider.helpers.ts

@@ -0,0 +1,10 @@
+import type { WalletType } from '@hub3js/core';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+
+import { Provider } from '@hub3js/core';
+
+export function isHubWallet(
+  wallet: WalletType | ProviderInterface | Provider
+): wallet is WalletType | Provider {
+  return typeof wallet === 'string' || wallet instanceof Provider;
+}

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -13,9 +13,18 @@ import { getApiKeyFromEnvOrThrow } from '../../utils/env';
 import { WidgetWallets } from '../Wallets';
 import { WidgetInfo } from '../WidgetInfo';
 
+import { isHubWallet } from './WidgetProvider.helpers';
+
 export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
   const { onUpdateState, config } = props;
 
+  const wallets = config?.wallets;
+  if (wallets && !wallets.every(isHubWallet)) {
+    throw new Error(
+      "Legacy providers aren't supported anymore. Expected a provider with version '1.0.0'."
+    );
+  }
+
   const fontFamily = props.config?.theme?.fontFamily;
 
   const { fetchApiConfig } = useFetchApiConfig();
@@ -45,7 +54,9 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
   }, [props.config?.signers?.customSolanaRPC]);
 
   return (
-    <WidgetWallets config={config} onUpdateState={onUpdateState}>
+    <WidgetWallets
+      config={{ ...config, wallets }}
+      onUpdateState={onUpdateState}>
       <QueueManager apiKey={config.apiKey}>
         <WidgetInfo>{props.children}</WidgetInfo>
       </QueueManager>

package/src/containers/WidgetProvider/WidgetProvider.types.ts

@@ -1,5 +1,5 @@
 import type { WidgetConfig } from '../../types';
-import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
+import type { EventHandler } from '@rango-dev/wallets-react';
 
 export type PropTypes = {
   onUpdateState?: EventHandler;

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 { trackConnection } from '../../utils/connectionReporting';
 import { type ExtendedModalWalletInfo } from '../../utils/wallets';
 
 import {
@@ -71,14 +75,14 @@ export function useStatefulConnect(): UseStatefulConnect {
         ...namespaceInput,
         network: undefined,
       }));
-      await connect(wallet.type, legacyNamespacesInput);
+      await trackConnection(connect(wallet.type, legacyNamespacesInput), {
+        trigger: 'wallet-modal',
+        source: 'user',
+        walletType: wallet.type,
+        namespaces: namespaces?.map(({ namespace }) => namespace),
+      });
       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.';
-
+    } catch (e) {
       if (options?.disconnectOnError) {
         try {
           await handleDisconnect(wallet);
@@ -89,7 +93,7 @@ export function useStatefulConnect(): UseStatefulConnect {
         }
       }
 
-      throw new Error(message, { cause: e });
+      throw e;
     }
   };
 
@@ -110,16 +114,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 +210,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 +238,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 +320,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) => ({