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

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -1,6 +1,6 @@
 import type { PropTypes } from './Detached.types';
 import type { Namespace } from '@hub3js/namespaces';
-import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+import type { NamespaceMeta } from '@rango-dev/wallets-react';
 
 import { i18n } from '@lingui/core';
 import {
@@ -14,6 +14,7 @@ import {
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
+import { useConnectWithLogging } from '../../hooks/useConnectWithLogging';
 import { NamespaceUnsupportedItem } from '../NamespaceItem/NamespaceUnsupportedItem';
 
 import { NamespacesHeader } from './Detached.styles';
@@ -28,10 +29,12 @@ export function Detached(props: PropTypes) {
     confirmText = i18n.t('Done'),
     onDisconnectWallet,
     navigateToDerivationPath,
+    trigger,
   } = props;
   const { targetWallet } = value;
 
-  const { connect, disconnect, state } = useWallets();
+  const { disconnect, state } = useWallets();
+  const connect = useConnectWithLogging();
   const walletType = targetWallet.type;
   const walletState = state(walletType);
   const namespacesProperty = targetWallet.properties?.find(
@@ -57,13 +60,17 @@ export function Detached(props: PropTypes) {
     if (derivationPathProperty && options?.shouldAskForDerivationPath) {
       navigateToDerivationPath(namespace);
     } else {
-      await connect(walletType, [
-        {
-          namespace: namespace,
-          network: '',
-          derivationPath: options?.derivationPath ?? undefined,
-        },
-      ]);
+      await connect(
+        walletType,
+        [
+          {
+            namespace: namespace,
+            network: '',
+            derivationPath: options?.derivationPath ?? undefined,
+          },
+        ],
+        { trigger }
+      );
     }
   };
 
@@ -119,7 +126,7 @@ export function Detached(props: PropTypes) {
     );
   };
 
-  const renderNamespaceItem = (namespace: LegacyNamespaceMeta) => {
+  const renderNamespaceItem = (namespace: NamespaceMeta) => {
     if (namespace.unsupported) {
       return <NamespaceUnsupportedItem namespace={namespace} />;
     }

package/src/components/WalletStatefulConnect/Detached.types.ts

@@ -1,7 +1,8 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
+import type { WithConnectTrigger } from '../../libs/connectLogging';
 import type { Namespace } from '@hub3js/namespaces';
 
-export interface PropTypes {
+export interface PropTypes extends WithConnectTrigger {
   value: NeedsNamespacesState;
   onConfirm: () => void;
   confirmText?: string;

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -4,6 +4,7 @@ import { i18n } from '@lingui/core';
 import { Button, Spinner } from '@rango-dev/ui';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 
+import { tryRefineError } from '../../utils/errors';
 import { getConciseAddress } from '../../utils/wallets';
 import { NamespaceItem } from '../NamespaceItem';
 
@@ -39,7 +40,7 @@ export function NamespaceDetachedItem(props: NamespaceDetachedItemPropTypes) {
       processingConnectAttempt.current = true;
       await handleConnect(options);
     } catch (error) {
-      setError(error as Error);
+      setError(tryRefineError(error) ?? (error as Error));
     } finally {
       processingConnectAttempt.current = false;
     }

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -2,6 +2,7 @@ import type { PropTypes } from './Namespaces.types';
 import type { Namespace } from '@hub3js/namespaces';
 
 import { i18n } from '@lingui/core';
+import { getSupportedChainsFromNamespace } from '@rango-dev/internal-blockchains';
 import {
   Alert,
   Button,
@@ -24,13 +25,8 @@ export function Namespaces(props: PropTypes) {
   const namespacesProperty = targetWallet.properties?.find(
     (property) => property.name === 'namespaces'
   );
-  const isHub = targetWallet.isHub;
-  const singleNamespace = targetWallet.isHub
-    ? namespacesProperty?.value.selection === 'single'
-    : targetWallet.needsNamespace?.selection === 'single';
-  const needsNamespace = isHub
-    ? namespacesProperty?.value
-    : targetWallet.needsNamespace;
+  const singleNamespace = namespacesProperty?.value.selection === 'single';
+  const needsNamespace = namespacesProperty?.value;
   const providerImage = targetWallet.image;
 
   const blockchains = useAppStore().blockchains();
@@ -83,11 +79,9 @@ export function Namespaces(props: PropTypes) {
       if (!!props.value.defaultSelectedChains?.length) {
         const namespacesContainingDefaultSelectedChains =
           supportedNamespaces.filter((namespace) =>
-            namespace
-              .getSupportedChains(blockchains)
-              .some((chain) =>
-                props.value.defaultSelectedChains?.includes(chain.name)
-              )
+            getSupportedChainsFromNamespace(namespace, blockchains).some(
+              (chain) => props.value.defaultSelectedChains?.includes(chain.name)
+            )
           );
         setSelectedNamespaces(
           namespacesContainingDefaultSelectedChains.map(

package/src/components/WalletStatefulConnect/Namespaces.types.tsx

@@ -1,7 +1,7 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
 import type { NamespaceData } from '@hub3js/core/store';
 import type { Namespace } from '@hub3js/namespaces';
-import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+import type { NamespaceMeta } from '@rango-dev/wallets-react';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;
@@ -11,7 +11,7 @@ export interface PropTypes {
 interface NamespaceItemSharedPropTypes {
   onClick: () => void;
   type: 'radio' | 'checkbox';
-  namespace: LegacyNamespaceMeta;
+  namespace: NamespaceMeta;
 }
 
 interface RadioNamespaceItemPropTypes extends NamespaceItemSharedPropTypes {
@@ -28,7 +28,7 @@ export type NamespaceItemPropTypes =
   | CheckboxNamespaceItemPropTypes;
 
 export type NamespaceDetachedItemPropTypes = {
-  namespace: LegacyNamespaceMeta;
+  namespace: NamespaceMeta;
   state: NamespaceData;
   initialConnect?: boolean;
   disabled?: boolean;

package/src/constants/errors.ts

@@ -7,6 +7,9 @@ import { QuoteErrorType } from '../types';
 export const errorMessages = () => {
   return {
     genericServerError: i18n.t('Failed Network, Please retry your swap.'),
+    moduleLoadError: i18n.t(
+      'A network error occurred while processing your request. Please check your internet connection or refresh the page and try again.'
+    ),
     liquiditySourcesError: {
       title: i18n.t('Please reset your liquidity sources.'),
       description: i18n.t(

package/src/containers/Wallets/Wallets.constants.ts

@@ -0,0 +1,14 @@
+import { Events } from '@rango-dev/wallets-react';
+
+/*
+ * Events the widget keeps to itself, never passed on to `onUpdateState`.
+ *
+ * PROVIDER_DISCONNECTED has conflict with WalletEventTypes.DISCONNECT since they are doing samething, the first one is using only for Hub, the second one is what we exposed to the lib users.
+ * so for backward-compat we need to keep the behavior of WalletEventTypes.DISCONNECT
+ *
+ * AUTO_CONNECT_FAILED only exists so the widget can log it.
+ */
+export const INTERNAL_EVENTS = [
+  Events.PROVIDER_DISCONNECTED,
+  Events.AUTO_CONNECT_FAILED,
+] as const;

package/src/containers/Wallets/Wallets.helpers.test.ts

@@ -0,0 +1,67 @@
+import type { EventInfo, WalletState } from '@rango-dev/wallets-react';
+
+import { AutoConnectionAttemptError, Events } from '@rango-dev/wallets-react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { propagateEvents } from './Wallets.helpers';
+
+const CORE_STATE: WalletState = {
+  connected: false,
+  connecting: false,
+  reachable: false,
+  installed: true,
+  accounts: null,
+  network: null,
+};
+
+const INFO: EventInfo = {
+  supportedBlockchains: [],
+  isContractWallet: false,
+  isHub: true,
+};
+
+describe('propagating events to the integrator', () => {
+  it('passes an event on, unchanged', () => {
+    const onUpdateState = vi.fn();
+
+    propagateEvents(onUpdateState, [
+      'metamask',
+      Events.CONNECTED,
+      true,
+      CORE_STATE,
+      INFO,
+    ]);
+
+    expect(onUpdateState).toHaveBeenCalledWith(
+      'metamask',
+      Events.CONNECTED,
+      true,
+      CORE_STATE,
+      INFO
+    );
+  });
+
+  it('keeps provider disconnected and auto-connect failed events from the integrator', () => {
+    const onUpdateState = vi.fn();
+
+    propagateEvents(onUpdateState, [
+      'metamask',
+      Events.PROVIDER_DISCONNECTED,
+      undefined,
+      CORE_STATE,
+      INFO,
+    ]);
+    propagateEvents(onUpdateState, [
+      'metamask',
+      Events.AUTO_CONNECT_FAILED,
+      new AutoConnectionAttemptError({
+        errors: [new Error('boom')],
+        requestedNamespaces: [{ namespace: 'EVM', network: undefined }],
+      }),
+      CORE_STATE,
+      INFO,
+    ]);
+
+    expect(onUpdateState).not.toHaveBeenCalled();
+  });
+});

package/src/containers/Wallets/Wallets.helpers.ts

@@ -1,7 +1,11 @@
-import type { OnUpdateState } from './Wallets.types';
-import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+import type { InternalEvent, OnUpdateState } from './Wallets.types';
+import type { EventHandler, Events } from '@rango-dev/wallets-react';
 
-import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
+import { INTERNAL_EVENTS } from './Wallets.constants';
+
+function isInternalEvent(event: Events): event is InternalEvent {
+  return (INTERNAL_EVENTS as readonly Events[]).includes(event);
+}
 
 /*
  * propagate updates for Dapps using external wallets
@@ -10,15 +14,11 @@ import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
  */
 export function propagateEvents(
   cb: OnUpdateState,
-  eventParams: Parameters<LegacyEventHandler>
+  eventParams: Parameters<EventHandler>
 ): void {
   const [walletType, event, value, coreState, info] = eventParams;
 
-  /*
-   * PROVIDER_DISCONNECTED has conflict with WalletEventTypes.DISCONNECT since they are doing samething, the first one is using only for Hub, the second one is what we exposed to the lib users.
-   * so for backward-compat we need to keep the behavior of WalletEventTypes.DISCONNECT
-   */
-  if (event === LegacyEvents.PROVIDER_DISCONNECTED) {
+  if (isInternalEvent(event)) {
     return;
   }
 

package/src/containers/Wallets/Wallets.tsx

@@ -5,11 +5,11 @@ import type {
   WidgetContextInterface,
 } from './Wallets.types';
 import type { ProvidersOptions } from '../../utils/providers';
-import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+import type { EventHandler } from '@rango-dev/wallets-react';
 import type { PropsWithChildren } from 'react';
 
+import { WalletTypes } from '@rango-dev/provider-all';
 import { Provider } from '@rango-dev/wallets-react';
-import { WalletTypes } from '@rango-dev/wallets-shared';
 import React, { createContext, useEffect, useMemo, useRef } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
@@ -89,7 +89,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         allBlockChains={blockchains}
         providers={providers}
         onUpdateState={(type, event, value, state, info) => {
-          const eventParams: Parameters<LegacyEventHandler> = [
+          const eventParams: Parameters<EventHandler> = [
             type,
             event,
             value,
@@ -109,9 +109,26 @@ function Main(props: PropsWithChildren<PropTypes>) {
             [WalletTypes.TON_CONNECT]: {
               provider: { manifestUrl: config.tonConnect?.manifestUrl },
             },
+            [WalletTypes.OKX]: {
+              provider: {
+                tonConnectManifestUrl: config.tonConnect?.manifestUrl,
+              },
+            },
             [WalletTypes.TREZOR]: {
               provider: { manifest: config.trezorManifest },
             },
+            [WalletTypes.WALLET_CONNECT_2]: {
+              provider: {
+                WC_PROJECT_ID: config.walletConnectProjectId || '',
+                DISABLE_MODAL_AND_OPEN_LINK:
+                  config.__UNSTABLE_OR_INTERNAL__
+                    ?.walletConnectListedDesktopWalletLink,
+                meta: blockchains,
+              },
+            },
+            [WalletTypes.LEDGER_WALLET]: {
+              provider: config.ledgerWallet,
+            },
           },
         }}>
         {props.children}

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

@@ -1,9 +1,7 @@
-import type { WidgetConfig } from '../../types';
+import type { INTERNAL_EVENTS } from './Wallets.constants';
+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;
@@ -22,8 +20,10 @@ export interface WidgetContextInterface {
   onDisconnectWallet(handler: OnWalletDisconnectHandler): void;
 }
 
+export type InternalEvent = (typeof INTERNAL_EVENTS)[number];
+
 type EventHandlerParams = Parameters<EventHandler>;
-type EventParam = Exclude<LegacyEvents, LegacyEvents.PROVIDER_DISCONNECTED>;
+type EventParam = Exclude<Events, InternalEvent>;
 
 export type OnUpdateState = (
   type: EventHandlerParams[0],
@@ -35,5 +35,5 @@ export type OnUpdateState = (
 
 export interface PropTypes {
   onUpdateState?: OnUpdateState;
-  config: WidgetConfig;
+  config: WidgetConfigWithoutLegacyProviders;
 }

package/src/containers/Wallets/useUpdates.ts

@@ -2,20 +2,14 @@ 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 { logAutoConnectFailure } from '../../libs/connectLogging';
 import { useAppStore } from '../../store/AppStore';
 import {
   prepareAccountsForWalletStore,
@@ -39,8 +33,6 @@ export function useUpdates(params: UseUpdatesParams): UseUpdates {
     newWalletConnected,
     disconnectWallet,
     disconnectNamespaces,
-    connectedWallets,
-    removeBalancesForWallet,
     blockchains,
   } = useAppStore();
 
@@ -50,7 +42,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 +75,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 +102,11 @@ 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?`
-          );
-        }
-      }
+    if (event === Events.AUTO_CONNECT_FAILED) {
+      logAutoConnectFailure(type, value);
     }
-  };
 
-  const handleUpdatesForBoth: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    _info
-  ) => {
     if (event === Events.CONNECTED && value) {
       const walletFromEvent: LastConnectedWallet = {
         walletType: type,
@@ -234,16 +134,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/useConnectWithLogging/index.ts

@@ -0,0 +1 @@
+export { useConnectWithLogging } from './useConnectWithLogging';