@openocean.finance/widget 1.0.0

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -0,0 +1,337 @@
+import {
+  Done,
+  ErrorRounded,
+  InfoRounded,
+  WarningRounded,
+} from '@mui/icons-material'
+import { Box, Button, Skeleton, 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 { 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 {
+  type RouteExecution,
+  RouteExecutionStatus,
+} from '../../stores/routes/types.js'
+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'
+
+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,
+}) => {
+  const ref = useRef<BottomSheetBase>(null)
+
+  const onClose = useCallback(() => {
+    ref.current?.close()
+  }, [])
+
+  useEffect(() => {
+    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)
+    const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed)
+    if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) {
+      ref.current?.open()
+    }
+  }, [status])
+
+  return (
+    <BottomSheet ref={ref}>
+      <StatusBottomSheetContent
+        status={status}
+        route={route}
+        onClose={onClose}
+      />
+    </BottomSheet>
+  )
+}
+
+export const StatusBottomSheetContent: React.FC<
+  StatusBottomSheetContentProps
+> = ({ status, route, onClose }) => {
+  const { t } = useTranslation()
+  const { navigateBack, navigate } = useNavigateBack()
+  const { setFieldValue } = useFieldActions()
+  const {
+    subvariant,
+    subvariantOptions,
+    contractSecondaryComponent,
+    contractCompactComponent,
+  } = useWidgetConfig()
+  const { getChainById } = useAvailableChains()
+
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
+
+  const toToken = {
+    ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
+    amount: BigInt(
+      route.steps.at(-1)?.execution?.toAmount ??
+        route.steps.at(-1)?.estimate.toAmount ??
+        route.toAmount
+    ),
+  }
+
+  const { token, refetch, refetchNewBalance } = useTokenBalance(
+    route.toAddress,
+    toToken
+  )
+
+  const cleanFields = () => {
+    setFieldValue('fromAmount', '')
+    setFieldValue('toAmount', '')
+  }
+
+  const handleDone = () => {
+    cleanFields()
+    navigateBack()
+  }
+
+  const handlePartialDone = () => {
+    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 {
+      cleanFields()
+    }
+    navigateBack()
+  }
+
+  const handleClose = () => {
+    cleanFields()
+    onClose()
+  }
+
+  const handleSeeDetails = () => {
+    handleClose()
+
+    const transactionHash = getSourceTxHash(route)
+
+    navigate(navigationRoutes.transactionDetails, {
+      state: {
+        routeId: route.id,
+        transactionHash,
+      },
+      replace: true,
+    })
+  }
+
+  const transactionType =
+    route.fromChainId === route.toChainId ? 'swap' : 'bridge'
+
+  let title: string | undefined
+  let primaryMessage: string | undefined
+  let secondaryMessage: string | undefined
+  let handlePrimaryButton = handleDone
+  switch (status) {
+    case RouteExecutionStatus.Done: {
+      title =
+        subvariant === 'custom'
+          ? t(
+              `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
+    }
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {
+      title = t(`success.title.${transactionType}PartiallySuccessful`)
+      primaryMessage = t('success.message.exchangePartiallySuccessful', {
+        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
+    }
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded: {
+      title = t('success.title.refundIssued')
+      primaryMessage = t('success.message.exchangePartiallySuccessful', {
+        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: {
+      const step = route.steps.find(
+        (step) => step.execution?.status === 'FAILED'
+      )
+      const process = step?.execution?.process.find(
+        (process) => process.status === 'FAILED'
+      )
+      if (!step || !process) {
+        break
+      }
+      const processMessage = getProcessMessage(t, getChainById, step, process)
+      title = processMessage.title
+      primaryMessage = processMessage.message
+      handlePrimaryButton = handleClose
+      break
+    }
+    default:
+      break
+  }
+
+  useEffect(() => {
+    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)
+    if (hasSuccessFlag) {
+      refetchNewBalance()
+      refetch()
+    }
+  }, [refetch, refetchNewBalance, status])
+
+  const showContractComponent =
+    subvariant === 'custom' &&
+    hasEnumFlag(status, RouteExecutionStatus.Done) &&
+    (contractCompactComponent || contractSecondaryComponent)
+
+  return (
+    <Box
+      ref={ref}
+      sx={{
+        p: 3,
+      }}
+    >
+      {!showContractComponent ? (
+        <CenterContainer>
+          <IconCircle status={status} mb={1}>
+            {status === RouteExecutionStatus.Idle ? (
+              <InfoRounded color="primary" />
+            ) : null}
+            {status === RouteExecutionStatus.Done ? (
+              <Done color="success" />
+            ) : null}
+            {hasEnumFlag(status, RouteExecutionStatus.Partial) ||
+            hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (
+              <WarningRounded color="warning" />
+            ) : null}
+            {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (
+              <ErrorRounded color="error" />
+            ) : null}
+          </IconCircle>
+        </CenterContainer>
+      ) : null}
+      <CenterContainer>
+        <Typography
+          sx={{
+            py: 1,
+            fontSize: 18,
+            fontWeight: 700,
+          }}
+        >
+          {title}
+        </Typography>
+      </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 ? (
+        <Typography
+          sx={{
+            py: 1,
+          }}
+        >
+          {secondaryMessage}
+        </Typography>
+      ) : null}
+      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
+        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
+          <Button variant="text" onClick={handleSeeDetails} fullWidth>
+            {t('button.seeDetails')}
+          </Button>
+        ) : null}
+        <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
+          {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
+          {hasEnumFlag(status, RouteExecutionStatus.Done)
+            ? t('button.done')
+            : null}
+          {status === RouteExecutionStatus.Failed
+            ? t('button.seeDetails')
+            : null}
+        </Button>
+      </Box>
+    </Box>
+  )
+}

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -0,0 +1,214 @@
+import type { Route } from '@lifi/sdk'
+import { isGaslessStep } from '@lifi/sdk'
+import { WarningRounded } from '@mui/icons-material'
+import { Box, Button, Typography } from '@mui/material'
+import type { MutableRefObject } from 'react'
+import { forwardRef, useRef } 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 { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'
+import { calculateValueLossPercentage } from './utils.js'
+
+interface TokenValueBottomSheetProps {
+  route: Route
+  onContinue(): void
+  onCancel?(): void
+}
+
+export const TokenValueBottomSheet = forwardRef<
+  BottomSheetBase,
+  TokenValueBottomSheetProps
+>(({ route, onContinue, onCancel }, ref) => {
+  const handleCancel = () => {
+    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    onCancel?.()
+  }
+
+  return (
+    <BottomSheet ref={ref} onClose={onCancel}>
+      <TokenValueBottomSheetContent
+        route={route}
+        onContinue={onContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  )
+})
+
+const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
+  route,
+  onCancel,
+  onContinue,
+}) => {
+  const [fromChainId] = useFieldValues('fromChain')
+  const [toChainId] = useFieldValues('toChain')
+  const isBradge = fromChainId !== toChainId
+
+  const { t } = useTranslation()
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
+  let { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =
+    getAccumulatedFeeCostsBreakdown(route)
+  const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+  const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+  const hasGaslessSupport = route.steps.some(isGaslessStep)
+
+  if (isBradge && route?.data?.prependedOperatingExpenseCost) {
+    const decimals = 10 ** route.fromToken.decimals
+    gasCostUSD =
+      (route.data.prependedOperatingExpenseCost / decimals) *
+      Number(route.fromToken.priceUSD)
+  }
+
+  return (
+    <Box
+      ref={ref}
+      sx={{
+        p: 3,
+      }}
+    >
+      <CenterContainer>
+        <IconCircle status="warning" mb={1}>
+          <WarningRounded color="warning" />
+        </IconCircle>
+        <Typography
+          sx={{
+            py: 1,
+            fontSize: 18,
+            fontWeight: 700,
+          }}
+        >
+          {t('warning.title.highValueLoss')}
+        </Typography>
+      </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,
+          }}
+        >
+          {t('format.currency', { value: route.fromAmountUSD })}
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 0.25,
+        }}
+      >
+        <Typography>{isBradge ? 'Fee' : t('main.fees.network')}</Typography>
+        <FeeBreakdownTooltip
+          gasCosts={gasCosts}
+          relayerSupport={hasGaslessSupport}
+        >
+          <Typography
+            sx={{
+              fontWeight: 600,
+            }}
+          >
+            {hasGaslessSupport
+              ? t('main.fees.free')
+              : t('format.currency', { value: gasCostUSD })}
+          </Typography>
+        </FeeBreakdownTooltip>
+      </Box>
+      {feeCostUSD ? (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            mt: 0.25,
+          }}
+        >
+          <Typography>{t('main.fees.provider')}</Typography>
+          <FeeBreakdownTooltip feeCosts={feeCosts}>
+            <Typography
+              sx={{
+                fontWeight: 600,
+              }}
+            >
+              {t('format.currency', { value: feeCostUSD })}
+            </Typography>
+          </FeeBreakdownTooltip>
+        </Box>
+      ) : null}
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 0.25,
+        }}
+      >
+        <Typography>{t('main.receiving')}</Typography>
+        <Typography
+          sx={{
+            fontWeight: 600,
+          }}
+        >
+          {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,
+          }}
+        >
+          {calculateValueLossPercentage(
+            fromAmountUSD,
+            toAmountUSD,
+            gasCostUSD,
+            feeCostUSD
+          )}
+          %
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          mt: 3,
+        }}
+      >
+        <Button variant="text" onClick={onCancel} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Box
+          sx={{
+            display: 'flex',
+            p: 1,
+          }}
+        />
+        <Button variant="contained" onClick={onContinue} fullWidth>
+          {t('button.continue')}
+        </Button>
+      </Box>
+    </Box>
+  )
+}