@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/Card/CardButton.tsx

@@ -0,0 +1,26 @@
+import type { MouseEventHandler, PropsWithChildren } from 'react'
+import type { SettingCardTitle } from '../../pages/SettingsPage/SettingsCard/types.js'
+import { Card } from './Card.js'
+import {
+  CardRowButton,
+  CardTitleContainer,
+  CardValue,
+} from './CardButton.style.js'
+
+interface SettingCardButtonProps extends SettingCardTitle {
+  onClick: MouseEventHandler
+}
+
+export const CardButton: React.FC<
+  PropsWithChildren<SettingCardButtonProps>
+> = ({ onClick, icon, title, children }) => (
+  <Card>
+    <CardRowButton onClick={onClick} disableRipple>
+      <CardTitleContainer>
+        {icon}
+        <CardValue>{title}</CardValue>
+      </CardTitleContainer>
+      {children}
+    </CardRowButton>
+  </Card>
+)

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,28 @@
+import {
+  cardHeaderClasses,
+  CardHeader as MuiCardHeader,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const CardHeader: React.FC<React.ComponentProps<typeof MuiCardHeader>> =
+  styled(MuiCardHeader)(({ theme }) => ({
+    [`.${cardHeaderClasses.action}`]: {
+      marginTop: -2,
+      alignSelf: 'center',
+    },
+    [`.${cardHeaderClasses.title}`]: {
+      fontWeight: 600,
+      fontSize: 18,
+      lineHeight: 1.3334,
+      color: theme.vars.palette.text.primary,
+      textAlign: 'left',
+    },
+    [`.${cardHeaderClasses.subheader}`]: {
+      fontWeight: 500,
+      fontSize: 12,
+      lineHeight: 1.3334,
+      color: theme.vars.palette.text.secondary,
+      textAlign: 'left',
+    },
+  }))

package/src/components/Card/CardIconButton.tsx

@@ -0,0 +1,20 @@
+import type { IconButtonProps, LinkProps } from '@mui/material'
+import { IconButton as MuiIconButton, styled } from '@mui/material'
+import type React from 'react'
+
+export const CardIconButton: React.FC<
+  React.ComponentProps<typeof MuiIconButton> &
+    IconButtonProps &
+    Pick<LinkProps, 'href' | 'target' | 'rel'>
+> = styled(MuiIconButton)<
+  IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>
+>(({ theme }) => {
+  return {
+    padding: theme.spacing(0.5),
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    '&:hover': {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+    },
+    fontSize: '1rem',
+  }
+})

package/src/components/Card/CardLabel.tsx

@@ -0,0 +1,80 @@
+import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const CardLabel: React.FC<
+  React.ComponentProps<typeof Box> & {
+    variant?: 'secondary' | 'success' | 'warning'
+  }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: 'secondary' | 'success' | 'warning' }>(({ theme }) => ({
+  borderRadius: theme.vars.shape.borderRadius,
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 24,
+  minWidth: 24,
+  userSelect: 'none',
+  fontSize: '1rem',
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,
+  color: theme.vars.palette.text.primary,
+  ...theme.applyStyles('dark', {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,
+  }),
+  variants: [
+    {
+      props: { variant: 'secondary' },
+      style: {
+        color: theme.palette.getContrastText(theme.palette.secondary.main),
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
+        ...theme.applyStyles('dark', {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
+        }),
+      },
+    },
+    {
+      props: { variant: 'success' },
+      style: {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,
+        color: theme.vars.palette.success.main,
+        ...theme.applyStyles('dark', {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,
+          color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,
+        }),
+      },
+    },
+    {
+      props: { variant: 'warning' },
+      style: {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
+        ...theme.applyStyles('dark', {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
+          color: theme.vars.palette.warning.main,
+        }),
+      },
+    },
+  ],
+}))
+
+export const CardLabelTypography: React.FC<
+  React.ComponentProps<typeof Typography> & { type?: 'icon' }
+> = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'type',
+})<{ type?: 'icon' }>(({ theme }) => ({
+  padding: theme.spacing(0.75, 1.5),
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: '600',
+  variants: [
+    {
+      props: {
+        type: 'icon',
+      },
+      style: {
+        padding: theme.spacing(0.75, 0, 0.75, 0.75),
+      },
+    },
+  ],
+}))

package/src/components/Card/CardTitle.tsx

@@ -0,0 +1,29 @@
+import { styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const CardTitle: React.FC<
+  React.ComponentProps<typeof Typography> & { required?: boolean }
+> = styled(Typography, {
+  shouldForwardProp: (prop) => !['required'].includes(prop as string),
+})<{ required?: boolean }>(({ theme }) => ({
+  fontSize: 14,
+  lineHeight: 1,
+  fontWeight: 700,
+  padding: theme.spacing(2, 2, 0, 2),
+  textAlign: 'left',
+  color: theme.vars.palette.text.primary,
+  '&:after': {
+    content: 'none',
+    color: theme.vars.palette.error.main,
+  },
+  variants: [
+    {
+      props: ({ required }) => required,
+      style: {
+        '&:after': {
+          content: '" *"',
+        },
+      },
+    },
+  ],
+}))

package/src/components/Card/InputCard.tsx

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material'
+import type React from 'react'
+import { Card } from './Card.js'
+
+export const InputCard: React.FC<React.ComponentProps<typeof Card>> = styled(
+  Card,
+  {
+    name: 'MuiInputCard',
+    slot: 'root',
+  }
+)({})

package/src/components/ChainSelect/ChainSelect.style.tsx

@@ -0,0 +1,84 @@
+import { Avatar, Box, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import type React from 'react'
+import { Card } from '../../components/Card/Card.js'
+import { maxChainsToShow } from '../../stores/chains/createChainOrderStore.js'
+
+const chainCardWidthPx = 52
+const chainCardHeightPx = 56
+// For mobile screens (xs, under 360px)
+const chainCardWidthPxMobile = 36
+const chainCardHeightPxMobile = 36
+
+// Chain grid layout settings:
+// These should remain consistent with `maxChainsToShow` to ensure
+// proper row/column distribution in the grid layout logic.
+const maxRows = 2
+const maxChainsPerRow = Math.ceil(maxChainsToShow / maxRows)
+
+export const ChainCard: React.FC<
+  React.ComponentProps<typeof Card> & { itemCount?: number }
+> = styled(Card)(({ theme }) => ({
+  display: 'grid',
+  placeItems: 'center',
+  minWidth: chainCardWidthPx,
+  height: chainCardHeightPx,
+  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+    height: chainCardHeightPxMobile,
+    minWidth: chainCardWidthPxMobile,
+  },
+}))
+
+export const ChainAvatar: React.FC<
+  React.ComponentProps<typeof Avatar> & { itemCount?: number }
+> = styled(Avatar)(({ theme }) => ({
+  width: 40,
+  height: 40,
+  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+    width: 28,
+    height: 28,
+  },
+}))
+
+export const MoreChainsBox: React.FC<
+  React.ComponentProps<typeof Box> & { itemCount?: number }
+> = styled(Box)(({ theme }) => ({
+  width: 40,
+  height: 40,
+  display: 'grid',
+  placeItems: 'center',
+  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+    width: 28,
+    height: 28,
+  },
+}))
+
+export const MoreChainsText: React.FC<
+  React.ComponentProps<typeof Typography> & { itemCount?: number }
+> = styled(Typography)(({ theme }) => ({
+  fontWeight: 500,
+  [theme.breakpoints.down('xs')]: {
+    fontSize: '.85rem',
+  },
+}))
+
+export const ChainContainer: React.FC<
+  React.ComponentProps<typeof Box> & { itemCount?: number }
+> = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'itemCount',
+})<{ itemCount?: number }>(({ theme, itemCount = 0 }) => {
+  const rowCount = Math.min(Math.ceil(itemCount / maxChainsPerRow), maxRows)
+  const columnsPerRow = Math.ceil(itemCount / rowCount)
+  return {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${rowCount > 1 ? columnsPerRow : 'auto-fit'}, minmax(${chainCardWidthPx}px, 1fr))`,
+    gridTemplateRows: `repeat(${rowCount}, ${chainCardHeightPx}px)`,
+    justifyContent: 'space-between',
+    gap: theme.spacing(1.5),
+    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+      gridTemplateColumns: `repeat(${rowCount > 1 ? columnsPerRow : 'auto-fit'}, minmax(${chainCardWidthPxMobile}px, 1fr))`,
+      gridTemplateRows: `repeat(${rowCount}, ${chainCardHeightPxMobile}px)`,
+      gap: theme.spacing(1),
+    },
+  }
+})

package/src/components/ChainSelect/ChainSelect.tsx

@@ -0,0 +1,183 @@
+import type { EVMChain } from '@lifi/sdk'
+import { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type React from 'react'
+import { type JSX, memo, useCallback, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
+import {
+  maxChainsToOrder,
+  maxChainsToShow,
+  maxGridItemsToShow,
+} from '../../stores/chains/createChainOrderStore.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'
+import {
+  ChainAvatar,
+  ChainCard,
+  ChainContainer,
+  MoreChainsBox,
+  MoreChainsText,
+} from './ChainSelect.style.js'
+import { useChainSelect } from './useChainSelect.js'
+
+export const ChainSelect: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element => {
+    const { t } = useTranslation()
+    const navigate = useNavigate()
+    const isMobile = useMediaQuery((theme: Theme) =>
+      theme.breakpoints.down(theme.breakpoints.values.xs)
+    )
+    const { setFieldValue } = useFieldActions()
+    const {
+      chainOrder,
+      chains,
+      isLoading,
+      getSelectedChains,
+      setChainOrder,
+      setCurrentChain,
+    } = useChainSelect(formType)
+
+    const [showAllNetworks, isAllNetworks, setIsAllNetworks] =
+      useChainOrderStore((state) => [
+        state[`${formType}ShowAllNetworks`],
+        state[`${formType}IsAllNetworks`],
+        state.setIsAllNetworks,
+      ])
+
+    const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+
+    useEffect(() => {
+      if (chainId) {
+        const hasChainInOrderedList = chainOrder.includes(chainId)
+        // If we don't have a chain in the ordered chain list we should add it.
+        if (!hasChainInOrderedList) {
+          setChainOrder(chainId, formType)
+        }
+      }
+    }, [chainId, chainOrder, formType, setChainOrder])
+
+    const onChainSelect = useCallback(
+      (selectedChainId: number) => {
+        setIsAllNetworks(false, formType)
+        setCurrentChain(selectedChainId)
+      },
+      [setIsAllNetworks, setCurrentChain, formType]
+    )
+
+    const showAllChains = useCallback(() => {
+      navigate({ to: navigationRoutes[`${formType}Chain`] })
+    }, [navigate, formType])
+
+    const selectAllNetworks = useCallback(() => {
+      setIsAllNetworks(true, formType)
+      // Reset the chain and token fields when selecting all networks
+      setFieldValue(FormKeyHelper.getChainKey(formType), '', {
+        isTouched: true,
+      })
+      setFieldValue(FormKeyHelper.getTokenKey(formType), '', {
+        isTouched: true,
+      })
+    }, [setIsAllNetworks, formType, setFieldValue])
+
+    const chainsToHide =
+      chains?.length === maxChainsToShow
+        ? 0
+        : (chains?.length ?? 0) - maxChainsToOrder
+
+    const chainsToShow = useMemo(
+      () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],
+      [chainsToHide, getSelectedChains, chains]
+    )
+
+    const tilesCount =
+      chainsToShow.length +
+      (showAllNetworks ? 1 : 0) +
+      (chainsToHide > 0 ? 1 : 0)
+
+    if (isLoading) {
+      return (
+        <ChainContainer itemCount={tilesCount}>
+          {Array.from({ length: maxGridItemsToShow }).map((_, index) => (
+            <Skeleton
+              key={index}
+              variant="rectangular"
+              width={56}
+              height={isMobile ? 36 : 56}
+              sx={{ borderRadius: 1 }}
+            />
+          ))}
+        </ChainContainer>
+      )
+    }
+
+    return (
+      <ChainContainer itemCount={tilesCount}>
+        {showAllNetworks && (
+          <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>
+            <ChainCard
+              component="button"
+              onClick={selectAllNetworks}
+              type={isAllNetworks ? 'selected' : 'default'}
+              selectionColor="secondary"
+            >
+              <AllChainsAvatar
+                chains={chains ?? []}
+                size={isMobile ? 'small' : 'medium'}
+              />
+            </ChainCard>
+          </Tooltip>
+        )}
+        {chainsToShow.map((chain: EVMChain) => (
+          <ChainItem
+            key={chain.id}
+            chain={chain}
+            isSelected={chainId === chain.id}
+            isAllNetworks={isAllNetworks}
+            onSelect={onChainSelect}
+          />
+        ))}
+        {chainsToHide > 0 && (
+          <ChainCard component="button" onClick={showAllChains}>
+            <MoreChainsBox>
+              <MoreChainsText>+{chainsToHide}</MoreChainsText>
+            </MoreChainsBox>
+          </ChainCard>
+        )}
+      </ChainContainer>
+    )
+  }
+)
+
+const ChainItem = memo(
+  ({
+    chain,
+    isSelected,
+    isAllNetworks,
+    onSelect,
+  }: {
+    chain: EVMChain
+    isSelected: boolean
+    isAllNetworks: boolean
+    onSelect: (id: number) => void
+  }) => {
+    return (
+      <Tooltip title={chain.name} enterNextDelay={100}>
+        <ChainCard
+          component="button"
+          onClick={() => onSelect(chain.id)}
+          type={!isAllNetworks && isSelected ? 'selected' : 'default'}
+          selectionColor="secondary"
+        >
+          <ChainAvatar src={chain.logoURI} alt={chain.key}>
+            {chain.name[0]}
+          </ChainAvatar>
+        </ChainCard>
+      </Tooltip>
+    )
+  }
+)

package/src/components/ChainSelect/useChainSelect.ts

@@ -0,0 +1,98 @@
+import type { EVMChain, ExtendedChain } from '@lifi/sdk'
+import { useCallback } from 'react'
+import { useChains } from '../../hooks/useChains.js'
+import { useSwapOnly } from '../../hooks/useSwapOnly.js'
+import { useToAddressReset } from '../../hooks/useToAddressReset.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useChainOrder } from '../../stores/chains/useChainOrder.js'
+import type { FormType } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import type { DisabledUIConfig } from '../../types/widget.js'
+
+export const useChainSelect = (
+  formType: FormType
+): {
+  chainOrder: number[]
+  chains: ExtendedChain[] | undefined
+  getSelectedChains: () => EVMChain[]
+  isLoading: boolean
+  setChainOrder: (chainId: number, type: FormType) => void
+  setCurrentChain: (chainId: number) => void
+} => {
+  const { disabledUI } = useWidgetConfig()
+  const chainKey = FormKeyHelper.getChainKey(formType)
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const { useExternalWalletProvidersOnly, externalChainTypes } =
+    useExternalWalletProvider()
+  const { chains, isLoading, getChainById } = useChains(
+    formType,
+    // If the integrator uses external wallet management and has not opted in for partial wallet management,
+    // restrict the displayed chains to those compatible with external wallet management.
+    // This ensures users only see chains for which they can sign transactions.
+    formType === 'from' && useExternalWalletProvidersOnly
+      ? externalChainTypes
+      : undefined
+  )
+
+  const [chainOrder, setChainOrder] = useChainOrder(formType)
+  const swapOnly = useSwapOnly()
+  const { tryResetToAddress } = useToAddressReset()
+
+  const getSelectedChains = useCallback((): EVMChain[] => {
+    if (!chains) {
+      return []
+    }
+    const selectedChains = chainOrder
+      .map((chainId) => chains.find((chain) => chain.id === chainId))
+      .filter(Boolean) as EVMChain[]
+    return selectedChains
+  }, [chains, chainOrder])
+
+  const setCurrentChain = useCallback(
+    (chainId: number): void => {
+      setFieldValue(chainKey, chainId, { isDirty: true, isTouched: true })
+      if (swapOnly) {
+        setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
+          isTouched: true,
+        })
+      }
+      const tokenKey = FormKeyHelper.getTokenKey(formType)
+      if (!disabledUI?.[tokenKey as keyof DisabledUIConfig]) {
+        setFieldValue(tokenKey, '')
+      }
+      const amountKey = FormKeyHelper.getAmountKey(formType)
+      if (!disabledUI?.[amountKey as keyof DisabledUIConfig]) {
+        setFieldValue(amountKey, '')
+      }
+
+      const [toChainId] = getFieldValues('toChain')
+      const toChain = getChainById(toChainId)
+      if (toChain) {
+        tryResetToAddress(toChain)
+      }
+      setChainOrder(chainId, formType)
+    },
+    [
+      chainKey,
+      swapOnly,
+      setFieldValue,
+      disabledUI,
+      formType,
+      getChainById,
+      tryResetToAddress,
+      setChainOrder,
+      getFieldValues,
+    ]
+  )
+
+  return {
+    chainOrder: chainOrder,
+    chains: chains,
+    getSelectedChains: getSelectedChains,
+    isLoading: isLoading,
+    setChainOrder: setChainOrder,
+    setCurrentChain: setCurrentChain,
+  }
+}