@rango-dev/widget-embedded 0.63.1-next.7 → 0.63.1-next.8

package/src/containers/Wallets/useUpdates.ts

@@ -2,17 +2,10 @@ 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,
-  LegacyNetwork as Network,
-} 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 { isEvmBlockchain } from 'rango-sdk';
 
@@ -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

@@ -117,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) {
@@ -216,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;
@@ -244,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];
@@ -327,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/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,15 +37,14 @@ import type {
   StepTxExecutionUpdatedEvent,
 } from '@rango-dev/queue-manager-rango-preset';
 import type {
-  LegacyEventHandler as HandleWalletsUpdate,
-  LegacyProviderInterface as ProviderInterface,
-  LegacyWalletInfo as WalletInfo,
-  LegacyState as WalletState,
-  LegacyWalletType as WalletType,
-} from '@rango-dev/wallets-core/legacy';
+  EventHandler as HandleWalletsUpdate,
+  ProviderInterface,
+  WalletInfo,
+  WalletState,
+} from '@rango-dev/wallets-react';
 import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
-import { Networks } from '@rango-dev/internal-blockchains';
+import { Networks, readAccountAddress } from '@rango-dev/internal-blockchains';
 import {
   EventSeverity,
   RouteEventType,
@@ -52,7 +52,6 @@ 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 { PendingSwapNetworkStatus } from 'rango-types';
 
@@ -85,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 = {
@@ -103,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,
@@ -181,7 +183,7 @@ export type {
 // Internal function and enum exports for Rango
 export {
   readAccountAddress,
-  pickProviderVersionWithFallbackToLegacy,
+  pickProviderVersion,
   Networks,
   WalletEvents,
   PendingSwapNetworkStatus,

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,6 +1,9 @@
 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';
 
@@ -31,7 +34,7 @@ function makeProvidersOptionsFromConfig(
   return options;
 }
 
-export const DEFAULT_CONFIG: WidgetConfig = {
+export const DEFAULT_CONFIG: WidgetConfigWithoutLegacyProviders = {
   apiKey: '',
   title: undefined,
   multiWallets: true,
@@ -66,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]
@@ -88,7 +91,9 @@ export interface ConfigSlice {
   getAvailableProviders: () => VersionedProviders[];
 }
 
-function generateProviders(config: WidgetConfig): VersionedProviders[] {
+function generateProviders(
+  config: WidgetConfigWithoutLegacyProviders
+): VersionedProviders[] {
   const allProviders = getAllProviders();
   const allBuiltProviders = allProviders.map((build) => build());
 
@@ -109,11 +114,14 @@ function generateProviders(config: WidgetConfig): VersionedProviders[] {
 }
 
 export const createConfigSlice: StateCreatorWithInitialData<
-  WidgetConfig,
+  WidgetConfigWithoutLegacyProviders,
   ConfigSlice & SettingsSlice & DataSlice,
   ConfigSlice
 > = (initialData, set, get) => {
-  const config: WidgetConfig = { ...DEFAULT_CONFIG, ...initialData };
+  const config: WidgetConfigWithoutLegacyProviders = {
+    ...DEFAULT_CONFIG,
+    ...initialData,
+  };
   const allBuiltProviders = generateProviders(config);
   return {
     config,
@@ -144,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,9 +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,
-  LegacyWalletType as WalletType,
-} from '@rango-dev/wallets-core/legacy';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { Asset } from 'rango-sdk';
 import type { ReactElement } from 'react';
 
@@ -278,7 +275,11 @@ export type WidgetConfig = {
   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 };
@@ -307,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 { LegacyWalletType as WalletType } from '@rango-dev/wallets-core/legacy';
 
 export interface Wallet {
   chain: string;