wrap new components in A/B testing

lib/growthbook/init.ts

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

ui/marketplace/MarketplaceAppModal.tsx

@@ -7,6 +7,7 @@ import React, { useCallback } from 'react';
 import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
 import { ContractListTypes } from 'types/client/marketplace';
 
+import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 import type { IconName } from 'ui/shared/IconSvg';
@@ -31,6 +32,8 @@ const MarketplaceAppModal = ({
   data,
   showContractList: showContractListDefault,
 }: Props) => {
+  const { value: isExperiment } = useFeatureValue('security_score_exp', false);
+
   const {
     id,
     title,
@@ -169,7 +172,7 @@ const MarketplaceAppModal = ({
                 />
               </Flex>
 
-              { securityReport && (
+              { (isExperiment && securityReport) && (
                 <Flex alignItems="center" gap={ 3 }>
                   <AppSecurityReport securityReport={ securityReport } showContractList={ showAnalyzedContracts }/>
                   <ContractListButton

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -7,6 +7,7 @@ import { ContractListTypes } from 'types/client/marketplace';
 import { route } from 'nextjs-routes';
 
 import { useAppContext } from 'lib/contexts/app';
+import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
@@ -28,6 +29,7 @@ const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected, securityRepo
   const [ showContractList, setShowContractList ] = useBoolean(false);
   const appProps = useAppContext();
   const isMobile = useIsMobile();
+  const { value: isExperiment } = useFeatureValue('security_score_exp', false);
 
   const goBackUrl = React.useMemo(() => {
     if (appProps.referrer && appProps.referrer.includes('/apps') && !appProps.referrer.includes('/apps/')) {
@@ -56,7 +58,7 @@ const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected, securityRepo
         <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
           <MarketplaceAppInfo data={ data }/>
         </Skeleton>
-        { (securityReport || isLoading) && (
+        { (isExperiment && (securityReport || isLoading)) && (
           <Box order={{ base: 3, md: 4 }}>
             <AppSecurityReport
               securityReport={ securityReport }

ui/pages/Marketplace.tsx

@@ -9,6 +9,7 @@ import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ContractListModal from 'ui/marketplace/ContractListModal';
 import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
@@ -73,6 +74,7 @@ const Marketplace = () => {
   } = useMarketplace();
 
   const isMobile = useIsMobile();
+  const { value: isExperiment } = useFeatureValue('security_score_exp', false);
 
   const categoryTabs = React.useMemo(() => {
     const tabs: Array<TabItem> = categories.map(category => ({
@@ -181,52 +183,54 @@ const Marketplace = () => {
       </Box>
 
       <Flex direction={{ base: 'column', lg: 'row' }} mb={{ base: 4, lg: 6 }} gap={{ base: 4, lg: 3 }}>
-        <RadioButtonGroup<MarketplaceDisplayType>
-          onChange={ handleNFTsDisplayTypeChange }
-          defaultValue={ displayType }
-          name="type"
-          options={ [
-            {
-              title: 'Discovery',
-              value: 'default',
-              icon: 'apps_xs',
-              onlyIcon: false,
-            },
-            {
-              title: 'Apps scores',
-              value: 'scores',
-              icon: 'apps_list',
-              onlyIcon: false,
-              contentAfter: (
-                <Flex
-                  alignItems="center"
-                  h={ 3 }
-                  bg="red.400"
-                  borderRadius="2px"
-                  fontSize="10px"
-                  fontWeight="500"
-                  color="white"
-                  px="2px"
-                  ml={ 1 }
-                >
-                  { isMobile ? <IconSvg name="beta" boxSize={ 2 }/> : 'beta' }
-                </Flex>
-              ),
-            },
-          ] }
-          autoWidth
-        />
+        { isExperiment && (
+          <RadioButtonGroup<MarketplaceDisplayType>
+            onChange={ handleNFTsDisplayTypeChange }
+            defaultValue={ displayType }
+            name="type"
+            options={ [
+              {
+                title: 'Discovery',
+                value: 'default',
+                icon: 'apps_xs',
+                onlyIcon: false,
+              },
+              {
+                title: 'Apps scores',
+                value: 'scores',
+                icon: 'apps_list',
+                onlyIcon: false,
+                contentAfter: (
+                  <Flex
+                    alignItems="center"
+                    h={ 3 }
+                    bg="red.400"
+                    borderRadius="2px"
+                    fontSize="10px"
+                    fontWeight="500"
+                    color="white"
+                    px="2px"
+                    ml={ 1 }
+                  >
+                    { isMobile ? <IconSvg name="beta" boxSize={ 2 }/> : 'beta' }
+                  </Flex>
+                ),
+              },
+            ] }
+            autoWidth
+          />
+        ) }
         <FilterInput
           initialValue={ filterQuery }
           onChange={ onSearchInputChange }
           placeholder="Find app"
           isLoading={ isPlaceholderData }
-          size="xs"
+          size={ isExperiment ? 'xs' : 'sm' }
           flex="1"
         />
       </Flex>
 
-      { (displayType === 'scores') ? (
+      { (displayType === 'scores' && isExperiment) ? (
         <MarketplaceListWithScores
           apps={ displayedApps }
           showAppInfo={ showAppInfo }