wallet icon added and wallet layout changed

src/components/MyWallet/WalletBox.jsx

@@ -10,7 +10,7 @@ export default function WalletBox({ wallet, coupon, payment }) {
     <>
       <div className="my-wallet-wrapper w-full mb-10">
         <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
+          <div className="balance-inquery w-full lg:flex lg:space-x-11 mb-11">
             {wallet.loading ? (
               <div className="w-full h-full flex items-center justify-center">
                 <LoadingSpinner size="16" color="sky-blue" />

src/components/MyWallet/WalletHeader.jsx

@@ -1,12 +1,11 @@
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Icons from "../Helpers/Icons";
-// import bank1 from "../../assets/images/bank-1.png";
+import bank1 from "../../assets/images/bank-1.png";
-// import bank2 from "../../assets/images/bank-2.png";
+import bank2 from "../../assets/images/bank-2.png";
-// import bank3 from "../../assets/images/bank-3.png";
+import bank3 from "../../assets/images/bank-3.png";
-// import bank4 from "../../assets/images/bank-4.png";
+import bank4 from "../../assets/images/bank-4.png";
 import Accordion from "../Helpers/Accordion";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
-import localImgLoad from "../../lib/localImgLoad";
 
 export default function WalletHeader(props) {
   //  debugger;
@@ -42,35 +41,30 @@ export default function WalletHeader(props) {
             <ul>
               {props.myWalletList &&
                 props.myWalletList?.result_list?.length > 0 &&
-                props.myWalletList.result_list.map((value, index) => 
+                props.myWalletList.result_list.map((value, index) => (
-                {
+                  <li
-                  let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
+                    key={index}
-                  return(
+                    className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
-                    <li
+                  >
-                      key={index}
+                    <div className="sm:flex justify-between items-center">
-                      className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                      <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
-                    >
+                        <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
-                      <div className="sm:flex justify-between items-center">
+                          <img src={bank1} alt="" />
-                        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
-                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
-                            <img src={localImgLoad(`images/currency/${image}`)} alt="" />
-                          </div>
-                          <div className="name">
-                            <p className="text-base text-dark-gray dark:text-white font-medium">
-                              {value.description}
-                            </p>
-                          </div>
                         </div>
-                        <div>
+                        <div className="name">
-                          <p className="eth text-xl font-bold text-purple">
+                          <p className="text-base text-dark-gray dark:text-white font-medium">
-                            {PriceFormatter(value.amount * 0.01, value.code)}
+                            {value.description}
                           </p>
                         </div>
                       </div>
-                    </li>
+                      <div>
-                  )
+                        <p className="eth text-xl font-bold text-purple">
-                }
+                          {PriceFormatter(value.amount * 0.01, value.code)}
-                )}
+                        </p>
+                      </div>
+                    </div>
+                  </li>
+                ))}
 
               {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
               {/*    <div className="sm:flex justify-between items-center">*/}

src/components/MyWallet/WalletItemCard.jsx

@@ -4,6 +4,7 @@ import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import CreditPopup from "./Popup/CreditPopup";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function WalletItemCard({ walletItem, payment }) {
   //   const [eth] = useState(90);
@@ -29,70 +30,67 @@ export default function WalletItemCard({ walletItem, payment }) {
 
   console.log("walletItem >>", walletItem, payment);
 
+  let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+
   return (
     <>
       <div
-        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col ${
+        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 py-9`}
-          accountType ? "justify-start" : "justify-between"
-        } px-8 py-9`}
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet flex justify-between">
+        <div className="wallet flex justify-start">
           <div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
-            <div>
+            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
-              <p className="text-26 font-bold text-white tracking-wide text-center">
-                .
-              </p>
-              <p className="text-lg text-white tracking-wide text-center">
-                {walletItem.code}
-              </p>
-            </div>
           </div>
-          <div></div>
         </div>
-        <div className="balance">
+        <div className="flex justify-end items-center">
-          <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+          <div className="balance w-2/3">
-            Current Balance
+            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-          </p>
+              Current Balance
-          <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+            </p>
-            {PriceFormatter(
+            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-              walletItem.amount * 0.01,
-              walletItem.code,
-              undefined,
-              "text-[2rem]"
-            )}
-          </p>
-          <p className="text-lg text-white tracking-wide">
-            HOLDINGS :{" "}
-            <span className="mt-1">
               {PriceFormatter(
-                walletItem.escrow * 0.01,
+                walletItem.amount * 0.01,
                 walletItem.code,
                 undefined,
                 "text-[2rem]"
               )}
-            </span>
+            </p>
-            {/*<span className="text-light-green">(11.5%)</span>*/}
+            <p className="text-lg text-white tracking-wide">
-          </p>
+              HOLDINGS :{" "}
+              <span className="mt-1">
+                {PriceFormatter(
+                  walletItem.escrow * 0.01,
+                  walletItem.code,
+                  undefined,
+                  "text-[2rem]"
+                )}
+              </span>
+            </p>
+          </div>
         </div>
+
+        {/* for white underline */}
+        <div className="my-2 w-full h-[1px] bg-white"></div> 
+
         {!accountType && (
-          <div className="counters flex space-x-16">
+          <div className="counters flex justify-between gap-2">
             <div>
               <Link
                 to="transfer-fund"
                 className={`${
-                  walletItem.action_type != "AC_AD_FD_ONLY" && "invisible"
+                  walletItem.code != "NAIRA" && "invisible"
-                } px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative  bg-purple lg:text-xl text-lg font-bold text-white`}
+                } px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative  bg-white lg:text-xl text-lg font-bold text-green-500`}
               >
-                Transfer
+                Spend
               </Link>
             </div>
             <div>
               <button
                 // state={{ currency: walletItem.description }}
-                className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-black group relative transition duration-300 stroke-black fill-white"
+                className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-sky-blue group relative transition duration-300 stroke-black fill-white"
                 onClick={() => {
                   openPopUp({
                     payment: payment,
@@ -100,7 +98,7 @@ export default function WalletItemCard({ walletItem, payment }) {
                   });
                 }}
               >
-                <span className="">
+                {/* <span className="">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="38"
@@ -114,7 +112,7 @@ export default function WalletItemCard({ walletItem, payment }) {
                       className="stroke-black fill-white"
                     ></path>
                   </svg>
-                </span>
+                </span> */}
                 <span className="">Add Credit</span>
                 <span className="absolute inset-0 w-full h-full transition-all duration-300 ease-out bg-gray-300 group-hover:bg-gray-400 opacity-0"></span>
               </button>