feat: add SchedulerConfirmationModal component for starting scheduled sweep

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,6 @@
+.modalFooter :global(.btn) {
+  flex-grow: 1;
+  min-height: 2.8rem;
+  font-weight: 500;
+  border-color: none !important;
+}

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>
+    </>
+  )
+}

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