tests

mocks/tokens/tokenInstance.ts

+import type { TokenInstance } from 'types/api/tokens';
+
+import * as addressMock from '../address/address';
+import { tokenInfoERC721a } from './tokenInfo';
+
+export const base: TokenInstance = {
+  animation_url: null,
+  external_app_url: null,
+  id: '32925298983216553915666621415831103694597106215670571463977478984525997408266',
+  image_url: null,
+  is_unique: false,
+  holder_address_hash: null,
+  metadata: {
+    animation_url: null,
+    description: 'Sign for you!',
+    external_link: null,
+    image: 'https://i.seadn.io/gcs/files/1ee1c5e1ead058322615e3206abb8ba3.png?w=500&auto=format',
+    name: 'Sign4U',
+  },
+  owner: addressMock.withName,
+  token: tokenInfoERC721a,
+};

types/api/tokens.ts

@@ -13,7 +13,7 @@ export type TokensResponse = {
 export type TokensFilters = { filter: string; type: Array<TokenType> | undefined };
 
 export interface TokenInstance {
-  is_unique: string;
+  is_unique: boolean;
   id: string;
   holder_address_hash: string | null;
   image_url: string | null;

ui/tokenInstance/TokenInstanceDetails.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import TokenInstanceDetails from './TokenInstanceDetails';
+
+const API_URL_ADDRESS = buildApiUrl('address', { id: tokenInstanceMock.base.token.address });
+const API_URL_TOKEN_TRANSFERS_COUNT = buildApiUrl('token_instance_transfers_count', {
+  id: tokenInstanceMock.base.id,
+  hash: tokenInstanceMock.base.token.address,
+});
+
+test('base view +@mobile +@dark-mode', async({ mount, page }) => {
+  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(addressMock.contract),
+  }));
+  await page.route(API_URL_TOKEN_TRANSFERS_COUNT, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({ transfers_count: 42 }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TokenInstanceDetails data={ tokenInstanceMock.base }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/tokenInstance/TokenInstanceDetails.tsx

@@ -64,12 +64,6 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
             <CopyToClipboard text={ data.id } ml={ 1 }/>
           </Flex>
         </DetailsInfoItem>
-        <DetailsInfoItem
-          title="Quantity"
-          hint="Current quantity of this token instance."
-        >
-          1
-        </DetailsInfoItem>
         <TokenInstanceTransfersCount hash={ data.token.address } id={ data.id } onClick={ handleCounterItemClick }/>
       </Grid>
       <NftImage url={ data.image_url } w="250px" flexShrink={ 0 } alignSelf={{ base: 'center', lg: 'flex-start' }}/>