Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import usersService from "../../services/UsersService";
+import usersService from "../../../services/UsersService";
-import InputCom from "../Helpers/Inputs/InputCom";
+import InputCom from "../../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 import { Form, Formik } from "formik";
 import { useSelector } from "react-redux";
 import * as Yup from "yup";
-import Icons from "../Helpers/Icons";
+import Icons from "../../Helpers/Icons";
 
 const validationSchema = Yup.object().shape({
   name: Yup.string()
@@ -65,7 +65,8 @@ function AddFundDollars(props) {
   const { firstname, lastname } = userDetails;
   const [prevCardDetails, setPrevCardDetails] = useState({});
   const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
-
+  let __awaitComponent = props.confirmCredit.show.awaitConfirm;
+  let __acceptComponent = props.confirmCredit.show.awaitConfirm;
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     setPrevCardDetails((prevState) => ({
@@ -84,6 +85,7 @@ function AddFundDollars(props) {
 
   const handleSubmit = async (values, helpers) => {
     props.setInputError("");
+
     if (!props.input || props.input === "0") {
       props.setInputError("Please Enter Amount");
       return;
@@ -98,7 +100,12 @@ function AddFundDollars(props) {
       if (!prevCardDetails) {
         return;
       }
-      setLoader(true);
+
+      props.setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: true } },
+      }));
+
       let stateData = {
         amount: Number(props.input) * 100,
         currency: props.walletItem?.code,
@@ -107,7 +114,10 @@ function AddFundDollars(props) {
       try {
         const res = await apiCall.getStartCredit(stateData);
         if (res.data.internal_return < 0) {
-          setLoader(false);
+          props.setConfirmCredit((prev) => ({
+            ...prev,
+            show: { awaitConfirm: { loader: false } },
+          }));
           props.setInputError("An Error Occurred");
           setTimeout(() => props.setInputError(""), 5000);
           return;
@@ -120,20 +130,21 @@ function AddFundDollars(props) {
         stateData = { ...stateData, ..._response };
 
         setTimeout(() => {
-          setLoader(false);
           props.setConfirmCredit({
-            show: true,
+            show: {
+              awaitConfirm: { loader: false, state: true },
+              acceptConfirm: { loader: false, state: false },
+            },
             data: stateData,
           });
         }, 1500);
       } catch (error) {
+        props.setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
         console.log(error);
       }
-
-      return setTimeout(() => {
-        props.setConfirmCredit({ show: true, data: stateData });
-        setLoader(false);
-      }, 1500);
     }
 
     if (tab === "new") {
@@ -142,6 +153,8 @@ function AddFundDollars(props) {
         currency: props.currency,
         ...values,
       };
+
+      // Rest of the code for tab "new"
     }
   };
 
@@ -501,7 +514,7 @@ function AddFundDollars(props) {
             type="button"
             className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            {loader ? (
+            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
               <LoadingSpinner size="6" color="sky-blue" />
             ) : (
               <span className="text-white">Continue</span>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import usersService from "../../services/UsersService";
+import usersService from "../../../services/UsersService";
-import Icons from "../Helpers/Icons";
+import Icons from "../../Helpers/Icons";
-import InputCom from "../Helpers/Inputs/InputCom";
+import InputCom from "../../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AddFundDollars from "./AddFundDollars";
 
 function AddFundPop({
@@ -11,6 +11,7 @@ function AddFundPop({
   input,
   setInput,
   onClose,
+  confirmCredit,
   setConfirmCredit,
   walletItem,
 }) {
@@ -20,7 +21,7 @@ function AddFundPop({
   const { payment, currency } = _payment;
 
   const [inputError, setInputError] = useState("");
-  const [loader, setLoader] = useState(false);
+  let __awaitComponent = confirmCredit.show.awaitConfirm;
 
   const handleChange = ({ target: { name, value } }) => {
     setInput(value);
@@ -28,17 +29,26 @@ function AddFundPop({
 
   const handleSubmit = async () => {
     setInputError("");
-    setLoader(true);
+    setConfirmCredit((prev) => ({
+      ...prev,
+      show: { awaitConfirm: { loader: true } },
+    }));
 
     if (!input || input === "0") {
-      setLoader(false);
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
       setInputError("Please Enter Amount");
       setTimeout(() => setInputError(""), 5000);
       return;
     }
 
     if (isNaN(input)) {
-      setLoader(false);
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
       setInputError("Amount must be a Number");
       setTimeout(() => setInputError(""), 5000);
       return;
@@ -52,7 +62,10 @@ function AddFundPop({
     try {
       const res = await apiCall.getStartCredit(stateData);
       if (res.data.internal_return < 0) {
-        setLoader(false);
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
         setInputError("An Error Occurred");
         setTimeout(() => setInputError(""), 5000);
         return;
@@ -64,13 +77,20 @@ function AddFundPop({
       stateData = { ...stateData, ..._response };
 
       setTimeout(() => {
-        setLoader(false);
+        setConfirmCredit((prev) => ({
-        setConfirmCredit({
+          ...prev,
-          show: true,
+          show: {
+            awaitConfirm: { loader: false, state: true },
+            acceptConfirm: { loader: false, state: false },
+          },
           data: stateData,
-        });
+        }));
       }, 1500);
     } catch (error) {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
       console.log(error);
     }
   };
@@ -108,6 +128,7 @@ function AddFundPop({
                   setInput={setInput}
                   currency={currency}
                   onClose={onClose}
+                  confirmCredit={confirmCredit}
                   setConfirmCredit={setConfirmCredit}
                 />
               </div>
@@ -128,7 +149,7 @@ function AddFundPop({
                   type="button"
                   className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
                 >
-                  {loader ? (
+                  {__awaitComponent.loader ? (
                     <LoadingSpinner size="6" color="sky-blue" />
                   ) : (
                     <>

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -0,0 +1,106 @@
+import React from "react";
+
+function CompleteConfirmCredit({ onClose, confirmCredit }) {
+  console.log(confirmCredit);
+  const { data } = confirmCredit;
+  return (
+    <div className="logout-modal-body w-full flex flex-col items-center">
+      <div className="content-wrapper w-full h-[32rem]">
+        <div className="w-full mb-10">
+          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
+            <div className="px-4 md:p-8 py-4 add-fund-info">
+              <div className="field w-full mb-3 min-h-[45px]">
+                <div className="flex flex-col gap-4">
+                  {/* Success Icon for now */}
+                  <div className="flex items-center w-full justify-center">
+                    {data?.result == "Charge success" ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="100"
+                        height="100"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="green"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        className="feather feather-check-circle"
+                      >
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                      </svg>
+                    ) : (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        width="100"
+                        height="100"
+                        stroke="red"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        className="feather feather-x-circle"
+                      >
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="15" y1="9" x2="9" y2="15"></line>
+                        <line x1="9" y1="9" x2="15" y2="15"></line>
+                      </svg>
+                    )}
+                  </div>
+
+                  <div className={`flex items-center`}>
+                    <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {data?.result == "Charge success"
+                        ? "Credit was Successful!"
+                        : "Credit was Unsuccessful"}
+                    </h1>
+                  </div>
+
+                  <div className="flex items-center gap-8">
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Amount({data?.currency || ""})
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {`${data?.symbol || ""} ${
+                        Number(data?.amount * 0.01).toLocaleString() || ""
+                      }`}
+                    </span>
+                  </div>
+
+                  <div className="flex items-center gap-8">
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Wallet Balance
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {data?.curr_balance}
+                    </span>
+                  </div>
+
+                  <div className="flex items-center gap-8">
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Confirmation Number
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {data?.confirmation}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <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 btn-gradient text-white text-base rounded-full w-[100px]"
+                onClick={onClose}
+              >
+                Ok
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CompleteConfirmCredit;

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,13 +1,17 @@
+import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-import usersService from "../../services/UsersService";
+function ConfirmAddFund({
-
+  confirmCredit,
-import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
+  onClose,
-
+  walletItem,
-function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
+  setConfirmCredit,
+}) {
   const __confirmData = confirmCredit?.data;
   const __confirmCountry = walletItem?.country;
   const __confirmCardDetails = __confirmData.card
@@ -15,21 +19,26 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     : "";
   let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
 
-  let [confirmLoading, setConfirmLoading] = useState(false);
-
   let [requestStatus, setRequestStatus] = useState({
     message: "",
     loading: false,
     status: false,
   }); // STATE FOR API REQUEST
 
+  // const [ConfirmCredit, setConfirmCredit] = useState({
+  //   show: false,
+  //   loader: false,
+  //   msg: "",
+  //   data: {},
+  // });
+
   const apiURL = new usersService();
   const navigate = useNavigate();
 
   //FUNCTION TO HANDLE SUBMIT
   const onSuccessPayment = () => {
     setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
+    let reqData = { amount: __confirmData?.account, currency: "NGN" };
     apiURL
       .startTopUp(reqData)
       .then((res) => {
@@ -66,7 +75,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   const config = {
     public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
     tx_ref: Date.now(),
-    amount: confirmCredit?.data?.amount,
+    amount: __confirmData?.amount,
     currency: "NGN",
     payment_options: "card,mobilemoney,ussd",
     customer: {
@@ -91,24 +100,54 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     onClose: () => {},
   };
 
+  // Handling Previous Card
   const handlePrevCard = async () => {
-    setConfirmLoading(true);
+    const { amount, credit_reference, currency } = __confirmData;
-    let reqData = {
+    const { card_uid } = __confirmCardDetails;
-      amount: __confirmData.amount * 100,
+
-      card_uid: __confirmCardDetails.card_uid,
+    const reqData = {
-      credit_reference: __confirmData.credit_reference,
+      amount: amount * 100,
-      currency: __confirmData.currency,
+      card_uid,
+      credit_reference,
+      currency,
     };
 
     try {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: true },
+        },
+      }));
       const res = await apiURL.getPaidPrevCard(reqData);
-      setConfirmLoading(false);
+      const _response = res.data;
-      console.log(res.data);
+      if (res.data.internal_return < 0) {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            acceptConfirm: { loader: false },
+          },
+        }));
+        return;
+      }
+
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          awaitConfirm: { loader: false, state: false },
+          acceptConfirm: { loader: false, state: true },
+        },
+        data: _response,
+      }));
     } catch (error) {
-      setConfirmLoading(false);
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: false },
+        },
+      }));
       console.log(error);
     }
-    console.log("Test me");
   };
 
   const ThePaymentText = ({ value }) => (
@@ -124,15 +163,13 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
-  console.log(confirmCredit);
-
   return (
     <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">
         <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
           <div className="px-4 md:p-8 py-4 add-fund-info">
             <div className="field w-full mb-3 min-h-[45px]">
-              {confirmCredit?.show ? (
+              {confirmCredit?.show?.awaitConfirm?.state ? (
                 <div className="flex flex-col gap-4">
                   <div
                     className={`flex items-center ${
@@ -180,7 +217,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
               ) : null}
             </div>
           </div>
-          {/* <hr /> */}
+
           <div
             className={
               __confirmCountry == "US" ? "min-h-[163px]" : "min-h-[200px]"
@@ -202,7 +239,11 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                     : () => console.log("Test me")
                 }
               >
-                Proceed
+                {confirmCredit?.show?.acceptConfirm?.loader ? (
+                  <LoadingSpinner size="6" color="sky-blue" />
+                ) : (
+                  "Proceed"
+                )}
               </button>
             )}
             {__confirmCountry == "NG" && (
@@ -214,20 +255,6 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
           </div>
         </div>
       </div>
-
-      {/* <div className="w-full mb-10">
-        <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Recent Activity
-          </h2>
-          <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
-          {payment.loading ? (
-            <LoadingSpinner size="16" color="sky-blue" />
-          ) : (
-            <RecentActivityTable payment={payment} />
-          )}
-        </div>
-      </div> */}
     </div>
   );
 }

src/components/MyWallet/Popup/ConfirmTransfer.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import InputCom from "../Helpers/Inputs/InputCom";
+import InputCom from "../../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 
 import usersService from "../../services/UsersService";

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -1,39 +1,20 @@
 import { useState } from "react";
-import { useLocation } from "react-router-dom";
-import usersService from "../../../services/UsersService";
 import ModalCom from "../../Helpers/ModalCom";
-import AddFundPop from "../AddFundPop";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import ConfirmAddFund from "../ConfirmAddFund";
+import AddFundPop from "./AddFundPop";
+import CompleteConfirmCredit from "./CompleteConfirmCredit";
+import ConfirmAddFund from "./ConfirmAddFund";
 
 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
-  const { pathname, state } = useLocation();
-  const [submitTask, setSubmitTask] = useState({
-    loading: false,
-    msg: "",
-    state: "",
-  });
-  const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
   let [input, setInput] = useState("");
   const [confirmCredit, setConfirmCredit] = useState({
-    show: false,
+    show: {
+      awaitConfirm: { loader: false, state: false },
+      acceptConfirm: { loader: false, state: false },
+    },
     data: {},
   });
 
-  const switchNextStep = ({ target: value }) => {
-    setSuggestedNextStep(value);
-  };
-
-  const apiCall = new usersService();
-
-  const handleParentSuggestion = (values) => {
-    if (suggestedNextStep == "Send Task") {
-      let firstName = state?.firstname;
-      let family_uid = state?.family_uid;
-      //   continuePopupData({ ...details, firstName, family_uid });
-    }
-    onClose();
-  };
-
   return (
     <ModalCom
       action={onClose}
@@ -43,7 +24,13 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
+            {confirmCredit?.show?.acceptConfirm?.loader
+              ? "Confirming Credit..."
+              : confirmCredit?.show?.awaitConfirm?.state
+              ? "Confirm Credit Add"
+              : confirmCredit?.show?.acceptConfirm?.state
+              ? "Credit Add Completed"
+              : "Add Credit"}
           </h1>
           <button
             type="button"
@@ -72,22 +59,37 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center">
-          {confirmCredit.show ? (
+          {confirmCredit?.show?.acceptConfirm?.loader ? (
-            <ConfirmAddFund
+            <div className="h-[33rem] flex items-center justify-center">
-              confirmCredit={confirmCredit}
+              <LoadingSpinner size="12" color="sky-blue" />
-              walletItem={walletItem}
+            </div>
-              onClose={onClose}
-            />
           ) : (
-            <AddFundPop
+            <>
-              _payment={details}
+              {confirmCredit?.show?.awaitConfirm?.state ? (
-              walletItem={walletItem}
+                <ConfirmAddFund
-              input={input}
+                  confirmCredit={confirmCredit}
-              setInput={setInput}
+                  setConfirmCredit={setConfirmCredit}
-              onClose={onClose}
+                  walletItem={walletItem}
-              confirmCredit={confirmCredit}
+                  onClose={onClose}
-              setConfirmCredit={setConfirmCredit}
+                />
-            />
+              ) : confirmCredit?.show?.acceptConfirm?.state ? (
+                <CompleteConfirmCredit
+                  walletItem={walletItem}
+                  confirmCredit={confirmCredit}
+                  onClose={onClose}
+                />
+              ) : (
+                <AddFundPop
+                  _payment={details}
+                  walletItem={walletItem}
+                  input={input}
+                  setInput={setInput}
+                  onClose={onClose}
+                  confirmCredit={confirmCredit}
+                  setConfirmCredit={setConfirmCredit}
+                />
+              )}
+            </>
           )}
         </div>
       </div>

src/components/MyWallet/Popup/TransferFund.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import InputCom from "../Helpers/Inputs/InputCom";
+import InputCom from "../../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
+// import RecentActivityTable
 
-import usersService from "../../services/UsersService";
+import usersService from "../../../services/UsersService";
 
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
@@ -326,7 +326,8 @@ function TransferFund({ payment, wallet }) {
           {payment.loading ? (
             <LoadingSpinner size="16" color="sky-blue" />
           ) : (
-            <RecentActivityTable payment={payment} />
+            // <RecentActivityTable payment={payment} />
+            null
           )}
         </div>
       </div>

src/components/MyWallet/Wallet.jsx

@@ -11,12 +11,12 @@ import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-const AddFund = lazy(() => import("./AddFund"));
+// const AddFund = lazy(() => import("./AddFund"));
-const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
+// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
-const TransferFund = lazy(() => import("./TransferFund"));
+// const TransferFund = lazy(() => import("./TransferFund"));
 const WalletBox = lazy(() => import("./WalletBox"));
-const AddRecipient = lazy(() => import("./AddRecipient"));
+// const AddRecipient = lazy(() => import("./AddRecipient"));
-const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
+// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
 
 function Wallet() {
   return (
@@ -119,31 +119,6 @@ const WalletRoutes = () => {
           </Suspense>
         }
       >
-        {/* <Route
-          path="add-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <AddFund payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route
-          path="add-fund/confirm-add-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <ConfirmAddFund payment={paymentHistory} />
-            </Suspense>
-          }
-        /> */}
-        <Route
-          path="transfer-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <TransferFund payment={paymentHistory} wallet={walletList} />
-            </Suspense>
-          }
-        />
-        {/*<Route index element={<Balance wallet={walletList} />} />*/}
         <Route
           index
           element={
@@ -152,22 +127,6 @@ const WalletRoutes = () => {
             </Suspense>
           }
         />
-        <Route
-          path="transfer-fund/add-recipient"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <AddRecipient />
-            </Suspense>
-          }
-        />
-        <Route
-          path="transfer-fund/confirm-transfer"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <ConfirmTransfer payment={paymentHistory} wallet={walletList} />
-            </Suspense>
-          }
-        />
         <Route path="*" element={<Navigate to="/" />} />
       </Route>
     </Routes>

src/components/MyWallet/WalletItemCard.jsx

@@ -16,7 +16,6 @@ export default function WalletItemCard({ walletItem, payment }) {
 
   //   Credit popup
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
-
   const openPopUp = (value) => {
     setCreditPopup({
       show: true,
@@ -41,47 +40,52 @@ export default function WalletItemCard({ walletItem, payment }) {
         }}
       >
         {/* <div className="w-[350px]"> */}
-          <div className="wallet w-full flex justify-between items-start gap-3">
+        <div className="wallet w-full flex justify-between items-start gap-3">
-            <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
-              <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            <img
-            </div>
+              src={localImgLoad(`images/currency/${image}`)}
-            <div className="balance w-full mt-2 flex justify-center">
+              className="w-full h-full"
-              <div className="">
+              alt="curreny-icon"
-                <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+            />
-                  Current Balance
+          </div>
-                </p>
+          <div className="balance w-full mt-2 flex justify-center">
-                <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+            <div className="">
-                  {PriceFormatter(
+              <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-                    walletItem.amount * 0.01,
+                Current Balance
-                    walletItem.code,
+              </p>
-                    undefined,
+              <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-                    "text-[2rem]"
+                {PriceFormatter(
-                  )}
+                  walletItem.amount * 0.01,
-                </p>
+                  walletItem.code,
-              </div>
+                  undefined,
+                  "text-[2rem]"
+                )}
+              </p>
             </div>
           </div>
+        </div>
 
-          <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
+        <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
-            HOLDINGS :{" "}
+          HOLDINGS :{" "}
-            <span className="mt-1">
+          <span className="mt-1">
-              {PriceFormatter(
+            {PriceFormatter(
-                walletItem.escrow * 0.01,
+              walletItem.escrow * 0.01,
-                walletItem.code,
+              walletItem.code,
-                undefined,
+              undefined,
-                "text-[2rem]"
+              "text-[2rem]"
-              )}
+            )}
-            </span>
+          </span>
-          </p>
+        </p>
-          {/* for white underline */}
+        {/* for white underline */}
-          <div className="my-2 w-full h-[1px] bg-white"></div> 
+        <div className="my-2 w-full h-[1px] bg-white"></div>
 
-          {!accountType ? (
+        {!accountType ? (
-            <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
+          <WalletAction
-          )
+            walletItem={walletItem}
-          :
+            payment={payment}
-          null
+            openPopUp={openPopUp}
-          }
+          />
+        ) : null}
         {/* </div> */}
       </div>
       {creditPopup.show && (