Fix:update .bit name in nft-collection and bridge token (#857)

Magickbase · Mar 9, 2023 · bfb1a48 · bfb1a48
1 parent 1d36b4d
commit bfb1a48
Show file tree

Hide file tree

Showing 26 changed files with 895 additions and 391 deletions.
diff --git a/components/AddressWithDomain/index.tsx b/components/AddressWithDomain/index.tsx
@@ -9,15 +9,16 @@ type Props = {
   hash: string
   href: string
   leading?: number
+  placement?: 'top' | 'bottom'
 }
 
-const AddressWithDomain = ({ domain, hash, href = '', leading = 8 }: Props) => {
+const AddressWithDomain = ({ domain, hash, href = '', leading = 8, placement = 'top' }: Props) => {
   return (
     <div className={styles.container}>
-      <Tooltip title={domain} placement="top">
+      <Tooltip title=".bit Name" placement={placement}>
         <img src={`${IMG_URL}bit-logo.svg`} loading="lazy" crossOrigin="anonymous" referrerPolicy="no-referrer" />
       </Tooltip>
-      <Tooltip title={hash} placement="top">
+      <Tooltip title={hash} placement={placement}>
         <div>
           <HashLink
             label={domain?.length > leading * 2 ? `${domain?.slice(0, leading)}...${domain?.slice(-leading)}` : domain}

diff --git a/components/AddressWithDomain/styles.module.scss b/components/AddressWithDomain/styles.module.scss
@@ -3,8 +3,8 @@
   align-items: center;
   text-transform: initial;
   & img {
-    width: 16px;
-    height: 16px;
+    width: 16px !important;
+    height: 16px !important;
     border-radius: 50%;
     margin-right: 2px;
   }

diff --git a/components/MultiTokenActivityList/index.tsx b/components/MultiTokenActivityList/index.tsx
@@ -125,8 +125,8 @@ const ActivityList: React.FC<
           {transfers?.metadata.total_count ? (
             transfers.entries.map(item => {
               const method = item.transaction.method_name || item.transaction.method_id
-              const from_bit_alias = item?.from_account?.bit_alias
-              const to_bit_alias = item?.to_account?.bit_alias
+              const fromBitAlias = item.from_account.bit_alias
+              const toBitAlias = item.to_account.bit_alias
 
               const token_ids = Array.isArray(item.token_ids) ? item.token_ids : [item.token_id]
               const amounts = Array.isArray(item.amounts) ? item.amounts : [item.amount]
@@ -170,10 +170,10 @@ const ActivityList: React.FC<
                     </time>
                   </td>
                   <td>
-                    <Address address={item.from_address} type={item.from_account?.type} domain={from_bit_alias} />
+                    <Address address={item.from_address} type={item.from_account.type} domain={fromBitAlias} />
                   </td>
                   <td>
-                    <Address address={item.to_address} type={item.to_account?.type} domain={to_bit_alias} />
+                    <Address address={item.to_address} type={item.to_account.type} domain={toBitAlias} />
                   </td>
                   {viewer ? (
                     <td>

diff --git a/components/MultiTokenHolderList/index.tsx b/components/MultiTokenHolderList/index.tsx
@@ -4,7 +4,10 @@ import Table from 'components/Table'
 import Address from 'components/TruncatedAddress'
 import Pagination from 'components/SimplePagination'
 import NoDataIcon from 'assets/icons/no-data.svg'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
 import { client, GraphQLSchema } from 'utils'
+
 import styles from './styles.module.scss'
 
 export type HolderListProps = {
@@ -13,6 +16,7 @@ export type HolderListProps = {
       rank: number
       address_hash: string
       quantity: number
+      account: Pick<GraphQLSchema.Account, 'bit_alias' | 'eth_address'>
     }>
     metadata: GraphQLSchema.PageMetadata
   }
@@ -24,6 +28,10 @@ const holderFragment = gql`
       rank
       address_hash
       quantity
+      account {
+        bit_alias
+        eth_address
+      }
     }
     metadata {
       before
@@ -51,6 +59,10 @@ const itemHolderListQuery = gql`
         rank
         address_hash
         quantity
+        account {
+          bit_alias
+          eth_address
+        }
       }
       metadata {
         before
@@ -86,6 +98,8 @@ export const fetchItemHoldersList = (variables: ItemHoldersVariables): Promise<H
 
 const MultiTokenHolderList: React.FC<HolderListProps> = ({ holders }) => {
   const [t] = useTranslation('list')
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
 
   return (
     <>
@@ -99,16 +113,20 @@ const MultiTokenHolderList: React.FC<HolderListProps> = ({ holders }) => {
         </thead>
         <tbody>
           {holders?.metadata.total_count ? (
-            holders.entries.map(item => (
-              <tr key={item.address_hash}>
-                <td>{item.rank}</td>
-                <td className={styles.address}>
-                  <Address address={item.address_hash} />
-                  <Address address={item.address_hash} leading={22} />
-                </td>
-                <td>{(+item.quantity).toLocaleString('en')}</td>
-              </tr>
-            ))
+            holders.entries.map(item => {
+              const address = item.account?.eth_address
+              const domain = item.account?.bit_alias
+
+              return (
+                <tr key={address}>
+                  <td>{item.rank}</td>
+                  <td className={styles.address}>
+                    <Address address={address} domain={domain} leading={!isMobile ? 22 : 8} />
+                  </td>
+                  <td>{(+item.quantity).toLocaleString('en')}</td>
+                </tr>
+              )
+            })
           ) : (
             <tr>
               <td colSpan={3}>

diff --git a/components/MultiTokenHolderList/styles.module.scss b/components/MultiTokenHolderList/styles.module.scss
@@ -1,17 +1,4 @@
 @import '../../styles/mixin.scss';
-.address {
-  div:first-of-type {
-    display: none;
-  }
-  @media screen and (max-width: 1024px) {
-    div:first-of-type {
-      display: block;
-    }
-    div:last-of-type {
-      display: none;
-    }
-  }
-}
 
 .noRecords {
   @include empty-list;

diff --git a/components/MultiTokenInventoryList/index.tsx b/components/MultiTokenInventoryList/index.tsx
@@ -4,6 +4,7 @@ import { gql } from 'graphql-request'
 import Pagination from 'components/SimplePagination'
 import HashLink from 'components/HashLink'
 import Tooltip from 'components/Tooltip'
+import Address from 'components/TruncatedAddress'
 import NoDataIcon from 'assets/icons/no-data.svg'
 import { client, getIpfsUrl, GraphQLSchema, handleNftImageLoadError } from 'utils'
 import styles from './styles.module.scss'
@@ -14,7 +15,9 @@ type InventoryListProps = {
       token_id: string
       contract_address_hash: string
       counts: string
-      owner?: string
+      owner?: {
+        account: Pick<GraphQLSchema.Account, 'bit_alias' | 'eth_address'>
+      }
       udt?: {
         id: number
         name: string | null
@@ -120,51 +123,57 @@ const MultiTokenInventoryList: React.FC<InventoryListProps> = ({ inventory, view
   return (
     <>
       <div className={styles.container}>
-        {inventory.entries.map((item, idx) => (
-          <div key={item.token_id + idx} className={styles.card}>
-            <NextLink href={`/multi-token-item/${item.contract_address_hash}/${item.token_id}`}>
-              <a className={styles.cover}>
-                <img
-                  src={getIpfsUrl(item.token_instance?.metadata?.image) ?? '/images/nft-placeholder.svg'}
-                  onError={handleNftImageLoadError}
-                  alt="nft-cover"
-                  loading="lazy"
-                />
-              </a>
-            </NextLink>
+        {inventory.entries.map((item, idx) => {
+          const {
+            owner: {
+              account: { bit_alias, eth_address },
+            },
+          } = item
+
+          return (
+            <div key={item.token_id + idx} className={styles.card}>
+              <NextLink href={`/multi-token-item/${item.contract_address_hash}/${item.token_id}`}>
+                <a className={styles.cover}>
+                  <img
+                    src={getIpfsUrl(item.token_instance?.metadata?.image) ?? '/images/nft-placeholder.svg'}
+                    onError={handleNftImageLoadError}
+                    alt="nft-cover"
+                    loading="lazy"
+                  />
+                </a>
+              </NextLink>
 
-            {viewer ? (
-              <div className={styles.info}>
-                <span>{t('name')}</span>
-                <span>{item.udt.name?.length > 15 ? item.udt.name.slice(0, 15) + '...' : item.udt.name || '-'}</span>
-              </div>
-            ) : (
-              <div className={styles.info}>
-                <span>{t('quantity')}</span>
-                <span>{(+item.counts || 0).toLocaleString('en')}</span>
-              </div>
-            )}
+              {viewer ? (
+                <div className={styles.info}>
+                  <span>{t('name')}</span>
+                  <span>{item.udt.name?.length > 15 ? item.udt.name.slice(0, 15) + '...' : item.udt.name || '-'}</span>
+                </div>
+              ) : (
+                <div className={styles.info}>
+                  <span>{t('quantity')}</span>
+                  <span>{(+item.counts || 0).toLocaleString('en')}</span>
+                </div>
+              )}
 
-            {token_id ? (
-              <Tooltip title={item.owner} placement="bottom">
+              {token_id ? (
                 <div className={styles.info}>
                   <span>{t('owner')}</span>
-                  <HashLink href={`/account/${item.owner}`} label={item.owner} />
+                  <Address address={eth_address} domain={bit_alias} />
+                </div>
+              ) : (
+                <div className={styles.info}>
+                  <span>{t('token-id')}</span>
+                  <HashLink
+                    label={item.token_id}
+                    href={`/multi-token-item/${item.contract_address_hash}/${item.token_id}`}
+                    monoFont={false}
+                    style={{ fontSize: 14 }}
+                  />
                 </div>
-              </Tooltip>
-            ) : (
-              <div className={styles.info}>
-                <span>{t('token-id')}</span>
-                <HashLink
-                  label={item.token_id}
-                  href={`/multi-token-item/${item.contract_address_hash}/${item.token_id}`}
-                  monoFont={false}
-                  style={{ fontSize: 14 }}
-                />
-              </div>
-            )}
-          </div>
-        ))}
+              )}
+            </div>
+          )
+        })}
       </div>
 
       {inventory.metadata.total_count ? <Pagination {...inventory.metadata} /> : null}

diff --git a/components/NFTActivityList/index.tsx b/components/NFTActivityList/index.tsx
@@ -118,8 +118,8 @@ const ActivityList: React.FC<
           {transfers?.metadata.total_count ? (
             transfers.entries.map(item => {
               const method = item.transaction.method_name || item.transaction.method_id
-              const from_bit_alias = item?.from_account?.bit_alias
-              const to_bit_alias = item?.to_account?.bit_alias
+              const fromBitAlias = item.from_account.bit_alias
+              const toBitAlias = item.to_account.bit_alias
 
               return (
                 <tr key={item.transaction.eth_hash + item.log_index}>
@@ -158,10 +158,10 @@ const ActivityList: React.FC<
                     </time>
                   </td>
                   <td>
-                    <Address address={item.from_address} type={item.from_account?.type} domain={from_bit_alias} />
+                    <Address address={item.from_address} type={item.from_account.type} domain={fromBitAlias} />
                   </td>
                   <td>
-                    <Address address={item.to_address} type={item.to_account?.type} domain={to_bit_alias} />
+                    <Address address={item.to_address} type={item.to_account.type} domain={toBitAlias} />
                   </td>
                   {viewer ? (
                     <td>

diff --git a/components/NFTHolderList/index.tsx b/components/NFTHolderList/index.tsx
@@ -1,18 +1,23 @@
 import { useTranslation } from 'next-i18next'
 import { gql } from 'graphql-request'
+import { useTheme } from '@mui/material/styles'
 import Table from 'components/Table'
 import Address from 'components/TruncatedAddress'
 import Pagination from 'components/SimplePagination'
 import NoDataIcon from 'assets/icons/no-data.svg'
 import { client, GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 export type HolderListProps = {
   holders: {
     entries: Array<{
       rank: number
       address_hash: string
       quantity: string
+      account: {
+        bit_alias: string
+      }
     }>
     metadata: GraphQLSchema.PageMetadata
   }
@@ -25,6 +30,9 @@ const holdersListQuery = gql`
         rank
         address_hash
         quantity
+        account {
+          bit_alias
+        }
       }
       metadata {
         before
@@ -48,6 +56,8 @@ export const fetchHoldersList = (variables: {
 
 const NFTHolderList: React.FC<HolderListProps> = ({ holders }) => {
   const [t] = useTranslation('list')
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
 
   return (
     <>
@@ -64,9 +74,12 @@ const NFTHolderList: React.FC<HolderListProps> = ({ holders }) => {
             holders.entries.map(item => (
               <tr key={item.address_hash}>
                 <td>{item.rank}</td>
-                <td className={styles.address}>
-                  <Address address={item.address_hash} />
-                  <Address address={item.address_hash} leading={22} />
+                <td>
+                  {isMobile ? (
+                    <Address address={item.address_hash} domain={item.account?.bit_alias} />
+                  ) : (
+                    <Address address={item.address_hash} domain={item.account?.bit_alias} leading={22} />
+                  )}
                 </td>
                 <td>{(+item.quantity).toLocaleString('en')}</td>
               </tr>

diff --git a/components/NFTHolderList/styles.module.scss b/components/NFTHolderList/styles.module.scss
@@ -1,17 +1,4 @@
 @import '../../styles/mixin.scss';
-.address {
-  div:first-of-type {
-    display: none;
-  }
-  @media screen and (max-width: 1024px) {
-    div:first-of-type {
-      display: block;
-    }
-    div:last-of-type {
-      display: none;
-    }
-  }
-}
 
 .noRecords {
   @include empty-list;