@lifi/widget 3.21.3 → 3.22.0

package/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -52,23 +52,15 @@ export const IconCircle = styled(Box, {
   return {
     backgroundColor: `rgba(${color} / ${alphaValue})`,
     borderRadius: '50%',
-    width: 64,
-    height: 64,
+    width: 72,
+    height: 72,
     display: 'grid',
     position: 'relative',
     placeItems: 'center',
     '& > svg': {
       color: `color-mix(in srgb, rgb(${color}) ${(1 - darkenValue) * 100}%, black)`,
-      width: 32,
-      height: 32,
+      width: 36,
+      height: 36,
     },
   }
 })
-
-export const MessageSkeletonContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  height: 64,
-  gap: theme.spacing(0.5),
-  paddingTop: theme.spacing(1),
-}))

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -2,17 +2,18 @@ import Done from '@mui/icons-material/Done'
 import ErrorRounded from '@mui/icons-material/ErrorRounded'
 import InfoRounded from '@mui/icons-material/InfoRounded'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Button, Skeleton, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { Card } from '../../components/Card/Card.js'
+import { CardTitle } from '../../components/Card/CardTitle.js'
 import { Token } from '../../components/Token/Token.js'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { getProcessMessage } from '../../hooks/useProcessMessage.js'
 import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
-import { useTokenBalance } from '../../hooks/useTokenBalance.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import {
@@ -23,24 +24,12 @@ import { getSourceTxHash } from '../../stores/routes/utils.js'
 import { hasEnumFlag } from '../../utils/enum.js'
 import { formatTokenAmount } from '../../utils/format.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
-import { shortenAddress } from '../../utils/wallet.js'
-import {
-  CenterContainer,
-  IconCircle,
-  MessageSkeletonContainer,
-} from './StatusBottomSheet.style.js'
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'
 
 interface StatusBottomSheetContentProps extends RouteExecution {
   onClose(): void
 }
 
-const MessageSkeleton = () => (
-  <MessageSkeletonContainer>
-    <Skeleton height={24} variant="text" width="92%" />
-    <Skeleton height={24} variant="text" width="56%" />
-  </MessageSkeletonContainer>
-)
-
 export const StatusBottomSheet: React.FC<RouteExecution> = ({
   status,
   route,
@@ -97,11 +86,6 @@ export const StatusBottomSheetContent: React.FC<
     ),
   }
 
-  const { token, refetch, refetchNewBalance } = useTokenBalance(
-    route.toAddress,
-    toToken
-  )
-
   const cleanFields = () => {
     setFieldValue('fromAmount', '')
     setFieldValue('toAmount', '')
@@ -160,7 +144,7 @@ export const StatusBottomSheetContent: React.FC<
 
   let title: string | undefined
   let primaryMessage: string | undefined
-  let secondaryMessage: string | undefined
+  let failedMessage: string | undefined
   let handlePrimaryButton = handleDone
   switch (status) {
     case RouteExecutionStatus.Done: {
@@ -170,14 +154,6 @@ export const StatusBottomSheetContent: React.FC<
               `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`
             )
           : t(`success.title.${transactionType}Successful`)
-      if (token) {
-        primaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(toToken.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        })
-      }
       handlePrimaryButton = handleDone
       break
     }
@@ -187,14 +163,6 @@ export const StatusBottomSheetContent: React.FC<
         tool: route.steps.at(-1)?.toolDetails.name,
         tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
       })
-      if (token) {
-        secondaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(toToken.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        })
-      }
       handlePrimaryButton = handlePartialDone
       break
     }
@@ -204,14 +172,6 @@ export const StatusBottomSheetContent: React.FC<
         tool: route.steps.at(-1)?.toolDetails.name,
         tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
       })
-      if (token) {
-        secondaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(toToken.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        })
-      }
       break
     }
     case RouteExecutionStatus.Failed: {
@@ -226,7 +186,7 @@ export const StatusBottomSheetContent: React.FC<
       }
       const processMessage = getProcessMessage(t, getChainById, step, process)
       title = processMessage.title
-      primaryMessage = processMessage.message
+      failedMessage = processMessage.message
       handlePrimaryButton = handleClose
       break
     }
@@ -234,14 +194,6 @@ export const StatusBottomSheetContent: React.FC<
       break
   }
 
-  useEffect(() => {
-    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)
-    if (hasSuccessFlag) {
-      refetchNewBalance()
-      refetch()
-    }
-  }, [refetch, refetchNewBalance, status])
-
   const showContractComponent =
     subvariant === 'custom' &&
     hasEnumFlag(status, RouteExecutionStatus.Done) &&
@@ -289,36 +241,54 @@ export const StatusBottomSheetContent: React.FC<
       </CenterContainer>
       {showContractComponent ? (
         contractCompactComponent || contractSecondaryComponent
-      ) : (
-        <CenterContainer>
-          {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-            <Token token={toToken} py={1} disableDescription />
-          ) : null}
-        </CenterContainer>
-      )}
-      {!showContractComponent ? (
-        primaryMessage ? (
-          <Typography
-            sx={{
-              py: 1,
-            }}
-          >
-            {primaryMessage}
-          </Typography>
-        ) : (
-          <MessageSkeleton />
-        )
-      ) : null}
-      {secondaryMessage ? (
+      ) : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? (
         <Typography
           sx={{
             py: 1,
           }}
         >
-          {secondaryMessage}
+          {failedMessage}
         </Typography>
+      ) : hasEnumFlag(status, RouteExecutionStatus.Done) ? (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            marginTop: 2,
+            marginBottom: VcComponent ? 2 : 3,
+          }}
+        >
+          <Card
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              padding: 2,
+            }}
+          >
+            <CardTitle sx={{ padding: 0 }}>
+              {hasEnumFlag(status, RouteExecutionStatus.Refunded)
+                ? t('header.refunded')
+                : t('header.received')}
+            </CardTitle>
+            <Token token={toToken} disableDescription={false} />
+            {primaryMessage && (
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                  fontSize: '12px',
+                  lineHeight: '16px',
+                  fontWeight: 500,
+                }}
+              >
+                {primaryMessage}
+              </Typography>
+            )}
+          </Card>
+          {VcComponent ? <VcComponent route={route} /> : null}
+        </Box>
       ) : null}
-      {VcComponent ? <VcComponent route={route} /> : null}
       <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
         {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
           <Button variant="text" onClick={handleSeeDetails} fullWidth>

package/src/providers/QueryClientProvider.tsx

@@ -0,0 +1,20 @@
+import {
+  QueryClientContext as TanstackQueryClientContext,
+  QueryClientProvider as TanstackQueryClientProvider,
+} from '@tanstack/react-query'
+import { useContext } from 'react'
+import type { PropsWithChildren } from 'react'
+import { queryClient } from '../config/queryClient'
+
+export const QueryClientProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const existingQueryClient = useContext(TanstackQueryClientContext)
+  return existingQueryClient ? (
+    children
+  ) : (
+    <TanstackQueryClientProvider client={queryClient}>
+      {children}
+    </TanstackQueryClientProvider>
+  )
+}

package/src/providers/WalletProvider/SuiBaseProvider.tsx

@@ -13,17 +13,11 @@ export const SuiBaseProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const config = useMemo(() => {
     const sui = chains?.find((chain) => chain.id === ChainId.SUI)
-    if (sui) {
-      return createNetworkConfig({
-        mainnet: { url: sui.metamask?.rpcUrls[0] ?? getFullnodeUrl('mainnet') },
-      })
-    }
+    return createNetworkConfig({
+      mainnet: { url: sui?.metamask?.rpcUrls[0] ?? getFullnodeUrl('mainnet') },
+    })
   }, [chains])
 
-  if (!config?.networkConfig) {
-    return null
-  }
-
   return (
     <SuiClientProvider networks={config.networkConfig} defaultNetwork="mainnet">
       <WalletProvider

package/src/stores/form/FormStore.tsx

@@ -2,7 +2,6 @@ import type { PropsWithChildren } from 'react'
 import { useMemo, useRef } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { FormRef, ToAddress } from '../../types/widget.js'
-import { HiddenUI } from '../../types/widget.js'
 import { FormStoreContext } from './FormStoreContext.js'
 import { FormUpdater } from './FormUpdater.js'
 import { createFormStore, formDefaultValues } from './createFormStore.js'
@@ -14,8 +13,7 @@ const initialiseDefaultValues = (
   defaultValues: Partial<DefaultValues>,
   fromAmount?: number | string,
   toAmount?: number | string,
-  toAddress?: ToAddress,
-  hiddenToAddress?: boolean
+  toAddress?: ToAddress
 ) => ({
   ...formDefaultValues,
   ...defaultValues,
@@ -26,9 +24,7 @@ const initialiseDefaultValues = (
     (typeof toAmount === 'number' ? toAmount?.toPrecision() : toAmount) ||
     formDefaultValues.toAmount,
   // Prevent setting address when the field is hidden
-  toAddress: hiddenToAddress
-    ? formDefaultValues.toAddress
-    : toAddress?.address || formDefaultValues.toAddress,
+  toAddress: toAddress?.address || formDefaultValues.toAddress,
 })
 
 interface FormStoreProviderProps extends PropsWithChildren {
@@ -49,14 +45,11 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
     fromAmount,
     toAmount,
     toAddress,
-    hiddenUI,
     formUpdateKey,
   } = widgetConfig
 
   const storeRef = useRef<FormStoreStore>(null)
 
-  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)
-
   const configHasFromChain = Object.hasOwn(widgetConfig, 'fromChain')
   const configHasFromToken = Object.hasOwn(widgetConfig, 'fromToken')
   const configHasFromAmount = Object.hasOwn(widgetConfig, 'fromAmount')
@@ -93,9 +86,7 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
       ...(configHasToToken ? { toToken } : undefined),
       ...(configHasToAddress
         ? {
-            toAddress: hiddenToAddress
-              ? formDefaultValues.toAddress
-              : toAddress?.address || formDefaultValues.toAddress,
+            toAddress: toAddress?.address || formDefaultValues.toAddress,
           }
         : undefined),
     }),
@@ -104,7 +95,6 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
       toAmount,
       fromChain,
       fromToken,
-      hiddenToAddress,
       toAddress,
       toChain,
       toToken,
@@ -126,8 +116,7 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
         reactiveFormValues,
         fromAmount,
         toAmount,
-        toAddress,
-        hiddenToAddress
+        toAddress
       )
     )
   }

package/src/stores/form/useFormRef.ts

@@ -1,16 +1,13 @@
 import { useImperativeHandle } from 'react'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { formDefaultValues } from '../../stores/form/createFormStore.js'
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
 import type { FormRef } from '../../types/widget.js'
-import { HiddenUI } from '../../types/widget.js'
 import type { FormStoreStore, GenericFormValue } from './types.js'
 
 export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
   const { setSendToWallet } = useSendToWalletActions()
   const { setSelectedBookmark } = useBookmarkActions()
-  const { hiddenUI } = useWidgetConfig()
 
   useImperativeHandle(
     formRef,
@@ -25,10 +22,6 @@ export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
           (typeof value === 'number' ? value?.toPrecision() : value) ||
           formDefaultValues.toAmount,
         toAddress: (value) => {
-          if (hiddenUI?.includes(HiddenUI.ToAddress)) {
-            return formDefaultValues.toAddress
-          }
-
           const isToAddressObj = typeof value !== 'string'
 
           const address =
@@ -68,6 +61,6 @@ export const useFormRef = (formStore: FormStoreStore, formRef?: FormRef) => {
         },
       }
     },
-    [formStore, hiddenUI, setSendToWallet, setSelectedBookmark]
+    [formStore, setSendToWallet, setSelectedBookmark]
   )
 }

package/src/types/widget.ts

@@ -240,6 +240,14 @@ export interface RouteLabelRule {
   toTokenAddress?: string[]
 }
 
+export type ExplorerUrl =
+  | string
+  | {
+      url: string
+      txPath?: string
+      addressPath?: string
+    }
+
 export interface WidgetConfig {
   fromChain?: number
   toChain?: number
@@ -291,8 +299,8 @@ export interface WidgetConfig {
   tokens?: WidgetTokens
   languages?: WidgetLanguages
   languageResources?: LanguageResources
-  explorerUrls?: Record<number, string[]> &
-    Partial<Record<'internal', string[]>>
+  explorerUrls?: Record<number, ExplorerUrl[]> &
+    Partial<Record<'internal', ExplorerUrl[]>>
   poweredBy?: PoweredByType
 
   /**

package/src/utils/queries.ts

@@ -0,0 +1,2 @@
+export const getQueryKey = (key: string, prefix?: string) =>
+  `${prefix || 'li.fi'}-widget-${key}`

package/src/utils/timer.ts

@@ -12,7 +12,7 @@ export const formatTimer = ({
   locale?: string
 }): string => {
   if (typeof (Intl as any).DurationFormat === 'function') {
-    return new (Intl as any).DurationFormat(locale, {
+    const time = new (Intl as any).DurationFormat(locale, {
       style: 'digital',
       hours: '2-digit',
       hoursDisplay: 'auto',
@@ -22,6 +22,13 @@ export const formatTimer = ({
       minutes,
       seconds,
     })
+    // This handles a fixed bug with Webkit, and Safari
+    // https://github.com/WebKit/WebKit/pull/38357
+    // https://developer.apple.com/documentation/safari-release-notes/safari-18_4-release-notes#JavaScript
+    //
+    // Since most users haven't updated their browsers yet, they would have this issue
+    // it should be safe to remove the check after a while.
+    return time.replace(/^:, /, '')
   }
 
   return ''