src/components/MyWallet/WalletAction.jsx

@@ -3,6 +3,7 @@ import usersService from "../../services/UsersService";
 import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
 import NairaWithdraw from "./Popup/NairaWithdraw";
 import VirtualAddCardPopout from "./walletvirtual/VirtualAddCardPopout";
+import WalletExtraActionBtn from "./WalletExtraActionBtn";
 
 function WalletAction({ walletItem, payment, openPopUp }) {
 
@@ -38,15 +39,27 @@ function WalletAction({ walletItem, payment, openPopUp }) {
       <div className="w-1/2 flex justify-start items-center">
         <button
           onClick={() => {
-            walletItem.code == 'NAIRA' ? setShowNairaWithdraw((prev) => ({ ...prev, show: true })) : openVirtualPopUp({walletItem})
+            walletItem?.code == 'NAIRA' ? 
+            setShowNairaWithdraw((prev) => ({ ...prev, show: true })) 
+            : walletItem?.code == 'USD' ? 
+            openVirtualPopUp({walletItem})
+            :
+            ()=>{}
           }}
           className={`${
-            walletItem.code != "NAIRA" && ""
+            walletItem?.code != "NAIRA" && ""
           } logout-btn btn-gradient text-white`}
         >
           {/* Spend */}
-          {walletItem.code == 'NAIRA' ? walletItem?.extra_actions?.SPEND_FROM_BALANCE[0]?.text : walletItem?.extra_actions?.ADD_VIRTUAL_CARD[0]?.text}
+          {walletItem?.code == 'NAIRA' ? 
+            walletItem?.extra_actions?.SPEND_FROM_BALANCE[0]?.text 
+            : walletItem?.code == 'USD' ? 
+            walletItem?.extra_actions?.ADD_VIRTUAL_CARD[0]?.text
+            :
+            'View'
+          }
         </button>
+        {/* <WalletExtraActionBtn /> // TO BE USED lATER */}
       </div>
       <div className="w-1/2 flex justify-end items-center">
         <button

src/components/MyWallet/WalletExtraActionBtn.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function WalletExtraActionBtn() {
+  return (
+    <>
+      {/* <button
+        onClick={() => {
+          walletItem?.code == 'NAIRA' ? setShowNairaWithdraw((prev) => ({ ...prev, show: true })) : openVirtualPopUp({walletItem})
+        }}
+        className={`${
+          walletItem?.code != "NAIRA" && ""
+        } logout-btn btn-gradient text-white`}
+      >
+        {walletItem?.code == 'NAIRA' ? walletItem?.extra_actions?.SPEND_FROM_BALANCE[0]?.text : walletItem?.extra_actions?.ADD_VIRTUAL_CARD[0]?.text}
+      </button> */}
+    </>
+  )
+}

src/components/MyWallet/WalletHeader.jsx

@@ -58,12 +58,27 @@ export default function WalletHeader(props) {
                   props.myWalletList.map((value, index) => 
                   {
                     let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
+
                     return(
                       <li
-                        key={index}
+                        key={value?.wallet_uid || index}
                         className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
                         onClick={onWalletClick}
                       >
+                        {value?.brand && value?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
+                        <div className="w-full">
+                          <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={value.icon} className="w-14 h-14" alt="currency icon" />
+                            </div>
+                            <div className="name">
+                              <p className="text-2xl font-bold text-dark-gray dark:text-white">
+                                {value.brand} <span> **** **** ***** </span> {value?.card_last4}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                        :
                         <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 ">
@@ -81,6 +96,7 @@ export default function WalletHeader(props) {
                             </p>
                           </div>
                         </div>
+                        }
                       </li>
                     )
                   }