From 289e4b67d60161fd6421ea127fe0b225a89272e3 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Mon, 20 Jan 2025 16:24:42 +0100
Subject: [PATCH 1/2] feat: add smart contract account info message for
 destination wallets

---
 .../components/AlertMessage/AlertMessage.tsx  |  6 ++---
 .../GasMessage/FundsSufficiencyMessage.tsx    |  2 +-
 .../components/ToAddressRequiredMessage.tsx   |  2 +-
 packages/widget/src/i18n/en.json              |  3 ++-
 .../SendToWallet/ConfirmAddressSheet.tsx      | 25 +++++++++++++++----
 .../pages/SendToWallet/SendToWalletPage.tsx   | 10 ++++++--
 6 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/widget/src/components/AlertMessage/AlertMessage.tsx b/packages/widget/src/components/AlertMessage/AlertMessage.tsx
index 396afac7a..2e4f33ed3 100644
--- a/packages/widget/src/components/AlertMessage/AlertMessage.tsx
+++ b/packages/widget/src/components/AlertMessage/AlertMessage.tsx
@@ -9,7 +9,7 @@ import type { Severity } from './types.js'
 interface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {
   icon: ReactNode
   title: ReactNode
-  multilineTitle?: boolean
+  multiline?: boolean
   severity?: Severity
 }
 
@@ -17,14 +17,14 @@ 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}
diff --git a/packages/widget/src/components/GasMessage/FundsSufficiencyMessage.tsx b/packages/widget/src/components/GasMessage/FundsSufficiencyMessage.tsx
index a6f3a69b9..b1cf42b98 100644
--- a/packages/widget/src/components/GasMessage/FundsSufficiencyMessage.tsx
+++ b/packages/widget/src/components/GasMessage/FundsSufficiencyMessage.tsx
@@ -20,7 +20,7 @@ export const FundsSufficiencyMessage = () => {
           {t('warning.message.insufficientFunds')}
         </Typography>
       }
-      multilineTitle
+      multiline
     />
   )
 }
diff --git a/packages/widget/src/components/ToAddressRequiredMessage.tsx b/packages/widget/src/components/ToAddressRequiredMessage.tsx
index 6b30ced8b..5c9d6424a 100644
--- a/packages/widget/src/components/ToAddressRequiredMessage.tsx
+++ b/packages/widget/src/components/ToAddressRequiredMessage.tsx
@@ -36,7 +36,7 @@ export const ToAddressRequiredMessage: React.FC<
             </Typography>
           }
           icon={<Wallet />}
-          multilineTitle
+          multiline
         />
       </Box>
     </Collapse>
diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
index 51a57ea24..f0aae297f 100644
--- a/packages/widget/src/i18n/en.json
+++ b/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": "Using a smart contract account? Ensure it's deployed on the destination chain to avoid losing funds.",
+      "fundsToExchange": "Funds sent to an exchange may be lost.",
       "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."
     },
diff --git a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx b/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
index f1417c7f3..6d6afa1ce 100644
--- a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
+++ b/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 { 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,11 +78,19 @@ export const ConfirmAddressSheet = forwardRef<
         </SheetAddressContainer>
         <AlertMessage
           title={
-            <Typography variant="body2">
-              {t('info.message.fundsToExchange')}
-            </Typography>
+            <Box sx={{ display: 'grid', gap: 1 }}>
+              {isContractAddress ? (
+                <Typography variant="body2" fontWeight={500}>
+                  {t('info.message.smartContractAccount')}
+                </Typography>
+              ) : null}
+              <Typography variant="body2" fontWeight={500}>
+                {t('info.message.fundsToExchange')}
+              </Typography>
+            </Box>
           }
           icon={<Info />}
+          multiline={isContractAddress}
         />
         <SendToWalletButtonRow>
           <Button variant="text" onClick={handleClose} fullWidth>
diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
index f96f3ca18..f7de7b407 100644
--- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
+++ b/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,8 +59,6 @@ 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)
@@ -67,6 +66,12 @@ export const SendToWalletPage = () => {
   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}

From f653eeb6f412375c9bafab00e9086d702b74c29a Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Tue, 21 Jan 2025 14:19:08 +0100
Subject: [PATCH 2/2] chore: update message

---
 packages/widget/src/i18n/en.json              |  4 ++--
 .../SendToWallet/ConfirmAddressSheet.tsx      | 21 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
index f0aae297f..f6b899b7b 100644
--- a/packages/widget/src/i18n/en.json
+++ b/packages/widget/src/i18n/en.json
@@ -88,8 +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.",
-      "smartContractAccount": "Using a smart contract account? Ensure it's deployed on the destination chain to avoid losing funds.",
-      "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."
     },
diff --git a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx b/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
index 6d6afa1ce..e57966684 100644
--- a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
+++ b/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
@@ -1,4 +1,4 @@
-import { Info, Wallet } from '@mui/icons-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'
@@ -79,19 +79,26 @@ export const ConfirmAddressSheet = forwardRef<
         <AlertMessage
           title={
             <Box sx={{ display: 'grid', gap: 1 }}>
-              {isContractAddress ? (
-                <Typography variant="body2" fontWeight={500}>
-                  {t('info.message.smartContractAccount')}
-                </Typography>
-              ) : null}
               <Typography variant="body2" fontWeight={500}>
                 {t('info.message.fundsToExchange')}
               </Typography>
             </Box>
           }
           icon={<Info />}
-          multiline={isContractAddress}
+          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')}