feat: add smart contract account info message for destination wallets (…

…#340)

packages/widget/src/components/AlertMessage/AlertMessage.tsx

@@ -9,22 +9,22 @@ import type { Severity } from './types.js'
 interface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {
   icon: ReactNode
   title: ReactNode
-  multilineTitle?: boolean
+  multiline?: boolean
   severity?: Severity
 }
 
 export const AlertMessage = ({
   title,
   icon,
   children,
-  multilineTitle,
+  multiline,
   severity = 'info',
   ...rest
 }: AlertMessageProps) => (
   <AlertMessageCard severity={severity} {...rest}>
     <AlertMessageCardTitle
       severity={severity}
-      alignItems={multilineTitle ? 'start' : 'center'}
+      alignItems={multiline ? 'start' : 'center'}
     >
       {icon}
       {title}

packages/widget/src/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -20,7 +20,7 @@ export const FundsSufficiencyMessage = () => {
           {t('warning.message.insufficientFunds')}
         </Typography>
       }
-      multilineTitle
+      multiline
     />
   )
 }

packages/widget/src/components/ToAddressRequiredMessage.tsx

@@ -36,7 +36,7 @@ export const ToAddressRequiredMessage: React.FC<
             </Typography>
           }
           icon={<Wallet />}
-          multilineTitle
+          multiline
         />
       </Box>
     </Collapse>

packages/widget/src/i18n/en.json

@@ -88,7 +88,8 @@
       "emptyBridgesList": "We couldn't find any bridges that match your search",
       "emptyExchangesList": "We couldn't find any exchanges that match your search",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
-      "fundsToExchange": "Funds sent to an exchange may be lost",
+      "smartContractAccount": "Always ensure your smart contract account is set up on the destination chain to avoid potential fund loss.",
+      "fundsToExchange": "Funds sent directly to exchanges might not be recoverable.",
       "toAddressIsRequired": "Please provide the destination wallet address to which the funds will be transferred.",
       "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination."
     },

packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,11 +1,12 @@
-import { Info, Wallet } from '@mui/icons-material'
-import { Button, Typography } from '@mui/material'
+import { Info, Wallet, Warning } from '@mui/icons-material'
+import { Box, Button, Typography } from '@mui/material'
 import type { MutableRefObject } from 'react'
 import { forwardRef } 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 { useIsContractAddress } from '../../hooks/useIsContractAddress.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
@@ -21,16 +22,22 @@ import {
 interface ConfirmAddressSheetProps {
   onConfirm: (wallet: Bookmark) => void
   validatedBookmark?: Bookmark
+  chainId?: number
 }
 
 export const ConfirmAddressSheet = forwardRef<
   BottomSheetBase,
   ConfirmAddressSheetProps
->(({ validatedBookmark, onConfirm }, ref) => {
+>(({ validatedBookmark, onConfirm, chainId }, ref) => {
   const { t } = useTranslation()
   const { navigateBack } = useNavigateBack()
   const { setFieldValue } = useFieldActions()
   const { setSendToWallet } = useSendToWalletActions()
+  const isContractAddress = useIsContractAddress(
+    validatedBookmark?.address,
+    chainId,
+    validatedBookmark?.chainType
+  )
 
   const handleClose = () => {
     ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
@@ -71,12 +78,27 @@ export const ConfirmAddressSheet = forwardRef<
         </SheetAddressContainer>
         <AlertMessage
           title={
-            <Typography variant="body2">
-              {t('info.message.fundsToExchange')}
-            </Typography>
+            <Box sx={{ display: 'grid', gap: 1 }}>
+              <Typography variant="body2" fontWeight={500}>
+                {t('info.message.fundsToExchange')}
+              </Typography>
+            </Box>
           }
           icon={<Info />}
+          multiline
         />
+        {isContractAddress ? (
+          <AlertMessage
+            title={
+              <Typography variant="body2" fontWeight={500}>
+                {t('info.message.smartContractAccount')}
+              </Typography>
+            }
+            icon={<Warning />}
+            severity="warning"
+            multiline
+          />
+        ) : null}
         <SendToWalletButtonRow>
           <Button variant="text" onClick={handleClose} fullWidth>
             {t('button.cancel')}

packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,3 +1,4 @@
+import { ChainType } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import {
   Error as ErrorIcon,
@@ -58,15 +59,19 @@ export const SendToWalletPage = () => {
   const [validatedWallet, setValidatedWallet] = useState<Bookmark>()
   const [errorMessage, setErrorMessage] = useState('')
   const { validateAddress, isValidating } = useAddressValidation()
-  const { accounts } = useAccount()
-  const connectedWallets = accounts.filter((account) => account.isConnected)
   const { requiredToChainType } = useToAddressRequirements()
   const [toChainId] = useFieldValues('toChain')
   const { chain: toChain } = useChain(toChainId)
   const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false)
   const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false)
   const { variant } = useWidgetConfig()
 
+  const { accounts } = useAccount()
+  const connectedWallets = accounts.filter((account) => account.isConnected)
+  const connectedEVMChainId = connectedWallets.find(
+    (account) => account.chainType === ChainType.EVM
+  )?.chainId
+
   useHeader(t('header.sendToWallet'))
 
   const handleInputChange = (e: ChangeEvent) => {
@@ -241,6 +246,7 @@ export const SendToWalletPage = () => {
           ref={confirmAddressSheetRef}
           validatedBookmark={validatedWallet}
           onConfirm={handleOnConfirm}
+          chainId={connectedEVMChainId || toChainId}
         />
         <BookmarkAddressSheet
           ref={bookmarkAddressSheetRef}