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 <[email protected]>

Author: musicboy0322

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

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import CardMedia from "@mui/material/CardMedia";
@@ -8,20 +10,30 @@ import ListItemText from "@mui/material/ListItemText";
 
 import { EthAllERC721TokensByAccountResponseType } from "../../queries";
 import ShortenedTypography from "../../../../components/ui/ShortenedTypography";
-import ShortenedLink from "../../../../components/ui/ShortenedLink";
 import nftPlaceholderImage from "../../static/nft-placeholder.png";
 
 export type NFTCardProps = {
   tokenDetails: EthAllERC721TokensByAccountResponseType;
 };
 
 export default function NFTCard({ tokenDetails }: NFTCardProps) {
+  // set nftPlaceholderImage as default image
+  const [imageUrl, setImageUrl] = useState(
+    tokenDetails.nft_image || nftPlaceholderImage,
+  );
+
+  // use default image if imageUrl can not load in
+  const handleImageError = () => {
+    setImageUrl(nftPlaceholderImage);
+  };
+
   return (
-    <Card sx={{ maxWidth: 250 }}>
+    <Card sx={{ maxWidth: 300 }}>
       <CardMedia
         component="img"
-        image={nftPlaceholderImage}
+        image={imageUrl}
         alt="nft token image"
+        onError={handleImageError}
       />
       <CardContent>
         <Typography variant="h5" component="div">
@@ -50,23 +62,24 @@ export default function NFTCard({ tokenDetails }: NFTCardProps) {
               direction="rtl"
             />
           </ListItem>
-          {tokenDetails.uri && (
-            <ListItem disablePadding>
-              <ListItemText
-                primary="URI"
-                primaryTypographyProps={{ variant: "body2", paddingRight: 5 }}
-              />
-              <ShortenedLink
-                href={tokenDetails.uri}
-                target="_blank"
-                width="70%"
-                rel="noreferrer"
-                direction="ltr"
-                color="text.secondary"
-                variant="body2"
-              />
-            </ListItem>
-          )}
+          <ListItem disablePadding>
+            <ListItemText
+              primary="Name"
+              primaryTypographyProps={{ variant: "body2", paddingRight: 5 }}
+            />
+            <Typography color="text.secondary" variant="body2">
+              {tokenDetails.nft_name}
+            </Typography>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemText
+              primary="Description"
+              primaryTypographyProps={{ variant: "body2", paddingRight: 5 }}
+            />
+            <Typography color="text.secondary" variant="body2">
+              {tokenDetails.nft_description}
+            </Typography>
+          </ListItem>
         </List>
       </CardContent>
     </Card>

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

@@ -168,6 +168,9 @@ export interface EthAllERC721TokensByAccountResponseType {
   uri: string;
   account_address: string;
   last_owner_change: string;
+  nft_name: string;
+  nft_description: string;
+  nft_image: string;
   token_metadata_erc721: TokenMetadata721;
 }
 
@@ -184,7 +187,7 @@ export function ethAllERC721TokensByAccount(accountAddress: string) {
       const { data, error } = await supabase
         .from("token_erc721")
         .select(
-          "token_id, uri, account_address, last_owner_change, token_metadata_erc721(*)",
+          "token_id, uri, account_address, last_owner_change, nft_name, nft_description, nft_image, token_metadata_erc721(*)",
         )
         .eq("account_address", accountAddress);