@lifi/widget 4.0.0 → 4.2.0

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -2,13 +2,8 @@ import ErrorIcon from '@mui/icons-material/Error'
 import TurnedIn from '@mui/icons-material/TurnedIn'
 import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { ChangeEvent, RefObject } from 'react'
-import {
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type RefAttributes,
-  useState,
-} from 'react'
+import type { ChangeEvent, JSX, Ref, RefObject } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
@@ -35,213 +30,209 @@ interface BookmarkAddressProps {
   validatedWallet?: Bookmark
 }
 
-export const BookmarkAddressSheet: ForwardRefExoticComponent<
-  BookmarkAddressProps & RefAttributes<BottomSheetBase>
-> = 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()
+export const BookmarkAddressSheet = ({
+  validatedWallet,
+  onAddBookmark,
+  ref,
+}: BookmarkAddressProps & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
+  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 nameValue = name.trim() || validatedWallet?.name || ''
+  const addressValue = address || validatedWallet?.address || ''
 
-    const handleCancel = () => {
-      setError(undefined)
-      ;(ref as RefObject<BottomSheetBase>).current?.close()
+  const handleCancel = () => {
+    setError(undefined)
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
+  }
+
+  const validateWithAddressFromInput = async () => {
+    const validationResult = await validateAddress({ value: address })
+    if (!validationResult.isValid) {
+      setError({ type: 'address', message: validationResult.error })
+      return
     }
 
-    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,
+    }
+  }
 
-      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 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
     }
 
-    const handleBookmark = async () => {
-      if (isValidating) {
-        return
-      }
-      if (!nameValue) {
-        setError({
-          type: 'name',
-          message: t('error.title.bookmarkNameRequired'),
-        })
-        return
-      }
-      if (!addressValue) {
+    //  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.walletAddressRequired'),
+          message: t('error.title.bookmarkAlreadyExists', {
+            name: existingBookmark.name,
+          }),
         })
         return
       }
+      ;(ref as RefObject<BottomSheetBase>).current?.close()
 
-      //  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 RefObject<BottomSheetBase>).current?.close()
-
-        onAddBookmark({
-          name: validatedBookmark.name,
-          address: validatedBookmark.address,
-          chainType: validatedBookmark.chainType,
-        })
-      }
+      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 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 handleNameInputChange = (e: ChangeEvent) => {
+    if (error) {
+      setError(undefined)
     }
+    setName((e.target as HTMLInputElement).value)
+  }
 
-    const resetValues = () => {
-      setName('')
-      setAddress('')
-    }
+  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
-                  sx={{
-                    fontWeight: 600,
-                    mb: 0.5,
-                  }}
-                >
-                  {validatedWallet?.name}
-                </Typography>
-              ) : null}
-              <Typography>{validatedWallet?.address}</Typography>
-            </SheetAddressContainer>
-          ) : null}
-          <BookmarkInputFields>
+  return (
+    <BottomSheet ref={ref} onClose={resetValues}>
+      <SendToWalletSheetContainer>
+        <IconContainer>
+          <TurnedIn sx={{ fontSize: 40 }} />
+        </IconContainer>
+        <SheetTitle>{t('sendToWallet.bookmarkWallet')}</SheetTitle>
+        {validatedWallet ? (
+          <SheetAddressContainer>
+            {validatedWallet?.name ? (
+              <Typography
+                sx={{
+                  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 === 'name' ? 'error' : 'default'}
+              type={error?.type === 'address' ? 'error' : 'default'}
             >
-              <Input
+              <AddressInput
                 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')
-                }
+                onChange={handleAddressInputChange}
+                value={address}
+                placeholder={t('sendToWallet.enterAddress', {
+                  context: 'long',
+                })}
+                aria-label={t('sendToWallet.enterAddress', {
+                  context: 'long',
+                })}
+                maxRows={2}
                 inputProps={{ maxLength: 128 }}
+                multiline
               />
             </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" sx={{ color: 'text.primary' }}>
-                {t('warning.message.fundsLossPrevention')}
-              </Typography>
-            }
-            icon={<WarningRounded />}
-          />
-          <SendToWalletButtonRow>
-            <Button variant="text" onClick={handleCancel} fullWidth>
-              {t('button.cancel')}
-            </Button>
-            <Button
-              variant="contained"
-              onClick={handleBookmark}
-              loading={isValidating}
-              loadingPosition="center"
-              fullWidth
-              focusRipple
-            >
-              {t('button.bookmark')}
-            </Button>
-          </SendToWalletButtonRow>
-        </SendToWalletSheetContainer>
-      </BottomSheet>
-    )
-  }
-)
+          )}
+          {error ? (
+            <ValidationAlert icon={<ErrorIcon />}>
+              {error.message}
+            </ValidationAlert>
+          ) : null}
+        </BookmarkInputFields>
+        <AlertMessage
+          title={
+            <Typography variant="body2" sx={{ color: 'text.primary' }}>
+              {t('warning.message.fundsLossPrevention')}
+            </Typography>
+          }
+          icon={<WarningRounded />}
+        />
+        <SendToWalletButtonRow>
+          <Button variant="text" onClick={handleCancel} fullWidth>
+            {t('button.cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            onClick={handleBookmark}
+            loading={isValidating}
+            loadingPosition="center"
+            fullWidth
+            focusRipple
+          >
+            {t('button.bookmark')}
+          </Button>
+        </SendToWalletButtonRow>
+      </SendToWalletSheetContainer>
+    </BottomSheet>
+  )
+}

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,8 +1,8 @@
 import Wallet from '@mui/icons-material/Wallet'
 import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
-import { forwardRef, useRef } from 'react'
+import type { JSX, Ref, RefObject } from 'react'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
@@ -28,9 +28,12 @@ interface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {
   onClose: () => void
 }
 
-export const ConfirmAddressSheet: ForwardRefExoticComponent<
-  ConfirmAddressSheetProps & RefAttributes<BottomSheetBase>
-> = forwardRef<BottomSheetBase, ConfirmAddressSheetProps>((props, ref) => {
+export const ConfirmAddressSheet = ({
+  ref,
+  ...props
+}: ConfirmAddressSheetProps & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
   const handleClose = () => {
     ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
@@ -40,7 +43,7 @@ export const ConfirmAddressSheet: ForwardRefExoticComponent<
       <ConfirmAddressSheetContent {...props} onClose={handleClose} />
     </BottomSheet>
   )
-})
+}
 
 const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
   validatedBookmark,

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,57 +1,33 @@
-import type { Order } from '@lifi/sdk'
 import Route from '@mui/icons-material/Route'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
+import { CardButton } from '../../components/Card/CardButton.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useSettings } from '../../stores/settings/useSettings.js'
-import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.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 navigate = useNavigate()
   const { isRoutePriorityChanged } = useSettingMonitor()
   const { routePriority } = useSettings(['routePriority'])
-  const currentRoutePriority = routePriority ?? ''
 
-  const handleRoutePriorityChange = (
-    _: React.SyntheticEvent,
-    routePriority: Order
-  ) => {
-    setValue('routePriority', routePriority)
+  const handleClick = () => {
+    navigate({ to: navigationRoutes.routePriority })
   }
 
   return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
-          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
-        </BadgedValue>
-      }
+    <CardButton
+      onClick={handleClick}
       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>
+      <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
+        {routePriority === 'FASTEST'
+          ? t('settings.routePriorityOptions.fastest.title')
+          : t('settings.routePriorityOptions.cheapest.title')}
+      </BadgedValue>
+    </CardButton>
   )
 }

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

@@ -1,13 +1,6 @@
 import { Collapse } from '@mui/material'
-import type { PropsWithChildren, ReactNode } from 'react'
-import {
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type RefAttributes,
-  useId,
-  useImperativeHandle,
-  useRef,
-} from 'react'
+import type { JSX, PropsWithChildren, ReactNode, Ref } from 'react'
+import { useId, useImperativeHandle, useRef } from 'react'
 import { Card } from '../../../components/Card/Card.js'
 import {
   CardRowButton,
@@ -30,61 +23,61 @@ export interface SettingCardExpandableRef {
   toggleExpanded: (forceExpanded?: boolean) => void
 }
 
-export const SettingCardExpandable: ForwardRefExoticComponent<
-  PropsWithChildren<SettingCardExpandableProps> &
-    RefAttributes<SettingCardExpandableRef>
-> = forwardRef<
-  SettingCardExpandableRef,
-  PropsWithChildren<SettingCardExpandableProps>
->(
-  (
-    { icon, title, value, children, disabled, keepValueVisible, onEntered },
-    ref
-  ) => {
-    const { expanded, toggleExpanded } = useSettingsCardExpandable()
-    const buttonId = useId()
-    const collapseId = useId()
-    const buttonRef = useRef<HTMLButtonElement>(null)
+export const SettingCardExpandable = ({
+  icon,
+  title,
+  value,
+  children,
+  disabled,
+  keepValueVisible,
+  onEntered,
+  ref,
+}: PropsWithChildren<SettingCardExpandableProps> & {
+  ref?: Ref<SettingCardExpandableRef>
+}): JSX.Element => {
+  const { expanded, toggleExpanded } = useSettingsCardExpandable()
+  const buttonId = useId()
+  const collapseId = useId()
+  const buttonRef = useRef<HTMLButtonElement>(null)
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        element: buttonRef.current,
-        isExpanded: expanded,
-        toggleExpanded,
-      }),
-      [expanded, toggleExpanded]
-    )
+  useImperativeHandle(
+    ref,
+    () => ({
+      element: buttonRef.current,
+      isExpanded: expanded,
+      toggleExpanded,
+    }),
+    [expanded, toggleExpanded]
+  )
 
-    return (
-      <Card sx={{ p: 1 }}>
-        <CardRowButton
-          ref={buttonRef}
-          id={buttonId}
-          aria-expanded={expanded}
-          aria-controls={collapseId}
-          onClick={disabled ? undefined : () => toggleExpanded()}
-          disableRipple
-          sx={{ p: 1, cursor: disabled ? 'default' : 'pointer' }}
-        >
-          <CardTitleContainer>
-            {icon}
-            <CardValue>{title}</CardValue>
-          </CardTitleContainer>
-          {(!expanded || keepValueVisible) && value}
-        </CardRowButton>
-        <Collapse
-          id={collapseId}
-          role="region"
-          aria-labelledby={buttonId}
-          in={expanded}
-          mountOnEnter
-          unmountOnExit
-          onEntered={onEntered}
-        >
-          {children}
-        </Collapse>
-      </Card>
-    )
-  }
-)
+  return (
+    <Card sx={{ p: 1 }}>
+      <CardRowButton
+        ref={buttonRef}
+        id={buttonId}
+        aria-expanded={expanded}
+        aria-controls={collapseId}
+        onClick={disabled ? undefined : () => toggleExpanded()}
+        disableRipple
+        sx={{ p: 1, cursor: disabled ? 'default' : 'pointer' }}
+      >
+        <CardTitleContainer>
+          {icon}
+          <CardValue>{title}</CardValue>
+        </CardTitleContainer>
+        {(!expanded || keepValueVisible) && value}
+      </CardRowButton>
+      <Collapse
+        id={collapseId}
+        role="region"
+        aria-labelledby={buttonId}
+        in={expanded}
+        mountOnEnter
+        unmountOnExit
+        onEntered={onEntered}
+      >
+        {children}
+      </Collapse>
+    </Card>
+  )
+}