From 4e89da1a443dcba8a592cd0e1cfc1331fb662970 Mon Sep 17 00:00:00 2001
From: barrytra <BHAVESHGUPTA1602@GMAIL.COM>
Date: Wed, 22 May 2024 12:23:26 +0530
Subject: [PATCH 1/2] modal instead of dropdown for new FB form

---
 .../fb/CreateFidelityBond.module.css          | 21 +++++++++++++++++++
 src/components/fb/CreateFidelityBond.tsx      | 10 ++++++---
 src/i18n/locales/en/translation.json          |  1 +
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/fb/CreateFidelityBond.module.css b/src/components/fb/CreateFidelityBond.module.css
index 2b4545daf..2499f5d88 100644
--- a/src/components/fb/CreateFidelityBond.module.css
+++ b/src/components/fb/CreateFidelityBond.module.css
@@ -50,3 +50,24 @@
   color: 'white';
   border-radius: '50%';
 }
+
+.form {
+  padding: 0.5rem;
+}
+
+.formHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem 0 1rem;
+}
+
+.formHeader .title {
+  width: 100%;
+  font-size: 1.2rem;
+  color: var(--bs-body-color);
+}
+
+.formHeader .svg {
+  color: var(--bs-body-color);
+}
diff --git a/src/components/fb/CreateFidelityBond.tsx b/src/components/fb/CreateFidelityBond.tsx
index 8d6f3353e..6de23deb3 100644
--- a/src/components/fb/CreateFidelityBond.tsx
+++ b/src/components/fb/CreateFidelityBond.tsx
@@ -673,8 +673,12 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
           )}
         </div>
       </div>
-      <rb.Collapse in={isExpanded}>
-        <div>
+      <rb.Modal show={isExpanded} animation={true} backdrop="static" centered={true}>
+        <div className={styles.form}>
+          <rb.Modal.Header bsPrefix={styles.formHeader}>
+            <div className={styles.title}>{t('earn.fidelity_bond.create_fidelity_bond.title')}</div>
+            <Sprite symbol="cross" width="25" height="25" onClick={onSecondaryButtonClicked} />
+          </rb.Modal.Header>
           <hr />
           <div className="mb-5">{stepComponent(step)}</div>
           <div className="d-flex flex-column gap-2">
@@ -698,7 +702,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
             )}
           </div>
         </div>
-      </rb.Collapse>
+      </rb.Modal>
     </div>
   )
 }
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index fe6ce3794..273d0a004 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -494,6 +494,7 @@
         "label_selected_utxos": "UTXOs that will be time-locked:"
       },
       "create_fidelity_bond": {
+        "title": "Create Fidelity Bond",
         "success_text": "Fidelity bond created!",
         "text_primary_button": "Done",
         "text_primary_button_unfreeze": "Unfreeze UTXOs",

From e980bab567fc3906000b10ffed457e2a2e751c9d Mon Sep 17 00:00:00 2001
From: barrytra <BHAVESHGUPTA1602@GMAIL.COM>
Date: Wed, 22 May 2024 15:10:41 +0530
Subject: [PATCH 2/2] modal instead of dropdown for new FB form

---
 .../fb/CreateFidelityBond.module.css          | 21 ------------
 src/components/fb/CreateFidelityBond.tsx      | 33 +++++++++++--------
 2 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/src/components/fb/CreateFidelityBond.module.css b/src/components/fb/CreateFidelityBond.module.css
index 2499f5d88..2b4545daf 100644
--- a/src/components/fb/CreateFidelityBond.module.css
+++ b/src/components/fb/CreateFidelityBond.module.css
@@ -50,24 +50,3 @@
   color: 'white';
   border-radius: '50%';
 }
-
-.form {
-  padding: 0.5rem;
-}
-
-.formHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 1rem 0 1rem;
-}
-
-.formHeader .title {
-  width: 100%;
-  font-size: 1.2rem;
-  color: var(--bs-body-color);
-}
-
-.formHeader .svg {
-  color: var(--bs-body-color);
-}
diff --git a/src/components/fb/CreateFidelityBond.tsx b/src/components/fb/CreateFidelityBond.tsx
index 6de23deb3..12576bb2d 100644
--- a/src/components/fb/CreateFidelityBond.tsx
+++ b/src/components/fb/CreateFidelityBond.tsx
@@ -75,7 +75,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
   const feeConfigValues = useFeeConfigValues()[0]
 
-  const [isExpanded, setIsExpanded] = useState(false)
+  const [showCreateFidelityBondModal, setShowCreateFidelityBondModal] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [alert, setAlert] = useState<SimpleAlert>()
   const [step, setStep] = useState(steps.selectDate)
@@ -107,7 +107,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
 
   const reset = () => {
     setIsLoading(false)
-    setIsExpanded(false)
+    setShowCreateFidelityBondModal(false)
     setStep(steps.selectDate)
     setSelectedJar(undefined)
     setSelectedUtxos([])
@@ -129,7 +129,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
   }, [fidelityBonds, lockDate])
 
   useEffect(() => {
-    if (!isExpanded) {
+    if (!showCreateFidelityBondModal) {
       reset()
     } else {
       setIsLoading(true)
@@ -146,7 +146,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
         })
       return () => abortCtrl.abort()
     }
-  }, [isExpanded, reloadCurrentWalletInfo, t])
+  }, [showCreateFidelityBondModal, reloadCurrentWalletInfo, t])
 
   const freezeUtxos = (utxos: Utxos) => {
     changeUtxoFreeze(utxos, true)
@@ -645,14 +645,14 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
         </PaymentConfirmModal>
       )}
 
-      <div className={styles.header} onClick={() => setIsExpanded(!isExpanded)}>
+      <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={isExpanded ? 'caret-up' : 'plus'} width="20" height="20" />
+          <Sprite symbol={'plus'} width="20" height="20" />
         </div>
         <div className={styles.subtitle}>
           {otherFidelityBondExists ? (
@@ -673,13 +673,18 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
           )}
         </div>
       </div>
-      <rb.Modal show={isExpanded} animation={true} backdrop="static" centered={true}>
-        <div className={styles.form}>
-          <rb.Modal.Header bsPrefix={styles.formHeader}>
-            <div className={styles.title}>{t('earn.fidelity_bond.create_fidelity_bond.title')}</div>
-            <Sprite symbol="cross" width="25" height="25" onClick={onSecondaryButtonClicked} />
-          </rb.Modal.Header>
-          <hr />
+      <rb.Modal
+        show={showCreateFidelityBondModal}
+        animation={true}
+        backdrop="static"
+        centered={true}
+        keyboard={false}
+        onHide={() => setShowCreateFidelityBondModal(false)}
+      >
+        <rb.Modal.Header closeButton>
+          <rb.Modal.Title>{t('earn.fidelity_bond.create_fidelity_bond.title')}</rb.Modal.Title>
+        </rb.Modal.Header>
+        <rb.Modal.Body>
           <div className="mb-5">{stepComponent(step)}</div>
           <div className="d-flex flex-column gap-2">
             {!isLoading && primaryButtonText(step) !== null && (
@@ -701,7 +706,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
               </rb.Button>
             )}
           </div>
-        </div>
+        </rb.Modal.Body>
       </rb.Modal>
     </div>
   )