@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/EmptyListIndicator/EmptyListIndicator.tsx

@@ -0,0 +1,25 @@
+import type { JSX, ReactNode } from 'react'
+import {
+  EmptyListContainer,
+  EmptyListIcon,
+  EmptyListMessage,
+  EmptyListTitle,
+} from './EmptyListIndicator.style.js'
+
+interface EmptyListIndicatorProps {
+  icon: ReactNode
+  title: string
+  message?: string
+}
+
+export const EmptyListIndicator = ({
+  icon,
+  title,
+  message,
+}: EmptyListIndicatorProps): JSX.Element => (
+  <EmptyListContainer>
+    <EmptyListIcon>{icon}</EmptyListIcon>
+    <EmptyListTitle>{title}</EmptyListTitle>
+    {message ? <EmptyListMessage>{message}</EmptyListMessage> : null}
+  </EmptyListContainer>
+)

package/src/components/ExecutionStatusCard/ExecutionChecklist.tsx

@@ -0,0 +1,61 @@
+import { Box } from '@mui/material'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+import type { JSX } from 'react'
+import type { ExecutionRow } from '../StepActions/executionRows.js'
+import { renderExecutionRow } from '../StepActions/executionRows.js'
+
+const ROW_STAGGER = 0.06
+
+const rowTransition = { duration: 0.3, ease: [0.19, 1, 0.22, 1] as const }
+const rowExitTransition = {
+  duration: 0.2,
+  ease: [0.215, 0.61, 0.355, 1] as const,
+}
+
+interface ExecutionChecklistProps {
+  rows: ExecutionRow[]
+}
+
+export function ExecutionChecklist({
+  rows,
+}: ExecutionChecklistProps): JSX.Element | null {
+  if (rows.length === 0) {
+    return null
+  }
+
+  const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')
+
+  return (
+    <AnimatePresence mode="popLayout">
+      {rows.map((row, index) => (
+        <m.div
+          key={
+            row.kind === 'action'
+              ? `${row.step.id}-${row.action.type}-${index}`
+              : `wallet-${row.toChainId}`
+          }
+          layout
+          initial={{ opacity: 0, y: 14, scaleX: 0.8 }}
+          animate={{ opacity: 1, y: 0, scaleX: 1 }}
+          transition={{
+            ...rowTransition,
+            delay: index * ROW_STAGGER,
+            layout: rowTransition,
+          }}
+          exit={{
+            opacity: 0,
+            y: 10,
+            scaleX: 0.9,
+            transition: rowExitTransition,
+          }}
+          style={{ transformOrigin: 'center bottom' }}
+        >
+          <Box sx={{ paddingTop: 1.5 }}>
+            {renderExecutionRow(row, index === lastActionIndex)}
+          </Box>
+        </m.div>
+      ))}
+    </AnimatePresence>
+  )
+}

package/src/components/ExecutionStatusCard/ExecutionStatusCard.tsx

@@ -0,0 +1,242 @@
+import { Box, Typography } from '@mui/material'
+import { stagger } from 'motion'
+import type { Transition, Variants } from 'motion/react'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+import type { JSX, ReactNode } from 'react'
+import { Card } from '../Card/Card.js'
+import type { ExecutionRow } from '../StepActions/executionRows.js'
+import { ExecutionChecklist } from './ExecutionChecklist.js'
+import { StaggeredRevealTypography } from './StaggeredRevealTypography.js'
+
+interface ExecutionStatusCardProps {
+  /** Title for the current phase. `undefined` until an action has a message. */
+  title: string | undefined
+  /** Subtitle under the title. `undefined` when the action has no description. */
+  description: string | undefined
+  /** Completed step rows for the animated checklist. */
+  rows: ExecutionRow[]
+  /** The top icon: a `StatusIcon`, or a contract component for the custom variant. */
+  iconSlot: ReactNode
+  /** Footer card: `ExecutionDoneCard` when done, otherwise `RouteTokens`. */
+  footerSlot: ReactNode
+  /** Partner/VC component, shown after the icon/title when done. */
+  vcSlot?: ReactNode
+}
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0, scale: 0.97 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.3,
+      ease: [0.22, 1, 0.36, 1],
+      delayChildren: stagger(0.06),
+    },
+  },
+}
+
+const heroColumnVariants: Variants = {
+  hidden: {},
+  visible: { transition: { delayChildren: stagger(0.04) } },
+}
+
+const heroItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },
+  },
+}
+
+const titleVariants: Variants = {
+  hidden: { opacity: 0, y: 10, filter: 'blur(2px)' },
+  visible: {
+    opacity: 1,
+    y: 0,
+    filter: 'blur(0px)',
+    transition: { duration: 0.3, ease: [0.19, 1, 0.22, 1] },
+  },
+  exit: {
+    opacity: 0,
+    y: -10,
+    filter: 'blur(2px)',
+    transition: { duration: 0.05, ease: [0.19, 1, 0.22, 1] },
+  },
+}
+
+/** No enter animation — the per-word stagger reveals it. Exit timing matches the title. */
+const textContainerVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    transition: { duration: 0.05, ease: [0.215, 0.61, 0.355, 1] },
+  },
+  visible: { opacity: 1, transition: { duration: 0 } },
+}
+
+/**
+ * Animate height explicitly. A plain `layout` animation sets `height: auto`
+ * immediately, so the card background would jump to full height before the
+ * content appears. `layout` stays only to animate the checklist's position
+ * when the hero column above it resizes.
+ */
+const checklistVariants: Variants = {
+  hidden: {
+    height: 0,
+    opacity: 0,
+    transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },
+  },
+  visible: {
+    height: 'auto',
+    opacity: 1,
+    transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },
+  },
+}
+
+const layoutTransition: Transition = { duration: 0.3, ease: [0.19, 1, 0.22, 1] }
+
+const WORD_STAGGER_DELAY = 0.08
+
+export function ExecutionStatusCard({
+  title,
+  description,
+  rows,
+  iconSlot,
+  footerSlot,
+  vcSlot,
+}: ExecutionStatusCardProps): JSX.Element {
+  const hasRows = rows.length > 0
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      {/*
+       * Keep Card non-animated. Animating its layout would combine with the
+       * rows' layout animations and make the rows jump. Its height follows
+       * the checklist through normal layout instead.
+       */}
+      <Card type="default" indented>
+        <m.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          style={{ width: '100%', transformOrigin: 'top center' }}
+        >
+          <Box
+            component={m.div}
+            layout
+            transition={{ layout: layoutTransition }}
+            variants={heroColumnVariants}
+            sx={{
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center',
+              boxSizing: 'border-box',
+            }}
+          >
+            <m.div
+              layout
+              variants={heroItemVariants}
+              style={{
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            >
+              {iconSlot}
+            </m.div>
+
+            {title && (
+              <m.div
+                layout
+                variants={heroItemVariants}
+                style={{ width: '100%', paddingTop: 12 }}
+              >
+                <AnimatePresence initial={false} mode="wait">
+                  <m.div
+                    key={title}
+                    variants={titleVariants}
+                    initial="hidden"
+                    animate="visible"
+                    exit="exit"
+                    style={{ width: '100%' }}
+                  >
+                    <Typography
+                      sx={{
+                        fontSize: 16,
+                        fontWeight: 600,
+                        lineHeight: 1.4,
+                        textAlign: 'center',
+                      }}
+                    >
+                      {title}
+                    </Typography>
+                  </m.div>
+                </AnimatePresence>
+              </m.div>
+            )}
+
+            {/* mode="popLayout": old description leaves layout at once so the column reflows */}
+            <AnimatePresence initial={false} mode="popLayout">
+              {description && (
+                <m.div
+                  key={description}
+                  variants={textContainerVariants}
+                  initial="hidden"
+                  animate="visible"
+                  exit="hidden"
+                  style={{ width: '100%', paddingTop: 4 }}
+                >
+                  <StaggeredRevealTypography
+                    text={description}
+                    delay={WORD_STAGGER_DELAY}
+                    sx={{
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: 'text.secondary',
+                      textAlign: 'center',
+                    }}
+                  />
+                </m.div>
+              )}
+            </AnimatePresence>
+
+            {vcSlot && (
+              <m.div
+                layout
+                variants={heroItemVariants}
+                style={{ width: '100%' }}
+              >
+                {vcSlot}
+              </m.div>
+            )}
+          </Box>
+
+          <AnimatePresence initial={false}>
+            {hasRows && (
+              <m.div
+                key="checklist"
+                layout
+                transition={{ layout: layoutTransition }}
+                variants={checklistVariants}
+                initial="hidden"
+                animate="visible"
+                exit="hidden"
+                style={{ width: '100%' }}
+              >
+                <ExecutionChecklist rows={rows} />
+              </m.div>
+            )}
+          </AnimatePresence>
+        </m.div>
+      </Card>
+
+      {/* layout makes the footer shift smoothly when the card above grows */}
+      <m.div layout transition={{ layout: layoutTransition }}>
+        {footerSlot}
+      </m.div>
+    </Box>
+  )
+}

package/src/components/ExecutionStatusCard/StaggeredRevealTypography.tsx

@@ -0,0 +1,59 @@
+import { Typography, type TypographyProps } from '@mui/material'
+import { useReducedMotion } from 'motion/react'
+import * as m from 'motion/react-m'
+import type { JSX } from 'react'
+import { Fragment } from 'react'
+
+const WORD_DURATION = 0.3
+const WORD_BOUNCE = 0
+const WORD_ENTER_Y = 4
+
+export type StaggeredRevealTypographyProps = {
+  text: string
+  /** Seconds before the first word begins animating. */
+  delay?: number
+} & Omit<TypographyProps, 'children'>
+
+/**
+ * Reveals text with a word-level stagger animation on mount.
+ * Callers should remount via `key={text}` when the text changes.
+ */
+export function StaggeredRevealTypography({
+  text,
+  delay,
+  ...props
+}: StaggeredRevealTypographyProps): JSX.Element {
+  const reduceMotion = useReducedMotion()
+
+  if (reduceMotion) {
+    return <Typography {...props}>{text}</Typography>
+  }
+
+  const words = text.split(' ')
+  const perWordDuration = words.length > 1 ? WORD_DURATION * 0.6 : WORD_DURATION
+  const staggerInterval =
+    (WORD_DURATION - perWordDuration) / Math.max(1, words.length - 1)
+
+  return (
+    <Typography {...props}>
+      {words.map((word, i) => (
+        <Fragment key={i}>
+          {i > 0 && ' '}
+          <m.span
+            initial={{ opacity: 0, y: WORD_ENTER_Y }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              type: 'spring',
+              visualDuration: perWordDuration,
+              bounce: WORD_BOUNCE,
+              delay: (delay ?? 0) + i * staggerInterval,
+            }}
+            style={{ display: 'inline-block' }}
+          >
+            {word}
+          </m.span>
+        </Fragment>
+      ))}
+    </Typography>
+  )
+}

package/src/components/ExecutionStatusCard/StatusIcon.style.tsx

@@ -0,0 +1,13 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+import { iconCircleSize } from '../IconCircle/IconCircle.style.js'
+
+export const StatusIconContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)({
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: iconCircleSize,
+    height: iconCircleSize,
+  })

package/src/components/ExecutionStatusCard/StatusIcon.tsx

@@ -0,0 +1,99 @@
+import type { RouteExtended } from '@lifi/sdk'
+import type { Transition, Variants } from 'motion/react'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+import type { JSX } from 'react'
+import type { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { IconCircle } from '../IconCircle/IconCircle.js'
+import { TimerRing } from '../Timer/StepStatusTimer.js'
+import type { ExecutionIconKey } from './iconKey.js'
+import { resolveExecutionIconKey } from './iconKey.js'
+import { StatusIconContainer } from './StatusIcon.style.js'
+
+const ICON_EXIT = { duration: 0.08, ease: [0.22, 1, 0.36, 1] as const }
+
+const iconEnterConfig: Record<
+  ExecutionIconKey,
+  { initialScale: number; transition: Transition }
+> = {
+  success: {
+    initialScale: 0.6,
+    transition: { type: 'spring', visualDuration: 0.3, bounce: 0.18 },
+  },
+  warning: {
+    initialScale: 0.75,
+    transition: { type: 'spring', visualDuration: 0.27, bounce: 0.1 },
+  },
+  error: {
+    initialScale: 0.75,
+    transition: { duration: 0.18, ease: [0.22, 1, 0.36, 1] },
+  },
+  info: {
+    initialScale: 0.8,
+    transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
+  },
+  timer: {
+    initialScale: 0.85,
+    transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
+  },
+}
+
+const iconVariants: Variants = {
+  hidden: (key: ExecutionIconKey) => ({
+    opacity: 0,
+    scale: iconEnterConfig[key].initialScale,
+  }),
+  visible: (key: ExecutionIconKey) => ({
+    opacity: 1,
+    scale: 1,
+    transition: iconEnterConfig[key].transition,
+  }),
+  exit: {
+    opacity: 0,
+    scale: 0.8,
+    filter: 'blur(4px)',
+    transition: { duration: ICON_EXIT.duration, ease: ICON_EXIT.ease },
+  },
+}
+
+interface StatusIconProps {
+  route: RouteExtended
+  status: RouteExecutionStatus
+}
+
+/**
+ * The animated status icon. Each state animates in its own way; they all
+ * animate out the same way.
+ */
+export function StatusIcon({ route, status }: StatusIconProps): JSX.Element {
+  const iconKey = resolveExecutionIconKey(route, status)
+  const step = route.steps.at(-1)
+
+  return (
+    <StatusIconContainer>
+      <AnimatePresence mode="popLayout" initial={false}>
+        <m.div
+          key={iconKey}
+          custom={iconKey}
+          variants={iconVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {iconKey === 'timer' ? (
+            <TimerRing step={step} />
+          ) : (
+            <IconCircle status={iconKey} />
+          )}
+        </m.div>
+      </AnimatePresence>
+    </StatusIconContainer>
+  )
+}

package/src/components/ExecutionStatusCard/iconKey.ts

@@ -0,0 +1,37 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { hasEnumFlag } from '../../utils/enum.js'
+
+/** Visual state of the execution status indicator. */
+export type ExecutionIconKey =
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'timer'
+
+/** Maps route execution state to an {@link ExecutionIconKey}. Pure function. */
+export function resolveExecutionIconKey(
+  route: RouteExtended,
+  status: RouteExecutionStatus
+): ExecutionIconKey {
+  if (hasEnumFlag(status, RouteExecutionStatus.Done)) {
+    return hasEnumFlag(status, RouteExecutionStatus.Partial) ||
+      hasEnumFlag(status, RouteExecutionStatus.Refunded)
+      ? 'warning'
+      : 'success'
+  }
+  if (hasEnumFlag(status, RouteExecutionStatus.Failed)) {
+    return 'error'
+  }
+  const activeStep =
+    route.steps.find(
+      (step) =>
+        step.execution?.status === 'PENDING' ||
+        step.execution?.status === 'ACTION_REQUIRED'
+    ) ?? route.steps.at(-1)
+  if (activeStep?.execution?.status === 'ACTION_REQUIRED') {
+    return 'info'
+  }
+  return 'timer'
+}

package/src/components/Expansion/Expansion.style.tsx

@@ -0,0 +1,46 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+
+export const animationDuration = 225
+
+export const defaultStyle = {
+  opacity: 0,
+  whiteSpace: 'nowrap',
+  transform: 'translateX(-100%)',
+  display: 'inline-block',
+  position: 'absolute' as const,
+  top: 0,
+  left: 0,
+  transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+}
+
+export const transitionStyles = {
+  entering: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+  entered: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+  exiting: {
+    opacity: 0,
+    transform: 'translateX(-100%)',
+  },
+  exited: {
+    opacity: 0,
+    transform: 'translateX(-100%)',
+  },
+}
+
+export const ExpansionContainer: React.FC<
+  React.ComponentProps<typeof Box> & { width: string | number }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'width',
+})<{ width: string | number }>(({ width }) => ({
+  position: 'relative',
+  display: 'flex',
+  transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+  width: width,
+  marginLeft: width ? '24px' : 0,
+}))

package/src/components/Expansion/Expansion.tsx

@@ -0,0 +1,47 @@
+import { type JSX, useMemo, useRef, useState } from 'react'
+import { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'
+import { ExpansionType } from '../../types/widget.js'
+import { ChainsExpanded } from '../Chains/ChainsExpanded.js'
+import { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'
+import { RoutesExpanded } from '../Routes/RoutesExpanded.js'
+import { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'
+import { ExpansionContainer } from './Expansion.style.js'
+
+export function Expansion(): JSX.Element {
+  const [withChainExpansion, expansionType] = useHasChainExpansion()
+  const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)
+  const [routesOpen, setRoutesOpen] = useState(false)
+
+  // Track the previous chain expansion type to avoid re-renders when transitioning to Routes
+  if (
+    expansionType === ExpansionType.FromChain ||
+    expansionType === ExpansionType.ToChain
+  ) {
+    chainExpansionTypeRef.current = expansionType
+  }
+
+  const containerWidth = useMemo(() => {
+    return routesOpen
+      ? routesExpansionWidth
+      : withChainExpansion
+        ? chainExpansionWidth
+        : 0
+  }, [routesOpen, withChainExpansion])
+
+  return (
+    <ExpansionContainer width={containerWidth}>
+      <RoutesExpanded
+        canOpen={expansionType === ExpansionType.Routes}
+        setOpenExpansion={setRoutesOpen}
+      />
+      <ChainsExpanded
+        formType={
+          chainExpansionTypeRef.current === ExpansionType.FromChain
+            ? 'from'
+            : 'to'
+        }
+        open={withChainExpansion}
+      />
+    </ExpansionContainer>
+  )
+}

package/src/components/Expansion/ExpansionTransition.tsx

@@ -0,0 +1,48 @@
+import { Box } from '@mui/material'
+import { type JSX, type PropsWithChildren, useRef } from 'react'
+import { Transition } from 'react-transition-group'
+import {
+  animationDuration,
+  defaultStyle,
+  transitionStyles,
+} from './Expansion.style.js'
+
+interface ExpansionTransitionProps {
+  in: boolean
+  width: string
+  onExited?: () => void
+}
+
+export function ExpansionTransition({
+  in: inProp,
+  children,
+  width,
+  onExited,
+}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {
+  const nodeRef = useRef(null)
+  return (
+    <Transition
+      nodeRef={nodeRef}
+      in={inProp}
+      timeout={animationDuration}
+      onExited={onExited}
+      mountOnEnter
+      unmountOnExit
+    >
+      {(state) => {
+        return (
+          <Box
+            ref={nodeRef}
+            style={{
+              ...defaultStyle,
+              ...transitionStyles[state as keyof typeof transitionStyles],
+              width,
+            }}
+          >
+            {children}
+          </Box>
+        )
+      }}
+    </Transition>
+  )
+}