wallet dropdown icons added

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:flex lg:space-x-11 mb-11">
+          <div className="balance-inquery w-full lg:h-[436px] 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,11 +1,12 @@
 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;
@@ -41,30 +42,35 @@ 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
+                {
-                    key={index}
+                  let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
-                    className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                  return(
-                  >
+                    <li
-                    <div className="sm:flex justify-between items-center">
+                      key={index}
-                      <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
+                      className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
-                        <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={bank1} alt="" />
+                      <div className="sm:flex justify-between items-center">
+                        <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 className="name">
+                        <div>
-                          <p className="text-base text-dark-gray dark:text-white font-medium">
+                          <p className="eth text-xl font-bold text-purple">
-                            {value.description}
+                            {PriceFormatter(value.amount * 0.01, value.code)}
                           </p>
                         </div>
                       </div>
-                      <div>
+                    </li>
-                        <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,7 +4,6 @@ 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);
@@ -30,67 +29,70 @@ 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 gap-2 px-8 py-9`}
+        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col ${
+          accountType ? "justify-start" : "justify-between"
+        } px-8 py-9`}
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet flex justify-start">
+        <div className="wallet flex justify-between">
           <div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
-            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            <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>
           </div>
+          <div></div>
         </div>
-        <div className="flex justify-end items-center">
+        <div className="balance">
-          <div className="balance w-2/3">
+          <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+            Current Balance
-              Current Balance
+          </p>
-            </p>
+          <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-            <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">
               {PriceFormatter(
-                walletItem.amount * 0.01,
+                walletItem.escrow * 0.01,
                 walletItem.code,
                 undefined,
                 "text-[2rem]"
               )}
-            </p>
+            </span>
-            <p className="text-lg text-white tracking-wide">
+            {/*<span className="text-light-green">(11.5%)</span>*/}
-              HOLDINGS :{" "}
+          </p>
-              <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 justify-between gap-2">
+          <div className="counters flex space-x-16">
             <div>
               <Link
                 to="transfer-fund"
                 className={`${
-                  walletItem.code != "NAIRA" && "invisible"
+                  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-white lg:text-xl text-lg font-bold text-green-500`}
+                } 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`}
               >
-                Spend
+                Transfer
               </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-sky-blue 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-black group relative transition duration-300 stroke-black fill-white"
                 onClick={() => {
                   openPopUp({
                     payment: payment,
@@ -98,7 +100,7 @@ export default function WalletItemCard({ walletItem, payment }) {
                   });
                 }}
               >
-                {/* <span className="">
+                <span className="">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="38"
@@ -112,7 +114,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>