From a983ca4c7dcc7849690f1c0b39b63323bb945157 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Tue, 27 Sep 2022 18:22:57 +0100
Subject: [PATCH] fix: auto focus and clean send wallet field

---
 .../src/components/SendToWallet/SendToWallet.tsx    |  3 ++-
 .../components/SendToWallet/SendToWalletButton.tsx  | 13 +++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/widget/src/components/SendToWallet/SendToWallet.tsx b/packages/widget/src/components/SendToWallet/SendToWallet.tsx
index 7556240f6..e6843bd2c 100644
--- 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
index f54c604d8..00349d664 100644
--- a/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx
+++ b/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx
@@ -1,13 +1,15 @@
 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();
 
@@ -15,6 +17,13 @@ export const SendToWalletButton: React.FC = () => {
     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,