@lifi/widget 0.0.0-preview-6cc63bac

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -0,0 +1,111 @@
+import type { ExchangeRateUpdateParams } from '@lifi/sdk'
+import { useLocation } from '@tanstack/react-router'
+import { type JSX, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { usePacedRouteExecution } from '../../hooks/usePacedRouteExecution.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { hasEnumFlag } from '../../utils/enum.js'
+import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'
+import { RouteTracker } from './RouteTracker.js'
+import { TransactionContent } from './TransactionContent.js'
+
+export const TransactionPage = (): JSX.Element | null => {
+  const { t } = useTranslation()
+  const { mode, modeOptions, contractSecondaryComponent } = useWidgetConfig()
+  const { search }: any = useLocation()
+  const stateRouteId = search?.routeId
+  const [routeId, setRouteId] = useState<string>(stateRouteId)
+  const [routeRefreshing, setRouteRefreshing] = useState(false)
+  const clearAmountFields = useClearAmountFields()
+
+  const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)
+
+  const onAcceptExchangeRateUpdate = (
+    resolver: (value: boolean) => void,
+    data: ExchangeRateUpdateParams
+  ) => {
+    exchangeRateBottomSheetRef.current?.open(resolver, data)
+  }
+
+  const { route, status, executeRoute, restartRoute, deleteRoute } =
+    usePacedRouteExecution({
+      routeId: routeId,
+      onAcceptExchangeRateUpdate,
+    })
+
+  const statusRef = useRef(status)
+  statusRef.current = status
+
+  const getHeaderTitle = () => {
+    if (mode === 'custom') {
+      return t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)
+    }
+    if (route) {
+      const transactionType =
+        route.fromChainId === route.toChainId ? 'swap' : 'bridge'
+      return status === RouteExecutionStatus.Idle
+        ? t(`button.${transactionType}Review`)
+        : t(`header.${transactionType}`)
+    }
+
+    return t('header.exchange')
+  }
+
+  const headerAction = useMemo(
+    () =>
+      status === RouteExecutionStatus.Idle ? (
+        <RouteTracker
+          observableRouteId={stateRouteId}
+          onChange={setRouteId}
+          onFetching={setRouteRefreshing}
+        />
+      ) : undefined,
+    [stateRouteId, status]
+  )
+
+  useHeader(getHeaderTitle(), headerAction)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: cleanup only on unmount
+  useEffect(() => {
+    return () => {
+      if (
+        statusRef.current &&
+        statusRef.current !== RouteExecutionStatus.Idle &&
+        !hasEnumFlag(statusRef.current, RouteExecutionStatus.Done)
+      ) {
+        clearAmountFields()
+      }
+    }
+  }, [])
+
+  if (!route || !status) {
+    return null
+  }
+
+  return (
+    <PageContainer
+      topGutters
+      bottomGutters
+      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+    >
+      <TransactionContent
+        route={route}
+        status={status}
+        executeRoute={executeRoute}
+        restartRoute={restartRoute}
+        deleteRoute={deleteRoute}
+        routeRefreshing={routeRefreshing}
+      />
+      {mode === 'custom' && contractSecondaryComponent ? (
+        <ContractComponent>{contractSecondaryComponent}</ContractComponent>
+      ) : null}
+      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
+    </PageContainer>
+  )
+}

package/src/pages/TransactionPage/TransactionReview.tsx

@@ -0,0 +1,163 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { Card } from '../../components/Card/Card.js'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
+import { RouteTokens } from '../../components/RouteCard/RouteTokens.js'
+import { useAddressActivity } from '../../hooks/useAddressActivity.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
+import { WidgetEvent } from '../../types/events.js'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
+import { StartTransactionButton } from './StartTransactionButton.js'
+import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
+import {
+  calculateValueLossPercentage,
+  getTokenValueLossThreshold,
+} from './utils.js'
+
+interface TransactionReviewProps {
+  route: RouteExtended
+  executeRoute: () => void
+  routeRefreshing: boolean
+}
+
+export const TransactionReview: React.FC<TransactionReviewProps> = ({
+  route,
+  executeRoute,
+  routeRefreshing,
+}) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const emitter = useWidgetEvents()
+  const setBackAction = useHeaderStore((state) => state.setBackAction)
+  const { mode, modeOptions, hiddenUI, defaultUI } = useWidgetConfig()
+
+  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
+  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
+
+  const {
+    toAddress,
+    hasActivity,
+    isLoading: isLoadingAddressActivity,
+    isFetched: isActivityAddressFetched,
+  } = useAddressActivity(route.toChainId)
+
+  const handleExecuteRoute = () => {
+    if (tokenValueBottomSheetRef.current?.isOpen()) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+      const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+      emitter.emit(WidgetEvent.RouteHighValueLoss, {
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+        valueLoss: calculateValueLossPercentage(
+          fromAmountUSD,
+          toAmountUSD,
+          gasCostUSD,
+          feeCostUSD
+        ),
+      })
+    }
+    tokenValueBottomSheetRef.current?.close()
+    executeRoute()
+    setFieldValue('fromAmount', '')
+    if (mode === 'custom') {
+      setFieldValue('fromToken', '')
+      setFieldValue('toToken', '')
+    }
+    setBackAction(() => {
+      navigate({ to: navigationRoutes.home, replace: true })
+    })
+  }
+
+  const handleStartClick = () => {
+    if (
+      toAddress &&
+      !hasActivity &&
+      !isLoadingAddressActivity &&
+      isActivityAddressFetched &&
+      !hiddenUI?.lowAddressActivityConfirmation
+    ) {
+      confirmToAddressSheetRef.current?.open()
+      return
+    }
+
+    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+    const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
+      fromAmountUSD,
+      toAmountUSD,
+      gasCostUSD,
+      feeCostUSD
+    )
+    if (tokenValueLossThresholdExceeded && mode !== 'custom') {
+      tokenValueBottomSheetRef.current?.open()
+    } else {
+      handleExecuteRoute()
+    }
+  }
+
+  const getButtonText = (): string => {
+    switch (mode) {
+      case 'custom':
+        return modeOptions?.custom?.type === 'deposit'
+          ? t('button.deposit')
+          : t('button.buy')
+      case 'refuel':
+        return t('button.startBridging')
+      default: {
+        const transactionType =
+          route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging'
+        return t(`button.start${transactionType}`)
+      }
+    }
+  }
+
+  return (
+    <>
+      <Card type="default" indented>
+        <RouteTokens
+          route={route}
+          showEssentials
+          defaultExpanded={defaultUI?.transactionDetailsExpanded}
+        />
+      </Card>
+      <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />
+      <Box sx={{ flex: 1 }}>
+        <StartTransactionButton
+          text={getButtonText()}
+          onClick={handleStartClick}
+          route={route}
+          loading={routeRefreshing || isLoadingAddressActivity}
+        />
+      </Box>
+      {mode !== 'custom' ? (
+        <TokenValueBottomSheet
+          route={route}
+          ref={tokenValueBottomSheetRef}
+          onContinue={handleExecuteRoute}
+        />
+      ) : null}
+      {!hiddenUI?.lowAddressActivityConfirmation ? (
+        <ConfirmToAddressSheet
+          ref={confirmToAddressSheetRef}
+          onContinue={handleExecuteRoute}
+          toAddress={toAddress!}
+          toChainId={route.toChainId!}
+        />
+      ) : null}
+    </>
+  )
+}

package/src/pages/TransactionPage/types.ts

@@ -0,0 +1,7 @@
+import type { Route } from '@lifi/sdk'
+import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton/types.js'
+
+export interface StartTransactionButtonProps
+  extends BaseTransactionButtonProps {
+  route?: Route
+}

package/src/pages/TransactionPage/utils.ts

@@ -0,0 +1,25 @@
+export const calculateValueLossPercentage = (
+  fromAmountUSD: number,
+  toAmountUSD: number,
+  gasCostUSD: number,
+  feeCostUSD: number
+): number => {
+  return Number.parseFloat(
+    (
+      (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *
+      100
+    ).toFixed(2)
+  )
+}
+
+export const getTokenValueLossThreshold = (
+  fromAmountUSD: number,
+  toAmountUSD: number,
+  gasCostUSD: number,
+  feeCostUSD: number
+): boolean => {
+  if (!fromAmountUSD || !toAmountUSD) {
+    return false
+  }
+  return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < 0.9
+}

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -0,0 +1,133 @@
+import { createInstance, type i18n } from 'i18next'
+import { useEffect, useMemo, useRef } from 'react'
+import { I18nextProvider } from 'react-i18next'
+import { useLanguages } from '../../hooks/useLanguages.js'
+import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'
+import { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'
+import { percentFormatter } from '../../utils/percentFormatter.js'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { allLanguages } from './constants.js'
+import { enResource } from './enResource.js'
+import { mergeWithLanguageResources } from './i18n.js'
+import type { LanguageKey, LanguageResource, PartialResource } from './types.js'
+
+export const I18nProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const { languages, languageResources } = useWidgetConfig()
+  const { language, languageCache } = useSettings(['language', 'languageCache'])
+  const i18nInstanceRef = useRef<i18n | null>(null)
+
+  const i18nInstance = useMemo(() => {
+    if (i18nInstanceRef.current) {
+      // Update i18n instance with language and language cache updates
+      if (language && languageCache && language !== 'en') {
+        i18nInstanceRef.current.addResourceBundle(
+          language,
+          'translation',
+          languageCache,
+          true,
+          true
+        )
+      }
+      return i18nInstanceRef.current
+    }
+
+    // Custom language resources (of non-default languages) are added statically.
+    // If custom language resources extend existing languages, they are merged with dynamically loaded resources.
+    const customLanguageKeys = languageResources
+      ? Object.keys(languageResources).filter(
+          (key: string) => !allLanguages.includes(key as LanguageKey)
+        )
+      : []
+    const initialLanguage = language || languages?.default
+    const i18n = createInstance({
+      lng: initialLanguage,
+      fallbackLng: 'en',
+      lowerCaseLng: true,
+      interpolation: { escapeValue: false },
+      resources: {
+        en: {
+          translation: mergeWithLanguageResources(
+            enResource,
+            languageResources?.en
+          ),
+        },
+        ...(initialLanguage &&
+          initialLanguage !== 'en' &&
+          languageCache && {
+            [initialLanguage]: {
+              translation: languageCache,
+            },
+          }),
+        // Add non-existing custom language resources
+        ...customLanguageKeys.reduce(
+          (acc, key) => {
+            const customResource = languageResources?.[key as LanguageKey]
+            if (customResource) {
+              acc[key] = {
+                translation: customResource,
+              }
+            }
+            return acc
+          },
+          {} as Record<
+            string,
+            { translation: PartialResource<LanguageResource> }
+          >
+        ),
+      },
+      detection: {
+        caches: [],
+      },
+      returnEmptyString: false,
+    })
+
+    i18n.init()
+
+    i18n.services.formatter?.addCached('numberExt', compactNumberFormatter)
+    i18n.services.formatter?.addCached('currencyExt', currencyExtendedFormatter)
+    i18n.services.formatter?.addCached('percent', percentFormatter)
+    i18nInstanceRef.current = i18n
+    return i18n
+  }, [language, languageResources, languages?.default, languageCache])
+
+  return (
+    <I18nextProvider i18n={i18nInstance}>
+      {children}
+      <DefaultLanguageHandler />
+    </I18nextProvider>
+  )
+}
+
+// Sync language settings internally when config.languages.default changes externally
+const DefaultLanguageHandler: React.FC = () => {
+  const { languages } = useWidgetConfig()
+  const [lastDefaultLanguage, setValue] = useSettingsStore((state) => [
+    state.lastDefaultLanguage,
+    state.setValue,
+  ])
+  const { setLanguageWithCode: setLanguage } = useLanguages()
+
+  useEffect(() => {
+    const currentDefaultLanguage = languages?.default
+
+    const defaultLanguageChanged =
+      currentDefaultLanguage && currentDefaultLanguage !== lastDefaultLanguage
+
+    if (!defaultLanguageChanged) {
+      return
+    }
+
+    const updateLanguage = async () => {
+      await setLanguage(currentDefaultLanguage)
+      setValue('lastDefaultLanguage', currentDefaultLanguage)
+    }
+
+    updateLanguage()
+  }, [languages?.default, setValue, lastDefaultLanguage, setLanguage])
+
+  return null
+}

package/src/providers/I18nProvider/constants.ts

@@ -0,0 +1,41 @@
+import type { LanguageKey } from './types.js'
+
+export const allLanguages: LanguageKey[] = [
+  'en',
+  'es',
+  'fr',
+  'de',
+  'it',
+  'pt',
+  'ja',
+  'ko',
+  'zh',
+  'hi',
+  'bn',
+  'th',
+  'vi',
+  'tr',
+  'uk',
+  'id',
+  'pl',
+]
+
+export const languageNames: Record<LanguageKey, string> = {
+  en: 'English',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  it: 'Italiano',
+  pt: 'Português',
+  ja: '日本語',
+  ko: '한국어',
+  zh: '中文',
+  hi: 'हिन्दी',
+  bn: 'বাংলা',
+  th: 'ไทย',
+  vi: 'Tiếng Việt',
+  tr: 'Türkçe',
+  uk: 'Українська',
+  id: 'Bahasa Indonesia',
+  pl: 'Polski',
+}

package/src/providers/I18nProvider/enResource.ts

@@ -0,0 +1,4 @@
+import en from '../../i18n/en.json' with { type: 'json' }
+
+// Used as a fallback language resource
+export { en as enResource }

package/src/providers/I18nProvider/i18n.ts

@@ -0,0 +1,26 @@
+import { deepMerge } from '../../utils/deepMerge.js'
+import type { LanguageKey, LanguageResource, PartialResource } from './types.js'
+
+// Dynamically import the JSON file for the specified language
+export async function loadLocale(
+  lng: LanguageKey,
+  customLanguageResource?: PartialResource<LanguageResource>
+): Promise<LanguageResource> {
+  let languageResource: LanguageResource
+  try {
+    const languageResourceModule = await import(`../../i18n/${lng}.json`)
+    languageResource = languageResourceModule.default as LanguageResource
+  } catch {
+    languageResource = {} as LanguageResource
+  }
+  return mergeWithLanguageResources(languageResource, customLanguageResource)
+}
+
+export function mergeWithLanguageResources(
+  languageResource: LanguageResource,
+  customLanguageResource?: PartialResource<LanguageResource>
+): LanguageResource {
+  return customLanguageResource
+    ? deepMerge(languageResource, customLanguageResource)
+    : languageResource
+}

package/src/providers/I18nProvider/types.ts

@@ -0,0 +1,36 @@
+import type { enResource } from './enResource.js'
+
+export type PartialResource<T> = T extends object
+  ? {
+      [P in keyof T]?: PartialResource<T[P]>
+    }
+  : T
+
+export type LanguageKey =
+  | 'en'
+  | 'es'
+  | 'fr'
+  | 'de'
+  | 'it'
+  | 'pt'
+  | 'ja'
+  | 'ko'
+  | 'zh'
+  | 'hi'
+  | 'bn'
+  | 'th'
+  | 'vi'
+  | 'tr'
+  | 'uk'
+  | 'id'
+  | 'pl'
+
+export type LanguageResource = typeof enResource
+
+export type LanguageResources =
+  | {
+      [K in LanguageKey]?: PartialResource<LanguageResource>
+    }
+  | {
+      [language: string]: PartialResource<LanguageResource>
+    }

package/src/providers/QueryClientProvider.tsx

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

package/src/providers/SDKClientProvider.tsx

@@ -0,0 +1,59 @@
+import { createClient, type SDKClient } from '@lifi/sdk'
+import {
+  createContext,
+  type JSX,
+  type PropsWithChildren,
+  useContext,
+  useMemo,
+} from 'react'
+import { version } from '../config/version.js'
+import { useWidgetConfig } from './WidgetProvider/WidgetProvider.js'
+
+const SDKClientContext = createContext<SDKClient>({} as SDKClient)
+
+export const useSDKClient = (): SDKClient => useContext(SDKClientContext)
+
+export const SDKClientProvider = ({
+  children,
+}: PropsWithChildren): JSX.Element => {
+  const {
+    sdkConfig,
+    apiKey,
+    integrator,
+    feeConfig,
+    referrer,
+    routePriority,
+    slippage,
+  } = useWidgetConfig()
+
+  const client: SDKClient = useMemo(() => {
+    return createClient({
+      ...sdkConfig,
+      apiKey,
+      integrator: integrator ?? window?.location.hostname,
+      routeOptions: {
+        fee: feeConfig?.fee,
+        referrer,
+        order: routePriority,
+        slippage,
+        ...sdkConfig?.routeOptions,
+      },
+      disableVersionCheck: true,
+      widgetVersion: version,
+    })
+  }, [
+    sdkConfig,
+    apiKey,
+    integrator,
+    feeConfig,
+    referrer,
+    routePriority,
+    slippage,
+  ])
+
+  return (
+    <SDKClientContext.Provider value={client}>
+      {children}
+    </SDKClientContext.Provider>
+  )
+}

package/src/providers/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,35 @@
+import {
+  ThemeProvider as MuiThemeProvider,
+  useColorScheme,
+} from '@mui/material'
+import { useEffect, useMemo } from 'react'
+import { createTheme } from '../../themes/createTheme.js'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+
+export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig()
+  const { setMode } = useColorScheme()
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: setMode is stable
+  useEffect(() => {
+    if (colorSchemeMode) {
+      setMode(colorSchemeMode)
+    }
+  }, [colorSchemeMode])
+
+  const theme = useMemo(() => createTheme(themeConfig), [themeConfig])
+
+  return (
+    <MuiThemeProvider
+      theme={theme}
+      defaultMode={colorSchemeMode ?? 'system'}
+      modeStorageKey="li.fi-widget-mode"
+      colorSchemeStorageKey="li.fi-widget-color-scheme"
+      disableTransitionOnChange
+    >
+      {children}
+    </MuiThemeProvider>
+  )
+}