ui(JarDetails): display note when freeze/unfreeze is disabled (#869)

joinmarket-webui · Nov 7, 2024 · 8683195 · 8683195
1 parent 68b7d3f
commit 8683195
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/src/components/jar_details/JarDetailsOverlay.module.css b/src/components/jar_details/JarDetailsOverlay.module.css
@@ -104,13 +104,19 @@
   border-radius: 0.35rem;
 }
 
+.freezeUnfreezeButtonsContainer button:disabled {
+  color: var(--bs-gray-800) !important;
+  border-color: var(--bs-gray-900) !important;
+}
+
 .freezeBtn {
   color: var(--bs-blue) !important;
   border-color: var(--bs-blue) !important;
 }
 .freezeBtn:hover {
   background-color: rgba(13, 110, 253, 0.07) !important;
 }
+
 .unfreezeBtn {
   color: var(--bs-red) !important;
   border-color: var(--bs-red) !important;
@@ -123,6 +129,11 @@
   background-color: var(--bs-gray-800) !important;
 }
 
+:root[data-theme='dark'] .freezeUnfreezeButtonsContainer button:disabled {
+  color: var(--bs-gray-400) !important;
+  border-color: var(--bs-gray-500) !important;
+}
+
 :root[data-theme='dark'] .freezeUnfreezeButtonsContainer button:hover {
   background-color: var(--bs-gray-900) !important;
   border-color: var(--bs-gray-900) !important;

diff --git a/src/components/jar_details/JarDetailsOverlay.tsx b/src/components/jar_details/JarDetailsOverlay.tsx
@@ -99,9 +99,12 @@ const JarDetailsOverlay = (props: JarDetailsOverlayProps) => {
   const settings = useSettings()
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
   const serviceInfo = useServiceInfo()
+
+  const isCoinjoinInProgress = useMemo(() => serviceInfo?.coinjoinInProgress === true, [serviceInfo])
+  const isMakerRunning = useMemo(() => serviceInfo?.makerRunning === true, [serviceInfo])
   const isTakerOrMakerRunning = useMemo(
-    () => serviceInfo && (serviceInfo.makerRunning || serviceInfo.coinjoinInProgress),
-    [serviceInfo],
+    () => isCoinjoinInProgress || isMakerRunning,
+    [isCoinjoinInProgress, isMakerRunning],
   )
 
   const [alert, setAlert] = useState<SimpleAlert>()
@@ -370,15 +373,32 @@ const JarDetailsOverlay = (props: JarDetailsOverlayProps) => {
                           </Trans>
                         </div>
                       </div>
+                      {!isActionsEnabled && (
+                        <div className="d-flex align-items-center mb-2 px-2 text-secondary">
+                          <Sprite
+                            className="rounded-circle border border-1 me-2 border-secondary"
+                            symbol="info"
+                            width="20"
+                            height="20"
+                          />
+                          {isCoinjoinInProgress && (
+                            <Trans i18nKey="jar_details.utxo_list.text_actions_disabled_taker_running" />
+                          )}
+                          {isMakerRunning && (
+                            <Trans i18nKey="jar_details.utxo_list.text_actions_disabled_maker_running" />
+                          )}
+                          {!isMakerRunning && !isCoinjoinInProgress && (
+                            <Trans i18nKey="jar_details.utxo_list.text_actions_disabled" />
+                          )}
+                        </div>
+                      )}
                       {selectedUtxos.length > 0 && (
                         <div className="d-flex justify-content-between align-items-center w-100 flex-sm-row flex-column gap-2">
                           <div className="order-1 order-sm-0">
-                            {isActionsEnabled && (
-                              <div className={styles.freezeUnfreezeButtonsContainer}>
-                                {freezeButton}
-                                {unfreezeButton}
-                              </div>
-                            )}
+                            <div className={styles.freezeUnfreezeButtonsContainer}>
+                              {freezeButton}
+                              {unfreezeButton}
+                            </div>
                           </div>
                           {selectedUtxosBalance > 0 && (
                             <div className="order-0 order-sm-1">

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -719,7 +719,10 @@
       "utxo_detail_label_confirmations": "Confirmations",
       "utxo_detail_label_is_frozen": "Is frozen",
       "utxo_detail_label_locktime": "Locktime",
-      "utxo_detail_label_status": "Address status"
+      "utxo_detail_label_status": "Address status",
+      "text_actions_disabled": "Some operations are disabled.",
+      "text_actions_disabled_maker_running": "Earn is active. Some operations are disabled.",
+      "text_actions_disabled_taker_running": "A collaborative transaction is currently in progress. Some operations are disabled."
     }
   },
   "show_utxos": {