@openocean.finance/widget 1.0.0

package/src/components/StepActions/StepActions.style.tsx

@@ -0,0 +1,79 @@
+import {
+  Box,
+  StepConnector as MuiStepConnector,
+  StepLabel as MuiStepLabel,
+  Typography,
+  alpha,
+  stepConnectorClasses,
+  stepLabelClasses,
+  styled,
+} from '@mui/material'
+import { AvatarMasked } from '../Avatar/Avatar.style.js'
+
+export const StepConnector = styled(MuiStepConnector, {
+  shouldForwardProp: (prop) =>
+    !['active', 'completed', 'error'].includes(prop as string),
+})(({ theme }) => ({
+  marginLeft: theme.spacing(2.375),
+  [`.${stepConnectorClasses.line}`]: {
+    minHeight: 8,
+    borderLeftWidth: 2,
+    borderColor: alpha(theme.palette.common.white, 0.16),
+    ...theme.applyStyles('light', {
+      borderColor: alpha(theme.palette.common.black, 0.12),
+    }),
+  },
+}))
+
+export const StepLabel = styled(MuiStepLabel, {
+  shouldForwardProp: (prop) =>
+    !['active', 'completed', 'error', 'disabled'].includes(prop as string),
+})(({ theme }) => ({
+  padding: 0,
+  alignItems: 'center',
+  [`.${stepLabelClasses.iconContainer}`]: {
+    paddingLeft: theme.spacing(1.25),
+    paddingRight: theme.spacing(3.25),
+  },
+  [`.${stepLabelClasses.labelContainer}`]: {
+    minHeight: 24,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  [`&.${stepLabelClasses.disabled}`]: {
+    cursor: 'inherit',
+  },
+}))
+
+export const StepLabelTypography = styled(Typography)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1.325,
+  color: theme.palette.text.secondary,
+  padding: theme.spacing(0.5, 0),
+}))
+
+export const StepContent = styled(Box, {
+  shouldForwardProp: (prop) => !['last'].includes(prop as string),
+})<{ last: boolean }>(({ theme }) => ({
+  borderLeft: `2px solid ${alpha(theme.palette.common.white, 0.16)}`,
+  margin: theme.spacing(0, 0, 0, 2.375),
+  paddingLeft: theme.spacing(4.375),
+  variants: [
+    {
+      props: ({ last }) => last,
+      style: {
+        borderLeft: 'none',
+        paddingLeft: theme.spacing(4.625),
+      },
+    },
+  ],
+  ...theme.applyStyles('light', {
+    borderLeft: `2px solid ${alpha(theme.palette.common.black, 0.12)}`,
+  }),
+}))
+
+export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  backgroundColor: 'transparent',
+}))

package/src/components/StepActions/StepActions.tsx

@@ -0,0 +1,375 @@
+import type { LiFiStep, StepExtended } from '@lifi/sdk'
+import { isGaslessStep } from '@lifi/sdk'
+import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material'
+import type { StepIconProps } from '@mui/material'
+import {
+  Badge,
+  Box,
+  Collapse,
+  Step as MuiStep,
+  Stepper,
+  Typography,
+} from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { OOToolLogo } from '../../icons/lifi.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import {
+  StepAvatar,
+  StepConnector,
+  StepContent,
+  StepLabel,
+  StepLabelTypography,
+} from './StepActions.style.js'
+import type {
+  IncludedStepsProps,
+  StepActionsProps,
+  StepDetailsLabelProps,
+} from './types.js'
+
+export const StepActions: React.FC<StepActionsProps> = ({
+  step,
+  dense,
+  ...other
+}) => {
+  const { t } = useTranslation()
+  const { subvariant } = useWidgetConfig()
+  const [cardExpanded, setCardExpanded] = useState(false)
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation()
+    setCardExpanded((expanded) => !expanded)
+  }
+
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    subvariant === 'custom'
+      ? step.includedSteps.find(
+          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'
+        )?.toolDetails || step.toolDetails
+      : step.toolDetails
+
+  return (
+    <Box {...other}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <Badge
+          overlap="circular"
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+          badgeContent={<SmallAvatar src={OOToolLogo} />}
+        >
+          <StepAvatar
+            variant="circular"
+            src={toolDetails.logoURI ?? OOToolLogo}
+            alt={toolDetails.name}
+          >
+            {toolDetails.name[0]}
+          </StepAvatar>
+        </Badge>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: 18,
+              fontWeight: 600,
+              lineHeight: 1.3334,
+              ml: 2,
+            }}
+          >
+            {toolDetails.name?.includes('OpenOcean')
+              ? toolDetails.name
+              : t('main.stepDetails', {
+                  tool: toolDetails.name,
+                })}
+          </Typography>
+          {/* <StepFees ml={2} step={step} /> */}
+        </Box>
+        {dense ? (
+          <CardIconButton onClick={handleExpand} size="small">
+            {cardExpanded ? (
+              <ExpandLess fontSize="inherit" />
+            ) : (
+              <ExpandMore fontSize="inherit" />
+            )}
+          </CardIconButton>
+        ) : null}
+      </Box>
+      {dense ? (
+        <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
+          <IncludedSteps step={step} />
+        </Collapse>
+      ) : (
+        <IncludedSteps step={step} />
+      )}
+    </Box>
+  )
+}
+
+export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
+  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =
+    useWidgetConfig()
+
+  let includedSteps = step.includedSteps
+  if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
+    const feeCollectionStep = includedSteps.find(
+      (step) => step.tool === 'feeCollection'
+    )
+    if (feeCollectionStep) {
+      includedSteps = structuredClone(
+        includedSteps.filter((step) => step.tool !== 'feeCollection')
+      )
+      includedSteps[0].estimate.fromAmount =
+        feeCollectionStep.estimate.fromAmount
+    }
+  }
+
+  const StepIconComponent = ({ icon }: StepIconProps) => {
+    const includedStep = includedSteps?.[Number(icon) - 1]
+    const feeCollectionStep =
+      includedStep?.type === 'protocol' &&
+      includedStep?.tool === 'feeCollection'
+    const toolName =
+      feeCollectionStep && feeConfig?.name
+        ? feeConfig?.name
+        : includedStep?.toolDetails.name
+    const toolLogoURI =
+      feeCollectionStep && feeConfig?.logoURI
+        ? feeConfig?.logoURI
+        : includedStep?.toolDetails.logoURI
+    return toolLogoURI ? (
+      <SmallAvatar
+        src={toolLogoURI}
+        alt={toolName}
+        sx={{ width: 20, height: 20 }}
+      >
+        {toolName?.[0]}
+      </SmallAvatar>
+    ) : null
+  }
+
+  const hasGaslessSupport = isGaslessStep(step)
+
+  return (
+    <Box
+      sx={{
+        mt: 1,
+      }}
+    >
+      <Stepper
+        orientation="vertical"
+        connector={<StepConnector />}
+        activeStep={-1}
+      >
+        {includedSteps.map((step, i, includedSteps) => (
+          <MuiStep key={step.id} expanded>
+            <StepLabel
+              slots={{
+                stepIcon: StepIconComponent,
+              }}
+            >
+              {step.type === 'custom' && subvariant === 'custom' ? (
+                <CustomStepDetailsLabel
+                  step={step}
+                  subvariant={subvariant}
+                  subvariantOptions={subvariantOptions}
+                />
+              ) : step.type === 'cross' ? (
+                <BridgeStepDetailsLabel step={step} />
+              ) : step.type === 'protocol' ? (
+                <ProtocolStepDetailsLabel
+                  step={step}
+                  feeConfig={feeConfig}
+                  relayerSupport={hasGaslessSupport}
+                />
+              ) : (
+                <SwapStepDetailsLabel step={step} />
+              )}
+            </StepLabel>
+            <StepContent last={i === includedSteps.length - 1}>
+              <StepDetailsContent step={step} />
+            </StepContent>
+          </MuiStep>
+        ))}
+      </Stepper>
+    </Box>
+  )
+}
+
+export const StepDetailsContent: React.FC<{
+  step: StepExtended
+}> = ({ step }) => {
+  const { t } = useTranslation()
+
+  const sameTokenProtocolStep =
+    step.action.fromToken.chainId === step.action.toToken.chainId &&
+    step.action.fromToken.address === step.action.toToken.address
+
+  let fromAmount: string | undefined
+  if (sameTokenProtocolStep) {
+    const estimatedFromAmount =
+      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)
+
+    fromAmount =
+      estimatedFromAmount > 0n
+        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)
+        : formatTokenAmount(
+            BigInt(step.estimate.fromAmount),
+            step.action.fromToken.decimals
+          )
+  } else {
+    fromAmount = formatTokenAmount(
+      BigInt(step.estimate.fromAmount),
+      step.action.fromToken.decimals
+    )
+  }
+
+  const showToAmount =
+    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep
+
+  return (
+    <Typography
+      sx={{
+        fontSize: 12,
+        lineHeight: 1,
+        fontWeight: '500',
+        color: 'text.secondary',
+        alignItems: 'center',
+        display: 'flex',
+      }}
+    >
+      {!showToAmount ? (
+        <>
+          {t('format.tokenAmount', {
+            value: formatTokenAmount(
+              BigInt(step.estimate.fromAmount),
+              step.action.fromToken.decimals
+            ),
+          })}{' '}
+          {step.action.fromToken.symbol}
+          {' - '}
+        </>
+      ) : null}
+      {t('format.tokenAmount', {
+        value: fromAmount,
+      })}{' '}
+      {step.action.fromToken.symbol}
+      {showToAmount ? (
+        <>
+          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
+          {t('format.tokenAmount', {
+            value: formatTokenAmount(
+              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),
+              step.execution?.toToken?.decimals ?? step.action.toToken.decimals
+            ),
+          })}{' '}
+          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}
+        </>
+      ) : (
+        ` (${t('format.currency', {
+          value: formatTokenPrice(
+            fromAmount,
+            step.action.fromToken.priceUSD,
+            step.action.fromToken.decimals
+          ),
+        })})`
+      )}
+    </Typography>
+  )
+}
+
+export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
+  step,
+  subvariant,
+  subvariantOptions,
+}) => {
+  const { t } = useTranslation()
+
+  if (!subvariant) {
+    return null
+  }
+
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    subvariant === 'custom' &&
+    (step as unknown as LiFiStep).includedSteps?.length > 0
+      ? (step as unknown as LiFiStep).includedSteps.find(
+          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'
+        )?.toolDetails || step.toolDetails
+      : step.toolDetails
+
+  const stepDetailsKey =
+    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout'
+
+  return (
+    <StepLabelTypography>
+      {t(`main.${stepDetailsKey}StepDetails`, {
+        tool: toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+export const BridgeStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step }) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  return (
+    <StepLabelTypography>
+      {t('main.bridgeStepDetails', {
+        from: getChainById(step.action.fromChainId)?.name,
+        to: getChainById(step.action.toChainId)?.name,
+        tool: step.toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+export const SwapStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step }) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  return (
+    <StepLabelTypography>
+      {t('main.swapStepDetails', {
+        chain: getChainById(step.action.fromChainId)?.name,
+        tool: step.toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+export const ProtocolStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step, feeConfig, relayerSupport }) => {
+  const { t } = useTranslation()
+  return (
+    <StepLabelTypography>
+      {step.toolDetails.key === 'feeCollection'
+        ? feeConfig?.name
+          ? t('main.fees.integrator', { tool: feeConfig.name })
+          : relayerSupport
+            ? t('main.fees.relayerService')
+            : t('main.fees.defaultIntegrator')
+        : step.toolDetails.key === 'gasZip'
+          ? t('main.refuelStepDetails', {
+              tool: step.toolDetails.name,
+            })
+          : step.toolDetails.name}
+    </StepLabelTypography>
+  )
+}

package/src/components/StepActions/StepFees.tsx

@@ -0,0 +1,49 @@
+import type { LiFiStepExtended } from '@lifi/sdk'
+import type { TypographyProps } from '@mui/material'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { getStepFeeCostsBreakdown } from '../../utils/fees.js'
+
+export const StepFees: React.FC<
+  TypographyProps & {
+    step: LiFiStepExtended
+  }
+> = ({ step, ...other }) => {
+  const { t } = useTranslation()
+
+  const isDone = step.execution?.status === 'DONE'
+  const gasCosts = step.execution?.gasCosts ?? step.estimate.gasCosts
+  const feeCosts = step.execution?.feeCosts ?? step.estimate.feeCosts
+  let fees = 0
+
+  if (gasCosts) {
+    const { amountUSD } = getStepFeeCostsBreakdown(gasCosts)
+    fees += amountUSD
+  }
+
+  if (feeCosts) {
+    const filteredfeeCosts = feeCosts?.filter((fee) => !fee.included)
+    if (filteredfeeCosts?.length) {
+      const { amountUSD } = getStepFeeCostsBreakdown(filteredfeeCosts)
+      fees += amountUSD
+    }
+  }
+
+  return (
+    <Typography
+      {...other}
+      sx={[
+        {
+          fontSize: 12,
+          fontWeight: '500',
+          color: 'text.secondary',
+          lineHeight: 1.3334,
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
+      {t('format.currency', { value: fees })}{' '}
+      {isDone ? t('main.fees.paid') : t('main.fees.estimated')}
+    </Typography>
+  )
+}

package/src/components/StepActions/types.ts

@@ -0,0 +1,24 @@
+import type { LiFiStep, Step } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import type {
+  SubvariantOptions,
+  WidgetFeeConfig,
+  WidgetSubvariant,
+} from '../../types/widget.js'
+
+export interface StepActionsProps extends BoxProps {
+  step: LiFiStep
+  dense?: boolean
+}
+
+export interface StepDetailsLabelProps {
+  step: Step
+  subvariant?: Extract<WidgetSubvariant, 'custom'>
+  subvariantOptions?: SubvariantOptions
+  feeConfig?: WidgetFeeConfig
+  relayerSupport?: boolean
+}
+
+export interface IncludedStepsProps {
+  step: LiFiStep
+}

package/src/components/StepDivider/StepDivider.style.tsx

@@ -0,0 +1,8 @@
+import { Container as MuiContainer, styled } from '@mui/material'
+
+export const Container = styled(MuiContainer)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: theme.spacing(2),
+}))

package/src/components/StepDivider/StepDivider.tsx

@@ -0,0 +1,10 @@
+import { Divider } from '@mui/material'
+import { Container } from './StepDivider.style.js'
+
+export const StepDivider: React.FC = () => {
+  return (
+    <Container>
+      <Divider orientation="vertical" flexItem />
+    </Container>
+  )
+}

package/src/components/Switch.tsx

@@ -0,0 +1,62 @@
+import {
+  Switch as MuiSwitch,
+  alpha,
+  styled,
+  switchClasses,
+} from '@mui/material'
+
+export const Switch = styled(MuiSwitch)(({ theme }) => ({
+  width: 42,
+  height: 24,
+  padding: 0,
+  [`.${switchClasses.switchBase}`]: {
+    padding: 0,
+    margin: theme.spacing(0.25),
+    transitionDuration: theme.transitions.duration.standard,
+    [`&.${switchClasses.checked}`]: {
+      transform: 'translateX(18px)',
+      color: theme.palette.common.white,
+      [`& + .${switchClasses.track}`]: {
+        backgroundColor: theme.palette.primary.main,
+        opacity: 1,
+        border: 0,
+      },
+      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+        opacity: 0.5,
+      },
+    },
+    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+      color: theme.palette.primary.main,
+      border: '6px solid',
+      borderColor: theme.palette.common.white,
+    },
+    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
+      color: alpha(theme.palette.common.white, 0.12),
+      ...theme.applyStyles('light', {
+        color: alpha(theme.palette.common.black, 0.12),
+      }),
+    },
+    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+      opacity: 0.3,
+      ...theme.applyStyles('light', {
+        opacity: 0.7,
+      }),
+    },
+  },
+  [`.${switchClasses.thumb}`]: {
+    boxSizing: 'border-box',
+    width: 20,
+    height: 20,
+  },
+  [`.${switchClasses.track}`]: {
+    borderRadius: 24 / 2,
+    backgroundColor: alpha(theme.palette.common.white, 0.16),
+    opacity: 1,
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.standard,
+    }),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.common.black, 0.16),
+    }),
+  },
+}))

package/src/components/Tabs/Tabs.style.tsx

@@ -0,0 +1,53 @@
+import type { TabProps } from '@mui/material'
+import {
+  Tab as MuiTab,
+  Tabs as MuiTabs,
+  alpha,
+  styled,
+  tabClasses,
+  tabsClasses,
+} from '@mui/material'
+
+export const Tabs = styled(MuiTabs)(({ theme }) => ({
+  flex: 1,
+  [`.${tabsClasses.indicator}`]: {
+    top: theme.spacing(0.5),
+    left: theme.spacing(0.5),
+    height: `calc(100% - ${theme.spacing(1)})`,
+    width: `calc(100% - ${theme.spacing(1)})`,
+  },
+  [`.${tabsClasses.fixed}`]: {
+    padding: theme.spacing(0.5),
+  },
+}))
+
+export const CardTabs = styled(Tabs)(({ theme }) => ({
+  backgroundColor: alpha(theme.palette.common.white, 0.08),
+  [`.${tabsClasses.indicator}`]: {
+    backgroundColor: alpha(theme.palette.common.black, 0.56),
+    ...theme.applyStyles('light', {
+      backgroundColor: theme.palette.background.paper,
+    }),
+  },
+  ...theme.applyStyles('light', {
+    backgroundColor: alpha(theme.palette.common.black, 0.04),
+  }),
+}))
+
+export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
+  zIndex: 1,
+  flex: 1,
+  textTransform: 'none',
+  fontSize: '1rem',
+  fontWeight: 700,
+  color: theme.palette.common.white,
+  [`&.${tabClasses.selected}`]: {
+    color: theme.palette.common.white,
+    ...theme.applyStyles('light', {
+      color: theme.palette.common.black,
+    }),
+  },
+  ...theme.applyStyles('light', {
+    color: theme.palette.common.black,
+  }),
+}))