@lifi/widget 3.32.0 → 3.32.2

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -5,28 +5,21 @@ 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
+  txLink?: string
 }
 
-const getTxHash = (transferId: string) =>
-  transferId.indexOf('_') !== -1
-    ? transferId.substring(0, transferId.indexOf('_'))
-    : transferId
-
-export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
+export const TransferIdCard = ({ transferId, txLink }: 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')
+    window.open(txLink, '_blank')
   }
 
   return (
@@ -49,9 +42,11 @@ export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
           <CardIconButton size="small" onClick={copyTransferId}>
             <ContentCopyRounded fontSize="inherit" />
           </CardIconButton>
-          <CardIconButton size="small" onClick={openTransferIdInExplorer}>
-            <OpenInNew fontSize="inherit" />
-          </CardIconButton>
+          {txLink ? (
+            <CardIconButton size="small" onClick={openTransferIdInExplorer}>
+              <OpenInNew fontSize="inherit" />
+            </CardIconButton>
+          ) : null}
         </Box>
       </Box>
       <Typography

package/src/types/widget.ts

@@ -21,12 +21,12 @@ import type {
   Theme,
 } from '@mui/material'
 import type { TypographyVariantsOptions } from '@mui/material/styles'
-import type { Config as PortoConfig } from 'porto/Porto'
 import type { CSSProperties, FC, ReactNode, RefObject } from 'react'
 import type {
   BaseAccountParameters,
   CoinbaseWalletParameters,
   MetaMaskParameters,
+  PortoParameters,
   WalletConnectParameters,
 } from 'wagmi/connectors'
 import type {
@@ -142,7 +142,7 @@ export interface WidgetWalletConfig {
   coinbase?: CoinbaseWalletParameters
   metaMask?: MetaMaskParameters
   baseAccount?: BaseAccountParameters
-  porto?: Partial<PortoConfig>
+  porto?: Partial<PortoParameters>
   /**
    * Determines whether the widget should provide partial wallet management functionality.
    *

package/src/utils/converters.ts

@@ -30,6 +30,7 @@ const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
         startedAt: sending.timestamp ?? Date.now(),
         message: '',
         status: processStatus,
+        chainId: sending.chainId,
         txHash: sending.txHash,
         txLink: sending.txLink,
         doneAt: receiving.timestamp ?? Date.now(),
@@ -45,6 +46,7 @@ const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
       startedAt: sending.timestamp ?? Date.now(),
       message: '',
       status: processStatus, // can be FAILED
+      chainId: sending.chainId,
       txHash: sending.txHash,
       txLink: sending.txLink,
       doneAt: sending.timestamp,
@@ -57,6 +59,7 @@ const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
       substatus,
       substatusMessage: '',
       doneAt: receiving.timestamp ?? Date.now(),
+      chainId: receiving.chainId,
       txHash: receiving.txHash,
       txLink: receiving.txLink,
     },
@@ -211,6 +214,8 @@ export const buildRouteFromTxHistory = (
             fromAmount: sending.amount,
             toAmount: receiving.amount,
             toToken: receiving.token,
+            internalTxLink: tx.lifiExplorerLink,
+            externalTxLink: tx.bridgeExplorerLink,
             gasCosts: [
               {
                 amount: sending.gasAmount,

package/src/utils/format.ts

@@ -54,7 +54,11 @@ export function formatInputAmount(
     return amount
   }
   let formattedAmount = amount.trim().replaceAll(',', '.')
-  if (formattedAmount.startsWith('.')) {
+  if (
+    returnInitial &&
+    formattedAmount.startsWith('.') &&
+    !Number.parseFloat(formattedAmount)
+  ) {
     formattedAmount = `0${formattedAmount}`
   }
   const parsedAmount = Number.parseFloat(formattedAmount)
@@ -66,6 +70,8 @@ export function formatInputAmount(
   }
   if (returnInitial) {
     return formattedAmount
+  } else if (formattedAmount.startsWith('.')) {
+    formattedAmount = `0${formattedAmount}`
   }
   let [integer, fraction = ''] = formattedAmount.split('.')
   if (decimals !== null && fraction.length > decimals) {