From 89cd2eab921c2c8ae7e626c25528c5a0b3a2f914 Mon Sep 17 00:00:00 2001
From: Saksham Gupta <sakshamgupta.ai@gmail.com>
Date: Tue, 23 Jul 2024 12:28:05 +0530
Subject: [PATCH 1/4] feat: add SchedulerConfirmationModal component for
 starting scheduled sweep

---
 src/components/Jam.tsx                        |  9 +++-
 .../SchedulerConfirmationModal.module.css     |  6 +++
 src/components/SchedulerConfirmationModal.tsx | 46 +++++++++++++++++++
 src/i18n/locales/en/translation.json          |  4 ++
 4 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SchedulerConfirmationModal.module.css
 create mode 100644 src/components/SchedulerConfirmationModal.tsx

diff --git a/src/components/Jam.tsx b/src/components/Jam.tsx
index ddc07d926..53d5a9322 100644
--- a/src/components/Jam.tsx
+++ b/src/components/Jam.tsx
@@ -18,6 +18,7 @@ import FeeConfigModal from './settings/FeeConfigModal'
 
 import styles from './Jam.module.css'
 import { useFeeConfigValues } from '../hooks/Fees'
+import SchedulerConfirmationModal from './SchedulerConfirmationModal'
 
 const DEST_ADDRESS_COUNT_PROD = 3
 const DEST_ADDRESS_COUNT_TEST = 1
@@ -536,7 +537,7 @@ export default function Jam({ wallet }: JamProps) {
 
                           <p className="text-secondary mb-4">{t('scheduler.description_fees')}</p>
 
-                          <rb.Button
+                          {/* <rb.Button
                             className="w-100 mb-4"
                             variant="dark"
                             size="lg"
@@ -547,7 +548,11 @@ export default function Jam({ wallet }: JamProps) {
                               {t('scheduler.button_start')}
                               <Sprite symbol="caret-right" width="24" height="24" className="ms-1" />
                             </div>
-                          </rb.Button>
+                          </rb.Button> */}
+                          <SchedulerConfirmationModal
+                            onConfirm={handleSubmit}
+                            disabled={isOperationDisabled || isSubmitting || !isValid}
+                          />
                         </rb.Form>
                       </>
                     )}
diff --git a/src/components/SchedulerConfirmationModal.module.css b/src/components/SchedulerConfirmationModal.module.css
new file mode 100644
index 000000000..f32ec1257
--- /dev/null
+++ b/src/components/SchedulerConfirmationModal.module.css
@@ -0,0 +1,6 @@
+.modalFooter :global(.btn) {
+  flex-grow: 1;
+  min-height: 2.8rem;
+  font-weight: 500;
+  border-color: none !important;
+}
diff --git a/src/components/SchedulerConfirmationModal.tsx b/src/components/SchedulerConfirmationModal.tsx
new file mode 100644
index 000000000..75678f2e0
--- /dev/null
+++ b/src/components/SchedulerConfirmationModal.tsx
@@ -0,0 +1,46 @@
+import * as rb from 'react-bootstrap'
+import styles from './SchedulerConfirmationModal.module.css'
+import { useState } from 'react'
+import Sprite from './Sprite'
+import { useTranslation } from 'react-i18next'
+
+interface SchedulerConfirmationModalProps {
+  onConfirm: () => void
+  disabled: boolean
+}
+
+export default function SchedulerConfirmationModal({ onConfirm, disabled }: SchedulerConfirmationModalProps) {
+  const { t } = useTranslation()
+  const [show, setShow] = useState(false)
+
+  const handleClose = () => setShow(false)
+  const handleShow = () => setShow(true)
+
+  return (
+    <>
+      <rb.Button className="w-100 mb-4" variant="dark" size="lg" disabled={disabled} onClick={handleShow}>
+        <div className="d-flex justify-content-center align-items-center">
+          {t('scheduler.button_start')}
+          <Sprite symbol="caret-right" width="24" height="24" className="ms-1" />
+        </div>
+      </rb.Button>
+
+      <rb.Modal show={show} onHide={handleClose} dialogClassName={styles['modal']}>
+        <rb.Modal.Header closeButton>
+          <rb.Modal.Title>
+            <div>{t('scheduler.confirm_modal.title')}</div>
+          </rb.Modal.Title>
+        </rb.Modal.Header>
+        <rb.Modal.Body>{t('scheduler.confirm_modal.body')}</rb.Modal.Body>
+        <rb.Modal.Footer className={styles['modalFooter']}>
+          <rb.Button variant="light" onClick={handleClose} className="d-flex justify-content-center align-items-center">
+            {t('modal.confirm_button_reject')}
+          </rb.Button>
+          <rb.Button variant="dark" onClick={onConfirm}>
+            {t('modal.confirm_button_accept')}
+          </rb.Button>
+        </rb.Modal.Footer>
+      </rb.Modal>
+    </>
+  )
+}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index fcbdf99f4..d8f9e7833 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -659,6 +659,10 @@
       "subtitle": "Successfully completed a single scheduled transaction.",
       "subtitle_other": "Successfully completed {{ count }} scheduled transactions.",
       "text_button_submit": "Continue"
+    },
+    "confirm_modal": {
+      "title": "Start Scheduled Sweep",
+      "body": "Are you sure you want to start the scheduled sweep?"
     }
   },
   "modal": {

From 5a6de156b91edb012373de95b1717c7c93da34a8 Mon Sep 17 00:00:00 2001
From: Saksham Gupta <sakshamgupta.ai@gmail.com>
Date: Wed, 24 Jul 2024 10:50:02 +0530
Subject: [PATCH 2/4] removed dead code

---
 src/components/Jam.tsx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/components/Jam.tsx b/src/components/Jam.tsx
index 53d5a9322..db08bc573 100644
--- a/src/components/Jam.tsx
+++ b/src/components/Jam.tsx
@@ -536,19 +536,6 @@ export default function Jam({ wallet }: JamProps) {
                           })}
 
                           <p className="text-secondary mb-4">{t('scheduler.description_fees')}</p>
-
-                          {/* <rb.Button
-                            className="w-100 mb-4"
-                            variant="dark"
-                            size="lg"
-                            type="submit"
-                            disabled={isOperationDisabled || isSubmitting || !isValid}
-                          >
-                            <div className="d-flex justify-content-center align-items-center">
-                              {t('scheduler.button_start')}
-                              <Sprite symbol="caret-right" width="24" height="24" className="ms-1" />
-                            </div>
-                          </rb.Button> */}
                           <SchedulerConfirmationModal
                             onConfirm={handleSubmit}
                             disabled={isOperationDisabled || isSubmitting || !isValid}

From 4cd573dd0defb2b8631f5cbb0282aa210a7da50c Mon Sep 17 00:00:00 2001
From: Saksham Gupta <sakshamgupta.ai@gmail.com>
Date: Mon, 29 Jul 2024 18:37:30 +0530
Subject: [PATCH 3/4] modal is centered and design changes

---
 .../SchedulerConfirmationModal.module.css     | 50 ++++++++++++++++++-
 src/components/SchedulerConfirmationModal.tsx | 21 ++++++--
 2 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/src/components/SchedulerConfirmationModal.module.css b/src/components/SchedulerConfirmationModal.module.css
index f32ec1257..99507d691 100644
--- a/src/components/SchedulerConfirmationModal.module.css
+++ b/src/components/SchedulerConfirmationModal.module.css
@@ -1,6 +1,54 @@
-.modalFooter :global(.btn) {
+:global .modal-backdrop {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.modal :global .modal-content {
+  background-color: var(--bs-body-bg) !important;
+  border-radius: 1rem !important;
+  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25) !important;
+}
+
+.modalHeader {
+  display: flex !important;
+  justify-content: flex-start !important;
+  background-color: transparent !important;
+  padding: 1.25rem !important;
+}
+
+.modalTitle {
+  width: 100%;
+  font-size: 1rem !important;
+  font-weight: 400 !important;
+  color: var(--bs-body-color) !important;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modalTitle .cancelButton {
+  padding: 0 0 0 1rem;
+  color: var(--bs-body-color);
+  background-color: transparent !important;
+  border: none;
+}
+
+.modalFooter {
+  display: flex !important;
+  justify-content: center !important;
+  gap: 1rem;
+  background-color: transparent !important;
+  padding: 1rem 1.25rem 1.25rem 1.25rem !important;
+}
+
+.modalFooter :global .btn {
   flex-grow: 1;
   min-height: 2.8rem;
   font-weight: 500;
   border-color: none !important;
 }
+
+@media only screen and (min-width: 768px) {
+  .jarsContainer {
+    gap: 1.5rem;
+  }
+}
diff --git a/src/components/SchedulerConfirmationModal.tsx b/src/components/SchedulerConfirmationModal.tsx
index 75678f2e0..e0c34771a 100644
--- a/src/components/SchedulerConfirmationModal.tsx
+++ b/src/components/SchedulerConfirmationModal.tsx
@@ -25,18 +25,29 @@ export default function SchedulerConfirmationModal({ onConfirm, disabled }: Sche
         </div>
       </rb.Button>
 
-      <rb.Modal show={show} onHide={handleClose} dialogClassName={styles['modal']}>
-        <rb.Modal.Header closeButton>
-          <rb.Modal.Title>
+      <rb.Modal
+        show={show}
+        keyboard={true}
+        onEscapeKeyDown={handleClose}
+        onHide={handleClose}
+        centered={true}
+        className={styles['modal']}
+        size="lg"
+      >
+        <rb.Modal.Header className={styles['modalHeader']}>
+          <rb.Modal.Title className={styles['modalTitle']}>
             <div>{t('scheduler.confirm_modal.title')}</div>
+            <rb.Button onClick={handleClose} className={styles['cancelButton']}>
+              <Sprite symbol="cancel" width="26" height="26" />
+            </rb.Button>
           </rb.Modal.Title>
         </rb.Modal.Header>
-        <rb.Modal.Body>{t('scheduler.confirm_modal.body')}</rb.Modal.Body>
+        <rb.Modal.Body className={styles['modalBody']}>{t('scheduler.confirm_modal.body')}</rb.Modal.Body>
         <rb.Modal.Footer className={styles['modalFooter']}>
           <rb.Button variant="light" onClick={handleClose} className="d-flex justify-content-center align-items-center">
             {t('modal.confirm_button_reject')}
           </rb.Button>
-          <rb.Button variant="dark" onClick={onConfirm}>
+          <rb.Button variant="dark" onClick={onConfirm} disabled={disabled}>
             {t('modal.confirm_button_accept')}
           </rb.Button>
         </rb.Modal.Footer>

From 91733356fa5f9f65f27b2f218497db7ee5d2b433 Mon Sep 17 00:00:00 2001
From: Saksham Gupta <sakshamgupta.ai@gmail.com>
Date: Thu, 8 Aug 2024 13:29:51 +0530
Subject: [PATCH 4/4] used ConfirmModal and pre-written styles

---
 .../SchedulerConfirmationModal.module.css     | 39 ++-----------------
 src/components/SchedulerConfirmationModal.tsx | 36 ++++++-----------
 2 files changed, 14 insertions(+), 61 deletions(-)

diff --git a/src/components/SchedulerConfirmationModal.module.css b/src/components/SchedulerConfirmationModal.module.css
index 99507d691..0cedc2590 100644
--- a/src/components/SchedulerConfirmationModal.module.css
+++ b/src/components/SchedulerConfirmationModal.module.css
@@ -1,13 +1,3 @@
-:global .modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.5) !important;
-}
-
-.modal :global .modal-content {
-  background-color: var(--bs-body-bg) !important;
-  border-radius: 1rem !important;
-  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.25) !important;
-}
-
 .modalHeader {
   display: flex !important;
   justify-content: flex-start !important;
@@ -25,30 +15,7 @@
   align-items: center;
 }
 
-.modalTitle .cancelButton {
-  padding: 0 0 0 1rem;
-  color: var(--bs-body-color);
-  background-color: transparent !important;
-  border: none;
-}
-
-.modalFooter {
-  display: flex !important;
-  justify-content: center !important;
-  gap: 1rem;
-  background-color: transparent !important;
-  padding: 1rem 1.25rem 1.25rem 1.25rem !important;
-}
-
-.modalFooter :global .btn {
-  flex-grow: 1;
-  min-height: 2.8rem;
-  font-weight: 500;
-  border-color: none !important;
-}
-
-@media only screen and (min-width: 768px) {
-  .jarsContainer {
-    gap: 1.5rem;
-  }
+.modalBody {
+  color: var(--bs-body-color) !important;
+  text-align: left !important;
 }
diff --git a/src/components/SchedulerConfirmationModal.tsx b/src/components/SchedulerConfirmationModal.tsx
index e0c34771a..caae988b8 100644
--- a/src/components/SchedulerConfirmationModal.tsx
+++ b/src/components/SchedulerConfirmationModal.tsx
@@ -3,6 +3,7 @@ import styles from './SchedulerConfirmationModal.module.css'
 import { useState } from 'react'
 import Sprite from './Sprite'
 import { useTranslation } from 'react-i18next'
+import { ConfirmModal } from './Modal'
 
 interface SchedulerConfirmationModalProps {
   onConfirm: () => void
@@ -25,33 +26,18 @@ export default function SchedulerConfirmationModal({ onConfirm, disabled }: Sche
         </div>
       </rb.Button>
 
-      <rb.Modal
-        show={show}
-        keyboard={true}
-        onEscapeKeyDown={handleClose}
-        onHide={handleClose}
-        centered={true}
-        className={styles['modal']}
+      <ConfirmModal
+        isShown={show}
+        title={t('scheduler.confirm_modal.title')}
+        onCancel={handleClose}
+        onConfirm={onConfirm}
         size="lg"
+        showCloseButton={true}
+        headerClassName={styles['modalHeader']}
+        titleClassName={styles['modalTitle']}
       >
-        <rb.Modal.Header className={styles['modalHeader']}>
-          <rb.Modal.Title className={styles['modalTitle']}>
-            <div>{t('scheduler.confirm_modal.title')}</div>
-            <rb.Button onClick={handleClose} className={styles['cancelButton']}>
-              <Sprite symbol="cancel" width="26" height="26" />
-            </rb.Button>
-          </rb.Modal.Title>
-        </rb.Modal.Header>
-        <rb.Modal.Body className={styles['modalBody']}>{t('scheduler.confirm_modal.body')}</rb.Modal.Body>
-        <rb.Modal.Footer className={styles['modalFooter']}>
-          <rb.Button variant="light" onClick={handleClose} className="d-flex justify-content-center align-items-center">
-            {t('modal.confirm_button_reject')}
-          </rb.Button>
-          <rb.Button variant="dark" onClick={onConfirm} disabled={disabled}>
-            {t('modal.confirm_button_accept')}
-          </rb.Button>
-        </rb.Modal.Footer>
-      </rb.Modal>
+        <div className={styles['modalBody']}>{t('scheduler.confirm_modal.body')}</div>
+      </ConfirmModal>
     </>
   )
 }