refactor(marketplace): Context for marketplace data

src/components/Elements/MainModal/Main.jsx

@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import './scss/index.scss';
 import Navbar from './backend/TabNavbar';
 import { TabProvider, useTab } from './backend/TabContext';
+import { MarketplaceDataProvider } from 'features/marketplace/api/MarketplaceDataContext';
 
 const Settings = lazy(() => import('../../../features/misc/views/Settings'));
 const Addons = lazy(() => import('../../../features/misc/views/Addons'));
@@ -79,7 +80,9 @@ const MainModalContent = ({ modalClose }) => {
 
 const MainModal = ({ modalClose }) => (
   <TabProvider>
-    <MainModalContent modalClose={modalClose} />
+    <MarketplaceDataProvider>
+      <MainModalContent modalClose={modalClose} />
+    </MarketplaceDataProvider>
   </TabProvider>
 );
 

src/components/Elements/MainModal/backend/Tab.jsx

@@ -21,7 +21,7 @@ import {
   MdOutlineAssessment as Stats,
   MdOutlineNewReleases as Changelog,
   MdInfoOutline as About,
-  MdOutlineExtension as Added,
+  MdSpaceDashboard as Added,
   MdAddCircleOutline as Create,
   MdViewAgenda as Overview,
   MdCollectionsBookmark as Collections,

src/components/Elements/MainModal/backend/TabNavbar.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 import {
   MdSettings,
   MdOutlineShoppingBasket,
-  MdOutlineExtension,
+  MdSpaceDashboard,
   MdOutlineKeyboardArrowRight,
   MdClose,
   MdSearch,
 } from 'react-icons/md';
+import { IoMdPricetag } from "react-icons/io";
 import { motion, AnimatePresence } from 'framer-motion';
 import { useTab } from './TabContext';
 import { Tooltip } from 'components/Elements';
@@ -18,8 +19,8 @@ const TabNavbar = ({ modalClose }) => {
 
   const tabs = [
     { id: 'settings', label: 'Settings', icon: <MdSettings /> },
-    { id: 'addons', label: 'Addons', icon: <MdOutlineExtension /> },
-    { id: 'marketplace', label: 'Marketplace', icon: <MdOutlineShoppingBasket /> },
+    { id: 'addons', label: 'Addons', icon: <MdSpaceDashboard /> },
+    { id: 'marketplace', label: 'Marketplace', icon: <IoMdPricetag /> },
   ];
 
   const navbarLogo = (