@rango-dev/widget-embedded 0.24.2-next.3 → 0.24.2-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.24.2-next.3",
+  "version": "0.24.2-next.5",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -22,9 +22,9 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.2.0",
-    "@rango-dev/provider-all": "^0.29.1-next.0",
+    "@rango-dev/provider-all": "^0.29.1-next.1",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.29.2-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.29.2-next.1",
     "@rango-dev/queue-manager-react": "^0.26.0",
     "@rango-dev/ui": "^0.30.1-next.1",
     "@rango-dev/wallets-react": "^0.15.1-next.0",

package/src/containers/App/App.tsx

@@ -2,7 +2,6 @@ import { I18nManager } from '@rango-dev/ui';
 import React from 'react';
 
 import { AppRoutes } from '../../components/AppRoutes';
-import { WidgetEvents } from '../../components/WidgetEvents';
 import { useBootstrap } from '../../hooks/useBootstrap';
 import { useLanguage } from '../../hooks/useLanguage';
 import { useTheme } from '../../hooks/useTheme';
@@ -19,7 +18,6 @@ export function Main() {
   return (
     <I18nManager language={activeLanguage}>
       <MainContainer id="swap-container" className={activeTheme()}>
-        <WidgetEvents />
         <AppRoutes />
       </MainContainer>
     </I18nManager>

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -13,10 +13,12 @@ import { useNotificationStore } from '../../store/notification';
 import { tabManager } from '../../store/ui';
 import { useFetchApiConfig } from '../useFetchApiConfig';
 import { useForceAutoConnect } from '../useForceAutoConnect';
+import { useSubscribeToWidgetEvents } from '../useSubscribeToWidgetEvents';
 
 export function useBootstrap() {
   globalFont();
   useForceAutoConnect();
+  useSubscribeToWidgetEvents();
   const blockchains = useAppStore().blockchains();
   const { canSwitchNetworkTo } = useWallets();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =

package/src/hooks/useSubscribeToWidgetEvents/index.ts

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

package/src/{components/WidgetEvents.tsx → hooks/useSubscribeToWidgetEvents/useSubscribeToWidgetEvents.ts}

@@ -1,3 +1,5 @@
+import type { RouteEventData, StepEventData } from '../..';
+
 import {
   isApprovalTX,
   MainEvents,
@@ -8,11 +10,11 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
-import { useAppStore } from '../store/AppStore';
-import { useNotificationStore } from '../store/notification';
-import { useWalletsStore } from '../store/wallets';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { useWalletsStore } from '../../store/wallets';
 
-export function WidgetEvents() {
+export function useSubscribeToWidgetEvents() {
   const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
@@ -20,7 +22,7 @@ export function WidgetEvents() {
   const widgetEvents = useEvents();
 
   useEffect(() => {
-    widgetEvents.on(MainEvents.StepEvent, (widgetEvent) => {
+    const handleStepEvent = (widgetEvent: StepEventData) => {
       const { event, step, route } = widgetEvent;
       const shouldRefetchBalance =
         (event.type === StepEventType.TX_EXECUTION &&
@@ -43,13 +45,14 @@ export function WidgetEvents() {
       }
 
       setNotification(event, route);
-    });
+    };
+    widgetEvents.on(MainEvents.StepEvent, handleStepEvent);
 
-    return () => widgetEvents.all.clear();
+    return () => widgetEvents.off(MainEvents.StepEvent, handleStepEvent);
   }, [widgetEvents, connectedWallets.length]);
 
   useEffect(() => {
-    widgetEvents.on(MainEvents.RouteEvent, (widgetEvent) => {
+    const handleRouteEvent = (widgetEvent: RouteEventData) => {
       const { event, route } = widgetEvent;
 
       if (
@@ -58,10 +61,9 @@ export function WidgetEvents() {
       ) {
         setNotification(event, route);
       }
-    });
+    };
+    widgetEvents.on(MainEvents.RouteEvent, handleRouteEvent);
 
-    return () => widgetEvents.all.clear();
+    return () => widgetEvents.off(MainEvents.RouteEvent, handleRouteEvent);
   }, [widgetEvents, connectedWallets.length]);
-
-  return null;
 }

package/src/index.ts

@@ -13,6 +13,7 @@ import type {
   PendingSwapWithQueueID,
   Route,
   RouteEvent,
+  RouteEventData,
   RouteExecutionEvents,
   RouteFailedEvent,
   RouteStartedEvent,
@@ -21,6 +22,7 @@ import type {
   StepApprovalTxSucceededEvent,
   StepCheckStatusEvent,
   StepEvent,
+  StepEventData,
   StepFailedEvent,
   StepOutputRevealedEvent,
   StepStartedEvent,
@@ -73,7 +75,9 @@ export type {
   BlockchainAndTokenConfig,
   WidgetProps,
   RouteEvent,
+  RouteEventData,
   StepEvent,
+  StepEventData,
   Route,
   Step,
   RouteStartedEvent,

package/dist/components/WidgetEvents.d.ts

@@ -1,2 +0,0 @@
-export declare function WidgetEvents(): null;
-//# sourceMappingURL=WidgetEvents.d.ts.map

package/dist/components/WidgetEvents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WidgetEvents.d.ts","sourceRoot":"","sources":["../../src/components/WidgetEvents.tsx"],"names":[],"mappings":"AAcA,wBAAgB,YAAY,SAoD3B"}