@rango-dev/widget-embedded 0.30.1-next.4 → 0.30.1-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.30.1-next.4",
+  "version": "0.30.1-next.6",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/index.ts

@@ -4,6 +4,7 @@ import type {
   BlockchainAndTokenConfig,
   QuoteEventData,
   Tokens,
+  UiEventData,
   WalletEventData,
   WalletInfoWithExtra,
   WidgetColors,
@@ -71,6 +72,7 @@ import { widgetEventEmitter } from './services/eventEmitter';
 import {
   WidgetEvents as MainEvents,
   QuoteEventTypes,
+  UiEventTypes,
   WalletEventTypes,
   WidgetEvents,
 } from './types';
@@ -108,6 +110,7 @@ export type {
   WidgetVariant,
   WalletEventData,
   QuoteEventData,
+  UiEventData,
   WalletInfoWithExtra,
 };
 export {
@@ -133,6 +136,7 @@ export {
   MainEvents,
   QuoteEventTypes,
   WalletEventTypes,
+  UiEventTypes,
   RouteEventType,
   StepEventType,
   StepExecutionEventStatus,

package/src/pages/Home.tsx

@@ -19,7 +19,9 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
+import { UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
+import { emitPreventableEvent } from '../utils/events';
 import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
 const MainContainer = styled('div', {
@@ -115,14 +117,12 @@ export function Home() {
       navigate(route);
     }
   };
-
   const onClickOnQuote = (quote: SelectedQuote) => {
     if (selectedQuote?.requestId !== quote.requestId) {
       setShowQuoteWarningModal(false);
       setSelectedQuote(quote);
     }
   };
-
   return (
     <MainContainer>
       <Layout
@@ -138,7 +138,10 @@ export function Home() {
             fullWidth
             onClick={() => {
               if (swapButtonState.action === 'connect-wallet') {
-                onHandleNavigation(navigationRoutes.wallets);
+                emitPreventableEvent(
+                  { type: UiEventTypes.CLICK_CONNECT_WALLET },
+                  () => onHandleNavigation(navigationRoutes.wallets)
+                );
               } else if (swapButtonState.action === 'confirm-warning') {
                 setShowQuoteWarningModal(true);
               } else {

package/src/store/notification.ts

@@ -36,6 +36,7 @@ export const useNotificationStore = createSelectors(
             creationTime: Date.now(),
             requestId: route.requestId,
             route: {
+              creationTime: parseInt(route.creationTime),
               from: {
                 blockchain: fromStep.fromBlockchain,
                 address: fromStep.fromSymbolAddress,
@@ -67,7 +68,18 @@ export const useNotificationStore = createSelectors(
         getNotifications: () => {
           const { isSynced, notifications } = get();
           return isSynced
-            ? notifications.sort((a, b) => b.creationTime - a.creationTime)
+            ? notifications.sort((a, b) => {
+                if (a.route.creationTime && !b.route.creationTime) {
+                  return -1;
+                }
+                if (!a.route.creationTime && b.route.creationTime) {
+                  return 1;
+                }
+                if (!a.route.creationTime && !b.route.creationTime) {
+                  return b.creationTime - a.creationTime;
+                }
+                return b.route.creationTime - a.route.creationTime;
+              })
             : [];
         },
         syncNotifications: (swaps) => {

package/src/types/event.ts

@@ -7,6 +7,17 @@ import type {
 
 import { WidgetEvents as QueueManagerEvents } from '@rango-dev/queue-manager-rango-preset';
 
+type EventData<
+  T extends QuoteEventTypes | WalletEventTypes | UiEventTypes,
+  U extends Record<string, unknown> | null
+> = { type: T; payload: U };
+
+export type PreventableEventPayload<
+  T extends Record<string, unknown> = Record<string, unknown>
+> = {
+  preventDefault: () => void;
+} & T;
+
 type Account = Wallet;
 
 export enum QuoteEventTypes {
@@ -19,6 +30,14 @@ export enum WalletEventTypes {
   DISCONNECT = 'disconnect',
 }
 
+/**
+ * We use a prefix for interaction type and a name for defining the event name: INTERACTION_EVENT_NAME
+ * e.g. CLICK_X_BUTTON or NAVIGATE_WALLET_PAGE
+ */
+export enum UiEventTypes {
+  CLICK_CONNECT_WALLET = 'clickConnectWallet',
+}
+
 export type QuoteInputUpdateEventPayload = {
   fromBlockchain?: string;
   toBlockchain?: string;
@@ -41,31 +60,27 @@ export type DisconnectWalletEventPayload = {
   walletType: string;
 };
 
+export type ClickConnectWalletPayload = PreventableEventPayload;
+
 export type QuoteEventData =
-  | {
-      type: QuoteEventTypes.QUOTE_INPUT_UPDATE;
-      payload: QuoteInputUpdateEventPayload;
-    }
-  | {
-      type: QuoteEventTypes.QUOTE_OUTPUT_UPDATE;
-      payload: QuoteUpdateEventPayload;
-    };
+  | EventData<QuoteEventTypes.QUOTE_INPUT_UPDATE, QuoteInputUpdateEventPayload>
+  | EventData<QuoteEventTypes.QUOTE_OUTPUT_UPDATE, QuoteUpdateEventPayload>;
 
 export type WalletEventData =
-  | {
-      type: WalletEventTypes.CONNECT;
-      payload: ConnectWalletEventPayload;
-    }
-  | {
-      type: WalletEventTypes.DISCONNECT;
-      payload: DisconnectWalletEventPayload;
-    };
+  | EventData<WalletEventTypes.CONNECT, ConnectWalletEventPayload>
+  | EventData<WalletEventTypes.DISCONNECT, DisconnectWalletEventPayload>;
+
+export type UiEventData = EventData<
+  UiEventTypes.CLICK_CONNECT_WALLET,
+  ClickConnectWalletPayload
+>;
 
 export enum WidgetEvents {
   RouteEvent = QueueManagerEvents.RouteEvent,
   StepEvent = QueueManagerEvents.StepEvent,
   QuoteEvent = 'quoteEvent',
   WalletEvent = 'walletEvent',
+  UiEvent = 'uiEvent',
 }
 
 export type Events = {
@@ -73,6 +88,7 @@ export type Events = {
   [WidgetEvents.StepEvent]: StepEventData;
   [WidgetEvents.QuoteEvent]: QuoteEventData;
   [WidgetEvents.WalletEvent]: WalletEventData;
+  [WidgetEvents.UiEvent]: UiEventData;
 };
 
 declare type EventHandler<T = unknown> = (event: T) => void;

package/src/types/notification.ts

@@ -6,6 +6,7 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 
 type NotificationRoute = {
+  creationTime: number;
   from: {
     blockchain: Step['fromBlockchain'];
     symbol: Step['fromSymbol'];

package/src/utils/events.ts

@@ -0,0 +1,27 @@
+import { eventEmitter } from '../services/eventEmitter';
+import { type UiEventData, WidgetEvents } from '../types';
+
+type UiEvent = {
+  type: UiEventData['type'];
+  payload?: Omit<UiEventData['payload'], 'preventDefault'>;
+};
+
+export function emitPreventableEvent(event: UiEvent, action: () => void): void {
+  let defaultPrevented = false;
+
+  const extendedPayload = {
+    preventDefault() {
+      defaultPrevented = true;
+    },
+    ...(event.payload === undefined && { payload: event.payload }),
+  };
+
+  eventEmitter.emit(WidgetEvents.UiEvent, {
+    type: event.type,
+    payload: extendedPayload,
+  });
+
+  if (!defaultPrevented) {
+    action();
+  }
+}