Fixed banner image rendering

components/home/home-feed.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
+import { ShopMapContext } from "@/utils/context/context";
+import { ShopSettings } from "../../utils/types/types";
+import { sanitizeUrl } from "@braintree/sanitize-url";
+import { useRouter } from "next/router";
 
 import MarketplacePage from "./marketplace";
 
@@ -11,15 +15,54 @@ const HomeFeed = ({
   focusedPubkey: string;
   setFocusedPubkey: (value: string) => void;
 }) => {
+  const router = useRouter();
+
+  const [shopBannerURL, setShopBannerURL] = useState("");
+  const [isFetchingShop, setIsFetchingShop] = useState(false);
+
+  const [isHome, setIsHome] = useState(false);
+
+  const shopMapContext = useContext(ShopMapContext);
+
+  useEffect(() => {
+    if (!router.pathname.includes("npub")) {
+      setIsHome(true);
+    }
+    setIsFetchingShop(true);
+    if (
+      focusedPubkey &&
+      shopMapContext.shopData.has(focusedPubkey) &&
+      typeof shopMapContext.shopData.get(focusedPubkey) != "undefined"
+    ) {
+      const shopSettings: ShopSettings | undefined =
+        shopMapContext.shopData.get(focusedPubkey);
+      if (shopSettings) {
+        setShopBannerURL(shopSettings.content.ui.banner);
+      }
+    }
+    setIsFetchingShop(false);
+  }, [focusedPubkey, shopMapContext, shopBannerURL, router.pathname]);
+
   return (
-    <div className="flex flex-1 flex-col">
-      <div className="flex h-screen flex-1">
-        <MarketplacePage
-          focusedPubkey={focusedPubkey}
-          setFocusedPubkey={setFocusedPubkey}
-        />
+    <>
+      {focusedPubkey && shopBannerURL && !isFetchingShop && (
+        <div className="flex h-auto w-full items-center justify-center bg-white dark:bg-black bg-cover bg-center">
+          <img
+            src={sanitizeUrl(shopBannerURL)}
+            alt="Shop Banner"
+            className="max-h-[210px] w-full items-center justify-center object-cover"
+          />
+        </div>
+      )}
+      <div className="flex flex-1 flex-col">
+        <div className="flex h-screen flex-1">
+          <MarketplacePage
+            focusedPubkey={focusedPubkey}
+            setFocusedPubkey={setFocusedPubkey}
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

components/home/marketplace.tsx

@@ -22,7 +22,6 @@ import SignInModal from "../sign-in/SignInModal";
 import ShopstrSwitch from "../utility-components/shopstr-switch";
 import { ShopSettings } from "../../utils/types/types";
 import SideShopNav from "./side-shop-nav";
-import { sanitizeUrl } from "@braintree/sanitize-url";
 
 export function MarketplacePage({
   focusedPubkey,

components/home/side-shop-nav.tsx

@@ -178,13 +178,13 @@ const SideShopNav = ({
               className={`${SHOPSTRBUTTONCLASSNAMES} w-full`}
               onClick={() => handleCreateNewListing()}
             >
-              Add listing
+              Add Listing
             </Button>
             <Button
               className={`${SHOPSTRBUTTONCLASSNAMES} mt-2 w-full`}
               onClick={() => router.push("settings/shop-settings")}
             >
-              Edit shop
+              Edit Shop
             </Button>
             {shopAbout && (
               <div className="flex w-full flex-col justify-start bg-transparent py-8 text-light-text dark:text-dark-text">

components/my-listings/my-listings.tsx

@@ -62,11 +62,11 @@ export const MyListingsPage = () => {
       <div className="flex max-w-[100%] flex-col bg-light-bg px-3 pb-2 dark:bg-dark-bg">
         {shopBannerURL != "" && !isFetchingShop ? (
           <>
-            <div className="flex h-auto w-full items-center justify-center bg-cover bg-center">
+            <div className="flex h-auto w-full items-center justify-center bg-white dark:bg-black bg-cover bg-center">
               <img
                 src={sanitizeUrl(shopBannerURL)}
                 alt="Shop Banner"
-                className="flex max-h-[310.5px] w-full items-center justify-center object-cover"
+                className="max-h-[210px] w-full items-center justify-center object-cover"
               />
             </div>
             <div className="mt-3 flex items-center justify-between font-bold text-light-text dark:text-dark-text">
@@ -102,13 +102,13 @@ export const MyListingsPage = () => {
                     className={`${SHOPSTRBUTTONCLASSNAMES}`}
                     onClick={() => handleCreateNewListing()}
                   >
-                    Add listing
+                    Add Listing
                   </Button>
                   <Button
                     className={`${SHOPSTRBUTTONCLASSNAMES}`}
                     onClick={() => router.push("settings/shop-settings")}
                   >
-                    Edit shop
+                    Edit Shop
                   </Button>
                   {/* <Button className="bg-transparent text-xl text-light-text hover:text-purple-700 dark:text-dark-text dark:hover:text-accent-dark-text">
               Reviews
@@ -152,13 +152,13 @@ export const MyListingsPage = () => {
                     className={`${SHOPSTRBUTTONCLASSNAMES}`}
                     onClick={() => handleCreateNewListing()}
                   >
-                    Add listing
+                    Add Listing
                   </Button>
                   <Button
                     className={`${SHOPSTRBUTTONCLASSNAMES}`}
                     onClick={() => router.push("settings/shop-settings")}
                   >
-                    Edit shop
+                    Edit Shop
                   </Button>
                   {/* <Button className="bg-transparent text-xl text-light-text hover:text-purple-700 dark:text-dark-text dark:hover:text-accent-dark-text">
                 Reviews

components/utility-components/checkout-card.tsx

@@ -188,15 +188,15 @@ export default function CheckoutCard({
       {!isBeingPaid ? (
         <>
           {shopBannerURL && !isFetchingShop && (
-            <div className="flex h-auto w-full items-center justify-center bg-cover bg-center">
+            <div className="flex h-auto w-full items-center justify-center bg-white dark:bg-black bg-cover bg-center">
               <img
                 src={sanitizeUrl(shopBannerURL)}
                 alt="Shop Banner"
-                className="flex max-h-[210px] w-full items-center justify-center object-cover"
+                className="max-h-[210px] w-full items-center justify-center object-cover"
               />
             </div>
           )}
-          <div className="max-w-screen">
+          <div className="max-w-screen pt-4">
             <div
               className="max-w-screen mx-3 my-3 flex flex-row whitespace-normal break-words"
               key={uniqueKey}

pages/[[...pubkey]].tsx

@@ -38,17 +38,22 @@ export default function SellerView({
         <meta name="twitter:image" content="/shopstr-2000x2000.png" />
       </Head>
       {!focusedPubkey && (
-        <div className="flex h-auto w-full items-center justify-center bg-cover bg-center pt-20">
+        <div className="flex h-auto w-full items-center justify-center bg-black bg-cover bg-center pt-20">
           <img
             src="/shop-freely-dark.png"
             alt="Shopstr Banner"
-            className="flex max-h-[210px] w-full items-center justify-center object-cover"
+            className="hidden max-h-[210px] w-full items-center justify-center object-cover sm:flex"
+          />
+          <img
+            src="/shop-freely.png"
+            alt="Shopstr Banner"
+            className="flex max-h-[210px] w-full items-center justify-center object-cover pb-4 sm:hidden"
           />
         </div>
       )}
       <div
         className={`flex h-full min-h-screen flex-col bg-light-bg dark:bg-dark-bg ${
-          focusedPubkey ? "pt-24" : ""
+          focusedPubkey ? "pt-20" : ""
         }`}
       >
         <HomeFeed

pages/_app.tsx

@@ -303,10 +303,6 @@ function App({ Component, pageProps }: AppProps) {
           localStorage.setItem("writeRelays", JSON.stringify(writeRelayList));
           allRelays = [...relayList, ...readRelayList];
         }
-        let { followList } = await fetchAllFollows(
-          allRelays,
-          editFollowsContext,
-        );
         let pubkeysToFetchProfilesFor: string[] = [];
         let { profileSetFromProducts } = await fetchAllPosts(
           allRelays,
@@ -325,15 +321,19 @@ function App({ Component, pageProps }: AppProps) {
             ...profileSetFromChats,
           ];
         }
+        let { shopSettingsMap } = await fetchShopSettings(
+          allRelays,
+          pubkeysToFetchProfilesFor,
+          editShopContext,
+        );
         let { profileMap } = await fetchProfile(
           allRelays,
           pubkeysToFetchProfilesFor,
           editProfileContext,
         );
-        let { shopSettingsMap } = await fetchShopSettings(
+        let { followList } = await fetchAllFollows(
           allRelays,
-          pubkeysToFetchProfilesFor,
-          editShopContext,
+          editFollowsContext,
         );
         if (
           (getLocalStorageData().signInMethod === "nsec" && passphrase) ||