fix: seller logo/cover image and name are missing from the Seller page (

#1008)

package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/react-kit": "^0.26.0-alpha.5",
+    "@bosonprotocol/react-kit": "^0.26.0-alpha.7",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.6.1",

src/components/offers/OfferList.tsx

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import { BosonRoutes } from "../../lib/routing/routes";
 import { colors } from "../../lib/styles/colors";
 import { Offer } from "../../lib/types/offer";
+import { Profile } from "../../lib/utils/hooks/lens/graphql/generated";
 import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
 import { useIsCustomStoreValueChanged } from "../../pages/custom-store/useIsCustomStoreValueChanged";
 import { ExtendedOffer } from "../../pages/explore/WithAllOffers";
@@ -30,6 +31,10 @@ interface Props {
   itemsPerRow?: Partial<ItemsPerRow>;
   breadcrumbs?: boolean;
   numOffers: number;
+  seller: {
+    sellerId: string;
+    lensProfile?: Profile;
+  };
 }
 
 const Container = styled.div<{ $isPrimaryBgChanged: boolean }>`
@@ -61,7 +66,8 @@ export default function OfferList({
   numOffers,
   showInvalidOffers,
   itemsPerRow,
-  breadcrumbs
+  breadcrumbs,
+  seller
 }: Props) {
   const isPrimaryBgChanged = useIsCustomStoreValueChanged("primaryBgColor");
   const navigate = useKeepQueryParamsNavigate();
@@ -165,6 +171,7 @@ export default function OfferList({
                       key={offer.id}
                       offer={offer}
                       dataTestId="offer"
+                      lensProfile={seller?.lensProfile}
                     />
                   )
                 );

src/lib/config.ts

@@ -212,7 +212,7 @@ export const getDappConfig = (envConfig: ProtocolConfig) => {
       lensHandleExtension: envConfig.chainId === 137 ? ".lens" : ".test",
       availableOnNetwork: [80001, 137].includes(envConfig.chainId),
       apiLink: envConfig.lens?.apiLink,
-      ipfsGateway: envConfig.lens?.ipfsGateway,
+      ipfsGateway: CONFIG.ipfsGateway,
       LENS_HUB_CONTRACT: envConfig.lens?.LENS_HUB_CONTRACT,
       LENS_PERIPHERY_CONTRACT: envConfig.lens?.LENS_PERIPHERY_CONTRACT,
       LENS_PROFILES_CONTRACT_ADDRESS:

src/pages/profile/seller/Offers.tsx

@@ -2,11 +2,15 @@ import { useMemo } from "react";
 
 import { Action } from "../../../components/offer/OfferCard";
 import OfferList from "../../../components/offers/OfferList";
+import { Profile } from "../../../lib/utils/hooks/lens/graphql/generated";
 import { ExtendedSeller } from "../../explore/WithAllOffers";
 
 interface Props {
   products: ExtendedSeller;
-  sellerId: string;
+  seller: {
+    sellerId: string;
+    lensProfile?: Profile;
+  };
   action: Action;
   showInvalidOffers: boolean;
   isPrivateProfile: boolean;
@@ -18,7 +22,8 @@ export default function Offers({
   action,
   showInvalidOffers,
   isPrivateProfile,
-  isLoading
+  isLoading,
+  seller
 }: Props) {
   const allOffers = useMemo(() => {
     return products?.offers || [];
@@ -41,6 +46,7 @@ export default function Offers({
         l: 3,
         xl: 3
       }}
+      seller={seller}
     />
   );
 }

src/pages/profile/seller/Seller.tsx

@@ -317,7 +317,7 @@ export default function Seller() {
         <Tabs
           products={products?.[0]}
           isPrivateProfile={isMySeller}
-          sellerId={sellerId}
+          seller={{ sellerId, lensProfile: sellerLens }}
           isErrorSellers={isErrorSellers}
           isLoading={isLoadingProducts}
         />

src/pages/profile/seller/Tabs.tsx

@@ -7,6 +7,7 @@ import { AccountQueryParameters } from "../../../lib/routing/parameters";
 import { useQueryParameter } from "../../../lib/routing/useQueryParameter";
 import { breakpoint } from "../../../lib/styles/breakpoint";
 import { colors } from "../../../lib/styles/colors";
+import { Profile } from "../../../lib/utils/hooks/lens/graphql/generated";
 import { ExtendedSeller } from "../../explore/WithAllOffers";
 import { ProfileSectionWrapper } from "../ProfilePage.styles";
 import Exchanges from "./Exchanges";
@@ -110,15 +111,18 @@ const tabIdentifier = "id" as const;
 
 interface Props {
   products: ExtendedSeller;
-  sellerId: string;
+  seller: {
+    sellerId: string;
+    lensProfile?: Profile;
+  };
   isErrorSellers: boolean;
   isPrivateProfile: boolean;
   isLoading: boolean;
 }
 export default function Tabs({
   products,
   isPrivateProfile,
-  sellerId,
+  seller,
   isErrorSellers,
   isLoading
 }: Props) {
@@ -130,7 +134,7 @@ export default function Tabs({
         content: (
           <Offers
             products={products}
-            sellerId={sellerId}
+            seller={seller}
             action={isPrivateProfile ? null : "commit"}
             showInvalidOffers={isPrivateProfile}
             isPrivateProfile={isPrivateProfile}
@@ -141,16 +145,16 @@ export default function Tabs({
       {
         id: "exchanges",
         title: "Exchanges",
-        content: <Exchanges sellerId={sellerId} />
+        content: <Exchanges sellerId={seller.sellerId} />
       },
       {
         id: "redemptions",
         title: "Redemptions",
-        content: <Redemptions sellerId={sellerId} />
+        content: <Redemptions sellerId={seller.sellerId} />
       }
     ];
     return tabsData;
-  }, [sellerId, isPrivateProfile, products, isLoading]);
+  }, [seller, isPrivateProfile, products, isLoading]);
   const [currentTab, setCurrentTab] = useQueryParameter(
     AccountQueryParameters.tab
   );