made currency to auto select during add job if user has only one wallet acct

src/components/AddJob/AddJob.jsx

@@ -72,9 +72,21 @@ function AddJob({ popUpHandler, categories }) {
     }
   };
 
+  // For form initial values
+  const initialValues = {
+    // initial values for formik
+    country: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  };
+
   return (
     <Formik
-        initialValues={IV}
+        initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
       >
@@ -105,12 +117,13 @@ function AddJob({ popUpHandler, categories }) {
                           className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
                           onChange={props.handleChange}
                           onBlur={props.handleBlur}
+                          disabled={walletDetails.data.length == 1}
                         >
                           {walletDetails?.loading ? (
                             <option className="text-slate-500 text-lg" value="">
                               Loading...
                             </option>
-                          ) : walletDetails.data.length ? (
+                          ) : walletDetails.data.length > 1 ? (
                             <>
                               <option className="text-slate-500 text-lg" value="">
                                 Select a currency
@@ -125,7 +138,19 @@ function AddJob({ popUpHandler, categories }) {
                                 </option>
                               ))}
                             </>
-                          ) : (
+                          ) : walletDetails.data.length == 1 ?
+                          <>
+                            {walletDetails.data?.map((item, index) => (
+                              <option
+                                key={index}
+                                className="text-slate-500 text-lg"
+                                value={item?.country}
+                              >
+                                {item?.description}
+                              </option>
+                            ))}
+                          </>
+                          :(
                             <option className="text-slate-500 text-lg" value="">
                               No Options Found! Try Again
                             </option>

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -9,7 +9,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
   return (
     <div className="logout-modal-body w-full">
-      <div className="content-wrapper w-full h-[32rem]">
+      <div className="content-wrapper w-full h-[32rem] flex flex-col justify-center">
         <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">
@@ -59,12 +59,12 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
                   {data?.internal_return >= 0 &&
                     data?.result !== "Charge failed" && (
-                      <div className="w-full md:w-[60%] mx-auto">
+                      <div className="w-full max-w-[300px] mx-auto">
-                        <div className="grid grid-cols-2 gap-8 my-2">
+                        <div className="flex gap-8 my-2">
-                          <h1 className="job-label">
+                          <h1 className="w-full job-label">
                             Amount({data?.currency || ""})
                           </h1>
-                          <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                             {`${data?.symbol || ""} ${
                               Number(data?.amount * 0.01).toFixed(2) || ""
                             }`}
@@ -72,22 +72,22 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                         </div>
                         
                         {data?.curr_balance &&
-                        <div className="grid grid-cols-2 gap-8 my-2">
+                        <div className="flex gap-8 my-2">
-                          <h1 className="job-label">
+                          <h1 className="w-full job-label">
                             Wallet Balance
                           </h1>
-                          <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                             {(data?.curr_balance * 0.01).toFixed(2)}
                           </span>
                         </div>
                         }
 
                         {isSuccess && (
-                          <div className="grid grid-cols-2 gap-8 my-2">
+                          <div className="flex gap-8 my-2">
-                            <h1 className="job-label">
+                            <h1 className="w-full job-label">
                               Confirmation Number
                             </h1>
-                            <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                            <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                               {data?.confirmation}
                             </span>
                           </div>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -34,7 +34,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     <ModalCom
       action={onClose}
       situation={situation}
-      className="assign-task-popup"
     >
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">

src/components/MyWallet/WalletAction.jsx

@@ -16,7 +16,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
 
   return (
     <div className="counters w-full flex justify-between gap-2">
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-start items-center">
         <button
           onClick={() => {
             setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
@@ -28,7 +28,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
           Spend
         </button>
       </div>
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-end items-center">
         <button
           className="logout-btn btn-gradient text-white"
           onClick={() => {
@@ -38,7 +38,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
             });
           }}
         >
-          <span className="">Add Credit</span>
+          Add Credit
         </button>
       </div>
 

src/components/MyWallet/WalletBox.jsx

@@ -22,7 +22,7 @@ export default function WalletBox({ wallet, payment, countries }) {
             </div>
           ) : (
             data.length > 0 && data.map((item) => (
-              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+              <div key={item.wallet_uid} className="max-w-[450px] w-full h-full mb-10 lg:mb-0">
                 <WalletItemCard walletItem={item} payment={payment} countries={countries} />
               </div>
             ))

src/components/MyWallet/WalletItemCard.jsx

@@ -44,7 +44,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
   return (
     <>
       <div
-        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
@@ -86,7 +86,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
           </span>
         </p>
 
-        <div className="my-2 w-full h-[1px] bg-white"></div>
+        <div className="w-full h-[1px] bg-white"></div>
 
         <WalletAction
           walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}

src/index.css

@@ -183,7 +183,7 @@
     @apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
   }
   .logout-btn {
-    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-base rounded-full cursor-pointer
+    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-xl font-bold rounded-full cursor-pointer
   }
 }
 
@@ -1103,6 +1103,6 @@ TODO: Responsive ===========================
   margin: 0;
 }
 
-.assign-task-popup {
+/* .assign-task-popup {
   top: 75px;
-}
+} */