@lifi/widget 3.21.4-alpha.0 → 3.22.0

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 ''