From 2e970562d629484f5bdf9c9b6b51ddfd826e7ba0 Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Wed, 24 Jan 2024 19:32:49 +0100 Subject: [PATCH] fix: improve bookmarks sheets size and error handling --- .../SelectTokenPage/SearchTokenInput.tsx | 1 + .../SendToWallet/BookmarkAddressSheet.tsx | 104 +++++++++--------- .../SendToWallet/ConfirmAddressSheet.tsx | 10 +- .../pages/SendToWallet/RecentWalletsPage.tsx | 2 +- .../SendToWallet/SendToWalletPage.style.tsx | 14 +-- .../pages/SendToWallet/SendToWalletPage.tsx | 40 ++----- .../widget/src/pages/SendToWallet/types.ts | 4 + 7 files changed, 77 insertions(+), 98 deletions(-) create mode 100644 packages/widget/src/pages/SendToWallet/types.ts diff --git a/packages/widget/src/pages/SelectTokenPage/SearchTokenInput.tsx b/packages/widget/src/pages/SelectTokenPage/SearchTokenInput.tsx index 7602f82ea..c955bd019 100644 --- a/packages/widget/src/pages/SelectTokenPage/SearchTokenInput.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SearchTokenInput.tsx @@ -37,6 +37,7 @@ export const SearchTokenInput = () => { onBlur, name, value, + maxLength: 128, }} autoComplete="off" /> diff --git a/packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx b/packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx index 54f7c1764..5b0ec2977 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarkAddressSheet.tsx @@ -1,8 +1,8 @@ import ErrorIcon from '@mui/icons-material/Error'; import TurnedInIcon from '@mui/icons-material/TurnedIn'; import { Button, Typography } from '@mui/material'; -import type { ChangeEvent, FocusEventHandler, MutableRefObject } from 'react'; -import { forwardRef, useRef, useState } from 'react'; +import type { ChangeEvent, MutableRefObject } from 'react'; +import { forwardRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import type { BottomSheetBase } from '../../components/BottomSheet'; import { BottomSheet } from '../../components/BottomSheet'; @@ -21,6 +21,7 @@ import { SheetTitle, ValidationAlert, } from './SendToWalletPage.style'; +import type { BookmarkError } from './types'; interface BookmarkAddressProps { onAddBookmark: (bookmark: Bookmark) => void; @@ -32,10 +33,9 @@ export const BookmarkAddressSheet = forwardRef< BookmarkAddressProps >(({ validatedWallet, onAddBookmark }, ref) => { const { t } = useTranslation(); - const bookmarkButtonRef = useRef(null); const [name, setName] = useState(''); const [address, setAddress] = useState(''); - const [errorMessage, setErrorMessage] = useState(''); + const [error, setError] = useState(); const { validateAddress, isValidating } = useAddressValidation(); const { getBookmark } = useBookmarkActions(); @@ -43,14 +43,14 @@ export const BookmarkAddressSheet = forwardRef< const addressValue = address || validatedWallet?.address || ''; const handleCancel = () => { - setErrorMessage(''); + setError(undefined); (ref as MutableRefObject).current?.close(); }; const validateWithAddressFromInput = async () => { const validationResult = await validateAddress(address); if (!validationResult.isValid) { - setErrorMessage(validationResult.error); + setError({ type: 'address', message: validationResult.error }); return; } @@ -62,8 +62,8 @@ export const BookmarkAddressSheet = forwardRef< }; const validateWithValidatedWallet = () => { - if (errorMessage) { - setErrorMessage(''); + if (error) { + setError(undefined); } return { name: nameValue.trim(), @@ -73,22 +73,21 @@ export const BookmarkAddressSheet = forwardRef< }; const handleBookmark = async () => { - if (!nameValue) { - setErrorMessage(t('error.title.bookmarkNameRequired')); + if (isValidating) { return; } - if (!addressValue) { - setErrorMessage(t('error.title.addressRequired')); + if (!nameValue) { + setError({ + type: 'name', + message: t('error.title.bookmarkNameRequired'), + }); return; } - - const existingBookmark = getBookmark(addressValue); - if (existingBookmark) { - setErrorMessage( - t('error.title.bookmarkAlreadyExists', { - name: existingBookmark.name, - }), - ); + if (!addressValue) { + setError({ + type: 'address', + message: t('error.title.addressRequired'), + }); return; } @@ -99,6 +98,17 @@ export const BookmarkAddressSheet = forwardRef< : await validateWithAddressFromInput(); if (validatedBookmark) { + const existingBookmark = getBookmark(validatedBookmark.address); + if (existingBookmark) { + setError({ + type: 'address', + message: t('error.title.bookmarkAlreadyExists', { + name: existingBookmark.name, + }), + }); + return; + } + (ref as MutableRefObject).current?.close(); onAddBookmark({ @@ -110,10 +120,16 @@ export const BookmarkAddressSheet = forwardRef< }; const handleAddressInputChange = (e: ChangeEvent) => { + if (error) { + setError(undefined); + } setAddress((e.target as HTMLInputElement).value.trim()); }; const handleNameInputChange = (e: ChangeEvent) => { + if (error) { + setError(undefined); + } setName((e.target as HTMLInputElement).value.trim()); }; @@ -122,34 +138,11 @@ export const BookmarkAddressSheet = forwardRef< setAddress(''); }; - const handleAddressInputOnBlur: FocusEventHandler = async (e) => { - if (!(e.relatedTarget === bookmarkButtonRef.current) && !isValidating) { - if (!address) { - return; - } - - const existingBookmark = getBookmark(address); - if (existingBookmark) { - setErrorMessage( - t('error.title.bookmarkAlreadyExists', { - name: existingBookmark.name, - }), - ); - return; - } - - const validationResult = await validateAddress(address); - if (!validationResult.isValid) { - setErrorMessage(validationResult.error); - } - } - }; - return ( - + {t('sendToWallet.bookmarkWallet')} {validatedWallet ? ( @@ -163,7 +156,9 @@ export const BookmarkAddressSheet = forwardRef< ) : null} - + {!validatedWallet && ( - + )} - {!!errorMessage && ( + {error ? ( }> - {errorMessage} + {error.message} - )} + ) : null} - - diff --git a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx index 45bf0605a..4517504e9 100644 --- a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx @@ -112,7 +112,7 @@ export const RecentWalletsPage = () => { return ( - + {recentWallets.map((recentWallet) => ( ({ display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: theme.spacing(6, 3, 3), - gap: theme.spacing(3), + padding: theme.spacing(4, 3, 3), + gap: theme.spacing(2), })); export const SendToWalletButtonRow = styled(Box)(({ theme }) => ({ @@ -101,8 +101,8 @@ export const IconContainer = styled(Box)(({ theme }) => ({ display: 'flex', justifyContent: 'center', alignItems: 'center', - width: 96, - height: 96, + width: 80, + height: 80, color: theme.palette.mode === 'light' ? theme.palette.grey[700] @@ -127,7 +127,7 @@ export const SheetAddressContainer = styled(Box)(() => ({ export const ListContainer = styled(List)(({ theme }) => ({ display: 'flex', flexDirection: 'column', - minHeight: 362, + minHeight: 400, paddingBottom: theme.spacing(3), })); @@ -138,8 +138,8 @@ export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({ flexGrow: 1, position: 'sticky', bottom: 0, - padding: theme.spacing(0, 3, 2), - marginBottom: theme.spacing(-1.5), + padding: theme.spacing(0, 3, 3), + marginBottom: theme.spacing(-5.25), zIndex: 2, })); diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx index 44ae35835..420a3ee78 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx @@ -3,7 +3,7 @@ import HistoryIcon from '@mui/icons-material/History'; import TurnedInIcon from '@mui/icons-material/TurnedIn'; import WalletIcon from '@mui/icons-material/Wallet'; import { Tooltip } from '@mui/material'; -import type { ChangeEvent, FocusEventHandler } from 'react'; +import type { ChangeEvent } from 'react'; import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; @@ -39,8 +39,6 @@ export const SendToWalletPage = () => { useBookmarkActions(); const bookmarkAddressSheetRef = useRef(null); const confirmAddressSheetRef = useRef(null); - const doneButtonRef = useRef(null); - const boomarkButtonRef = useRef(null); const [inputAddressValue, setInputAddressValue] = useState(''); const [validatedWallet, setValidatedWallet] = useState(); const [errorMessage, setErrorMessage] = useState(''); @@ -52,6 +50,9 @@ export const SendToWalletPage = () => { const { chain: toChain } = useChain(toChainId); const handleInputChange = (e: ChangeEvent) => { + if (errorMessage) { + setErrorMessage(''); + } setInputAddressValue((e.target as HTMLInputElement).value.trim()); }; @@ -148,27 +149,9 @@ export const SendToWalletPage = () => { addRecentWallet(confirmedWallet); }; - const handleOnBlur: FocusEventHandler = async (e) => { - if ( - !( - e.relatedTarget === doneButtonRef.current || - e.relatedTarget === boomarkButtonRef.current - ) && - !isValidating - ) { - if (!inputAddressValue) { - return; - } - const validationResult = await validateAddress(inputAddressValue); - if (!validationResult.isValid) { - setErrorMessage(validationResult.error); - } - } - }; - return ( - + { autoCapitalize="off" spellCheck="false" onChange={handleInputChange} - onBlur={handleOnBlur} value={inputAddressValue} placeholder={t('sendToWallet.enterAddress')} aria-label={t('sendToWallet.enterAddress')} + maxRows={2} + inputProps={{ maxLength: 128 }} multiline /> - {!!errorMessage && ( + {errorMessage ? ( } sx={{ pb: 2, paddingX: 2 }}> {errorMessage} - )} + ) : null} { {t('button.done')} - + diff --git a/packages/widget/src/pages/SendToWallet/types.ts b/packages/widget/src/pages/SendToWallet/types.ts new file mode 100644 index 000000000..32f5aa392 --- /dev/null +++ b/packages/widget/src/pages/SendToWallet/types.ts @@ -0,0 +1,4 @@ +export interface BookmarkError { + type: 'name' | 'address'; + message: string; +}