From b61c7e16998c2642ae3dfedb305124e31a46e721 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Thu, 24 Aug 2023 12:15:01 +0200
Subject: [PATCH 1/4] ui(send): move precondition violation alert below jar
 selector

---
 src/components/Send/index.tsx | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
index 838ed39aa..f2e59861b 100644
--- a/src/components/Send/index.tsx
+++ b/src/components/Send/index.tsx
@@ -629,18 +629,6 @@ export default function Send({ wallet }: SendProps) {
             {paymentSuccessfulInfoAlert.message}
           </rb.Alert>
         )}
-        {!isLoading &&
-          !isOperationDisabled &&
-          isCoinjoin &&
-          coinjoinPreconditionSummary &&
-          !coinjoinPreconditionSummary.isFulfilled && (
-            <div className="mb-4">
-              <CoinjoinPreconditionViolationAlert
-                summary={coinjoinPreconditionSummary}
-                i18nPrefix="send.coinjoin_precondition."
-              />
-            </div>
-          )}
         {!isLoading && walletInfo && (
           <JarSelectorModal
             isShown={destinationJarPickerShown}
@@ -702,6 +690,16 @@ export default function Send({ wallet }: SendProps) {
               </div>
             )}
           </rb.Form.Group>
+
+          {!isLoading && !isOperationDisabled && isCoinjoin && coinjoinPreconditionSummary?.isFulfilled === false && (
+            <div className="mb-4">
+              <CoinjoinPreconditionViolationAlert
+                summary={coinjoinPreconditionSummary}
+                i18nPrefix="send.coinjoin_precondition."
+              />
+            </div>
+          )}
+
           <rb.Form.Group className="mb-4" controlId="destination">
             <rb.Form.Label>{t('send.label_recipient')}</rb.Form.Label>
             <div className="position-relative">

From 6e6f550e7c95c6459b2fc70e0b3173943dec448c Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Thu, 24 Aug 2023 13:48:19 +0200
Subject: [PATCH 2/4] ui(send): display warn sign in selectable jar on
 precondition violations

---
 public/sprite.svg                  |  3 +++
 src/components/Send/index.tsx      | 35 ++++++++++++++++++++----------
 src/components/jars/Jar.module.css | 12 +++++-----
 src/components/jars/Jar.tsx        | 33 ++++++++++++++++++----------
 4 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/public/sprite.svg b/public/sprite.svg
index 2cab6f11e..8cb0527e4 100644
--- a/public/sprite.svg
+++ b/public/sprite.svg
@@ -240,6 +240,9 @@
     <symbol id="info" viewBox="0 0 24 24" fill="currentColor">
         <circle cx="12" cy="7.25" r="1.25"></circle><path d="M11 10h2v8h-2z"></path>
     </symbol>
+    <symbol id="warn" viewBox="0 0 24 24" fill="currentColor">
+        <circle cx="12" cy="16.75" r="1.25"></circle><path d="M11 6h2v8h-2z"></path>
+    </symbol>
     <symbol id="lock" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <rect width="14" height="10" x="5" y="10.968" rx="2"></rect>
         <path d="M15.486 10.984V7.243a1.5 1.5 0 00-1.5-1.5h-3.972a1.5 1.5 0 00-1.5 1.5v3.74"></path>
diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
index f2e59861b..9fd145eb7 100644
--- a/src/components/Send/index.tsx
+++ b/src/components/Send/index.tsx
@@ -141,7 +141,7 @@ export default function Send({ wallet }: SendProps) {
     return walletInfo.data.utxos.utxos.filter((it) => it.mixdepth === sourceJarIndex)
   }, [walletInfo, sourceJarIndex])
 
-  const coinjoinPreconditionSummary = useMemo(() => {
+  const sourceJarCoinjoinPreconditionSummary = useMemo(() => {
     if (sourceJarUtxos === null) return null
     return buildCoinjoinRequirementSummary(sourceJarUtxos)
   }, [sourceJarUtxos])
@@ -151,23 +151,24 @@ export default function Send({ wallet }: SendProps) {
   const submitButtonRef = useRef<HTMLButtonElement>(null)
   const submitButtonOptions = useMemo(() => {
     if (!isLoading) {
-      if (!isCoinjoin)
+      if (!isCoinjoin) {
         return {
           variant: 'danger',
           text: t('send.button_send_without_improved_privacy'),
         }
-      if (coinjoinPreconditionSummary && !coinjoinPreconditionSummary.isFulfilled)
+      } else if (sourceJarCoinjoinPreconditionSummary?.isFulfilled === false) {
         return {
           variant: 'warning',
           text: t('send.button_send_despite_warning'),
         }
+      }
     }
 
     return {
       variant: 'dark',
       text: t('send.button_send'),
     }
-  }, [isLoading, isCoinjoin, coinjoinPreconditionSummary, t])
+  }, [isLoading, isCoinjoin, sourceJarCoinjoinPreconditionSummary, t])
 
   const formIsValid = useMemo(() => {
     return (
@@ -684,6 +685,13 @@ export default function Send({ wallet }: SendProps) {
                       it.calculatedTotalBalanceInSats,
                       walletInfo.balanceSummary.calculatedTotalBalanceInSats
                     )}
+                    variant={
+                      it.accountIndex === sourceJarIndex &&
+                      isCoinjoin &&
+                      sourceJarCoinjoinPreconditionSummary?.isFulfilled === false
+                        ? 'warning'
+                        : undefined
+                    }
                     onClick={(jarIndex) => setSourceJarIndex(jarIndex)}
                   />
                 ))}
@@ -691,14 +699,17 @@ export default function Send({ wallet }: SendProps) {
             )}
           </rb.Form.Group>
 
-          {!isLoading && !isOperationDisabled && isCoinjoin && coinjoinPreconditionSummary?.isFulfilled === false && (
-            <div className="mb-4">
-              <CoinjoinPreconditionViolationAlert
-                summary={coinjoinPreconditionSummary}
-                i18nPrefix="send.coinjoin_precondition."
-              />
-            </div>
-          )}
+          {!isLoading &&
+            !isOperationDisabled &&
+            isCoinjoin &&
+            sourceJarCoinjoinPreconditionSummary?.isFulfilled === false && (
+              <div className="mb-4">
+                <CoinjoinPreconditionViolationAlert
+                  summary={sourceJarCoinjoinPreconditionSummary}
+                  i18nPrefix="send.coinjoin_precondition."
+                />
+              </div>
+            )}
 
           <rb.Form.Group className="mb-4" controlId="destination">
             <rb.Form.Label>{t('send.label_recipient')}</rb.Form.Label>
diff --git a/src/components/jars/Jar.module.css b/src/components/jars/Jar.module.css
index 3273edb55..9aaa9bb72 100644
--- a/src/components/jars/Jar.module.css
+++ b/src/components/jars/Jar.module.css
@@ -62,6 +62,7 @@
   --bs-code-color: var(--bs-blue);
   color: var(--bs-blue);
   font-size: 0.75rem;
+  min-height: 1rem;
 }
 
 .selectableJarContainer {
@@ -77,21 +78,20 @@
   cursor: none;
 }
 
-.selectableJarContainer > .selectionCircle {
-  height: 1.25rem;
-  width: 1.25rem;
-  margin-top: 0.8rem;
+.selectableJarContainer .selectionCircle {
+  height: 1.5rem;
+  width: 1.5rem;
 
   border-radius: 50%;
   display: inline-block;
   border: 1px solid var(--bs-body-color);
 }
 
-.selectableJarContainer:not(.selectable) > .selectionCircle {
+.selectableJarContainer:not(.selectable) .selectionCircle {
   visibility: hidden;
 }
 
-.selectableJarContainer.selected > .selectionCircle {
+.selectableJarContainer.selected .selectionCircle {
   visibility: visible !important;
   background-color: var(--bs-body-color);
 }
diff --git a/src/components/jars/Jar.tsx b/src/components/jars/Jar.tsx
index ae6b9463d..be92d80fe 100644
--- a/src/components/jars/Jar.tsx
+++ b/src/components/jars/Jar.tsx
@@ -22,6 +22,7 @@ interface JarProps {
 interface SelectableJarProps {
   isSelectable: boolean
   isSelected: boolean
+  variant?: 'default' | 'warning'
   onClick: (index: JarIndex) => void
 }
 
@@ -127,16 +128,18 @@ const Jar = ({ index, balance, frozenBalance, fillLevel, isOpen = false }: JarPr
         <div className={`${styles.jarBalance} jar-balance-container-hook`}>
           <Balance valueString={balance.toString()} convertToUnit={settings.unit} showBalance={settings.showBalance} />
         </div>
-        {frozenBalance && frozenBalance > 0 ? (
-          <div className={`${styles.jarBalance} ${styles.frozen} small jar-balance-container-hook`}>
-            <Sprite symbol="snowflake" width="14" height="14" />
-            <Balance
-              valueString={frozenBalance.toString()}
-              convertToUnit={settings.unit}
-              showBalance={settings.showBalance}
-            />
-          </div>
-        ) : null}
+        <div className={`${styles.jarBalance} ${styles.frozen} jar-balance-container-hook`}>
+          {frozenBalance && frozenBalance > 0 ? (
+            <>
+              <Sprite symbol="snowflake" width="14" height="14" />
+              <Balance
+                valueString={frozenBalance.toString()}
+                convertToUnit={settings.unit}
+                showBalance={settings.showBalance}
+              />
+            </>
+          ) : null}
+        </div>
       </div>
     </div>
   )
@@ -153,6 +156,7 @@ const SelectableJar = ({
   isSelectable,
   isSelected,
   onClick,
+  variant = 'default',
 }: JarProps & SelectableJarProps) => {
   return (
     <div
@@ -163,7 +167,14 @@ const SelectableJar = ({
       onClick={() => isSelectable && onClick(index)}
     >
       <Jar index={index} balance={balance} frozenBalance={frozenBalance} fillLevel={fillLevel} />
-      <div className={styles.selectionCircle}></div>
+      <div className="d-flex justify-content-center align-items-center gap-1 mt-2 position-relative">
+        <div className={styles.selectionCircle} />
+        {variant === 'warning' && (
+          <div className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark p-0">
+            <Sprite symbol="warn" width="20" height="20" />
+          </div>
+        )}
+      </div>
     </div>
   )
 }

From e78cad53c77021c05cc69675c6798bb474e5d92f Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Thu, 24 Aug 2023 18:29:33 +0200
Subject: [PATCH 3/4] ui(send): improve sending-in-progress screen

---
 src/components/Send/index.tsx | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
index 9fd145eb7..17981ecaa 100644
--- a/src/components/Send/index.tsx
+++ b/src/components/Send/index.tsx
@@ -598,25 +598,35 @@ export default function Send({ wallet }: SendProps) {
                   <rb.Row className="align-items-center">
                     <rb.Col>{t('send.text_maker_running')}</rb.Col>
                     <rb.Col xs="auto">
-                      <Sprite symbol="caret-right" width="24px" height="24px" />
+                      <Sprite symbol="caret-right" width="24" height="24" />
                     </rb.Col>
                   </rb.Row>
                 </rb.Alert>
               </Link>
             )}
             {isCoinjoinInProgress && (
-              <rb.Alert variant="info" className="mb-4 d-flex align-items-center">
-                {t('send.text_coinjoin_already_running')}
-
+              <div className="mb-4">
+                <div className="d-flex align-items-center justify-content-center mb-2">
+                  <div className="d-flex align-items-center justify-content-center alert alert-success rounded-circle p-3">
+                    <Sprite symbol="clock" width="32" height="32" />
+                  </div>
+                </div>
+                <rb.Alert variant="success" className="d-flex align-items-center">
+                  {t('send.text_coinjoin_already_running')}
+                  <Sprite className="ms-auto" symbol="joining" width="20" height="20" />
+                </rb.Alert>
                 <rb.Button
-                  variant={'outline-light'}
-                  className="ms-auto"
+                  variant="none"
+                  className="w-100 mb-4"
                   disabled={showConfirmAbortModal}
                   onClick={() => abortCoinjoin()}
                 >
-                  {t('global.abort')}
+                  <div className="d-flex justify-content-center align-items-center">
+                    <Sprite symbol="cancel" width="24" height="24" className="me-1" />
+                    {t('global.abort')}
+                  </div>
                 </rb.Button>
-              </rb.Alert>
+              </div>
             )}
           </>
         </rb.Fade>

From 13eda370c95ec0b9c7a730137723d14d22309cad Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Thu, 24 Aug 2023 20:16:02 +0200
Subject: [PATCH 4/4] ui(send): add checkmark to payment success alert

---
 src/components/Send/index.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
index 17981ecaa..beedf3d89 100644
--- a/src/components/Send/index.tsx
+++ b/src/components/Send/index.tsx
@@ -57,11 +57,6 @@ function SweepAccordionToggle({ eventKey }: SweepAccordionToggleProps) {
   )
 }
 
-type Alert = {
-  variant: 'success' | 'danger'
-  message: string
-}
-
 type SendProps = {
   wallet: CurrentWallet
 }
@@ -78,7 +73,7 @@ export default function Send({ wallet }: SendProps) {
   const isCoinjoinInProgress = useMemo(() => serviceInfo && serviceInfo.coinjoinInProgress, [serviceInfo])
   const isMakerRunning = useMemo(() => serviceInfo && serviceInfo.makerRunning, [serviceInfo])
 
-  const [alert, setAlert] = useState<Alert>()
+  const [alert, setAlert] = useState<SimpleAlert>()
   const [isSending, setIsSending] = useState(false)
   const [isCoinjoin, setIsCoinjoin] = useState(IS_COINJOIN_DEFAULT_VAL)
   const [minNumCollaborators, setMinNumCollaborators] = useState(MINIMUM_MAKERS_DEFAULT_VAL)
@@ -90,7 +85,7 @@ export default function Send({ wallet }: SendProps) {
   const [feeConfigValues, setFeeConfigValues] = useState<FeeValues>()
 
   const [waitForUtxosToBeSpent, setWaitForUtxosToBeSpent] = useState([])
-  const [paymentSuccessfulInfoAlert, setPaymentSuccessfulInfoAlert] = useState<Alert>()
+  const [paymentSuccessfulInfoAlert, setPaymentSuccessfulInfoAlert] = useState<SimpleAlert>()
 
   const isOperationDisabled = useMemo(
     () => isCoinjoinInProgress || isMakerRunning || waitForUtxosToBeSpent.length > 0,
@@ -636,9 +631,16 @@ export default function Send({ wallet }: SendProps) {
           </rb.Alert>
         )}
         {paymentSuccessfulInfoAlert && (
-          <rb.Alert className="small slashed-zeroes break-word" variant={paymentSuccessfulInfoAlert.variant}>
-            {paymentSuccessfulInfoAlert.message}
-          </rb.Alert>
+          <>
+            <div className="d-flex align-items-center justify-content-center mb-2">
+              <div className="d-flex align-items-center justify-content-center alert alert-success rounded-circle p-3">
+                <Sprite symbol="checkmark" width="24" height="24" />
+              </div>
+            </div>
+            <rb.Alert className="small slashed-zeroes break-word" variant={paymentSuccessfulInfoAlert.variant}>
+              {paymentSuccessfulInfoAlert.message}
+            </rb.Alert>
+          </>
         )}
         {!isLoading && walletInfo && (
           <JarSelectorModal