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/config/constants.ts

@@ -1 +1,3 @@
 export const defaultMaxHeight = 686;
+
+export const lifiExplorerUrl = 'https://scan.li.fi';

packages/widget/src/i18n/en.json

@@ -265,7 +265,7 @@
     "stepSwapAndBridge": "Swap and bridge",
     "stepSwapAndBuy": "Swap and buy",
     "stepSwapAndDeposit": "Swap and deposit",
-    "supportId": "Support ID",
+    "transferId": "Transfer ID",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tags": {
       "cheapest": "Best Return",

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';
@@ -22,6 +18,7 @@ import { buildRouteFromTxHistory } from '../../utils/converters.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { ContactSupportButton } from './ContactSupportButton.js';
 import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
+import { TransferIdCard } from './TransferIdCard.js';
 
 export const TransactionDetailsPage: React.FC = () => {
   const { t, i18n } = useTranslation();
@@ -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>
+      <TransferIdCard transferId={supportId} />
       <Box mt={2}>
         <ContactSupportButton supportId={supportId} />
       </Box>

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

@@ -0,0 +1,70 @@
+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 { lifiExplorerUrl } from '../../config/constants.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+
+interface TransferIdCardProps {
+  transferId: string;
+}
+
+const getTxHash = (transferId: string) =>
+  transferId.indexOf('_') !== -1
+    ? transferId.substring(0, transferId.indexOf('_'))
+    : transferId;
+
+export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
+  const { t } = useTranslation();
+
+  const { explorerUrl } = useWidgetConfig();
+
+  const copyTransferId = async () => {
+    await navigator.clipboard.writeText(transferId);
+  };
+
+  const openTransferIdInExplorer = () => {
+    const txHash = getTxHash(transferId);
+    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.transferId')}</CardTitle>
+        <Box
+          sx={{
+            gap: 1,
+            display: 'flex',
+            marginRight: 2,
+            marginTop: 1,
+          }}
+        >
+          <CardIconButton size="small" onClick={copyTransferId}>
+            <ContentCopyRounded fontSize="inherit" />
+          </CardIconButton>
+          <CardIconButton size="small" onClick={openTransferIdInExplorer}>
+            <OpenInNew fontSize="inherit" />
+          </CardIconButton>
+        </Box>
+      </Box>
+      <Typography
+        variant="body2"
+        pt={1}
+        pb={2}
+        px={2}
+        sx={{ wordBreak: 'break-all' }}
+      >
+        {transferId}
+      </Typography>
+    </Card>
+  );
+};

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 {