[BX-1101] NFT Details - Core (#1128)

src/core/resources/_selectors/nfts.ts

@@ -1,30 +1,43 @@
+import { InfiniteData } from '@tanstack/react-query';
+
 import { UniqueAsset } from '~/core/types/nfts';
 
-export const selectNftsByCollection = (nfts: UniqueAsset[]) => {
-  return nfts.reduce(
-    (collections, nft) => {
-      const currentCollectionId = nft.collection.collection_id;
-      if (currentCollectionId) {
-        const existingCollection = collections[currentCollectionId];
-        if (existingCollection) {
-          existingCollection.assets.push(nft);
-        } else {
-          collections[currentCollectionId] = {
-            assets: [nft],
-            collection: nft.collection,
-            lastCollectionAcquisition: nft.last_collection_acquisition,
-          };
+type NFTInfiniteData = InfiniteData<{
+  nfts: UniqueAsset[];
+  nextPage?: string | null;
+}>;
+
+export const selectNfts = (data?: NFTInfiniteData) =>
+  data?.pages?.map((page) => page.nfts).flat();
+
+export const selectNftCollections = (data?: NFTInfiniteData) => {
+  const nfts = selectNfts(data);
+  const collections =
+    nfts?.reduce(
+      (collections, nft) => {
+        const currentCollectionId = nft.collection.collection_id;
+        if (currentCollectionId) {
+          const existingCollection = collections[currentCollectionId];
+          if (existingCollection) {
+            existingCollection.assets.push(nft);
+          } else {
+            collections[currentCollectionId] = {
+              assets: [nft],
+              collection: nft.collection,
+              lastCollectionAcquisition: nft.last_collection_acquisition,
+            };
+          }
+        }
+        return collections;
+      },
+      {} as Record<
+        string,
+        {
+          assets: UniqueAsset[];
+          collection: UniqueAsset['collection'];
+          lastCollectionAcquisition?: string;
         }
-      }
-      return collections;
-    },
-    {} as Record<
-      string,
-      {
-        assets: UniqueAsset[];
-        collection: UniqueAsset['collection'];
-        lastCollectionAcquisition?: string;
-      }
-    >,
-  );
+      >,
+    ) || {};
+  return collections;
 };

src/core/types/nfts.ts

@@ -255,14 +255,6 @@ export const uniqueTokenFormats = {
 } as const;
 export type UniqueTokenFormat = keyof typeof uniqueTokenFormats;
 
-interface UniqueAssetLastSale {
-  total_price: string;
-  payment_token?: {
-    symbol: string;
-    usd_price: string;
-  };
-}
-
 export interface UniqueAsset {
   animation_url?: string | null;
   description?: string | null;
@@ -271,7 +263,19 @@ export interface UniqueAsset {
   image_preview_url?: string | null;
   image_thumbnail_url?: string | null;
   image_url?: string | null;
-  last_sale?: UniqueAssetLastSale | null;
+  last_sale?: {
+    from_address: string | null;
+    to_address: string | null;
+    quantity: number | null;
+    timestamp: string;
+    transaction: string;
+    marketplace_id: SimpleHashMarketplaceId;
+    marketplace_name: string;
+    is_bundle_sale: boolean;
+    payment_token: SimpleHashPaymentToken | null;
+    unit_price: number | null;
+    total_price: number | null;
+  } | null;
   name: string;
   permalink: string;
   traits: UniqueAssetTrait[];
@@ -282,6 +286,7 @@ export interface UniqueAsset {
     schema_name?: string;
     symbol?: string;
     total_supply?: number | null;
+    deployed_by: string | null;
   };
   background: string | null;
   collection: {

src/core/utils/nfts.ts

@@ -149,6 +149,7 @@ export function simpleHashNFTToUniqueAsset(
       name: nft.contract.name || undefined,
       schema_name: standard,
       symbol: nft.contract.symbol || undefined,
+      deployed_by: nft.contract.deployed_by,
     },
     background: nft.background_color,
     collection: {
@@ -202,6 +203,7 @@ export function simpleHashNFTToUniqueAsset(
     audio_properties: nft.audio_properties,
     model_url: nft.model_url,
     model_properties: nft.model_properties,
+    last_sale: nft.last_sale,
   };
 }
 

src/design-system/styles/designTokens.ts

@@ -1013,7 +1013,6 @@ export const symbolNames = selectSymbolNames(
   'bolt.shield',
   'bolt.shield.fill',
   'arrow.up.circle.fill',
-  'arrow.down.circle.fill',
   'curlybraces',
   'calendar',
   'signature',
@@ -1024,6 +1023,12 @@ export const symbolNames = selectSymbolNames(
   'hammer.fill',
   'checklist.unchecked',
   'list.bullet',
+  'square.and.arrow.up',
+  'arrow.down.circle.fill',
+  'arrow.up.right.circle',
+  'arrow.up.right.square.fill',
+  'at.circle.fill',
+  'ellipsis.bubble.fill',
 );
 export type SymbolName = (typeof symbolNames)[number];
 

src/entries/popup/Routes.tsx

@@ -39,6 +39,7 @@ import { CreatePassword } from './pages/createPassword';
 import { Home } from './pages/home';
 import { ActivityDetails } from './pages/home/Activity/ActivityDetails';
 import { ConnectedApps } from './pages/home/ConnectedApps';
+import NFTDetails from './pages/home/NFTs/NFTDetails';
 import { TokenDetails } from './pages/home/TokenDetails/TokenDetails';
 import { ChooseHW } from './pages/hw/chooseHW';
 import { ConnectLedger } from './pages/hw/ledger';
@@ -147,6 +148,14 @@ const ROUTE_DATA = [
       },
     ],
   },
+  {
+    path: ROUTES.NFT_DETAILS(':collectionId', ':nftId'),
+    element: (
+      <AnimatedRoute direction="right">
+        <NFTDetails />
+      </AnimatedRoute>
+    ),
+  },
   {
     path: ROUTES.APPROVE_APP_REQUEST,
     element: (

src/entries/popup/components/DropdownMenu/DropdownMenu.tsx

@@ -281,6 +281,7 @@ export const DropdownMenuItem = ({
 };
 
 interface DropdownMenuRadioItemProps {
+  cursor?: BoxStyles['cursor'];
   children: ReactNode;
   value: string;
   selectedValue?: string;
@@ -291,6 +292,7 @@ interface DropdownMenuRadioItemProps {
 
 export const DropdownMenuRadioItem = (props: DropdownMenuRadioItemProps) => {
   const {
+    cursor,
     children,
     value,
     selectedValue,
@@ -329,6 +331,7 @@ export const DropdownMenuRadioItem = (props: DropdownMenuRadioItemProps) => {
       }}
       borderColor={isSelectedValue ? 'buttonStrokeSecondary' : 'transparent'}
       borderWidth="1px"
+      cursor={cursor}
     >
       {children}
     </Box>

src/entries/popup/components/HomeMenuRow/HomeMenuRow.tsx

@@ -10,7 +10,7 @@ export const HomeMenuRow = ({
 }: {
   leftComponent: ReactElement;
   centerComponent: ReactElement;
-  rightComponent: ReactElement | null;
+  rightComponent?: ReactElement | null;
   testId?: string;
 }) => {
   return (
@@ -20,7 +20,9 @@ export const HomeMenuRow = ({
         <Column>
           <Columns alignVertical="center" space="8px">
             <Column>{centerComponent}</Column>
-            <Column width="content">{rightComponent}</Column>
+            {rightComponent && (
+              <Column width="content">{rightComponent}</Column>
+            )}
           </Columns>
         </Column>
       </Columns>

src/entries/popup/components/Navbar/Navbar.tsx

@@ -31,6 +31,7 @@ type NavbarProps = {
   titleTestId?: string;
   titleComponent?: React.ReactNode;
   background?: BackgroundColor;
+  style?: React.CSSProperties;
 };
 
 export function Navbar({
@@ -40,6 +41,7 @@ export function Navbar({
   titleTestId,
   titleComponent,
   background,
+  style = {},
 }: NavbarProps) {
   return (
     <Box
@@ -53,6 +55,7 @@ export function Navbar({
         height: NAVBAR_HEIGHT,
         minHeight: NAVBAR_HEIGHT,
         zIndex: zIndexes.NAVBAR,
+        ...style,
       }}
     >
       {leftComponent && (
@@ -239,9 +242,11 @@ function NavbarButtonWithBack({
 export function NavbarBackButton({
   onClick,
   withinModal,
+  variant,
 }: {
   onClick?: () => void;
   withinModal?: boolean;
+  variant?: 'flat' | 'transparent' | 'transparentHover';
 }) {
   return (
     <NavbarButtonWithBack
@@ -250,6 +255,7 @@ export function NavbarBackButton({
       symbolSize={14}
       symbol="arrow.left"
       withinModal={withinModal}
+      variant={variant}
     />
   );
 }

src/entries/popup/global.css.ts

@@ -59,3 +59,7 @@ globalStyle('.home-tab-wrapper:focus-visible', {
   outlineOffset: '2px',
   outlineColor: 'transparent',
 });
+
+globalStyle('a:link, a:visited', {
+  color: 'inherit',
+});