@openocean.finance/widget 1.0.0

package/src/components/TokenList/useTokenSelect.ts

@@ -0,0 +1,114 @@
+import { useCallback } from 'react'
+import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.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 { WidgetEvent } from '../../types/events.js'
+import type { DisabledUI } from '../../types/widget.js'
+
+export type UseTokenSelectArgs = {
+  formType: FormType
+  onClick?: () => void
+}
+
+export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
+  const { subvariant, disabledUI } = useWidgetConfig()
+  const emitter = useWidgetEvents()
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const autoPopulateToAddress = useToAddressAutoPopulate()
+  const chainOrderStore = useChainOrderStoreContext()
+
+  const tokenKey = FormKeyHelper.getTokenKey(formType)
+  const { onChange } = useFieldController({ name: tokenKey })
+
+  return useCallback(
+    (tokenAddress: string, chainId?: number) => {
+      onChange(tokenAddress)
+      const selectedChainId =
+        chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]
+      // Set chain again to trigger URL builder update
+      setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
+        isDirty: true,
+        isTouched: true,
+      })
+      const amountKey = FormKeyHelper.getAmountKey(formType)
+      if (!disabledUI?.includes(amountKey as DisabledUI)) {
+        setFieldValue(amountKey, '')
+      }
+      const oppositeFormType = formType === 'from' ? 'to' : 'from'
+      const [
+        selectedOppositeTokenAddress,
+        selectedOppositeChainId,
+        selectedToAddress,
+      ] = getFieldValues(
+        FormKeyHelper.getTokenKey(oppositeFormType),
+        FormKeyHelper.getChainKey(oppositeFormType),
+        'toAddress'
+      )
+      // TODO: remove when we enable same chain/token transfers
+      if (
+        selectedOppositeTokenAddress === tokenAddress &&
+        selectedOppositeChainId === selectedChainId &&
+        subvariant !== 'custom'
+      ) {
+        setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
+          isDirty: true,
+          isTouched: true,
+        })
+      }
+
+      // If no opposite token is selected, synchronize the opposite chain to match the currently selected chain
+      const { setChain } = chainOrderStore.getState()
+      if (!selectedOppositeTokenAddress && selectedChainId) {
+        setFieldValue(
+          FormKeyHelper.getChainKey(oppositeFormType),
+          selectedChainId,
+          {
+            isDirty: true,
+            isTouched: true,
+          }
+        )
+        setChain(selectedChainId, oppositeFormType)
+      }
+
+      // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected
+      autoPopulateToAddress({
+        formType,
+        selectedToAddress,
+        selectedChainId,
+        selectedOppositeChainId,
+        selectedOppositeTokenAddress,
+      })
+
+      const eventToEmit =
+        formType === 'from'
+          ? WidgetEvent.SourceChainTokenSelected
+          : WidgetEvent.DestinationChainTokenSelected
+
+      if (selectedChainId) {
+        emitter.emit(eventToEmit, {
+          chainId: selectedChainId,
+          tokenAddress,
+        })
+      }
+
+      onClick?.()
+    },
+    [
+      autoPopulateToAddress,
+      chainOrderStore,
+      disabledUI,
+      emitter,
+      formType,
+      getFieldValues,
+      onChange,
+      onClick,
+      setFieldValue,
+      subvariant,
+    ]
+  )
+}

package/src/components/TokenList/utils.ts

@@ -0,0 +1,42 @@
+import type { TokenAmount } from '../../types/token.js'
+
+export const filteredTokensComparator = (searchFilter: string) => {
+  const isExactMatch = (token: TokenAmount) => {
+    return (
+      token.name?.toUpperCase() === searchFilter ||
+      token.symbol.toUpperCase() === searchFilter ||
+      token.address.toUpperCase() === searchFilter
+    )
+  }
+  return (tokenA: TokenAmount, tokenB: TokenAmount) => {
+    const isExactMatchA = isExactMatch(tokenA)
+    const isExactMatchB = isExactMatch(tokenB)
+
+    // Exact match with logo
+    if (isExactMatchB && tokenB.logoURI) {
+      return 1
+    }
+    if (isExactMatchA && tokenA.logoURI) {
+      return -1
+    }
+
+    // Any token with a logo (exact match or not)
+    if (tokenB.logoURI && !tokenA.logoURI) {
+      return 1
+    }
+    if (tokenA.logoURI && !tokenB.logoURI) {
+      return -1
+    }
+
+    // Exact match without logo
+    if (isExactMatchB && !tokenB.logoURI) {
+      return 1
+    }
+    if (isExactMatchA && !tokenA.logoURI) {
+      return -1
+    }
+
+    // All other tokens are considered equal in sorting priority
+    return 0
+  }
+}

package/src/components/TokenRate/TokenRate.style.ts

@@ -0,0 +1,17 @@
+import { Typography, styled } from '@mui/material'
+
+export const TokenRateTypography = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  lineHeight: 1.429,
+  fontWeight: 500,
+  color: theme.palette.text.primary,
+  cursor: 'pointer',
+  '&:hover': {
+    opacity: 1,
+  },
+  opacity: 0.56,
+  transition: theme.transitions.create(['opacity'], {
+    duration: theme.transitions.duration.enteringScreen,
+    easing: theme.transitions.easing.easeOut,
+  }),
+}))

package/src/components/TokenRate/TokenRate.tsx

@@ -0,0 +1,64 @@
+import type { RouteExtended } from '@lifi/sdk'
+import type { TypographyProps } from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
+import { formatUnits } from 'viem'
+import { create } from 'zustand'
+import { TokenRateTypography } from './TokenRate.style.js'
+
+interface TokenRateProps extends TypographyProps {
+  route: RouteExtended
+}
+
+interface TokenRateState {
+  isForward: boolean
+  toggleIsForward(): void
+}
+
+const useTokenRate = create<TokenRateState>((set) => ({
+  isForward: true,
+  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
+}))
+
+export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
+  const { t } = useTranslation()
+  const { isForward, toggleIsForward } = useTokenRate()
+
+  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {
+    e.stopPropagation()
+    toggleIsForward()
+  }
+
+  const lastStep = route.steps.at(-1)
+
+  const fromToken = {
+    ...route.fromToken,
+    amount: BigInt(route.fromAmount),
+  }
+  const toToken = {
+    ...(lastStep?.execution?.toToken ??
+      lastStep?.action.toToken ??
+      route.toToken),
+    amount: lastStep?.execution?.toAmount
+      ? BigInt(lastStep.execution.toAmount)
+      : BigInt(route.toAmount),
+  }
+
+  const fromToRate =
+    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /
+    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))
+  const toFromRate =
+    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /
+    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))
+
+  const rateText = isForward
+    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`
+    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements:
+    <TokenRateTypography onClick={toggleRate} role="button">
+      {rateText}
+    </TokenRateTypography>
+  )
+}

package/src/components/TransactionDetails.tsx

@@ -0,0 +1,369 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { LocalGasStationRounded } from '@mui/icons-material'
+import { HelpOutline } from '@mui/icons-material'
+import type { CardProps } from '@mui/material'
+import { Box, Collapse, Tooltip, Typography } from '@mui/material'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../hooks/useChain.js'
+import { useGasPrice } from '../hooks/useGasPrice.js'
+import { useToken } from '../hooks/useToken.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { isRouteDone } from '../stores/routes/utils.js'
+import { useSplitSubvariantStore } from '../stores/settings/useSplitSubvariantStore.js'
+import { formatTokenAmount, formatTokenPrice } from '../utils/format.js'
+import { getPriceImpact } from '../utils/getPriceImpact.js'
+import { Card } from './Card/Card.js'
+import { IconTypography } from './IconTypography.js'
+import { TokenRate } from './TokenRate/TokenRate.js'
+
+interface TransactionDetailsProps extends CardProps {
+  route?: RouteExtended
+}
+
+export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
+  route,
+  ...props
+}) => {
+  const { t } = useTranslation()
+  const { feeConfig } = useWidgetConfig()
+  const [cardExpanded, setCardExpanded] = useState(true)
+  const [fromChainId] = useFieldValues('fromChain')
+  const [toChainId] = useFieldValues('toChain')
+  const { chain } = useChain(fromChainId)
+  const [state] = useSplitSubvariantStore((storeState) => [storeState.state])
+  const isBradge = route ? fromChainId !== toChainId : state === 'bridge'
+  const { token } = useToken(fromChainId, chain?.nativeToken.address)
+  const { gasPrice } = useGasPrice(fromChainId?.toString() || '')
+
+  if (!route) {
+    route = {
+      fromAmount: '0',
+      toAmount: '0',
+      fromToken: {
+        name: '',
+        address: '',
+        symbol: '',
+        chainId: 1,
+        decimals: 0,
+        priceUSD: '0',
+      },
+      toToken: {
+        name: '',
+        address: '',
+        symbol: '',
+        chainId: 1,
+        decimals: 0,
+        priceUSD: '0',
+      },
+      priceImpact: '0',
+      fromAmountMin: 0,
+      estimatedGas: 0,
+      steps: [],
+    }
+  }
+  const toggleCard = () => {
+    setCardExpanded((cardExpanded) => !cardExpanded)
+  }
+
+  let gasCostUSD = 0
+  const feeCosts = []
+  const estimatedGas = route?.estimatedGas || route?.data?.estimatedGas
+  if (token && gasPrice && estimatedGas) {
+    const d = 10 ** token.decimals
+    gasCostUSD =
+      Number(token.priceUSD) * ((Number(gasPrice) * Number(estimatedGas)) / d)
+  }
+  if (isBradge && route?.data?.prependedOperatingExpenseCost) {
+    const decimals = 10 ** route.fromToken.decimals
+    gasCostUSD =
+      (route.data.prependedOperatingExpenseCost / decimals) *
+      Number(route.fromToken.priceUSD)
+  }
+
+  const priceImpact = getPriceImpact({
+    fromAmount: BigInt(route?.fromAmount),
+    toAmount: BigInt(route?.toAmount),
+    fromToken: route?.fromToken,
+    toToken: route?.toToken,
+  })
+
+  const feeCollectionStep = route.steps[0]
+    ? route.steps[0].includedSteps.find(
+        (includedStep) => includedStep.tool === 'feeCollection'
+      )
+    : 0
+
+  let feeAmountUSD = 0
+
+  if (feeCollectionStep) {
+    const estimatedFromAmount =
+      BigInt(feeCollectionStep.estimate.fromAmount) -
+      BigInt(feeCollectionStep.estimate.toAmount)
+
+    feeAmountUSD = formatTokenPrice(
+      estimatedFromAmount,
+      feeCollectionStep.action.fromToken.priceUSD,
+      feeCollectionStep.action.fromToken.decimals
+    )
+  }
+
+  const hasGaslessSupport = 12
+
+  const showIntegratorFeeCollectionDetails =
+    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport
+
+  return (
+    <Card selectionColor="secondary" {...props}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          px: 2,
+          py: 1.75,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'left',
+          }}
+        >
+          <TokenRate route={route} />
+        </Box>
+        <Collapse timeout={100} in={!cardExpanded} mountOnEnter>
+          <Box
+            onClick={toggleCard}
+            // biome-ignore lint/a11y/useSemanticElements:
+            role="button"
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              px: 1,
+              cursor: 'pointer',
+            }}
+          >
+            <IconTypography mr={0.5} fontSize={16}>
+              <LocalGasStationRounded fontSize="inherit" />
+            </IconTypography>
+            <Typography
+              data-value={hasGaslessSupport ? 0 : combinedFeesUSD}
+              sx={{
+                fontSize: 14,
+                color: 'text.primary',
+                fontWeight: 600,
+                lineHeight: 1.429,
+              }}
+            >
+              {hasGaslessSupport
+                ? t('main.fees.free')
+                : t('format.currency', { value: combinedFeesUSD })}
+            </Typography>
+          </Box>
+        </Collapse>
+        {/* <CardIconButton onClick={toggleCard} size="small">
+          {cardExpanded ? (
+            <ExpandLess fontSize="inherit" />
+          ) : (
+            <ExpandMore fontSize="inherit" />
+          )}
+        </CardIconButton> */}
+      </Box>
+      <Collapse timeout={225} in={cardExpanded} mountOnEnter>
+        <Box
+          sx={{
+            px: 2,
+            pb: 2,
+          }}
+        >
+          {route && (isBradge || route.fromChainId !== 1151111081099710) && (
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                mb: 0.5,
+              }}
+            >
+              <Typography variant="body2" color="text.secondary">
+                {!isBradge ? t('main.fees.network') : 'Fee'}
+              </Typography>
+
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                {gasCostUSD
+                  ? t('format.currency', {
+                      value: gasCostUSD,
+                    })
+                  : '--'}
+              </Typography>
+            </Box>
+          )}
+          {feeCosts.length ? (
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                mb: 0.5,
+              }}
+            >
+              <Typography variant="body2" color="text.secondary">
+                {t('main.fees.provider')}
+              </Typography>
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                {feeCostUSD
+                  ? t('format.currency', {
+                      value: feeCostUSD,
+                    })
+                  : '--'}
+              </Typography>
+            </Box>
+          ) : null}
+          {showIntegratorFeeCollectionDetails ? (
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                mb: 0.5,
+              }}
+            >
+              <Typography variant="body2" color="text.secondary">
+                {feeConfig?.name
+                  ? t('main.fees.integrator', { tool: feeConfig.name })
+                  : t('main.fees.defaultIntegrator')}
+              </Typography>
+              {feeConfig?.name ? (
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {t('format.currency', {
+                    value: feeAmountUSD,
+                  })}
+                </Typography>
+              ) : (
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {t('format.currency', {
+                    value: feeAmountUSD,
+                  })}
+                </Typography>
+              )}
+            </Box>
+          ) : null}
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              mb: 0.5,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{ display: 'flex', alignItems: 'center' }}
+            >
+              <Typography variant="body2" color="text.secondary">
+                {t('main.priceImpact')}
+              </Typography>
+              <Tooltip title="The difference between market price and est. price due to trade size">
+                <HelpOutline
+                  sx={{
+                    fontSize: '0.975rem',
+                    ml: 0.5,
+                    color: 'text.secondary',
+                  }}
+                />
+              </Tooltip>
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: 600,
+                color: priceImpact
+                  ? Number.parseFloat(priceImpact) > 0
+                    ? 'success.main'
+                    : Number.parseFloat(priceImpact) < 0
+                      ? 'error.main'
+                      : 'text.primary'
+                  : 'text.primary',
+              }}
+            >
+              {priceImpact ? t('format.percent', { value: priceImpact }) : '--'}
+            </Typography>
+          </Box>
+          {!isBradge && (
+            <Box>
+              {!isRouteDone(route) ? (
+                <>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      mb: 0.5,
+                    }}
+                  >
+                    <Typography variant="body2" color="text.secondary">
+                      {t('main.maxSlippage')}
+                    </Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                      {t('format.percent', {
+                        value: route.steps[0].action.slippage,
+                      })}
+                    </Typography>
+                  </Box>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <Typography variant="body2" color="text.secondary">
+                      {t('main.minReceived')}
+                    </Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                      {t('format.tokenAmount', {
+                        value: formatTokenAmount(
+                          BigInt(route.toAmountMin),
+                          route.toToken.decimals
+                        ),
+                      })}{' '}
+                      {route.toToken.symbol}
+                    </Typography>
+                  </Box>
+                </>
+              ) : (
+                <>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      mb: 0.5,
+                    }}
+                  >
+                    <Typography variant="body2" color="text.secondary">
+                      {t('main.maxSlippage')}
+                    </Typography>
+
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                      --
+                    </Typography>
+                  </Box>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <Typography variant="body2" color="text.secondary">
+                      {t('main.minReceived')}
+                    </Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                      --
+                    </Typography>
+                  </Box>
+                </>
+              )}
+            </Box>
+          )}
+        </Box>
+      </Collapse>
+    </Card>
+  )
+}

package/src/config/coinbase.ts

@@ -0,0 +1,7 @@
+import type { CoinbaseWalletParameters } from 'wagmi/connectors'
+import { OOToolLogo } from '../icons/lifi.js'
+
+export const defaultCoinbaseConfig: CoinbaseWalletParameters = {
+  appName: 'OpenOcean',
+  appLogoUrl: OOToolLogo,
+}

package/src/config/constants.ts

@@ -0,0 +1,3 @@
+export const defaultMaxHeight = 686
+
+export const openOceanExplorerUrl = 'https://openocean.finance'

package/src/config/metaMask.ts

@@ -0,0 +1,13 @@
+import type { MetaMaskParameters } from 'wagmi/connectors'
+import { OOToolLogo } from '../icons/lifi.js'
+
+export const defaultMetaMaskConfig: MetaMaskParameters = {
+  dappMetadata: {
+    name: 'OpenOcean',
+    url:
+      typeof window !== 'undefined'
+        ? (window as any)?.location.href
+        : 'https://openocean.finance/',
+    base64Icon: OOToolLogo,
+  },
+}

package/src/config/queryClient.ts

@@ -0,0 +1,21 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      enabled: true,
+      refetchInterval: false,
+      refetchIntervalInBackground: false,
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: true,
+      refetchOnMount: true,
+      retryOnMount: true,
+      // suspense: true,
+    },
+    mutations: {
+      onError: (_error) => {
+        //
+      },
+    },
+  },
+})

package/src/config/version.ts

@@ -0,0 +1,2 @@
+export const name = '@openocean.finance/widget'
+export const version = '1.0.0'

package/src/config/walletConnect.ts

@@ -0,0 +1,5 @@
+import type { WalletConnectParameters } from 'wagmi/connectors'
+
+export const defaultWalletConnectConfig: WalletConnectParameters = {
+  projectId: '5432e3507d41270bee46b7b85bbc2ef8',
+}

package/src/hooks/timer/useInterval.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react'
+
+export function useInterval(callback: () => void, delay: number) {
+  const callbacRef = useRef<() => void>(null)
+
+  // update callback function with current render callback that has access to latest props and state
+  useEffect(() => {
+    callbacRef.current = callback
+  })
+
+  useEffect(() => {
+    if (!delay) {
+      return () => {}
+    }
+
+    const interval = setInterval(() => {
+      callbacRef.current?.()
+    }, delay)
+    return () => clearInterval(interval)
+  }, [delay])
+}