@rango-dev/widget-embedded 0.29.1-next.2 → 0.29.1-next.21

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';
@@ -13,6 +13,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
+import { isSingleWalletActive } from '../utils/common';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
   hashWalletsState,
@@ -27,6 +28,7 @@ interface Params {
   chain?: string;
   onBeforeConnect?: (walletType: string) => void;
   onConnect?: (walletType: string) => void;
+  onError?: (error?: string) => void;
 }
 
 /**
@@ -35,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();
@@ -44,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,
@@ -73,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) {
@@ -82,18 +88,17 @@ export function useWalletList(params: Params) {
       if (wallet.connected) {
         await disconnect(type);
       } else {
-        const atLeastOneWalletIsConnected = !!wallets.find(
-          (w) => w.state === WalletState.CONNECTED
-        );
-        if (config?.multiWallets === false && atLeastOneWalletIsConnected) {
+        if (isSingleWalletActive(wallets, config.multiWallets)) {
           return;
         }
         onBeforeConnect?.(type);
         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,3 +1,4 @@
+import type { WalletInfoWithExtra } from '../types';
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -13,24 +14,33 @@ 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';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
-import { getContainer } from '../utils/common';
+import { getContainer, isSingleWalletActive } from '../utils/common';
 import {
   filterBlockchainsByWalletTypes,
   filterWalletsByCategory,
 } 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',
@@ -51,10 +61,13 @@ export function WalletsPage() {
   const { fetchStatus: fetchMetaStatus } = useAppStore();
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const blockchains = useAppStore().blockchains();
+  const { config } = useAppStore();
 
   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();
@@ -82,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
   );
@@ -95,6 +126,60 @@ export function WalletsPage() {
 
   const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
 
+  const handleWalletItemClick = (type: string, wallet: WalletInfoWithExtra) => {
+    if (isSingleWalletActive(list, config.multiWallets)) {
+      return;
+    }
+
+    if (!!wallet.namespaces && wallet.state === WalletState.DISCONNECTED) {
+      setNamespacesModalState({
+        open: true,
+        providerType: type,
+        providerImage: wallet.image,
+        availableNamespaces: wallet.namespaces,
+        singleNamespace: wallet.singleNamespace,
+      });
+    } else {
+      void handleClick(type);
+    }
+  };
+
+  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={{
@@ -123,21 +208,7 @@ export function WalletsPage() {
                 key={key}
                 {...wallet}
                 container={getContainer()}
-                onClick={(type) => {
-                  if (
-                    !!wallet.namespaces &&
-                    wallet.state === WalletState.DISCONNECTED
-                  ) {
-                    setNamespacesModalState({
-                      providerType: type,
-                      providerImage: wallet.image,
-                      availableNamespaces: wallet.namespaces,
-                      singleNamespace: wallet.singleNamespace,
-                    });
-                  } else {
-                    void handleClick(type);
-                  }
-                }}
+                onClick={(type) => handleWalletItemClick(type, wallet)}
                 isLoading={fetchMetaStatus === 'loading'}
                 disabled={!isActiveTab}
               />
@@ -151,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();

package/src/store/quote.ts

@@ -1,4 +1,3 @@
-import type { QuoteError, QuoteWarning, SelectedQuote, Wallet } from '../types';
 import type {
   BlockchainMeta,
   MetaResponse,
@@ -12,6 +11,15 @@ import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
+import { eventEmitter } from '../services/eventEmitter';
+import {
+  type QuoteError,
+  QuoteEventTypes,
+  type QuoteWarning,
+  type SelectedQuote,
+  type Wallet,
+  WidgetEvents,
+} from '../types';
 import { isPositiveNumber } from '../utils/numbers';
 import { getQuoteToTokenUsdPrice } from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
@@ -289,3 +297,57 @@ export const useQuoteStore = createSelectors(
     }))
   )
 );
+
+export const unsubscribeQuoteStore = useQuoteStore.subscribe(
+  (selectedState, previousSelectedState) => {
+    if (
+      selectedState.fromBlockchain !== previousSelectedState.fromBlockchain ||
+      selectedState.fromToken !== previousSelectedState.fromToken ||
+      selectedState.toBlockchain !== previousSelectedState.toBlockchain ||
+      selectedState.toToken !== previousSelectedState.toToken ||
+      selectedState.inputAmount !== previousSelectedState.inputAmount
+    ) {
+      // useEffect hook can not be used in Zustand subscribe
+      eventEmitter.emit(WidgetEvents.QuoteEvent, {
+        type: QuoteEventTypes.QUOTE_INPUT_UPDATE,
+        payload: {
+          fromBlockchain: selectedState.fromBlockchain?.name,
+          toBlockchain: selectedState.toBlockchain?.name,
+          fromToken: selectedState.fromToken
+            ? {
+                symbol: selectedState.fromToken.symbol,
+                name: selectedState.fromToken.name,
+                address: selectedState.fromToken.address,
+              }
+            : undefined,
+          toToken: selectedState.toToken
+            ? {
+                symbol: selectedState.toToken.symbol,
+                name: selectedState.toToken.name,
+                address: selectedState.toToken.address,
+              }
+            : undefined,
+          requestAmount: selectedState.inputAmount,
+        },
+      });
+    }
+
+    if (
+      selectedState.selectedQuote?.requestId !==
+      previousSelectedState.selectedQuote?.requestId
+    ) {
+      eventEmitter.emit(WidgetEvents.QuoteEvent, {
+        type: QuoteEventTypes.QUOTE_OUTPUT_UPDATE,
+        payload: selectedState.selectedQuote
+          ? {
+              requestAmount: selectedState.selectedQuote.requestAmount,
+              swaps: selectedState.selectedQuote.swaps,
+              outputAmount: selectedState.selectedQuote.outputAmount,
+              resultType: selectedState.selectedQuote.resultType,
+              tags: selectedState.selectedQuote.tags,
+            }
+          : null,
+      });
+    }
+  }
+);

package/src/store/slices/config.ts

@@ -9,6 +9,10 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   excludeLiquiditySources: true,
   customDestination: true,
   variant: 'default',
+  trezorManifest: {
+    appUrl: 'https://widget.rango.exchange/',
+    email: 'hi+trezorwidget@rango.exchange',
+  },
 };
 
 interface IframeConfigs {

package/src/store/slices/settings.ts

@@ -159,6 +159,8 @@ export const createSettingsSlice: StateCreator<
     const isLanguageHidden = isFeatureHidden('language', features);
     const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
     const singleTheme = theme?.singleTheme;
+    const autoUpdateSettings =
+      nextConfig?.__UNSTABLE_OR_INTERNAL__?.autoUpdateSettings;
 
     set({
       ...(isThemeHidden && { theme: nextConfig.theme?.mode || 'auto' }),
@@ -169,6 +171,10 @@ export const createSettingsSlice: StateCreator<
       ...(isLiquidityHidden && {
         disabledLiquiditySources: nextConfig.liquiditySources || [],
       }),
+      ...(autoUpdateSettings && {
+        // For the time being, we have added the language; if more are needed later, we can add other parameters.
+        language: nextConfig.language || DEFAULT_LANGUAGE,
+      }),
     });
   },
 });