From 317f8b131cfc0c685ebb5e4f4fe1a9828afa4a51 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Fri, 31 Jan 2025 15:23:07 +0100
Subject: [PATCH] fix: improve funds loss warning message

---
 packages/widget/src/i18n/en.json              | 15 ++++----
 .../SendToWallet/BookmarkAddressSheet.tsx     | 12 ++++--
 .../SendToWallet/ConfirmAddressSheet.tsx      | 37 ++++---------------
 .../pages/SendToWallet/SendToWalletPage.tsx   |  5 ---
 4 files changed, 23 insertions(+), 46 deletions(-)

diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
index ec747d714..25d84c26d 100644
--- a/packages/widget/src/i18n/en.json
+++ b/packages/widget/src/i18n/en.json
@@ -84,15 +84,13 @@
     "message": {
       "autoRefuel": "You're low on {{chainName}} gas. By continuing, you'll get enough gas to complete the transaction.",
       "emptyActiveTransactions": "Transactions in progress will appear here. Once completed, find them in transaction history.",
-      "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
-      "emptyChainList": "We couldn't find any chains that match your search",
       "emptyBridgesList": "We couldn't find any bridges that match your search",
+      "emptyChainList": "We couldn't find any chains that match your search",
       "emptyExchangesList": "We couldn't find any exchanges that match your search",
+      "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
-      "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."
+      "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.",
+      "toAddressIsRequired": "Please provide the destination wallet address to which the funds will be transferred."
     },
     "title": {
       "autoRefuel": "Get {{chainName}} gas",
@@ -119,15 +117,16 @@
   },
   "warning": {
     "message": {
+      "accountNotDeployedMessage": "Smart contract account is not deployed on the destination chain. Sending funds to a non-existent contract would result in permanent loss.",
       "deleteActiveTransactions": "Active transactions are only stored locally and can't be recovered if you delete them.",
       "deleteTransactionHistory": "Transaction history is only stored locally and can't be recovered if you delete it.",
+      "fundsLossPrevention": "Always ensure smart contract accounts are properly set up on the destination chain and avoid direct transfers to exchanges to prevent fund loss.",
       "highValueLoss": "The value of the received tokens is significantly lower than the exchanged tokens and transaction cost.",
       "insufficientFunds": "You don't have enough funds to complete the transaction.",
       "insufficientGas": "You don't have enough gas to complete the transaction. You need to add at least:",
       "rateChanged": "The exchange rate has changed. By continuing the transaction, you'll accept the new rate.",
       "resetSettings": "This will reset your route priority, slippage, gas price, enabled bridges and exchanges.",
-      "slippageOutsideRecommendedLimits": "High slippage tolerance may result in unfavorable trade caused by front-running.",
-      "accountNotDeployedMessage": "Smart contract account is not deployed on the destination chain. Sending funds to a non-existent contract would result in permanent loss."
+      "slippageOutsideRecommendedLimits": "High slippage tolerance may result in unfavorable trade caused by front-running."
     },
     "title": {
       "deleteActiveTransactions": "Delete all active transactions?",
diff --git a/packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx b/packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx
index fb135ccb2..1adaadeb9 100644
--- a/packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx
+++ b/packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx
@@ -1,4 +1,8 @@
-import { Error as ErrorIcon, Info, TurnedIn } from '@mui/icons-material'
+import {
+  Error as ErrorIcon,
+  TurnedIn,
+  WarningRounded,
+} from '@mui/icons-material'
 import { Button, Typography } from '@mui/material'
 import type { ChangeEvent, MutableRefObject } from 'react'
 import { forwardRef, useState } from 'react'
@@ -206,11 +210,11 @@ export const BookmarkAddressSheet = forwardRef<
         </BookmarkInputFields>
         <AlertMessage
           title={
-            <Typography variant="body2">
-              {t('info.message.fundsToExchange')}
+            <Typography variant="body2" sx={{ color: 'text.primary' }}>
+              {t('warning.message.fundsLossPrevention')}
             </Typography>
           }
-          icon={<Info />}
+          icon={<WarningRounded />}
         />
         <SendToWalletButtonRow>
           <Button variant="text" onClick={handleCancel} fullWidth>
diff --git a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx b/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
index 52a4a9422..f9524823a 100644
--- a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
+++ b/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
@@ -1,12 +1,11 @@
-import { Info, Wallet, Warning } from '@mui/icons-material'
-import { Box, Button, Typography } from '@mui/material'
+import { Wallet, WarningRounded } from '@mui/icons-material'
+import { Button, Typography } from '@mui/material'
 import type { MutableRefObject } 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 { useIsContractAddress } from '../../hooks/useIsContractAddress.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
@@ -23,7 +22,6 @@ import {
 interface ConfirmAddressSheetProps {
   onConfirm: (wallet: Bookmark) => void
   validatedBookmark?: Bookmark
-  chainId?: number
 }
 
 interface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {
@@ -48,21 +46,15 @@ export const ConfirmAddressSheet = forwardRef<
 const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
   validatedBookmark,
   onConfirm,
-  chainId,
   onClose,
 }) => {
   const { t } = useTranslation()
   const { navigateBack } = useNavigateBack()
   const { setFieldValue } = useFieldActions()
   const { setSendToWallet } = useSendToWalletActions()
-  const { isContractAddress } = useIsContractAddress(
-    validatedBookmark?.address,
-    chainId,
-    validatedBookmark?.chainType
-  )
 
   const containerRef = useRef<HTMLElement>(null)
-  useSetContentHeight(containerRef, isContractAddress)
+  useSetContentHeight(containerRef)
 
   const handleConfirm = () => {
     if (validatedBookmark) {
@@ -97,28 +89,15 @@ const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
         <Typography>{validatedBookmark?.address}</Typography>
       </SheetAddressContainer>
       <AlertMessage
+        severity="warning"
         title={
-          <Box sx={{ display: 'grid', gap: 1 }}>
-            <Typography variant="body2" fontWeight={500}>
-              {t('info.message.fundsToExchange')}
-            </Typography>
-          </Box>
+          <Typography variant="body2" sx={{ color: 'text.primary' }}>
+            {t('warning.message.fundsLossPrevention')}
+          </Typography>
         }
-        icon={<Info />}
+        icon={<WarningRounded />}
         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={onClose} fullWidth>
           {t('button.cancel')}
diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
index f7de7b407..46cb6c705 100644
--- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
+++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
@@ -1,4 +1,3 @@
-import { ChainType } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import {
   Error as ErrorIcon,
@@ -68,9 +67,6 @@ export const SendToWalletPage = () => {
 
   const { accounts } = useAccount()
   const connectedWallets = accounts.filter((account) => account.isConnected)
-  const connectedEVMChainId = connectedWallets.find(
-    (account) => account.chainType === ChainType.EVM
-  )?.chainId
 
   useHeader(t('header.sendToWallet'))
 
@@ -246,7 +242,6 @@ export const SendToWalletPage = () => {
           ref={confirmAddressSheetRef}
           validatedBookmark={validatedWallet}
           onConfirm={handleOnConfirm}
-          chainId={connectedEVMChainId || toChainId}
         />
         <BookmarkAddressSheet
           ref={bookmarkAddressSheetRef}