ui(send): display sweep breakdown as warning alert

joinmarket-webui · May 22, 2024 · fcbc4f3 · fcbc4f3
1 parent 1a620f3
commit fcbc4f3
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 51 deletions.
diff --git a/src/components/Send/SweepBreakdown.module.css b/src/components/Send/SweepBreakdown.module.css
@@ -14,25 +14,13 @@
   text-align: right;
 }
 
-.sweepBreakdownAnchor {
-  font-size: 0.8rem;
-  color: var(--bs-dark);
-}
-
-:root[data-theme='dark'] .sweepBreakdownAnchor {
-  color: var(--bs-light) !important;
-}
-
-:root[data-theme='dark'] .sweepBreakdownParagraph {
-  color: var(--bs-light) !important;
-}
-
 .accordionButton {
   background-color: transparent;
   color: var(--bs-dark);
   display: flex;
   justify-content: flex-end;
   font-size: 0.8rem;
+  align-items: center;
   height: 1rem;
   padding: 0;
   box-shadow: none;

diff --git a/src/components/Send/SweepBreakdown.tsx b/src/components/Send/SweepBreakdown.tsx
@@ -2,6 +2,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import * as rb from 'react-bootstrap'
 import { AccountBalanceSummary } from '../../context/BalanceSummary'
 import Balance from '../Balance'
+import Sprite from '../Sprite'
 import { SATS } from '../../utils'
 
 import styles from './SweepBreakdown.module.css'
@@ -12,9 +13,14 @@ type SweepAccordionToggleProps = {
 function SweepAccordionToggle({ eventKey }: SweepAccordionToggleProps) {
   const { t } = useTranslation()
   return (
-    <button type="button" className={styles.accordionButton} onClick={rb.useAccordionButton(eventKey)}>
-      {t('send.button_sweep_amount_breakdown')}
-    </button>
+    <div>
+      <button type="button" className={styles.accordionButton} onClick={rb.useAccordionButton(eventKey)}>
+        <div className="badge rounded-pill bg-warning text-dark p-0 me-1">
+          <Sprite symbol="warn" width="16" height="16" />
+        </div>
+        {t('send.button_sweep_amount_breakdown')}
+      </button>
+    </div>
   )
 }
 
@@ -64,41 +70,43 @@ export function SweepBreakdown({ jarBalance }: SweepBreakdownProps) {
                 </tr>
               </tbody>
             </table>
-            <p className={`${styles.sweepBreakdownParagraph} mb-0 mt-4`}>
-              <Trans i18nKey="send.sweep_amount_breakdown_explanation">
-                A sweep transaction will consume all UTXOs of a mixdepth leaving no coins behind except those that have
-                been
-                <a
-                  href="https://github.com/JoinMarket-Org/joinmarket-clientserver#wallet-features"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={styles.sweepBreakdownAnchor}
-                >
-                  frozen
-                </a>
-                or
-                <a
-                  href="https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/master/docs/fidelity-bonds.md"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={styles.sweepBreakdownAnchor}
-                >
-                  time-locked
-                </a>
-                . Mining fees and collaborator fees will be deducted from the amount so as to leave zero change. The
-                exact transaction amount can only be calculated by JoinMarket at the point when the transaction is made.
-                Therefore the estimated amount shown might deviate from the actually sent amount. Refer to the
-                <a
-                  href="https://github.com/JoinMarket-Org/JoinMarket-Docs/blob/master/High-level-design.md#joinmarket-transaction-types"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={styles.sweepBreakdownAnchor}
-                >
-                  JoinMarket documentation
-                </a>
-                for more details.
-              </Trans>
-            </p>
+            <rb.Alert variant="warning">
+              <p className="mb-0">
+                <Trans i18nKey="send.sweep_amount_breakdown_explanation">
+                  A sweep transaction will consume all UTXOs of a mixdepth leaving no coins behind except those that
+                  have been
+                  <a
+                    href="https://github.com/JoinMarket-Org/joinmarket-clientserver#wallet-features"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="alert-link"
+                  >
+                    frozen
+                  </a>
+                  or
+                  <a
+                    href="https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/master/docs/fidelity-bonds.md"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="alert-link"
+                  >
+                    time-locked
+                  </a>
+                  . Mining fees and collaborator fees will be deducted from the amount so as to leave zero change. The
+                  exact transaction amount can only be calculated by JoinMarket at the point when the transaction is
+                  made. Therefore the estimated amount shown might deviate from the actually sent amount. Refer to the
+                  <a
+                    href="https://github.com/JoinMarket-Org/JoinMarket-Docs/blob/master/High-level-design.md#joinmarket-transaction-types"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="alert-link"
+                  >
+                    JoinMarket documentation
+                  </a>
+                  for more details.
+                </Trans>
+              </p>
+            </rb.Alert>
           </rb.Accordion.Body>
         </rb.Accordion.Item>
       </rb.Accordion>