Skip to content

Commit 9de3e4c

Browse files
musicboy0322petermetz
authored andcommitted
feat(ledger-browser): display new data about ERC721
Primary Change: * Query will select columns of 'nft_name', 'nft_description', 'nft_image' * Display ERC721 metadata 1. Display 'nft_name' and 'nft_description' 2. Display 'nft_image'. If 'nft_image' can not be loaded, it will use default image 3. Delete the part of URL due to already displaying all the metadata from the URL Fixes #3895 Signed-off-by: musicboy0322 <plusultra0322@gmail.com>
1 parent 076f73e commit 9de3e4c

File tree

2 files changed

+37
-21
lines changed
  • packages/cacti-ledger-browser/src/main/typescript/apps/eth

2 files changed

+37
-21
lines changed

packages/cacti-ledger-browser/src/main/typescript/apps/eth/components/AccountERC721View/NFTCard.tsx

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { useState } from "react";
2+
13
import Card from "@mui/material/Card";
24
import CardContent from "@mui/material/CardContent";
35
import CardMedia from "@mui/material/CardMedia";
@@ -8,20 +10,30 @@ import ListItemText from "@mui/material/ListItemText";
810

911
import { EthAllERC721TokensByAccountResponseType } from "../../queries";
1012
import ShortenedTypography from "../../../../components/ui/ShortenedTypography";
11-
import ShortenedLink from "../../../../components/ui/ShortenedLink";
1213
import nftPlaceholderImage from "../../static/nft-placeholder.png";
1314

1415
export type NFTCardProps = {
1516
tokenDetails: EthAllERC721TokensByAccountResponseType;
1617
};
1718

1819
export default function NFTCard({ tokenDetails }: NFTCardProps) {
20+
// set nftPlaceholderImage as default image
21+
const [imageUrl, setImageUrl] = useState(
22+
tokenDetails.nft_image || nftPlaceholderImage,
23+
);
24+
25+
// use default image if imageUrl can not load in
26+
const handleImageError = () => {
27+
setImageUrl(nftPlaceholderImage);
28+
};
29+
1930
return (
20-
<Card sx={{ maxWidth: 250 }}>
31+
<Card sx={{ maxWidth: 300 }}>
2132
<CardMedia
2233
component="img"
23-
image={nftPlaceholderImage}
34+
image={imageUrl}
2435
alt="nft token image"
36+
onError={handleImageError}
2537
/>
2638
<CardContent>
2739
<Typography variant="h5" component="div">
@@ -50,23 +62,24 @@ export default function NFTCard({ tokenDetails }: NFTCardProps) {
5062
direction="rtl"
5163
/>
5264
</ListItem>
53-
{tokenDetails.uri && (
54-
<ListItem disablePadding>
55-
<ListItemText
56-
primary="URI"
57-
primaryTypographyProps={{ variant: "body2", paddingRight: 5 }}
58-
/>
59-
<ShortenedLink
60-
href={tokenDetails.uri}
61-
target="_blank"
62-
width="70%"
63-
rel="noreferrer"
64-
direction="ltr"
65-
color="text.secondary"
66-
variant="body2"
67-
/>
68-
</ListItem>
69-
)}
65+
<ListItem disablePadding>
66+
<ListItemText
67+
primary="Name"
68+
primaryTypographyProps={{ variant: "body2", paddingRight: 5 }}
69+
/>
70+
<Typography color="text.secondary" variant="body2">
71+
{tokenDetails.nft_name}
72+
</Typography>
73+
</ListItem>
74+
<ListItem disablePadding>
75+
<ListItemText
76+
primary="Description"
77+
primaryTypographyProps={{ variant: "body2", paddingRight: 5 }}
78+
/>
79+
<Typography color="text.secondary" variant="body2">
80+
{tokenDetails.nft_description}
81+
</Typography>
82+
</ListItem>
7083
</List>
7184
</CardContent>
7285
</Card>

packages/cacti-ledger-browser/src/main/typescript/apps/eth/queries.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,9 @@ export interface EthAllERC721TokensByAccountResponseType {
168168
uri: string;
169169
account_address: string;
170170
last_owner_change: string;
171+
nft_name: string;
172+
nft_description: string;
173+
nft_image: string;
171174
token_metadata_erc721: TokenMetadata721;
172175
}
173176

@@ -184,7 +187,7 @@ export function ethAllERC721TokensByAccount(accountAddress: string) {
184187
const { data, error } = await supabase
185188
.from("token_erc721")
186189
.select(
187-
"token_id, uri, account_address, last_owner_change, token_metadata_erc721(*)",
190+
"token_id, uri, account_address, last_owner_change, nft_name, nft_description, nft_image, token_metadata_erc721(*)",
188191
)
189192
.eq("account_address", accountAddress);
190193

0 commit comments

Comments
 (0)