@lifi/widget 3.18.5 → 3.19.0-beta.0

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -1,10 +1,8 @@
-import {
-  Error as ErrorIcon,
-  TurnedIn,
-  WarningRounded,
-} from '@mui/icons-material'
+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, MutableRefObject } from 'react'
+import type { ChangeEvent, RefObject } from 'react'
 import { forwardRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -48,7 +46,7 @@ export const BookmarkAddressSheet = forwardRef<
 
   const handleCancel = () => {
     setError(undefined)
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
 
   const validateWithAddressFromInput = async () => {
@@ -112,7 +110,7 @@ export const BookmarkAddressSheet = forwardRef<
         })
         return
       }
-      ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+      ;(ref as RefObject<BottomSheetBase>).current?.close()
 
       onAddBookmark({
         name: validatedBookmark.name,

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -1,10 +1,8 @@
-import {
-  ContentCopyRounded,
-  DeleteOutline,
-  MoreHoriz,
-  OpenInNewRounded,
-  TurnedIn,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import TurnedIn from '@mui/icons-material/TurnedIn'
 import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,6 +1,7 @@
-import { Wallet, WarningRounded } from '@mui/icons-material'
+import Wallet from '@mui/icons-material/Wallet'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -33,7 +34,7 @@ export const ConfirmAddressSheet = forwardRef<
   ConfirmAddressSheetProps
 >((props, ref) => {
   const handleClose = () => {
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
 
   return (

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,11 +1,9 @@
 import type { Account } from '@lifi/wallet-management'
 import { useAccount } from '@lifi/wallet-management'
-import {
-  ContentCopyRounded,
-  MoreHoriz,
-  OpenInNewRounded,
-  Wallet,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import Wallet from '@mui/icons-material/Wallet'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -1,11 +1,9 @@
-import {
-  ContentCopyRounded,
-  DeleteOutline,
-  History,
-  MoreHoriz,
-  OpenInNewRounded,
-  TurnedInNot,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import History from '@mui/icons-material/History'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import TurnedInNot from '@mui/icons-material/TurnedInNot'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -1,8 +1,6 @@
-import {
-  ContentCopyRounded,
-  MoreHoriz,
-  OpenInNewRounded,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,10 +1,8 @@
 import { useAccount } from '@lifi/wallet-management'
-import {
-  Error as ErrorIcon,
-  History,
-  TurnedIn,
-  Wallet,
-} from '@mui/icons-material'
+import ErrorIcon from '@mui/icons-material/Error'
+import History from '@mui/icons-material/History'
+import TurnedIn from '@mui/icons-material/TurnedIn'
+import Wallet from '@mui/icons-material/Wallet'
 import { Box, Tooltip, Typography } from '@mui/material'
 import type { ChangeEvent } from 'react'
 import { useRef, useState } from 'react'

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -1,4 +1,5 @@
-import { AirlineStops, SwapHoriz } from '@mui/icons-material'
+import AirlineStops from '@mui/icons-material/AirlineStops'
+import SwapHoriz from '@mui/icons-material/SwapHoriz'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { shallow } from 'zustand/shallow'

package/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -1,4 +1,4 @@
-import { EvStation } from '@mui/icons-material'
+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'

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -1,4 +1,4 @@
-import { Language } from '@mui/icons-material'
+import Language from '@mui/icons-material/Language'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,4 +1,4 @@
-import { InfoRounded } from '@mui/icons-material'
+import InfoRounded from '@mui/icons-material/InfoRounded'
 import {
   Box,
   Button,

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,5 +1,5 @@
 import type { Order } from '@lifi/sdk'
-import { Route } from '@mui/icons-material'
+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'

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,4 +1,5 @@
-import { Percent, WarningRounded } from '@mui/icons-material'
+import Percent from '@mui/icons-material/Percent'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Typography, debounce } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'

package/src/pages/SettingsPage/ThemeSettings.tsx

@@ -1,4 +1,6 @@
-import { BrightnessAuto, LightMode, Nightlight } from '@mui/icons-material'
+import BrightnessAuto from '@mui/icons-material/BrightnessAuto'
+import LightMode from '@mui/icons-material/LightMode'
+import Nightlight from '@mui/icons-material/Nightlight'
 import { Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { CardValue } from '../../components/Card/CardButton.style.js'

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -1,4 +1,5 @@
-import { ContentCopyRounded, OpenInNew } from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNew from '@mui/icons-material/OpenInNew'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { Card } from '../../components/Card/Card.js'

package/src/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx

@@ -1,4 +1,4 @@
-import { ReceiptLongRounded } from '@mui/icons-material'
+import ReceiptLongRounded from '@mui/icons-material/ReceiptLongRounded'
 import { Container, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 

package/src/pages/TransactionPage/ConfirmToAddressSheet.tsx

@@ -1,6 +1,7 @@
-import { Wallet, WarningRounded } from '@mui/icons-material'
+import Wallet from '@mui/icons-material/Wallet'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -32,7 +33,7 @@ export const ConfirmToAddressSheet = forwardRef<
   ConfirmToAddressSheetProps
 >((props, ref) => {
   const handleClose = () => {
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
 
   return (

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -1,7 +1,7 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk'
-import { WarningRounded } from '@mui/icons-material'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Button, Typography } from '@mui/material'
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import {
   forwardRef,
   useCallback,
@@ -37,19 +37,17 @@ export const ExchangeRateBottomSheet = forwardRef<
   const resolverRef = useRef<(value: boolean) => void>(null)
 
   const handleContinue = () => {
-    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(true)
+    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)
     onContinue?.()
   }
 
   const handleCancel = useCallback(() => {
-    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
-      false
-    )
+    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)
     onCancel?.()
   }, [onCancel, ref])
 
   const handleClose = useCallback(() => {
-    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
+    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(
       false,
       false
     )

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,9 +1,7 @@
-import {
-  Done,
-  ErrorRounded,
-  InfoRounded,
-  WarningRounded,
-} from '@mui/icons-material'
+import Done from '@mui/icons-material/Done'
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import InfoRounded from '@mui/icons-material/InfoRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Button, Skeleton, Typography } from '@mui/material'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,8 +1,8 @@
 import type { Route } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import { WarningRounded } from '@mui/icons-material'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Button, Typography } from '@mui/material'
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -24,7 +24,7 @@ export const TokenValueBottomSheet = forwardRef<
   TokenValueBottomSheetProps
 >(({ route, onContinue, onCancel }, ref) => {
   const handleCancel = () => {
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
     onCancel?.()
   }
 

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -1,5 +1,5 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk'
-import { Delete } from '@mui/icons-material'
+import Delete from '@mui/icons-material/Delete'
 import { Box, Button, Tooltip } from '@mui/material'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/types/widget.ts

@@ -16,13 +16,8 @@ import type {
   SxProps,
   Theme,
 } from '@mui/material'
-import type { TypographyOptions } from '@mui/material/styles/createTypography.js'
-import type {
-  CSSProperties,
-  MutableRefObject,
-  ReactNode,
-  RefObject,
-} from 'react'
+import type { TypographyVariantsOptions } from '@mui/material/styles'
+import type { CSSProperties, ReactNode, RefObject } from 'react'
 import type {
   CoinbaseWalletParameters,
   MetaMaskParameters,
@@ -68,7 +63,7 @@ export type WidgetTheme = {
     'background' | 'grey' | 'primary' | 'secondary' | 'text'
   >
   shape?: Partial<Shape>
-  typography?: TypographyOptions
+  typography?: TypographyVariantsOptions
   components?: WidgetThemeComponents
   container?: CSSProperties
   header?: CSSProperties
@@ -293,7 +288,7 @@ export type FormState = {
   setFieldValue: SetFieldValueFunction
 }
 
-export type FormRef = MutableRefObject<FormState | null>
+export type FormRef = RefObject<FormState | null>
 
 export interface FormRefProps {
   formRef?: FormRef