From 6b758a288c7fd071113253209dec3e306f1c868b Mon Sep 17 00:00:00 2001
From: barrytra <BHAVESHGUPTA1602@GMAIL.COM>
Date: Tue, 20 Aug 2024 13:44:17 +0530
Subject: [PATCH] UI(fb): 5 sec timer before confirmation

---
 src/components/fb2/CreateFidelityBond.tsx | 34 ++++++++++++++++++++---
 src/i18n/locales/en/translation.json      |  2 +-
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/fb2/CreateFidelityBond.tsx b/src/components/fb2/CreateFidelityBond.tsx
index fb0bf0c3..480bf51f 100644
--- a/src/components/fb2/CreateFidelityBond.tsx
+++ b/src/components/fb2/CreateFidelityBond.tsx
@@ -159,6 +159,23 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
     if (lockDate) loadTimeLockedAddress(lockDate)
   }, [lockDate, loadTimeLockedAddress])
 
+  const [countdown, setCountdown] = useState(5)
+  const [isClickable, setIsClickable] = useState(false)
+
+  const startCountdown = () => {
+    const interval = setInterval(() => {
+      console.log(countdown)
+      setCountdown((prevCountdown) => {
+        if (prevCountdown <= 1) {
+          clearInterval(interval)
+          setIsClickable(true)
+          return 0
+        }
+        return prevCountdown - 1
+      })
+    }, 1000)
+  }
+
   const primaryButtonText = (currentStep: number) => {
     switch (currentStep) {
       case steps.selectDate:
@@ -171,7 +188,8 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
         }
         return t('earn.fidelity_bond.select_utxos.text_primary_button')
       case steps.confirmation:
-        return t('earn.fidelity_bond.confirmation.text_primary_button')
+        if (isClickable) return t('earn.fidelity_bond.confirmation.text_primary_button')
+        else return `Wait ${countdown} Seconds`
       default:
         return null
     }
@@ -216,10 +234,12 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
     }
 
     if (currentStep === steps.confirmation) {
-      if (alert) {
-        return steps.failed
+      if (isClickable) {
+        if (alert) {
+          return steps.failed
+        }
+        return steps.done
       }
-      return steps.done
     }
 
     return null
@@ -230,6 +250,12 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
       return
     }
 
+    if (nextStep(step) === steps.confirmation) {
+      setIsClickable(false)
+      setCountdown(5)
+      startCountdown()
+    }
+
     if (nextStep(step) === steps.failed) {
       reset()
       return
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index aa38108c..f6b8f760 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -515,7 +515,7 @@
         "body": "It will be impossible to spend time-locked funds until the fidelity bond expires. Date of expiration is {{ humanReadableDuration }} on {{date}}."
       },
       "confirmation": {
-        "text_primary_button": "Done",
+        "text_primary_button": "Create fidelity bond",
         "text_secondary_button": "Back"
       },
       "title": "Configure Fidelity Bond",