@lifi/widget 4.0.0-beta.9 → 4.1.0

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,15 +1,24 @@
 import type { Route } from '@lifi/sdk'
-import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Button, Typography } from '@mui/material'
-import type { RefObject } from 'react'
-import { forwardRef, useRef } from 'react'
+import { Button, Checkbox, FormControlLabel } from '@mui/material'
+import type { JSX, Ref, RefObject } from 'react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js'
+import { IconCircle } from '../../components/IconCircle/IconCircle.js'
 import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'
+import {
+  ButtonRow,
+  CenterContainer,
+  ContentContainer,
+  DetailLabel,
+  DetailRow,
+  DetailValue,
+  WarningMessage,
+  WarningTitle,
+} from './TokenValueBottomSheet.style.js'
 import { calculateValueLossPercentage } from './utils.js'
 
 interface TokenValueBottomSheetProps {
@@ -18,10 +27,14 @@ interface TokenValueBottomSheetProps {
   onCancel?(): void
 }
 
-export const TokenValueBottomSheet = forwardRef<
-  BottomSheetBase,
-  TokenValueBottomSheetProps
->(({ route, onContinue, onCancel }, ref) => {
+export const TokenValueBottomSheet = ({
+  route,
+  onContinue,
+  onCancel,
+  ref,
+}: TokenValueBottomSheetProps & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
   const handleCancel = () => {
     ;(ref as RefObject<BottomSheetBase>).current?.close()
     onCancel?.()
@@ -36,13 +49,14 @@ export const TokenValueBottomSheet = forwardRef<
       />
     </BottomSheet>
   )
-})
+}
 
 const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   route,
   onCancel,
   onContinue,
 }) => {
+  const [accepted, setAccepted] = useState(false)
   const { t } = useTranslation()
   const ref = useRef<HTMLElement>(null)
   useSetContentHeight(ref)
@@ -50,119 +64,49 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
     getAccumulatedFeeCostsBreakdown(route)
   const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
   const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+
   return (
-    <Box
-      ref={ref}
-      sx={{
-        p: 3,
-      }}
-    >
+    <ContentContainer ref={ref}>
       <CenterContainer>
-        <IconCircle status="warning" mb={1}>
-          <WarningRounded color="warning" />
-        </IconCircle>
-        <Typography
-          sx={{
-            py: 1,
-            fontSize: 18,
-            fontWeight: 700,
-          }}
-        >
-          {t('warning.title.highValueLoss')}
-        </Typography>
+        <IconCircle status="warning" sx={{ mb: 2.5 }} />
+        <WarningTitle>{t('warning.title.highValueLoss')}</WarningTitle>
       </CenterContainer>
-      <Typography
-        sx={{
-          py: 1,
-        }}
-      >
-        {t('warning.message.highValueLoss')}
-      </Typography>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          mt: 1,
-        }}
-      >
-        <Typography>{t('main.sending')}</Typography>
-        <Typography
-          sx={{
-            fontWeight: 600,
-          }}
-        >
+      <WarningMessage>{t('warning.message.highValueLoss')}</WarningMessage>
+      <DetailRow>
+        <DetailLabel>{t('main.sending')}</DetailLabel>
+        <DetailValue>
           {t('format.currency', { value: route.fromAmountUSD })}
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          mt: 0.25,
-        }}
-      >
-        <Typography>{t('main.fees.network')}</Typography>
+        </DetailValue>
+      </DetailRow>
+      <DetailRow>
+        <DetailLabel>{t('main.fees.network')}</DetailLabel>
         <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>
-          <Typography
-            sx={{
-              fontWeight: 600,
-            }}
-          >
+          <DetailValue>
             {!gasCostUSD
               ? t('main.fees.free')
               : t('format.currency', { value: gasCostUSD })}
-          </Typography>
+          </DetailValue>
         </FeeBreakdownTooltip>
-      </Box>
+      </DetailRow>
       {feeCostUSD ? (
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            mt: 0.25,
-          }}
-        >
-          <Typography>{t('main.fees.provider')}</Typography>
+        <DetailRow>
+          <DetailLabel>{t('main.fees.provider')}</DetailLabel>
           <FeeBreakdownTooltip feeCosts={feeCosts}>
-            <Typography
-              sx={{
-                fontWeight: 600,
-              }}
-            >
+            <DetailValue>
               {t('format.currency', { value: feeCostUSD })}
-            </Typography>
+            </DetailValue>
           </FeeBreakdownTooltip>
-        </Box>
+        </DetailRow>
       ) : null}
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          mt: 0.25,
-        }}
-      >
-        <Typography>{t('main.receiving')}</Typography>
-        <Typography
-          sx={{
-            fontWeight: 600,
-          }}
-        >
+      <DetailRow>
+        <DetailLabel>{t('main.receiving')}</DetailLabel>
+        <DetailValue>
           {t('format.currency', { value: route.toAmountUSD })}
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          mt: 0.25,
-        }}
-      >
-        <Typography>{t('main.valueLoss')}</Typography>
-        <Typography
-          sx={{
-            fontWeight: 600,
-          }}
-        >
+        </DetailValue>
+      </DetailRow>
+      <DetailRow>
+        <DetailLabel>{t('main.valueLoss')}</DetailLabel>
+        <DetailValue>
           {calculateValueLossPercentage(
             fromAmountUSD,
             toAmountUSD,
@@ -170,27 +114,31 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
             feeCostUSD
           )}
           %
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          mt: 3,
-        }}
-      >
+        </DetailValue>
+      </DetailRow>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={accepted}
+            onChange={(_, checked) => setAccepted(checked)}
+          />
+        }
+        label={t('warning.checkbox.highValueLoss')}
+        sx={{ mt: 1 }}
+      />
+      <ButtonRow>
         <Button variant="text" onClick={onCancel} fullWidth>
           {t('button.cancel')}
         </Button>
-        <Box
-          sx={{
-            display: 'flex',
-            p: 1,
-          }}
-        />
-        <Button variant="contained" onClick={onContinue} fullWidth>
+        <Button
+          variant="contained"
+          onClick={onContinue}
+          disabled={!accepted}
+          fullWidth
+        >
           {t('button.continue')}
         </Button>
-      </Box>
-    </Box>
+      </ButtonRow>
+    </ContentContainer>
   )
 }

package/src/pages/TransactionPage/TransactionContent.tsx

@@ -0,0 +1,42 @@
+import type { RouteExtended } from '@lifi/sdk'
+import type React from 'react'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { TransactionExecutionContent } from './TransactionExecutionContent.js'
+import { TransactionReview } from './TransactionReview.js'
+
+interface TransactionContentProps {
+  route: RouteExtended
+  status: RouteExecutionStatus
+  executeRoute: () => void
+  restartRoute: () => void
+  deleteRoute: () => void
+  routeRefreshing: boolean
+}
+
+export const TransactionContent: React.FC<TransactionContentProps> = ({
+  route,
+  status,
+  executeRoute,
+  restartRoute,
+  deleteRoute,
+  routeRefreshing,
+}) => {
+  if (status === RouteExecutionStatus.Idle) {
+    return (
+      <TransactionReview
+        route={route}
+        executeRoute={executeRoute}
+        routeRefreshing={routeRefreshing}
+      />
+    )
+  }
+
+  return (
+    <TransactionExecutionContent
+      route={route}
+      status={status}
+      restartRoute={restartRoute}
+      deleteRoute={deleteRoute}
+    />
+  )
+}

package/src/pages/TransactionPage/TransactionDoneButtons.tsx

@@ -0,0 +1,70 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Button } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { hasEnumFlag } from '../../utils/enum.js'
+import { formatTokenAmount } from '../../utils/format.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { getExecutionToToken } from '../../utils/token.js'
+
+interface TransactionDoneButtonsProps {
+  route: RouteExtended
+  status: RouteExecutionStatus
+}
+
+export const TransactionDoneButtons: React.FC<TransactionDoneButtonsProps> = ({
+  route,
+  status,
+}) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const clearAmountFields = useClearAmountFields()
+
+  if (!hasEnumFlag(status, RouteExecutionStatus.Done)) {
+    return null
+  }
+
+  const handlePartialDone = () => {
+    const toToken = getExecutionToToken(route)
+    if (
+      toToken.chainId !== route.toToken.chainId &&
+      toToken.address !== route.toToken.address
+    ) {
+      setFieldValue(
+        'fromAmount',
+        formatTokenAmount(toToken.amount, toToken.decimals),
+        { isTouched: true }
+      )
+      setFieldValue('fromChain', toToken.chainId, { isTouched: true })
+      setFieldValue('fromToken', toToken.address, { isTouched: true })
+      setFieldValue('toChain', route.toToken.chainId, {
+        isTouched: true,
+      })
+      setFieldValue('toToken', route.toToken.address, {
+        isTouched: true,
+      })
+    } else {
+      clearAmountFields()
+    }
+  }
+
+  const handleClick = () => {
+    if (hasEnumFlag(status, RouteExecutionStatus.Partial)) {
+      handlePartialDone()
+    } else {
+      clearAmountFields()
+    }
+    navigate({ to: navigationRoutes.home, replace: true })
+  }
+
+  return (
+    <Button variant="contained" fullWidth onClick={handleClick}>
+      {t('button.done')}
+    </Button>
+  )
+}

package/src/pages/TransactionPage/TransactionExecutionContent.tsx

@@ -0,0 +1,95 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box } from '@mui/material'
+import { domMax, LazyMotion, MotionConfig } from 'motion/react'
+import type React from 'react'
+import type { JSX } from 'react'
+import { Card } from '../../components/Card/Card.js'
+import { ExecutionStatusCard } from '../../components/ExecutionStatusCard/ExecutionStatusCard.js'
+import { StatusIcon } from '../../components/ExecutionStatusCard/StatusIcon.js'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
+import { RouteTokens } from '../../components/RouteCard/RouteTokens.js'
+import { useExecutionRows } from '../../components/StepActions/executionRows.js'
+import { useRouteExecutionMessage } from '../../hooks/useRouteExecutionMessage.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { hasEnumFlag } from '../../utils/enum.js'
+import { ExecutionDoneCard } from './ExecutionDoneCard.js'
+import { TransactionDoneButtons } from './TransactionDoneButtons.js'
+import { TransactionFailedButtons } from './TransactionFailedButtons.js'
+
+export interface TransactionExecutionContentProps {
+  route: RouteExtended
+  status: RouteExecutionStatus
+  restartRoute: () => void
+  deleteRoute: () => void
+}
+
+/**
+ * Execution-phase layout for the Transaction page.
+ * Renders the {@link ExecutionStatusCard}, warning messages,
+ * and terminal action buttons.
+ */
+export const TransactionExecutionContent: React.FC<
+  TransactionExecutionContentProps
+> = ({ route, status, restartRoute, deleteRoute }): JSX.Element => {
+  const { title, message } = useRouteExecutionMessage(route, status)
+  const {
+    mode,
+    contractCompactComponent,
+    contractSecondaryComponent,
+    defaultUI,
+  } = useWidgetConfig()
+
+  const isDone = hasEnumFlag(status, RouteExecutionStatus.Done)
+  const rows = useExecutionRows(route, isDone ? route.toAddress : undefined)
+
+  const showContract =
+    mode === 'custom' &&
+    isDone &&
+    !!(contractCompactComponent || contractSecondaryComponent)
+
+  const iconSlot = showContract ? (
+    contractCompactComponent || contractSecondaryComponent
+  ) : (
+    <StatusIcon route={route} status={status} />
+  )
+
+  const footerSlot = isDone ? (
+    <ExecutionDoneCard route={route} status={status} />
+  ) : (
+    <Card type="default" indented>
+      <RouteTokens
+        route={route}
+        defaultExpanded={defaultUI?.transactionDetailsExpanded}
+      />
+    </Card>
+  )
+
+  return (
+    <LazyMotion features={domMax} strict>
+      <MotionConfig reducedMotion="user">
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <ExecutionStatusCard
+            title={title}
+            description={message}
+            rows={rows}
+            iconSlot={iconSlot}
+            footerSlot={footerSlot}
+          />
+          {status === RouteExecutionStatus.Failed ? (
+            <>
+              <WarningMessages route={route} allowInteraction />
+              <TransactionFailedButtons
+                route={route}
+                restartRoute={restartRoute}
+                deleteRoute={deleteRoute}
+              />
+            </>
+          ) : isDone ? (
+            <TransactionDoneButtons route={route} status={status} />
+          ) : null}
+        </Box>
+      </MotionConfig>
+    </LazyMotion>
+  )
+}

package/src/pages/TransactionPage/TransactionFailedButtons.tsx

@@ -0,0 +1,105 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box, Button } from '@mui/material'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { useAddressActivity } from '../../hooks/useAddressActivity.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
+import { StartTransactionButton } from './StartTransactionButton.js'
+import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
+import { getTokenValueLossThreshold } from './utils.js'
+
+interface TransactionFailedButtonsProps {
+  route: RouteExtended
+  restartRoute: () => void
+  deleteRoute: () => void
+}
+
+export const TransactionFailedButtons: React.FC<
+  TransactionFailedButtonsProps
+> = ({ route, restartRoute, deleteRoute }) => {
+  const { t } = useTranslation()
+  const navigateBack = useNavigateBack()
+  const { mode, hiddenUI } = useWidgetConfig()
+
+  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
+  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
+
+  const {
+    toAddress,
+    hasActivity,
+    isLoading: isLoadingAddressActivity,
+    isFetched: isActivityAddressFetched,
+  } = useAddressActivity(route.toChainId)
+
+  const handleRemoveRoute = () => {
+    navigateBack()
+    deleteRoute()
+  }
+
+  const handleRetryClick = () => {
+    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 {
+      restartRoute()
+    }
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', gap: 1.5 }}>
+        <Box sx={{ flex: 1 }}>
+          <Button onClick={handleRemoveRoute} fullWidth>
+            {t('button.delete')}
+          </Button>
+        </Box>
+        <Box sx={{ flex: 1 }}>
+          <StartTransactionButton
+            text={t('button.tryAgain')}
+            onClick={handleRetryClick}
+            route={route}
+            loading={isLoadingAddressActivity}
+          />
+        </Box>
+      </Box>
+      {mode !== 'custom' ? (
+        <TokenValueBottomSheet
+          route={route}
+          ref={tokenValueBottomSheetRef}
+          onContinue={restartRoute}
+        />
+      ) : null}
+      {!hiddenUI?.lowAddressActivityConfirmation ? (
+        <ConfirmToAddressSheet
+          ref={confirmToAddressSheetRef}
+          onContinue={restartRoute}
+          toAddress={toAddress!}
+          toChainId={route.toChainId!}
+        />
+      ) : null}
+    </Box>
+  )
+}