From 11e2c2a88c8dc95bd47e64b0f315213ddd355ca6 Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Tue, 19 Dec 2023 10:00:34 +0100
Subject: [PATCH] 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                      | 12 +++++-------
 src/components/Send/DestinationInputField.tsx |  5 ++++-
 src/components/Send/index.tsx                 |  1 +
 src/components/fb/SpendFidelityBondModal.tsx  |  1 +
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 32e9d026..71dd98de 100644
--- a/src/components/Modal.tsx
+++ b/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
diff --git a/src/components/Send/DestinationInputField.tsx b/src/components/Send/DestinationInputField.tsx
index 8141840d..990a0507 100644
--- a/src/components/Send/DestinationInputField.tsx
+++ b/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')}
diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
index 9dedc9f4..4dd08a0e 100644
--- a/src/components/Send/index.tsx
+++ b/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)}
diff --git a/src/components/fb/SpendFidelityBondModal.tsx b/src/components/fb/SpendFidelityBondModal.tsx
index d4228e23..741cebc8 100644
--- a/src/components/fb/SpendFidelityBondModal.tsx
+++ b/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={() => {