Skip to content

Commit

Permalink
fix: improve funds loss warning message
Browse files Browse the repository at this point in the history
  • Loading branch information
chybisov committed Jan 31, 2025
1 parent 2b29bd8 commit 317f8b1
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 46 deletions.
15 changes: 7 additions & 8 deletions packages/widget/src/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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?",
Expand Down
12 changes: 8 additions & 4 deletions packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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>
Expand Down
37 changes: 8 additions & 29 deletions packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -23,7 +22,6 @@ import {
interface ConfirmAddressSheetProps {
onConfirm: (wallet: Bookmark) => void
validatedBookmark?: Bookmark
chainId?: number
}

interface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {
Expand All @@ -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) {
Expand Down Expand Up @@ -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')}
Expand Down
5 changes: 0 additions & 5 deletions packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ChainType } from '@lifi/sdk'
import { useAccount } from '@lifi/wallet-management'
import {
Error as ErrorIcon,
Expand Down Expand Up @@ -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'))

Expand Down Expand Up @@ -246,7 +242,6 @@ export const SendToWalletPage = () => {
ref={confirmAddressSheetRef}
validatedBookmark={validatedWallet}
onConfirm={handleOnConfirm}
chainId={connectedEVMChainId || toChainId}
/>
<BookmarkAddressSheet
ref={bookmarkAddressSheetRef}
Expand Down

0 comments on commit 317f8b1

Please sign in to comment.