feat: add emitter-event for contact support button

packages/widget-playground/src/components/WidgetEvents.tsx

@@ -11,7 +11,7 @@ export const WidgetEvents = () => {
 
   useEffect(() => {
     const onRouteExecutionStarted = (route: Route) => {
-      // console.log('onRouteExecutionStarted fired.');
+      console.log('onRouteExecutionStarted fired.');
     };
     const onRouteExecutionUpdated = (update: RouteExecutionUpdate) => {
       // console.log('onRouteExecutionUpdated fired.');
@@ -25,6 +25,9 @@ export const WidgetEvents = () => {
     const onRouteHighValueLoss = (update: RouteHighValueLossUpdate) => {
       // console.log('onRouteHighValueLoss continued.');
     };
+    // const onRouteContactSupport = (supportId: RouteContactSupport) => {
+    //   // console.log('onRouteContactSupport clicked', supportId);
+    // };
     widgetEvents.on(WidgetEvent.RouteExecutionStarted, onRouteExecutionStarted);
     widgetEvents.on(WidgetEvent.RouteExecutionUpdated, onRouteExecutionUpdated);
     widgetEvents.on(
@@ -33,7 +36,7 @@ export const WidgetEvents = () => {
     );
     widgetEvents.on(WidgetEvent.RouteHighValueLoss, onRouteHighValueLoss);
     widgetEvents.on(WidgetEvent.RouteExecutionFailed, onRouteExecutionFailed);
-    // widgetEvents.on(WidgetEvent.InputValuesUpdated, onInputValuesUpdated);
+    // widgetEvents.on(WidgetEvent.RouteContactSupport, onRouteContactSupport);
     return () => widgetEvents.all.clear();
   }, [widgetEvents]);
 

packages/widget/src/pages/TransactionDetailsPage/ContactSupportButton.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useWidgetEvents } from '../../hooks/';
+import { WidgetEvent } from '../../types/events';
+
+interface ContactSupportButtonProps {
+  supportId?: string;
+}
+
+export const ContactSupportButton = ({
+  supportId,
+}: ContactSupportButtonProps) => {
+  const { t } = useTranslation();
+  const widgetEvents = useWidgetEvents();
+
+  const handleClick = () => {
+    if (!widgetEvents.all.has(WidgetEvent.RouteContactSupport)) {
+      const url = 'https://discord.gg/lifi';
+      const target = '_blank';
+      const rel = 'nofollow noreferrer';
+      window.open(url, target, rel);
+    } else {
+      widgetEvents.emit(WidgetEvent.RouteContactSupport, { supportId });
+    }
+  };
+
+  return (
+    <Button onClick={handleClick} fullWidth>
+      {t('button.contactSupport')}
+    </Button>
+  );
+};

packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -24,6 +24,7 @@ import { useNavigateBack } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { useRouteExecutionStore } from '../../stores';
 import { formatTokenAmount } from '../../utils';
+import { ContactSupportButton } from './ContactSupportButton';
 import { Container } from './TransactionDetailsPage.style';
 
 export const TransactionDetailsPage: React.FC = () => {
@@ -143,14 +144,7 @@ export const TransactionDetailsPage: React.FC = () => {
         </Typography>
       </Card>
       <Box mt={2}>
-        <Button
-          href="https://discord.gg/lifi"
-          target="_blank"
-          rel="nofollow noreferrer"
-          fullWidth
-        >
-          {t('button.contactSupport')}
-        </Button>
+        <ContactSupportButton supportId={supportId} />
       </Box>
       <Dialog open={open} onClose={toggleDialog}>
         <DialogTitle>{t('warning.title.deleteTransaction')}</DialogTitle>

packages/widget/src/types/events.ts

@@ -6,6 +6,7 @@ export enum WidgetEvent {
   RouteExecutionCompleted = 'routeExecutionCompleted',
   RouteExecutionFailed = 'routeExecutionFailed',
   RouteHighValueLoss = 'routeHighValueLoss',
+  RouteContactSupport = 'routeContactSupport',
 }
 
 export type WidgetEvents = {
@@ -14,8 +15,13 @@ export type WidgetEvents = {
   routeExecutionCompleted: Route;
   routeExecutionFailed: RouteExecutionUpdate;
   routeHighValueLoss: RouteHighValueLossUpdate;
+  routeContactSupport: RouteContactSupport;
 };
 
+export interface RouteContactSupport {
+  supportId?: string;
+}
+
 export interface RouteHighValueLossUpdate {
   fromAmountUsd: string;
   gasCostUSD?: string;