@openocean.finance/widget 1.0.0

package/src/components/Card/InputCard.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material'
+import { Card } from './Card.js'
+
+export const InputCard = styled(Card, {
+  name: 'MuiInputCard',
+  slot: 'root',
+})({})

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

@@ -0,0 +1,17 @@
+import { Box, styled } from '@mui/material'
+import { Card } from '../../components/Card/Card.js'
+
+export const ChainCard = styled(Card)({
+  display: 'grid',
+  placeItems: 'center',
+  minWidth: 52,
+  height: 56,
+})
+
+export const ChainContainer = styled(Box)(({ theme }) => ({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
+  gridAutoRows: '56px',
+  justifyContent: 'space-between',
+  gap: theme.spacing(1.5),
+}))

package/src/components/ChainSelect/ChainSelect.tsx

@@ -0,0 +1,104 @@
+import type { EVMChain } from '@lifi/sdk'
+import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material'
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  maxChainsToOrder,
+  maxChainsToShow,
+} from '../../stores/chains/createChainOrderStore.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { ChainCard, ChainContainer } from './ChainSelect.style.js'
+import { useChainSelect } from './useChainSelect.js'
+
+export const ChainSelect = ({ formType }: FormTypeProps) => {
+  const navigate = useNavigate()
+  const {
+    chainOrder,
+    chains,
+    getChains,
+    isLoading,
+    setChainOrder,
+    setCurrentChain,
+  } = useChainSelect(formType)
+
+  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 showAllChains = () => {
+    navigate(navigationRoutes[`${formType}Chain`])
+  }
+
+  // We check if we can accommodate all the chains on the grid
+  // If there are more than 10 chains we show the number of hidden chains as the last one tile
+  const chainsToHide =
+    chains?.length === maxChainsToShow
+      ? 0
+      : (chains?.length ?? 0) - maxChainsToOrder
+
+  // When there is less than 10 chains we don't care about the order
+  const chainsToShow = chainsToHide > 0 ? getChains() : chains
+  return (
+    <ChainContainer>
+      {isLoading
+        ? Array.from({ length: maxChainsToOrder }).map((_, index) => (
+            <Skeleton
+              key={index}
+              variant="rectangular"
+              width={56}
+              height={56}
+              sx={{ borderRadius: 1 }}
+            />
+          ))
+        : chainsToShow?.map((chain: EVMChain) => (
+            <Tooltip key={chain.id} title={chain.name} enterNextDelay={100}>
+              <ChainCard
+                component="button"
+                onClick={() => setCurrentChain(chain.id)}
+                type={chainId === chain.id ? 'selected' : 'default'}
+                selectionColor="primary"
+              >
+                <Avatar
+                  src={chain.logoURI}
+                  alt={chain.key}
+                  sx={{ width: 40, height: 40 }}
+                >
+                  {chain.name[0]}
+                </Avatar>
+              </ChainCard>
+            </Tooltip>
+          ))}
+      {chainsToHide > 0 ? (
+        <ChainCard component="button" onClick={showAllChains}>
+          <Box
+            sx={{
+              width: 40,
+              height: 40,
+              display: 'grid',
+              placeItems: 'center',
+            }}
+          >
+            <Typography
+              sx={{
+                fontWeight: 500,
+              }}
+            >
+              +{chainsToHide}
+            </Typography>
+          </Box>
+        </ChainCard>
+      ) : null}
+    </ChainContainer>
+  )
+}

package/src/components/ChainSelect/useChainSelect.ts

@@ -0,0 +1,78 @@
+import type { EVMChain } from '@lifi/sdk'
+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 { useFieldController } from '../../stores/form/useFieldController.js'
+import type { DisabledUI } from '../../types/widget.js'
+
+export const useChainSelect = (formType: FormType) => {
+  const { disabledUI } = useWidgetConfig()
+  const chainKey = FormKeyHelper.getChainKey(formType)
+  const { onChange } = useFieldController({ name: chainKey })
+  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 getChains = () => {
+    if (!chains) {
+      return []
+    }
+    const selectedChains = chainOrder
+      .map((chainId) => chains.find((chain) => chain.id === chainId))
+      .filter(Boolean) as EVMChain[]
+    return selectedChains
+  }
+
+  const setCurrentChain = (chainId: number) => {
+    onChange(chainId)
+    if (swapOnly) {
+      setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
+        isTouched: true,
+      })
+    }
+    const tokenKey = FormKeyHelper.getTokenKey(formType)
+    if (!disabledUI?.includes(tokenKey as DisabledUI)) {
+      setFieldValue(tokenKey, '')
+    }
+    const amountKey = FormKeyHelper.getAmountKey(formType)
+    if (!disabledUI?.includes(amountKey as DisabledUI)) {
+      setFieldValue(amountKey, '')
+    }
+    setFieldValue('tokenSearchFilter', '')
+
+    const [toChainId] = getFieldValues('toChain')
+    const toChain = getChainById(toChainId)
+    if (toChain) {
+      tryResetToAddress(toChain)
+    }
+    setChainOrder(chainId, formType)
+  }
+
+  return {
+    chainOrder,
+    chains,
+    getChains,
+    isLoading,
+    setChainOrder,
+    setCurrentChain,
+  }
+}

package/src/components/ContractComponent/ContractComponent.tsx

@@ -0,0 +1,14 @@
+import type { CardProps } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import { Card } from '../Card/Card.js'
+
+export const ContractComponent: React.FC<PropsWithChildren<CardProps>> = ({
+  children,
+  ...props
+}) => {
+  if (!children) {
+    return null
+  }
+
+  return <Card {...props}>{children}</Card>
+}

package/src/components/ContractComponent/ItemPrice.tsx

@@ -0,0 +1,38 @@
+import type { ContractCall } from '@lifi/sdk'
+import { useEffect } from 'react'
+import { formatUnits } from 'viem'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import type { TokenAmount } from '../../types/token.js'
+import { Token } from '../Token/Token.js'
+
+export interface ItemPriceProps {
+  token: TokenAmount
+  contractCalls?: ContractCall[]
+}
+
+export const ItemPrice: React.FC<ItemPriceProps> = ({
+  token,
+  contractCalls,
+}) => {
+  const { setFieldValue } = useFieldActions()
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true })
+      setFieldValue('toToken', token.address, { isTouched: true })
+      setFieldValue(
+        'toAmount',
+        token.amount ? formatUnits(token.amount, token.decimals) : '',
+        {
+          isTouched: true,
+        }
+      )
+    }
+    if (contractCalls) {
+      setFieldValue('contractCalls', contractCalls, {
+        isTouched: true,
+      })
+    }
+  }, [contractCalls, setFieldValue, token])
+  return <Token token={token} p={2} />
+}

package/src/components/ContractComponent/NFT/NFT.style.ts

@@ -0,0 +1,8 @@
+import { Avatar, styled } from '@mui/material'
+
+export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 96,
+  height: 96,
+  borderRadius: theme.shape.borderRadius,
+}))

package/src/components/ContractComponent/NFT/NFT.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react'
+import { formatUnits } from 'viem'
+import { useFieldActions } from '../../../stores/form/useFieldActions.js'
+import { NFTBase } from './NFTBase.js'
+import type { NFTProps } from './types.js'
+
+export const NFT: React.FC<NFTProps> = ({
+  imageUrl,
+  isLoading,
+  collectionName,
+  assetName,
+  owner,
+  token,
+  contractCall,
+}) => {
+  const { setFieldValue } = useFieldActions()
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true })
+      setFieldValue('toToken', token.address, { isTouched: true })
+      setFieldValue(
+        'toAmount',
+        token.amount ? formatUnits(token.amount, token.decimals) : '',
+        {
+          isTouched: true,
+        }
+      )
+    }
+    if (contractCall) {
+      setFieldValue('contractCalls', [contractCall], {
+        isTouched: true,
+      })
+    }
+  }, [contractCall, setFieldValue, token])
+  return (
+    <NFTBase
+      isLoading={isLoading}
+      imageUrl={imageUrl}
+      collectionName={collectionName}
+      assetName={assetName}
+      owner={owner}
+      token={token}
+    />
+  )
+}

package/src/components/ContractComponent/NFT/NFTBase.tsx

@@ -0,0 +1,91 @@
+import { Box, Link, Skeleton, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { Token } from '../../Token/Token.js'
+import { PreviewAvatar } from './NFT.style.js'
+import type { NFTProps } from './types.js'
+
+export const NFTBase: React.FC<NFTProps> = ({
+  imageUrl,
+  isLoading,
+  collectionName,
+  assetName,
+  owner,
+  token,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Box
+      sx={{
+        p: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+        }}
+      >
+        {isLoading ? (
+          <Skeleton
+            width={96}
+            height={96}
+            variant="rectangular"
+            sx={{ borderRadius: 1 }}
+          />
+        ) : (
+          <PreviewAvatar src={imageUrl} />
+        )}
+        <Box
+          sx={{
+            ml: 2,
+          }}
+        >
+          {isLoading ? (
+            <Skeleton width={144} height={21} variant="text" />
+          ) : (
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: 'text.secondary',
+              }}
+            >
+              {collectionName}
+            </Typography>
+          )}
+          {isLoading ? (
+            <Skeleton width={112} height={27} variant="text" />
+          ) : (
+            <Typography
+              sx={{
+                fontSize: 18,
+                fontWeight: 600,
+              }}
+            >
+              {assetName}
+            </Typography>
+          )}
+          {isLoading ? (
+            <Skeleton width={128} height={21} variant="text" />
+          ) : owner ? (
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: 'text.secondary',
+              }}
+            >
+              {t('main.ownedBy')}{' '}
+              <Link
+                href={owner.url}
+                target="_blank"
+                underline="none"
+                color="primary"
+              >
+                {owner.name}
+              </Link>
+            </Typography>
+          ) : null}
+        </Box>
+      </Box>
+      <Token token={token} isLoading={isLoading} mt={2} />
+    </Box>
+  )
+}

package/src/components/ContractComponent/NFT/types.ts

@@ -0,0 +1,19 @@
+import type { ContractCall, TokenAmount } from '@lifi/sdk'
+
+export interface NFTBaseProps {
+  imageUrl?: string
+  collectionName?: string
+  assetName?: string
+  isLoading?: boolean
+  owner?: NFTOwner
+  token: TokenAmount
+}
+
+export interface NFTProps extends NFTBaseProps {
+  contractCall?: ContractCall
+}
+
+export interface NFTOwner {
+  name?: string
+  url?: string
+}

package/src/components/Dialog.tsx

@@ -0,0 +1,51 @@
+import type { DialogProps, PaperProps, Theme } from '@mui/material'
+import { Dialog as MuiDialog } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js'
+
+export const modalProps = {
+  sx: {
+    position: 'absolute',
+    overflow: 'hidden',
+  },
+}
+
+export const paperProps: Partial<PaperProps> = {
+  sx: (theme: Theme) => ({
+    position: 'absolute',
+    backgroundImage: 'none',
+    backgroundColor: theme.palette.background.default,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius,
+  }),
+}
+
+export const slotProps = {
+  backdrop: {
+    sx: {
+      position: 'absolute',
+      backgroundColor: 'rgb(0 0 0 / 32%)',
+      backdropFilter: 'blur(3px)',
+    },
+  },
+}
+
+export const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({
+  children,
+  open,
+  onClose,
+}) => {
+  const getContainer = useGetScrollableContainer()
+  return (
+    <MuiDialog
+      container={getContainer}
+      open={open}
+      onClose={onClose}
+      sx={modalProps.sx}
+      PaperProps={paperProps}
+      slotProps={slotProps}
+    >
+      {children}
+    </MuiDialog>
+  )
+}

package/src/components/FeeBreakdownTooltip.tsx

@@ -0,0 +1,71 @@
+import { Box, Tooltip, Typography } from '@mui/material'
+import type { TFunction } from 'i18next'
+import type { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { FeesBreakdown } from '../utils/fees.js'
+import { formatTokenAmount } from '../utils/format.js'
+
+export interface FeeBreakdownTooltipProps {
+  gasCosts?: FeesBreakdown[]
+  feeCosts?: FeesBreakdown[]
+  relayerSupport?: boolean
+  children: ReactElement<any, any>
+}
+
+export const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({
+  gasCosts,
+  feeCosts,
+  relayerSupport,
+  children,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Tooltip
+      title={
+        <Box>
+          {relayerSupport ? <Box>{t('tooltip.relayerService')}</Box> : null}
+          {gasCosts?.length && !relayerSupport ? (
+            <Box>
+              {t('main.fees.network')}
+              {getFeeBreakdownTypography(gasCosts, t)}
+            </Box>
+          ) : null}
+          {feeCosts?.length && !relayerSupport ? (
+            <Box
+              sx={{
+                mt: 0.5,
+              }}
+            >
+              {t('main.fees.provider')}
+              {getFeeBreakdownTypography(feeCosts, t)}
+            </Box>
+          ) : null}
+        </Box>
+      }
+      sx={{ cursor: 'help' }}
+    >
+      {children}
+    </Tooltip>
+  )
+}
+
+export const getFeeBreakdownTypography = (
+  fees: FeesBreakdown[],
+  t: TFunction
+) =>
+  fees.map((fee, index) => (
+    <Typography
+      color="inherit"
+      key={`${fee.token.address}${index}`}
+      sx={{
+        fontSize: 12,
+        fontWeight: '500',
+      }}
+    >
+      {t('format.currency', { value: fee.amountUSD })} (
+      {t('format.tokenAmount', {
+        value: formatTokenAmount(fee.amount, fee.token.decimals),
+      })}{' '}
+      {fee.token.symbol})
+    </Typography>
+  ))

package/src/components/FullPageContainer.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material'
+import type { PageContainerProps } from './PageContainer.js'
+import { PageContainer } from './PageContainer.js'
+
+// In max height and default layout
+// the PageContainer collapses to use the minimum space need to display its child components whereas
+// the FullPageContainer expands and fills the available vertical space provide by the max-height
+// See the CssBaselineContainer component styles in AppContainer.tsx for usage of full-page-container
+export const FullPageContainer = styled((props: PageContainerProps) => (
+  <PageContainer
+    {...props}
+    className={`${props.className} full-page-container`}
+  />
+))``

package/src/components/Header/BackButton.tsx

@@ -0,0 +1,17 @@
+import { ArrowBack } from '@mui/icons-material'
+import type { IconButtonProps } from '@mui/material'
+import { IconButton, useTheme } from '@mui/material'
+
+export const BackButton: React.FC<IconButtonProps> = ({ onClick }) => {
+  const theme = useTheme()
+
+  return (
+    <IconButton
+      size="medium"
+      edge={theme?.navigation?.edge ? 'start' : false}
+      onClick={onClick}
+    >
+      <ArrowBack />
+    </IconButton>
+  )
+}

package/src/components/Header/CloseDrawerButton.tsx

@@ -0,0 +1,31 @@
+import { CloseRounded } from '@mui/icons-material'
+import { IconButton, Tooltip } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useDrawer } from '../../AppDrawerContext.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+
+interface CloseDrawerButtonProps {
+  header?: 'navigation' | 'wallet'
+}
+
+export const CloseDrawerButton = ({ header }: CloseDrawerButtonProps) => {
+  const { t } = useTranslation()
+  const { subvariant } = useWidgetConfig()
+  const { closeDrawer } = useDrawer()
+  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()
+
+  const showInNavigationHeader =
+    header === 'navigation' &&
+    (useExternalWalletProvidersOnly || subvariant === 'split')
+
+  const showInWalletHeader = header === 'wallet' && subvariant !== 'split'
+
+  return showInNavigationHeader || showInWalletHeader ? (
+    <Tooltip title={t('button.close')}>
+      <IconButton size="medium" onClick={closeDrawer}>
+        <CloseRounded />
+      </IconButton>
+    </Tooltip>
+  ) : null
+}

package/src/components/Header/DisconnectIconButton.tsx

@@ -0,0 +1,21 @@
+import { PowerSettingsNewRounded } from '@mui/icons-material'
+import { IconButton } from '@mui/material'
+import {
+  type Account,
+  useAccountDisconnect,
+} from '@openocean.finance/wallet-management'
+
+export const DisconnectIconButton = ({ account }: { account: Account }) => {
+  const disconnect = useAccountDisconnect()
+  return (
+    <IconButton
+      size="medium"
+      onClick={async (e) => {
+        e.stopPropagation()
+        await disconnect(account)
+      }}
+    >
+      <PowerSettingsNewRounded />
+    </IconButton>
+  )
+}