@rango-dev/widget-embedded 0.5.1-next.8 → 0.5.1-next.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.5.1-next.8",
+  "version": "0.5.1-next.9",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -19,9 +19,9 @@
   "dependencies": {
     "@rango-dev/provider-all": "^0.5.1-next.5",
     "@rango-dev/queue-manager-core": "^0.5.1-next.1",
-    "@rango-dev/queue-manager-rango-preset": "^0.5.1-next.8",
+    "@rango-dev/queue-manager-rango-preset": "^0.5.1-next.9",
     "@rango-dev/queue-manager-react": "^0.5.1-next.1",
-    "@rango-dev/ui": "^0.5.1-next.7",
+    "@rango-dev/ui": "^0.5.1-next.8",
     "@rango-dev/wallets-core": "^0.5.1-next.5",
     "@rango-dev/wallets-shared": "^0.5.1-next.10",
     "bignumber.js": "^9.1.1",

package/src/QueueManager.tsx

@@ -4,7 +4,6 @@ import {
   makeQueueDefinition,
   SwapQueueContext,
   checkWaitingForNetworkChange,
-  SwapProgressNotification,
 } from '@rango-dev/queue-manager-rango-preset';
 import { useWallets } from '@rango-dev/wallets-core';
 import {
@@ -33,7 +32,6 @@ function QueueManager(props: PropsWithChildren) {
       API_KEY: getConfig('API_KEY'),
     });
   }, []);
-  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
 
   const { blockchains } = useMetaStore.use.meta();
   const connectedWallets = useWalletsStore.use.connectedWallets();
@@ -70,28 +68,6 @@ function QueueManager(props: PropsWithChildren) {
     return walletAndSupportedChainsNames(supportedChains);
   };
   const allProviders = providers();
-  const notifier = (data: SwapProgressNotification) => {
-    const lastStep = data.swap?.steps[data.swap.steps.length - 1];
-    const outputAmount = data.step?.outputAmount || '';
-    const step = data.step || lastStep;
-
-    if (
-      data.eventType === 'task_completed' ||
-      (data.eventType === 'step_completed_with_output' &&
-        lastStep?.id !== data.step?.id) ||
-      !!outputAmount
-    ) {
-      const fromAccount = connectedWallets.find(
-        (account) => account.chain === step?.fromBlockchain
-      );
-      const toAccount =
-        step?.fromBlockchain !== step?.toBlockchain &&
-        connectedWallets.find((wallet) => wallet.chain === step?.toBlockchain);
-
-      fromAccount && getOneOfWalletsDetails(fromAccount);
-      toAccount && getOneOfWalletsDetails(toAccount);
-    }
-  };
 
   const context: SwapQueueContext = {
     meta: {
@@ -112,7 +88,6 @@ function QueueManager(props: PropsWithChildren) {
     connect,
     state,
     isMobileWallet,
-    notifier,
   };
 
   return (

package/src/Widget.tsx

@@ -19,6 +19,7 @@ import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
 import { initConfig } from './utils/configs';
 import { WidgetContext, WidgetWallets } from './Wallets';
+import { WidgetEvents } from './components/WidgetEvents';
 
 const MainContainer = styled('div', {
   width: '100%',
@@ -62,6 +63,7 @@ export function Main(props: PropsWithChildren<WidgetProps>) {
   return (
     <MainContainer id="swap-container" className={activeTheme}>
       <QueueManager>
+        <WidgetEvents />
         <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
           <AppRouter
             lastConnectedWallet={lastConnectedWalletWithNetwork}

package/src/components/AppRouter.tsx

@@ -27,8 +27,6 @@ export function AppRouter({
     clearDisconnectedWallet: props.clearDisconnectedWallet,
     disconnectedWallet: props.disconnectedWallet,
     evmChains,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    notifier: () => {},
     canSwitchNetworkTo,
   });
 

package/src/components/WidgetEvents.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import {
+  useEvents,
+  MainEvents,
+  StepEventType,
+  StepExecutionEventStatus,
+  isApprovalTX,
+} from '@rango-dev/queue-manager-rango-preset';
+import { useWalletsStore } from '../store/wallets';
+
+export function WidgetEvents() {
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const getOneOfWalletsDetails = useWalletsStore.use.getOneOfWalletsDetails();
+
+  const widgetEvents = useEvents();
+
+  useEffect(() => {
+    widgetEvents.on(MainEvents.StepEvent, (widgetEvent) => {
+      const { event, step } = widgetEvent;
+      console.log({ event: widgetEvent });
+      const shouldRefetchBalance =
+        (event.type === StepEventType.TX_EXECUTION &&
+          event.status === StepExecutionEventStatus.TX_SENT &&
+          isApprovalTX(step)) ||
+        event.type === StepEventType.SUCCEEDED;
+
+      if (shouldRefetchBalance) {
+        const fromAccount = connectedWallets.find(
+          (account) => account.chain === step?.fromBlockchain
+        );
+        const toAccount =
+          step?.fromBlockchain !== step?.toBlockchain &&
+          connectedWallets.find(
+            (wallet) => wallet.chain === step?.toBlockchain
+          );
+
+        fromAccount && getOneOfWalletsDetails(fromAccount);
+        toAccount && getOneOfWalletsDetails(toAccount);
+      }
+    });
+
+    return () => widgetEvents.all.clear();
+  }, [widgetEvents, connectedWallets.length]);
+
+  return null;
+}

package/src/index.ts

@@ -8,6 +8,14 @@ import { WidgetProps, Widget } from './Widget';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { WidgetWallets } from './Wallets';
 import { useWallets } from '@rango-dev/wallets-core';
+import {
+  useEvents as useWidgetEvents,
+  MainEvents,
+  RouteEvent,
+  StepEvent,
+  Route,
+  Step,
+} from '@rango-dev/queue-manager-rango-preset';
 
 export type {
   WidgetConfig,
@@ -16,6 +24,10 @@ export type {
   WidgetColors,
   BlockchainAndTokenConfig,
   WidgetProps,
+  RouteEvent,
+  StepEvent,
+  Route,
+  Step,
 };
 export { Widget, WidgetWallets };
-export { useWallets };
+export { useWallets, useWidgetEvents, MainEvents };