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

Remove marketplace experiment
blockscout · Feb 20, 2024 · 66ec60d · 66ec60d
2 parents 7c69314 + 687c5ac
commit 66ec60d
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 233 deletions.
diff --git a/lib/growthbook/init.ts b/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 = (() => {

diff --git a/ui/marketplace/MarketplaceAppCard.tsx b/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' }}

diff --git a/ui/marketplace/MarketplaceCategoriesMenu.tsx b/ui/marketplace/MarketplaceCategoriesMenu.tsx
diff --git a/ui/marketplace/MarketplaceCategoriesMenuItem.tsx b/ui/marketplace/MarketplaceCategoriesMenuItem.tsx
diff --git a/ui/marketplace/MarketplaceList.tsx b/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.

diff --git a/ui/marketplace/useMarketplaceApps.tsx b/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,

diff --git a/ui/marketplace/useMarketplaceCategories.tsx b/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,