feat: add explorer link to the support card

packages/widget-playground/src/store/widgetConfig/utils/getConfigOutput.ts

@@ -10,6 +10,7 @@ export const getConfigOutput = (
     ...(config.variant ? { variant: config.variant } : {}),
     ...(config.subvariant ? { subvariant: config.subvariant } : {}),
     ...(config.appearance ? { appearance: config.appearance } : {}),
+    ...(config.explorerUrl ? { explorerUrl: config.explorerUrl } : {}),
     ...(theme
       ? {
           theme: {

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

@@ -0,0 +1,71 @@
+import { ContentCopyRounded, OpenInNew } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../../components/Card/Card.js';
+import { CardIconButton } from '../../components/Card/CardIconButton.js';
+import { CardTitle } from '../../components/Card/CardTitle.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+
+const lifiExplorerUrl = 'https://scan.li.fi';
+
+interface SupportIdCardProps {
+  supportId: string;
+}
+
+const getTxHash = (supportId: string) =>
+  supportId.indexOf('_') !== -1
+    ? supportId.substring(0, supportId.indexOf('_'))
+    : supportId;
+
+export const SupportIdCard = ({ supportId }: SupportIdCardProps) => {
+  const { t } = useTranslation();
+
+  const { explorerUrl } = useWidgetConfig();
+
+  const copySupportId = async () => {
+    await navigator.clipboard.writeText(supportId);
+  };
+
+  const openSupportIdInExplorer = () => {
+    const txHash = getTxHash(supportId);
+    const urlBase = explorerUrl ?? lifiExplorerUrl;
+    window.open(`${urlBase}/tx/${txHash}`, '_blank');
+  };
+
+  return (
+    <Card sx={{ marginTop: 2 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+        }}
+      >
+        <CardTitle flex={1}>{t('main.supportId')}</CardTitle>
+        <Box
+          sx={{
+            gap: 1,
+            display: 'flex',
+            marginRight: 2,
+            marginTop: 1,
+          }}
+        >
+          <CardIconButton size="small" onClick={copySupportId}>
+            <ContentCopyRounded fontSize="inherit" />
+          </CardIconButton>
+          <CardIconButton size="small" onClick={openSupportIdInExplorer}>
+            <OpenInNew fontSize="inherit" />
+          </CardIconButton>
+        </Box>
+      </Box>
+      <Typography
+        variant="body2"
+        pt={1}
+        pb={2}
+        px={2}
+        sx={{ wordBreak: 'break-all' }}
+      >
+        {supportId}
+      </Typography>
+    </Card>
+  );
+};

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

@@ -1,12 +1,8 @@
 import type { FullStatusData } from '@lifi/sdk';
-import { ContentCopyRounded } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { Card } from '../../components/Card/Card.js';
-import { CardIconButton } from '../../components/Card/CardIconButton.js';
-import { CardTitle } from '../../components/Card/CardTitle.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { getStepList } from '../../components/Step/StepList.js';
@@ -15,6 +11,7 @@ import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useTools } from '../../hooks/useTools.js';
 import { useTransactionDetails } from '../../hooks/useTransactionDetails.js';
+import { SupportIdCard } from '../../pages/TransactionDetailsPage/SupportIdCard.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
 import { getSourceTxHash } from '../../stores/routes/utils.js';
@@ -66,10 +63,6 @@ export const TransactionDetailsPage: React.FC = () => {
     }
   }, [isLoading, navigate, routeExecution]);
 
-  const copySupportId = async () => {
-    await navigator.clipboard.writeText(supportId);
-  };
-
   const sourceTxHash = getSourceTxHash(routeExecution?.route);
 
   let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
@@ -117,30 +110,7 @@ export const TransactionDetailsPage: React.FC = () => {
           sx={{ marginTop: 2 }}
         />
       ) : null}
-      <Card sx={{ marginTop: 2 }}>
-        <Box
-          sx={{
-            display: 'flex',
-            flex: 1,
-          }}
-        >
-          <CardTitle flex={1}>{t('main.supportId')}</CardTitle>
-          <Box mr={2} mt={1}>
-            <CardIconButton size="small" onClick={copySupportId}>
-              <ContentCopyRounded fontSize="inherit" />
-            </CardIconButton>
-          </Box>
-        </Box>
-        <Typography
-          variant="body2"
-          pt={1}
-          pb={2}
-          px={2}
-          sx={{ wordBreak: 'break-all' }}
-        >
-          {supportId}
-        </Typography>
-      </Card>
+      <SupportIdCard supportId={supportId} />
       <Box mt={2}>
         <ContactSupportButton supportId={supportId} />
       </Box>

packages/widget/src/types/widget.ts

@@ -188,7 +188,6 @@ export interface WidgetConfig {
   contractSecondaryComponent?: ReactNode;
   contractCompactComponent?: ReactNode;
   contractTool?: WidgetContractTool;
-
   integrator: string;
   apiKey?: string;
   /**
@@ -225,6 +224,7 @@ export interface WidgetConfig {
   tokens?: WidgetTokens;
   languages?: WidgetLanguages;
   languageResources?: LanguageResources;
+  explorerUrl?: string;
 }
 
 export interface WidgetConfigProps {