feat: add SchedulerConfirmationModal component for starting scheduled…

… sweep (#803)

* feat: add SchedulerConfirmationModal component for starting scheduled sweep

* removed dead code

* modal is centered and design changes

* used ConfirmModal and pre-written styles

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
@@ -535,19 +536,10 @@ 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"
+                          <SchedulerConfirmationModal
+                            onConfirm={handleSubmit}
                             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>
+                          />
                         </rb.Form>
                       </>
                     )}

src/components/SchedulerConfirmationModal.module.css

@@ -0,0 +1,21 @@
+.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;
+}
+
+.modalBody {
+  color: var(--bs-body-color) !important;
+  text-align: left !important;
+}

src/components/SchedulerConfirmationModal.tsx

@@ -0,0 +1,43 @@
+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'
+import { ConfirmModal } from './Modal'
+
+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>
+
+      <ConfirmModal
+        isShown={show}
+        title={t('scheduler.confirm_modal.title')}
+        onCancel={handleClose}
+        onConfirm={onConfirm}
+        size="lg"
+        showCloseButton={true}
+        headerClassName={styles['modalHeader']}
+        titleClassName={styles['modalTitle']}
+      >
+        <div className={styles['modalBody']}>{t('scheduler.confirm_modal.body')}</div>
+      </ConfirmModal>
+    </>
+  )
+}

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": {