@lifi/widget 3.7.0-beta.8 → 3.8.0-beta.0

package/dist/pages/SelectEnabledToolsPage.tsx

@@ -1,179 +0,0 @@
-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 { 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 [enabledTools, disabledTools, setToolValue, toggleToolKeys] =
-    useSettingsStore(
-      (state) => [
-        state[`_enabled${type}`],
-        state[`disabled${type}`],
-        state.setToolValue,
-        state.toggleToolKeys,
-      ],
-      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/dist/pages/SelectNativeTokenPage.tsx

@@ -1,47 +0,0 @@
-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/dist/pages/SelectTokenPage/SearchTokenInput.style.tsx

@@ -1,6 +0,0 @@
-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/dist/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,30 +0,0 @@
-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}
-    />
-  )
-}

package/dist/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,60 +0,0 @@
-import { Box } from '@mui/material'
-import type { FC } from 'react'
-import { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'
-import { FullPageContainer } from '../../components/FullPageContainer.js'
-import { TokenList } from '../../components/TokenList/TokenList.js'
-import { useHeader } from '../../hooks/useHeader.js'
-import { useNavigateBack } from '../../hooks/useNavigateBack.js'
-import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'
-import { useSwapOnly } from '../../hooks/useSwapOnly.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import type { FormTypeProps } from '../../stores/form/types.js'
-import { SearchTokenInput } from './SearchTokenInput.js'
-import { useTokenListHeight } from './useTokenListHeight.js'
-
-export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
-  useScrollableOverflowHidden()
-  const { navigateBack } = useNavigateBack()
-  const headerRef = useRef<HTMLElement>(null)
-  const listParentRef = useRef<HTMLUListElement | null>(null)
-  const { tokenListHeight, minListHeight } = useTokenListHeight({
-    listParentRef,
-    headerRef,
-  })
-
-  const swapOnly = useSwapOnly()
-
-  const { subvariant } = useWidgetConfig()
-  const { t } = useTranslation()
-  const title =
-    formType === 'from'
-      ? subvariant === 'custom'
-        ? t('header.payWith')
-        : t('header.from')
-      : t('header.to')
-
-  useHeader(title)
-
-  const hideChainSelect = swapOnly && formType === 'to'
-
-  return (
-    <FullPageContainer disableGutters>
-      <Box pb={2} px={3} ref={headerRef}>
-        {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
-        <Box mt={!hideChainSelect ? 2 : 0}>
-          <SearchTokenInput />
-        </Box>
-      </Box>
-      <Box height={minListHeight}>
-        <TokenList
-          parentRef={listParentRef}
-          height={tokenListHeight}
-          onClick={navigateBack}
-          formType={formType}
-        />
-      </Box>
-    </FullPageContainer>
-  )
-}

package/dist/pages/SelectTokenPage/types.ts

@@ -1,4 +0,0 @@
-export enum TokenFilterType {
-  My = 0,
-  All = 1,
-}

package/dist/pages/SelectTokenPage/useTokenListHeight.ts

@@ -1,108 +0,0 @@
-import { debounce, useTheme } from '@mui/material'
-import type { MutableRefObject } from 'react'
-import { useLayoutEffect, useState } from 'react'
-import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'
-import {
-  ElementId,
-  getAppContainer,
-  getHeaderElement,
-  getScrollableContainer,
-} from '../../utils/elements.js'
-
-const getContentHeight = (
-  elementId: string,
-  listParentRef: MutableRefObject<HTMLUListElement | null>
-) => {
-  const containerElement = getScrollableContainer(elementId)
-
-  const headerElement = getHeaderElement(elementId)
-
-  const listParentElement = listParentRef?.current
-
-  let oldHeight: string | undefined = undefined
-
-  // This covers the case where in full height flex mode when the browser height is reduced
-  // - this allows the virtualised token list to be made smaller
-  if (listParentElement) {
-    oldHeight = listParentElement.style.height
-    listParentElement.style.height = '0'
-  }
-
-  if (!containerElement || !headerElement) {
-    console.warn(
-      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`
-    )
-    return 0
-  }
-  const { height: containerHeight } = containerElement.getBoundingClientRect()
-  const { height: headerHeight } = headerElement.getBoundingClientRect()
-
-  // This covers the case where in full height flex mode when the browser height is reduced the
-  // - this allows the virtualised token list to be set to minimum size
-  if (listParentElement && oldHeight) {
-    listParentElement.style.height = oldHeight
-  }
-
-  return containerHeight - headerHeight
-}
-
-interface UseContentHeightProps {
-  listParentRef: MutableRefObject<HTMLUListElement | null>
-  headerRef: MutableRefObject<HTMLElement | null>
-}
-
-export const minTokenListHeight = 360
-export const minMobileTokenListHeight = 160
-
-// NOTE: this hook is implicitly tied to the widget height functionality in the
-//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
-//   CSS changes in those components can have implications for the functionality in this hook
-
-export const useTokenListHeight = ({
-  listParentRef,
-  headerRef,
-}: UseContentHeightProps) => {
-  const elementId = useDefaultElementId()
-  const [contentHeight, setContentHeight] = useState<number>(0)
-  const theme = useTheme()
-
-  useLayoutEffect(() => {
-    const handleResize = () => {
-      setContentHeight(getContentHeight(elementId, listParentRef))
-    }
-
-    const processResize = debounce(() => handleResize(), 40)
-
-    // calling this on initial mount prevents the lists resizing appearing glitchy
-    handleResize()
-
-    const appContainer = getAppContainer(elementId)
-
-    let resizeObserver: ResizeObserver
-    if (appContainer) {
-      resizeObserver = new ResizeObserver(processResize)
-      resizeObserver.observe(appContainer)
-    }
-
-    return () => {
-      if (resizeObserver) {
-        resizeObserver.disconnect()
-      }
-    }
-  }, [elementId, listParentRef])
-
-  const minListHeight =
-    theme.container?.height === '100%'
-      ? minMobileTokenListHeight
-      : minTokenListHeight
-
-  const tokenListHeight = Math.max(
-    contentHeight - (headerRef.current?.offsetHeight ?? 0),
-    minListHeight
-  )
-
-  return {
-    minListHeight,
-    tokenListHeight,
-  }
-}

package/dist/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -1,229 +0,0 @@
-import { Error as ErrorIcon, Info, TurnedIn } from '@mui/icons-material'
-import { LoadingButton } from '@mui/lab'
-import { Button, Typography } from '@mui/material'
-import type { ChangeEvent, MutableRefObject } from 'react'
-import { forwardRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { AlertMessage } from '../../components/AlertMessage/AlertMessage.js'
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
-import { Input } from '../../components/Input.js'
-import { useAddressValidation } from '../../hooks/useAddressValidation.js'
-import type { Bookmark } from '../../stores/bookmarks/types.js'
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
-import {
-  AddressInput,
-  BookmarkInputFields,
-  IconContainer,
-  SendToWalletButtonRow,
-  SendToWalletCard,
-  SendToWalletSheetContainer,
-  SheetAddressContainer,
-  SheetTitle,
-  ValidationAlert,
-} from './SendToWalletPage.style.js'
-import type { BookmarkError } from './types.js'
-
-interface BookmarkAddressProps {
-  onAddBookmark: (bookmark: Bookmark) => void
-  validatedWallet?: Bookmark
-}
-
-export const BookmarkAddressSheet = forwardRef<
-  BottomSheetBase,
-  BookmarkAddressProps
->(({ validatedWallet, onAddBookmark }, ref) => {
-  const { t } = useTranslation()
-  const [name, setName] = useState('')
-  const [address, setAddress] = useState('')
-  const [error, setError] = useState<BookmarkError>()
-  const { validateAddress, isValidating } = useAddressValidation()
-  const { getBookmark } = useBookmarkActions()
-
-  const nameValue = name.trim() || validatedWallet?.name || ''
-  const addressValue = address || validatedWallet?.address || ''
-
-  const handleCancel = () => {
-    setError(undefined)
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
-  }
-
-  const validateWithAddressFromInput = async () => {
-    const validationResult = await validateAddress({ value: address })
-    if (!validationResult.isValid) {
-      setError({ type: 'address', message: validationResult.error })
-      return
-    }
-
-    return {
-      name: nameValue,
-      address: validationResult.address,
-      chainType: validationResult.chainType,
-    }
-  }
-
-  const validateWithValidatedWallet = (validatedWallet: Bookmark) => {
-    if (error) {
-      setError(undefined)
-    }
-    return {
-      name: nameValue,
-      address: validatedWallet.address,
-      chainType: validatedWallet.chainType,
-    }
-  }
-
-  const handleBookmark = async () => {
-    if (isValidating) {
-      return
-    }
-    if (!nameValue) {
-      setError({
-        type: 'name',
-        message: t('error.title.bookmarkNameRequired'),
-      })
-      return
-    }
-    if (!addressValue) {
-      setError({
-        type: 'address',
-        message: t('error.title.walletAddressRequired'),
-      })
-      return
-    }
-
-    //  If the validatedWallet is supplied as a prop then we should assume
-    //  the address has already been validated
-    const validatedBookmark = validatedWallet
-      ? validateWithValidatedWallet(validatedWallet)
-      : await validateWithAddressFromInput()
-
-    if (validatedBookmark) {
-      const existingBookmark = getBookmark(validatedBookmark.address)
-      if (existingBookmark) {
-        setError({
-          type: 'address',
-          message: t('error.title.bookmarkAlreadyExists', {
-            name: existingBookmark.name,
-          }),
-        })
-        return
-      }
-      ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
-
-      onAddBookmark({
-        name: validatedBookmark.name,
-        address: validatedBookmark.address,
-        chainType: validatedBookmark.chainType,
-      })
-    }
-  }
-
-  const handleAddressInputChange = (e: ChangeEvent) => {
-    if (error) {
-      setError(undefined)
-    }
-    setAddress((e.target as HTMLInputElement).value.trim())
-  }
-
-  const handleNameInputChange = (e: ChangeEvent) => {
-    if (error) {
-      setError(undefined)
-    }
-    setName((e.target as HTMLInputElement).value)
-  }
-
-  const resetValues = () => {
-    setName('')
-    setAddress('')
-  }
-
-  return (
-    <BottomSheet ref={ref} onClose={resetValues}>
-      <SendToWalletSheetContainer>
-        <IconContainer>
-          <TurnedIn sx={{ fontSize: 40 }} />
-        </IconContainer>
-        <SheetTitle>{t('sendToWallet.bookmarkWallet')}</SheetTitle>
-        {validatedWallet ? (
-          <SheetAddressContainer>
-            {validatedWallet?.name ? (
-              <Typography fontWeight={600} mb={0.5}>
-                {validatedWallet?.name}
-              </Typography>
-            ) : null}
-            <Typography>{validatedWallet?.address}</Typography>
-          </SheetAddressContainer>
-        ) : null}
-        <BookmarkInputFields>
-          <SendToWalletCard type={error?.type === 'name' ? 'error' : 'default'}>
-            <Input
-              size="small"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              onChange={handleNameInputChange}
-              value={name}
-              placeholder={validatedWallet?.name || t('sendToWallet.enterName')}
-              aria-label={validatedWallet?.name || t('sendToWallet.enterName')}
-              inputProps={{ maxLength: 128 }}
-            />
-          </SendToWalletCard>
-          {!validatedWallet && (
-            <SendToWalletCard
-              type={error?.type === 'address' ? 'error' : 'default'}
-            >
-              <AddressInput
-                size="small"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={handleAddressInputChange}
-                value={address}
-                placeholder={t('sendToWallet.enterAddress', {
-                  context: 'long',
-                })}
-                aria-label={t('sendToWallet.enterAddress', {
-                  context: 'long',
-                })}
-                maxRows={2}
-                inputProps={{ maxLength: 128 }}
-                multiline
-              />
-            </SendToWalletCard>
-          )}
-          {error ? (
-            <ValidationAlert icon={<ErrorIcon />}>
-              {error.message}
-            </ValidationAlert>
-          ) : null}
-        </BookmarkInputFields>
-        <AlertMessage
-          title={
-            <Typography variant="body2">
-              {t('info.message.fundsToExchange')}
-            </Typography>
-          }
-          icon={<Info />}
-        />
-        <SendToWalletButtonRow>
-          <Button variant="text" onClick={handleCancel} fullWidth>
-            {t('button.cancel')}
-          </Button>
-          <LoadingButton
-            variant="contained"
-            onClick={handleBookmark}
-            loading={isValidating}
-            loadingPosition="center"
-            fullWidth
-            focusRipple
-          >
-            {t('button.bookmark')}
-          </LoadingButton>
-        </SendToWalletButtonRow>
-      </SendToWalletSheetContainer>
-    </BottomSheet>
-  )
-})