Merge pull request #1613 from blockscout/remove-marketplace-experiment

Remove marketplace experiment

lib/growthbook/init.ts

@@ -7,7 +7,6 @@ import { STORAGE_KEY, STORAGE_LIMIT } from './consts';
 
 export interface GrowthBookFeatures {
   test_value: string;
-  marketplace_exp: boolean;
 }
 
 export const growthBook = (() => {

ui/marketplace/MarketplaceAppCard.tsx

@@ -4,7 +4,6 @@ import React, { useCallback } from 'react';
 
 import type { MarketplaceAppPreview } from 'types/client/marketplace';
 
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import * as mixpanel from 'lib/mixpanel/index';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
@@ -31,13 +30,10 @@ const MarketplaceAppCard = ({
   onInfoClick,
   isFavorite,
   onFavoriteClick,
-  isLoading: isDataLoading,
+  isLoading,
   showDisclaimer,
   internalWallet,
 }: Props) => {
-  const { value: isExperiment, isLoading: isExperimentLoading } = useFeatureValue('marketplace_exp', false);
-  const isLoading = isDataLoading || isExperimentLoading;
-
   const categoriesLabel = categories.join(', ');
 
   const handleClick = useCallback((event: MouseEvent) => {
@@ -59,7 +55,6 @@ const MarketplaceAppCard = ({
   }, [ onFavoriteClick, id, isFavorite ]);
 
   const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
-  const moreButtonBgGradient = `linear(to-r, ${ useColorModeValue('whiteAlpha.50', 'blackAlpha.50') }, ${ useColorModeValue('white', 'black') } 20%)`;
 
   const [ integrationIcon, integrationIconColor, integrationText ] = React.useMemo(() => {
     let icon: IconName = 'integration/partial';
@@ -94,14 +89,14 @@ const MarketplaceAppCard = ({
       role="group"
     >
       <Box
-        display={{ base: 'grid', sm: isExperiment ? 'flex' : 'block' }}
-        flexDirection={ isExperiment ? 'column' : undefined }
+        display={{ base: 'grid', sm: 'flex' }}
+        flexDirection="column"
         gridTemplateColumns={{ base: '64px 1fr', sm: '1fr' }}
         gridTemplateRows={{ base: 'none', sm: 'none' }}
         gridRowGap={{ base: 2, sm: 0 }}
         gridColumnGap={{ base: 4, sm: 0 }}
         height="100%"
-        alignContent={ isExperiment ? 'start' : undefined }
+        alignContent="start"
       >
         <Skeleton
           isLoaded={ !isLoading }
@@ -137,25 +132,23 @@ const MarketplaceAppCard = ({
             title={ title }
             onClick={ handleClick }
           />
-          { isExperiment && (
-            <Tooltip
-              label={ integrationText }
-              textAlign="center"
-              padding={ 2 }
-              openDelay={ 300 }
-              maxW={ 400 }
-            >
-              <IconSvg
-                name={ integrationIcon }
-                boxSize={ 5 }
-                color={ integrationIconColor }
-                position="relative"
-                cursor="pointer"
-                verticalAlign="middle"
-                marginBottom={ 1 }
-              />
-            </Tooltip>
-          ) }
+          <Tooltip
+            label={ integrationText }
+            textAlign="center"
+            padding={ 2 }
+            openDelay={ 300 }
+            maxW={ 400 }
+          >
+            <IconSvg
+              name={ integrationIcon }
+              boxSize={ 5 }
+              color={ integrationIconColor }
+              position="relative"
+              cursor="pointer"
+              verticalAlign="middle"
+              marginBottom={ 1 }
+            />
+          </Tooltip>
         </Skeleton>
 
         <Skeleton
@@ -171,63 +164,34 @@ const MarketplaceAppCard = ({
           isLoaded={ !isLoading }
           fontSize={{ base: 'xs', sm: 'sm' }}
           lineHeight="20px"
-          noOfLines={ isExperiment ? 3 : 4 }
+          noOfLines={ 3 }
         >
           { shortDescription }
         </Skeleton>
 
         { !isLoading && (
-          isExperiment ? (
-            <Box
-              display="flex"
-              position={{ base: 'absolute', sm: 'relative' }}
-              bottom={{ base: 3, sm: 0 }}
-              left={{ base: 3, sm: 0 }}
-              marginTop={{ base: 0, sm: 'auto' }}
-              paddingTop={{ base: 0, sm: 4 }}
-            >
-              <Link
-                fontSize={{ base: 'xs', sm: 'sm' }}
-                paddingRight={{ sm: 2 }}
-                href="#"
-                onClick={ handleInfoClick }
-              >
-                More info
-              </Link>
-            </Box>
-          ) : (
-            <Box
-              position="absolute"
-              right={{ base: 3, sm: '20px' }}
-              bottom={{ base: 3, sm: '20px' }}
-              paddingLeft={ 8 }
-              bgGradient={ moreButtonBgGradient }
+          <Box
+            display="flex"
+            position={{ base: 'absolute', sm: 'relative' }}
+            bottom={{ base: 3, sm: 0 }}
+            left={{ base: 3, sm: 0 }}
+            marginTop={{ base: 0, sm: 'auto' }}
+            paddingTop={{ base: 0, sm: 4 }}
+          >
+            <Link
+              fontSize={{ base: 'xs', sm: 'sm' }}
+              paddingRight={{ sm: 2 }}
+              href="#"
+              onClick={ handleInfoClick }
             >
-              <Link
-                fontSize={{ base: 'xs', sm: 'sm' }}
-                display="flex"
-                alignItems="center"
-                paddingRight={{ sm: 2 }}
-                maxW="100%"
-                overflow="hidden"
-                href="#"
-                onClick={ handleInfoClick }
-              >
-              More
-
-                <IconSvg
-                  name="arrows/north-east"
-                  marginLeft={ 1 }
-                  boxSize={ 4 }
-                />
-              </Link>
-            </Box>
-          )
+              More info
+            </Link>
+          </Box>
         ) }
 
         { !isLoading && (
           <IconButton
-            display={{ base: 'block', sm: isFavorite || isExperiment ? 'block' : 'none' }}
+            display={{ base: 'block', sm: isFavorite ? 'block' : 'none' }}
             _groupHover={{ display: 'block' }}
             position="absolute"
             right={{ base: 3, sm: '10px' }}

ui/marketplace/MarketplaceCategoriesMenu.tsx

-import { Box, Button, Menu, MenuButton, MenuList, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import { MarketplaceCategory } from 'types/client/marketplace';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import MarketplaceCategoriesMenuItem from './MarketplaceCategoriesMenuItem';
-
-type Props = {
-  categories: Array<string>;
-  selectedCategoryId: string;
-  onSelect: (category: string) => void;
-  isLoading: boolean;
-}
-
-const MarketplaceCategoriesMenu = ({ selectedCategoryId, onSelect, categories, isLoading }: Props) => {
-  const options = React.useMemo(() => ([
-    MarketplaceCategory.FAVORITES,
-    MarketplaceCategory.ALL,
-    ...categories,
-  ]), [ categories ]);
-
-  if (isLoading) {
-    return (
-      <Skeleton
-        h="40px"
-        w={{ base: '100%', sm: '120px' }}
-        borderRadius="base"
-        mb={{ base: 2, sm: 0 }}
-        mr={{ base: 0, sm: 2 }}
-      />
-    );
-  }
-
-  return (
-    <Menu>
-      <MenuButton
-        as={ Button }
-        mb={{ base: 2, sm: 0 }}
-        mr={{ base: 0, sm: 2 }}
-        size="md"
-        variant="outline"
-        colorScheme="gray"
-        flexShrink={ 0 }
-      >
-        <Box
-          as="span"
-          display="flex"
-          alignItems="center"
-        >
-          { selectedCategoryId }
-          <IconSvg transform="rotate(-90deg)" ml={{ base: 'auto', sm: 1 }} name="arrows/east-mini" w={ 5 } h={ 5 }/>
-        </Box>
-      </MenuButton>
-
-      <MenuList zIndex={ 3 }>
-        { options.map((category: string) => (
-          <MarketplaceCategoriesMenuItem
-            key={ category }
-            id={ category }
-            onClick={ onSelect }
-          />
-        )) }
-      </MenuList>
-    </Menu>
-  );
-};
-
-export default React.memo(MarketplaceCategoriesMenu);

ui/marketplace/MarketplaceCategoriesMenuItem.tsx

-import { MenuItem } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-
-import { MarketplaceCategory } from 'types/client/marketplace';
-
-import type { IconName } from 'ui/shared/IconSvg';
-import IconSvg from 'ui/shared/IconSvg';
-
-type Props = {
-  id: string;
-  onClick: (category: string) => void;
-}
-
-const ICONS: Record<string, IconName> = {
-  [MarketplaceCategory.FAVORITES]: 'star_filled',
-};
-
-const MarketplaceCategoriesMenuItem = ({ id, onClick }: Props) => {
-  const handleSelection = useCallback(() => {
-    onClick(id);
-  }, [ id, onClick ]);
-
-  return (
-    <MenuItem
-      key={ id }
-      onClick={ handleSelection }
-      display="flex"
-      alignItems="center"
-    >
-      { id in ICONS && <IconSvg mr={ 3 } name={ ICONS[id] } w={ 4 } h={ 4 } color="blackAlpha.800"/> }
-      { id }
-    </MenuItem>
-  );
-};
-
-export default MarketplaceCategoriesMenuItem;

ui/marketplace/MarketplaceList.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import type { MarketplaceAppPreview } from 'types/client/marketplace';
 import { MarketplaceCategory } from 'types/client/marketplace';
 
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import { apos } from 'lib/html-entities';
 import EmptySearchResult from 'ui/shared/EmptySearchResult';
 import IconSvg from 'ui/shared/IconSvg';
@@ -22,8 +21,6 @@ type Props = {
 }
 
 const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLoading, showDisclaimer, selectedCategoryId }: Props) => {
-  const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
-
   return apps.length > 0 ? (
     <Grid
       templateColumns={{
@@ -56,7 +53,7 @@ const MarketplaceList = ({ apps, onAppClick, favoriteApps, onFavoriteClick, isLo
   ) : (
     <EmptySearchResult
       text={
-        (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length && isExperiment) ? (
+        (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length) ? (
           <>
             You don{ apos }t have any favorite apps.
             Click on the <IconSvg name="star_outline" w={ 4 } h={ 4 } mb={ -0.5 }/> icon on the app{ apos }s card to add it to Favorites.

ui/marketplace/useMarketplaceApps.tsx

@@ -7,7 +7,6 @@ import { MarketplaceCategory } from 'types/client/marketplace';
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useFetch from 'lib/hooks/useFetch';
 import { MARKETPLACE_APP } from 'stubs/marketplace';
 
@@ -23,10 +22,7 @@ function isAppCategoryMatches(category: string, app: MarketplaceAppOverview, fav
       app.categories.includes(category);
 }
 
-function sortApps(apps: Array<MarketplaceAppOverview>, isExperiment: boolean) {
-  if (!isExperiment) {
-    return apps.sort((a, b) => a.title.localeCompare(b.title));
-  }
+function sortApps(apps: Array<MarketplaceAppOverview>) {
   return apps.sort((a, b) => {
     const priorityA = a.priority || 0;
     const priorityB = b.priority || 0;
@@ -50,7 +46,6 @@ function sortApps(apps: Array<MarketplaceAppOverview>, isExperiment: boolean) {
 export default function useMarketplaceApps(filter: string, selectedCategoryId: string = MarketplaceCategory.ALL, favoriteApps: Array<string> = []) {
   const fetch = useFetch();
   const apiFetch = useApiFetch();
-  const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
 
   const { isPlaceholderData, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppOverview>>({
     queryKey: [ 'marketplace-dapps' ],
@@ -63,7 +58,7 @@ export default function useMarketplaceApps(filter: string, selectedCategoryId: s
         return apiFetch('marketplace_dapps', { pathParams: { chainId: config.chain.id } });
       }
     },
-    select: (data) => sortApps(data as Array<MarketplaceAppOverview>, isExperiment),
+    select: (data) => sortApps(data as Array<MarketplaceAppOverview>),
     placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined,
     staleTime: Infinity,
     enabled: feature.isEnabled,

ui/marketplace/useMarketplaceCategories.tsx

@@ -5,7 +5,6 @@ import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useApiFetch from 'lib/hooks/useFetch';
 import { CATEGORIES } from 'stubs/marketplace';
 
@@ -14,7 +13,6 @@ const categoriesUrl = (feature.isEnabled && feature.categoriesUrl) || '';
 
 export default function useMarketplaceCategories(apps: Array<MarketplaceAppOverview> | undefined, isAppsPlaceholderData: boolean) {
   const apiFetch = useApiFetch();
-  const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
 
   const { isPlaceholderData, data } = useQuery<unknown, ResourceError<unknown>, Array<string>>({
     queryKey: [ 'marketplace-categories' ],
@@ -41,7 +39,7 @@ export default function useMarketplaceCategories(apps: Array<MarketplaceAppOverv
       });
     });
 
-    if (data?.length && !isPlaceholderData && isExperiment) {
+    if (data?.length && !isPlaceholderData) {
       categoryNames = data;
     } else {
       categoryNames = Object.keys(grouped);
@@ -50,7 +48,7 @@ export default function useMarketplaceCategories(apps: Array<MarketplaceAppOverv
     return categoryNames
       .map(category => ({ name: category, count: grouped[category] || 0 }))
       .filter(c => c.count > 0);
-  }, [ apps, isAppsPlaceholderData, data, isPlaceholderData, isExperiment ]);
+  }, [ apps, isAppsPlaceholderData, data, isPlaceholderData ]);
 
   return React.useMemo(() => ({
     isPlaceholderData: isAppsPlaceholderData || isPlaceholderData,

ui/pages/Marketplace.tsx

@@ -6,10 +6,8 @@ import type { TabItem } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
-import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu';
 import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
 import FilterInput from 'ui/shared/filters/FilterInput';
@@ -64,7 +62,6 @@ const Marketplace = () => {
     isCategoriesPlaceholderData,
   } = useMarketplace();
   const isMobile = useIsMobile();
-  const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
 
   const categoryTabs = React.useMemo(() => {
     const tabs: Array<TabItem> = categories.map(category => ({
@@ -143,43 +140,28 @@ const Marketplace = () => {
           </Flex>
         ) }
       />
-      { isExperiment && (
-        <Box marginTop={{ base: 0, lg: 8 }}>
-          { (isCategoriesPlaceholderData) ? (
-            <TabsSkeleton tabs={ categoryTabs }/>
-          ) : (
-            <TabsWithScroll
-              tabs={ categoryTabs }
-              onTabChange={ handleCategoryChange }
-              defaultTabIndex={ selectedCategoryIndex }
-              marginBottom={{ base: 0, lg: -2 }}
-            />
-          ) }
-        </Box>
-      ) }
-      <Box
-        display="flex"
-        flexDirection={{ base: 'column', sm: 'row' }}
-      >
-        { !isExperiment && (
-          <MarketplaceCategoriesMenu
-            categories={ categories.map(c => c.name) }
-            selectedCategoryId={ selectedCategoryId }
-            onSelect={ onCategoryChange }
-            isLoading={ isPlaceholderData }
+      <Box marginTop={{ base: 0, lg: 8 }}>
+        { (isCategoriesPlaceholderData) ? (
+          <TabsSkeleton tabs={ categoryTabs }/>
+        ) : (
+          <TabsWithScroll
+            tabs={ categoryTabs }
+            onTabChange={ handleCategoryChange }
+            defaultTabIndex={ selectedCategoryIndex }
+            marginBottom={{ base: 0, lg: -2 }}
           />
         ) }
-
-        <FilterInput
-          initialValue={ filterQuery }
-          onChange={ onSearchInputChange }
-          marginBottom={{ base: '4', lg: '6' }}
-          w="100%"
-          placeholder="Find app"
-          isLoading={ isPlaceholderData }
-        />
       </Box>
 
+      <FilterInput
+        initialValue={ filterQuery }
+        onChange={ onSearchInputChange }
+        marginBottom={{ base: '4', lg: '6' }}
+        w="100%"
+        placeholder="Find app"
+        isLoading={ isPlaceholderData }
+      />
+
       <MarketplaceList
         apps={ displayedApps }
         onAppClick={ showAppInfo }