virtual card display and banner and popout fixed

src/components/MyWallet/WalletAction.jsx

@@ -34,33 +34,39 @@ function WalletAction({ walletItem, payment, openPopUp }) {
     state: {},
   }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
 
+  // console.log('Extra Actions', Object.keys(walletItem.extra_actions))
+  let extraActions = Object.keys(walletItem.extra_actions) // VARIABLE TO HOLD EXTRA ACTIONS VALUES
+
   return (
     <div className="counters w-full flex justify-between gap-2">
+
+      {/* EXTRA ACTIONS BTN */}
       <div className="w-1/2 flex justify-start items-center">
-        <button
-          onClick={() => {
-            walletItem?.code == 'NAIRA' ? 
-            setShowNairaWithdraw((prev) => ({ ...prev, show: true })) 
-            : walletItem?.code == 'USD' ? 
-            openVirtualPopUp({walletItem})
-            :
-            ()=>{}
-          }}
-          className={`${
-            walletItem?.code != "NAIRA" && ""
-          } logout-btn btn-gradient text-white`}
-        >
-          {/* Spend */}
-          {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 */}
+      {(extraActions && extraActions?.length > 0) &&
+        extraActions.map((action, index) => (
+          <div key={index}>
+          <button
+            onClick={() => {
+              action == 'SPEND_FROM_BALANCE' ? 
+              setShowNairaWithdraw((prev) => ({ ...prev, show: true })) 
+              : action == 'ADD_VIRTUAL_CARD' ? 
+              openVirtualPopUp({walletItem})
+              :
+              null
+            }}
+            className={`${
+              walletItem?.code != "NAIRA" && ""
+            } logout-btn btn-gradient text-white`}
+          >
+            {/* Spend */}
+            {walletItem?.extra_actions?.[action][0]?.text}
+          </button>
+          {/* <WalletExtraActionBtn /> // TO BE USED lATER */}
+          </div>
+        ))
+      }
       </div>
+
       <div className="w-1/2 flex justify-end items-center">
         <button
           className="logout-btn btn-gradient text-white"