feat: payment confirm modal

[theborakompanioni]

Closes #385.

Before this PR a payment was initiated immediately after pressing the submit button.
When this PR is applied, a user has the chance to review the given values and possibly catch some input errors before the payment is initiated.

Any improvements or suggestions are welcome.
(e.g. Would it be better to move the privacy info text to the title bar instead of having an own space in the modal body?)

Without privacy improvement

With privacy improvement

Sweep (with privacy improvement)

[ghost]

Quick UI improvement: Move the info icon to the right and make it a bit smaller. Looks more symmetrical. I'd also drop the "approx." which sounds it a bit confusing imo.

Here's the diff:

diff --git a/src/components/Send.jsx b/src/components/Send.jsx
index 2ee7925..4ec43a9 100644
--- a/src/components/Send.jsx
+++ b/src/components/Send.jsx
@@ -969,36 +969,32 @@ export default function Send() {
             </rb.Row>
             <rb.Row>
               <rb.Col xs={3} className="text-end">
-                {isSweep ? (
-                  <rb.OverlayTrigger
-                    placement="right"
-                    overlay={
-                      <rb.Popover>
-                        <rb.Popover.Body>{t('send.confirm_modal.text_sweep_info_popover')}</rb.Popover.Body>
-                      </rb.Popover>
-                    }
-                  >
-                    <div className="d-inline-flex align-items-center">
-                      <strong>{t('send.confirm_modal.label_amount')}</strong>
-                      <span className="ms-1">
-                        <Sprite className={styles.infoIcon} symbol="info" width="18" height="18" />
-                      </span>
-                    </div>
-                  </rb.OverlayTrigger>
-                ) : (
-                  <strong>{t('send.confirm_modal.label_amount')}</strong>
-                )}
+                <strong>{t('send.confirm_modal.label_amount')}</strong>
               </rb.Col>
               <rb.Col xs={9} className="text-start">
                 {isSweep ? (
-                  <Trans i18nKey="send.confirm_modal.text_sweep_balance">
-                    Sweep
-                    <Balance
-                      valueString={amountFieldValue().toString()}
-                      convertToUnit={settings.unit}
-                      showBalance={true}
-                    />
-                  </Trans>
+                  <div className="d-flex justify-content-start align-items-center">
+                    <Trans i18nKey="send.confirm_modal.text_sweep_balance">
+                      Sweep
+                      <Balance
+                        valueString={amountFieldValue().toString()}
+                        convertToUnit={settings.unit}
+                        showBalance={true}
+                      />
+                    </Trans>
+                    <rb.OverlayTrigger
+                      placement="right"
+                      overlay={
+                        <rb.Popover>
+                          <rb.Popover.Body>{t('send.confirm_modal.text_sweep_info_popover')}</rb.Popover.Body>
+                        </rb.Popover>
+                      }
+                    >
+                      <div className="d-inline-flex align-items-center">
+                        <Sprite className={styles.infoIcon} symbol="info" width="13" height="13" />
+                      </div>
+                    </rb.OverlayTrigger>
+                  </div>
                 ) : (
                   <Balance
                     valueString={amountFieldValue().toString()}
diff --git a/src/components/Send.module.css b/src/components/Send.module.css
index e18ce89..4026b83 100644
--- a/src/components/Send.module.css
+++ b/src/components/Send.module.css
@@ -151,6 +151,7 @@ input[type='number'] {
 }
 
 .infoIcon {
+  margin: 2px 0 0 0.25rem;
   color: var(--bs-gray-500);
   border: 1px solid var(--bs-gray-500);
   border-radius: 50%;
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 2b68f62..a1d3a69 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -191,7 +191,7 @@
     "confirm_modal": {
       "title": "Confirm payment",
       "label_amount": "Amount",
-      "text_sweep_balance": "Sweep whole jar (approx. <1></1>)",
+      "text_sweep_balance": "Sweep whole jar (<1></1>)",
       "text_sweep_info_popover": "The exact transaction amount can only be calculated by JoinMarket at the point when the transaction is made.",
       "label_recipient": "Recipient",
       "label_source_jar": "Send from",

[theborakompanioni]

Quick UI improvement: Move the info icon to the right and make it a bit smaller. Looks more symmetrical. I'd also drop the "approx." which sounds it a bit confusing imo.

Agreed!

Here's the diff: [...]

Nice, thank you. Applied! Much better now.