From 878539a56a6641cc6c3654772c7f94c20e0a0cb8 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Sat, 15 Jul 2023 19:47:06 +0100
Subject: [PATCH] Confirm Credit Popup Modifications

---
 .../MyWallet/Popup/ConfirmAddFund.jsx         | 67 ++++++++++++++-----
 src/components/MyWallet/Popup/CreditPopup.jsx |  2 +-
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
index f74ce3a..a157d87 100644
--- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
@@ -25,13 +25,6 @@ function ConfirmAddFund({
     status: false,
   }); // STATE FOR API REQUEST
 
-  // const [ConfirmCredit, setConfirmCredit] = useState({
-  //   show: false,
-  //   loader: false,
-  //   msg: "",
-  //   data: {},
-  // });
-
   const apiURL = new usersService();
   const navigate = useNavigate();
 
@@ -131,14 +124,18 @@ function ConfirmAddFund({
         return;
       }
 
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: {
-          awaitConfirm: { loader: false, state: false },
-          acceptConfirm: { loader: false, state: true },
-        },
-        data: _response,
-      }));
+      return setTimeout(
+        () =>
+          setConfirmCredit((prev) => ({
+            ...prev,
+            show: {
+              awaitConfirm: { loader: false, state: false },
+              acceptConfirm: { loader: false, state: true },
+            },
+            data: _response,
+          })),
+        1500
+      );
     } catch (error) {
       setConfirmCredit((prev) => ({
         ...prev,
@@ -170,7 +167,8 @@ function ConfirmAddFund({
           <div className="px-4 md:p-8 py-4 add-fund-info">
             <div className="field w-full mb-3 min-h-[45px]">
               {confirmCredit?.show?.awaitConfirm?.state ? (
-                <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-2">
+                  {/* Amount */}
                   <div
                     className={`flex items-center ${
                       __confirmCountry == "US" ? "gap-14" : "gap-4"
@@ -185,6 +183,40 @@ function ConfirmAddFund({
                       }`}
                     </span>
                   </div>
+                  {/* Transaction Fee */}
+                  <div
+                    className={`flex items-center border-b border-gray-600 ${
+                      __confirmCountry == "US" ? "gap-[2.7rem]" : "gap-4"
+                    }`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Transaction Fee
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {`${walletItem?.symbol} ${
+                        Number(__confirmData?.fee).toLocaleString() || ""
+                      }`}
+                    </span>
+                  </div>
+                  {/* Total */}
+                  <div
+                    className={`flex items-center ${
+                      __confirmCountry == "US" ? "gap-[8rem]" : "gap-4"
+                    }`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Total
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {`${walletItem?.symbol} ${
+                        (
+                          Number(__confirmData?.amount) +
+                          Number(__confirmData?.fee)
+                        ).toLocaleString() || ""
+                      }`}
+                    </span>
+                  </div>
+
                   {__confirmCountry == "US" && (
                     <div className="flex items-center gap-8">
                       <label
@@ -220,9 +252,10 @@ function ConfirmAddFund({
 
           <div
             className={
-              __confirmCountry == "US" ? "min-h-[163px]" : "min-h-[200px]"
+              __confirmCountry == "US" ? "min-h-[96px]" : "min-h-[200px]"
             }
           ></div>
+          <hr />
           <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
             <button
               className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx
index 971e39f..b464db0 100644
--- a/src/components/MyWallet/Popup/CreditPopup.jsx
+++ b/src/components/MyWallet/Popup/CreditPopup.jsx
@@ -60,7 +60,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center">
           {confirmCredit?.show?.acceptConfirm?.loader ? (
-            <div className="h-[33rem] flex items-center justify-center">
+            <div className="h-[32rem] flex items-center justify-center">
               <LoadingSpinner size="12" color="sky-blue" />
             </div>
           ) : (