Initial Q-Shop Commit in its own repo

10 months ago · 98c5e7d37d
188 changed files with 25531 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 *.zip
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,10 @@
 {
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "tabWidth": 2,
  "semi": true
 }
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Q-Shop</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,54 @@
 {
  "name": "q-blog",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.13",
    "@reduxjs/toolkit": "^1.9.3",
    "@types/react-grid-layout": "^1.3.2",
    "axios": "^1.3.4",
    "compressorjs": "^1.2.1",
    "localforage": "^1.10.0",
    "moment": "^2.29.4",
    "philliplm-react-modern-audio-player": "^1.4.6",
    "react": "^18.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-grid-layout": "^1.3.4",
    "react-intersection-observer": "^9.4.3",
    "react-joyride": "^2.5.4",
    "react-masonry-css": "^1.0.16",
    "react-redux": "^8.0.5",
    "react-resize-detector": "^8.0.4",
    "react-router-dom": "^6.9.0",
    "react-toastify": "^9.1.2",
    "react-virtuoso": "^4.3.3",
    "short-unique-id": "^4.4.4",
    "slate": "^0.91.4",
    "slate-history": "^0.86.0",
    "slate-react": "^0.91.11"
  },
  "devDependencies": {
    "@mui/types": "^7.2.3",
    "@types/react": "^18.0.28",
    "@types/react-copy-to-clipboard": "^5.0.4",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react-swc": "^3.2.0",
    "prettier": "^2.8.6",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "worker-loader": "^3.0.8"
  }
 }
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,48 @@
 // @ts-nocheck
 import { useEffect, useState } from "react";
 import { Routes, Route } from "react-router-dom";
 import { ProductPage } from "./pages/Product/ProductPage";
 import { StoreList } from "./pages/StoreList/StoreList";
 import { ThemeProvider } from "@mui/material/styles";
 import { CssBaseline } from "@mui/material";
 import { lightTheme, darkTheme } from "./styles/theme";
 import { store } from "./state/store";
 import { Provider } from "react-redux";
 import { Store } from "./pages/Store/Store/Store";
 import { MyOrders } from "./pages/MyOrders/MyOrders";
 import { ErrorElement } from "./components/common/Error/ErrorElement";
 import GlobalWrapper from "./wrappers/GlobalWrapper";
 import Notification from "./components/common/Notification/Notification";
 import { ProductManager } from "./pages/ProductManager/ProductManager";
 function App() {
  // const themeColor = window._qdnTheme
  const [theme, setTheme] = useState("dark");
  return (
    <Provider store={store}>
      <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
        <Notification />
        <GlobalWrapper setTheme={(val: string) => setTheme(val)}>
          <CssBaseline />
          <Routes>
            <Route
              path="/:user/:store/:product/:catalogue"
              element={<ProductPage />}
            />
            <Route
              path="/product-manager/:store"
              element={<ProductManager />}
            />
            <Route path="/my-orders" element={<MyOrders />} />
            <Route path="/:user/:store" element={<Store />} />
            <Route path="/" element={<StoreList />} />
          </Routes>
        </GlobalWrapper>
      </ThemeProvider>
    </Provider>
  );
 }
 export default App;
--- a/src/assets/img/ArrrLogoBlack.png
+++ b/src/assets/img/ArrrLogoBlack.png
--- a/src/assets/img/ArrrLogoWhite.png
+++ b/src/assets/img/ArrrLogoWhite.png
--- a/src/assets/img/Q-AppsLogo.webp
+++ b/src/assets/img/Q-AppsLogo.webp
--- a/src/assets/img/QShopLogo.webp
+++ b/src/assets/img/QShopLogo.webp
--- a/src/assets/img/QShopLogoLight.webp
+++ b/src/assets/img/QShopLogoLight.webp
--- a/src/assets/img/arrr.png
+++ b/src/assets/img/arrr.png
--- a/src/assets/img/btc.png
+++ b/src/assets/img/btc.png
--- a/src/assets/img/dgb.png
+++ b/src/assets/img/dgb.png
--- a/src/assets/img/doge.png
+++ b/src/assets/img/doge.png
--- a/src/assets/img/ltc.png
+++ b/src/assets/img/ltc.png
--- a/src/assets/img/qort.png
+++ b/src/assets/img/qort.png
--- a/src/assets/img/rvn.png
+++ b/src/assets/img/rvn.png
--- a/src/assets/svgs/ARRRSVG.tsx
+++ b/src/assets/svgs/ARRRSVG.tsx
@ -0,0 +1,34 @@
 import { IconTypes } from "./IconTypes";
 export const ARRRSVG: React.FC<IconTypes> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      version="1.1"
      id="Layer_1"
      x="0px"
      y="0px"
      viewBox="0 0 2000 2000"
      style={{ width, height }}
      xmlSpace="preserve"
    >
      <linearGradient
        id="SVGID_1_"
        gradientUnits="userSpaceOnUse"
        x1="0"
        y1="-2"
        x2="2000"
        y2="-2"
        gradientTransform="matrix(1 0 0 1 0 1002)"
      >
        <stop offset="0"></stop>
        <stop offset="1"></stop>
      </linearGradient>
      <path
        fill={color}
        d="M1000,0C447.6,0,0,447.6,0,1000s447.6,1000,1000,1000s1000-447.6,1000-1000S1552.4,0,1000,0z M548.6,741.5  c0-123.6,100.2-223.1,224.6-223.1h512.4c58.6,0,114.9,23,156.7,64.1l-262.2,131.9h-361c-40.7,0-73.1,29.4-73.1,64.8v160.5  l-196.7,102.5V741.5L548.6,741.5z M1507.9,1075.4c0,123.6-100.2,223.1-223.1,223.1H745.3v190.7c0,32.4-24.1,58.8-52.8,65.6  l-67.1,1.5h-76.9v-331.6l257-134.1h431.8c40.7,0,74.6-29.4,74.6-65.6V828.9l195.9-98.7L1507.9,1075.4L1507.9,1075.4z"
      ></path>
    </svg>
  );
 };
--- a/src/assets/svgs/AccountCircleSVG.tsx
+++ b/src/assets/svgs/AccountCircleSVG.tsx
@ -0,0 +1,25 @@
 interface AccountCircleSVGProps {
  color: string
  height: string
  width: string
 }
 export const AccountCircleSVG: React.FC<AccountCircleSVGProps> = ({
  color,
  height,
  width
 }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M222 801q63-44 125-67.5T480 710q71 0 133.5 23.5T739 801q44-54 62.5-109T820 576q0-145-97.5-242.5T480 236q-145 0-242.5 97.5T140 576q0 61 19 116t63 109Zm257.814-195Q422 606 382.5 566.314q-39.5-39.686-39.5-97.5t39.686-97.314q39.686-39.5 97.5-39.5t97.314 39.686q39.5 39.686 39.5 97.5T577.314 566.5q-39.686 39.5-97.5 39.5Zm.654 370Q398 976 325 944.5q-73-31.5-127.5-86t-86-127.266Q80 658.468 80 575.734T111.5 420.5q31.5-72.5 86-127t127.266-86q72.766-31.5 155.5-31.5T635.5 207.5q72.5 31.5 127 86t86 127.032q31.5 72.532 31.5 155T848.5 731q-31.5 73-86 127.5t-127.032 86q-72.532 31.5-155 31.5ZM480 916q55 0 107.5-16T691 844q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480 916Zm0-370q34 0 55.5-21.5T557 469q0-34-21.5-55.5T480 392q-34 0-55.5 21.5T403 469q0 34 21.5 55.5T480 546Zm0-77Zm0 374Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/AddSVG.tsx
+++ b/src/assets/svgs/AddSVG.tsx
@ -0,0 +1,15 @@
 import { IconTypes } from "./IconTypes";
 export const AddSVG: React.FC<IconTypes> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
      fill={color}
    >
      <path d="M450-280h60v-170h170v-60H510v-170h-60v170H280v60h170v170ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/AlignCenterSVG.tsx
+++ b/src/assets/svgs/AlignCenterSVG.tsx
@ -0,0 +1,21 @@
 import { SVGProps } from './interfaces'
 export const AlignCenterSVG: React.FC<SVGProps> = ({
  color,
  height,
  width
 }) => {
  return (
    <svg
      height={height}
      width={width}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 96 960 960"
    >
      <path
        fill={color}
        d="M150 936q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 876h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 936H150Zm164-165q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T314 711h333q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T647 771H314ZM150 606q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 546h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 606H150Zm164-165q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T314 381h333q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T647 441H314ZM150 276q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 216h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 276H150Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/AlignLeftSVG.tsx
+++ b/src/assets/svgs/AlignLeftSVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const AlignLeftSVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M150 771q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 711h412q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T562 771H150Zm0-330q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 381h412q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T562 441H150Zm0 165q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 546h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 606H150Zm0 330q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 876h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 936H150Zm0-660q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 216h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 276H150Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/AlignRightSVG.tsx
+++ b/src/assets/svgs/AlignRightSVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const AlignRightSVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M150 936q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 876h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 936H150Zm249-165q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T399 711h411q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 771H399ZM150 606q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 546h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 606H150Zm249-165q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T399 381h411q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 441H399ZM150 276q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 216h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 276H150Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/BackArrowSVG.tsx
+++ b/src/assets/svgs/BackArrowSVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const BackArrowSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      className={className}
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path d="M480 896 160 576l320-320 42 42-248 248h526v60H274l248 248-42 42Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/BoldSVG.tsx
+++ b/src/assets/svgs/BoldSVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const BoldSVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M335 856q-25 0-42.5-17.5T275 796V356q0-25 17.5-42.5T335 296h168q66 0 114.5 42T666 444q0 38-21 70t-56 49v6q43 14 69.5 50t26.5 81q0 68-52.5 112T510 856H335Zm26-76h144q38 0 66-25t28-63q0-37-28-62t-66-25H361v175Zm0-247h136q35 0 60.5-23t25.5-58q0-35-25.5-58.5T497 370H361v163Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/BriefcaseSVG.tsx
+++ b/src/assets/svgs/BriefcaseSVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const BriefcaseSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      fill={color}
      height={height}
      width={width}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M140-180v-21.75V-180v-480 480Zm0 60q-24 0-42-18t-18-42v-480q0-24 18-42t42-18h180v-100q0-23 18-41.5t42-18.5h200q24 0 42 18.5t18 41.5v100h180q24 0 42 18t18 42v225q-14-11-28.5-20T820-472v-188H140v480h334q4 16 10 31t14 29H140Zm240-600h200v-100H380v100ZM720-47q-79 0-136-57t-57-136q0-79 57-136t136-57q79 0 136 57t57 136q0 79-57 136T720-47Zm0-79 113-113-21-21-77 77v-171h-30v171l-77-77-21 21 113 113Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/CalendarSVG.tsx
+++ b/src/assets/svgs/CalendarSVG.tsx
@ -0,0 +1,23 @@
 interface AccountCircleSVGProps {
  color: string;
  height: string;
  width: string;
 }
 export const CalendarSVG: React.FC<AccountCircleSVGProps> = ({
  color,
  height,
  width
 }) => {
  return (
    <svg
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="M180-80q-24 0-42-18t-18-42v-620q0-24 18-42t42-18h65v-60h65v60h340v-60h65v60h65q24 0 42 18t18 42v620q0 24-18 42t-42 18H180Zm0-60h600v-430H180v430Zm0-490h600v-130H180v130Zm0 0v-130 130Zm300 230q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/CancelSVG.tsx
+++ b/src/assets/svgs/CancelSVG.tsx
@ -0,0 +1,27 @@
 import { IconTypes } from "./IconTypes";
 interface CancelSVGProps extends IconTypes {
  onMouseDownFunc?: (e: any) => void;
 }
 export const CancelSVG: React.FC<CancelSVGProps> = ({
  color,
  height,
  width,
  className,
  onMouseDownFunc
 }) => {
  return (
    <svg
      onMouseDown={onMouseDownFunc}
      height={height}
      width={width}
      fill={color}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="m330-288 150-150 150 150 42-42-150-150 150-150-42-42-150 150-150-150-42 42 150 150-150 150 42 42ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/CartSVG.tsx
+++ b/src/assets/svgs/CartSVG.tsx
@ -0,0 +1,23 @@
 import { IconTypes } from "./IconTypes";
 export const CartSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      className={className}
      fill={color}
      height={height}
      width={width}
      onClick={onClickFunc}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M286.788-81Q257-81 236-102.212q-21-21.213-21-51Q215-183 236.212-204q21.213-21 51-21Q317-225 338-203.788q21 21.213 21 51Q359-123 337.788-102q-21.213 21-51 21Zm400 0Q657-81 636-102.212q-21-21.213-21-51Q615-183 636.212-204q21.213-21 51-21Q717-225 738-203.788q21 21.213 21 51Q759-123 737.788-102q-21.213 21-51 21ZM235-741l110 228h288l125-228H235Zm-30-60h589.074q22.964 0 34.945 21Q841-759 829-738L694-495q-11 19-28.559 30.5Q647.881-453 627-453H324l-56 104h491v60H277q-42 0-60.5-28t.5-63l64-118-152-322H51v-60h117l37 79Zm140 288h288-288Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/CategorySVG.tsx
+++ b/src/assets/svgs/CategorySVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const CategorySVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      fill={color}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="m261-526 220-354 220 354H261ZM706-80q-74 0-124-50t-50-124q0-74 50-124t124-50q74 0 124 50t50 124q0 74-50 124T706-80Zm-586-25v-304h304v304H120Zm586.085-35Q754-140 787-173.085q33-33.084 33-81Q820-302 786.916-335q-33.085-33-81.001-33Q658-368 625-334.915q-33 33.084-33 81Q592-206 625.084-173q33.085 33 81.001 33ZM180-165h184v-184H180v184Zm189-421h224L481-767 369-586Zm112 0ZM364-349Zm342 95Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/CodeBlockSVG.tsx
+++ b/src/assets/svgs/CodeBlockSVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const CodeBlockSVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="m330 576 70-70q9-9 9-22t-9-22q-9-9-21.833-9-12.834 0-22.167 9l-93 93q-5 5-7 10.133-2 5.134-2 11Q254 582 256 587q2 5 7 10l94 94q9.333 9 22.167 9Q392 700 401 691q9-9 9-22t-9-22l-71-71Zm300 0-71 71q-9 9-9 22t9 22q9 9 21.833 9 12.834 0 22.167-9l94-94q5-5 7-10.133 2-5.134 2-11Q706 570 704 565q-2-5-7-10l-94-94q-4-5-10-7t-12-2q-6 0-11.5 2t-10.167 6.8Q550 470.4 550 483.2q0 12.8 9 21.8l71 71ZM180 936q-24 0-42-18t-18-42V276q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600V276H180v600Zm0-600v600-600Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/CompareArrowsSVG.tsx
+++ b/src/assets/svgs/CompareArrowsSVG.tsx
@ -0,0 +1,19 @@
 import { IconTypes } from "./IconTypes";
 export const CompareArrowsSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
 }) => {
  return (
    <svg
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="m320-160-56-57 103-103H80v-80h287L264-503l56-57 200 200-200 200Zm320-240L440-600l200-200 56 57-103 103h287v80H593l103 103-56 57Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/CurrencySVG.tsx
+++ b/src/assets/svgs/CurrencySVG.tsx
@ -0,0 +1,15 @@
 import { IconTypes } from "./IconTypes";
 export const CurrencySVG: React.FC<IconTypes> = ({ color, height, width }) => {
  return (
    <svg
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="M480-40q-112 0-206-51T120-227v107H40v-240h240v80h-99q48 72 126.5 116T480-120q75 0 140.5-28.5t114-77q48.5-48.5 77-114T840-480h80q0 91-34.5 171T791-169q-60 60-140 94.5T480-40Zm-36-160v-52q-47-11-76.5-40.5T324-370l66-26q12 41 37.5 61.5T486-314q33 0 56.5-15.5T566-378q0-29-24.5-47T454-466q-59-21-86.5-50T340-592q0-41 28.5-74.5T446-710v-50h70v50q36 3 65.5 29t40.5 61l-64 26q-8-23-26-38.5T482-648q-35 0-53.5 15T410-592q0 26 23 41t83 35q72 26 96 61t24 77q0 29-10 51t-26.5 37.5Q583-274 561-264.5T514-250v50h-70ZM40-480q0-91 34.5-171T169-791q60-60 140-94.5T480-920q112 0 206 51t154 136v-107h80v240H680v-80h99q-48-72-126.5-116T480-840q-75 0-140.5 28.5t-114 77q-48.5 48.5-77 114T120-480H40Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/DarkModeSVG.tsx
+++ b/src/assets/svgs/DarkModeSVG.tsx
@ -0,0 +1,23 @@
 import { IconTypes } from './IconTypes'
 export const DarkModeSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      className={className}
      onClick={onClickFunc}
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path d="M480 936q-150 0-255-105T120 576q0-150 105-255t255-105q8 0 17 .5t23 1.5q-36 32-56 79t-20 99q0 90 63 153t153 63q52 0 99-18.5t79-51.5q1 12 1.5 19.5t.5 14.5q0 150-105 255T480 936Zm0-60q109 0 190-67.5T771 650q-25 11-53.667 16.5Q688.667 672 660 672q-114.689 0-195.345-80.655Q384 510.689 384 396q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180 576q0 125 87.5 212.5T480 876Zm-4-297Z" />
    </svg>
  )
 }
--- a/src/assets/svgs/DescriptionSVG.tsx
+++ b/src/assets/svgs/DescriptionSVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const DescriptionSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      fill={color}
      height={height}
      width={width}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M319-250h322v-60H319v60Zm0-170h322v-60H319v60ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554v-186H220v680h520v-494H551ZM220-820v186-186 680-680Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/DialogsSVG.tsx
+++ b/src/assets/svgs/DialogsSVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const DialogsSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      className={className}
      height={height}
      width={width}
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M299.003-299.003h361.994v-361.994H299.003v361.994ZM197.694-140.001q-23.529 0-40.611-17.082-17.082-17.082-17.082-40.611v-564.612q0-23.529 17.082-40.611 17.082-17.082 40.611-17.082h564.612q23.529 0 40.611 17.082 17.082 17.082 17.082 40.611v564.612q0 23.529-17.082 40.611-17.082 17.082-40.611 17.082H197.694Zm0-45.384h564.612q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463v-564.612q0-4.616-3.846-8.463-3.847-3.846-8.463-3.846H197.694q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v564.612q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846Zm-12.309-589.23V-185.385-774.615Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/DoubleArrowDownSVG.tsx
+++ b/src/assets/svgs/DoubleArrowDownSVG.tsx
@ -0,0 +1,24 @@
 import { IconTypes } from "./IconTypes";
 export const DoubleArrowDownSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  id,
  onClickFunc
 }) => {
  return (
    <div className={className} id={id} onClick={onClickFunc}>
      <svg
        fill={color}
        height={height}
        width={width}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 -960 960 960"
      >
        <path d="M480-200 240-440l42-42 198 198 198-198 42 42-240 240Zm0-253L240-693l42-42 198 198 198-198 42 42-240 240Z" />
      </svg>
    </div>
  );
 };
--- a/src/assets/svgs/DownloadSVG.tsx
+++ b/src/assets/svgs/DownloadSVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const DownloadSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
 }) => {
  return (
    <svg
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
      fill={color}
    >
      <path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/ExpandMoreSVG.tsx
+++ b/src/assets/svgs/ExpandMoreSVG.tsx
@ -0,0 +1,22 @@
 import { IconTypes } from "./IconTypes";
 export const ExpandMoreSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      onClick={onClickFunc}
      height={height}
      width={width}
      fill={color}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/GarbageSVG.tsx
+++ b/src/assets/svgs/GarbageSVG.tsx
@ -0,0 +1,22 @@
 import { IconTypes } from "./IconTypes";
 export const GarbageSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      onClick={onClickFunc}
      height={height}
      width={width}
      fill={color}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M261-120q-24.75 0-42.375-17.625T201-180v-570h-41v-60h188v-30h264v30h188v60h-41v570q0 24-18 42t-42 18H261Zm438-630H261v570h438v-570ZM367-266h60v-399h-60v399Zm166 0h60v-399h-60v399ZM261-750v570-570Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/H2SVG.tsx
+++ b/src/assets/svgs/H2SVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const H2SVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M149.825 776Q137 776 128.5 767.375T120 746V406q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T180 406v140h180V406q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T420 406v340q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625-12.825 0-21.325-8.625T360 746V606H180v140q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625ZM570 776q-12.75 0-21.375-8.625T540 746V606q0-24.75 17.625-42.375T600 546h180V436H570q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T570 376h210q24.75 0 42.375 17.625T840 436v110q0 24.75-17.625 42.375T780 606H600v110h210q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 776H570Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/H3SVG.tsx
+++ b/src/assets/svgs/H3SVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const H3SVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M149.825 776Q137 776 128.5 767.375T120 746V406q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T180 406v140h180V406q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T420 406v340q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625-12.825 0-21.325-8.625T360 746V606H180v140q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625ZM570 776q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T570 716h210V606H650q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T650 546h130V436H570q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T570 376h210q24.75 0 42.375 17.625T840 436v280q0 24.75-17.625 42.375T780 776H570Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/IconTypes.ts
+++ b/src/assets/svgs/IconTypes.ts
@ -0,0 +1,8 @@
 export interface IconTypes {
  color: string;
  height: string;
  width: string;
  className?: string;
  onClickFunc?: ((e: React.MouseEvent<any>) => void) | ((params?: any) => void);
  id?: string;
 }
--- a/src/assets/svgs/ItalicSVG.tsx
+++ b/src/assets/svgs/ItalicSVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const ItalicSVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M264 857q-16.8 0-28.4-11.641-11.6-11.641-11.6-28.5t11.6-28.359Q247.2 777 264 777h94l139-409H378q-16.8 0-28.4-11.641-11.6-11.641-11.6-28.5t11.6-28.359Q361.2 288 378 288h300q16.8 0 28.4 11.641 11.6 11.641 11.6 28.5T706.4 356.5Q694.8 368 678 368h-94L445 777h119q16.8 0 28.4 11.641 11.6 11.641 11.6 28.5T592.4 845.5Q580.8 857 564 857H264Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/LightModeSVG.tsx
+++ b/src/assets/svgs/LightModeSVG.tsx
@ -0,0 +1,23 @@
 import { IconTypes } from './IconTypes'
 export const LightModeSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      className={className}
      onClick={onClickFunc}
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path d="M479.765 716Q538 716 579 675.235q41-40.764 41-99Q620 518 579.235 477q-40.764-41-99-41Q422 436 381 476.765q-41 40.764-41 99Q340 634 380.765 675q40.764 41 99 41Zm.235 60q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM70 606q-12.75 0-21.375-8.675Q40 588.649 40 575.825 40 563 48.625 554.5T70 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T170 606H70Zm720 0q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T790 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T890 606H790ZM479.825 296Q467 296 458.5 287.375T450 266V166q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 166v100q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625Zm0 720q-12.825 0-21.325-8.62-8.5-8.63-8.5-21.38V886q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 886v100q0 12.75-8.675 21.38-8.676 8.62-21.5 8.62ZM240 378l-57-56q-9-9-8.629-21.603.37-12.604 8.526-21.5 8.896-8.897 21.5-8.897Q217 270 226 279l56 57q8 9 8 21t-8 20.5q-8 8.5-20.5 8.5t-21.5-8Zm494 495-56-57q-8-9-8-21.375T678.5 774q8.5-9 20.5-9t21 9l57 56q9 9 8.629 21.603-.37 12.604-8.526 21.5-8.896 8.897-21.5 8.897Q743 882 734 873Zm-56-495q-9-9-9-21t9-21l56-57q9-9 21.603-8.629 12.604.37 21.5 8.526 8.897 8.896 8.897 21.5Q786 313 777 322l-57 56q-8 8-20.364 8-12.363 0-21.636-8ZM182.897 873.103q-8.897-8.896-8.897-21.5Q174 839 183 830l57-56q8.8-9 20.9-9 12.1 0 20.709 9Q291 783 291 795t-9 21l-56 57q-9 9-21.603 8.629-12.604-.37-21.5-8.526ZM480 576Z" />
    </svg>
  )
 }
--- a/src/assets/svgs/LinkSVG.tsx
+++ b/src/assets/svgs/LinkSVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const LinkSVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M280 776q-85 0-142.5-57.5T80 576q0-85 57.5-142.5T280 376h140q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T420 436H280q-60 0-100 40t-40 100q0 60 40 100t100 40h140q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T420 776H280Zm75-170q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T355 546h250q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T605 606H355Zm185 170q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T540 716h140q60 0 100-40t40-100q0-60-40-100t-100-40H540q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T540 376h140q85 0 142.5 57.5T880 576q0 85-57.5 142.5T680 776H540Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/LocationSVG.tsx
+++ b/src/assets/svgs/LocationSVG.tsx
@ -0,0 +1,15 @@
 import { IconTypes } from "./IconTypes";
 export const LocationSVG: React.FC<IconTypes> = ({ color, height, width }) => {
  return (
    <svg
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="M480.089-490Q509-490 529.5-510.589q20.5-20.588 20.5-49.5Q550-589 529.411-609.5q-20.588-20.5-49.5-20.5Q451-630 430.5-609.411q-20.5 20.588-20.5 49.5Q410-531 430.589-510.5q20.588 20.5 49.5 20.5ZM480-159q133-121 196.5-219.5T740-552q0-117.79-75.292-192.895Q589.417-820 480-820t-184.708 75.105Q220-669.79 220-552q0 75 65 173.5T480-159Zm0 79Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/LoyaltySVG.tsx
+++ b/src/assets/svgs/LoyaltySVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const LoyaltySVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      fill={color}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="m524-262 140-140q11-11 16-24.5t5-28.5q0-32-22.5-54.5T608-532q-20 0-40 13t-44 42q-24-29-44-42t-40-13q-32 0-54.5 22.5T363-455q0 15 5 28.5t16 24.5l140 140Zm35 165q-18 18-43.5 18T472-97L97-472q-10-10-13.5-21T80-516v-304q0-26 17-43t43-17h304q12 0 24 3.5t22 13.5l373 373q19 19 19 44.5T863-401L559-97Zm-41-41 304-304-378-378H140v304l378 378ZM245-664q21 0 36.5-15.5T297-716q0-21-15.5-36.5T245-768q-21 0-36.5 15.5T193-716q0 21 15.5 36.5T245-664ZM140-820Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/MinimizeSVG.tsx
+++ b/src/assets/svgs/MinimizeSVG.tsx
@ -0,0 +1,23 @@
 import { IconTypes } from "./IconTypes";
 export const MinimizeSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      fill={color}
      className={className}
      onClick={onClickFunc}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="M240-130v-60h481v60H240Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/MinusCircle.tsx
+++ b/src/assets/svgs/MinusCircle.tsx
@ -0,0 +1,23 @@
 import { IconTypes } from "./IconTypes";
 export const MinusCircleSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      onClick={onClickFunc}
      height={height}
      width={width}
      fill={color}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M280-453h400v-60H280v60ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/NewWindowSVG.tsx
+++ b/src/assets/svgs/NewWindowSVG.tsx
@ -0,0 +1,25 @@
 interface NewWindowSVGProps {
  color: string
  height: string
  width: string
 }
 export const NewWindowSVG: React.FC<NewWindowSVGProps> = ({
  color,
  height,
  width
 }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      width={width}
      viewBox="0 96 960 960"
    >
      <path
        d="M180 936q-24 0-42-18t-18-42V276q0-24 18-42t42-18h300v60H180v600h600V576h60v300q0 24-18 42t-42 18H180Zm480-420V396H540v-60h120V216h60v120h120v60H720v120h-60Z"
        fill={color}
      />
    </svg>
  )
 }
--- a/src/assets/svgs/OrdersSVG.tsx
+++ b/src/assets/svgs/OrdersSVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const OrdersSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      fill={color}
      height={height}
      width={width}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M180-80q-24 0-42-18t-18-42v-530q0-24 18-42t42-18h110q0-79 53-134.5T475-920q79 0 137 55.575T670-730h110q24 0 42 18t18 42v530q0 24-18 42t-42 18H180Zm0-60h600v-530H180v530Zm300-290q79 0 137-58t58-137h-60q0 55-40 95t-95 40q-55 0-95-40t-40-95h-60q0 79 58 137t137 58ZM350-730h260q0-55-37.5-92.5T480-860q-55 0-92.5 37.5T350-730ZM180-140v-530 530Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/OwnerSVG.tsx
+++ b/src/assets/svgs/OwnerSVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const OwnerSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      className={className}
      fill={color}
      width={width}
      viewBox="0 -960 960 960"
    >
      <path d="M684-381q-39.48 0-66.74-27.26Q590-435.52 590-475q0-39.48 27.26-66.74Q644.52-569 684-569q39.48 0 66.74 27.26Q778-514.48 778-475q0 39.48-27.26 66.74Q723.48-381 684-381ZM488-160v-51q0-26 11-44.5t31-28.5q37-19 75-28t79-9q41 0 79 8.5t75 28.5q20 9 31 28t11 45v51H488Zm-88-321q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42Zm0-150ZM80-160v-94q0-34 17-62.5t50.667-43.5Q215-390 276.5-405t123.245-15Q432-420 457-417t54 9l-25.5 25.5L460-357q-13-2-28-2.5t-32-.5q-56.627 0-110.814 11.5Q235-337 172-306q-14 7-23 22t-9 30v34h288v60H80Zm348-60Zm-28-321q39 0 64.5-25.5T490-631q0-39-25.5-64.5T400-721q-39 0-64.5 25.5T310-631q0 39 25.5 64.5T400-541Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/PlusCircle.tsx
+++ b/src/assets/svgs/PlusCircle.tsx
@ -0,0 +1,23 @@
 import { IconTypes } from "./IconTypes";
 export const PlusCircleSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      onClick={onClickFunc}
      height={height}
      width={width}
      fill={color}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M453-280h60v-166h167v-60H513v-174h-60v174H280v60h173v166Zm27.266 200q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/QortalSVG.tsx
+++ b/src/assets/svgs/QortalSVG.tsx
@ -0,0 +1,46 @@
 import { IconTypes } from "./IconTypes";
 export const QortalSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      className={className}
      fill={color}
      version="1.0"
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 695.000000 754.000000"
      preserveAspectRatio="xMidYMid meet"
    >
      <g
        transform="translate(0.000000,754.000000) scale(0.100000,-0.100000)"
        stroke="none"
      >
        <path
          d="M3035 7289 c-374 -216 -536 -309 -1090 -629 -409 -236 -1129 -652
 -1280 -739 -82 -48 -228 -132 -322 -186 l-173 -100 0 -1882 0 -1883 38 -24
 c20 -13 228 -134 462 -269 389 -223 1779 -1026 2335 -1347 127 -73 268 -155
 314 -182 56 -32 95 -48 118 -48 33 0 207 97 991 552 l102 60 0 779 c0 428 -2
 779 -4 779 -3 0 -247 -140 -543 -311 -296 -170 -544 -308 -553 -306 -8 2 -188
 104 -400 226 -212 123 -636 368 -942 544 l-558 322 0 1105 c0 1042 1 1106 18
 1116 9 6 107 63 217 126 110 64 421 243 690 398 270 156 601 347 736 425 l247
 142 363 -210 c200 -115 551 -317 779 -449 228 -132 495 -286 594 -341 l178
 -102 -6 -1889 -6 -1888 23 14 c12 8 318 185 680 393 l657 379 0 1887 0 1886
 -77 46 c-43 25 -458 264 -923 532 -465 268 -1047 605 -1295 748 -646 373 -965
 557 -968 557 -1 0 -182 -104 -402 -231z"
        />
        <path
          d="M3010 4769 c-228 -133 -471 -274 -540 -313 l-125 -72 0 -633 0 -632
 295 -171 c162 -94 407 -235 544 -315 137 -79 255 -142 261 -139 6 2 200 113
 431 247 230 133 471 272 534 308 l115 66 2 635 3 635 -536 309 c-294 169 -543
 310 -552 312 -9 2 -204 -105 -432 -237z"
        />
      </g>
    </svg>
  );
 };
--- a/src/assets/svgs/ShippingSVG.tsx
+++ b/src/assets/svgs/ShippingSVG.tsx
@ -0,0 +1,15 @@
 import { IconTypes } from "./IconTypes";
 export const ShippingSVG: React.FC<IconTypes> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill={color}
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="M224.118-161Q175-161 140.5-195.417 106-229.833 106-279H40v-461q0-24 18-42t42-18h579v167h105l136 181v173h-71q0 49.167-34.382 83.583Q780.235-161 731.118-161 682-161 647.5-195.417 613-229.833 613-279H342q0 49-34.382 83.5-34.383 34.5-83.5 34.5ZM224-221q24 0 41-17t17-41q0-24-17-41t-41-17q-24 0-41 17t-17 41q0 24 17 41t41 17ZM100-339h22q17-27 43.041-43 26.041-16 58-16t58.459 16.5Q308-365 325-339h294v-401H100v401Zm631 118q24 0 41-17t17-41q0-24-17-41t-41-17q-24 0-41 17t-17 41q0 24 17 41t41 17Zm-52-204h186L754-573h-75v148ZM360-529Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/StarSVG.tsx
+++ b/src/assets/svgs/StarSVG.tsx
@ -0,0 +1,21 @@
 import { IconTypes } from "./IconTypes";
 export const StarSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className
 }) => {
  return (
    <svg
      fill={color}
      height={height}
      width={width}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="m233-80 65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/StorefrontSVG.tsx
+++ b/src/assets/svgs/StorefrontSVG.tsx
@ -0,0 +1,23 @@
 import { IconTypes } from "./IconTypes";
 export const StorefrontSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      className={className}
      onClick={onClickFunc}
      fill={color}
      width={width}
      height={height}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path d="M840-519v339q0 24-18 42t-42 18H179q-24 0-42-18t-18-42v-339q-28-24-37-59t2-70l43-135q8-27 28-42t46-15h553q28 0 49 15.5t29 41.5l44 135q11 35 1.5 70T840-519Zm-270-31q29 0 49-19t16-46l-25-165H510v165q0 26 17 45.5t43 19.5Zm-187 0q28 0 47.5-19t19.5-46v-165H350l-25 165q-4 26 14 45.5t44 19.5Zm-182 0q24 0 41.5-16.5T263-607l26-173H189l-46 146q-10 31 8 57.5t50 26.5Zm557 0q32 0 50.5-26t8.5-58l-46-146H671l26 173q3 24 20.5 40.5T758-550ZM179-180h601v-311q1 1-6.5 1H758q-25 0-47.5-10.5T666-533q-16 20-40 31.5T573-490q-30 0-51.5-8.5T480-527q-15 18-38 27.5t-52 9.5q-31 0-55-11t-41-32q-24 21-47 32t-46 11h-13.5q-6.5 0-8.5-1v311Zm601 0H179h601Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/TimesSVG.tsx
+++ b/src/assets/svgs/TimesSVG.tsx
@ -0,0 +1,23 @@
 import { IconTypes } from "./IconTypes";
 export const TimesSVG: React.FC<IconTypes> = ({
  color,
  height,
  width,
  className,
  onClickFunc
 }) => {
  return (
    <svg
      onClick={onClickFunc}
      className={className}
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 -960 960 960"
      width={width}
    >
      <path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/UnderlineSVG.tsx
+++ b/src/assets/svgs/UnderlineSVG.tsx
@ -0,0 +1,17 @@
 import { SVGProps } from './interfaces'
 export const UnderlineSVG: React.FC<SVGProps> = ({ color, height, width }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path
        fill={color}
        d="M230 916q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T230 856h500q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T730 916H230Zm250-140q-100 0-156.5-58.5T267 559V257q0-16.882 12.527-28.941Q292.055 216 309.027 216 326 216 338 228.059T350 257v302q0 63 34 101t96 38q62 0 96-38t34-101V257q0-16.882 12.527-28.941Q635.055 216 652.027 216 669 216 681 228.059T693 257v302q0 100-56.5 158.5T480 776Z"
      />
    </svg>
  )
 }
--- a/src/assets/svgs/WarningSVG.tsx
+++ b/src/assets/svgs/WarningSVG.tsx
@ -0,0 +1,15 @@
 import { IconTypes } from "./IconTypes";
 export const WarningSVG: React.FC<IconTypes> = ({ color, height, width }) => {
  return (
    <svg
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 96 960 960"
      width={width}
    >
      <path d="m40 936 440-760 440 760H40Zm104-60h672L480 296 144 876Zm340.175-57q12.825 0 21.325-8.675 8.5-8.676 8.5-21.5 0-12.825-8.675-21.325-8.676-8.5-21.5-8.5-12.825 0-21.325 8.675-8.5 8.676-8.5 21.5 0 12.825 8.675 21.325 8.676 8.5 21.5 8.5ZM454 708h60V484h-60v224Zm26-122Z" />
    </svg>
  );
 };
--- a/src/assets/svgs/interfaces.ts
+++ b/src/assets/svgs/interfaces.ts
@ -0,0 +1,5 @@
 export interface SVGProps {
  color: string
  height: string
  width: string
 }
--- a/src/components/common/BlockedNamesModal/BlockedNamesModal-styles.ts
+++ b/src/components/common/BlockedNamesModal/BlockedNamesModal-styles.ts
@ -0,0 +1,28 @@
 import { styled } from '@mui/system';
 import {
  Box,
  Modal,
  Typography
 } from '@mui/material';
 export const StyledModal = styled(Modal)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
 }))
 export const ModalContent = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  padding: theme.spacing(4),
  borderRadius: theme.spacing(1),
  width: '40%',
  '&:focus': {
    outline: 'none'
  }
 }))
 export const ModalText = styled(Typography)(({ theme }) => ({
  fontFamily: "Raleway",
  fontSize: "25px",
  color: theme.palette.text.primary,
 }));
--- a/src/components/common/BlockedNamesModal/BlockedNamesModal.tsx
+++ b/src/components/common/BlockedNamesModal/BlockedNamesModal.tsx
@ -0,0 +1,100 @@
 import React, { useState } from "react";
 import {
  Box,
  Button,
  Modal,
  Typography,
  SelectChangeEvent,
  ListItem,
  List,
  useTheme
 } from "@mui/material";
 import {
  StyledModal,
  ModalContent,
  ModalText
 } from "./BlockedNamesModal-styles";
 interface PostModalProps {
  open: boolean;
  onClose: () => void;
 }
 export const BlockedNamesModal: React.FC<PostModalProps> = ({
  open,
  onClose
 }) => {
  const [blockedNames, setBlockedNames] = useState<string[]>([]);
  const theme = useTheme();
  const getBlockedNames = React.useCallback(async () => {
    try {
      const listName = `blockedNames_q-blog`;
      const response = await qortalRequest({
        action: "GET_LIST_ITEMS",
        list_name: listName
      });
      setBlockedNames(response);
    } catch (error) {
      onClose();
    }
  }, []);
  React.useEffect(() => {
    getBlockedNames();
  }, [getBlockedNames]);
  const removeFromBlockList = async (name: string) => {
    try {
      const response = await qortalRequest({
        action: "DELETE_LIST_ITEM",
        list_name: "blockedNames_q-blog",
        item: name
      });
      if (response === true) {
        setBlockedNames((prev) => prev.filter((n) => n !== name));
      }
    } catch (error) {}
  };
  return (
    <StyledModal open={open} onClose={onClose}>
      <ModalContent>
        <ModalText>Manage blocked names</ModalText>
        <List
          sx={{
            width: "100%",
            display: "flex",
            flexDirection: "column",
            flex: "1",
            overflow: "auto"
          }}
        >
          {blockedNames.map((name, index) => (
            <ListItem
              key={name + index}
              sx={{
                display: "flex"
              }}
            >
              <Typography>{name}</Typography>
              <Button
                sx={{
                  backgroundColor: theme.palette.primary.light,
                  color: theme.palette.text.primary,
                  fontFamily: "Raleway"
                }}
                onClick={() => removeFromBlockList(name)}
              >
                Remove
              </Button>
            </ListItem>
          ))}
        </List>
        <Button variant="contained" color="primary" onClick={onClose}>
          Close
        </Button>
      </ModalContent>
    </StyledModal>
  );
 };
--- a/src/components/common/ConfirmationModal/ConfirmationModal-styles.tsx
+++ b/src/components/common/ConfirmationModal/ConfirmationModal-styles.tsx
@ -0,0 +1,18 @@
 import { styled } from "@mui/system";
 import { DialogTitle, DialogContentText } from "@mui/material";
 export const DialogTitleStyled = styled(DialogTitle)(({ theme }) => ({
  fontFamily: "Merriweather Sans",
  fontSize: "18px",
  color: theme.palette.text.primary,
  userSelect: "none"
 }));
 export const DialogContentTextStyled = styled(DialogContentText)(
  ({ theme }) => ({
    fontFamily: "Karla",
    fontSize: "16px",
    color: theme.palette.text.primary,
    userSelect: "none"
  })
 );
--- a/src/components/common/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/common/ConfirmationModal/ConfirmationModal.tsx
@ -0,0 +1,50 @@
 import React from "react";
 import { Dialog, DialogActions, DialogContent, Button } from "@mui/material";
 import {
  DialogContentTextStyled,
  DialogTitleStyled
 } from "./ConfirmationModal-styles";
 import {
  CancelButton,
  CreateButton
 } from "../../modals/CreateStoreModal-styles";
 export interface ModalProps {
  open: boolean;
  title: string;
  message: string;
  handleConfirm: () => void;
  handleCancel: () => void;
 }
 const ConfirmationModal: React.FC<ModalProps> = ({
  open,
  title,
  message,
  handleConfirm,
  handleCancel
 }) => {
  return (
    <Dialog
      open={open}
      onClose={handleCancel}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitleStyled id="alert-dialog-title">{title}</DialogTitleStyled>
      <DialogContent>
        <DialogContentTextStyled id="alert-dialog-description">
          {message}
        </DialogContentTextStyled>
      </DialogContent>
      <DialogActions>
        <CancelButton variant="outlined" onClick={handleCancel} color="error">
          Cancel
        </CancelButton>
        <CreateButton onClick={handleConfirm}>Proceed</CreateButton>
      </DialogActions>
    </Dialog>
  );
 };
 export default ConfirmationModal;
--- a/src/components/common/ContextMenu/ContextMenuResource.tsx
+++ b/src/components/common/ContextMenu/ContextMenuResource.tsx
@ -0,0 +1,82 @@
 import * as React from "react";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Typography from "@mui/material/Typography";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { useDispatch } from "react-redux";
 import { setNotification } from "../../../state/features/notificationsSlice";
 import { Box } from "@mui/material";
 export default function ContextMenuResource({
  children,
  name,
  service,
  identifier,
  link
 }: any) {
  const [contextMenu, setContextMenu] = React.useState<{
    mouseX: number;
    mouseY: number;
  } | null>(null);
  const dispatch = useDispatch();
  const handleContextMenu = (event: React.MouseEvent) => {
    event.preventDefault();
    setContextMenu(
      contextMenu === null
        ? {
            mouseX: event.clientX + 2,
            mouseY: event.clientY - 6
          }
        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
          // Other native context menus might behave different.
          // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
          null
    );
  };
  const handleClose = () => {
    setContextMenu(null);
  };
  return (
    <div
      onContextMenu={handleContextMenu}
      style={{ cursor: "context-menu", width: "100%", height: "100%" }}
    >
      {children}
      <Menu
        open={contextMenu !== null}
        onClose={handleClose}
        anchorReference="anchorPosition"
        anchorPosition={
          contextMenu !== null
            ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
            : undefined
        }
      >
        <MenuItem>
          <CopyToClipboard
            text={link}
            onCopy={() => {
              handleClose();
              dispatch(
                setNotification({
                  msg: "Copied to clipboard!",
                  alertType: "success"
                })
              );
            }}
          >
            <Box
              sx={{
                fontSize: "16px"
              }}
            >
              Copy Link
            </Box>
          </CopyToClipboard>
        </MenuItem>
      </Menu>
    </div>
  );
 }
--- a/src/components/common/CustomIcon.tsx
+++ b/src/components/common/CustomIcon.tsx
@ -0,0 +1,16 @@
 import React from 'react'
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 import { styled } from '@mui/system'
 const CustomSvgIcon: React.FC<any> = styled(SvgIcon)(({ theme }) => ({
  cursor: 'pointer',
  color: '#5f6368',
  transition: 'all 0.2s',
  '&:hover': {
    transform: 'scale(1.1)'
  }
 })) as unknown as React.FC<any>
 export const CustomIcon: React.FC<any> = (props) => {
  return <CustomSvgIcon {...props} />
 }
--- a/src/components/common/DraggableResizableGrid.tsx
+++ b/src/components/common/DraggableResizableGrid.tsx
@ -0,0 +1,55 @@
 // DraggableResizableGrid.tsx
 import React from 'react'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import GridLayout, { Layout } from 'react-grid-layout'
 import './DraggableResizableGrid.css' // Add your custom CSS for the grid layout
 interface GridItem {
  id: string
  content: React.ReactNode
 }
 interface DraggableResizableGridProps {
  items: GridItem[]
  cols?: number
  rowHeight?: number
  onLayoutChange?: (layout: Layout[]) => void
 }
 const DraggableResizableGrid: React.FC<DraggableResizableGridProps> = ({
  items,
  cols = 12,
  rowHeight = 30,
  onLayoutChange
 }) => {
  const layout = items.map((item, index) => ({
    i: item.id,
    x: index % cols,
    y: Math.floor(index / cols),
    w: 4,
    h: 4
  }))
  return (
    <DndProvider backend={HTML5Backend}>
      <GridLayout
        className="layout"
        layout={layout}
        cols={cols}
        rowHeight={rowHeight}
        width={1200}
        onLayoutChange={onLayoutChange}
      >
        {items.map((item) => (
          <div key={item.id} className="grid-item">
            {item.content}
          </div>
        ))}
      </GridLayout>
    </DndProvider>
  )
 }
 export default DraggableResizableGrid
--- a/src/components/common/Error/Error-styles.tsx
+++ b/src/components/common/Error/Error-styles.tsx
@ -0,0 +1,40 @@
 import { styled } from '@mui/system'
 import { Box, Button, Grid, Typography } from '@mui/material'
 export const Container = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'column',
  gap: '15px',
  padding: '25px 10px'
 }))
 export const HeaderRow = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  gap: '10px'
 }))
 export const HeaderText = styled(Typography)(({ theme }) => ({
  fontFamily: 'Oxygen',
  color: theme.palette.text.primary,
  fontWeight: '400'
 }))
 export const BackButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.light,
  color: '#fff',
  padding: '8px 16px',
  borderRadius: '7px',
  fontFamily: 'Oxygen',
  fontSize: '18px',
  fontWeight: 500,
  textTransform: 'none',
  transition: 'all 0.3s ease-in-out',
  '&:hover': {
    cursor: 'pointer',
    backgroundColor: theme.palette.secondary.light,
    filter: 'brightness(0.9)'
  }
 }))
--- a/src/components/common/Error/ErrorElement.tsx
+++ b/src/components/common/Error/ErrorElement.tsx
@ -0,0 +1,34 @@
 import { Container, HeaderText, BackButton, HeaderRow } from "./Error-styles";
 import { useTheme } from "@mui/material";
 import { WarningSVG } from "../../../assets/svgs/WarningSVG";
 interface ErrorElementProps {
  message: string;
 }
 export const ErrorElement: React.FC<ErrorElementProps> = ({ message }) => {
  const theme = useTheme();
  return (
    <Container>
      <HeaderRow>
        <WarningSVG
          color={theme.palette.text.primary}
          height={"35"}
          width={"35"}
        />
        <HeaderText variant="h1">{message}</HeaderText>
      </HeaderRow>
      <HeaderText variant="h2">
        Please return home or try refreshing the page!
      </HeaderText>
      <BackButton
        onClick={() => {
          window.location.reload();
        }}
      >
        Back Home
      </BackButton>
    </Container>
  );
 };
--- a/src/components/common/ErrorBoundary.tsx
+++ b/src/components/common/ErrorBoundary.tsx
@ -0,0 +1,36 @@
 import React, { ReactNode } from 'react'
 interface ErrorBoundaryProps {
  children: ReactNode
  fallback: ReactNode
 }
 interface ErrorBoundaryState {
  hasError: boolean
 }
 class ErrorBoundary extends React.Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
 > {
  state: ErrorBoundaryState = {
    hasError: false
  }
  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    return { hasError: true }
  }
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    // You can log the error and errorInfo here, for example, to an error reporting service.
    console.error('Error caught in ErrorBoundary:', error, errorInfo)
  }
  render(): React.ReactNode {
    if (this.state.hasError) return this.props.fallback
    return this.props.children
  }
 }
 export default ErrorBoundary
--- a/src/components/common/GenericPublishModal.tsx
+++ b/src/components/common/GenericPublishModal.tsx
@ -0,0 +1,316 @@
 import React, { useState } from 'react'
 import {
  Box,
  Button,
  Modal,
  TextField,
  Typography,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  SelectChangeEvent,
  OutlinedInput,
  Chip,
  IconButton
 } from '@mui/material'
 import { styled } from '@mui/system'
 import { useDropzone } from 'react-dropzone'
 import { toBase64 } from '../../utils/toBase64'
 import AddIcon from '@mui/icons-material/Add'
 import CloseIcon from '@mui/icons-material/Close'
 import { usePublishGeneric } from './PublishGeneric'
 import { useDispatch } from 'react-redux'
 import { setNotification } from '../../state/features/notificationsSlice'
 const StyledModal = styled(Modal)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
 }))
 const ChipContainer = styled(Box)({
  display: 'flex',
  flexWrap: 'wrap',
  '& > *': {
    margin: '4px'
  }
 })
 const ModalContent = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  padding: theme.spacing(4),
  borderRadius: theme.spacing(1),
  width: '40%',
  '&:focus': {
    outline: 'none'
  }
 }))
 interface GenericModalProps {
  open: boolean
  onClose: () => void
  onPublish: (value: any) => void
  acceptedFileType?: string
  acceptedFileTypes?: string[]
  service: string
  identifierPrefix: string
  editVideoIdentifier?: string | null | undefined
 }
 interface SelectOption {
  id: string
  name: string
 }
 const maxSize = 500 * 1024 * 1024
 export const GenericModal: React.FC<GenericModalProps> = ({
  open,
  onClose,
  onPublish,
  acceptedFileType,
  acceptedFileTypes,
  service,
  identifierPrefix,
  editVideoIdentifier
 }) => {
  const [file, setFile] = useState<File | null>(null)
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [selectedOption, setSelectedOption] = useState<SelectOption | null>(
    null
  )
  const [inputValue, setInputValue] = useState<string>('')
  const [chips, setChips] = useState<string[]>([])
  const [options, setOptions] = useState<SelectOption[]>([])
  const [tags, setTags] = useState<string[]>([])
  const { publishGeneric } = usePublishGeneric()
  const dispatch = useDispatch()
  let acceptedFile = {}
  if (acceptedFileType) {
    acceptedFile = {
      [acceptedFileType]: []
    }
  }
  const { getRootProps, getInputProps } = useDropzone({
    ...acceptedFile,
    maxFiles: 1,
    maxSize,
    onDrop: (acceptedFiles) => {
      setFile(acceptedFiles[0])
    },
    onDropRejected: (rejectedFiles) => {
      dispatch(
        setNotification({
          msg: 'Your file is over the 500mb limit.',
          alertType: 'error'
        })
      )
    }
  })
  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(event.target.value)
  }
  const handleDescriptionChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setDescription(event.target.value)
  }
  const handleOptionChange = (event: SelectChangeEvent<string>) => {
    const optionId = event.target.value
    const selectedOption = options.find((option) => option.id === optionId)
    setSelectedOption(selectedOption || null)
  }
  const handleChipDelete = (index: number) => {
    const newChips = [...chips]
    newChips.splice(index, 1)
    setChips(newChips)
  }
  const handleSubmit = async () => {
    const missingFields = []
    if (!title) missingFields.push('title')
    if (!file) missingFields.push('file')
    if (missingFields.length > 0) {
      const missingFieldsString = missingFields.join(', ')
      const errMsg = `Missing: ${missingFieldsString}`
      return
    }
    if (!file) return
    const formattedTags: { [key: string]: string } = {}
    chips.forEach((tag, i) => {
      formattedTags[`tag${i + 1}`] = tag
    })
    try {
      const base64 = await toBase64(file)
      if (typeof base64 !== 'string') return
      const base64String = base64.split(',')[1]
      const fileExtension = file?.name?.split('.')?.pop()
      const fileTitle = title?.replace(/ /g, '_')?.slice(0, 20)
      const filename = `${fileTitle}.${fileExtension}`
      const res = await publishGeneric({
        editVideoIdentifier,
        service,
        identifierPrefix,
        title,
        description,
        base64: base64String,
        filename: filename,
        category: selectedOption?.id || '',
        ...formattedTags
      })
      onPublish(res)
      setFile(null)
      setTitle('')
      setDescription('')
      onClose()
    } catch (error) {}
  }
  const handleInputChange = (event: any) => {
    setInputValue(event.target.value)
  }
  const handleInputKeyDown = (event: any) => {
    if (event.key === 'Enter' && inputValue !== '') {
      if (chips.length < 5) {
        setChips([...chips, inputValue])
        setInputValue('')
      } else {
        event.preventDefault()
      }
    }
  }
  const addChip = () => {
    if (chips.length < 5) {
      setChips([...chips, inputValue])
      setInputValue('')
    }
  }
  const getListCategories = React.useCallback(async () => {
    try {
      const url = `/arbitrary/categories`
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      })
      const responseData = await response.json()
      setOptions(responseData)
    } catch (error) {}
  }, [])
  React.useEffect(() => {
    getListCategories()
  }, [getListCategories])
  return (
    <StyledModal open={open} onClose={onClose}>
      <ModalContent>
        {editVideoIdentifier && (
          <Typography variant="h6">
            You are editing: {editVideoIdentifier}
          </Typography>
        )}
        <Typography variant="h6" component="h2" gutterBottom>
          Upload {service}
        </Typography>
        <Box
          {...getRootProps()}
          sx={{
            border: '1px dashed gray',
            padding: 2,
            textAlign: 'center',
            marginBottom: 2
          }}
        >
          <input {...getInputProps()} />
          <Typography>
            {file
              ? file.name
              : 'Drag and drop a file here or click to select a file'}
          </Typography>
        </Box>
        <TextField
          label="Title"
          variant="outlined"
          fullWidth
          value={title}
          onChange={handleTitleChange}
          inputProps={{ maxLength: 40 }}
          sx={{ marginBottom: 2 }}
        />
        <TextField
          label="Description"
          variant="outlined"
          fullWidth
          multiline
          rows={4}
          value={description}
          onChange={handleDescriptionChange}
          inputProps={{ maxLength: 180 }}
          sx={{ marginBottom: 2 }}
        />
        {options.length > 0 && (
          <FormControl fullWidth sx={{ marginBottom: 2 }}>
            <InputLabel id="Category">Select a Category</InputLabel>
            <Select
              labelId="Category"
              input={<OutlinedInput label="Select a Category" />}
              value={selectedOption?.id || ''}
              onChange={handleOptionChange}
            >
              {options.map((option) => (
                <MenuItem key={option.id} value={option.id}>
                  {option.name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        )}
        <FormControl fullWidth sx={{ marginBottom: 2 }}>
          <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
            <TextField
              label="Add a tag"
              value={inputValue}
              onChange={handleInputChange}
              onKeyDown={handleInputKeyDown}
              disabled={chips.length === 3}
            />
            <IconButton onClick={addChip} disabled={chips.length === 3}>
              <AddIcon />
            </IconButton>
          </Box>
          <ChipContainer>
            {chips.map((chip, index) => (
              <Chip
                key={index}
                label={chip}
                onDelete={() => handleChipDelete(index)}
                deleteIcon={<CloseIcon />}
              />
            ))}
          </ChipContainer>
        </FormControl>
        <Button variant="contained" color="primary" onClick={handleSubmit}>
          Submit
        </Button>
      </ModalContent>
    </StyledModal>
  )
 }
--- a/src/components/common/ImageUploader.tsx
+++ b/src/components/common/ImageUploader.tsx
@ -0,0 +1,89 @@
 import React, { useCallback } from 'react'
 import { Box, Button, TextField, Typography, Modal } from '@mui/material'
 import {
  useDropzone,
  DropzoneRootProps,
  DropzoneInputProps
 } from 'react-dropzone'
 import Compressor from 'compressorjs'
 const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => {
      reject(error)
    }
  })
 interface ImageUploaderProps {
  children: React.ReactNode
  onPick: (base64Img: string) => void
 }
 const ImageUploader: React.FC<ImageUploaderProps> = ({ children, onPick }) => {
  const onDrop = useCallback(
    async (acceptedFiles: File[]) => {
      if (acceptedFiles.length > 1) {
        return
      }
      let compressedFile: File | undefined
      try {
        const image = acceptedFiles[0]
        await new Promise<void>((resolve) => {
          new Compressor(image, {
            quality: 0.6,
            maxWidth: 1200,
            mimeType: 'image/webp',
            success(result) {
              const file = new File([result], 'name', {
                type: 'image/webp'
              })
              compressedFile = file
              resolve()
            },
            error(err) {}
          })
        })
        if (!compressedFile) return
        const base64Img = await toBase64(compressedFile)
        onPick(base64Img as string)
      } catch (error) {
        console.error(error)
      }
    },
    [onPick]
  )
  const {
    getRootProps,
    getInputProps,
    isDragActive
  }: {
    getRootProps: () => DropzoneRootProps
    getInputProps: () => DropzoneInputProps
    isDragActive: boolean
  } = useDropzone({
    onDrop,
    accept: {
      'image/*': []
    }
  })
  return (
    <Box
      {...getRootProps()}
      sx={{
        display: 'flex'
      }}
    >
      <input {...getInputProps()} />
      {children}
    </Box>
  )
 }
 export default ImageUploader
--- a/src/components/common/LazyLoad.tsx
+++ b/src/components/common/LazyLoad.tsx
@ -0,0 +1,49 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useInView } from "react-intersection-observer";
 import CircularProgress from "@mui/material/CircularProgress";
 interface Props {
  onLoadMore: () => Promise<void>;
  isLoading?: boolean;
 }
 const LazyLoad: React.FC<Props> = ({ onLoadMore, isLoading }) => {
  const [isFetching, setIsFetching] = useState<boolean>(false);
  const firstLoad = useRef(false);
  const [ref, inView] = useInView({
    threshold: 0.7
  });
  useEffect(() => {
    if (inView) {
      setIsFetching(true);
      onLoadMore().finally(() => {
        setIsFetching(false);
        firstLoad.current = true;
      });
    }
  }, [inView]);
  return (
    <div
      ref={ref}
      style={{
        display: "flex",
        justifyContent: "center",
        minHeight: "25px",
        width: "100%"
      }}
    >
      <div
        style={{
          visibility: isFetching || isLoading ? "visible" : "hidden"
        }}
      >
        <CircularProgress />
      </div>
    </div>
  );
 };
 export default LazyLoad;
--- a/src/components/common/Notification/Notification.tsx
+++ b/src/components/common/Notification/Notification.tsx
@ -0,0 +1,86 @@
 import { useDispatch, useSelector } from 'react-redux'
 import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
 import { removeNotification } from '../../../state/features/notificationsSlice'
 import 'react-toastify/dist/ReactToastify.css'
 import { RootState } from '../../../state/store'
 const Notification = () => {
  const dispatch = useDispatch()
  const { alertTypes } = useSelector((state: RootState) => state.notifications)
  if (alertTypes.alertError) {
    toast.error(`❌ ${alertTypes?.alertError}`, {
      position: 'bottom-right',
      autoClose: 4000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      icon: false
    })
    dispatch(removeNotification())
  }
  if (alertTypes.alertSuccess) {
    toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
      position: 'bottom-right',
      autoClose: 4000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      icon: false
    })
    dispatch(removeNotification())
  }
  if (alertTypes.alertInfo) {
    toast.info(`${alertTypes?.alertInfo}`, {
      position: 'top-right',
      autoClose: 1300,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: 'light'
    })
    dispatch(removeNotification())
  }
  if (alertTypes.alertInfo) {
    return (
      <ToastContainer
        position="top-right"
        autoClose={2000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="light"
        toastStyle={{ fontSize: '16px' }}
        transition={Slide}
      />
    )
  }
  return (
    <ToastContainer
      transition={Zoom}
      position="bottom-right"
      autoClose={false}
      hideProgressBar={false}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      draggable
      pauseOnHover
    />
  )
 }
 export default Notification
--- a/src/components/common/NumericTextFieldQshop.tsx
+++ b/src/components/common/NumericTextFieldQshop.tsx
@ -0,0 +1,132 @@
 import { IconButton, InputAdornment, TextField } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import React, { useImperativeHandle, useState } from "react";
 export enum Variant {
  filled = "filled",
  standard = "standard",
  outlined = "outlined"
 }
 interface TextFieldProps {
  name: string;
  label: string;
  required: boolean;
  minValue: number;
  maxValue: number;
  variant?: Variant;
  addIconButtons?: boolean;
  allowDecimals?: boolean;
  onChangeFunc?: (e: string) => void;
  initialValue?: string;
  style?: object;
  className?: string;
 }
 export type NumericTextFieldRef = {
  getTextFieldValue: () => string;
 };
 export const NumericTextFieldQshop = React.forwardRef<
  NumericTextFieldRef,
  TextFieldProps
 >(
  (
    {
      name,
      label,
      variant,
      required,
      style,
      minValue,
      maxValue,
      addIconButtons = true,
      allowDecimals = true,
      onChangeFunc,
      initialValue,
      className
    }: TextFieldProps,
    ref
  ) => {
    const [textFieldValue, setTextFieldValue] = useState<string>(
      initialValue || ""
    );
    useImperativeHandle(
      ref,
      () => ({
        getTextFieldValue: () => {
          return textFieldValue;
        }
      }),
      [textFieldValue]
    );
    const setMinMaxValue = (value: string): string => {
      const lastIndexIsDecimal = value.charAt(value.length - 1) === ".";
      if (lastIndexIsDecimal) return value;
      const valueNum = Number(value);
      // Bounds checking on valueNum
      let minMaxNum = valueNum;
      minMaxNum = Math.min(minMaxNum, maxValue);
      minMaxNum = Math.max(minMaxNum, minValue);
      return minMaxNum === valueNum ? value : minMaxNum.toString();
    };
    const filterValue = (value: string, emptyReturn = "") => {
      if (allowDecimals === false) value = value.replace(".", "");
      if (value === "-1") return emptyReturn;
      const isPositiveNum = /^[0-9]*\.?[0-9]*$/;
      if (isPositiveNum.test(value)) {
        return setMinMaxValue(value);
      }
      return textFieldValue;
    };
    const changeValueWithButton = (changeAmount: number) => {
      const valueNum = Number(textFieldValue);
      const newValue = setMinMaxValue((valueNum + changeAmount).toString());
      setTextFieldValue(newValue);
    };
    const listeners = (e: React.ChangeEvent<HTMLInputElement>) => {
      const newValue = filterValue(e.target.value || "-1");
      setTextFieldValue(newValue);
      if (onChangeFunc) onChangeFunc(newValue);
    };
    return (
      <TextField
        {...style}
        name={name}
        label={label}
        required={required}
        variant={variant}
        InputProps={
          addIconButtons
            ? {
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton onClick={(e) => changeValueWithButton(1)}>
                      <AddIcon />{" "}
                    </IconButton>
                    <IconButton onClick={(e) => changeValueWithButton(-1)}>
                      <RemoveIcon />{" "}
                    </IconButton>
                  </InputAdornment>
                )
              }
            : {}
        }
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => listeners(e)}
        autoComplete="off"
        value={textFieldValue}
        className={className}
      />
    );
  }
 );
--- a/src/components/common/PageLoader.tsx
+++ b/src/components/common/PageLoader.tsx
@ -0,0 +1,43 @@
 import React from "react";
 import CircularProgress from "@mui/material/CircularProgress";
 import Box from "@mui/system/Box";
 import { useTheme } from "@mui/material";
 interface PageLoaderProps {
  size?: number;
  thickness?: number;
 }
 const PageLoader: React.FC<PageLoaderProps> = ({
  size = 40,
  thickness = 5
 }) => {
  const theme = useTheme();
  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
        width: "100%",
        position: "fixed",
        top: 0,
        left: 0,
        backgroundColor: theme.palette.background.default,
        zIndex: 10000
      }}
    >
      <CircularProgress
        size={size}
        thickness={thickness}
        sx={{
          color: theme.palette.secondary.main
        }}
      />
    </Box>
  );
 };
 export default PageLoader;
--- a/src/components/common/Portal.tsx
+++ b/src/components/common/Portal.tsx
@ -0,0 +1,25 @@
 import React, { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 interface PortalProps {
  children: React.ReactNode
 }
 const Portal: React.FC<PortalProps> = ({ children }) => {
  const [mounted, setMounted] = useState(false)
  useEffect(() => {
    setMounted(true)
    return () => setMounted(false)
  }, [])
  return mounted
    ? createPortal(
        children,
        document.querySelector('#modal-root') as HTMLElement
      )
    : null
 }
 export default Portal
--- a/src/components/common/PostPublishModal.tsx
+++ b/src/components/common/PostPublishModal.tsx
@ -0,0 +1,280 @@
 import React, { useState } from 'react'
 import {
  Box,
  Button,
  Modal,
  TextField,
  Typography,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  SelectChangeEvent,
  OutlinedInput,
  Chip,
  IconButton
 } from '@mui/material'
 import { styled } from '@mui/system'
 import { useDropzone } from 'react-dropzone'
 import { usePublishVideo } from './PublishVideo'
 import { toBase64 } from '../../utils/toBase64'
 import AddIcon from '@mui/icons-material/Add'
 import CloseIcon from '@mui/icons-material/Close'
 const StyledModal = styled(Modal)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
 }))
 const ChipContainer = styled(Box)({
  display: 'flex',
  flexWrap: 'wrap',
  '& > *': {
    margin: '4px'
  }
 })
 const ModalContent = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  padding: theme.spacing(4),
  borderRadius: theme.spacing(1),
  width: '40%',
  '&:focus': {
    outline: 'none'
  }
 }))
 interface PostModalProps {
  open: boolean
  onClose: () => void
  onPublish: (value: any) => Promise<void>
  post: any
  mode?: string
  metadata?: any
 }
 interface SelectOption {
  id: string
  name: string
 }
 const PostPublishModal: React.FC<PostModalProps> = ({
  open,
  onClose,
  onPublish,
  post,
  mode,
  metadata
 }) => {
  const [file, setFile] = useState<File | null>(null)
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [selectedOption, setSelectedOption] = useState<SelectOption | null>(
    null
  )
  const [inputValue, setInputValue] = useState<string>('')
  const [chips, setChips] = useState<string[]>([])
  const [options, setOptions] = useState<SelectOption[]>([])
  const [tags, setTags] = useState<string[]>([])
  const { publishVideo } = usePublishVideo()
  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      'video/*': []
    },
    maxFiles: 1,
    onDrop: (acceptedFiles) => {
      setFile(acceptedFiles[0])
    }
  })
  React.useEffect(() => {
    if (post.title) {
      setTitle(post.title)
    }
    // if (post.description) {
    //   setDescription(post.description)
    // }
  }, [post])
  React.useEffect(() => {
    if (mode === 'edit' && metadata) {
      if (metadata.description) {
        setDescription(metadata.description)
      }
      const findCategory = options.find(
        (option) => option.id === metadata?.category
      )
      if (findCategory) {
        setSelectedOption(findCategory)
      }
      if (!metadata?.tags || !Array.isArray(metadata?.tags)) return
      setChips(metadata.tags.slice(0, -2))
    }
  }, [mode, metadata, options])
  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(event.target.value)
  }
  const handleDescriptionChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setDescription(event.target.value)
  }
  const handleOptionChange = (event: SelectChangeEvent<string>) => {
    const optionId = event.target.value
    const selectedOption = options.find((option) => option.id === optionId)
    setSelectedOption(selectedOption || null)
  }
  const handleChipDelete = (index: number) => {
    const newChips = [...chips]
    newChips.splice(index, 1)
    setChips(newChips)
  }
  const handleSubmit = async () => {
    const formattedTags: { [key: string]: string } = {}
    chips.forEach((tag, i) => {
      formattedTags[`tag${i + 1}`] = tag
    })
    try {
      await onPublish({
        title,
        description,
        tags: chips,
        category: selectedOption?.id || ''
      })
      setFile(null)
      setTitle('')
      setDescription('')
      onClose()
    } catch (error) {}
  }
  const handleInputChange = (event: any) => {
    setInputValue(event.target.value)
  }
  const handleInputKeyDown = (event: any) => {
    if (event.key === 'Enter' && inputValue !== '') {
      if (chips.length < 5) {
        setChips([...chips, inputValue])
        setInputValue('')
      } else {
        event.preventDefault()
      }
    }
  }
  const addChip = () => {
    if (chips.length < 3) {
      setChips([...chips, inputValue])
      setInputValue('')
    }
  }
  const getListCategories = React.useCallback(async () => {
    try {
      const url = `/arbitrary/categories`
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      })
      const responseData = await response.json()
      setOptions(responseData)
    } catch (error) {}
  }, [])
  React.useEffect(() => {
    getListCategories()
  }, [getListCategories])
  return (
    <StyledModal open={open} onClose={onClose}>
      <ModalContent>
        <Typography variant="h6" component="h2" gutterBottom>
          Upload Blog Post
        </Typography>
        <TextField
          label="Post Title"
          variant="outlined"
          fullWidth
          value={title}
          onChange={handleTitleChange}
          inputProps={{ maxLength: 40 }}
          sx={{ marginBottom: 2 }}
          disabled
        />
        <TextField
          label="Post Description"
          variant="outlined"
          fullWidth
          multiline
          rows={4}
          value={description}
          onChange={handleDescriptionChange}
          inputProps={{ maxLength: 180 }}
          sx={{ marginBottom: 2 }}
        />
        {options.length > 0 && (
          <FormControl fullWidth sx={{ marginBottom: 2 }}>
            <InputLabel id="Category">Select a Category</InputLabel>
            <Select
              labelId="Category"
              input={<OutlinedInput label="Select a Category" />}
              value={selectedOption?.id || ''}
              onChange={handleOptionChange}
            >
              {options.map((option) => (
                <MenuItem key={option.id} value={option.id}>
                  {option.name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        )}
        <FormControl fullWidth sx={{ marginBottom: 2 }}>
          <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
            <TextField
              label="Add a tag"
              value={inputValue}
              onChange={handleInputChange}
              onKeyDown={handleInputKeyDown}
              disabled={chips.length === 3}
            />
            <IconButton onClick={addChip} disabled={chips.length === 3}>
              <AddIcon />
            </IconButton>
          </Box>
          <ChipContainer>
            {chips.map((chip, index) => (
              <Chip
                key={index}
                label={chip}
                onDelete={() => handleChipDelete(index)}
                deleteIcon={<CloseIcon />}
              />
            ))}
          </ChipContainer>
        </FormControl>
        <Button variant="contained" color="primary" onClick={handleSubmit}>
          Submit
        </Button>
      </ModalContent>
    </StyledModal>
  )
 }
 export default PostPublishModal
--- a/src/components/common/PublishAudio.tsx
+++ b/src/components/common/PublishAudio.tsx
@ -0,0 +1,111 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { setNotification } from '../../state/features/notificationsSlice'
 import { RootState } from '../../state/store'
 import ShortUniqueId from 'short-unique-id'
 const uid = new ShortUniqueId()
 interface IPublishVideo {
  title: string
  description: string
  base64: string
  category: string
    editVideoIdentifier?: string | null | undefined
 }
 export const usePublishAudio = () => {
  const { user } = useSelector((state: RootState) => state.auth)
  const dispatch = useDispatch()
  const publishAudio = async ({
    editVideoIdentifier,
    title,
    description,
    base64,
    category,
    ...rest
  }: IPublishVideo) => {
    let address
    let name
    let errorMsg = ''
    address = user?.address
    name = user?.name || ''
    const missingFields = []
    if (!address) {
      errorMsg = "Cannot post: your address isn't available"
    }
    if (!name) {
      errorMsg = 'Cannot post without a name'
    }
    if (!title) missingFields.push('title')
    if (missingFields.length > 0) {
      const missingFieldsString = missingFields.join(', ')
      const errMsg = `Missing: ${missingFieldsString}`
      errorMsg = errMsg
    }
    if (errorMsg) {
      dispatch(
        setNotification({
          msg: errorMsg,
          alertType: 'error'
        })
      )
      throw new Error(errorMsg)
    }
    try {
      const id = uid()
      let identifier = `qaudio_qblog_${id}`
      if(editVideoIdentifier){
        identifier = editVideoIdentifier
      }
      const resourceResponse = await qortalRequest({
        action: 'PUBLISH_QDN_RESOURCE',
        name: name,
        service: 'AUDIO',
        data64: base64,
        title: title,
        description: description,
        category: category,
        ...rest,
        identifier: identifier
      })
      dispatch(
        setNotification({
          msg: 'Audio successfully published',
          alertType: 'success'
        })
      )
      return resourceResponse
    } catch (error: any) {
      let notificationObj = null
      if (typeof error === 'string') {
        notificationObj = {
          msg: error || 'Failed to publish audio',
          alertType: 'error'
        }
      } else if (typeof error?.error === 'string') {
        notificationObj = {
          msg: error?.error || 'Failed to publish audio',
          alertType: 'error'
        }
      } else {
        notificationObj = {
          msg: error?.message || error?.message || 'Failed to publish audio',
          alertType: 'error'
        }
      }
      if (!notificationObj) return
      dispatch(setNotification(notificationObj))
    }
  }
  return {
    publishAudio
  }
 }
--- a/src/components/common/PublishGeneric.tsx
+++ b/src/components/common/PublishGeneric.tsx
@ -0,0 +1,119 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { setNotification } from '../../state/features/notificationsSlice'
 import { RootState } from '../../state/store'
 import ShortUniqueId from 'short-unique-id'
 const uid = new ShortUniqueId()
 interface IPublishGeneric {
  title: string
  description: string
  base64: string
  category: string
  service: string
  identifierPrefix: string
  filename: string
  editVideoIdentifier?: string | null | undefined
 }
 export const usePublishGeneric = () => {
  const { user } = useSelector((state: RootState) => state.auth)
  const dispatch = useDispatch()
  const publishGeneric = async ({
    editVideoIdentifier,
    service,
    identifierPrefix,
    filename,
    title,
    description,
    base64,
    category,
    ...rest
  }: IPublishGeneric) => {
    let address
    let name
    let errorMsg = ''
    address = user?.address
    name = user?.name || ''
    const missingFields = []
    if (!address) {
      errorMsg = "Cannot post: your address isn't available"
    }
    if (!name) {
      errorMsg = 'Cannot post without a name'
    }
    if (!title) missingFields.push('title')
    if (missingFields.length > 0) {
      const missingFieldsString = missingFields.join(', ')
      const errMsg = `Missing: ${missingFieldsString}`
      errorMsg = errMsg
    }
    if (errorMsg) {
      dispatch(
        setNotification({
          msg: errorMsg,
          alertType: 'error'
        })
      )
      throw new Error(errorMsg)
    }
    try {
      const id = uid()
      let identifier = `${identifierPrefix}_${id}`
      if(editVideoIdentifier){
        identifier = editVideoIdentifier
      }
      const resourceResponse = await qortalRequest({
        action: 'PUBLISH_QDN_RESOURCE',
        name: name,
        service: service,
        data64: base64,
        title: title,
        description: description,
        category: category,
        filename,
        ...rest,
        identifier: identifier
      })
      dispatch(
        setNotification({
          msg: `${service} successfully published`,
          alertType: 'success'
        })
      )
      return resourceResponse
    } catch (error: any) {
      let notificationObj = null
      if (typeof error === 'string') {
        notificationObj = {
          msg: error || `Failed to publish ${service}`,
          alertType: 'error'
        }
      } else if (typeof error?.error === 'string') {
        notificationObj = {
          msg: error?.error || `Failed to publish ${service}`,
          alertType: 'error'
        }
      } else {
        notificationObj = {
          msg:
            error?.message || error?.message || `Failed to publish ${service}`,
          alertType: 'error'
        }
      }
      if (!notificationObj) return
      dispatch(setNotification(notificationObj))
    }
  }
  return {
    publishGeneric
  }
 }
--- a/src/components/common/PublishVideo.tsx
+++ b/src/components/common/PublishVideo.tsx
@ -0,0 +1,112 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { setNotification } from '../../state/features/notificationsSlice'
 import { RootState } from '../../state/store'
 import ShortUniqueId from 'short-unique-id'
 const uid = new ShortUniqueId()
 interface IPublishVideo {
  title: string
  description: string
  base64?: string
  category: string
  editVideoIdentifier?: string | null | undefined
  file?: File
 }
 export const usePublishVideo = () => {
  const { user } = useSelector((state: RootState) => state.auth)
  const dispatch = useDispatch()
  const publishVideo = async ({
    file,
    editVideoIdentifier,
    title,
    description,
    base64,
    category,
    ...rest
  }: IPublishVideo) => {
    let address
    let name
    let errorMsg = ''
    address = user?.address
    name = user?.name || ''
    const missingFields = []
    if (!address) {
      errorMsg = "Cannot post: your address isn't available"
    }
    if (!name) {
      errorMsg = 'Cannot post without a name'
    }
    if (!title) missingFields.push('title')
    if (missingFields.length > 0) {
      const missingFieldsString = missingFields.join(', ')
      const errMsg = `Missing: ${missingFieldsString}`
      errorMsg = errMsg
    }
    if (errorMsg) {
      dispatch(
        setNotification({
          msg: errorMsg,
          alertType: 'error'
        })
      )
      throw new Error(errorMsg)
    }
    try {
      const id = uid()
      let identifier = `qvideo_qblog_${id}`
      if (editVideoIdentifier) {
        identifier = editVideoIdentifier
      }
      const resourceResponse = await qortalRequest({
        action: 'PUBLISH_QDN_RESOURCE',
        name: name,
        service: 'VIDEO',
        // data64: base64,
        file: file,
        title: title,
        description: description,
        category: category,
        ...rest,
        identifier: identifier
      })
      dispatch(
        setNotification({
          msg: 'Video successfully published',
          alertType: 'success'
        })
      )
      return resourceResponse
    } catch (error: any) {
      let notificationObj = null
      if (typeof error === 'string') {
        notificationObj = {
          msg: error || 'Failed to publish video',
          alertType: 'error'
        }
      } else if (typeof error?.error === 'string') {
        notificationObj = {
          msg: error?.error || 'Failed to publish video',
          alertType: 'error'
        }
      } else {
        notificationObj = {
          msg: error?.message || 'Failed to publish video',
          alertType: 'error'
        }
      }
      if (!notificationObj) return
      dispatch(setNotification(notificationObj))
    }
  }
  return {
    publishVideo
  }
 }
--- a/src/components/common/ResponsiveImage.tsx
+++ b/src/components/common/ResponsiveImage.tsx
@ -0,0 +1,124 @@
 import React, { useState, useEffect, CSSProperties } from "react";
 import Skeleton from "@mui/material/Skeleton";
 import { Box } from "@mui/material";
 interface ResponsiveImageProps {
  src: string;
  dimensions: string;
  alt?: string;
  className?: string;
  style?: CSSProperties;
 }
 const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
  src,
  dimensions,
  alt,
  className,
  style
 }) => {
  const [loading, setLoading] = useState(true);
  const matchResult = dimensions?.match(/v1\.(\d+(\.\d+)?)x(\d+)/);
  const width = matchResult ? parseFloat(matchResult[1]) : 1; // Default width value
  const height = matchResult ? parseInt(matchResult[3], 10) : 1; // Default height value
  const aspectRatio = (height / width) * 100;
  useEffect(() => {
    if (dimensions === "v1.0x0") {
      setLoading(false);
      return;
    }
  }, [dimensions]);
  if (dimensions === "v1.0x0" || !dimensions) {
    return null;
  }
  const imageStyle: CSSProperties = {
    width: "100%",
    height: "100%",
    objectFit: "cover"
  };
  const wrapperStyle: CSSProperties = {
    position: "relative",
    paddingBottom: `${aspectRatio}%`,
    overflow: "hidden",
    ...style
  };
  return (
    <Box
      sx={{
        padding: "2px"
      }}
    >
      {/* <img
        onLoad={() => setLoading(false)}
        src={src}
        style={{
          width: '100%',
          height: 'auto',
          borderRadius: '8px'
        }}
      /> */}
      {loading && (
        <Skeleton
          variant="rectangular"
          style={{
            width: "100%",
            height: 0,
            paddingBottom: `${(height / width) * 100}%`,
            objectFit: "contain",
            visibility: loading ? "visible" : "hidden",
            borderRadius: "8px"
          }}
        />
      )}
      <img
        onLoad={() => setLoading(false)}
        src={src}
        style={{
          width: "100%",
          height: "auto",
          borderRadius: "8px",
          visibility: loading ? "hidden" : "visible",
          position: loading ? "absolute" : "unset"
        }}
      />
    </Box>
  );
  return (
    <div style={wrapperStyle} className={className}>
      {loading ? (
        <Skeleton
          variant="rectangular"
          sx={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0
          }}
        />
      ) : (
        <img
          src={src}
          alt={alt}
          style={{
            ...imageStyle,
            position: "absolute",
            top: 0,
            left: 0
          }}
        />
      )}
    </div>
  );
 };
 export default ResponsiveImage;
--- a/src/components/common/TabImageList/TabImageList-styles.tsx
+++ b/src/components/common/TabImageList/TabImageList-styles.tsx
@ -0,0 +1,24 @@
 import { styled } from "@mui/system";
 import { Box } from "@mui/material";
 export const TabImageListStyle = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  flexDirection: "column",
  gap: "10px",
  justifyContent: "center",
  width: "100%"
 }));
 export const TabImageContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-start",
  width: "100%",
  gap: "15px"
 }));
 export const TabImageStyle = styled("img")(({ theme }) => ({
  width: "30%",
  height: "100%"
 }));
--- a/src/components/common/TabImageList/TabImageList.tsx
+++ b/src/components/common/TabImageList/TabImageList.tsx
@ -0,0 +1,65 @@
 import { useState } from "react";
 import {
  TabImageContainer,
  TabImageListStyle,
  TabImageStyle
 } from "./TabImageList-styles";
 import { Box } from "@mui/material";
 import CSS from "csstype";
 export interface TabImageListProps {
  divStyle?: CSS.Properties;
  imgStyle?: CSS.Properties;
  images: string[] | undefined;
 }
 const TabImageList = ({
  divStyle = {},
  imgStyle = {},
  images
 }: TabImageListProps) => {
  if (images) {
    const [mainImage, setMainImage] = useState<string>(images[0]);
    const [imageFocusedIndex, setImageFocusedIndex] = useState<number>(0);
    const imageTabOutlineStyle = {
      outline: "4px solid #03A9F4"
    };
    const switchMainImage = (index: number) => {
      setMainImage(images[index]);
      setImageFocusedIndex(index);
    };
    const imageRow =
      images.length > 1 ? (
        images.map((image, index) => (
          <TabImageStyle
            style={imageFocusedIndex === index ? imageTabOutlineStyle : {}}
            src={image}
            alt={`Image #${index}`}
            onClick={() => switchMainImage(index)}
            key={image + index.toString()}
          />
        ))
      ) : (
        <div />
      );
    const defaultStyle = { width: "100%" };
    return (
      <TabImageListStyle>
        <Box style={{ ...defaultStyle, ...divStyle }}>
          <img
            style={{ width: "100%", aspectRatio: "1", ...imgStyle }}
            src={mainImage}
            alt="No product image found"
          />
        </Box>
        <TabImageContainer>{imageRow}</TabImageContainer>
      </TabImageListStyle>
    );
  } else {
    return <div />;
  }
 };
 export default TabImageList;
--- a/src/components/common/VideoContent.tsx
+++ b/src/components/common/VideoContent.tsx
@ -0,0 +1,51 @@
 import React from 'react'
 import { Box, Typography } from '@mui/material'
 import { styled } from '@mui/system'
 import { Description, Movie } from '@mui/icons-material'
 interface VideoProps {
  title: string
  description: string
 }
 const StyledBox = styled(Box)`
  margin: 20px 0px;
  display: flex;
  align-items: center;
 `
 const Title = styled(Typography)``
 const DescriptionIcon = styled(Description)`
  color: #666;
  margin-right: 0.5rem;
 `
 const MovieIcon = styled(Movie)`
  color: #666;
  margin-right: 0.5rem;
 `
 export const VideoContent: React.FC<VideoProps> = ({ title, description }) => {
  return (
    <StyledBox>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start'
        }}
      >
        <Box display="flex" alignItems="center">
          <MovieIcon />
          <Title variant="h4">{title}</Title>
        </Box>
        <Box display="flex" alignItems="center">
          <DescriptionIcon />
          <Typography variant="body1">{description}</Typography>
        </Box>
      </Box>
    </StyledBox>
  )
 }
--- a/src/components/common/VideoPublishModal.tsx
+++ b/src/components/common/VideoPublishModal.tsx
@ -0,0 +1,286 @@
 import React, { useState } from "react";
 import {
  Box,
  Button,
  Modal,
  TextField,
  Typography,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  SelectChangeEvent,
  OutlinedInput,
  Chip,
  IconButton
 } from "@mui/material";
 import { styled } from "@mui/system";
 import { useDropzone } from "react-dropzone";
 import { usePublishVideo } from "./PublishVideo";
 import AddIcon from "@mui/icons-material/Add";
 import CloseIcon from "@mui/icons-material/Close";
 const StyledModal = styled(Modal)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "center"
 }));
 const ChipContainer = styled(Box)({
  display: "flex",
  flexWrap: "wrap",
  "& > *": {
    margin: "4px"
  }
 });
 const ModalContent = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  padding: theme.spacing(4),
  borderRadius: theme.spacing(1),
  width: "40%",
  "&:focus": {
    outline: "none"
  }
 }));
 interface VideoModalProps {
  open: boolean;
  onClose: () => void;
  onPublish: (value: any) => void;
  editVideoIdentifier?: string | null | undefined;
 }
 interface SelectOption {
  id: string;
  name: string;
 }
 const VideoModal: React.FC<VideoModalProps> = ({
  open,
  onClose,
  onPublish,
  editVideoIdentifier
 }) => {
  const [file, setFile] = useState<File | null>(null);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [selectedOption, setSelectedOption] = useState<SelectOption | null>(
    null
  );
  const [inputValue, setInputValue] = useState<string>("");
  const [chips, setChips] = useState<string[]>([]);
  const [options, setOptions] = useState<SelectOption[]>([]);
  const [tags, setTags] = useState<string[]>([]);
  const { publishVideo } = usePublishVideo();
  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      "video/*": []
    },
    maxFiles: 1,
    onDrop: (acceptedFiles) => {
      setFile(acceptedFiles[0]);
    }
  });
  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(event.target.value);
  };
  const handleDescriptionChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setDescription(event.target.value);
  };
  const handleOptionChange = (event: SelectChangeEvent<string>) => {
    const optionId = event.target.value;
    const selectedOption = options.find((option) => option.id === optionId);
    setSelectedOption(selectedOption || null);
  };
  const handleChipDelete = (index: number) => {
    const newChips = [...chips];
    newChips.splice(index, 1);
    setChips(newChips);
  };
  const handleSubmit = async () => {
    const missingFields = [];
    if (!title) missingFields.push("title");
    if (!file) missingFields.push("file");
    if (missingFields.length > 0) {
      const missingFieldsString = missingFields.join(", ");
      const errMsg = `Missing: ${missingFieldsString}`;
      return;
    }
    if (!file) return;
    const formattedTags: { [key: string]: string } = {};
    chips.forEach((tag, i) => {
      formattedTags[`tag${i + 1}`] = tag;
    });
    try {
      // const base64 = await toBase64(file)
      // if (typeof base64 !== 'string') return
      // const base64String = base64.split(',')[1]
      // if (!file) return
      const res = await publishVideo({
        file: file,
        editVideoIdentifier,
        title,
        description,
        category: selectedOption?.id || "",
        ...formattedTags
      });
      onPublish(res);
      setFile(null);
      setTitle("");
      setDescription("");
      onClose();
    } catch (error) {}
  };
  const handleInputChange = (event: any) => {
    setInputValue(event.target.value);
  };
  const handleInputKeyDown = (event: any) => {
    if (event.key === "Enter" && inputValue !== "") {
      if (chips.length < 5) {
        setChips([...chips, inputValue]);
        setInputValue("");
      } else {
        event.preventDefault();
      }
    }
  };
  const addChip = () => {
    if (chips.length < 5) {
      setChips([...chips, inputValue]);
      setInputValue("");
    }
  };
  const getListCategories = React.useCallback(async () => {
    try {
      const url = `/arbitrary/categories`;
      const response = await fetch(url, {
        method: "GET",
        headers: {
          "Content-Type": "application/json"
        }
      });
      const responseData = await response.json();
      setOptions(responseData);
    } catch (error) {}
  }, []);
  React.useEffect(() => {
    getListCategories();
  }, [getListCategories]);
  return (
    <StyledModal open={open} onClose={onClose}>
      <ModalContent>
        {editVideoIdentifier && (
          <Typography variant="h6">
            You are editing: {editVideoIdentifier}
          </Typography>
        )}
        <Typography variant="h6" component="h2" gutterBottom>
          Upload Video
        </Typography>
        <Box
          {...getRootProps()}
          sx={{
            border: "1px dashed gray",
            padding: 2,
            textAlign: "center",
            marginBottom: 2
          }}
        >
          <input {...getInputProps()} />
          <Typography>
            {file
              ? file.name
              : "Drag and drop a video file here or click to select a file"}
          </Typography>
        </Box>
        <TextField
          label="Video Title"
          variant="outlined"
          fullWidth
          value={title}
          onChange={handleTitleChange}
          inputProps={{ maxLength: 40 }}
          sx={{ marginBottom: 2 }}
        />
        <TextField
          label="Video Description"
          variant="outlined"
          fullWidth
          multiline
          rows={4}
          value={description}
          onChange={handleDescriptionChange}
          inputProps={{ maxLength: 180 }}
          sx={{ marginBottom: 2 }}
        />
        {options.length > 0 && (
          <FormControl fullWidth sx={{ marginBottom: 2 }}>
            <InputLabel id="Category">Select a Category</InputLabel>
            <Select
              labelId="Category"
              input={<OutlinedInput label="Select a Category" />}
              value={selectedOption?.id || ""}
              onChange={handleOptionChange}
            >
              {options.map((option) => (
                <MenuItem key={option.id} value={option.id}>
                  {option.name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        )}
        <FormControl fullWidth sx={{ marginBottom: 2 }}>
          <Box sx={{ display: "flex", alignItems: "flex-end" }}>
            <TextField
              label="Add a tag"
              value={inputValue}
              onChange={handleInputChange}
              onKeyDown={handleInputKeyDown}
              disabled={chips.length === 3}
            />
            <IconButton onClick={addChip} disabled={chips.length === 3}>
              <AddIcon />
            </IconButton>
          </Box>
          <ChipContainer>
            {chips.map((chip, index) => (
              <Chip
                key={index}
                label={chip}
                onDelete={() => handleChipDelete(index)}
                deleteIcon={<CloseIcon />}
              />
            ))}
          </ChipContainer>
        </FormControl>
        <Button variant="contained" color="primary" onClick={handleSubmit}>
          Submit
        </Button>
      </ModalContent>
    </StyledModal>
  );
 };
 export default VideoModal;
--- a/src/components/editor/BlogEditor.css
+++ b/src/components/editor/BlogEditor.css
@ -0,0 +1,78 @@
 /* src/components/BlogEditor.css */
 .blog-editor {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
    line-height: 1.5;
    font-size: 18px;
    max-height: 50vh;
    overflow-y: auto;
    min-height: 200px;
    z-index: 500;
  }
  .toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
  .toolbar-button:focus {
    outline: none;
  }
  .code-block {
    background-color: #2c2b31;
    color: rgb(238, 234, 234);
    border-radius: 3px;
    padding: 10px;
    margin: 10px 0;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    overflow-x: auto;
    max-width: 100%;
    font-size: 14px;
  }
  .paragraph {
    font-size: 20px;
    margin: 0px;
  }
  .paragraph-mail {
    font-size: 16px;
    margin: 0px;
  }
  .toolbar-button {
    background-color: white;
    border: 1px solid gray;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer;
    outline: none;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .toolbar-button.active {
    background-color: lightgray;
  }
  .h2 {
    font-size: 25px
  }
  .h2 {
    font-size: 22px
  }
  .align-center {
    text-align: center;
  }
--- a/src/components/editor/BlogEditor.tsx
+++ b/src/components/editor/BlogEditor.tsx
@ -0,0 +1,574 @@
 // src/components/BlogEditor.tsx
 // @ts-nocheck
 import React, { useMemo, useState, useCallback } from 'react';
 import { createEditor, Descendant, Editor, Transforms, Range } from 'slate'
 import SvgIcon from '@material-ui/core/SvgIcon'
 import {
  Slate,
  Editable,
  withReact,
  RenderElementProps,
  RenderLeafProps,
  useSlate
 } from 'slate-react'
 import { styled } from '@mui/system'
 import { CustomElement, CustomText, FormatMark } from './customTypes'
 import './BlogEditor.css'
 import { Modal, Box, TextField, Button } from '@mui/material'
 import { AlignCenterSVG } from '../../assets/svgs/AlignCenterSVG'
 import { BoldSVG } from '../../assets/svgs/BoldSVG'
 import { ItalicSVG } from '../../assets/svgs/ItalicSVG'
 import { UnderlineSVG } from '../../assets/svgs/UnderlineSVG'
 import { H2SVG } from '../../assets/svgs/H2SVG'
 import { H3SVG } from '../../assets/svgs/H3SVG'
 import { AlignLeftSVG } from '../../assets/svgs/AlignLeftSVG'
 import { AlignRightSVG } from '../../assets/svgs/AlignRightSVG'
 import { CodeBlockSVG } from '../../assets/svgs/CodeBlockSVG'
 import { LinkSVG } from '../../assets/svgs/LinkSVG'
 const initialValue: Descendant[] = [
  {
    type: 'paragraph',
    children: [{ text: 'Start writing your blog post...' }]
  }
 ]
 interface MyComponentProps {
  addPostSection?: (value: any) => void
  editPostSection?: (value: any, section: any) => void
  defaultValue?: any
  section?: any
  value: any
  setValue: (value: any) => void
  editorKey?: number
  mode?: string
 }
 const ModalBox = styled(Box)(({ theme }) => ({
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  backgroundColor: theme.palette.background.paper,
  boxShadow: theme.shadows[5],
  padding: theme.spacing(2, 4, 3),
  gap: '15px',
  borderRadius: '5px',
  alignItems: 'center',
  display: 'flex',
  flex: 0
 }))
 const BlogEditor: React.FC<MyComponentProps> = ({
  addPostSection,
  editPostSection,
  defaultValue,
  section,
  value,
  setValue,
  editorKey,
  mode
 }) => {
  const editor = useMemo(() => withReact(createEditor()), [])
  // const [value, setValue] = useState(defaultValue || initialValue);
  const isTextAlignmentActive = (editor: Editor, alignment: string) => {
    const [match] = Editor.nodes(editor, {
      match: (n) => {
        return n?.textAlign === alignment?.replace(/^align-/, '')
      }
    })
    return !!match
  }
  const toggleTextAlignment = (editor: Editor, alignment: string) => {
    const isActive = isTextAlignmentActive(editor, alignment)
    Transforms.setNodes(
      editor,
      { style: { textAlign: isActive ? 'inherit' : alignment } },
      { match: (n) => Editor.isBlock(editor, n) }
    )
  }
  const toggleMark = (editor: Editor, format: FormatMark) => {
    if (
      format === 'align-left' ||
      format === 'align-center' ||
      format === 'align-right'
    ) {
      toggleTextAlignment(editor, format)
    } else {
      const isActive = Editor?.marks(editor)?.[format] === true
      if (isActive) {
        Editor?.removeMark(editor, format)
      } else {
        Editor?.addMark(editor, format, true)
      }
    }
  }
  const newValue = useMemo(() => [...(value || initialValue)], [value])
  const types = ['paragraph', 'heading-2', 'heading-3']
  const setTextAlignment = (editor, alignment) => {
    const isActive = isTextAlignmentActive(editor, alignment)
    const alignmentType = ''
    Transforms?.setNodes(
      editor,
      {
        textAlign: isActive ? null : alignment
      },
      {
        match: (n) =>
          n.type === 'heading-2' ||
          n.type === 'heading-3' ||
          n.type === 'paragraph'
      }
    )
  }
  const ToolbarButton: React.FC<{
    format: FormatMark | string
    label: string
    editor: Editor
    children: React.ReactNode
  }> = ({ format, label, editor, children }) => {
    useSlate()
    let onClick = () => {
      if (format === 'heading-2' || format === 'heading-3') {
        toggleBlock(editor, format)
      } else if (
        format === 'bold' ||
        format === 'italic' ||
        format === 'underline' ||
        format === ''
      ) {
        toggleMark(editor, format)
      } else if (
        format === 'align-left' ||
        format === 'align-center' ||
        format === 'align-right'
      ) {
        setTextAlignment(editor, format?.replace(/^align-/, ''))
      }
    }
    let isActive = false
    try {
      if (
        format === 'align-left' ||
        format === 'align-center' ||
        format === 'align-right'
      ) {
        isActive = isTextAlignmentActive(editor, format)
      } else if (format === 'heading-2' || format === 'heading-3') {
        isActive = isBlockActive(editor, format)
      } else if (
        format === 'bold' ||
        format === 'italic' ||
        format === 'underline' ||
        format === ''
      ) {
        isActive = Editor?.marks(editor)?.[format] === true
      }
    } catch (error) {}
    return (
      <button
        className={`toolbar-button ${isActive ? 'active' : ''}`}
        onMouseDown={(event) => {
          event.preventDefault()
          onClick()
        }}
      >
        {children ? children : label}
      </button>
    )
  }
  const ToolbarButtonCodeBlock: React.FC<{
    format: FormatMark | string
    label: string
    editor: Editor
    children: React.ReactNode
  }> = ({ format, label, editor, children }) => {
    const editor2 = useSlate()
    let onClick = () => {
      if (format === 'code-block') {
        toggleBlock(editor, 'code-block')
      }
    }
    let isActive = false
    try {
      if (format === 'code-block') {
        isActive = isBlockActive(editor, format)
      }
    } catch (error) {}
    return (
      <button
        className={`toolbar-button ${isActive ? 'active' : ''}`}
        onMouseDown={(event) => {
          event.preventDefault()
          onClick()
        }}
      >
        {children ? children : label}
      </button>
    )
  }
  const ToolbarButtonAlign: React.FC<{
    format: string
    label: string
    editor: Editor
  }> = ({ format, label, editor }) => {
    const isActive =
      Editor?.nodes(editor, {
        match: (n) => n?.align === format
      })?.length > 0
    return (
      <button
        className={`toolbar-button ${isActive ? 'active' : ''}`}
        onMouseDown={(event) => {
          event.preventDefault()
          Transforms?.setNodes(
            editor,
            { align: format },
            { match: (n) => Editor?.isBlock(editor, n) }
          )
        }}
      >
        {label}
      </button>
    )
  }
  const ToolbarButtonCodeLink: React.FC<{
    format: FormatMark | string
    label: string
    editor: Editor
    children: React.ReactNode
  }> = ({ format, label, editor, children }) => {
    useSlate()
    let isActive = false
    try {
      if (format === 'link') {
        isActive = !!Editor?.marks(editor)?.link
      }
    } catch (error) {}
    return (
      <button
        className={`toolbar-button ${isActive ? 'active' : ''}`}
        onMouseDown={(event) => {
          event.preventDefault()
          const isActive2 = !!Editor?.marks(editor)?.link
          if (isActive2) {
            Editor?.removeMark(editor, 'link')
            return
          }
          // const url = window.prompt('Enter the URL of the link:')
          setOpen(true)
        }}
      >
        {children ? children : label}
      </button>
    )
  }
  // Create a toggleBlock function and an isBlockActive function to handle block elements
  const toggleBlock = (editor: Editor, format: string) => {
    const isActive = isBlockActive(editor, format)
    Transforms?.unwrapNodes(editor, {
      match: (n) => Editor?.isBlock(editor, n),
      split: true
    })
    if (isActive) {
      Transforms?.setNodes(editor, { type: 'paragraph' })
    } else {
      Transforms?.setNodes(editor, { type: format })
    }
  }
  const isBlockActive = (editor: Editor, format: string) => {
    const [match] = Editor?.nodes(editor, {
      match: (n) => n?.type === format
    })
    return !!match
  }
  const handleKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === 'Enter' && isBlockActive(editor, 'code-block')) {
      event.preventDefault()
      editor?.insertText('\n')
    }
    if (event.key === 'ArrowDown' && isBlockActive(editor, 'code-block')) {
      event.preventDefault()
      Transforms?.insertNodes(editor, {
        type: 'paragraph',
        children: [{ text: '' }]
      })
    }
  }
  const handleChange = (newValue: Descendant[]) => {
    setValue(newValue)
  }
  const toggleLink = (editor: Editor, url: string) => {
    const { selection } = editor
    if (selection && !Range.isCollapsed(selection)) {
      const isLink = Editor?.marks(editor)?.link === true
      const isInsideLink = isLinkActive(editor)
      if (isLink) {
        Editor?.removeMark(editor, 'link')
      } else if (url) {
        Editor?.addMark(editor, 'link', url)
      }
    }
  }
  const [open, setOpen] = useState(false)
  const initialValue = 'qortal://'
  const [inputValue, setInputValue] = useState(initialValue)
  const handleChangeLink = (event) => {
    const newValue = event?.target?.value
    if (newValue?.startsWith(initialValue)) {
      setInputValue(newValue)
    }
  }
  const isLinkActive = (editor: Editor) => {
    const [link] = Editor?.nodes(editor, {
      match: (n) => n?.type === 'link'
    })
    return !!link
  }
  const handleSaveClick = () => {
    const marks = Editor?.marks(editor)
    const isLink = marks?.link === true
    if (isLink) {
      Editor?.removeMark(editor, 'link')
      return // Return early to skip the rest of the function
    }
    toggleLink(editor, inputValue)
    setOpen(false)
  }
  const onClose = () => {
    setOpen(false)
  }
  const handlePaste = (event: React.ClipboardEvent) => {
    event.preventDefault()
    const text = event?.clipboardData?.getData('text/plain')
    const isCodeBlock = isBlockActive(editor, 'code-block')
    if (isCodeBlock) {
      const lines = text?.split('\n')
      const fragment: Descendant[] = [
        {
          type: 'code-block',
          children: lines?.map((line) => ({
            type: 'code-line',
            children: [{ text: line }]
          }))
        }
      ]
      Transforms?.insertFragment(editor, fragment)
    } else if (text) {
      const fragment = text?.split('\n').map((line) => ({
        type: 'paragraph',
        children: [{ text: line }]
      }))
      Transforms?.insertFragment(editor, fragment)
    }
  }
  return (
    <Box
      sx={{
        width: '100%',
        border: '1px solid',
        borderRadius: '5px',
        marginTop: '20px',
        padding: '10px'
      }}
    >
      <Slate
        editor={editor}
        value={newValue}
        onChange={(newValue) => handleChange(newValue)}
        key={editorKey || 1}
      >
        <div className="toolbar">
          <ToolbarButton format="bold" label="B" editor={editor}>
            <BoldSVG height="24px" width="auto" />
          </ToolbarButton>
          <ToolbarButton format="italic" label="I" editor={editor}>
            <ItalicSVG height="24px" width="auto" />
          </ToolbarButton>
          <ToolbarButton format="underline" label="U" editor={editor}>
            <UnderlineSVG height="24px" width="auto" />
          </ToolbarButton>
          <ToolbarButton format="heading-2" label="H2" editor={editor}>
            <H2SVG height="24px" width="auto" />
          </ToolbarButton>
          <ToolbarButton format="heading-3" label="H3" editor={editor}>
            <H3SVG height="24px" width="auto" />
          </ToolbarButton>
          <ToolbarButton format="align-left" label="L" editor={editor}>
            <AlignLeftSVG height="24px" width="auto" />
          </ToolbarButton>
          <ToolbarButton format="align-center" label="C" editor={editor}>
            <AlignCenterSVG height="24px" width="auto" />
          </ToolbarButton>
          <ToolbarButton format="align-right" label="R" editor={editor}>
            <AlignRightSVG height="24px" width="auto" />
          </ToolbarButton>
          <ToolbarButtonCodeBlock
            format="code-block"
            label="Code"
            editor={editor}
          >
            <CodeBlockSVG height="24px" width="auto" />
          </ToolbarButtonCodeBlock>
          <ToolbarButtonCodeLink format="link" label="Link" editor={editor}>
            <LinkSVG height="24px" width="auto" />
          </ToolbarButtonCodeLink>
        </div>
        <Editable
          className="blog-editor"
          renderElement={(props) => renderElement({ ...props, mode })}
          renderLeaf={renderLeaf}
          onKeyDown={handleKeyDown}
          onPaste={handlePaste}
          mode={mode}
        />
      </Slate>
      <Modal open={open} onClose={onClose}>
        <ModalBox>
          <TextField
            label="Link"
            value={inputValue}
            onChange={handleChangeLink}
          />
          <Button variant="contained" onClick={handleSaveClick}>
            Save
          </Button>
        </ModalBox>
      </Modal>
      {editPostSection && (
        <Button onClick={() => editPostSection(value, section)}>
          Edit Section
        </Button>
      )}
    </Box>
  )
 }
 export default BlogEditor
 type ExtendedRenderElementProps = RenderElementProps & { mode?: string }
 export const renderElement = ({
  attributes,
  children,
  element,
  mode
 }: ExtendedRenderElementProps) => {
  switch (element.type) {
    case 'block-quote':
      return <blockquote {...attributes}>{children}</blockquote>
    case 'heading-2':
      return (
        <h2
          className="h2"
          {...attributes}
          style={{ textAlign: element.textAlign }}
        >
          {children}
        </h2>
      )
    case 'heading-3':
      return (
        <h3
          className="h3"
          {...attributes}
          style={{ textAlign: element.textAlign }}
        >
          {children}
        </h3>
      )
    case 'code-block':
      return (
        <pre {...attributes} className="code-block">
          <code>{children}</code>
        </pre>
      )
    case 'code-line':
      return <div {...attributes}>{children}</div>
    case 'link':
      return (
        <a href={element.url} {...attributes}>
          {children}
        </a>
      )
    default:
      return (
        <p
          className={`paragraph${mode ? `-${mode}` : ''}`}
          {...attributes}
          style={{ textAlign: element.textAlign }}
        >
          {children}
        </p>
      )
  }
 }
 export const renderLeaf = ({ attributes, children, leaf }: RenderLeafProps) => {
  let el = children
  if (leaf.bold) {
    el = <strong>{el}</strong>
  }
  if (leaf.italic) {
    el = <em>{el}</em>
  }
  if (leaf.underline) {
    el = <u>{el}</u>
  }
  if (leaf.link) {
    el = (
      <a href={leaf.link} {...attributes}>
        {el}
      </a>
    )
  }
  return <span {...attributes}>{el}</span>
 }
--- a/src/components/editor/ReadOnlySlate.tsx
+++ b/src/components/editor/ReadOnlySlate.tsx
@ -0,0 +1,25 @@
 import React, { useMemo } from 'react';
 import { createEditor, Descendant, Editor } from 'slate';
 import { withReact, Slate, Editable, RenderElementProps, RenderLeafProps  } from 'slate-react';
 import { renderElement, renderLeaf } from './BlogEditor';
 interface ReadOnlySlateProps {
  content: any
  mode?: string
 }
 const ReadOnlySlate: React.FC<ReadOnlySlateProps> = ({ content, mode }) => {
  const editor = useMemo(() => withReact(createEditor()), [])
  const value = useMemo(() => content, [content])
  return (
    <Slate editor={editor} value={value} onChange={() => {}}>
      <Editable
        readOnly
        renderElement={(props) => renderElement({ ...props, mode })}
        renderLeaf={renderLeaf}
      />
    </Slate>
  )
 }
 export default ReadOnlySlate;
--- a/src/components/editor/customTypes.ts
+++ b/src/components/editor/customTypes.ts
@ -0,0 +1,47 @@
 // src/customTypes.ts
 import { BaseEditor } from 'slate';
 import { ReactEditor } from 'slate-react';
 export type CustomText = {
  text: string
  bold?: boolean
  italic?: boolean
  underline?: boolean
  code?: boolean
 }
 export type HeadingElement = {
  type: 'heading'
  children: CustomText[]
 }
 export type BlockQuoteElement = {
  type: 'block-quote'
  children: CustomText[]
 }
 export type ParagraphElement = {
  type: 'paragraph'
  children: CustomText[]
 }
 export type CodeBlockElement = {
  type: 'code-block'
  children: CustomText[]
 }
 export type CustomElement =
  | HeadingElement
  | BlockQuoteElement
  | ParagraphElement
  | CodeBlockElement
 export type FormatMark = 'bold' | 'italic' | 'underline' | 'code'
 declare module 'slate' {
  interface CustomTypes {
    Editor: BaseEditor & ReactEditor;
    Element: CustomElement;
    Text: CustomText;
  }
 }
--- a/src/components/layout/Navbar/Navbar-styles.tsx
+++ b/src/components/layout/Navbar/Navbar-styles.tsx
@ -0,0 +1,211 @@
 import { AppBar, Button, Typography, Box, Popover } from "@mui/material";
 import { styled } from "@mui/system";
 import { LightModeSVG } from "../../../assets/svgs/LightModeSVG";
 import { DarkModeSVG } from "../../../assets/svgs/DarkModeSVG";
 import { StorefrontSVG } from "../../../assets/svgs/StorefrontSVG";
 import { CartSVG } from "../../../assets/svgs/CartSVG";
 export const CustomAppBar = styled(AppBar)(({ theme }) => ({
  display: "flex",
  flexDirection: "row",
  justifyContent: "space-between",
  alignItems: "center",
  width: "100%",
  padding: "5px 16px",
  backgroundImage: "none",
  borderBottom: `1px solid ${theme.palette.primary.light}`,
  backgroundColor: theme.palette.background.default,
  [theme.breakpoints.only("xs")]: {
    gap: "15px"
  }
 }));
 export const QShopLogoContainer = styled("img")({
  width: "12%",
  minWidth: "50px",
  height: "auto",
  padding: "2px 0",
  userSelect: "none",
  objectFit: "contain",
  cursor: "pointer"
 });
 export const CustomTitle = styled(Typography)({
  fontWeight: 600,
  color: "#000000"
 });
 export const StoreManagerIcon = styled(StorefrontSVG)(({ theme }) => ({
  cursor: "pointer",
  "&:hover": {
    filter:
      theme.palette.mode === "dark"
        ? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
        : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))"
  }
 }));
 export const CartIcon = styled(CartSVG)(({ theme }) => ({
  cursor: "pointer",
  "&:hover": {
    filter:
      theme.palette.mode === "dark"
        ? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
        : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))"
  }
 }));
 export const CreateBlogButton = styled(Button)(({ theme }) => ({
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  padding: "8px 15px",
  borderRadius: "40px",
  gap: "4px",
  backgroundColor: theme.palette.secondary.main,
  color: "#fff",
  fontFamily: "Raleway",
  transition: "all 0.3s ease-in-out",
  boxShadow: "none",
  "&:hover": {
    cursor: "pointer",
    boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;",
    backgroundColor: theme.palette.secondary.main,
    filter: "brightness(1.1)"
  }
 }));
 export const AuthenticateButton = styled(Button)(({ theme }) => ({
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  padding: "8px 15px",
  borderRadius: "40px",
  gap: "4px",
  backgroundColor: theme.palette.secondary.main,
  color: "#fff",
  fontFamily: "Raleway",
  transition: "all 0.3s ease-in-out",
  boxShadow: "none",
  "&:hover": {
    cursor: "pointer",
    boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;",
    backgroundColor: theme.palette.secondary.dark,
    filter: "brightness(1.1)"
  }
 }));
 export const AvatarContainer = styled(Box)({
  display: "flex",
  alignItems: "center",
  "&:hover": {
    cursor: "pointer",
    "& #expand-icon": {
      transition: "all 0.3s ease-in-out",
      filter: "brightness(0.7)"
    }
  }
 });
 export const DropdownContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  gap: "5px",
  backgroundColor: theme.palette.background.paper,
  padding: "10px 15px",
  transition: "all 0.4s ease-in-out",
  "&:hover": {
    cursor: "pointer",
    filter:
      theme.palette.mode === "light" ? "brightness(0.95)" : "brightness(1.7)"
  }
 }));
 export const DropdownText = styled(Typography)(({ theme }) => ({
  fontFamily: "Raleway",
  fontSize: "16px",
  color: theme.palette.text.primary,
  userSelect: "none"
 }));
 export const NavbarName = styled(Typography)(({ theme }) => ({
  fontFamily: "Raleway",
  fontSize: "18px",
  color: theme.palette.text.primary,
  margin: "0 10px"
 }));
 export const ThemeSelectRow = styled(Box)({
  display: "flex",
  alignItems: "center",
  gap: "5px",
  flexBasis: 0
 });
 export const LightModeIcon = styled(LightModeSVG)(({ theme }) => ({
  transition: "all 0.1s ease-in-out",
  "&:hover": {
    cursor: "pointer",
    filter:
      theme.palette.mode === "dark"
        ? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
        : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))"
  }
 }));
 export const DarkModeIcon = styled(DarkModeSVG)(({ theme }) => ({
  transition: "all 0.1s ease-in-out",
  "&:hover": {
    cursor: "pointer",
    filter:
      theme.palette.mode === "dark"
        ? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
        : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))"
  }
 }));
 export const StoresButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.main,
  textTransform: "none",
  fontFamily: "Raleway",
  gap: "5px",
  fontSize: "17px",
  borderRadius: "5px",
  border: "none",
  color: theme.palette.text.primary,
  padding: "2px 15px",
  transition: "all 0.3s ease-in-out",
  boxShadow:
    "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;",
  "&:hover": {
    cursor: "pointer",
    backgroundColor: theme.palette.secondary.dark,
    boxShadow:
      "rgba(50, 50, 93, 0.35) 0px 3px 5px -1px, rgba(0, 0, 0, 0.4) 0px 2px 3px -1px;"
  }
 }));
 export const CustomPopover = styled(Popover)(({ theme }) => ({
  maxHeight: "400px",
  overflowY: "auto",
  "&::-webkit-scrollbar-track": {
    backgroundColor: "transparent"
  },
  "&::-webkit-scrollbar-track:hover": {
    backgroundColor: "transparent"
  },
  "&::-webkit-scrollbar": {
    width: "8px",
    height: "10px",
    backgroundColor: "transparent"
  },
  "&::-webkit-scrollbar-thumb": {
    backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#414763",
    borderRadius: "8px",
    backgroundClip: "content-box",
    border: "4px solid transparent"
  },
  "&::-webkit-scrollbar-thumb:hover": {
    backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#40455f"
  }
 }));
--- a/src/components/layout/Navbar/Navbar.tsx
+++ b/src/components/layout/Navbar/Navbar.tsx
@ -0,0 +1,288 @@
 import React, { useRef, useState } from "react";
 import { RootState } from "../../../state/store";
 import { useSelector } from "react-redux";
 import { Box, Popover, useTheme } from "@mui/material";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 import { useNavigate } from "react-router-dom";
 import {
  resetProducts,
  toggleCreateStoreModal
 } from "../../../state/features/globalSlice";
 import { useDispatch } from "react-redux";
 import { BlockedNamesModal } from "../../common/BlockedNamesModal/BlockedNamesModal";
 import EmailIcon from "@mui/icons-material/Email";
 import {
  AvatarContainer,
  CustomAppBar,
  DropdownContainer,
  DropdownText,
  AuthenticateButton,
  NavbarName,
  LightModeIcon,
  DarkModeIcon,
  ThemeSelectRow,
  QShopLogoContainer,
  StoreManagerIcon,
  StoresButton
 } from "./Navbar-styles";
 import { AccountCircleSVG } from "../../../assets/svgs/AccountCircleSVG";
 import QShopLogo from "../../../assets/img/QShopLogo.webp";
 import QShopLogoLight from "../../../assets/img/QShopLogoLight.webp";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import PersonOffIcon from "@mui/icons-material/PersonOff";
 import { Store } from "../../../state/features/storeSlice";
 import { OrdersSVG } from "../../../assets/svgs/OrdersSVG";
 import { resetOrders } from "../../../state/features/orderSlice";
 interface Props {
  isAuthenticated: boolean;
  userName: string | null;
  userAvatar: string;
  authenticate: () => void;
  hasAttemptedToFetchShopInitial: boolean;
  setTheme: (val: string) => void;
 }
 const NavBar: React.FC<Props> = ({
  isAuthenticated,
  userName,
  userAvatar,
  authenticate,
  hasAttemptedToFetchShopInitial,
  setTheme
 }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const theme = useTheme();
  // Get All My Stores from Redux To Display In Store Manager Dropdown
  const myStores = useSelector((state: RootState) => state.store.myStores);
  const hashMapStores = useSelector(
    (state: RootState) => state.store.hashMapStores
  );
  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
  const [isOpenBlockedNamesModal, setIsOpenBlockedNamesModal] =
    useState<boolean>(false);
  const [openStoreManagerDropdown, setOpenStoreManagerDropdown] =
    useState<boolean>(false);
  const [openUserDropdown, setOpenUserDropdown] = useState<boolean>(false);
  const searchValRef = useRef("");
  const inputRef = useRef<HTMLInputElement>(null);
  const handleClick = (event?: React.MouseEvent<HTMLDivElement>) => {
    const target = event?.currentTarget as unknown as HTMLButtonElement | null;
    setAnchorEl(target);
  };
  const handleCloseUserDropdown = () => {
    setAnchorEl(null);
    setOpenUserDropdown(false);
  };
  const handleCloseStoreDropdown = () => {
    setAnchorEl(null);
    setOpenStoreManagerDropdown(false);
  };
  const onCloseBlockedNames = () => {
    setIsOpenBlockedNamesModal(false);
  };
  return (
    <CustomAppBar position="sticky" elevation={2}>
      <ThemeSelectRow>
        {theme.palette.mode === "dark" ? (
          <LightModeIcon
            onClickFunc={() => setTheme("light")}
            color="white"
            height="22"
            width="22"
          />
        ) : (
          <DarkModeIcon
            onClickFunc={() => setTheme("dark")}
            color="black"
            height="22"
            width="22"
          />
        )}
        <QShopLogoContainer
          src={theme.palette.mode === "dark" ? QShopLogoLight : QShopLogo}
          alt="QShop Logo"
          onClick={() => {
            navigate(`/`);
            searchValRef.current = "";
            if (!inputRef.current) return;
            inputRef.current.value = "";
          }}
        />
      </ThemeSelectRow>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: "10px"
        }}
      >
        {!isAuthenticated && (
          <AuthenticateButton onClick={authenticate}>
            <ExitToAppIcon />
            Authenticate
          </AuthenticateButton>
        )}
        {isAuthenticated && userName && hasAttemptedToFetchShopInitial && (
          <StoresButton
            onClick={(e: any) => {
              if (myStores.length > 0) {
                handleClick(e);
                setOpenStoreManagerDropdown(true);
              } else {
                dispatch(toggleCreateStoreModal(true));
              }
            }}
          >
            My Stores
            <StoreManagerIcon
              color={theme.palette.text.primary}
              height={"32"}
              width={"32"}
            />
          </StoresButton>
        )}
        {isAuthenticated && userName && (
          <>
            <AvatarContainer
              onClick={(e: any) => {
                handleClick(e);
                setOpenUserDropdown(true);
              }}
            >
              <NavbarName>{userName}</NavbarName>
              {!userAvatar ? (
                <AccountCircleSVG
                  color={theme.palette.text.primary}
                  width="32"
                  height="32"
                />
              ) : (
                <img
                  src={userAvatar}
                  alt="User Avatar"
                  width="32"
                  height="32"
                  style={{
                    borderRadius: "50%"
                  }}
                />
              )}
              <ExpandMoreIcon id="expand-icon" sx={{ color: "#ACB6BF" }} />
            </AvatarContainer>
          </>
        )}
        <Popover
          id={"store-manager-popover"}
          open={openStoreManagerDropdown}
          anchorEl={anchorEl}
          onClose={handleCloseStoreDropdown}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
        >
          <DropdownContainer>
            <DropdownText
              onClick={() => {
                dispatch(toggleCreateStoreModal(true));
                handleCloseStoreDropdown();
              }}
            >
              Create Store
            </DropdownText>
          </DropdownContainer>
          {myStores.length > 0 &&
            myStores.map((store: Store) => (
              <DropdownContainer key={store.id}>
                <DropdownText
                  onClick={() => {
                    dispatch(resetOrders());
                    dispatch(resetProducts());
                    navigate(`/${userName}/${store.id}`);
                    handleCloseStoreDropdown();
                  }}
                >
                  {hashMapStores[store.id]?.title}
                </DropdownText>
              </DropdownContainer>
            ))}
        </Popover>
        <Popover
          id={"user-popover"}
          open={openUserDropdown}
          anchorEl={anchorEl}
          onClose={handleCloseUserDropdown}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
        >
          <DropdownContainer
            onClick={() => {
              handleCloseUserDropdown();
              handleCloseStoreDropdown();
              navigate("/my-orders");
            }}
          >
            <OrdersSVG color={"#f9ff34"} height={"22"} width={"22"} />
            <DropdownText>My Orders</DropdownText>
          </DropdownContainer>
          <DropdownContainer
            onClick={() => {
              setIsOpenBlockedNamesModal(true);
              handleCloseUserDropdown();
              handleCloseStoreDropdown();
            }}
          >
            <PersonOffIcon
              sx={{
                color: "#e35050"
              }}
            />
            <DropdownText>Blocked Names</DropdownText>
          </DropdownContainer>
          <DropdownContainer>
            <a
              href="qortal://APP/Q-Mail"
              className="qortal-link"
              style={{
                width: "100%",
                display: "flex",
                gap: "5px",
                alignItems: "center",
                textDecoration: "none"
              }}
            >
              <EmailIcon
                sx={{
                  color: "#50e3c2"
                }}
              />
              <DropdownText>Q-Mail</DropdownText>
            </a>
          </DropdownContainer>
        </Popover>
        {isOpenBlockedNamesModal && (
          <BlockedNamesModal
            open={isOpenBlockedNamesModal}
            onClose={onCloseBlockedNames}
          />
        )}
      </Box>
    </CustomAppBar>
  );
 };
 export default NavBar;
--- a/src/components/modals/ConsentModal.tsx
+++ b/src/components/modals/ConsentModal.tsx
@ -0,0 +1,70 @@
 import * as React from "react";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import localForage from "localforage";
 import { useTheme } from "@mui/material";
 const generalLocal = localForage.createInstance({
  name: "q-blog-general"
 });
 export default function ConsentModal() {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const getIsConsented = React.useCallback(async () => {
    try {
      const hasConsented = await generalLocal.getItem("general-consent");
      if (hasConsented) return;
      setOpen(true);
      generalLocal.setItem("general-consent", true);
    } catch (error) {}
  }, []);
  React.useEffect(() => {
    getIsConsented();
  }, []);
  return (
    <div>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">Welcome</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            The Qortal community, along with its development team and the
            creators of this application, cannot be held accountable for any
            content published or displayed. Furthermore, they bear no
            responsibility for any data loss that may occur as a result of using
            this application.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            sx={{
              backgroundColor: theme.palette.primary.light,
              color: theme.palette.text.primary,
              fontFamily: "Raleway"
            }}
            onClick={handleClose}
            autoFocus
          >
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
 }
--- a/src/components/modals/CreateStoreModal-styles.tsx
+++ b/src/components/modals/CreateStoreModal-styles.tsx
@ -0,0 +1,197 @@
 import { styled } from "@mui/system";
 import { Box, Button, TextField, Theme, Typography } from "@mui/material";
 import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
 import { TimesSVG } from "../../assets/svgs/TimesSVG";
 import { NumericTextFieldQshop } from "../common/NumericTextFieldQshop";
 import { DownloadSVG } from "../../assets/svgs/DownloadSVG";
 export const ModalBody = styled(Box)(({ theme }) => ({
  position: "absolute",
  backgroundColor: theme.palette.background.default,
  borderRadius: "4px",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: "75%",
  padding: "15px 35px",
  display: "flex",
  flexDirection: "column",
  gap: "17px",
  overflowY: "auto",
  maxHeight: "95vh",
  boxShadow:
    theme.palette.mode === "dark"
      ? "0px 4px 5px 0px hsla(0,0%,0%,0.14),  0px 1px 10px 0px hsla(0,0%,0%,0.12),  0px 2px 4px -1px hsla(0,0%,0%,0.2)"
      : "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
  "&::-webkit-scrollbar-track": {
    backgroundColor: theme.palette.background.paper,
  },
  "&::-webkit-scrollbar-track:hover": {
    backgroundColor: theme.palette.background.paper,
  },
  "&::-webkit-scrollbar": {
    width: "16px",
    height: "10px",
    backgroundColor: theme.palette.mode === "light" ? "#f6f8fa" : "#292d3e",
  },
  "&::-webkit-scrollbar-thumb": {
    backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#575757",
    borderRadius: "8px",
    backgroundClip: "content-box",
    border: "4px solid transparent",
  },
  "&::-webkit-scrollbar-thumb:hover": {
    backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#474646",
  },
 }));
 export const ModalTitle = styled(Typography)(({ theme }) => ({
  fontWeight: 400,
  fontFamily: "Raleway",
  fontSize: "25px",
  userSelect: "none",
 }));
 export const StoreLogoPreview = styled("img")(({ theme }) => ({
  width: "100px",
  height: "100px",
  objectFit: "contain",
  userSelect: "none",
  borderRadius: "3px",
  marginBottom: "10px",
 }));
 export const AddLogoButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.main,
  color: "#fff",
  fontFamily: "Raleway",
  fontSize: "17px",
  padding: "5px 10px",
  borderRadius: "5px",
  gap: "5px",
  border: "none",
  transition: "all 0.3s ease-in-out",
  boxShadow:
    theme.palette.mode === "dark"
      ? "0px 4px 5px 0px hsla(0,0%,0%,0.14),  0px 1px 10px 0px hsla(0,0%,0%,0.12),  0px 2px 4px -1px hsla(0,0%,0%,0.2)"
      : "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
  marginBottom: "5px",
  "&:hover": {
    cursor: "pointer",
    boxShadow:
      theme.palette.mode === "dark"
        ? "0px 8px 10px 1px hsla(0,0%,0%,0.14), 0px 3px 14px 2px hsla(0,0%,0%,0.12), 0px 5px 5px -3px hsla(0,0%,0%,0.2)"
        : "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;",
    backgroundColor: theme.palette.secondary.dark,
  },
 }));
 export const LogoPreviewRow = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  gap: "10px",
 }));
 export const AddLogoIcon = styled(AddPhotoAlternateIcon)(({ theme }) => ({
  color: "#fff",
  height: "25px",
  width: "auto",
 }));
 export const TimesIcon = styled(TimesSVG)(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  borderRadius: "50%",
  padding: "5px",
  transition: "all 0.2s ease-in-out",
  "&:hover": {
    cursor: "pointer",
    scale: "1.1",
  },
 }));
 const customInputStyle = (theme: Theme) => {
  return {
    fontFamily: "Karla",
    fontSize: "18px",
    fontWeight: 300,
    color: theme.palette.text.primary,
    backgroundColor: theme.palette.background.default,
    borderColor: theme.palette.background.paper,
    "& label": {
      color: theme.palette.mode === "light" ? "#808183" : "#edeef0",
      fontFamily: "Karla",
      fontSize: "18px",
      letterSpacing: "0px",
    },
    "& label.Mui-focused": {
      color: theme.palette.mode === "light" ? "#A0AAB4" : "#d7d8da",
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        borderColor: "#E0E3E7",
      },
      "&:hover fieldset": {
        borderColor: "#B2BAC2",
      },
      "&.Mui-focused fieldset": {
        borderColor: "#6F7E8C",
      },
    },
    "& .MuiInputBase-root": {
      fontFamily: "Karla",
      fontSize: "18px",
      letterSpacing: "0px",
    },
    "& .MuiFilledInput-root:after": {
      borderBottomColor: theme.palette.secondary.main,
    },
  };
 };
 export const CustomInputField = styled(TextField)(({ theme }) =>
  customInputStyle(theme as Theme)
 );
 export const CustomNumberField = styled(NumericTextFieldQshop)(({ theme }) =>
  customInputStyle(theme as Theme)
 );
 export const ButtonRow = styled(Box)(({ theme }) => ({
  display: "flex",
  gap: "10px",
  justifyContent: "flex-end",
 }));
 export const CancelButton = styled(Button)(({ theme }) => ({
  fontFamily: "Raleway",
  fontSize: "15px",
 }));
 export const CreateButton = styled(Button)(({ theme }) => ({
  fontFamily: "Raleway",
  fontSize: "15px",
  backgroundColor: "#32d43a",
  color: "black",
  "&:hover": {
    cursor: "pointer",
    backgroundColor: "#2bb131",
  },
 }));
 export const WalletRow = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  gap: "10px",
 }));
 export const DownloadArrrWalletIcon = styled(DownloadSVG)(({ theme }) => ({
  padding: "5px 7px",
  borderRadius: "50%",
  backgroundColor: theme.palette.background.paper,
  "&:hover": {
    cursor: "pointer",
  },
 }));
--- a/src/components/modals/CreateStoreModal.tsx
+++ b/src/components/modals/CreateStoreModal.tsx
@ -0,0 +1,419 @@
 import { FC, ChangeEvent, useState, useEffect } from "react";
 import {
  Typography,
  Modal,
  FormControl,
  useTheme,
  IconButton,
  Zoom,
  Tooltip,
 } from "@mui/material";
 import { useDispatch } from "react-redux";
 import { setIsLoadingGlobal, toggleCreateStoreModal } from "../../state/features/globalSlice";
 import ImageUploader from "../common/ImageUploader";
 import {
  ModalTitle,
  StoreLogoPreview,
  AddLogoButton,
  AddLogoIcon,
  TimesIcon,
  LogoPreviewRow,
  CustomInputField,
  ModalBody,
  ButtonRow,
  CancelButton,
  CreateButton,
  WalletRow,
  DownloadArrrWalletIcon,
 } from "./CreateStoreModal-styles";
 import {
  FilterSelect,
  FilterSelectMenuItems,
  FiltersCheckbox,
  FiltersChip,
  FiltersOption,
 } from "../../pages/Store/Store/Store-styles";
 import { supportedCoinsArray } from "../../constants/supported-coins";
 import { QortalSVG } from "../../assets/svgs/QortalSVG";
 import { ARRRSVG } from "../../assets/svgs/ARRRSVG";
 import { setNotification } from "../../state/features/notificationsSlice";
 export interface ForeignCoins {
  [key: string]: string;
 }
 export interface onPublishParam {
  title: string;
  description: string;
  shipsTo: string;
  location: string;
  storeIdentifier: string;
  logo: string;
  foreignCoins: ForeignCoins;
  supportedCoins: string[];
 }
 interface CreateStoreModalProps {
  open: boolean;
  closeCreateStoreModal: boolean;
  setCloseCreateStoreModal: (val: boolean) => void;
  onPublish: (param: onPublishParam) => Promise<void>;
  username: string;
 }
 const CreateStoreModal: React.FC<CreateStoreModalProps> = ({
  open,
  closeCreateStoreModal,
  setCloseCreateStoreModal,
  onPublish,
  username,
 }) => {
  const dispatch = useDispatch();
  const theme = useTheme();
  const [title, setTitle] = useState<string>("");
  const [description, setDescription] = useState<string>("");
  const [location, setLocation] = useState<string>("");
  const [shipsTo, setShipsTo] = useState<string>("");
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [storeIdentifier, setStoreIdentifier] = useState("");
  const [logo, setLogo] = useState<string | null>(null);
  const [supportedCoinsSelected, setSupportedCoinsSelected] = useState<
    string[]
  >(["QORT"]);
  const [qortWalletAddress, setQortWalletAddress] = useState<string>("");
  const [arrrWalletAddress, setArrrWalletAddress] = useState<string>("");
  const handlePublish = async (): Promise<void> => {
    try {
      setErrorMessage("");
      if (!logo) {
        setErrorMessage("A logo is required");
        return;
      }
      const foreignCoins: ForeignCoins = {
        ARRR: arrrWalletAddress
      }
      supportedCoinsSelected.filter((coin)=> coin !== 'QORT').forEach((item: string)=> {
        if(!foreignCoins[item]) throw new Error(`Please add a ${item} address`)
      })
      await onPublish({
        title,
        description,
        shipsTo,
        location,
        storeIdentifier,
        logo,
        foreignCoins: {
          ARRR: arrrWalletAddress
        },
        supportedCoins: supportedCoinsSelected
      });
    } catch (error: any) {
      setErrorMessage(error.message);
    }
  };
  const handleClose = (): void => {
    setTitle("");
    setDescription("");
    setErrorMessage("");
    setArrrWalletAddress("")
    setSupportedCoinsSelected(["QORT"])
    dispatch(toggleCreateStoreModal(false));
  };
  const handleInputChangeId = (event: ChangeEvent<HTMLInputElement>) => {
    // Replace any non-alphanumeric and non-space characters with an empty string
    // Replace multiple spaces with a single dash and remove any dashes that come one after another
    let newValue = event.target.value
      .replace(/[^a-zA-Z0-9\s-]/g, "")
      .replace(/\s+/g, "-")
      .replace(/-+/g, "-")
      .trim();
    if (newValue.toLowerCase().includes("post")) {
      // Replace the 'post' string with an empty string
      newValue = newValue.replace(/post/gi, "");
    }
    if (newValue.toLowerCase().includes("q-shop")) {
      // Replace the 'q-shop' string with an empty string
      newValue = newValue.replace(/q-shop/gi, "");
    }
    setStoreIdentifier(newValue);
  };
  // Close modal when closeCreateStoreModal is true and reset closeCreateStoreModal to false. This is done once the data container is created inside the GlobalWrapper createStore function.
  useEffect(() => {
    if (closeCreateStoreModal) {
      handleClose();
      setCloseCreateStoreModal(false);
    }
  }, [closeCreateStoreModal]);
  const handleChipSelect = (value: string[]) => {
    setSupportedCoinsSelected(value);
  };
  const handleChipRemove = (chip: string) => {
    if (chip === "QORT") return;
    setSupportedCoinsSelected(prevChips => prevChips.filter(c => c !== chip));
  };
  const importAddress = async (coin: string)=> {
    try {
      dispatch(setIsLoadingGlobal(true));
      const res = await qortalRequest({
        action: 'GET_USER_WALLET',
        coin
      })
      if(res?.address){
        setArrrWalletAddress(res.address)
      }
    } catch (error) {
      dispatch(
        setNotification({
          alertType: "error",
          msg: "Unable to import ARRR address. Please insert it manually",
        })
      );
    } finally {
      dispatch(setIsLoadingGlobal(false));
    }
  }
  return (
    <Modal
      open={open}
      aria-labelledby="modal-title"
      aria-describedby="modal-description"
    >
      <ModalBody>
        <ModalTitle id="modal-title">Create Shop</ModalTitle>
        {!logo ? (
          <ImageUploader onPick={(img: string) => setLogo(img)}>
            <AddLogoButton>
              Add Shop Logo
              <AddLogoIcon
                sx={{
                  height: "25px",
                  width: "auto",
                }}
              ></AddLogoIcon>
            </AddLogoButton>
          </ImageUploader>
        ) : (
          <LogoPreviewRow>
            <StoreLogoPreview src={logo} alt="logo" />
            <TimesIcon
              color={theme.palette.text.primary}
              onClickFunc={() => setLogo(null)}
              height={"32"}
              width={"32"}
            ></TimesIcon>
          </LogoPreviewRow>
        )}
        <CustomInputField
          id="modal-title-input"
          label="Url Preview"
          value={`/${username}/${storeIdentifier}`}
          // onChange={(e) => setTitle(e.target.value)}
          fullWidth
          disabled={true}
          variant="filled"
        />
        <CustomInputField
          id="modal-shopId-input"
          label="Shop Id"
          value={storeIdentifier}
          onChange={handleInputChangeId}
          fullWidth
          inputProps={{ maxLength: 25 }}
          required
          variant="filled"
        />
        <CustomInputField
          id="modal-title-input"
          label="Title"
          value={title}
          onChange={(e: any) => setTitle(e.target.value)}
          fullWidth
          required
          variant="filled"
          inputProps={{ maxLength: 50 }}
        />
        <CustomInputField
          id="modal-description-input"
          label="Description"
          value={description}
          onChange={(e: any) => setDescription(e.target.value)}
          multiline
          rows={4}
          fullWidth
          required
          variant="filled"
        />
        <CustomInputField
          id="modal-location-input"
          label="Location"
          value={location}
          onChange={(e: any) => setLocation(e.target.value)}
          fullWidth
          required
          variant="filled"
        />
        <CustomInputField
          id="modal-shipsTo-input"
          label="Ships To"
          value={shipsTo}
          onChange={(e: any) => setShipsTo(e.target.value)}
          fullWidth
          required
          variant="filled"
        />
        {/* QORT Wallet Input Field */}
        {/* <WalletRow>
          <CustomInputField
            id="modal-qort-wallet-input"
            label="QORT Wallet Address"
            value={qortWalletAddress}
            onChange={(e: any) => {
              setQortWalletAddress(e.target.value);
            }}
            fullWidth
            required
            variant="filled"
          />
          <Tooltip
            TransitionComponent={Zoom}
            placement="top"
            arrow={true}
            title="Import your QORT Wallet Address from your current account"
          >
            <IconButton disableFocusRipple={true} disableRipple={true}>
              <DownloadArrrWalletIcon
                color={theme.palette.text.primary}
                height="40"
                width="40"
              />
            </IconButton>
          </Tooltip>
        </WalletRow> */}
        {/* ARRR Wallet Input Field */}
        <WalletRow>
          <CustomInputField
            id="modal-arrr-wallet-input"
            label="ARRR Wallet Address"
            value={arrrWalletAddress}
            onChange={(e: any) => {
              setArrrWalletAddress(e.target.value);
            }}
            fullWidth
            required
            variant="filled"
          />
          <Tooltip
            TransitionComponent={Zoom}
            placement="top"
            arrow={true}
            title="Import your ARRR Wallet Address from your current account"
          >
            <IconButton disableFocusRipple={true} disableRipple={true} onClick={()=> importAddress('ARRR')}>
              <DownloadArrrWalletIcon
                color={theme.palette.text.primary}
                height="40"
                width="40"
              />
            </IconButton>
          </Tooltip>
        </WalletRow>
        {/* Coin selection available for your shop */}
        <FilterSelect
          disableClearable
          multiple
          id="coin-select"
          value={supportedCoinsSelected}
          options={supportedCoinsArray}
          disableCloseOnSelect
          onChange={(e: any, value) => {
            if (e.target.textContent === "QORT") return;
            handleChipSelect(value as string[]);
          }}
          renderTags={(values: any) =>
            values.map((value: string) => {
              return (
                <FiltersChip
                  key={value}
                  label={value}
                  onDelete={
                    value !== "QORT" ? () => handleChipRemove(value) : undefined
                  }
                  clickable={value === "QORT" ? false : true}
                />
              );
            })
          }
          renderOption={(props, option: any) => {
            const isDisabled = option === "QORT";
            return (
              <FiltersOption {...props}>
                <FiltersCheckbox
                  disabled={isDisabled}
                  checked={supportedCoinsSelected.some(coin => coin === option)}
                />
                {option === "QORT" ? (
                  <QortalSVG
                    height="22"
                    width="22"
                    color={theme.palette.text.primary}
                  />
                ) : option === "ARRR" ? (
                  <ARRRSVG
                    height="22"
                    width="22"
                    color={theme.palette.text.primary}
                  />
                ) : null}
                <span style={{ marginLeft: "5px" }}>{option}</span>
              </FiltersOption>
            );
          }}
          renderInput={params => (
            <FilterSelectMenuItems
              {...params}
              label="Supported Coins"
              placeholder="Choose the coins that will be supported by your shop"
            />
          )}
        />
        <FormControl fullWidth sx={{ marginBottom: 2 }}></FormControl>
        {errorMessage && (
          <Typography color="error" variant="body1">
            {errorMessage}
          </Typography>
        )}
        <ButtonRow>
          <CancelButton variant="outlined" color="error" onClick={handleClose}>
            Cancel
          </CancelButton>
          <CreateButton variant="contained" onClick={handlePublish}>
            Create Shop
          </CreateButton>
        </ButtonRow>
      </ModalBody>
    </Modal>
  );
 };
 export default CreateStoreModal;
--- a/src/components/modals/EditStoreModal.tsx
+++ b/src/components/modals/EditStoreModal.tsx
@ -0,0 +1,383 @@
 import { useState, useEffect } from "react";
 import {
  Typography,
  Modal,
  FormControl,
  useTheme,
  IconButton,
  Tooltip,
  Zoom,
 } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { toggleCreateStoreModal } from "../../state/features/globalSlice";
 import { RootState } from "../../state/store";
 import {
  AddLogoButton,
  AddLogoIcon,
  WalletRow,
  ButtonRow,
  CancelButton,
  CreateButton,
  CustomInputField,
  DownloadArrrWalletIcon,
  LogoPreviewRow,
  ModalBody,
  ModalTitle,
  StoreLogoPreview,
  TimesIcon,
 } from "./CreateStoreModal-styles";
 import ImageUploader from "../common/ImageUploader";
 import {
  FilterSelect,
  FilterSelectMenuItems,
  FiltersCheckbox,
  FiltersChip,
  FiltersOption,
 } from "../../pages/Store/Store/Store-styles";
 import { supportedCoinsArray } from "../../constants/supported-coins";
 import { QortalSVG } from "../../assets/svgs/QortalSVG";
 import { ARRRSVG } from "../../assets/svgs/ARRRSVG";
 interface ForeignCoins {
  [key: string]: string;
 }
 export interface onPublishParamEdit {
  title: string;
  description: string;
  shipsTo: string;
  location: string;
  logo: string;
  foreignCoins: ForeignCoins;
  supportedCoins: string[];
 }
 interface MyModalProps {
  open: boolean;
  onClose: () => void;
  onPublish: (param: onPublishParamEdit) => Promise<void>;
  username: string;
 }
 const MyModal: React.FC<MyModalProps> = ({ open, onClose, onPublish }) => {
  const dispatch = useDispatch();
  const currentStore = useSelector(
    (state: RootState) => state.global.currentStore
  );
  const storeId = useSelector((state: RootState) => state.store.storeId);
  const [title, setTitle] = useState<string>("");
  const [description, setDescription] = useState<string>("");
  const [location, setLocation] = useState<string>("");
  const [shipsTo, setShipsTo] = useState<string>("");
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [logo, setLogo] = useState<string | null>(null);
  const [supportedCoinsSelected, setSupportedCoinsSelected] = useState<
    string[]
  >(["QORT"]);
  const [qortWalletAddress, setQortWalletAddress] = useState<string>("");
  const [arrrWalletAddress, setArrrWalletAddress] = useState<string>("");
  const theme = useTheme();
  const handlePublish = async (): Promise<void> => {
    try {
      setErrorMessage("");
      if (!logo) {
        setErrorMessage("A logo is required");
        return;
      }
      const foreignCoins: ForeignCoins = {
        ARRR: arrrWalletAddress
      }
      supportedCoinsSelected.filter((coin)=> coin !== 'QORT').forEach((item: string)=> {
        if(!foreignCoins[item]) throw new Error(`Please add a ${item} address`)
      })
      await onPublish({
        title,
        description,
        shipsTo,
        location,
        logo,
        foreignCoins: {
          ARRR: arrrWalletAddress
        },
        supportedCoins: supportedCoinsSelected
      });
      handleClose();
    } catch (error: any) {
      setErrorMessage(error.message);
    }
  };
  useEffect(() => {
    if (open && currentStore && storeId === currentStore.id) {
      setTitle(currentStore?.title || "");
      setDescription(currentStore?.description || "");
      setLogo(currentStore?.logo || null);
      setLocation(currentStore?.location || "");
      setShipsTo(currentStore?.shipsTo || "");
      setSupportedCoinsSelected(currentStore?.supportedCoins || ['QORT'])
      setArrrWalletAddress(currentStore?.foreignCoins?.ARRR || "")
    }
  }, [currentStore, storeId, open]);
  const handleClose = (): void => {
    setTitle("");
    setDescription("");
    setErrorMessage("");
    setDescription("");
    setLogo(null);
    setLocation("");
    setShipsTo("");
    setArrrWalletAddress("")
    setSupportedCoinsSelected(["QORT"])
    dispatch(toggleCreateStoreModal(false));
    onClose();
  };
  const handleChipSelect = (value: string[]) => {
    setSupportedCoinsSelected(value);
  };
  const handleChipRemove = (chip: string) => {
    if (chip === "QORT") return;
    setSupportedCoinsSelected(prevChips => prevChips.filter(c => c !== chip));
  };
  const importAddress = async (coin: string)=> {
    try {
      const res = await qortalRequest({
        action: 'GET_USER_WALLET',
        coin
      })
      if(res?.address){
        setArrrWalletAddress(res.address)
      }
    } catch (error) {
    }
  }
  return (
    <Modal
      open={open}
      onClose={onClose}
      aria-labelledby="modal-title"
      aria-describedby="modal-description"
    >
      <ModalBody>
        <ModalTitle id="modal-title" variant="h6">
          Edit Shop
        </ModalTitle>
        {!logo ? (
          <ImageUploader onPick={(img: string) => setLogo(img)}>
            <AddLogoButton>
              Add Shop Logo
              <AddLogoIcon
                sx={{
                  height: "25px",
                  width: "auto",
                }}
              ></AddLogoIcon>
            </AddLogoButton>
          </ImageUploader>
        ) : (
          <LogoPreviewRow>
            <StoreLogoPreview src={logo} alt="logo" />
            <TimesIcon
              color={theme.palette.text.primary}
              onClickFunc={() => setLogo(null)}
              height={"32"}
              width={"32"}
            ></TimesIcon>
          </LogoPreviewRow>
        )}
        <CustomInputField
          id="modal-title-input"
          label="Title"
          value={title}
          onChange={e => setTitle(e.target.value)}
          inputProps={{ maxLength: 50 }}
          fullWidth
          required
          variant="filled"
        />
        <CustomInputField
          id="modal-description-input"
          label="Description"
          value={description}
          onChange={e => setDescription(e.target.value)}
          multiline
          rows={4}
          fullWidth
          required
          variant="filled"
        />
        <CustomInputField
          id="modal-location-input"
          label="Location"
          value={location}
          onChange={e => setLocation(e.target.value)}
          fullWidth
          required
          variant="filled"
        />
        <CustomInputField
          id="modal-shipsTo-input"
          label="Ships To"
          value={shipsTo}
          onChange={e => setShipsTo(e.target.value)}
          fullWidth
          required
          variant="filled"
        />
        {/* QORT Wallet Input Field */}
        {/* <WalletRow>
          <CustomInputField
            id="modal-qort-wallet-input"
            label="QORT Wallet Address"
            value={qortWalletAddress}
            onChange={(e: any) => {
              setQortWalletAddress(e.target.value);
            }}
            fullWidth
            required
            variant="filled"
          />
          <Tooltip
            TransitionComponent={Zoom}
            placement="top"
            arrow={true} const importAddress = async (coin: string)=> {
    try {
      const res = await qortalRequest({
        action: 'GET_USER_WALLET',
        coin
      })
      if(res?.address){
        setArrrWalletAddress(res.address)
      }
      console.log({res})
    } catch (error) {
    }
  }
            title="Import your QORT Wallet Address from your current account"
          >
            <IconButton disableFocusRipple={true} disableRipple={true}>
              <DownloadArrrWalletIcon
                color={theme.palette.text.primary}
                height="40"
                width="40"
              />
            </IconButton>
          </Tooltip>
        </WalletRow> */}
        {/* ARRR Wallet Input Field */}
        <WalletRow>
          <CustomInputField
            id="modal-arrr-wallet-input"
            label="ARRR Wallet Address"
            value={arrrWalletAddress}
            onChange={(e: any) => {
              setArrrWalletAddress(e.target.value);
            }}
            fullWidth
            required
            variant="filled"
          />
          <Tooltip
            TransitionComponent={Zoom}
            placement="top"
            arrow={true}
            title="Import your ARRR Wallet Address from your current account"
          >
            <IconButton disableFocusRipple={true} disableRipple={true} onClick={()=> importAddress('ARRR')}>
              <DownloadArrrWalletIcon
                color={theme.palette.text.primary}
                height="40"
                width="40"
              />
            </IconButton>
          </Tooltip>
        </WalletRow>
        <FilterSelect
          disableClearable
          multiple
          id="coin-select"
          value={supportedCoinsSelected}
          options={supportedCoinsArray}
          disableCloseOnSelect
          onChange={(e: any, value) => {
            if (e.target.textContent === "QORT") return;
            handleChipSelect(value as string[]);
          }}
          renderTags={(values: any) =>
            values.map((value: string) => {
              return (
                <FiltersChip
                  key={value}
                  label={value}
                  onDelete={
                    value !== "QORT" ? () => handleChipRemove(value) : undefined
                  }
                  clickable={value === "QORT" ? false : true}
                />
              );
            })
          }
          renderOption={(props, option: any) => {
            const isDisabled = option === "QORT";
            return (
              <FiltersOption {...props}>
                <FiltersCheckbox
                  disabled={isDisabled}
                  checked={supportedCoinsSelected.some(coin => coin === option)}
                />
                {option === "QORT" ? (
                  <QortalSVG
                    height="22"
                    width="22"
                    color={theme.palette.text.primary}
                  />
                ) : option === "ARRR" ? (
                  <ARRRSVG
                    height="22"
                    width="22"
                    color={theme.palette.text.primary}
                  />
                ) : null}
                <span style={{ marginLeft: "5px" }}>{option}</span>
              </FiltersOption>
            );
          }}
          renderInput={params => (
            <FilterSelectMenuItems
              {...params}
              label="Supported Coins"
              placeholder="Choose the coins that will be supported by your shop"
            />
          )}
        />
        <FormControl fullWidth sx={{ marginBottom: 2 }}></FormControl>
        {errorMessage && (
          <Typography color="error" variant="body1">
            {errorMessage}
          </Typography>
        )}
        <ButtonRow sx={{ display: "flex", justifyContent: "flex-end", gap: 1 }}>
          <CancelButton variant="outlined" color="error" onClick={handleClose}>
            Cancel
          </CancelButton>
          <CreateButton variant="contained" onClick={handlePublish}>
            Edit Shop
          </CreateButton>
        </ButtonRow>
      </ModalBody>
    </Modal>
  );
 };
 export default MyModal;
--- a/Show More
+++ b/Show More
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>