feat: add official site and description on erc 721/1155 pages

Magickbase · Nov 17, 2022 · db0cc62 · db0cc62
1 parent 228bd92
commit db0cc62
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 9 deletions.
diff --git a/pages/multi-token-collection/[address].tsx b/pages/multi-token-collection/[address].tsx
@@ -18,7 +18,10 @@ import InventoryList, { fetchInventoryListOfCollection } from 'components/MultiT
 import { client, GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
 
-type CollectionInfoProps = Omit<GraphQLSchema.MultiTokenCollectionListItem, 'id' | 'account'> | undefined
+type CollectionInfoProps =
+  | (Omit<GraphQLSchema.MultiTokenCollectionListItem, 'id' | 'account'> &
+      Record<'description' | 'official_site', string | null>)
+  | undefined
 
 interface InfoProps {
   erc1155_udts: {
@@ -40,6 +43,8 @@ const infoQuery = gql`
         token_type_count
         holders_count
         minted_count
+        description
+        official_site
       }
     }
   }
@@ -111,10 +116,21 @@ const MultiTokenCollection = () => {
       field: t('contract'),
       content: <HashLink label={address as string} href={`/account/${address}`} />,
     },
-
     {
-      field: '',
-      content: <div data-role="placeholder" style={{ height: `1.5rem` }}></div>,
+      field: t('officialSite'),
+      content: info ? (
+        info.official_site ? (
+          <HashLink label={info.official_site} href={info.official_site} external />
+        ) : (
+          '-'
+        )
+      ) : (
+        <Skeleton animation="wave" />
+      ),
+    },
+    {
+      field: t('description'),
+      content: info ? info.description || '-' : <Skeleton animation="wave" />,
     },
   ]
 
@@ -131,6 +147,10 @@ const MultiTokenCollection = () => {
       field: t('holder_count'),
       content: isInfoLoading ? <Skeleton animation="wave" /> : (+info?.holders_count ?? 0).toLocaleString('en'),
     },
+    {
+      field: '',
+      content: <div data-role="placeholder" style={{ height: `1.5rem` }}></div>,
+    },
   ]
 
   const title = t(`multi-token-collection`)

diff --git a/pages/multi-token-collection/styles.module.scss b/pages/multi-token-collection/styles.module.scss
@@ -30,6 +30,7 @@
   dd {
     white-space: breaks-spaces;
     word-break: break-all;
+    text-transform: none;
   }
 
   @media screen and (min-width: 1024px) {
@@ -50,6 +51,9 @@
     & > div {
       margin-bottom: 1rem;
     }
+    dl[title=''] {
+      display: none;
+    }
   }
 }
 

diff --git a/pages/nft-collection/[address].tsx b/pages/nft-collection/[address].tsx
@@ -18,7 +18,10 @@ import InventoryList, { fetchInventoryListOfCollection } from 'components/NFTInv
 import { client, GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
 
-type CollectionInfoProps = Omit<GraphQLSchema.NftCollectionListItem, 'id' | 'account'> | undefined
+type CollectionInfoProps =
+  | (Omit<GraphQLSchema.NftCollectionListItem, 'id' | 'account'> &
+      Record<'description' | 'official_site', string | null>)
+  | undefined
 
 interface CollectionProps {
   erc721_udts: {
@@ -39,6 +42,8 @@ const infoQuery = gql`
         icon
         holders_count
         minted_count
+        description
+        official_site
       }
     }
   }
@@ -110,6 +115,22 @@ const NftCollection = () => {
       field: t('contract'),
       content: <HashLink label={address as string} href={`/account/${address}`} />,
     },
+    {
+      field: t('officialSite'),
+      content: info ? (
+        info.official_site ? (
+          <HashLink label={info.official_site} href={info.official_site} external />
+        ) : (
+          '-'
+        )
+      ) : (
+        <Skeleton animation="wave" />
+      ),
+    },
+    {
+      field: t('description'),
+      content: info ? info.description || '-' : <Skeleton animation="wave" />,
+    },
   ]
 
   const stats: Array<{ field: string; content: React.ReactNode }> = [
@@ -121,6 +142,12 @@ const NftCollection = () => {
       field: t('minted_count'),
       content: isInfoLoading ? <Skeleton animation="wave" /> : (+info?.minted_count ?? 0).toLocaleString('en'),
     },
+    info?.official_site
+      ? {
+          field: '',
+          content: <div data-role="placeholder"></div>,
+        }
+      : null,
   ]
 
   const title = t(`nft-collection`)

diff --git a/pages/nft-collection/styles.module.scss b/pages/nft-collection/styles.module.scss
@@ -32,6 +32,7 @@
   dd {
     white-space: breaks-spaces;
     word-break: break-all;
+    text-transform: none;
   }
 
   @media screen and (min-width: 1024px) {
@@ -52,6 +53,9 @@
     & > div {
       margin-bottom: 1rem;
     }
+    dl[title=''] {
+      display: none;
+    }
   }
 }
 

diff --git a/public/locales/en-US/multi-token.json b/public/locales/en-US/multi-token.json
@@ -17,5 +17,7 @@
   "token-id": "Token ID",
   "owner": "Owner",
   "name": "Name",
-  "quantity": "Quantity"
+  "quantity": "Quantity",
+  "description": "Description",
+  "officialSite": "Official Site"
 }
diff --git a/public/locales/en-US/nft.json b/public/locales/en-US/nft.json
@@ -15,5 +15,7 @@
   "erc-721": "ERC 721",
   "token-id": "Token ID",
   "owner": "Owner",
-  "name": "Name"
+  "name": "Name",
+  "description": "Description",
+  "officialSite": "Official Site"
 }
diff --git a/public/locales/zh-CN/multi-token.json b/public/locales/zh-CN/multi-token.json
@@ -17,5 +17,7 @@
   "token-id": "通证 ID",
   "owner": "所属人",
   "name": "名称",
-  "quantity": "数量"
+  "quantity": "数量",
+  "description": "简介",
+  "officialSite": "官方网站"
 }
diff --git a/public/locales/zh-CN/nft.json b/public/locales/zh-CN/nft.json
@@ -15,5 +15,7 @@
   "erc-721": "ERC 721",
   "token-id": "通证 ID",
   "owner": "所属人",
-  "name": "名称"
+  "name": "名称",
+  "description": "简介",
+  "officialSite": "官方网站"
 }