Refactor and DRYer code

src/components/Jam.tsx

@@ -14,11 +14,10 @@ import ToggleSwitch from './ToggleSwitch'
 import Sprite from './Sprite'
 import Balance from './Balance'
 import ScheduleProgress from './ScheduleProgress'
+import { ConfirmModal, ConfirmModalProps } from './Modal'
 import FeeConfigModal from './settings/FeeConfigModal'
-
-import styles from './Jam.module.css'
 import { useFeeConfigValues } from '../hooks/Fees'
-import SchedulerConfirmationModal from './SchedulerConfirmationModal'
+import styles from './Jam.module.css'
 
 const DEST_ADDRESS_COUNT_PROD = 3
 const DEST_ADDRESS_COUNT_TEST = 1
@@ -144,6 +143,17 @@ function SchedulerSuccessMessage({ schedule, onConfirm }: SchedulerSuccessMessag
   )
 }
 
+type ScheduleConfirmModalProps = Omit<ConfirmModalProps, 'title'>
+
+function ScheduleConfirmModal(props: ScheduleConfirmModalProps) {
+  const { t } = useTranslation()
+  return (
+    <ConfirmModal title={t('scheduler.confirm_modal.title')} {...props}>
+      {t('scheduler.confirm_modal.body')}
+    </ConfirmModal>
+  )
+}
+
 interface JamProps {
   wallet: CurrentWallet
 }
@@ -165,6 +175,7 @@ export default function Jam({ wallet }: JamProps) {
   const [lastKnownSchedule, resetLastKnownSchedule] = useLatestTruthy(currentSchedule ?? undefined)
   const [isShowSuccessMessage, setIsShowSuccessMessage] = useState(false)
   const [feeConfigValues, reloadFeeConfigValues] = useFeeConfigValues()
+  const [showScheduleConfirmModal, setShowScheduleConfirmModal] = useState(false)
   const maxFeesConfigMissing = useMemo(
     () =>
       feeConfigValues && (feeConfigValues.max_cj_fee_abs === undefined || feeConfigValues.max_cj_fee_rel === undefined),
@@ -283,6 +294,7 @@ export default function Jam({ wallet }: JamProps) {
     }
 
     setAlert(undefined)
+    setShowScheduleConfirmModal(false)
     setIsWaitingSchedulerStart(true)
 
     const destinations = addressValueKeys(addressCount).map((key) => values[key])
@@ -536,7 +548,21 @@ export default function Jam({ wallet }: JamProps) {
                           })}
 
                           <p className="text-secondary mb-4">{t('scheduler.description_fees')}</p>
-                          <SchedulerConfirmationModal
+                          <rb.Button
+                            className="w-100 mb-4"
+                            variant="dark"
+                            size="lg"
+                            disabled={isOperationDisabled || isSubmitting || !isValid}
+                            onClick={() => setShowScheduleConfirmModal(true)}
+                          >
+                            <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>
+                          <ScheduleConfirmModal
+                            isShown={showScheduleConfirmModal}
+                            onCancel={() => setShowScheduleConfirmModal(false)}
                             onConfirm={handleSubmit}
                             disabled={isOperationDisabled || isSubmitting || !isValid}
                           />

src/components/Modal.tsx

@@ -69,7 +69,7 @@ const InfoModal = ({
   )
 }
 
-export type ConfirmModalProps = BaseModalProps & {
+export type ConfirmModalProps = Omit<BaseModalProps, 'closeButton'> & {
   onConfirm: () => void
   disabled?: boolean
 }

src/i18n/locales/en/translation.json

@@ -663,7 +663,7 @@
     },
     "confirm_modal": {
       "title": "Start Scheduled Sweep",
-      "body": "Are you sure you want to start the scheduled sweep?"
+      "body": "Are you sure you want to start a scheduled sweep?"
     }
   },
   "modal": {