change the link address (#739)

Magickbase · Nov 22, 2022 · b0c50ca · b0c50ca
1 parent 25ca1ed
commit b0c50ca
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 34 deletions.
diff --git a/components/BaseTransferlist/index.tsx b/components/BaseTransferlist/index.tsx
@@ -10,35 +10,43 @@ import TokenLogo from 'components/TokenLogo'
 import FilterMenu from 'components/FilterMenu'
 import RoundedAmount from 'components/RoundedAmount'
 import Tooltip from 'components/Tooltip'
-import SortIcon from 'assets/icons/sort.svg'
 import { GraphQLSchema, ZERO_ADDRESS } from 'utils'
+import SortIcon from 'assets/icons/sort.svg'
 import ChangeIcon from 'assets/icons/change.svg'
 import NoDataIcon from 'assets/icons/no-data.svg'
 import EmptyFilteredListIcon from 'assets/icons/empty-filtered-list.svg'
 import styles from './styles.module.scss'
 
 type udtType = Nullable<Pick<GraphQLSchema.Udt, 'decimal' | 'name' | 'symbol' | 'id' | 'icon'>>
 
+export type TransferListItem = {
+  amount: string
+  from_address: string
+  to_address: string
+  log_index: number
+  transaction_hash: string
+  udt: udtType
+  block?: Nullable<Pick<GraphQLSchema.Block, 'number' | 'timestamp'>>
+  token_contract_address_hash?: string
+  token_id?: number
+}
+
 export type TransferListProps = {
-  entries: Array<{
-    amount: string
-    from_address: string
-    to_address: string
-    log_index: number
-    transaction_hash: string
-    udt: udtType
-    block?: Nullable<Pick<GraphQLSchema.Block, 'number' | 'timestamp'>>
-    token_contract_address_hash?: string
-    token_id?: number
-  }>
+  entries: Array<TransferListItem>
   handleTokenName?: (udt: udtType, ...rest: any) => string
   metadata: GraphQLSchema.PageMetadata
   isShowValue?: boolean
+  type: TransferlistType
+}
+export enum TransferlistType {
+  'Erc20' = 'Erc20',
+  'Erc721' = 'Erc721',
+  'Erc1155' = 'Erc1155',
 }
 
 const FILTER_KEYS = ['address_from', 'address_to']
 
-const TransferList: React.FC<TransferListProps> = ({ entries, metadata, isShowValue = false, handleTokenName }) => {
+const TransferList: React.FC<TransferListProps> = ({ entries, metadata, type, handleTokenName }) => {
   const [isShowLogo, setIsShowLogo] = useState(true)
   const [t] = useTranslation('list')
   const {
@@ -50,6 +58,19 @@ const TransferList: React.FC<TransferListProps> = ({ entries, metadata, isShowVa
   const isFiltered = Object.keys(query).some(key => FILTER_KEYS.includes(key))
   const isFilterUnnecessary = !metadata?.total_count && !isFiltered
 
+  const handleTokenLink = (item: TransferListItem, type: TransferlistType) => {
+    switch (type) {
+      case TransferlistType.Erc20:
+        return `/token/${item.udt.id}`
+      case TransferlistType.Erc721:
+        return `/nft-item/${item.token_contract_address_hash}/${item.token_id}`
+      case TransferlistType.Erc1155:
+        return `/multi-token-item/${item.token_contract_address_hash}/${item.token_id}`
+      default:
+        return ''
+    }
+  }
+
   const handleLogIndexSortClick = (e: React.MouseEvent<HTMLOrSVGImageElement>) => {
     const {
       dataset: { order },
@@ -93,7 +114,7 @@ const TransferList: React.FC<TransferListProps> = ({ entries, metadata, isShowVa
                 <ChangeIcon onClick={handleTokenDisplayChange} />
               </div>
             </th>
-            {isShowValue && <th className={styles['ta-r']}>{`${t('value')}`}</th>}
+            {type === TransferlistType.Erc20 && <th className={styles['ta-r']}>{`${t('value')}`}</th>}
           </tr>
         </thead>
         <tbody>
@@ -131,11 +152,9 @@ const TransferList: React.FC<TransferListProps> = ({ entries, metadata, isShowVa
                 </td>
                 <td className={styles.tokenLogo}>
                   <NextLink
-                    href={
-                      isShowValue
-                        ? `/token/${item.udt.id}`
-                        : `/nft-item/${item.token_contract_address_hash}/${item.token_id}`
-                    }
+                    href={{
+                      pathname: handleTokenLink(item, type),
+                    }}
                   >
                     <a>
                       {isShowLogo ? (
@@ -146,7 +165,7 @@ const TransferList: React.FC<TransferListProps> = ({ entries, metadata, isShowVa
                     </a>
                   </NextLink>
                 </td>
-                {isShowValue && (
+                {type === TransferlistType.Erc20 && (
                   <td title={item.udt.name} className={styles['ta-r']}>
                     <RoundedAmount amount={item.amount} udt={item.udt} />
                   </td>

diff --git a/components/CommonERCTransferlist/index.tsx b/components/CommonERCTransferlist/index.tsx
@@ -1,13 +1,7 @@
-import BaseTransferlist, { TransferListProps } from 'components/BaseTransferlist'
+import BaseTransferlist, { TransferListProps, TransferlistType } from 'components/BaseTransferlist'
 import { gql } from 'graphql-request'
 import { client, GraphQLSchema } from 'utils'
 
-export enum TransferlistType {
-  'Erc20' = 'Erc20',
-  'Erc721' = 'Erc721',
-  'Erc1155' = 'Erc1155',
-}
-
 type Erc20ResponseProps = {
   token_transfers: TransferListProps & {
     block: Nullable<Pick<GraphQLSchema.Block, 'number' | 'timestamp'>>
@@ -107,21 +101,21 @@ const SimpleERC20Transferlist: React.FC<Erc20ResponseProps> = props => {
   const { token_transfers: dataSource } = props
   const handleTokenName = udt => udt.symbol.split('.')[0] || ''
 
-  return <BaseTransferlist {...dataSource} handleTokenName={handleTokenName} isShowValue />
+  return <BaseTransferlist {...dataSource} handleTokenName={handleTokenName} type={TransferlistType.Erc20} />
 }
 
 const SimpleERC721Transferlist: React.FC<Erc721ResponseProps> = props => {
   const { erc721_token_transfers: dataSource } = props
   const handleTokenName = (udt, token_id) => `${udt.name}#${token_id}`
 
-  return <BaseTransferlist {...dataSource} handleTokenName={handleTokenName} />
+  return <BaseTransferlist {...dataSource} handleTokenName={handleTokenName} type={TransferlistType.Erc721} />
 }
 
 const SimpleERC1155Transferlist: React.FC<Erc1155ResponseProps> = props => {
   const { erc1155_token_transfers: dataSource } = props
   const handleTokenName = (udt, token_id) => `${udt.name}#${token_id}`
 
-  return <BaseTransferlist {...dataSource} handleTokenName={handleTokenName} />
+  return <BaseTransferlist {...dataSource} handleTokenName={handleTokenName} type={TransferlistType.Erc1155} />
 }
 
 const CommonERCTransferlist: React.FC<any> = props => {

diff --git a/pages/multi-token-item/[...id].tsx b/pages/multi-token-item/[...id].tsx
@@ -100,7 +100,7 @@ const MultiTokenItem = () => {
     limit: Number.isNaN(+page_size) ? +SIZES[1] : +page_size,
   }
 
-  const { isLoading: isInfoLoading, data: info = {} } = useQuery(
+  const { isLoading: isInfoLoading, data: info } = useQuery(
     ['multi-token-item-info', address],
     () => fetchInfo({ address, token_id }),
     {
@@ -153,8 +153,8 @@ const MultiTokenItem = () => {
     },
   ]
 
-  const { metadata = {}, collection } = info as CollectionInfo
-  const { image: imageUrl = '', name = '' } = metadata as MetadataProps
+  const { metadata = {}, collection } = (info as CollectionInfo) || {}
+  const { image: imageUrl = '', name = '' } = (metadata as MetadataProps) || {}
 
   const title = `${t('multi-token-collection')} ${name ?? collection?.name ?? '-'}`
 

diff --git a/pages/tx/[hash].tsx b/pages/tx/[hash].tsx
@@ -12,7 +12,7 @@ import Tabs from 'components/Tabs'
 import SubpageHead from 'components/SubpageHead'
 import PageTitle from 'components/PageTitle'
 import InfoList from 'components/InfoList'
-import CommonERCTransferlist, { fetchERCTransferList, TransferlistType } from 'components/CommonERCTransferlist'
+import CommonERCTransferlist, { fetchERCTransferList } from 'components/CommonERCTransferlist'
 import TxLogsList from 'components/TxLogsList'
 import RawTxData from 'components/RawTxData'
 import CopyBtn from 'components/CopyBtn'
@@ -23,6 +23,7 @@ import Amount from 'components/Amount'
 import { SIZES } from 'components/PageSize'
 import Tooltip from 'components/Tooltip'
 import PolyjuiceStatus from 'components/PolyjuiceStatus'
+import { TransferlistType } from 'components/BaseTransferlist'
 import ExpandIcon from 'assets/icons/expand.svg'
 import {
   formatDatetime,