@lifi/widget 3.4.4 → 3.5.0

package/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -10,7 +10,7 @@ import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
-import { useChains } from '../../hooks/useChains.js';
+import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
@@ -34,10 +34,10 @@ export const SendToConfiguredWalletPage = () => {
   const { requiredToChainType } = useToAddressRequirements();
   const { setSelectedBookmark } = useBookmarkActions();
   const { setFieldValue } = useFieldActions();
-  const { getChainById } = useChains();
   const moreMenuId = useId();
   const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
   const open = Boolean(moreMenuAnchorEl);
+  const { getAddressLink } = useExplorer();
 
   useHeader(t(`header.sendToWallet`));
 
@@ -65,11 +65,11 @@ export const SendToConfiguredWalletPage = () => {
 
   const handleViewOnExplorer = () => {
     if (selectedToAddress) {
-      const chain = getChainById(
-        defaultChainIdsByType[selectedToAddress.chainType],
-      );
       window.open(
-        `${chain?.metamask.blockExplorerUrls[0]}address/${selectedToAddress.address}`,
+        getAddressLink(
+          selectedToAddress.address,
+          defaultChainIdsByType[selectedToAddress.chainType],
+        ),
         '_blank',
       );
     }

package/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -44,6 +44,9 @@ interface FullHeightAdjustablePageContainerProps extends PageContainerProps {
 
 export const FullHeightAdjustablePageContainer = styled(
   SendToWalletPageContainer,
+  {
+    shouldForwardProp: (prop) => prop !== 'enableFullHeight',
+  },
 )<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
   justifyContent: 'space-between',
   ...(enableFullHeight && theme.container?.height === '100%'

package/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>

package/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -0,0 +1,67 @@
+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 { useExplorer } from '../../hooks/useExplorer.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 { getTransactionLink } = useExplorer();
+
+  const copyTransferId = async () => {
+    await navigator.clipboard.writeText(transferId);
+  };
+
+  const openTransferIdInExplorer = () => {
+    const txHash = getTxHash(transferId);
+    window.open(getTransactionLink(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>
+  );
+};

package/providers/I18nProvider/I18nProvider.tsx

@@ -8,6 +8,7 @@ import { deepMerge } from '../../utils/deepMerge.js';
 import { isItemAllowed } from '../../utils/item.js';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 import { currencyExtendedFormatter } from './currencyExtendedFormatter.js';
+import { percentFormatter } from './percentFormatter.js';
 import type { LanguageKey, LanguageTranslationResources } from './types.js';
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
@@ -66,6 +67,7 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
       'currencyExt',
       currencyExtendedFormatter,
     );
+    i18n.services.formatter?.addCached('percent', percentFormatter);
 
     return i18n;
   }, [language, languageResources, languages]);

package/providers/I18nProvider/percentFormatter.ts

@@ -0,0 +1,18 @@
+/**
+ * We use <0.01% for both small positive and negative changes to keep it simple and clear, focusing on minimal impact rather than direction.
+ * Examples:
+ * +0.007% -> <0.01%
+ * -0.003% -> <0.01%
+ */
+export const percentFormatter = (lng: string | undefined, options: any) => {
+  const formatter = new Intl.NumberFormat(lng, {
+    ...options,
+    style: 'percent',
+  });
+  return (value: any) => {
+    if ((value > 0 && value < 0.0001) || (value < 0 && value > -0.0001)) {
+      return `<${formatter.format(0.0001)}`;
+    }
+    return formatter.format(value);
+  };
+};

package/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;
+  explorerUrls?: Record<number | 'internal', string[]>;
 }
 
 export interface WidgetConfigProps {

package/utils/elements.ts

@@ -3,6 +3,7 @@ export enum ElementId {
   Header = 'widget-header',
   RelativeContainer = 'widget-relative-container',
   ScrollableContainer = 'widget-scrollable-container',
+  TokenList = 'token-list',
 }
 
 export const createElementId = (ElementId: ElementId, elementId: string) =>