Skip to content

Commit

Permalink
added tags on nft details card if no further details are present to s…
Browse files Browse the repository at this point in the history
…how the full overview panel
  • Loading branch information
radumojic committed Oct 23, 2024
1 parent 00ea067 commit daa9755
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 13 deletions.
9 changes: 9 additions & 0 deletions src/helpers/hasCondition/hasNftOverview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { NftType, NftTypeEnum } from 'types';

export const hasNftOverview = ({ type, metadata, rarities }: NftType) => {
return Boolean(
type &&
type !== NftTypeEnum.MetaESDT &&
(metadata?.attributes || (rarities && Object.keys(rarities).length > 0))
);
};
1 change: 1 addition & 0 deletions src/helpers/hasCondition/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './hasNftOverview';
8 changes: 5 additions & 3 deletions src/helpers/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
export * as bech32 from './bech32';

export * from './formatValue';
export * from './getValue';
export * from './hasCondition';
export * from './processData';

export * from './addressIsBech32';
export * from './amountWithoutRounding';
export * from './analytics';
Expand All @@ -8,8 +13,6 @@ export * from './capitalizeFirstLetter';
export * from './cookie';
export * from './copyToClipboard';
export * from './downloadFile';
export * from './formatValue';
export * from './getValue';
export * from './isContract';
export * from './isEgldToken';
export * from './isEllipsisActive';
Expand All @@ -21,7 +24,6 @@ export * from './parseAmount';
export * from './parseJwt';
export * from './partitionBy';
export * from './scrollToElement';
export * from './processData';
export * from './storage';
export * from './stringIsFloat';
export * from './stringIsInteger';
Expand Down
27 changes: 25 additions & 2 deletions src/layouts/NftLayout/NftDetailsCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
SocialWebsite,
NftSubTypeBadge
} from 'components';
import { formatDate, getNftText } from 'helpers';
import { formatDate, getNftText, hasNftOverview } from 'helpers';
import { faClock, faExclamationTriangle } from 'icons/regular';
import { faHexagonCheck } from 'icons/solid';
import { nftSelector } from 'redux/selectors';
Expand All @@ -43,10 +43,16 @@ export const NftDetailsCard = () => {
media,
assets,
metadata,
isVerified
isVerified,
tags
} = nftState;
const [showData, setShowData] = useState(!Boolean(scamInfo));

const showTags =
!hasNftOverview(nftState) &&
tags !== undefined &&
tags.length > 0 &&
(!scamInfo || showData);
const showPreviewDetails = (!scamInfo || showData) && assets;
const titleTickerText =
ticker !== undefined &&
Expand Down Expand Up @@ -222,6 +228,23 @@ export const NftDetailsCard = () => {
)
}
: {},
showTags
? {
title: 'Tags',
value: (
<div className='d-flex flex-wrap gap-2'>
{tags.map((tag) => (
<div
key={tag}
className='badge badge-outline badge-outline-grey gap-2'
>
#{tag}
</div>
))}
</div>
)
}
: {},
scamInfo
? {
title: '',
Expand Down
11 changes: 3 additions & 8 deletions src/pages/NftDetails/NftDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,18 @@ import { useSelector } from 'react-redux';
import { Navigate } from 'react-router-dom';

import { CardItem, Loader } from 'components';
import { urlBuilder } from 'helpers';
import { urlBuilder, hasNftOverview } from 'helpers';
import { useNetworkRoute } from 'hooks';
import { faTrophy } from 'icons/regular';
import { NftTabs } from 'layouts/NftLayout/NftTabs';
import { nftSelector } from 'redux/selectors';
import { NftTypeEnum } from 'types';

export const NftDetails = () => {
const networkRoute = useNetworkRoute();
const { nftState } = useSelector(nftSelector);
const { type, rarities, tags, metadata, identifier } = nftState;
const { rarities, tags, metadata, identifier } = nftState;

const showOverview = Boolean(
type &&
type !== NftTypeEnum.MetaESDT &&
(metadata?.attributes || (rarities && Object.keys(rarities).length > 0))
);
const showOverview = hasNftOverview(nftState);

if (!showOverview) {
return (
Expand Down

0 comments on commit daa9755

Please sign in to comment.