feat: creating feature flag for details v2 page (#6359)

* feat: creating feature flag for details v2 page

* eslint ignore

* moving details v2 under trace

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,6 +1,7 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { MgtmVariant, useMgtmFlag } from 'featureFlags/flags/mgtm'
 import { useMiniPortfolioFlag } from 'featureFlags/flags/miniPortfolio'
+import { DetailsV2Variant, useDetailsV2Flag } from 'featureFlags/flags/nftDetails'
 import { NftGraphqlVariant, useNftGraphqlFlag } from 'featureFlags/flags/nftlGraphql'
 import { PayWithAnyTokenVariant, usePayWithAnyTokenFlag } from 'featureFlags/flags/payWithAnyToken'
 import { SwapWidgetVariant, useSwapWidgetFlag } from 'featureFlags/flags/swapWidget'
@@ -235,6 +236,12 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.nftGraphql}
         label="Migrate NFT read endpoints to GQL"
       />
+      <FeatureFlagOption
+        variant={DetailsV2Variant}
+        value={useDetailsV2Flag()}
+        featureFlag={FeatureFlag.detailsV2}
+        label="Use the new details page for nfts"
+      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/featureFlags/flags/featureFlags.ts

@@ -11,4 +11,5 @@ export enum FeatureFlag {
   nftGraphql = 'nft_graphql_migration',
   mgtm = 'web_mobile_go_to_market_enabled',
   miniPortfolio = 'miniPortfolio',
+  detailsV2 = 'details_v2',
 }

src/featureFlags/flags/nftDetails.ts

@@ -0,0 +1,11 @@
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useDetailsV2Flag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.detailsV2)
+}
+
+export function useDetailsV2Enabled(): boolean {
+  return useDetailsV2Flag() === BaseVariant.Enabled
+}
+
+export { BaseVariant as DetailsV2Variant }

src/nft/components/details/NftDetails.tsx

@@ -0,0 +1,14 @@
+import { CollectionInfoForAsset, GenieAsset } from 'nft/types'
+
+interface NftDetailsProps {
+  asset: GenieAsset
+  collection: CollectionInfoForAsset
+}
+
+export const NftDetails = ({ asset, collection }: NftDetailsProps) => {
+  return (
+    <div>
+      Details page for {asset.name} from {collection.collectionName}
+    </div>
+  )
+}

src/nft/pages/asset/Asset.tsx

@@ -1,9 +1,11 @@
 import { Trace } from '@uniswap/analytics'
 import { InterfacePageName } from '@uniswap/analytics-events'
+import { useDetailsV2Enabled } from 'featureFlags/flags/nftDetails'
 import { useNftAssetDetails } from 'graphql/data/nft/Details'
 import { AssetDetails } from 'nft/components/details/AssetDetails'
 import { AssetDetailsLoading } from 'nft/components/details/AssetDetailsLoading'
 import { AssetPriceDetails } from 'nft/components/details/AssetPriceDetails'
+import { NftDetails } from 'nft/components/details/NftDetails'
 import { useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
@@ -37,11 +39,11 @@ const AssetPriceDetailsContainer = styled.div`
 const AssetPage = () => {
   const { tokenId = '', contractAddress = '' } = useParams()
   const { data, loading } = useNftAssetDetails(contractAddress, tokenId)
+  const detailsV2Enabled = useDetailsV2Enabled()
 
   const [asset, collection] = data
 
-  if (loading) return <AssetDetailsLoading />
-
+  if (loading && !detailsV2Enabled) return <AssetDetailsLoading />
   return (
     <>
       <Trace
@@ -49,14 +51,18 @@ const AssetPage = () => {
         properties={{ collection_address: contractAddress, token_id: tokenId }}
         shouldLogImpression
       >
-        {!!asset && !!collection && (
-          <AssetContainer>
-            <AssetDetails collection={collection} asset={asset} />
-            <AssetPriceDetailsContainer>
-              <AssetPriceDetails collection={collection} asset={asset} />
-            </AssetPriceDetailsContainer>
-          </AssetContainer>
-        )}
+        {!!asset && !!collection ? (
+          detailsV2Enabled ? (
+            <NftDetails asset={asset} collection={collection} />
+          ) : (
+            <AssetContainer>
+              <AssetDetails collection={collection} asset={asset} />
+              <AssetPriceDetailsContainer>
+                <AssetPriceDetails collection={collection} asset={asset} />
+              </AssetPriceDetailsContainer>
+            </AssetContainer>
+          )
+        ) : null}
       </Trace>
     </>
   )