diff --git a/src/components/Jam.tsx b/src/components/Jam.tsx index ddc07d92..db08bc57 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 @@ -535,19 +536,10 @@ export default function Jam({ wallet }: JamProps) { })}

{t('scheduler.description_fees')}

- - -
- {t('scheduler.button_start')} - -
-
+ /> )} diff --git a/src/components/SchedulerConfirmationModal.module.css b/src/components/SchedulerConfirmationModal.module.css new file mode 100644 index 00000000..0cedc259 --- /dev/null +++ b/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; +} diff --git a/src/components/SchedulerConfirmationModal.tsx b/src/components/SchedulerConfirmationModal.tsx new file mode 100644 index 00000000..caae988b --- /dev/null +++ b/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 ( + <> + +
+ {t('scheduler.button_start')} + +
+
+ + +
{t('scheduler.confirm_modal.body')}
+
+ + ) +} diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index 00a3de51..1df8f5cc 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": {