feat: add description for second fidelity bond (#414)

joinmarket-webui · Jul 21, 2022 · ad50747 · ad50747
1 parent 484afbc
commit ad50747
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/src/components/fb/CreateFidelityBond.jsx b/src/components/fb/CreateFidelityBond.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo } from 'react'
 import * as rb from 'react-bootstrap'
 import * as Api from '../../libs/JmWalletApi'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { useReloadCurrentWalletInfo } from '../../context/WalletContext'
 import Alert from '../Alert'
 import Sprite from '../Sprite'
@@ -531,12 +531,24 @@ const CreateFidelityBond = ({ otherFidelityBondExists, accountBalances, totalBal
           </div>
           <Sprite symbol={isExpanded ? 'caret-up' : 'plus'} width="20" height="20" />
         </div>
-        {!otherFidelityBondExists && (
-          <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" />
-            <div className={styles.subtitle}>{t('earn.fidelity_bond.subtitle')}</div>
-          </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>
+          )}
+        </div>
       </div>
       <rb.Collapse in={isExpanded}>
         <div>

diff --git a/src/components/fb/CreateFidelityBond.module.css b/src/components/fb/CreateFidelityBond.module.css
@@ -9,6 +9,9 @@
 }
 
 .header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   cursor: pointer;
 }
 
@@ -22,6 +25,10 @@
   color: var(--bs-gray-600);
 }
 
+.header .subtitle a {
+  color: inherit;
+}
+
 .header .title {
   width: 100%;
   font-size: 1.2rem;

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -340,7 +340,7 @@
       "title": "Configure Fidelity Bond",
       "title_fidelity_bond_exists": "Configure Additional Bond",
       "subtitle": "Your sats will be time-locked by the Bitcoin protocol. It is impossible to move them before the bond is expired.",
-
+      "subtitle_fidelity_bond_exists": "If more than one fidelity bond exists, only the <0>the most valuable one</0> will be used.",
       "text_maker_running": "Earn is active. Stop the service in order to create a Fidelity Bond.",
       "text_coinjoin_already_running": "A collaborative transaction is currently in progress.",
       "create_form": {