@openocean.finance/widget 1.0.0

package/src/pages/MainPage/ReviewButton.tsx

@@ -0,0 +1,85 @@
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
+import { useMessageQueue } from '../../components/Messages/useMessageQueue.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
+import { WidgetEvent } from '../../types/events.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+
+export const ReviewButton: React.FC = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const emitter = useWidgetEvents()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
+  const splitState = useSplitSubvariantStore((state) => state.state)
+  const { toAddress, requiredToAddress } = useToAddressRequirements()
+  const { routes, setReviewableRoute } = useRoutes()
+
+  const currentRoute = routes?.[0]
+
+  const { hasMessages } = useMessageQueue(currentRoute, {})
+
+  const handleClick = async () => {
+    if (!currentRoute) {
+      return
+    }
+
+    setReviewableRoute(currentRoute)
+    navigate(navigationRoutes.transactionExecution, {
+      state: { routeId: currentRoute.id },
+    })
+    emitter.emit(WidgetEvent.RouteSelected, {
+      route: currentRoute,
+      routes: routes!,
+    })
+  }
+
+  const getButtonText = (): string => {
+    if (currentRoute) {
+      switch (subvariant) {
+        case 'custom':
+          return t(`button.${subvariantOptions?.custom ?? 'checkout'}Review`)
+        case 'refuel':
+          return t('button.getGas')
+        default: {
+          const transactionType =
+            currentRoute.fromChainId === currentRoute.toChainId
+              ? 'swap'
+              : 'bridge'
+          return t(`button.${transactionType}Review`)
+        }
+      }
+    }
+    switch (subvariant) {
+      case 'custom':
+        return subvariantOptions?.custom === 'deposit'
+          ? t('button.deposit')
+          : t('button.buy')
+      case 'refuel':
+        return t('button.getGas')
+      case 'split':
+        if (splitState) {
+          return t(`button.${splitState}`)
+        }
+        return t('button.exchange')
+      default:
+        return t('button.exchange')
+    }
+  }
+
+  return (
+    <BaseTransactionButton
+      text={getButtonText()}
+      onClick={handleClick}
+      disabled={
+        hasMessages ||
+        !currentRoute ||
+        (currentRoute && requiredToAddress && !toAddress)
+      }
+    />
+  )
+}

package/src/pages/MainPage/SwapSummary.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Box, Typography, styled, Tooltip } from '@mui/material';
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { formatInputAmount ,formatTokenAmount} from '../../utils/format.js'
+import { InfoOutlined,HelpOutline } from '@mui/icons-material'
+
+const SummaryBox = styled(Box)(({ theme }) => ({
+  padding: '1rem',
+  borderRadius: '15px',
+  borderWidth: '1px',
+  borderColor: theme.palette.mode === 'dark' ? '#373D3A' : 'var(--dark-background)',
+  width: '100%',
+  marginTop: '0.5rem',
+}));
+
+const SummaryRow = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginBottom: '0.4rem',
+  
+});
+
+export const SwapSummary: React.FC = () => {
+
+  const {
+    routes,
+  } = useRoutes()
+  let minReceive = '0';
+  let minReceiveUsd = '0';
+  let estGasFee = '0';
+  let priceImpact:any = '--';
+  if(routes){
+    const route:any = routes[0];
+    const fromAmount= +formatTokenAmount(BigInt(route.fromAmount), route.fromToken.decimals)
+    const toAmount= +formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals)
+    const minOut= +formatTokenAmount(BigInt(route.toAmountMin), route.toToken.decimals)
+    minReceive = `${Number(minOut.toFixed(4))} ${route.toToken.symbol}`
+    minReceiveUsd = `~ $${Number((minOut*route.toToken.priceUSD).toFixed(2))}`
+
+    estGasFee = route.estimatedGasFee;
+
+    const inUsdtValue = fromAmount * route.fromToken.priceUSD;
+    const outUsdtValue = toAmount * route.toToken.priceUSD;
+    // priceImpact = (Math.floor(((outUsdtValue - inUsdtValue) / inUsdtValue) * 10000) / 100)
+    // if (inUsdtValue < 10 && priceImpact < -50) {
+    //   priceImpact = -50
+    // }
+    priceImpact=route.priceImpact
+  }
+
+  return (
+    <SummaryBox>
+      <SummaryRow>
+        <Typography variant="body2" color="text.secondary" sx={{display:'flex', alignItems:'center'}}>
+          <Typography component="span" color="text.secondary" sx={{fontSize:'0.875rem'}}>Minimum Receive</Typography>
+        </Typography>
+        <Typography variant="body2">
+          <Typography component="span" color="text.secondary" sx={{fontSize:'0.875rem'}}>{minReceiveUsd}</Typography>
+          <Typography component="span" sx={{fontSize:'0.875rem', ml: 1 }}>{minReceive}</Typography>
+        </Typography>
+      </SummaryRow>
+      <SummaryRow>
+        <Typography variant="body2" color="text.secondary">Est. Gas Fee</Typography>
+        <Typography variant="body2">1</Typography>
+      </SummaryRow>
+      <SummaryRow>
+        <Typography variant="body2" color="text.secondary" sx={{display:'flex', alignItems:'center'}}> 
+          <Typography variant="body2" color="text.secondary">Price Impact</Typography>
+          <Tooltip title="The difference between market price and est. price due to trade size">
+            <HelpOutline sx={{fontSize:'0.975rem',ml: 0.5}}/>
+          </Tooltip>
+        </Typography>
+        <Typography variant="body2">{priceImpact}</Typography>
+      </SummaryRow>
+    </SummaryBox>
+  );
+};
+
+
+
+

package/src/pages/RoutesPage/RoutesPage.style.ts

@@ -0,0 +1,6 @@
+import { Stack as MuiStack, styled } from '@mui/material'
+
+export const Stack = styled(MuiStack)(({ theme }) => ({
+  position: 'relative',
+  padding: theme.spacing(0, 3, 3, 3),
+}))

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -0,0 +1,94 @@
+import type { Route } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'
+import { RouteCard } from '../../components/RouteCard/RouteCard.js'
+import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'
+import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { WidgetEvent } from '../../types/events.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { Stack } from './RoutesPage.style.js'
+
+export const RoutesPage: React.FC<BoxProps> = () => {
+  const { t } = useTranslation()
+  const { navigate } = useNavigateBack()
+  const emitter = useWidgetEvents()
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    dataUpdatedAt,
+    refetchTime,
+    fromChain,
+    refetch,
+    setReviewableRoute,
+  } = useRoutes()
+  const { account } = useAccount({ chainType: fromChain?.chainType })
+  const [toAddress] = useFieldValues('toAddress')
+  const { requiredToAddress } = useToAddressRequirements()
+
+  const headerAction = useMemo(
+    () => (
+      <ProgressToNextUpdate
+        updatedAt={dataUpdatedAt || new Date().getTime()}
+        timeToUpdate={refetchTime}
+        isLoading={isFetching}
+        onClick={() => refetch()}
+        sx={{ marginRight: -1 }}
+        size="medium"
+      />
+    ),
+    [dataUpdatedAt, isFetching, refetch, refetchTime]
+  )
+
+  useHeader(t('header.receive'), headerAction)
+
+  const handleRouteClick = (route: Route) => {
+    setReviewableRoute(route)
+    navigate(navigationRoutes.transactionExecution, {
+      state: { routeId: route.id },
+    })
+    emitter.emit(WidgetEvent.RouteSelected, {
+      route,
+      routes: routes!,
+    })
+  }
+
+  const routeNotFound = !routes?.length && !isLoading && !isFetching
+
+  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress
+
+  const allowInteraction = account.isConnected && !toAddressUnsatisfied
+
+  return (
+    <Stack direction="column" spacing={2} flex={1}>
+      {routeNotFound ? (
+        <RouteNotFoundCard />
+      ) : isLoading ? (
+        Array.from({ length: 3 }).map((_, index) => (
+          <RouteCardSkeleton key={index} />
+        ))
+      ) : (
+        routes?.map((route: Route, index: number) => (
+          <RouteCard
+            key={index}
+            route={route}
+            onClick={
+              allowInteraction ? () => handleRouteClick(route) : undefined
+            }
+            active={index === 0}
+            expanded={routes?.length === 1}
+          />
+        ))
+      )}
+    </Stack>
+  )
+}

package/src/pages/SelectChainPage/SelectChainPage.tsx

@@ -0,0 +1,95 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { Avatar, ListItemAvatar, debounce } from '@mui/material'
+import { type FormEventHandler, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'
+import { FullPageContainer } from '../../components/FullPageContainer.js'
+import { ListItemButton } from '../../components/ListItemButton.js'
+import { ListItemText } from '../../components/ListItemText.js'
+import { StickySearchInput } from '../../components/Search/SearchInput.js'
+import { SearchList } from '../../components/Search/SearchInput.style.js'
+import { SearchNotFound } from '../../components/Search/SearchNotFound.js'
+import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useScrollableContainer } from '../../hooks/useScrollableContainer.js'
+import type { SelectChainPageProps } from './types.js'
+
+export const SelectChainPage: React.FC<SelectChainPageProps> = ({
+  formType,
+  selectNativeToken,
+}) => {
+  const { navigateBack } = useNavigateBack()
+  const { chains, setCurrentChain } = useChainSelect(formType)
+  const selectToken = useTokenSelect(formType, navigateBack)
+  const elementId = useDefaultElementId()
+  const scrollableContainer = useScrollableContainer(elementId)
+
+  const { t } = useTranslation()
+
+  useHeader(t('header.selectChain'))
+
+  const handleClick = async (chain: ExtendedChain) => {
+    if (selectNativeToken) {
+      selectToken(chain.nativeToken.address, chain.id)
+    } else {
+      setCurrentChain(chain.id)
+      navigateBack()
+    }
+  }
+
+  const [filteredChains, setFilteredChains] = useState<ExtendedChain[]>(
+    chains ?? []
+  )
+
+  const handleSearchInputChange: FormEventHandler<HTMLInputElement> = (e) => {
+    const value = (e.target as HTMLInputElement).value
+
+    if (!value) {
+      setFilteredChains(chains ?? [])
+    } else {
+      setFilteredChains(
+        chains
+          ? chains.filter((chain) =>
+              chain.name.toLowerCase().includes(value.toLowerCase())
+            )
+          : []
+      )
+    }
+
+    if (scrollableContainer) {
+      scrollableContainer.scrollTop = 0
+    }
+  }
+
+  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)
+
+  return (
+    <FullPageContainer disableGutters>
+      <StickySearchInput
+        onChange={debouncedSearchInputChange}
+        placeholder={t('main.searchChains')}
+      />
+      {filteredChains.length ? (
+        <SearchList>
+          {filteredChains.map((chain) => (
+            <ListItemButton key={chain.id} onClick={() => handleClick(chain)}>
+              <ListItemAvatar>
+                <Avatar src={chain.logoURI} alt={chain.name}>
+                  {chain.name[0]}
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={chain.name} />
+            </ListItemButton>
+          ))}
+        </SearchList>
+      ) : (
+        <SearchNotFound
+          message={t('info.message.emptyChainList')}
+          adjustForStickySearchInput
+        />
+      )}
+    </FullPageContainer>
+  )
+}

package/src/pages/SelectChainPage/types.ts

@@ -0,0 +1,5 @@
+import type { FormTypeProps } from '../../stores/form/types.js'
+
+export interface SelectChainPageProps extends FormTypeProps {
+  selectNativeToken?: boolean
+}

package/src/pages/SelectEnabledToolsPage.tsx

@@ -0,0 +1,175 @@
+import type { ToolsResponse } from '@lifi/sdk'
+import {
+  Check,
+  CheckBoxOutlineBlankOutlined,
+  CheckBoxOutlined,
+  IndeterminateCheckBoxOutlined,
+} from '@mui/icons-material'
+import {
+  Avatar,
+  IconButton,
+  ListItemAvatar,
+  Tooltip,
+  debounce,
+  useTheme,
+} from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import { type FormEventHandler, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { shallow } from 'zustand/shallow'
+import { FullPageContainer } from '../components/FullPageContainer.js'
+import { ListItemText } from '../components/ListItemText.js'
+import { StickySearchInput } from '../components/Search/SearchInput.js'
+import { SearchList } from '../components/Search/SearchInput.style.js'
+import { SearchNotFound } from '../components/Search/SearchNotFound.js'
+import { SettingsListItemButton } from '../components/SettingsListItemButton.js'
+import { useDefaultElementId } from '../hooks/useDefaultElementId.js'
+import { useHeader } from '../hooks/useHeader.js'
+import { useScrollableContainer } from '../hooks/useScrollableContainer.js'
+import { useTools } from '../hooks/useTools.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
+import { useSettingsStore } from '../stores/settings/useSettingsStore.js'
+
+interface SelectAllCheckboxProps {
+  allCheckboxesSelected: boolean
+  onClick: MouseEventHandler
+  anyCheckboxesSelected: boolean
+  noCheckboxesAvailable: boolean
+}
+
+const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
+  allCheckboxesSelected,
+  anyCheckboxesSelected,
+  noCheckboxesAvailable,
+  onClick,
+}) => {
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const tooltipTitle = noCheckboxesAvailable
+    ? undefined
+    : allCheckboxesSelected
+      ? t('tooltip.deselectAll')
+      : t('tooltip.selectAll')
+
+  return (
+    <Tooltip title={tooltipTitle}>
+      <IconButton
+        size="medium"
+        edge={theme?.navigation?.edge ? 'end' : false}
+        onClick={onClick}
+      >
+        {allCheckboxesSelected ? (
+          <CheckBoxOutlined />
+        ) : anyCheckboxesSelected ? (
+          <IndeterminateCheckBoxOutlined />
+        ) : (
+          <CheckBoxOutlineBlankOutlined />
+        )}
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+type ToolCollectionTypes = ToolsResponse['exchanges'] | ToolsResponse['bridges']
+
+export const SelectEnabledToolsPage: React.FC<{
+  type: 'Bridges' | 'Exchanges'
+}> = ({ type }) => {
+  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'
+  const { tools } = useTools()
+  const { setToolValue, toggleToolKeys } = useSettingsActions()
+  const [enabledTools, disabledTools] = useSettingsStore(
+    (state) => [state[`_enabled${type}`], state[`disabled${type}`]],
+    shallow
+  )
+
+  const { t } = useTranslation()
+  const elementId = useDefaultElementId()
+  const scrollableContainer = useScrollableContainer(elementId)
+  const [filteredTools, setFilteredTools] = useState<ToolCollectionTypes>(
+    tools?.[typeKey] ?? []
+  )
+
+  const headerAction = useMemo(
+    () => (
+      <SelectAllCheckbox
+        allCheckboxesSelected={
+          !!filteredTools.length &&
+          filteredTools.every((tool) => !disabledTools.includes(tool.key))
+        }
+        anyCheckboxesSelected={
+          !!filteredTools.length &&
+          filteredTools.some((tool) => disabledTools.includes(tool.key))
+        }
+        noCheckboxesAvailable={!filteredTools.length}
+        onClick={() =>
+          toggleToolKeys(
+            type,
+            filteredTools.map((tool) => tool.key)
+          )
+        }
+      />
+    ),
+    [disabledTools, toggleToolKeys, type, filteredTools]
+  )
+
+  useHeader(t(`settings.enabled${type}`), headerAction)
+
+  const handleClick = (key: string) => {
+    setToolValue(type, key, !enabledTools[key])
+  }
+
+  const handleSearchInputChange: FormEventHandler<HTMLInputElement> = (e) => {
+    const value = (e.target as HTMLInputElement).value
+
+    if (!value) {
+      setFilteredTools(tools?.[typeKey] ?? [])
+    } else {
+      setFilteredTools(
+        (tools?.[typeKey]
+          ? tools[typeKey].filter((tool) =>
+              tool.name.toLowerCase().includes(value.toLowerCase())
+            )
+          : []) as ToolCollectionTypes
+      )
+    }
+
+    if (scrollableContainer) {
+      scrollableContainer.scrollTop = 0
+    }
+  }
+
+  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)
+
+  return (
+    <FullPageContainer disableGutters>
+      <StickySearchInput
+        onChange={debouncedSearchInputChange}
+        placeholder={t(`main.search${type}`)}
+      />
+      {filteredTools.length ? (
+        <SearchList>
+          {filteredTools.map((tool) => (
+            <SettingsListItemButton
+              key={tool.name}
+              onClick={() => handleClick(tool.key)}
+            >
+              <ListItemAvatar>
+                <Avatar src={tool.logoURI} alt={tool.name}>
+                  {tool.name[0]}
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={tool.name} />
+              {enabledTools[tool.key] && <Check color="primary" />}
+            </SettingsListItemButton>
+          ))}
+        </SearchList>
+      ) : (
+        <SearchNotFound
+          message={t(`info.message.empty${type}List`)}
+          adjustForStickySearchInput
+        />
+      )}
+    </FullPageContainer>
+  )
+}

package/src/pages/SelectNativeTokenPage.tsx

@@ -0,0 +1,47 @@
+import { List, ListItemAvatar } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { TokenAvatar } from '../components/Avatar/TokenAvatar.js'
+import { ListItemButton } from '../components/ListItemButton.js'
+import { ListItemText } from '../components/ListItemText.js'
+import { PageContainer } from '../components/PageContainer.js'
+import { useTokenSelect } from '../components/TokenList/useTokenSelect.js'
+import { useChains } from '../hooks/useChains.js'
+import { useNavigateBack } from '../hooks/useNavigateBack.js'
+import type { FormTypeProps } from '../stores/form/types.js'
+
+export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
+  formType,
+}) => {
+  const { t } = useTranslation()
+  const { navigateBack } = useNavigateBack()
+  const { chains } = useChains()
+  const selectToken = useTokenSelect(formType, navigateBack)
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        sx={{
+          paddingTop: 0,
+          paddingLeft: 1.5,
+          paddingRight: 1.5,
+          paddingBottom: 1.5,
+        }}
+      >
+        {chains?.map((chain) => (
+          <ListItemButton
+            key={chain.id}
+            onClick={() => selectToken(chain.nativeToken.address, chain.id)}
+          >
+            <ListItemAvatar>
+              <TokenAvatar token={chain.nativeToken} chain={chain} />
+            </ListItemAvatar>
+            <ListItemText
+              primary={chain.nativeToken.symbol}
+              secondary={t('main.onChain', { chainName: chain.name })}
+            />
+          </ListItemButton>
+        ))}
+      </List>
+    </PageContainer>
+  )
+}

package/src/pages/SelectTokenPage/SearchTokenInput.style.tsx

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material'
+import { Input as InputBase } from '../../components/Input.js'
+
+export const Input = styled(InputBase)(({ theme }) => ({
+  paddingRight: theme.spacing(1.5),
+}))

package/src/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SearchInput } from '../../components/Search/SearchInput.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldController } from '../../stores/form/useFieldController.js'
+
+export const SearchTokenInput = () => {
+  const { t } = useTranslation()
+  const { setFieldValue } = useFieldActions()
+  const { onChange, onBlur, name, value } = useFieldController({
+    name: 'tokenSearchFilter',
+  })
+
+  useEffect(
+    () => () => {
+      setFieldValue('tokenSearchFilter', '')
+    },
+    [setFieldValue]
+  )
+
+  return (
+    <SearchInput
+      name={name}
+      placeholder={t('main.tokenSearch')}
+      onChange={(e) => onChange((e.target as HTMLInputElement).value)}
+      onBlur={onBlur}
+      value={value as string | undefined}
+    />
+  )
+}