Repository: joinmarket-webui/jam
Pull request #777 (2024-06-04 17:17:33)

ui(wallet): rephrase wallet label from 'unlocked' to 'active'
This partly reverts a previous change and rephrases the label on wallets that are currently loaded from "unlocked" to "active".

Mainly tries to avoid confusion as mentioned in #774.

## Before

<img src="https://github.com/joinmarket-webui/jam/assets/3358649/7ce06c3b-b6fa-412d-a667-ceb45aa553ca" width=350 />

## After

<img src="https://github.com/joinmarket-webui/jam/assets/3358649/21a44950-5028-43cd-99eb-4bb998dedf3d" width=350 />



Patch:
diff --git a/src/components/Wallet.tsx b/src/components/Wallet.tsx
index 9246026..6f1a1d7 100644
--- a/src/components/Wallet.tsx
+++ b/src/components/Wallet.tsx
@@ -189,7 +189,7 @@ export default function Wallet({
               </rb.Card.Title>
 
               {isActive ? (
-                <span className="text-success">{t('wallets.wallet_preview.wallet_unlocked')}</span>
+                <span className="text-success">{t('wallets.wallet_preview.wallet_active')}</span>
               ) : (
                 <span className="text-muted">{t('wallets.wallet_preview.wallet_locked')}</span>
               )}
diff --git a/src/components/fb/CreateFidelityBond.module.css b/src/components/fb/CreateFidelityBond.module.css
index 2b4545d..ecba3ef 100644
--- a/src/components/fb/CreateFidelityBond.module.css
+++ b/src/components/fb/CreateFidelityBond.module.css
@@ -25,7 +25,13 @@
   color: var(--bs-gray-600);
 }
 
-.header .subtitle a {
+.formMessageWhenBondAlreadyExists {
+  flex-shrink: 1;
+  font-size: 0.8rem;
+  color: var(--bs-gray-600);
+}
+
+.formMessageWhenBondAlreadyExists a {
   color: inherit;
 }
 
diff --git a/src/components/fb/CreateFidelityBond.tsx b/src/components/fb/CreateFidelityBond.tsx
index 6179aaa..f96ce61 100644
--- a/src/components/fb/CreateFidelityBond.tsx
+++ b/src/components/fb/CreateFidelityBond.tsx
@@ -617,7 +617,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
   }
 
   return (
-    <div className={styles.container}>
+    <div>
       {lockDate && timelockedAddress && selectedJar !== undefined && (
         <PaymentConfirmModal
           isShown={showConfirmInputsModal}
@@ -644,34 +644,34 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
         </PaymentConfirmModal>
       )}
 
-      <div className={styles.header} onClick={() => setShowCreateFidelityBondModal(!showCreateFidelityBondModal)}>
-        <div className="d-flex justify-content-between align-items-center">
-          <div className={styles.title}>
-            {otherFidelityBondExists
-              ? t('earn.fidelity_bond.title_fidelity_bond_exists')
-              : t('earn.fidelity_bond.title')}
-          </div>
-          <Sprite symbol={'plus'} width="20" height="20" />
+      {otherFidelityBondExists ? (
+        <div className="d-flex justify-content-center">
+          <rb.Button
+            size="sm"
+            variant="outline-dark"
+            className="border-0 d-inline-flex align-items-center"
+            onClick={() => setShowCreateFidelityBondModal(!showCreateFidelityBondModal)}
+          >
+            <Sprite symbol="plus" width="20" height="20" className="me-2" />
+            {t('earn.fidelity_bond.title_fidelity_bond_exists')}
+          </rb.Button>
         </div>
-        <div className={styles.subtitle}>
-          {otherFidelityBondExists ? (
-            <Trans i18nKey="earn.fidelity_bond.subtitle_fidelity_bond_exists">
-              <a
-                onClick={(e) => e.stopPropagation()}
-                rel="noopener noreferrer"
-                href="https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/master/docs/fidelity-bonds.md#what-amount-of-bitcoins-to-lock-up-and-for-how-long"
-              >
-                {/* i18n placeholder */}
-              </a>
-            </Trans>
-          ) : (
-            <div className="d-flex align-items-center justify-content-center gap-4 px-3 mt-3">
-              <Sprite className={styles.subtitleJar} symbol="fb-clock" width="46px" height="74px" />
-              {t('earn.fidelity_bond.subtitle')}
+      ) : (
+        <div className={styles.container}>
+          <div className={styles.header} onClick={() => setShowCreateFidelityBondModal(!showCreateFidelityBondModal)}>
+            <div className="d-flex justify-content-between align-items-center">
+              <div className={styles.title}>{t('earn.fidelity_bond.title')}</div>
+              <Sprite symbol={'plus'} width="20" height="20" />
             </div>
-          )}
+            <div className={styles.subtitle}>
+              <div className="d-flex align-items-center justify-content-center gap-4 px-3 mt-3">
+                <Sprite className={styles.subtitleJar} symbol="fb-clock" width="46px" height="74px" />
+                {t('earn.fidelity_bond.subtitle')}
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
+      )}
       <rb.Modal
         show={showCreateFidelityBondModal}
         animation={true}
@@ -685,6 +685,19 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
         </rb.Modal.Header>
         <rb.Modal.Body>
           {alert && <Alert {...alert} className="mt-0" onClose={() => setAlert(undefined)} />}
+          {otherFidelityBondExists && (
+            <div className={styles.formMessageWhenBondAlreadyExists}>
+              <Trans i18nKey="earn.fidelity_bond.subtitle_fidelity_bond_exists">
+                <a
+                  onClick={(e) => e.stopPropagation()}
+                  rel="noopener noreferrer"
+                  href="https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/master/docs/fidelity-bonds.md#what-amount-of-bitcoins-to-lock-up-and-for-how-long"
+                >
+                  {/* i18n placeholder */}
+                </a>
+              </Trans>
+            </div>
+          )}
           <div className="mb-5">{stepComponent(step)}</div>
           <div className="d-flex flex-column gap-2">
             {!isLoading && primaryButtonText(step) !== null && (


Test patch:
diff --git a/src/components/Wallet.test.tsx b/src/components/Wallet.test.tsx
index d64a709..9757be6 100644
--- a/src/components/Wallet.test.tsx
+++ b/src/components/Wallet.test.tsx
@@ -90,7 +90,7 @@ describe('<Wallet />', () => {
     )
 
     expect(screen.getByText(walletDisplayName(dummyWalletFileName))).toBeInTheDocument()
-    expect(screen.getByText('wallets.wallet_preview.wallet_unlocked')).toBeInTheDocument()
+    expect(screen.getByText('wallets.wallet_preview.wallet_active')).toBeInTheDocument()
     expect(screen.queryByPlaceholderText('wallets.wallet_preview.placeholder_password')).toBeInTheDocument()
     expect(screen.queryByText('wallets.wallet_preview.button_unlock')).toBeInTheDocument()
     expect(screen.queryByText('wallets.wallet_preview.button_open')).not.toBeInTheDocument()
@@ -107,7 +107,7 @@ describe('<Wallet />', () => {
     )
 
     expect(screen.getByText(walletDisplayName(dummyWalletFileName))).toBeInTheDocument()
-    expect(screen.getByText('wallets.wallet_preview.wallet_unlocked')).toBeInTheDocument()
+    expect(screen.getByText('wallets.wallet_preview.wallet_active')).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.button_open')).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.button_lock')).toBeInTheDocument()
     expect(screen.queryByPlaceholderText('wallets.wallet_preview.placeholder_password')).not.toBeInTheDocument()
@@ -123,7 +123,7 @@ describe('<Wallet />', () => {
       }),
     )
 
-    expect(screen.getByText('wallets.wallet_preview.wallet_unlocked')).toBeInTheDocument()
+    expect(screen.getByText('wallets.wallet_preview.wallet_active')).toBeInTheDocument()
     expect(screen.getByText('wallets.wallet_preview.button_lock')).toBeInTheDocument()
 
     const lockWalletButton = screen.getByText('wallets.wallet_preview.button_lock')
diff --git a/src/components/Wallets.test.tsx b/src/components/Wallets.test.tsx
index b083bc4..4b7f8e6 100644
--- a/src/components/Wallets.test.tsx
+++ b/src/components/Wallets.test.tsx
@@ -344,7 +344,7 @@ describe('<Wallets />', () => {
         }),
       )
 
-      expect(screen.getByText('wallets.wallet_preview.wallet_unlocked')).toBeInTheDocument()
+      expect(screen.getByText('wallets.wallet_preview.wallet_active')).toBeInTheDocument()
       expect(screen.getByText('wallets.wallet_preview.button_lock')).toBeInTheDocument()
 
       const lockWalletButton = screen.getByText('wallets.wallet_preview.button_lock')
@@ -393,7 +393,7 @@ describe('<Wallets />', () => {
         }),
       )
 
-      expect(screen.getByText('wallets.wallet_preview.wallet_unlocked')).toBeInTheDocument()
+      expect(screen.getByText('wallets.wallet_preview.wallet_active')).toBeInTheDocument()
       expect(screen.getByText('wallets.wallet_preview.button_lock')).toBeInTheDocument()
 
       const lockWalletButton = screen.getByText('wallets.wallet_preview.button_lock')