@lifi/widget 0.0.0-preview-6cc63bac

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -0,0 +1,308 @@
+import { useAccount } from '@lifi/wallet-management'
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
+import ErrorIcon from '@mui/icons-material/Error'
+import TurnedIn from '@mui/icons-material/TurnedIn'
+import Wallet from '@mui/icons-material/Wallet'
+import { Box, Tooltip, Typography } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type { ChangeEvent } from 'react'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { ButtonTertiary } from '../../components/ButtonTertiary.js'
+import { CardButton } from '../../components/Card/CardButton.js'
+import { AccountDeployedMessage } from '../../components/Messages/AccountDeployedMessage.js'
+import {
+  AddressType,
+  useAddressValidation,
+} from '../../hooks/useAddressValidation.js'
+import { useChain } from '../../hooks/useChain.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { Bookmark } from '../../stores/bookmarks/types.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
+import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'
+import {
+  AddressInput,
+  FullHeightAdjustablePageContainer,
+  SendToWalletButtonRow,
+  SendToWalletCard,
+  SendToWalletIconButton,
+  ValidationAlert,
+} from './SendToWalletPage.style.js'
+
+export const SendToWalletPage: React.FC = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
+  const confirmAddressSheetRef = useRef<BottomSheetBase>(null)
+  const { bookmarks, recentWallets } = useBookmarks()
+  const {
+    addBookmark,
+    getBookmark,
+    setSelectedBookmark,
+    getSelectedBookmark,
+    addRecentWallet,
+  } = useBookmarkActions()
+  const { setFieldValue } = useFieldActions()
+  const [inputAddressValue, setInputAddressValue] = useState(
+    () => getSelectedBookmark()?.address ?? ''
+  )
+  const [validatedWallet, setValidatedWallet] = useState<Bookmark>()
+  const [errorMessage, setErrorMessage] = useState('')
+  const { validateAddress, isValidating } = useAddressValidation()
+  const { requiredToChainType } = useToAddressRequirements()
+  const [toChainId] = useFieldValues('toChain')
+  const { chain: toChain } = useChain(toChainId)
+  const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false)
+  const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false)
+  const { variant, hiddenUI, requiredUI } = useWidgetConfig()
+
+  const { accounts } = useAccount()
+  const connectedWallets = accounts.filter((account) => account.isConnected)
+
+  useHeader(t('header.sendToWallet'))
+
+  const handleInputChange = (e: ChangeEvent) => {
+    if (errorMessage) {
+      setErrorMessage('')
+    }
+    if (getSelectedBookmark()) {
+      setFieldValue('toAddress', '', { isTouched: true })
+      setSelectedBookmark()
+    }
+    setInputAddressValue((e.target as HTMLInputElement).value.trim())
+  }
+
+  const handleDone = async () => {
+    if (isValidating) {
+      return
+    }
+    if (!inputAddressValue) {
+      setErrorMessage(t('error.title.walletAddressRequired'))
+      return
+    }
+    setIsDoneButtonLoading(true)
+    const validationResult = await validateAddress({
+      value: inputAddressValue,
+      chainType: requiredToChainType,
+      chain: toChain,
+    })
+    setIsDoneButtonLoading(false)
+    if (!validationResult.isValid) {
+      setErrorMessage(validationResult.error)
+      return
+    }
+
+    if (
+      requiredToChainType &&
+      requiredToChainType !== validationResult.chainType
+    ) {
+      setErrorMessage(
+        t('error.title.walletChainTypeInvalid', {
+          chainName: toChain?.name,
+        })
+      )
+      return
+    }
+
+    setValidatedWallet({
+      name:
+        validationResult.addressType === AddressType.NameService
+          ? inputAddressValue
+          : undefined,
+      address: validationResult.address,
+      chainType: validationResult.chainType,
+    })
+    confirmAddressSheetRef.current?.open()
+  }
+
+  const handleBookmarkAddress = async () => {
+    if (isValidating) {
+      return
+    }
+    if (!inputAddressValue) {
+      setErrorMessage(t('error.title.walletAddressRequired'))
+      return
+    }
+
+    const existingBookmarkWallet = getBookmark(inputAddressValue)
+    if (existingBookmarkWallet) {
+      setErrorMessage(
+        t('error.title.bookmarkAlreadyExists', {
+          name: existingBookmarkWallet.name,
+        })
+      )
+      return
+    }
+    setIsBookmarkButtonLoading(true)
+    const validationResult = await validateAddress({
+      value: inputAddressValue,
+    })
+    setIsBookmarkButtonLoading(false)
+
+    if (validationResult.isValid) {
+      setValidatedWallet({
+        name:
+          validationResult.addressType === AddressType.NameService
+            ? inputAddressValue
+            : undefined,
+        address: validationResult.address,
+        chainType: validationResult.chainType,
+      })
+      bookmarkAddressSheetRef.current?.open()
+    } else {
+      setErrorMessage(validationResult.error)
+    }
+  }
+
+  const handleRecentWalletsClick = () => {
+    navigate({ to: navigationRoutes.recentWallets })
+  }
+
+  const handleConnectedWalletsClick = () => {
+    navigate({ to: navigationRoutes.connectedWallets })
+  }
+  const handleBookmarkedWalletsClick = () => {
+    navigate({ to: navigationRoutes.bookmarks })
+  }
+
+  const handleAddBookmark = (bookmark: Bookmark) => {
+    addBookmark(bookmark)
+    navigate({ to: navigationRoutes.bookmarks })
+  }
+
+  const handleOnConfirm = (confirmedWallet: Bookmark) => {
+    setSelectedBookmark(confirmedWallet)
+    addRecentWallet(confirmedWallet)
+  }
+
+  const placeholder = t('sendToWallet.enterAddress', {
+    context: 'long',
+  })
+
+  return (
+    <FullHeightAdjustablePageContainer
+      topGutters
+      bottomGutters
+      enableFullHeight={variant !== 'drawer'}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          marginBottom: 6,
+        }}
+      >
+        <SendToWalletCard type={errorMessage ? 'error' : 'default'}>
+          <AddressInput
+            size="small"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={handleInputChange}
+            value={inputAddressValue}
+            placeholder={placeholder}
+            aria-label={placeholder}
+            maxRows={2}
+            inputProps={{ maxLength: 128 }}
+            multiline
+          />
+          {errorMessage ? (
+            <ValidationAlert icon={<ErrorIcon />} sx={{ pb: 2, paddingX: 2 }}>
+              {errorMessage}
+            </ValidationAlert>
+          ) : null}
+          <SendToWalletButtonRow sx={{ paddingX: 2, paddingBottom: 2 }}>
+            <ButtonTertiary
+              variant="text"
+              onClick={handleDone}
+              loading={isDoneButtonLoading}
+              loadingPosition="center"
+              sx={{ flexGrow: 1 }}
+            >
+              {t('button.done')}
+            </ButtonTertiary>
+            <Tooltip title={t('button.bookmark')}>
+              <SendToWalletIconButton
+                onClick={handleBookmarkAddress}
+                loading={isBookmarkButtonLoading}
+                loadingPosition="center"
+              >
+                <TurnedIn fontSize="small" />
+              </SendToWalletIconButton>
+            </Tooltip>
+          </SendToWalletButtonRow>
+          <ConfirmAddressSheet
+            ref={confirmAddressSheetRef}
+            validatedBookmark={validatedWallet}
+            onConfirm={handleOnConfirm}
+          />
+          <BookmarkAddressSheet
+            ref={bookmarkAddressSheetRef}
+            validatedWallet={validatedWallet}
+            onAddBookmark={handleAddBookmark}
+          />
+        </SendToWalletCard>
+        {requiredUI?.accountDeployedMessage && <AccountDeployedMessage />}
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+        <CardButton
+          title={t('header.recentWallets')}
+          icon={<AccountBalanceWalletIcon />}
+          onClick={handleRecentWalletsClick}
+        >
+          {!!recentWallets.length && (
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
+              {recentWallets.length}
+            </Typography>
+          )}
+        </CardButton>
+        {!hiddenUI?.addressBookConnectedWallets && (
+          <CardButton
+            title={t('sendToWallet.connectedWallets')}
+            icon={<Wallet />}
+            onClick={handleConnectedWalletsClick}
+          >
+            {!!connectedWallets.length && (
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                }}
+              >
+                {connectedWallets.length}
+              </Typography>
+            )}
+          </CardButton>
+        )}
+        <CardButton
+          title={t('header.bookmarkedWallets')}
+          icon={<TurnedIn />}
+          onClick={handleBookmarkedWalletsClick}
+        >
+          {!!bookmarks.length && (
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
+              {bookmarks.length}
+            </Typography>
+          )}
+        </CardButton>
+      </Box>
+    </FullHeightAdjustablePageContainer>
+  )
+}

package/src/pages/SendToWallet/types.ts

@@ -0,0 +1,4 @@
+export interface BookmarkError {
+  type: 'name' | 'address'
+  message: string
+}

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -0,0 +1,59 @@
+import AirlineStops from '@mui/icons-material/AirlineStops'
+import SwapHoriz from '@mui/icons-material/SwapHoriz'
+import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { CardButton } from '../../components/Card/CardButton.js'
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { BadgedValue } from './SettingsCard/BadgedValue.js'
+
+const supportedIcons = {
+  Bridges: AirlineStops,
+  Exchanges: SwapHoriz,
+}
+
+export const BridgeAndExchangeSettings: React.FC<{
+  type: 'Bridges' | 'Exchanges'
+}> = ({ type }) => {
+  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [enabledTools, tools] = useSettingsStore((state) => {
+    const enabledTools = Object.values(state[`_enabled${type}`])
+    return [enabledTools.filter(Boolean).length, enabledTools.length]
+  })
+
+  const { hiddenUI } = useWidgetConfig()
+
+  if (type === 'Bridges' && hiddenUI?.bridgesSettings) {
+    return null
+  }
+
+  const customisationLookUp = {
+    Bridges: isBridgesChanged,
+    Exchanges: isExchangesChanged,
+  }
+
+  const handleClick = () => {
+    navigate({
+      to: navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'],
+    })
+  }
+
+  const Icon = supportedIcons[type]
+
+  return (
+    <CardButton
+      onClick={handleClick}
+      icon={<Icon />}
+      title={t(`settings.enabled${type}`)}
+    >
+      <BadgedValue
+        badgeColor="info"
+        showBadge={customisationLookUp[type]}
+      >{`${enabledTools}/${tools}`}</BadgedValue>
+    </CardButton>
+  )
+}

package/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -0,0 +1,47 @@
+import EvStation from '@mui/icons-material/EvStation'
+import { useTranslation } from 'react-i18next'
+import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { BadgedValue } from './SettingsCard/BadgedValue.js'
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
+
+export const GasPriceSettings: React.FC = () => {
+  const { t } = useTranslation()
+  const { setValue } = useSettingsActions()
+  const { isGasPriceChanged } = useSettingMonitor()
+  const { gasPrice } = useSettings(['gasPrice'])
+
+  const handleGasPriceChange = (_: React.SyntheticEvent, gasPrice: string) => {
+    setValue('gasPrice', gasPrice)
+  }
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue badgeColor="info" showBadge={isGasPriceChanged}>
+          {t(`settings.gasPrice.${gasPrice}` as any)}
+        </BadgedValue>
+      }
+      icon={<EvStation />}
+      title={t('settings.gasPrice.title')}
+    >
+      <CardTabs
+        value={gasPrice}
+        aria-label="tabs"
+        indicatorColor="primary"
+        onChange={handleGasPriceChange}
+        sx={{ mt: 1.5 }}
+      >
+        <Tab label={t('settings.gasPrice.slow')} value="slow" disableRipple />
+        <Tab
+          label={t('settings.gasPrice.normal')}
+          value="normal"
+          disableRipple
+        />
+        <Tab label={t('settings.gasPrice.fast')} value="fast" disableRipple />
+      </CardTabs>
+    </SettingCardExpandable>
+  )
+}

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -0,0 +1,40 @@
+import Language from '@mui/icons-material/Language'
+import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { CardButton } from '../../components/Card/CardButton.js'
+import { CardValue } from '../../components/Card/CardButton.style.js'
+import { useLanguages } from '../../hooks/useLanguages.js'
+import { languageNames } from '../../providers/I18nProvider/constants.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+
+export const LanguageSetting: React.FC = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { hiddenUI } = useWidgetConfig()
+  const { selectedLanguageCode } = useLanguages()
+
+  if (hiddenUI?.language) {
+    return null
+  }
+
+  const handleClick = () => {
+    navigate({ to: navigationRoutes.languages })
+  }
+
+  return (
+    <CardButton
+      onClick={handleClick}
+      icon={<Language />}
+      title={t('language.title')}
+    >
+      <CardValue>
+        {languageNames[selectedLanguageCode as keyof typeof languageNames] ||
+          t('language.name', {
+            lng: selectedLanguageCode,
+          }) ||
+          selectedLanguageCode}
+      </CardValue>
+    </CardButton>
+  )
+}

package/src/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -0,0 +1,12 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+
+export const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    borderRadius: '16px',
+    padding: '16px',
+    svg: {
+      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
+    },
+  }))

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -0,0 +1,83 @@
+import InfoRounded from '@mui/icons-material/InfoRounded'
+import { Box, Button } from '@mui/material'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Dialog } from '../../components/Dialog/Dialog.js'
+import {
+  DialogActions,
+  DialogContainer,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '../../components/Dialog/Dialog.style.js'
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
+import { ResetButtonContainer } from './ResetSettingsButton.style.js'
+
+export const ResetSettingsButton: React.FC = () => {
+  const { t } = useTranslation()
+  const { isCustomRouteSettings, reset } = useSettingMonitor()
+  const [open, setOpen] = useState(false)
+
+  const toggleDialog = useCallback(() => {
+    setOpen((open) => !open)
+  }, [])
+
+  const handleReset = () => {
+    reset()
+    toggleDialog()
+  }
+
+  if (!isCustomRouteSettings) {
+    return null
+  }
+
+  return (
+    <Box
+      sx={{
+        mt: 2,
+      }}
+    >
+      <ResetButtonContainer>
+        <Box
+          sx={{
+            display: 'flex',
+            marginBottom: '12px',
+          }}
+        >
+          <InfoRounded
+            sx={{
+              marginRight: '8px',
+            }}
+          />
+          <Box
+            sx={{
+              fontSize: 14,
+            }}
+          >
+            {t('settings.resetSettings')}
+          </Box>
+        </Box>
+        <Button onClick={toggleDialog} fullWidth>
+          {t('button.resetSettings')}
+        </Button>
+
+        <Dialog open={open} onClose={toggleDialog}>
+          <DialogContainer>
+            <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                {t('warning.message.resetSettings')}
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
+              <Button variant="contained" onClick={handleReset} autoFocus>
+                {t('button.reset')}
+              </Button>
+            </DialogActions>
+          </DialogContainer>
+        </Dialog>
+      </ResetButtonContainer>
+    </Box>
+  )
+}

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -0,0 +1,57 @@
+import type { Order } from '@lifi/sdk'
+import Route from '@mui/icons-material/Route'
+import { useTranslation } from 'react-i18next'
+import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { BadgedValue } from './SettingsCard/BadgedValue.js'
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
+
+const Priorities: Order[] = ['CHEAPEST', 'FASTEST']
+
+export const RoutePrioritySettings: React.FC = () => {
+  const { t } = useTranslation()
+  const { setValue } = useSettingsActions()
+  const { isRoutePriorityChanged } = useSettingMonitor()
+  const { routePriority } = useSettings(['routePriority'])
+  const currentRoutePriority = routePriority ?? ''
+
+  const handleRoutePriorityChange = (
+    _: React.SyntheticEvent,
+    routePriority: Order
+  ) => {
+    setValue('routePriority', routePriority)
+  }
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
+          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
+        </BadgedValue>
+      }
+      icon={<Route />}
+      title={t('settings.routePriority')}
+    >
+      <CardTabs
+        value={currentRoutePriority}
+        aria-label="tabs"
+        indicatorColor="primary"
+        onChange={handleRoutePriorityChange}
+        sx={{ mt: 1.5 }}
+      >
+        {Priorities.map((priority) => {
+          return (
+            <Tab
+              key={priority}
+              label={t(`main.tags.${priority.toLowerCase()}` as any)}
+              value={priority}
+              disableRipple
+            />
+          )
+        })}
+      </CardTabs>
+    </SettingCardExpandable>
+  )
+}

package/src/pages/SettingsPage/SettingsCard/BadgedValue.tsx

@@ -0,0 +1,22 @@
+import type { BadgeProps } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import { CardValue } from '../../../components/Card/CardButton.style.js'
+import { Badge } from './SettingCard.style.js'
+
+interface BadgedValueProps {
+  showBadge: boolean
+  badgeColor?: BadgeProps['color']
+}
+
+export const BadgedValue: React.FC<PropsWithChildren<BadgedValueProps>> = ({
+  showBadge,
+  badgeColor,
+  children,
+}) =>
+  showBadge && badgeColor ? (
+    <Badge variant="dot" color={badgeColor}>
+      <CardValue>{children}</CardValue>
+    </Badge>
+  ) : (
+    <CardValue>{children}</CardValue>
+  )

package/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -0,0 +1,26 @@
+import { Box, badgeClasses, Badge as MuiBadge, styled } from '@mui/material'
+import type React from 'react'
+
+export const SettingsList: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+}))
+
+export const Badge: React.FC<React.ComponentProps<typeof MuiBadge>> = styled(
+  MuiBadge
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1.25),
+  [`.${badgeClasses.badge}`]: {
+    width: 10,
+    height: 10,
+    // the following removes MUI styling so we can position the badge with flex
+    position: 'relative',
+    transform: 'translateX(0)',
+    borderRadius: '50%',
+  },
+}))