@rango-dev/widget-embedded 0.29.1-next.11 → 0.29.1-next.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.11",
+  "version": "0.29.1-next.13",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -27,7 +27,7 @@
     "@rango-dev/logging-core": "^0.4.0",
     "@rango-dev/provider-all": "^0.34.1-next.6",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.5",
+    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.6",
     "@rango-dev/queue-manager-react": "^0.26.0",
     "@rango-dev/signer-solana": "^0.29.1-next.1",
     "@rango-dev/ui": "^0.35.1-next.6",
@@ -53,4 +53,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/QueueManager.tsx

@@ -12,6 +12,7 @@ import { convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-share
 import { isEvmBlockchain } from 'rango-types';
 import React, { useMemo } from 'react';
 
+import { eventEmitter } from './services/eventEmitter';
 import { useAppStore } from './store/AppStore';
 import { useUiStore } from './store/ui';
 import { useWalletsStore } from './store/wallets';
@@ -32,6 +33,9 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     return makeQueueDefinition({
       API_KEY: props.apiKey || getConfig('API_KEY'),
       BASE_URL: getConfig('BASE_URL'),
+      emitter: {
+        emit: eventEmitter.emit,
+      },
     });
   }, [props.apiKey]);
 

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,10 @@ export function useSubscribeToWidgetEvents() {
 
       setNotification(event, route);
     };
-    widgetEvents.on(MainEvents.StepEvent, handleStepEvent);
+    eventEmitter.on(WidgetEvents.StepEvent, handleStepEvent);
 
-    return () => widgetEvents.off(MainEvents.StepEvent, handleStepEvent);
-  }, [widgetEvents, connectedWallets.length]);
+    return () => eventEmitter.off(WidgetEvents.StepEvent, handleStepEvent);
+  }, [eventEmitter, connectedWallets.length]);
 
   useEffect(() => {
     const handleRouteEvent = (widgetEvent: RouteEventData) => {
@@ -62,8 +61,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, connectedWallets.length]);
 }

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

@@ -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();
@@ -90,8 +91,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/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,
+  WalletInfoWithNamespaces,
   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,
+  WalletInfoWithNamespaces,
 };
 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/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/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,
+      });
+    }
+  }
+);