ui:(FB) added timeLock address component

joinmarket-webui · Jun 11, 2024 · cf5263a · cf5263a
1 parent 2851b7a
commit cf5263a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/components/fb/CreateFidelityBond.module.css b/src/components/fb/CreateFidelityBond.module.css
@@ -85,10 +85,25 @@
   padding: 0.8rem 0.8rem;
   border-radius: 100%;
   background-color: var(--bs-gray-100);
-  color: var(--bs-body-color);
 }
 
 .step {
   position: absolute;
   color: var(--bs-gray-900);
 }
+
+.addressLabel {
+  color: var(--bs-gray-600);
+  font-size: 1rem;
+}
+
+.addressContent {
+  font-size: 1rem;
+  word-break: break-all;
+}
+
+.timelockedAddress {
+  text-align: left;
+  padding: 0;
+  font-size: 0.8rem;
+}
diff --git a/src/components/fb/CreateFidelityBond.tsx b/src/components/fb/CreateFidelityBond.tsx
@@ -699,6 +699,22 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
             </div>
           )}
 
+          <div className="d-flex align-items-center gap-5 mx-4 my-3 justify-content-start">
+            <div>
+              <Sprite symbol="timelock" width="25" height="25" className={styles.utxoSummaryIconLock} />
+            </div>
+            <div className="d-flex flex-column">
+              <div className={styles.addressLabel}>{t('earn.fidelity_bond.review_inputs.label_address')}</div>
+              <div className={styles.addressContent}>
+                {timelockedAddress ? (
+                  <code className={styles.timelockedAddress}>{timelockedAddress}</code>
+                ) : (
+                  <div>{t('earn.fidelity_bond.error_loading_address')}</div>
+                )}
+              </div>
+            </div>
+          </div>
+
           <div className={styles.tabs}>
             {['Expiration date', 'Funding Source', 'UTXO Overview', 'Confirmation'].map((tab, index) => (
               <div>