@lifi/widget 3.16.0 → 3.16.1

package/src/pages/MainPage/MainPage.tsx

@@ -4,7 +4,6 @@ import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTr
 import { AmountInput } from '../../components/AmountInput/AmountInput.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
 import { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'
-import { MainMessages } from '../../components/Messages/MainMessages.js'
 import { PageContainer } from '../../components/PageContainer.js'
 import { PoweredBy } from '../../components/PoweredBy/PoweredBy.js'
 import { Routes } from '../../components/Routes/Routes.js'
@@ -15,6 +14,7 @@ import { useHeader } from '../../hooks/useHeader.js'
 import { useWideVariant } from '../../hooks/useWideVariant.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { HiddenUI } from '../../types/widget.js'
+import { MainWarningMessages } from './MainWarningMessages.js'
 import { ReviewButton } from './ReviewButton.js'
 
 export const MainPage: React.FC = () => {
@@ -49,7 +49,7 @@ export const MainPage: React.FC = () => {
       {!wideVariant ? <Routes sx={marginSx} /> : null}
       <SendToWalletButton sx={marginSx} />
       <GasRefuelMessage mb={2} />
-      <MainMessages mb={2} />
+      <MainWarningMessages mb={2} />
       <Box
         sx={{
           display: 'flex',

package/src/pages/MainPage/MainWarningMessages.tsx

@@ -0,0 +1,17 @@
+import type { Route } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+
+interface MainWarningMessagesProps extends BoxProps {
+  route?: Route
+}
+
+export const MainWarningMessages: React.FC<MainWarningMessagesProps> = (
+  props
+) => {
+  const { routes } = useRoutes()
+  const currentRoute = routes?.[0]
+
+  return <WarningMessages route={currentRoute} {...props} />
+}

package/src/pages/MainPage/ReviewButton.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
+import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -15,8 +16,8 @@ export const ReviewButton: React.FC = () => {
   const emitter = useWidgetEvents()
   const { subvariant, subvariantOptions } = useWidgetConfig()
   const splitState = useSplitSubvariantStore((state) => state.state)
-  const { toAddress, requiredToAddress, accountNotDeployedAtDestination } =
-    useToAddressRequirements()
+  const { toAddress, requiredToAddress } = useToAddressRequirements()
+  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
   const { routes, setReviewableRoute } = useRoutes()
 
   const currentRoute = routes?.[0]
@@ -75,7 +76,7 @@ export const ReviewButton: React.FC = () => {
       onClick={handleClick}
       disabled={
         (currentRoute && requiredToAddress && !toAddress) ||
-        accountNotDeployedAtDestination
+        !isCompatibleDestinationAccount
       }
     />
   )

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -8,6 +8,7 @@ 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 { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
@@ -18,6 +19,7 @@ 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 {
@@ -33,8 +35,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   const { account } = useAccount({ chainType: fromChain?.chainType })
   const [toAddress] = useFieldValues('toAddress')
   const { requiredToAddress } = useToAddressRequirements()
-
-  const { t } = useTranslation()
+  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
 
   const headerAction = useMemo(
     () => (
@@ -65,7 +66,9 @@ export const RoutesPage: React.FC<BoxProps> = () => {
 
   const routeNotFound = !routes?.length && !isLoading && !isFetching
 
-  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress
+  const toAddressUnsatisfied =
+    (routes?.[0] && requiredToAddress && !toAddress) ||
+    !isCompatibleDestinationAccount
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   return (

package/src/pages/TransactionPage/ConfirmToAddressSheet.tsx

@@ -1,12 +1,13 @@
 import { Wallet, WarningRounded } from '@mui/icons-material'
 import { Button, Typography } from '@mui/material'
 import type { MutableRefObject } from 'react'
-import { forwardRef } from 'react'
+import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { AlertMessage } from '../../components/Messages/AlertMessage.js'
 import { useChain } from '../../hooks/useChain.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { WidgetEvent } from '../../types/events.js'
 import {
@@ -47,6 +48,8 @@ const ConfirmToAddressSheetContent: React.FC<
   const { t } = useTranslation()
   const { chain } = useChain(toChainId)
   const emitter = useWidgetEvents()
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
 
   const handleContinue = () => {
     emitter.emit(WidgetEvent.LowAddressActivityConfirmed, {
@@ -58,7 +61,7 @@ const ConfirmToAddressSheetContent: React.FC<
   }
 
   return (
-    <SendToWalletSheetContainer>
+    <SendToWalletSheetContainer ref={ref}>
       <IconContainer>
         <Wallet sx={{ fontSize: 40 }} />
       </IconContainer>

package/src/pages/TransactionPage/StartTransactionButton.tsx

@@ -1,6 +1,5 @@
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
-import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
-import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { useMessageQueue } from '../../components/Messages/useMessageQueue.js'
 import type { StartTransactionButtonProps } from './types.js'
 
 export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
@@ -9,21 +8,14 @@ export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
   text,
   loading,
 }) => {
-  const { insufficientGas, isLoading: isGasSufficiencyLoading } =
-    useGasSufficiency(route)
-  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
-    useFromTokenSufficiency(route)
-
-  const shouldDisableButton = insufficientFromToken || !!insufficientGas?.length
+  const { hasMessages, isLoading } = useMessageQueue(route)
 
   return (
     <BaseTransactionButton
       onClick={onClick}
       text={text}
-      disabled={shouldDisableButton}
-      loading={
-        isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading
-      }
+      disabled={hasMessages}
+      loading={isLoading || loading}
     />
   )
 }

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
-import { GasMessage } from '../../components/Messages/GasMessage.js'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
 import { PageContainer } from '../../components/PageContainer.js'
 import { getStepList } from '../../components/Step/StepList.js'
 import { TransactionDetails } from '../../components/TransactionDetails.js'
@@ -207,7 +207,7 @@ export const TransactionPage: React.FC = () => {
       {status === RouteExecutionStatus.Idle ||
       status === RouteExecutionStatus.Failed ? (
         <>
-          <GasMessage mt={2} route={route} />
+          <WarningMessages mt={2} route={route} />
           <Box
             sx={{
               mt: 2,

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -76,7 +76,10 @@ export const URLSearchParamsBuilder = () => {
           const validationResult = await validateAddress({
             value: formValues.toAddress,
           })
-          if (validationResult.isValid) {
+          // Check if the toAddress is still in the query string
+          // Could be modified by the user before the validation is done
+          const { toAddress } = getDefaultValuesFromQueryString()
+          if (validationResult.isValid && toAddress) {
             const bookmark = {
               address: validationResult.address,
               chainType: validationResult.chainType,

package/dist/esm/components/Messages/MainMessages.d.ts

@@ -1,2 +0,0 @@
-import type { BoxProps } from '@mui/material';
-export declare const MainMessages: React.FC<BoxProps>;

package/dist/esm/components/Messages/MainMessages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MainMessages.js","sourceRoot":"","sources":["../../../../src/components/Messages/MainMessages.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAuB,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAA;IAC9B,MAAM,YAAY,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IAChC,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;IAErE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,QAAQ,cAAc,EAAE,EAAE,EAAE,CAAC;YAC3B,KAAK,oBAAoB;gBACvB,OAAO,KAAC,uBAAuB,OAAK,KAAK,GAAI,CAAA;YAC/C,KAAK,kBAAkB;gBACrB,OAAO,CACL,KAAC,qBAAqB,IACpB,eAAe,EAAE,cAAc,CAAC,KAAK,EAAE,eAAe,KAClD,KAAK,GACT,CACH,CAAA;YACH,KAAK,sBAAsB;gBACzB,OAAO,KAAC,yBAAyB,OAAK,KAAK,GAAI,CAAA;YACjD,KAAK,qBAAqB;gBACxB,OAAO,KAAC,wBAAwB,OAAK,KAAK,GAAI,CAAA;YAChD;gBACE,OAAO,IAAI,CAAA;QACf,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,KAAC,QAAQ,IAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,QAAC,YAAY,kBAChE,UAAU,EAAE,GACJ,CACZ,CAAA;AACH,CAAC,CAAA"}