feat: show whitelisted offers in animated grid in homepage

.env.example

@@ -45,8 +45,6 @@ REACT_APP_RELEASE_NAME=
 
 REACT_APP_WALLET_CONNECT_PROJECT_ID=
 
-REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP='{"production-137-0":"248", "testing-80001-0":"26"}'
-
 REACT_APP_VIEW_MODE=dapp
 # REACT_APP_VIEW_MODE=dr_center
 # REACT_APP_VIEW_MODE=dapp,dr_center

.github/workflows/ci.yaml

@@ -59,7 +59,6 @@ jobs:
       REACT_APP_MOONPAY_EXTERNAL_LINK: "https://www.moonpay.com/buy"
       REACT_APP_META_TX_API_KEY_MAP: ${{ vars.REACT_APP_META_TX_API_KEY_MAP_TESTING }}
       REACT_APP_META_TX_API_IDS_MAP: ${{ vars.REACT_APP_META_TX_API_IDS_MAP_TESTING }}
-      REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP: ${{ vars.REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -94,7 +93,6 @@ jobs:
       REACT_APP_MOONPAY_EXTERNAL_LINK: "https://www.moonpay.com/buy"
       REACT_APP_META_TX_API_KEY_MAP: ${{ vars.REACT_APP_META_TX_API_KEY_MAP_TESTING }}
       REACT_APP_META_TX_API_IDS_MAP: ${{ vars.REACT_APP_META_TX_API_IDS_MAP_TESTING }}
-      REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP: ${{ vars.REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       FLEEK_API_KEY: ${{ secrets.FLEEK_API_KEY }}
@@ -134,7 +132,6 @@ jobs:
       REACT_APP_MOONPAY_EXTERNAL_LINK: "https://www.moonpay.com/buy"
       REACT_APP_META_TX_API_KEY_MAP: ${{ vars.REACT_APP_META_TX_API_KEY_MAP_STAGING }}
       REACT_APP_META_TX_API_IDS_MAP: ${{ vars.REACT_APP_META_TX_API_IDS_MAP_STAGING }}
-      REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP: ${{ vars.REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       FLEEK_API_KEY: ${{ secrets.FLEEK_API_KEY }}
@@ -174,7 +171,6 @@ jobs:
       REACT_APP_MOONPAY_EXTERNAL_LINK: "https://www.moonpay.com/buy"
       REACT_APP_META_TX_API_KEY_MAP: ${{ vars.REACT_APP_META_TX_API_KEY_MAP_PRODUCTION }}
       REACT_APP_META_TX_API_IDS_MAP: ${{ vars.REACT_APP_META_TX_API_IDS_MAP_PRODUCTION }}
-      REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP: ${{ vars.REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       FLEEK_API_KEY: ${{ secrets.FLEEK_API_KEY }}

.github/workflows/ci_reusable.yaml

@@ -66,9 +66,6 @@ on:
       REACT_APP_META_TX_API_IDS_MAP:
         required: true
         type: string
-      REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP:
-        required: true
-        type: string
     secrets:
       NPM_TOKEN:
         required: true
@@ -121,7 +118,6 @@ jobs:
       REACT_APP_DEFAULT_RESOLUTION_PERIOD_DAYS: ${{ secrets.REACT_APP_DEFAULT_RESOLUTION_PERIOD_DAYS }}
       REACT_APP_INFURA_IPFS_PROJECT_ID: ${{ secrets.REACT_APP_INFURA_IPFS_PROJECT_ID }}
       REACT_APP_INFURA_IPFS_PROJECT_SECRET: ${{ secrets.REACT_APP_INFURA_IPFS_PROJECT_SECRET }}
-      REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP: ${{ inputs.REACT_APP_CAROUSEL_PROMOTED_SELLER_ID_MAP }}
       REACT_APP_GOOGLE_TAG_ID: ${{ secrets.REACT_APP_GOOGLE_TAG_ID }}
       REACT_APP_META_TX_API_KEY_MAP: ${{ inputs.REACT_APP_META_TX_API_KEY_MAP }}
       REACT_APP_META_TX_API_IDS_MAP: ${{ inputs.REACT_APP_META_TX_API_IDS_MAP }}

package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/react-kit": "^0.34.0-alpha.20",
+    "@bosonprotocol/react-kit": "^0.34.0-alpha.23",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.7.0",

src/components/config/ConfigProvider.tsx

@@ -1,6 +1,10 @@
-import { ProtocolConfig } from "@bosonprotocol/react-kit";
+import {
+  ConfigProvider as BosonConfigProvider,
+  ProtocolConfig
+} from "@bosonprotocol/react-kit";
 import { MagicProvider } from "components/magicLink/MagicContext";
 import {
+  CONFIG,
   defaultEnvConfig,
   envConfigsFilteredByEnv,
   getDappConfig
@@ -35,9 +39,29 @@ export function ConfigProvider({ children }: ConfigProviderProps) {
   const dappConfig = getDappConfig(envConfig || defaultEnvConfig);
   return (
     <Context.Provider value={{ config: dappConfig, setEnvConfig }}>
-      <MagicProvider>
-        <SyncCurrentConfigId>{children}</SyncCurrentConfigId>
-      </MagicProvider>
+      <BosonConfigProvider
+        dateFormat={CONFIG.dateFormat}
+        {...{
+          configId: dappConfig.envConfig.configId,
+          envName: dappConfig.envName,
+          shortDateFormat: CONFIG.shortDateFormat,
+          infuraKey: CONFIG.infuraKey,
+          walletConnectProjectId: CONFIG.walletConnect.projectId,
+          defaultCurrencySymbol: CONFIG.defaultCurrency.symbol,
+          defaultCurrencyTicker: CONFIG.defaultCurrency.ticker,
+          licenseTemplate: CONFIG.rNFTLicenseTemplate,
+          minimumDisputeResolutionPeriodDays: CONFIG.minimumDisputePeriodInDays,
+          contactSellerForExchangeUrl: "",
+          withExternalConnectionProps: true,
+          withReduxProvider: false,
+          withWeb3React: false,
+          withCustomReduxContext: false
+        }}
+      >
+        <MagicProvider>
+          <SyncCurrentConfigId>{children}</SyncCurrentConfigId>
+        </MagicProvider>
+      </BosonConfigProvider>
     </Context.Provider>
   );
 }

src/components/detail/Detail.style.tsx

@@ -197,29 +197,6 @@ export const ImageWrapper = styled.div`
   width: -webkit-fill-available;
 `;
 
-export const GlideWrapper = styled.div<{ $afterBackground: string }>`
-  &:after {
-    content: "";
-    position: absolute;
-    height: 100%;
-    width: 4rem;
-    z-index: ${zIndex.Carousel};
-    top: 0;
-    bottom: 0;
-    right: 0;
-    background: linear-gradient(
-      -90deg,
-      ${({ $afterBackground }) => $afterBackground} 0%,
-      transparent 100%
-    );
-    pointer-events: none;
-  }
-`;
-
-export const GlideSlide = styled.div`
-  overflow: hidden;
-`;
-
 const tableBorder = css`
   tbody {
     tr {