@rango-dev/widget-embedded 0.29.1-next.8 → 0.30.0

package/src/containers/Inputs/Inputs.tsx

@@ -17,7 +17,7 @@ import {
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { numberToString } from '../../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
 import { canComputePriceImpact } from '../../utils/swap';
 import { formatBalance, isFetchingBalance } from '../../utils/wallets';
@@ -40,7 +40,6 @@ export function Inputs(props: PropTypes) {
   } = useQuoteStore();
   const { connectedWallets, getBalanceFor } = useWalletsStore();
   const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
-
   const fromTokenFormattedBalance =
     formatBalance(fromTokenBalance)?.amount ?? '0';
 
@@ -69,6 +68,7 @@ export function Inputs(props: PropTypes) {
     !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
       ? null
       : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
+
   return (
     <Container>
       <FromContainer>
@@ -97,7 +97,7 @@ export function Inputs(props: PropTypes) {
                 ),
             realUsdValue: priceImpactInputCanNotBeComputed
               ? undefined
-              : formatTooltipNumbers(inputUsdValue),
+              : inputUsdValue?.toString(),
             error: priceImpactInputCanNotBeComputed
               ? errorMessages().unknownPriceError.impactTitle
               : undefined,
@@ -144,10 +144,10 @@ export function Inputs(props: PropTypes) {
                 USD_VALUE_MIN_DECIMALS,
                 USD_VALUE_MAX_DECIMALS
               ),
-          realValue: formatTooltipNumbers(outputAmount),
+          realValue: outputAmount?.toString(),
           realUsdValue: priceImpactOutputCanNotBeComputed
             ? undefined
-            : formatTooltipNumbers(outputUsdValue),
+            : outputUsdValue?.toString(),
           error: priceImpactOutputCanNotBeComputed
             ? errorMessages().unknownPriceError.impactTitle
             : undefined,

package/src/containers/Wallets/Wallets.tsx

@@ -38,6 +38,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
 
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: config?.walletConnectProjectId,
+    trezorManifest: config?.trezorManifest,
     walletConnectListedDesktopWalletLink:
       props.config.__UNSTABLE_OR_INTERNAL__
         ?.walletConnectListedDesktopWalletLink,

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -34,6 +34,7 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const loadingStatus = useAppStore().fetchStatus;
   const resetLanguage = useLanguage().resetLanguage;
   const notifications = useNotificationStore().getNotifications();
+  const clearNotifications = useNotificationStore().clearNotifications;
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value: WidgetInfoContextInterface = {
@@ -51,10 +52,12 @@ export function WidgetInfo(props: React.PropsWithChildren) {
       tokens,
       swappers,
       loadingStatus,
+      findToken,
     },
     resetLanguage,
     notifications: {
       list: notifications,
+      clearAll: clearNotifications,
     },
   };
 

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -1,5 +1,5 @@
 import type { WidgetHistory } from './WidgetInfo.helpers';
-import type { FetchStatus } from '../../store/slices/data';
+import type { FetchStatus, FindToken } from '../../store/slices/data';
 import type { ConnectedWallet } from '../../store/wallets';
 import type { Wallet } from '../../types';
 import type { Notification } from '../../types/notification';
@@ -20,9 +20,11 @@ export interface WidgetInfoContextInterface {
     tokens: Token[];
     swappers: SwapperMeta[];
     loadingStatus: FetchStatus;
+    findToken: FindToken;
   };
   resetLanguage: () => void;
   notifications: {
     list: Notification[];
+    clearAll: () => void;
   };
 }

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -10,6 +10,7 @@ import { WidgetContext } from '../../containers/Wallets';
 import { globalFont } from '../../globalStyles';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
+import { unsubscribeQuoteStore } from '../../store/quote';
 import { tabManager } from '../../store/ui';
 import { useFetchApiConfig } from '../useFetchApiConfig';
 import { useForceAutoConnect } from '../useForceAutoConnect';
@@ -32,6 +33,9 @@ export function useBootstrap() {
 
   const { fetchApiConfig } = useFetchApiConfig();
 
+  // Unsubscribe QuoteStore listeners
+  useEffect(() => () => unsubscribeQuoteStore(), []);
+
   // At the moment, we only detect the disconnection of EVM wallets.
   useQueueManager({
     lastConnectedWallet: lastConnectedWalletWithNetwork,

package/src/hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts

@@ -2,14 +2,14 @@ import type { RouteEventData, StepEventData } from '../..';
 
 import {
   isApprovalTX,
-  MainEvents,
   RouteEventType,
   StepEventType,
   StepExecutionEventStatus,
-  useEvents,
+  WidgetEvents,
 } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
+import { eventEmitter } from '../../services/eventEmitter';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useWalletsStore } from '../../store/wallets';
@@ -19,7 +19,6 @@ export function useSubscribeToWidgetEvents() {
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
   const { findToken } = useAppStore();
-  const widgetEvents = useEvents();
 
   useEffect(() => {
     const handleStepEvent = (widgetEvent: StepEventData) => {
@@ -46,10 +45,9 @@ export function useSubscribeToWidgetEvents() {
 
       setNotification(event, route);
     };
-    widgetEvents.on(MainEvents.StepEvent, handleStepEvent);
-
-    return () => widgetEvents.off(MainEvents.StepEvent, handleStepEvent);
-  }, [widgetEvents, connectedWallets.length]);
+    eventEmitter.on(WidgetEvents.StepEvent, handleStepEvent);
+    return () => eventEmitter.off(WidgetEvents.StepEvent, handleStepEvent);
+  }, [eventEmitter, connectedWallets]);
 
   useEffect(() => {
     const handleRouteEvent = (widgetEvent: RouteEventData) => {
@@ -62,8 +60,8 @@ export function useSubscribeToWidgetEvents() {
         setNotification(event, route);
       }
     };
-    widgetEvents.on(MainEvents.RouteEvent, handleRouteEvent);
+    eventEmitter.on(WidgetEvents.RouteEvent, handleRouteEvent);
 
-    return () => widgetEvents.off(MainEvents.RouteEvent, handleRouteEvent);
-  }, [widgetEvents, connectedWallets.length]);
+    return () => eventEmitter.off(WidgetEvents.RouteEvent, handleRouteEvent);
+  }, [eventEmitter]);
 }

package/src/hooks/useSyncStoresWithConfig.ts

@@ -42,7 +42,9 @@ export function useSyncStoresWithConfig() {
   const prevConfigToBlockchain = useRef<string | undefined>(undefined);
 
   useEffect(() => {
-    setInputAmount(config?.amount?.toString() || '');
+    if (typeof config.amount !== 'undefined') {
+      setInputAmount(config.amount.toString());
+    }
   }, [config?.amount]);
 
   useEffect(() => {

package/src/hooks/useWalletList.ts

@@ -1,5 +1,5 @@
 import type { WalletInfo } from '@rango-dev/ui';
-import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
+import type { NamespaceData, WalletType } from '@rango-dev/wallets-shared';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { WalletState } from '@rango-dev/ui';
@@ -28,6 +28,7 @@ interface Params {
   chain?: string;
   onBeforeConnect?: (walletType: string) => void;
   onConnect?: (walletType: string) => void;
+  onError?: (error?: string) => void;
 }
 
 /**
@@ -36,7 +37,7 @@ interface Params {
  * you can use this list whenever you need to show the list of wallets and needed callbacks
  */
 export function useWalletList(params: Params) {
-  const { chain, onBeforeConnect, onConnect } = params;
+  const { chain, onBeforeConnect, onConnect, onError } = params;
   const { config } = useAppStore();
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
@@ -45,6 +46,7 @@ export function useWalletList(params: Params) {
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes =
     configWalletsToWalletName(config?.wallets, {
+      trezorManifest: config?.trezorManifest,
       walletConnectProjectId: config?.walletConnectProjectId,
       walletConnectListedDesktopWalletLink:
         config.__UNSTABLE_OR_INTERNAL__?.walletConnectListedDesktopWalletLink,
@@ -74,7 +76,10 @@ export function useWalletList(params: Params) {
         connectedWallet.chain === chain
     );
 
-  const handleClick = async (type: WalletType, namespaces?: Namespace[]) => {
+  const handleClick = async (
+    type: WalletType,
+    namespaces?: NamespaceData[]
+  ) => {
     const wallet = state(type);
     try {
       if (error) {
@@ -90,8 +95,10 @@ export function useWalletList(params: Params) {
         await connect(type, undefined, namespaces);
         onConnect?.(type);
       }
-    } catch (e) {
-      setError('Error: ' + (e as any)?.message);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      onError?.(e?.message);
+      setError('Error: ' + e?.message);
     }
   };
 

package/src/hooks/useWalletProviders/index.ts

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

package/src/hooks/useWalletProviders/useWalletProviders.helpers.ts

@@ -0,0 +1,14 @@
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+
+export function hashProviders(
+  providers: (string | ProviderInterface)[]
+): string {
+  return providers
+    .map((provider) => {
+      if (typeof provider === 'string') {
+        return provider;
+      }
+      return provider.config.type;
+    })
+    .join('-');
+}

package/src/hooks/{useWalletProviders.ts → useWalletProviders/useWalletProviders.ts}

@@ -1,11 +1,13 @@
-import type { WidgetConfig } from '../types';
-import type { ProvidersOptions } from '../utils/providers';
+import type { WidgetConfig } from '../../types';
+import type { ProvidersOptions } from '../../utils/providers';
 import type { ProviderInterface } from '@rango-dev/wallets-react';
 
 import { useEffect } from 'react';
 
-import { useWalletsStore } from '../store/wallets';
-import { matchAndGenerateProviders } from '../utils/providers';
+import { useWalletsStore } from '../../store/wallets';
+import { matchAndGenerateProviders } from '../../utils/providers';
+
+import { hashProviders } from './useWalletProviders.helpers';
 
 export function useWalletProviders(
   providers: WidgetConfig['wallets'],
@@ -20,7 +22,11 @@ export function useWalletProviders(
   useEffect(() => {
     clearConnectedWallet();
     generateProviders = matchAndGenerateProviders(providers, options);
-  }, [providers?.length]);
+  }, [
+    hashProviders(providers ?? []),
+    options?.walletConnectProjectId,
+    options?.walletConnectListedDesktopWalletLink,
+  ]);
 
   return {
     providers: generateProviders,

package/src/hooks/useWidgetEvents/index.ts

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

package/src/hooks/useWidgetEvents/useWidgetEvents.ts

@@ -0,0 +1,9 @@
+import type { WidgetEventEmitter } from '../../types';
+
+import { eventEmitter } from '../../services/eventEmitter';
+
+export function useWidgetEvents(): WidgetEventEmitter {
+  // To be exported for Dapps
+  const { on, off } = eventEmitter;
+  return { on, off };
+}

package/src/index.ts

@@ -2,7 +2,10 @@ import type { WidgetProps } from './containers/Widget';
 import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
+  QuoteEventData,
   Tokens,
+  WalletEventData,
+  WalletInfoWithExtra,
   WidgetColors,
   WidgetColorsKeys,
   WidgetConfig,
@@ -43,12 +46,10 @@ import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
 import {
   EventSeverity,
-  MainEvents,
   RouteEventType,
   StepEventType,
   StepExecutionBlockedEventStatus,
   StepExecutionEventStatus,
-  useEvents as useWidgetEvents,
 } from '@rango-dev/queue-manager-rango-preset';
 import {
   readAccountAddress,
@@ -64,6 +65,15 @@ import { WidgetWallets } from './containers/Wallets';
 import { Widget } from './containers/Widget';
 import { useWidget } from './containers/WidgetInfo';
 import { WidgetProvider } from './containers/WidgetProvider';
+import { useWalletList } from './hooks/useWalletList';
+import { useWidgetEvents } from './hooks/useWidgetEvents';
+import { widgetEventEmitter } from './services/eventEmitter';
+import {
+  WidgetEvents as MainEvents,
+  QuoteEventTypes,
+  WalletEventTypes,
+  WidgetEvents,
+} from './types';
 import { customizedThemeTokens } from './utils/ui';
 
 export type {
@@ -96,6 +106,9 @@ export type {
   ConnectedWallet,
   Tokens,
   WidgetVariant,
+  WalletEventData,
+  QuoteEventData,
+  WalletInfoWithExtra,
 };
 export {
   Widget,
@@ -106,9 +119,20 @@ export {
   WidgetProvider,
   useWidget,
   useWallets,
+  /**
+   * @deprecated Use `widgetEventEmitter` instead. This hook will be removed in future versions.
+   */
   useWidgetEvents,
+  useWalletList,
   customizedThemeTokens,
+  widgetEventEmitter,
+  WidgetEvents,
+  /**
+   * @deprecated Use `WidgetEvents` instead. This enum will be removed in future versions.
+   */
   MainEvents,
+  QuoteEventTypes,
+  WalletEventTypes,
   RouteEventType,
   StepEventType,
   StepExecutionEventStatus,

package/src/pages/WalletsPage.tsx

@@ -1,4 +1,4 @@
-import type { WalletInfoWithNamespaces } from '../types';
+import type { WalletInfoWithExtra } from '../types';
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -14,6 +14,7 @@ import {
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
+import { WalletDerivationPathModal } from '../components/WalletDerivationPathModal';
 import { WalletModal } from '../components/WalletModal';
 import { WalletNamespacesModal } from '../components/WalletNamespacesModal';
 import { useWalletList } from '../hooks/useWalletList';
@@ -26,12 +27,20 @@ import {
 } from '../utils/wallets';
 
 interface NamespacesModalState {
+  open: boolean;
   providerType: string;
   providerImage: string;
   availableNamespaces?: Namespace[];
   singleNamespace?: boolean;
 }
 
+interface DerivationPathModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  namespace: Namespace;
+}
+
 const ListContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
@@ -57,6 +66,8 @@ export function WalletsPage() {
   const [openModal, setOpenModal] = useState(false);
   const [namespacesModalState, setNamespacesModalState] =
     useState<NamespacesModalState | null>(null);
+  const [derivationPathModalState, setDerivationPathModalState] =
+    useState<DerivationPathModalState | null>(null);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const isActiveTab = useUiStore.use.isActiveTab();
@@ -84,6 +95,24 @@ export function WalletsPage() {
     setOpenModal(false);
   };
 
+  const handleCloseNamespaceModal = () => {
+    if (namespacesModalState) {
+      setNamespacesModalState({
+        ...namespacesModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleCloseDerivationPathModal = () => {
+    if (derivationPathModalState) {
+      setDerivationPathModalState({
+        ...derivationPathModalState,
+        open: false,
+      });
+    }
+  };
+
   const selectedWallet = list.find(
     (wallet) => wallet.type === selectedWalletType
   );
@@ -97,15 +126,14 @@ export function WalletsPage() {
 
   const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
 
-  const handleWalletClick = (
-    type: string,
-    wallet: WalletInfoWithNamespaces
-  ) => {
+  const handleWalletItemClick = (type: string, wallet: WalletInfoWithExtra) => {
+    if (isSingleWalletActive(list, config.multiWallets)) {
+      return;
+    }
+
     if (!!wallet.namespaces && wallet.state === WalletState.DISCONNECTED) {
-      if (isSingleWalletActive(list, config.multiWallets)) {
-        return;
-      }
       setNamespacesModalState({
+        open: true,
         providerType: type,
         providerImage: wallet.image,
         availableNamespaces: wallet.namespaces,
@@ -116,6 +144,42 @@ export function WalletsPage() {
     }
   };
 
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    const wallet = filteredWallets.find(
+      (wallet) => wallet.type === namespacesModalState?.providerType
+    );
+    if (
+      wallet?.singleNamespace && // Currently we support derivation path only for single namespace wallets
+      wallet?.needsDerivationPath &&
+      selectedNamespaces[0]
+    ) {
+      setDerivationPathModalState({
+        open: true,
+        providerType: wallet.type,
+        providerImage: wallet.image,
+        namespace: selectedNamespaces[0],
+      });
+    } else {
+      void handleClick(
+        namespacesModalState?.providerType as string,
+        selectedNamespaces.map((namespace) => ({
+          namespace,
+        }))
+      );
+    }
+    handleCloseNamespaceModal();
+  };
+
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (derivationPath && derivationPathModalState?.namespace) {
+      void handleClick(derivationPathModalState.providerType, [
+        { namespace: derivationPathModalState.namespace, derivationPath },
+      ]);
+    }
+
+    handleCloseDerivationPathModal();
+  };
+
   return (
     <Layout
       header={{
@@ -144,7 +208,7 @@ export function WalletsPage() {
                 key={key}
                 {...wallet}
                 container={getContainer()}
-                onClick={(type) => handleWalletClick(type, wallet)}
+                onClick={(type) => handleWalletItemClick(type, wallet)}
                 isLoading={fetchMetaStatus === 'loading'}
                 disabled={!isActiveTab}
               />
@@ -158,19 +222,21 @@ export function WalletsPage() {
             error={error}
           />
           <WalletNamespacesModal
-            open={!!namespacesModalState}
-            onClose={() => setNamespacesModalState(null)}
-            onConfirm={(namespaces) => {
-              void handleClick(
-                namespacesModalState?.providerType as string,
-                namespaces
-              );
-              setNamespacesModalState(null);
-            }}
+            open={!!namespacesModalState?.open}
+            onClose={handleCloseNamespaceModal}
+            onConfirm={handleConfirmNamespaces}
             image={namespacesModalState?.providerImage}
-            namespaces={namespacesModalState?.availableNamespaces}
+            availableNamespaces={namespacesModalState?.availableNamespaces}
             singleNamespace={namespacesModalState?.singleNamespace}
           />
+          <WalletDerivationPathModal
+            open={!!derivationPathModalState?.open}
+            selectedNamespace={derivationPathModalState?.namespace}
+            type={derivationPathModalState?.providerType}
+            image={derivationPathModalState?.providerImage}
+            onClose={handleCloseDerivationPathModal}
+            onConfirm={handleDerivationPathConfirm}
+          />
         </ListContainer>
       </Container>
     </Layout>

package/src/services/eventEmitter.ts

@@ -0,0 +1,11 @@
+import type { Events, WidgetEventEmitter } from '../types';
+
+import mitt from 'mitt';
+
+export const eventEmitter = mitt<Events>();
+
+// To be exported for Dapps
+export const widgetEventEmitter: WidgetEventEmitter = {
+  on: eventEmitter.on,
+  off: eventEmitter.off,
+};

package/src/store/notification.ts

@@ -66,7 +66,9 @@ export const useNotificationStore = createSelectors(
         },
         getNotifications: () => {
           const { isSynced, notifications } = get();
-          return isSynced ? notifications : [];
+          return isSynced
+            ? notifications.sort((a, b) => b.creationTime - a.creationTime)
+            : [];
         },
         syncNotifications: (swaps) => {
           const { isSynced, notifications } = get();