From ad5074781831918156869bb51c6aa967b1d5c88e Mon Sep 17 00:00:00 2001
From: Daniel <10026790+dnlggr@users.noreply.github.com>
Date: Thu, 21 Jul 2022 14:42:48 +0200
Subject: [PATCH] feat: add description for second fidelity bond (#414)

---
 src/components/fb/CreateFidelityBond.jsx      | 26 ++++++++++++++-----
 .../fb/CreateFidelityBond.module.css          |  7 +++++
 src/i18n/locales/en/translation.json          |  2 +-
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/fb/CreateFidelityBond.jsx b/src/components/fb/CreateFidelityBond.jsx
index 7fe9635d1..041977126 100644
--- 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
index 8807a7fe5..8bb622249 100644
--- 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
index bc581815c..9601a9d8c 100644
--- 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": {