fix(ui): adapt payment confirm size (#712)

* ui(modal): fix size of payment confirm modal

* ui(send): focus destination field after clearing

src/components/Modal.tsx

@@ -45,16 +45,14 @@ export type InfoModalProps = Omit<BaseModalProps, 'backdrop'> & {
 }
 
 const InfoModal = ({
-  isShown,
-  title,
   children,
   onCancel,
   onSubmit,
   submitButtonText,
-  size,
+  ...baseModalProps
 }: PropsWithChildren<InfoModalProps>) => {
   return (
-    <BaseModal isShown={isShown} title={title} onCancel={onCancel} backdrop={true} size={size}>
+    <BaseModal {...baseModalProps} onCancel={onCancel} backdrop={true}>
       <rb.Modal.Body className={styles['modal-body']}>{children}</rb.Modal.Body>
       <rb.Modal.Footer className={styles['modal-footer']}>
         <rb.Button variant="outline-dark" onClick={() => onSubmit()}>
@@ -65,15 +63,15 @@ const InfoModal = ({
   )
 }
 
-export type ConfirmModalProps = Omit<InfoModalProps, 'onSubmit' | 'submitButtonText'> & {
+export type ConfirmModalProps = BaseModalProps & {
   onConfirm: () => void
 }
 
-const ConfirmModal = ({ isShown, title, children, onCancel, onConfirm }: PropsWithChildren<ConfirmModalProps>) => {
+const ConfirmModal = ({ children, onCancel, onConfirm, ...baseModalProps }: PropsWithChildren<ConfirmModalProps>) => {
   const { t } = useTranslation()
 
   return (
-    <BaseModal isShown={isShown} title={title} onCancel={onCancel}>
+    <BaseModal {...baseModalProps} onCancel={onCancel}>
       <rb.Modal.Body className={styles['modal-body']}>{children}</rb.Modal.Body>
       <rb.Modal.Footer className={styles['modal-footer']}>
         <rb.Button

src/components/Send/DestinationInputField.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as rb from 'react-bootstrap'
 import classNames from 'classnames'
@@ -42,6 +42,7 @@ export const DestinationInputField = ({
   const [field] = useField<DestinationValue>(name)
   const form = useFormikContext<any>()
 
+  const ref = useRef<HTMLInputElement>(null)
   const [destinationJarPickerShown, setDestinationJarPickerShown] = useState(false)
 
   return (
@@ -106,6 +107,7 @@ export const DestinationInputField = ({
                   className={styles.button}
                   onClick={() => {
                     form.setFieldValue(field.name, form.initialValues[field.name], true)
+                    setTimeout(() => ref.current?.focus(), 4)
                   }}
                   disabled={disabled}
                 >
@@ -118,6 +120,7 @@ export const DestinationInputField = ({
               <div className={form.touched[field.name] && !!form.errors[field.name] ? 'is-invalid' : ''}>
                 <rb.InputGroup hasValidation={true}>
                   <rb.Form.Control
+                    ref={ref}
                     aria-label={label}
                     name={field.name}
                     placeholder={t('send.placeholder_recipient')}

src/components/Send/index.tsx

@@ -512,6 +512,7 @@ export default function Send({ wallet }: SendProps) {
 
       {showConfirmSendModal && (
         <PaymentConfirmModal
+          size="lg"
           isShown={true}
           title={t('send.confirm_send_modal.title')}
           onCancel={() => setShowConfirmSendModal(undefined)}

src/components/fb/SpendFidelityBondModal.tsx

@@ -391,6 +391,7 @@ const SpendFidelityBondModal = ({
       </rb.Modal>
       {showConfirmSendModal && fidelityBond && selectedDestinationJarIndex !== undefined && (
         <PaymentConfirmModal
+          size="lg"
           isShown={true}
           title={t(`earn.fidelity_bond.move.${enableDestinationJarSelection ? 'confirm_send_modal.title' : 'title'}`)}
           onCancel={() => {