Merge pull request #730 from Magickbase/develop

Magickbase · Nov 27, 2022 · f685fab · f685fab · vercel · Nov 27, 2022
2 parents 33e9620 + 147f53b
commit f685fab
Show file tree

Hide file tree

Showing 27 changed files with 291 additions and 160 deletions.
diff --git a/.github/workflows/auto-merge.yml b/.github/workflows/auto-merge.yml
@@ -31,7 +31,7 @@ jobs:
           source_branch: 'develop'
           destination_branch: 'v1/master'
           pr_title: 'Merge develop into v1 mainnet'
-          pr_reviewer: 'keith-cy'
+          pr_reviewer: 'keith-cy,FrederLu'
           pr_label: 'auto-pr'
           github_token: ${{ secrets.GITHUB_TOKEN }}
 
@@ -46,7 +46,7 @@ jobs:
           source_branch: 'develop'
           destination_branch: 'v1/testnet'
           pr_title: 'Merge develop into v1 testnet'
-          pr_reviewer: 'keith-cy'
+          pr_reviewer: 'keith-cy,FrederLu'
           pr_label: 'auto-pr'
           github_token: ${{ secrets.GITHUB_TOKEN }}
 

diff --git a/.github/workflows/test.e2e.yml b/.github/workflows/test.e2e.yml
@@ -31,7 +31,7 @@ jobs:
         run: npx cypress info
 
       - name: Cypress run
-        uses: cypress-io/[email protected].0
+        uses: cypress-io/[email protected].1
         with:
           install: false
           build: npm run build

diff --git a/components/AccountOverview/index.tsx b/components/AccountOverview/index.tsx
@@ -21,11 +21,9 @@ export interface AccountBase {
   transaction_count: number
   nonce: number
 }
-
 interface UnknownUser extends AccountBase {
   type: GraphQLSchema.AccountType.Unknown
 }
-
 interface EthUser extends AccountBase {
   type: GraphQLSchema.AccountType.EthUser
   script: BasicScript
@@ -267,16 +265,14 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
       ),
     })
 
-  return (
-    <div className={styles.container} data-account-type={account.type}>
-      {account.type === GraphQLSchema.AccountType.MetaContract ? (
-        <MetaContract {...(account.script as MetaContract['script'])} />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.EthUser ? (
-        <User nonce={account.nonce} isLoading={isOverviewLoading} />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.EthAddrReg ? <EthAddrReg /> : null}
-      {account.type === GraphQLSchema.AccountType.PolyjuiceContract ? (
+  const getInfoBlock = account => {
+    const { type } = account
+
+    const blockMap = {
+      [`${GraphQLSchema.AccountType.MetaContract}`]: <MetaContract {...(account.script as MetaContract['script'])} />,
+      [`${GraphQLSchema.AccountType.EthUser}`]: <User nonce={account.nonce} isLoading={isOverviewLoading} />,
+      [`${GraphQLSchema.AccountType.EthAddrReg}`]: <EthAddrReg />,
+      [`${GraphQLSchema.AccountType.PolyjuiceContract}`]: (
         <SmartContract
           deployer={deployerAddr}
           deployTxHash={account.smart_contract?.deployment_tx_hash!}
@@ -286,15 +282,23 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
           refetch={refetch}
           isLoading={isOverviewLoading}
         />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.PolyjuiceCreator ? (
+      ),
+      [`${GraphQLSchema.AccountType.PolyjuiceCreator}`]: (
         <Polyjuice script={account.script as PolyjuiceCreator['script']} scriptHash={account.script_hash} />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.Udt && account.udt ? (
+      ),
+      [`${GraphQLSchema.AccountType.Udt}`]: account.udt ? (
         <SUDT udt={account.udt} script={account.script} script_hash={account.script_hash} />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.Unknown ? <UnknownAccount nonce={account.nonce} /> : null}
+      ) : null,
+      [`${GraphQLSchema.AccountType.Unknown}`]: <UnknownAccount nonce={account.nonce} />,
+    }
+    const infoBlock = blockMap[type]
+
+    return infoBlock ? <div className={`${styles['info-width']}`}>{infoBlock}</div> : null
+  }
 
+  return (
+    <div className={styles.container} data-account-type={account.type}>
+      {getInfoBlock(account)}
       <InfoList title={t('overview')} list={infoList} />
     </div>
   )

diff --git a/components/AccountOverview/styles.module.scss b/components/AccountOverview/styles.module.scss
@@ -55,13 +55,13 @@
     }
     dl[role='listitem'] {
       dt {
-        flex-basis: 133px !important;
+        flex-basis: 138px !important;
       }
     }
     &[data-account-type='META_CONTRACT'] {
       dl[role='listitem'] {
         dt {
-          flex-basis: 133px !important;
+          flex-basis: 138px !important;
         }
       }
     }
@@ -74,3 +74,9 @@
     }
   }
 }
+
+@media screen and (min-width: 1024px) {
+  .info-width {
+    width: calc(50% - 32px);
+  }
+}
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/components/InfoList/index.tsx b/components/InfoList/index.tsx
@@ -5,6 +5,7 @@ export interface InfoItermProps {
   content: React.ReactNode
   expandable?: boolean
   tooltipTitle?: string
+  ddClassName?: string
 }
 
 const InfoList: React.FC<{
@@ -26,7 +27,7 @@ const InfoList: React.FC<{
         ) : null}
         {list
           .filter(v => v)
-          .map(({ field, content, expandable, tooltipTitle }, idx) => {
+          .map(({ field, content, expandable, tooltipTitle, ddClassName }, idx) => {
             return (
               <dl
                 key={field}
@@ -40,7 +41,7 @@ const InfoList: React.FC<{
               >
                 <dt className={styles.term}>{field}</dt>
                 <dd
-                  className={`${styles.desc} ${tooltipTitle ? 'tooltip' : ''}`}
+                  className={`${styles.desc} ${ddClassName} ${tooltipTitle ? 'tooltip' : ''}`}
                   data-tooltip={tooltipTitle}
                   data-show-tooltip={!!tooltipTitle}
                   data-expandable={expandable}

diff --git a/components/InfoList/styles.module.scss b/components/InfoList/styles.module.scss
@@ -67,6 +67,7 @@
       padding-right: 1rem;
       color: var(--secondary-text-color);
       font-weight: 400;
+      white-space: nowrap;
     }
 
     dd.desc {

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
 import { OutlinedInput, InputAdornment, styled, InputBaseProps } from '@mui/material'
@@ -33,17 +33,32 @@ const StyledInputBase = styled((props: InputBaseProps) => <OutlinedInput {...pro
 }))
 
 const Search = () => {
-  const { push, asPath } = useRouter()
+  const { push, asPath, query } = useRouter()
   const searchRef = useRef<HTMLInputElement | null>(null)
   const [showClearBtn, setShowClearBtn] = useState(false)
   const isHome = asPath === '/' || asPath === '/zh-CN'
   const theme = useTheme()
 
+  useEffect(() => {
+    if (!searchRef.current) return
+    if (query.search) {
+      searchRef.current.value = (query.search as string) || ''
+    } else {
+      // on page refresh, next.js's query.search will always be null, so need this fallback
+      const queryValue = new URLSearchParams(window.location.search).get('search')
+      if (queryValue) {
+        searchRef.current.value = queryValue || ''
+      }
+    }
+    if (searchRef.current.value) {
+      setShowClearBtn(true)
+    }
+  }, [query, asPath])
+
   const handleSearch = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     await handleSearchKeyPress(e, push)
     if (e.key === 'Enter') {
       searchRef.current?.blur()
-      searchRef.current.value = ''
       setShowClearBtn(false)
     }
   }