feat: move NFT properties to tab (#27)

AstraProtocol · Nov 30, 2022 · df41a6a · df41a6a
1 parent 0b8996c
commit df41a6a
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 25 deletions.
diff --git a/pages/token/[token]/instance/[index].tsx b/pages/token/[token]/instance/[index].tsx
@@ -25,20 +25,6 @@ const TokenInstanceDetailPage: React.FC<Props> = props => {
 	const { token, tokenData, tokenId, errorMessage } = props
 	const title = tokenData ? `${tokenData.name} (${tokenId}) - ${process.env.NEXT_PUBLIC_TITLE}` : `Token ${token}`
 
-	const _convertRawDataToCardData = useCallback((data: TokenNFTAttributes[]): CardRowItem[] => {
-		if (!data) return []
-		let items: CardRowItem[] = []
-		for (let item of data) {
-			if (item !== undefined && item !== null)
-				items.push({
-					label: item.trait_type,
-					type: 'text',
-					contents: [{ value: item.value }]
-				})
-		}
-
-		return items
-	}, [])
 	return (
 		<Layout>
 			<Head>
@@ -57,11 +43,6 @@ const TokenInstanceDetailPage: React.FC<Props> = props => {
 				{tokenData ? (
 					<>
 						<NftOverview token={token} tokenId={tokenId} tokenData={tokenData} />
-						<CardInfo
-							topElement={<span className="text text-xl padding-2xl">Properties</span>}
-							items={_convertRawDataToCardData(tokenData.attributes)}
-							classes={['margin-top-sm padding-top-md']}
-						/>
 						<NftDetailTab token={token} tokenId={tokenId} tokenData={tokenData} />
 					</>
 				) : (

diff --git a/views/accounts/AddressDetailTabs.tsx b/views/accounts/AddressDetailTabs.tsx
@@ -29,7 +29,7 @@ const AddressDetailTab = ({ address, addressData }: Props) => {
 				classes="none"
 				tabs={[
 					{ title: 'Transactions', id: 'transactions' },
-					{ title: 'Token Transfer', id: 'token-transfer' },
+					{ title: 'Token Transfers', id: 'token-transfer' },
 					{ title: 'Tokens', id: 'tokens' },
 					{ title: 'Internal Transactions', id: 'internal-transactions' },
 					{ title: 'Coin Balance History', id: 'balance-history' },

diff --git a/views/tokens/[instance]/NftDetailTab.tsx b/views/tokens/[instance]/NftDetailTab.tsx
@@ -2,6 +2,7 @@ import BackgroundCard from 'components/Card/Background/BackgroundCard'
 import Tabs from 'components/Tabs/Tabs'
 import useRouterTag from 'hooks/useRouterTag'
 import NftTransferTab from './tabs/NftTransfers'
+import NftProperties from './tabs/NftProperties'
 
 interface Props {
 	token: string
@@ -18,9 +19,13 @@ const NftDetailTab = ({ token, tokenId, tokenData }: Props) => {
 				tabChange={setTag}
 				defaultTab={defaultTag}
 				classes="none"
-				tabs={[{ title: 'Token Transfers', id: 'token-transfers' }]}
+				tabs={[
+					{ title: 'Token Transfers', id: 'token-transfers' },
+					{ title: 'Properties', id: 'properties' }
+				]}
 				contents={{
-					'token-transfers': <NftTransferTab token={token} tokenId={tokenId} tokenData={tokenData} />
+					'token-transfers': <NftTransferTab token={token} tokenId={tokenId} tokenData={tokenData} />,
+					'properties': <NftProperties tokenData={tokenData} />
 				}}
 			></Tabs>
 		</BackgroundCard>

diff --git a/views/tokens/[instance]/tabs/NftProperties/index.tsx b/views/tokens/[instance]/tabs/NftProperties/index.tsx
@@ -0,0 +1,39 @@
+import { PaginationLite } from '@astraprotocol/astra-ui'
+import Row from 'components/Grid/Row'
+import CardInfo, { CardRowItem } from 'components/Card/CardInfo'
+import Empty from 'components/Typography/Empty'
+import usePaginationLite from 'hooks/usePaginationLite'
+import { useState, useCallback } from 'react'
+
+interface Props {
+	tokenData: TokenNFTMetadata
+}
+
+const NftPropertiesTab = ({ tokenData }: Props) => {
+	const _convertRawDataToCardData = useCallback((data: TokenNFTAttributes[]): CardRowItem[] => {
+		if (!data) return []
+		let items: CardRowItem[] = []
+		for (let item of data) {
+			if (item !== undefined && item !== null)
+				items.push({
+					label: item.trait_type,
+					type: 'text',
+					contents: [{ value: item.value }]
+				})
+		}
+
+		return items
+	}, [])
+
+	return (
+		<CardInfo
+			topElement={<span className="text text-xl padding-2xl">Properties</span>}
+			items={_convertRawDataToCardData(tokenData.attributes)}
+			classes={['margin-top-sm padding-top-md']}
+			background={false}
+			backgroundCardBlur={false}
+		/>
+	)
+}
+
+export default NftPropertiesTab
diff --git a/views/transactions/TransactionTabs.tsx b/views/transactions/TransactionTabs.tsx
@@ -59,13 +59,13 @@ export default function TransactionTabs({
 	}
 
 	if (type === 'cosmos') {
-		tabs.unshift({ title: 'Token Transfer', id: 'transfers' })
+		tabs.unshift({ title: 'Token Transfers', id: 'transfers' })
 		contents['transfers'] = (
 			<Transactions rows={transactions} emptyMsg="There are no transfer for this transaction." />
 		)
 	} else {
 		tabs.unshift({ title: 'Internal Transactions', id: 'internal-transactions' })
-		tabs.unshift({ title: 'Token Transfer', id: 'transfers' })
+		tabs.unshift({ title: 'Token Transfers', id: 'transfers' })
 
 		contents['transfers'] = (
 			<Transactions rows={transactions} emptyMsg="There are no transfer for this transaction." />

diff --git a/views/transactions/hook/useConvertData.ts b/views/transactions/hook/useConvertData.ts
@@ -285,7 +285,7 @@ export default function useConvertData({ data }: { data: TransactionDetail }) {
 				CardInfoLabels.gasPrice,
 				CardInfoLabels.typeOfTransfer
 			])
-			//remove label of token transfer
+			//remove label of Token Transfers
 			let hashTransfer = false
 			mainItems.map(item => {
 				if (item.label === CardInfoLabels.tokenTransfers) {