fix: auto focus and clean send wallet field

lifinance · Sep 27, 2022 · a983ca4 · a983ca4
1 parent d12d4a7
commit a983ca4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/widget/src/components/SendToWallet/SendToWallet.tsx b/packages/widget/src/components/SendToWallet/SendToWallet.tsx
@@ -49,7 +49,7 @@ export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
   });
 
   return (
-    <Collapse timeout={225} in={showSendToWallet}>
+    <Collapse timeout={225} unmountOnExit mountOnEnter in={showSendToWallet}>
       <Card {...props} ref={ref}>
         <CardTitle>{t('swap.sendToWallet')}</CardTitle>
         <FormControl fullWidth sx={{ paddingTop: '6px', paddingBottom: '5px' }}>
@@ -64,6 +64,7 @@ export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
             onBlur={onBlur}
             name={name}
             placeholder={t('swap.walletAddressOrEns')}
+            autoFocus
           />
           <FormHelperText error={!!errors.toAddress}>
             {errors.toAddress?.message as string}

diff --git a/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx b/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx
@@ -1,20 +1,29 @@
 import { WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
 import { Button, Tooltip } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useWallet } from '../../providers';
+import { SwapFormKey, useWallet } from '../../providers';
 import { useSettings } from '../../stores';
 import { useSendToWalletStore } from './store';
 
 export const SendToWalletButton: React.FC = () => {
   const { t } = useTranslation();
   const { account } = useWallet();
+  const { setValue } = useFormContext();
   const { showDestinationWallet } = useSettings(['showDestinationWallet']);
   const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
 
   if (!showDestinationWallet || !account.isActive) {
     return null;
   }
 
+  const handleClick = () => {
+    if (showSendToWallet) {
+      setValue(SwapFormKey.ToAddress, '');
+    }
+    toggleSendToWallet();
+  };
+
   return (
     <Tooltip
       title={t('swap.sendToWallet')}
@@ -25,7 +34,7 @@ export const SendToWalletButton: React.FC = () => {
     >
       <Button
         variant={showSendToWallet ? 'contained' : 'text'}
-        onClick={toggleSendToWallet}
+        onClick={handleClick}
         sx={{
           minWidth: 48,
           marginLeft: 1,