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/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 ${
-          accountType ? "justify-start" : "justify-between"
-        } px-8 py-9`}
+        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col gap-2 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>
-              <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>
+            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
           </div>
-          <div></div>
         </div>
-        <div className="balance">
-          <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-            Current Balance
-          </p>
-          <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-            {PriceFormatter(
-              walletItem.amount * 0.01,
-              walletItem.code,
-              undefined,
-              "text-[2rem]"
-            )}
-          </p>
-          <p className="text-lg text-white tracking-wide">
-            HOLDINGS :{" "}
-            <span className="mt-1">
+        <div className="flex justify-end items-center">
+          <div className="balance w-2/3">
+            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+              Current Balance
+            </p>
+            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
               {PriceFormatter(
-                walletItem.escrow * 0.01,
+                walletItem.amount * 0.01,
                 walletItem.code,
                 undefined,
                 "text-[2rem]"
               )}
-            </span>
-            {/*<span className="text-light-green">(11.5%)</span>*/}
-          </p>
+            </p>
+            <p className="text-lg text-white tracking-wide">
+              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"
-                } 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`}
+                  walletItem.code != "NAIRA" && "invisible"
+                } 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>