fix: added text component for table

packages/ui/src/pages/accounts/components/table/asset-text-cell/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { Box } from 'ui/src/components/box'
+import { Text } from 'ui/src/components/typography'
+
+import * as styles from './styles.css'
+
+interface IProps {
+	value?: string
+}
+
+export const AssetTextCell: React.FC<IProps> = props => {
+	const { value } = props
+
+	return (
+		<Box className={styles.assetTextCellWrapper}>
+			<Text capitalizeFirstLetter size="small" truncate weight="medium">
+				{value}
+			</Text>
+		</Box>
+	)
+}

packages/ui/src/pages/accounts/components/table/asset-text-cell/styles.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css'
+
+import { sprinkles } from 'ui/src/components/system/sprinkles.css'
+
+export const assetTextCellWrapper = style([
+	sprinkles({
+		position: 'relative',
+		zIndex: 1,
+	}),
+	{},
+])

packages/ui/src/pages/accounts/nfts/index.tsx

@@ -9,6 +9,7 @@ import { TableWithEmptyState } from 'ui/src/components/table'
 import { useNonFungibleIds, useNonFungiblesData } from 'ui/src/hooks/dapp/use-entity-nft'
 import { useSelectedAccounts } from 'ui/src/hooks/use-accounts'
 import { AssetNameCell } from 'ui/src/pages/accounts/components/table/asset-name-cell'
+import { AssetTextCell } from 'ui/src/pages/accounts/components/table/asset-text-cell'
 
 import { NftDataCell } from '../components/table/nft-data-cell'
 import * as styles from '../components/table/styles.css'
@@ -88,6 +89,7 @@ const NFTs: React.FC = () => {
 				Header: intl.formatMessage(messages.non_fungible_id),
 				accessor: 'non_fungible_id',
 				width: 'auto',
+				Cell: AssetTextCell,
 			},
 			{
 				Header: intl.formatMessage(messages.nft),