@openocean.finance/widget 1.0.0

package/src/components/AmountInput/AmountInput.style.tsx

@@ -0,0 +1,45 @@
+import {
+  Box,
+  InputBase,
+  FormControl as MuiFormControl,
+  inputBaseClasses,
+  styled,
+} from '@mui/material'
+
+export const maxInputFontSize = 24
+export const minInputFontSize = 14
+
+export const FormContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+}))
+
+export const FormControl = styled(MuiFormControl)(() => ({
+  height: 40,
+}))
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  fontSize: 24,
+  fontWeight: 700,
+  boxShadow: 'none',
+  lineHeight: 1.5,
+  [`.${inputBaseClasses.input}`]: {
+    height: 24,
+    padding: theme.spacing(0, 0, 0, 2),
+  },
+  '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button':
+    {
+      WebkitAppearance: 'none',
+      margin: 0,
+    },
+  '& input[type="number"]': {
+    MozAppearance: 'textfield',
+  },
+  [`&.${inputBaseClasses.disabled}`]: {
+    color: 'inherit',
+  },
+  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+    WebkitTextFillColor: 'unset',
+  },
+}))

package/src/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,161 @@
+import type { Token } from '@lifi/sdk'
+import type { CardProps } from '@mui/material'
+import type { ChangeEvent, ReactNode } from 'react'
+import { useLayoutEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+// import { CardTitle } from '../Card/CardTitle.js'
+// import { InputCard } from '../Card/InputCard.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useToken } from '../../hooks/useToken.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { FormKeyHelper, type FormTypeProps } from '../../stores/form/types.js'
+import { useFieldController } from '../../stores/form/useFieldController.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { DisabledUI } from '../../types/widget.js'
+import { formatInputAmount, formatTokenAmount } from '../../utils/format.js'
+import { fitInputText } from '../../utils/input.js'
+
+import {
+  FormContainer,
+  FormControl,
+  Input,
+  maxInputFontSize,
+  minInputFontSize,
+} from './AmountInput.style.js'
+import { AmountInputEndAdornment } from './AmountInputEndAdornment.js'
+// import { AmountInputStartAdornment } from './AmountInputStartAdornment.js'
+import { PriceFormHelperText } from './PriceFormHelperText.js'
+
+export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
+  formType,
+  ...props
+}) => {
+  const { disabledUI } = useWidgetConfig()
+
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+
+  const { token } = useToken(chainId, tokenAddress)
+  const disabled =
+    disabledUI?.includes(DisabledUI.FromAmount) || formType === 'to'
+  return (
+    <AmountInputBase
+      formType={formType}
+      token={token}
+      endAdornment={
+        !disabled ? <AmountInputEndAdornment formType={formType} /> : undefined
+      }
+      bottomAdornment={<PriceFormHelperText formType={formType} />}
+      disabled={disabled}
+      {...props}
+    />
+  )
+}
+
+export const AmountInputBase: React.FC<
+  FormTypeProps &
+    CardProps & {
+      token?: Token
+      startAdornment?: ReactNode
+      endAdornment?: ReactNode
+      bottomAdornment?: ReactNode
+      disabled?: boolean
+    }
+> = ({
+  formType,
+  token,
+  startAdornment,
+  endAdornment,
+  bottomAdornment,
+  disabled,
+  ...props
+}) => {
+  const { t } = useTranslation()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
+  const ref = useRef<HTMLInputElement>(null)
+
+  let inputValue: any = ''
+  const amountKey = FormKeyHelper.getAmountKey(formType)
+  const { onChange, onBlur, value } = useFieldController({ name: amountKey })
+  inputValue = value || ''
+  if (formType === 'to') {
+    const {
+      routes,
+      isLoading,
+      isFetching,
+      isFetched,
+      dataUpdatedAt,
+      refetchTime,
+      refetch,
+    } = useRoutes()
+    if (routes) {
+      const router = routes[0] || { toAmount: 0, toToken: { decimals: 18 } }
+      inputValue = formatTokenAmount(
+        BigInt(router.toAmount),
+        router.toToken.decimals
+      )
+      inputValue = t('format.tokenAmount', {
+        value: inputValue,
+      })
+    }
+  }
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { value } = event.target
+    const formattedAmount = formatInputAmount(value, token?.decimals, true)
+    onChange(formattedAmount)
+  }
+
+  const handleBlur = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { value } = event.target
+    const formattedAmount = formatInputAmount(value, token?.decimals)
+    onChange(formattedAmount)
+    onBlur()
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we need to run effect on value change
+  useLayoutEffect(() => {
+    if (ref.current) {
+      fitInputText(maxInputFontSize, minInputFontSize, ref.current)
+    }
+  }, [value])
+
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.amount')
+        : t('header.youPay')
+      : t('header.send')
+
+  return (
+    <FormContainer>
+      <FormControl fullWidth>
+        <Input
+          inputRef={ref}
+          size="small"
+          autoComplete="off"
+          placeholder="0"
+          startAdornment={startAdornment}
+          endAdornment={endAdornment}
+          inputProps={{
+            inputMode: 'decimal',
+          }}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={inputValue}
+          name={amountKey}
+          disabled={disabled}
+          required
+          sx={{ input: { textAlign: 'end' } }}
+        />
+        {bottomAdornment}
+      </FormControl>
+    </FormContainer>
+  )
+}

package/src/components/AmountInput/AmountInputAdornment.style.tsx

@@ -0,0 +1,14 @@
+import { Button as MuiButton, Skeleton, styled } from '@mui/material'
+
+export const MaxButton = styled(MuiButton)(({ theme }) => ({
+  padding: theme.spacing(0.5, 1, 0.625, 1),
+  lineHeight: 1.0715,
+  fontSize: '0.875rem',
+  minWidth: 'unset',
+}))
+
+export const MaxButtonSkeleton = styled(Skeleton)(({ theme }) => ({
+  width: 46,
+  height: 24,
+  borderRadius: theme.shape.borderRadiusSecondary,
+}))

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -0,0 +1,132 @@
+import { InputAdornment } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { formatUnits } from 'viem'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
+import { DebridgeService } from '../../services/DebridgeService.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 { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
+import { MaxButton, MaxButtonSkeleton } from './AmountInputAdornment.style.js'
+
+export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  const { setFieldValue } = useFieldActions()
+
+  const [fromChainId, fromTokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+  const [toChainId, toTokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey('to'),
+    FormKeyHelper.getTokenKey('to')
+  )
+
+  const { token, isLoading } = useTokenAddressBalance(
+    fromChainId,
+    fromTokenAddress
+  )
+  // We get gas recommendations for the source chain to make sure that after pressing the Max button
+  // the user will have enough funds remaining to cover gas costs
+  const { data } = useGasRecommendation(fromChainId)
+
+  const [state] = useSplitSubvariantStore((storeState) => [storeState.state])
+  const handleMax = async () => {
+    if (!token?.amount) {
+      return
+    }
+
+    const chain = getChainById(fromChainId)
+    let maxAmount = token.amount
+
+    let gas = 0n
+
+    if (state === 'bridge') {
+      const prependedOperatingExpenseCost = await getCost({
+        srcChainId: fromChainId === 1151111081099710 ? 7565164 : fromChainId,
+        srcChainTokenIn: fromTokenAddress,
+        srcChainTokenInAmount: maxAmount,
+        dstChainTokenOutAmount: 'auto',
+        dstChainId: toChainId === 1151111081099710 ? 7565164 : toChainId,
+        dstChainTokenOut: toTokenAddress,
+        prependOperatingExpenses: true,
+        additionalTakerRewardBps: 0,
+        tab: new Date().getTime(),
+      })
+
+      gas = BigInt(
+        Number.parseInt((1.15 * prependedOperatingExpenseCost).toString())
+      )
+      if (chain?.nativeToken.address === fromTokenAddress) {
+        if (fromChainId === 1151111081099710) {
+          gas += 15000000n + (8157120n + 4000000n + 890880n)
+        } else if (fromChainId === 8453) {
+          gas += 1000000000000000n + 1000000000000n
+        }
+      }
+    }
+
+    if (state === 'swap') {
+      if (
+        chain?.nativeToken.address === fromTokenAddress &&
+        data?.recommended
+      ) {
+        gas = BigInt(data.recommended.amount) / 2n
+      }
+    }
+
+    if (token.amount > gas) {
+      maxAmount = maxAmount - gas
+    } else {
+      maxAmount = 0n
+    }
+
+    if (maxAmount) {
+      setFieldValue(
+        FormKeyHelper.getAmountKey(formType),
+        formatUnits(maxAmount, token.decimals),
+        {
+          isTouched: true,
+        }
+      )
+    } else {
+      setFieldValue(FormKeyHelper.getAmountKey(formType), '', {
+        isTouched: true,
+      })
+    }
+  }
+
+  return (
+    <InputAdornment position="end">
+      {isLoading && fromTokenAddress ? (
+        <MaxButtonSkeleton variant="rectangular" />
+      ) : formType === 'from' && token?.amount ? (
+        <MaxButton onClick={handleMax}>{t('button.max')}</MaxButton>
+      ) : null}
+    </InputAdornment>
+  )
+}
+
+async function getCost(params: any) {
+  const url = new URL(
+    `${DebridgeService.DEBRIDGE_QUOTE_URL}/dln/order/create-tx`
+  )
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      url.searchParams.append(key, value.toString())
+    }
+  })
+
+  try {
+    const response = await fetch(url.toString())
+    const data = await response.json()
+    return data.prependedOperatingExpenseCost || 0n
+  } catch (error) {
+    console.error('getCost error', error)
+    return 0n
+  }
+}

package/src/components/AmountInput/AmountInputStartAdornment.tsx

@@ -0,0 +1,26 @@
+import { useChain } from '../../hooks/useChain.js'
+import { useToken } from '../../hooks/useToken.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { AvatarBadgedDefault } from '../Avatar/Avatar.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+
+export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
+  formType,
+}) => {
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+
+  const { chain } = useChain(chainId)
+  const { token } = useToken(chainId, tokenAddress)
+  const isSelected = !!(chain && token)
+
+  return isSelected ? (
+    <TokenAvatar token={token} chain={chain} />
+  ) : (
+    <AvatarBadgedDefault />
+  )
+}

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -0,0 +1,101 @@
+import type { TokenAmount } from '@lifi/sdk'
+import { FormHelperText, Skeleton, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+
+export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType)
+  )
+  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+
+  return (
+    <PriceFormHelperTextBase
+      formType={formType}
+      isLoading={isLoading}
+      tokenAddress={tokenAddress}
+      token={token}
+    />
+  )
+}
+
+export const PriceFormHelperTextBase: React.FC<
+  FormTypeProps & {
+    isLoading?: boolean
+    tokenAddress?: string
+    token?: TokenAmount
+  }
+> = ({ formType, isLoading, tokenAddress, token }) => {
+  const { t } = useTranslation()
+  const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))
+  const tokenAmount = token
+  ? formatTokenAmount(token.amount, token.decimals)
+  : '0'
+  const tokenPrice = formatTokenPrice(amount, token?.priceUSD)
+  let toTokenPrice;
+  if(formType === 'to'){
+    const {
+      routes
+    } = useRoutes()
+    if(routes){
+      const router = routes[0] || { toAmount: 0, toToken: { decimals:18 } };
+      const toAmount = formatTokenAmount(BigInt(router.toAmount), router.toToken.decimals)
+      toTokenPrice = formatTokenPrice(toAmount, router.toToken.priceUSD)
+    }
+  } else {
+    
+  }
+
+  return (
+    <FormHelperText
+      component="div"
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: 0,
+        marginLeft: 2,
+        marginTop: 0.75,
+        textAlign: 'end',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <Typography
+        sx={{
+          color: 'text.secondary',
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: 1,
+          flex: 1,
+        }}
+      >
+        {t('format.currency', {
+          value: tokenPrice || toTokenPrice || '',
+        })}
+      </Typography>
+      {isLoading && tokenAddress ? (
+        <Skeleton variant="text" width={48} height={12} />
+      ) : token?.amount ? (
+        <Typography
+          sx={{
+            fontWeight: 500,
+            fontSize: 12,
+            color: 'text.secondary',
+            lineHeight: 1,
+            pl: 0.25,
+          }}
+          title={tokenAmount}
+        >
+          {`/ ${t('format.tokenAmount', {
+            value: tokenAmount,
+          })}`}
+        </Typography>
+      ) : null}
+    </FormHelperText>
+  )
+}

package/src/components/AppContainer.tsx

@@ -0,0 +1,150 @@
+import { Box, Container, ScopedCssBaseline, styled } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import { defaultMaxHeight } from '../config/constants.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useHeaderHeight } from '../stores/header/useHeaderStore.js'
+import type { WidgetVariant } from '../types/widget.js'
+import { ElementId, createElementId } from '../utils/elements.js'
+
+// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
+//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
+//  A Number of other components and hooks work with height values that are often set on or derived from these elements
+//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
+//    - useTokenListHeight
+//    - useSetContentHeight
+//  Also check any code that is using the methods from elements.ts utils file
+
+export const AppExpandedContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'start',
+  flex: 1,
+  height:
+    theme.container?.display === 'flex'
+      ? '100%'
+      : theme.container?.maxHeight
+        ? 'auto'
+        : theme.container?.height || 'auto',
+  variants: [
+    {
+      props: {
+        variant: 'drawer',
+      },
+      style: {
+        height: 'none',
+      },
+    },
+  ],
+}))
+
+export const RelativeContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ theme }) => {
+  return {
+    position: 'relative',
+    boxSizing: 'content-box',
+    width: '100%',
+    minWidth: theme.breakpoints.values.xs,
+    maxWidth: theme.breakpoints.values.sm,
+    background: theme.palette.background.default,
+    overflow: 'auto',
+    flex: 1,
+    zIndex: 0,
+    ...theme.container,
+    maxHeight:
+      theme.container?.display === 'flex' && !theme.container?.height
+        ? '100%'
+        : theme.container?.maxHeight
+          ? theme.container?.maxHeight
+          : theme.container?.height || defaultMaxHeight,
+    variants: [
+      {
+        props: {
+          variant: 'drawer',
+        },
+        style: {
+          maxHeight: 'none',
+          height: '100%',
+        },
+      },
+    ],
+  }
+})
+
+interface CssBaselineContainerProps {
+  variant?: WidgetVariant
+  paddingTopAdjustment: number
+  elementId: string
+}
+
+const CssBaselineContainer = styled(ScopedCssBaseline, {
+  shouldForwardProp: (prop) =>
+    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
+})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  overflowX: 'clip',
+  margin: 0,
+  width: '100%',
+  maxHeight:
+    variant === 'drawer' || theme.container?.display === 'flex'
+      ? 'none'
+      : theme.container?.maxHeight
+        ? theme.container?.maxHeight
+        : theme.container?.height || defaultMaxHeight,
+  overflowY: 'auto',
+  height: theme.container?.display === 'flex' ? 'auto' : '100%',
+  paddingTop: paddingTopAdjustment,
+  // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes
+  '&:has(.full-page-container)': {
+    height: theme.container?.maxHeight
+      ? theme.container?.maxHeight
+      : theme.container?.height || defaultMaxHeight,
+  },
+}))
+
+export const FlexContainer = styled(Container)({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+})
+
+export const AppContainer: React.FC<PropsWithChildren> = ({ children }) => {
+  // const ref = useRef<HTMLDivElement>(null);
+  const { variant, elementId, theme } = useWidgetConfig()
+  const { headerHeight } = useHeaderHeight()
+  const positionFixedAdjustment =
+    theme?.header?.position === 'fixed' ? headerHeight : 0
+
+  return (
+    <RelativeContainer
+      variant={variant}
+      id={createElementId(ElementId.RelativeContainer, elementId)}
+    >
+      <CssBaselineContainer
+        id={createElementId(ElementId.ScrollableContainer, elementId)}
+        variant={variant}
+        enableColorScheme
+        paddingTopAdjustment={positionFixedAdjustment}
+        elementId={elementId}
+        // ref={ref}
+      >
+        <FlexContainer disableGutters>{children}</FlexContainer>
+      </CssBaselineContainer>
+      {/* <ScrollToLocation elementRef={ref} /> */}
+    </RelativeContainer>
+  )
+}
+
+// export const ScrollToLocation: React.FC<{
+//   elementRef: RefObject<HTMLElement>;
+// }> = ({ elementRef }) => {
+//   const { pathname } = useLocation();
+//   useLayoutEffect(() => {
+//     elementRef.current?.scrollTo(0, 0);
+//   }, [elementRef, pathname]);
+//   return null;
+// };

package/src/components/Avatar/AccountAvatar.tsx

@@ -0,0 +1,61 @@
+import { Wallet } from '@mui/icons-material'
+import { Badge } from '@mui/material'
+import type { Account } from '@openocean.finance/wallet-management'
+import { getConnectorIcon } from '@openocean.finance/wallet-management'
+import { useChain } from '../../hooks/useChain.js'
+import type { ToAddress } from '../../types/widget.js'
+import {
+  AvatarDefault,
+  AvatarDefaultBadge,
+  AvatarMasked,
+} from './Avatar.style.js'
+import { SmallAvatar } from './SmallAvatar.js'
+
+interface AccountAvatarProps {
+  chainId?: number
+  account?: Account
+  toAddress?: ToAddress
+  empty?: boolean
+}
+
+export const AccountAvatar = ({
+  chainId,
+  account,
+  empty,
+  toAddress,
+}: AccountAvatarProps) => {
+  const { chain } = useChain(chainId)
+
+  const avatar = empty ? (
+    <AvatarDefault />
+  ) : account?.connector || toAddress?.logoURI ? (
+    <AvatarMasked
+      src={toAddress?.logoURI || getConnectorIcon(account?.connector)}
+      alt={toAddress?.name || account?.connector?.name}
+    >
+      {(toAddress?.name || account?.connector?.name)?.[0]}
+    </AvatarMasked>
+  ) : (
+    <AvatarDefault>
+      <Wallet sx={{ fontSize: 20 }} />
+    </AvatarDefault>
+  )
+
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={
+        chain ? (
+          <SmallAvatar src={chain.logoURI} alt={chain.name}>
+            {chain.name[0]}
+          </SmallAvatar>
+        ) : (
+          <AvatarDefaultBadge />
+        )
+      }
+    >
+      {avatar}
+    </Badge>
+  )
+}