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

package/src/components/WalletStatefulConnect/DerivationPath.helpers.test.ts

@@ -0,0 +1,98 @@
+import type { DerivationPathTemplate } from './DerivationPath.helpers';
+
+import { describe, expect, it } from 'vitest';
+
+import {
+  CUSTOM_DERIVATION_PATH,
+  getDerivationPaths,
+} from './DerivationPath.helpers';
+
+const LEDGER: DerivationPathTemplate[] = [
+  {
+    id: 'metamask',
+    label: `Metamask (m/44'/60'/0'/0/index)`,
+    namespace: 'EVM',
+    generateDerivationPath: (index) => `44'/60'/0'/0/${index}`,
+  },
+  {
+    id: 'ledgerLive',
+    label: `LedgerLive (m/44'/60'/index'/0/0)`,
+    namespace: 'EVM',
+    generateDerivationPath: (index) => `44'/60'/${index}'/0/0`,
+  },
+  {
+    id: 'legacy',
+    label: `Legacy (m/44'/60'/0'/index)`,
+    namespace: 'EVM',
+    generateDerivationPath: (index) => `44'/60'/0'/${index}`,
+  },
+  {
+    id: `(m/44'/501'/index')`,
+    label: `(m/44'/501'/index')`,
+    namespace: 'Solana',
+    generateDerivationPath: (index) => `44'/501'/${index}'`,
+  },
+  {
+    id: `(m/44'/501'/0'/index)`,
+    label: `(m/44'/501'/0'/index)`,
+    namespace: 'Solana',
+    generateDerivationPath: (index) => `44'/501'/0'/${index}`,
+  },
+];
+
+const TREZOR_UTXO: DerivationPathTemplate[] = [
+  {
+    id: 'bitcoin-native-segwit',
+    label: `Native SegWit (m/84'/0'/index')`,
+    namespace: 'UTXO',
+    generateDerivationPath: (index) => `84'/0'/${index}'/0/0`,
+  },
+  {
+    id: 'bitcoin-taproot',
+    label: `Taproot (m/86'/0'/index')`,
+    namespace: 'UTXO',
+    generateDerivationPath: (index) => `86'/0'/${index}'/0/0`,
+  },
+];
+
+describe('getDerivationPaths', () => {
+  it('returns only the templates of the selected namespace', () => {
+    expect(getDerivationPaths(LEDGER, 'EVM').map((path) => path.id)).toEqual([
+      'metamask',
+      'ledgerLive',
+      'legacy',
+      CUSTOM_DERIVATION_PATH.id,
+    ]);
+
+    expect(getDerivationPaths(LEDGER, 'Solana').map((path) => path.id)).toEqual(
+      [
+        `(m/44'/501'/index')`,
+        `(m/44'/501'/0'/index)`,
+        CUSTOM_DERIVATION_PATH.id,
+      ]
+    );
+  });
+
+  it('appends the custom template so a user can enter a full path', () => {
+    const paths = getDerivationPaths(TREZOR_UTXO, 'UTXO');
+
+    expect(paths.at(-1)).toBe(CUSTOM_DERIVATION_PATH);
+    expect(CUSTOM_DERIVATION_PATH.generateDerivationPath(`84'/0'/3'/0/0`)).toBe(
+      `84'/0'/3'/0/0`
+    );
+  });
+
+  it('generates the path the wallet expects for the picked index', () => {
+    const evm = getDerivationPaths(LEDGER, 'EVM');
+    const utxo = getDerivationPaths(TREZOR_UTXO, 'UTXO');
+
+    expect(evm[0]?.generateDerivationPath('2')).toBe(`44'/60'/0'/0/2`);
+    expect(evm[1]?.generateDerivationPath('2')).toBe(`44'/60'/2'/0/0`);
+    expect(utxo[0]?.generateDerivationPath('2')).toBe(`84'/0'/2'/0/0`);
+  });
+
+  it('returns nothing when the provider declares no template for the namespace', () => {
+    expect(getDerivationPaths(LEDGER, 'UTXO')).toEqual([]);
+    expect(getDerivationPaths([], 'EVM')).toEqual([]);
+  });
+});

package/src/components/WalletStatefulConnect/DerivationPath.helpers.ts

@@ -1,24 +1,28 @@
+import type { ProviderProperty } from '@hub3js/core/store';
 import type { Namespace } from '@hub3js/namespaces';
-import type { DerivationPath } from '@rango-dev/wallets-shared';
 
-import { namespaces } from '@rango-dev/wallets-shared';
+export type DerivationPathTemplate = Extract<
+  ProviderProperty,
+  { name: 'derivationPath' }
+>['value']['data'][number];
 
-export const CUSTOM_DERIVATION_PATH: DerivationPath = {
+export type DerivationPathOption = Omit<DerivationPathTemplate, 'namespace'>;
+
+export const CUSTOM_DERIVATION_PATH: DerivationPathOption = {
   id: 'custom',
   label: 'Custom',
   generateDerivationPath: (index: string) => index,
 };
 
 export function getDerivationPaths(
+  derivationPaths: DerivationPathTemplate[],
   selectedNamespace?: Namespace
-): DerivationPath[] {
-  const selectedNamespaceDerivationPaths = selectedNamespace
-    ? namespaces[selectedNamespace]?.derivationPaths
-    : null;
+): DerivationPathOption[] {
+  const selectedNamespaceDerivationPaths = derivationPaths.filter(
+    (derivationPath) => derivationPath.namespace === selectedNamespace
+  );
 
-  const derivationPaths: DerivationPath[] = !!selectedNamespaceDerivationPaths
+  return selectedNamespaceDerivationPaths.length
     ? [...selectedNamespaceDerivationPaths, CUSTOM_DERIVATION_PATH]
     : [];
-
-  return derivationPaths;
 }

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -1,9 +1,9 @@
 import type { PropTypes } from './DerivationPath.types';
-import type { DerivationPath } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import { Divider, Image, MessageBox, Select, TextField } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import { useWallets } from '@rango-dev/wallets-react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import {
   CUSTOM_DERIVATION_PATH,
@@ -26,6 +26,8 @@ export function DerivationPath(props: PropTypes) {
     providerType: type,
   } = props.value;
 
+  const { getWalletInfo } = useWallets();
+
   const [selectedDerivationPathId, setSelectedDerivationPathId] = useState<
     string | null
   >(null);
@@ -36,7 +38,14 @@ export function DerivationPath(props: PropTypes) {
   const isCustomOptionSelected =
     selectedDerivationPathId === CUSTOM_DERIVATION_PATH.id;
 
-  const derivationPaths = getDerivationPaths(selectedNamespace);
+  const derivationPaths = useMemo(
+    () =>
+      getDerivationPaths(
+        getWalletInfo(type).needsDerivationPath?.data ?? [],
+        selectedNamespace
+      ),
+    [type, selectedNamespace]
+  );
 
   const handleDerivationPathItemClick = ({ value }: { value: string }) => {
     const selectedDerivationPath = derivationPaths?.find(
@@ -75,10 +84,8 @@ export function DerivationPath(props: PropTypes) {
   };
 
   useEffect(() => {
-    setSelectedDerivationPathId(
-      getDerivationPaths(selectedNamespace)[0]?.id || null
-    );
-  }, [selectedNamespace]);
+    setSelectedDerivationPathId(derivationPaths[0]?.id || null);
+  }, [derivationPaths]);
 
   return (
     <>

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 {
@@ -119,7 +119,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/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,
@@ -11,7 +12,6 @@ import {
   RadioRoot,
   WalletImageContainer,
 } from '@rango-dev/ui';
-import { getSupportedChainsFromNamespace } from '@rango-dev/wallets-shared';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
@@ -25,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();

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.helpers.ts

@@ -1,7 +1,7 @@
 import type { OnUpdateState } from './Wallets.types';
-import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+import type { EventHandler } from '@rango-dev/wallets-react';
 
-import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
+import { Events } from '@rango-dev/wallets-react';
 
 /*
  * propagate updates for Dapps using external wallets
@@ -10,7 +10,7 @@ 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;
 
@@ -18,7 +18,7 @@ export function propagateEvents(
    * 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 (event === Events.PROVIDER_DISCONNECTED) {
     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,
@@ -126,6 +126,9 @@ function Main(props: PropsWithChildren<PropTypes>) {
                 meta: blockchains,
               },
             },
+            [WalletTypes.LEDGER_WALLET]: {
+              provider: config.ledgerWallet,
+            },
           },
         }}>
         {props.children}

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;