Merge pull request #555 from Magickbase/develop

Magickbase · Sep 19, 2022 · f89c4cd · f89c4cd · vercel · Sep 19, 2022
2 parents 70d214d + 7f2deda
commit f89c4cd
Show file tree

Hide file tree

Showing 17 changed files with 295 additions and 241 deletions.
diff --git a/components/ERC20TransferList/index.tsx b/components/ERC20TransferList/index.tsx
@@ -12,7 +12,7 @@ import RoundedAmount from 'components/RoundedAmount'
 import TokenLogo from 'components/TokenLogo'
 import ChangeIcon from 'assets/icons/change.svg'
 import NoDataIcon from 'assets/icons/no-data.svg'
-import { client, timeDistance, getBlockStatus, GraphQLSchema } from 'utils'
+import { client, timeDistance, GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
 
 export type TransferListProps = {
@@ -190,7 +190,7 @@ const TransferList: React.FC<
                         </span>
                       </Tooltip>
                       <TxStatusIcon
-                        status={getBlockStatus(item.block.status)}
+                        status={item.block.status}
                         isSuccess={item.polyjuice.status === GraphQLSchema.PolyjuiceStatus.Succeed}
                       />
                     </div>

diff --git a/components/MultiTokenActivityList/index.tsx b/components/MultiTokenActivityList/index.tsx
@@ -8,7 +8,7 @@ import Pagination from 'components/SimplePagination'
 import TxStatusIcon from 'components/TxStatusIcon'
 import TransferDirection from 'components/TransferDirection'
 import NoDataIcon from 'assets/icons/no-data.svg'
-import { client, timeDistance, getBlockStatus, GraphQLSchema } from 'utils'
+import { client, timeDistance, GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
 
 type ActivityListProps = {
@@ -135,7 +135,7 @@ const ActivityList: React.FC<
                         </span>
                       </Tooltip>
                       <TxStatusIcon
-                        status={getBlockStatus(item.block.status)}
+                        status={item.block.status}
                         isSuccess={item.polyjuice.status === GraphQLSchema.PolyjuiceStatus.Succeed}
                       />
                     </div>

diff --git a/components/NFTActivityList/index.tsx b/components/NFTActivityList/index.tsx
@@ -8,7 +8,7 @@ import Pagination from 'components/SimplePagination'
 import TxStatusIcon from 'components/TxStatusIcon'
 import TransferDirection from 'components/TransferDirection'
 import NoDataIcon from 'assets/icons/no-data.svg'
-import { client, timeDistance, getBlockStatus, GraphQLSchema } from 'utils'
+import { client, timeDistance, GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
 
 type ActivityListProps = {
@@ -132,7 +132,7 @@ const ActivityList: React.FC<
                         </span>
                       </Tooltip>
                       <TxStatusIcon
-                        status={getBlockStatus(item.block.status)}
+                        status={item.block.status}
                         isSuccess={item.polyjuice.status === GraphQLSchema.PolyjuiceStatus.Succeed}
                       />
                     </div>

diff --git a/components/PolyjuiceStatus/index.tsx b/components/PolyjuiceStatus/index.tsx
@@ -2,21 +2,22 @@ import { useTranslation } from 'next-i18next'
 import SuccessIcon from 'assets/icons/success.svg'
 import PendingIcon from 'assets/icons/pending.svg'
 import FailedIcon from 'assets/icons/failed.svg'
+import { GraphQLSchema } from 'utils'
 import styles from './styles.module.scss'
 
-const PolyjuiceStatus: React.FC<{ status: 'succeed' | 'failed' | 'pending' | null }> = ({ status }) => {
+const PolyjuiceStatus: React.FC<{ status: GraphQLSchema.PolyjuiceStatus | null }> = ({ status }) => {
   const [t] = useTranslation('tx')
 
   if (!status) {
     return <span>-</span>
   }
 
   return (
-    <div className={styles.container} title={t(status)} data-status={status}>
-      {status === 'succeed' ? <SuccessIcon /> : null}
-      {status === 'failed' ? <FailedIcon /> : null}
-      {status === 'pending' ? <PendingIcon /> : null}
-      {t(status)}
+    <div className={styles.container} title={t(status.toLowerCase())} data-status={status.toLowerCase()}>
+      {status === GraphQLSchema.PolyjuiceStatus.Succeed ? <SuccessIcon /> : null}
+      {status === GraphQLSchema.PolyjuiceStatus.Failed ? <FailedIcon /> : null}
+      {status === GraphQLSchema.PolyjuiceStatus.Pending ? <PendingIcon /> : null}
+      {t(status.toLowerCase())}
     </div>
   )
 }

diff --git a/components/TxList/index.tsx b/components/TxList/index.tsx
@@ -13,7 +13,7 @@ import FilterMenu from 'components/FilterMenu'
 import RoundedAmount from 'components/RoundedAmount'
 import NoDataIcon from 'assets/icons/no-data.svg'
 import EmptyFilteredListIcon from 'assets/icons/empty-filtered-list.svg'
-import { getBlockStatus, timeDistance, GraphQLSchema, client, PCKB_UDT_INFO } from 'utils'
+import { timeDistance, GraphQLSchema, client, PCKB_UDT_INFO } from 'utils'
 import styles from './styles.module.scss'
 
 export type TxListProps = {
@@ -170,7 +170,7 @@ const TxList: React.FC<TxListProps & { maxCount?: string; pageSize?: number }> =
                         </div>
                       </Tooltip>
                       <TxStatusIcon
-                        status={getBlockStatus(item.block?.status ?? GraphQLSchema.BlockStatus.Pending)}
+                        status={item.block?.status}
                         isSuccess={
                           item.polyjuice ? item.polyjuice.status === GraphQLSchema.PolyjuiceStatus.Succeed : true
                         }

diff --git a/components/TxStatusIcon.tsx b/components/TxStatusIcon.tsx
@@ -1,17 +1,20 @@
+import { useTranslation } from 'next-i18next'
 import Tooltip from 'components/Tooltip'
 import PendingIcon from 'assets/icons/pending.svg'
 import CommittedIcon from 'assets/icons/committed.svg'
 import FailedIcon from 'assets/icons/failed.svg'
 import FinalizedIcon from 'assets/icons/finalized.svg'
-import { useTranslation } from 'next-i18next'
-import type { TxStatus } from 'utils'
+import { GraphQLSchema } from 'utils'
 
-const TxStatusIcon: React.FC<{ status: TxStatus; isSuccess?: boolean }> = ({ status, isSuccess = false }) => {
+const TxStatusIcon: React.FC<{ status: GraphQLSchema.BlockStatus | null; isSuccess?: boolean }> = ({
+  status,
+  isSuccess = false,
+}) => {
   const [t] = useTranslation('common')
 
-  if (status === 'pending') {
+  if (status === GraphQLSchema.BlockStatus.Pending || !status) {
     return (
-      <Tooltip title={t(status)} placement="top">
+      <Tooltip title={t('pending')} placement="top">
         <PendingIcon />
       </Tooltip>
     )
@@ -21,18 +24,18 @@ const TxStatusIcon: React.FC<{ status: TxStatus; isSuccess?: boolean }> = ({ sta
     return <FailedIcon style={{ flexShrink: 0 }} />
   }
 
-  if (status === 'committed') {
+  if (status === GraphQLSchema.BlockStatus.Committed) {
     return (
-      <Tooltip title={t(status)} placement="top">
+      <Tooltip title={t('committed')} placement="top">
         <div style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
           <CommittedIcon />
         </div>
       </Tooltip>
     )
   }
-  if (status === 'finalized') {
+  if (status === GraphQLSchema.BlockStatus.Finalized) {
     return (
-      <Tooltip title={t(status)} placement="top">
+      <Tooltip title={t('finalized')} placement="top">
         <div style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
           <FinalizedIcon />
         </div>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -30,7 +30,7 @@ import Search from 'components/Search'
 import Tooltip from 'components/Tooltip'
 import BlockStateIcon from 'components/BlockStateIcon'
 import TxStatusIcon from 'components/TxStatusIcon'
-import { fetchHome, timeDistance, formatInt, client, GraphQLSchema, IS_MAINNET, getBlockStatus } from 'utils'
+import { fetchHome, timeDistance, formatInt, client, GraphQLSchema, IS_MAINNET } from 'utils'
 type State = API.Home.Parsed
 
 // TODO: add polyjuice status
@@ -493,7 +493,7 @@ const TxList: React.FC<{ list: HomeLists['transactions']['entries']; isLoading:
                           </Box>
                         </Tooltip>
                         <TxStatusIcon
-                          status={getBlockStatus(tx.block?.status)}
+                          status={tx.block?.status}
                           isSuccess={
                             tx.polyjuice ? tx.polyjuice.status === GraphQLSchema.PolyjuiceStatus.Succeed : true
                           }

diff --git a/pages/tokens/[type].tsx b/pages/tokens/[type].tsx
@@ -16,7 +16,7 @@ import HashLink from 'components/HashLink'
 import TokenLogo from 'components/TokenLogo'
 import Tooltip from 'components/Tooltip'
 import FilterMenu from 'components/FilterMenu'
-// import SortIcon from 'assets/icons/sort.svg'
+import SortIcon from 'assets/icons/sort.svg'
 import { SIZES } from 'components/PageSize'
 import Amount from 'components/Amount'
 import AddIcon from 'assets/icons/add.svg'
@@ -50,8 +50,17 @@ type TokenListProps = {
 }
 
 const tokenListQuery = gql`
-  query ($name: String, $type: UdtType, $before: String, $after: String, $limit: Int) {
-    udts(input: { type: $type, before: $before, after: $after, limit: $limit, fuzzy_name: $name }) {
+  query ($name: String, $type: UdtType, $before: String, $after: String, $limit: Int, $holder_count_sort: SortType) {
+    udts(
+      input: {
+        type: $type
+        before: $before
+        after: $after
+        limit: $limit
+        fuzzy_name: $name
+        sorter: [{ sort_type: $holder_count_sort, sort_value: EX_HOLDERS_COUNT }]
+      }
+    ) {
       entries {
         id
         bridge_account_id
@@ -83,7 +92,7 @@ interface Variables {
   name: string | null
   type: string
   limit: number
-  // holder_count_sort: string
+  holder_count_sort: string
 }
 
 const fetchTokenList = (variables: Variables): Promise<TokenListProps['udts']> =>
@@ -104,7 +113,8 @@ const TokenList = () => {
       after = null,
       name = null,
       page_size = SIZES[1],
-      /* holder_count_sort = 'DESC',*/ ...query
+      holder_count_sort = 'DESC',
+      ...query
     },
   } = useRouter()
   const theme = useTheme()
@@ -120,15 +130,15 @@ const TokenList = () => {
   ]
 
   const { isLoading, data } = useQuery(
-    ['tokens', type, before, after, name],
+    ['tokens', type, before, after, name, page_size, holder_count_sort],
     () =>
       fetchTokenList({
         type: type.toString().toUpperCase(),
         before: before as string,
         after: after as string,
         name: name ? `${name}%` : null,
         limit: Number.isNaN(+page_size) ? +SIZES[1] : +page_size,
-        // holder_count_sort: holder_count_sort as string,
+        holder_count_sort: holder_count_sort as string,
       }),
     {
       refetchInterval: 10000,
@@ -222,26 +232,22 @@ const TokenList = () => {
             <thead style={{ textTransform: 'capitalize', fontSize: isMobile ? 12 : 14 }}>
               <tr style={{ borderTop: '1px solid #f0f0f0', borderBottom: '1px solid #f0f0f0' }}>
                 {headers.map(h => (
-                  <th
-                    key={h.key}
-                    title={t(h.label ?? h.key)}
-                    style={{
-                      whiteSpace: 'nowrap',
-                    }}
-                  >
-                    {t(h.label ?? h.key)}
-                    {h.key === 'token' ? (
-                      <span>
-                        <FilterMenu filterKeys={[FILTER_KEYS[0]]} />
-                      </span>
-                    ) : null}
-                    {/* {h.key === 'holderCount' ? ( */}
-                    {/*   <SortIcon */}
-                    {/*     onClick={handleHolderCountSortClick} */}
-                    {/*     data-order={holder_count_sort} */}
-                    {/*     className={styles.sorter} */}
-                    {/*   /> */}
-                    {/* ) : null} */}
+                  <th key={h.key} title={t(h.label ?? h.key)}>
+                    <span>
+                      {t(h.label ?? h.key)}
+                      {h.key === 'token' ? (
+                        <span>
+                          <FilterMenu filterKeys={[FILTER_KEYS[0]]} />
+                        </span>
+                      ) : null}
+                      {h.key === 'holderCount' ? (
+                        <SortIcon
+                          onClick={handleHolderCountSortClick}
+                          data-order={holder_count_sort}
+                          className={styles.sorter}
+                        />
+                      ) : null}
+                    </span>
                   </th>
                 ))}
               </tr>

diff --git a/pages/tokens/styles.module.scss b/pages/tokens/styles.module.scss
@@ -15,6 +15,11 @@
         text-align: right;
       }
     }
+    th span {
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+    }
   }
   form[data-role='filter-menu']:first-of-type {
     left: 0;
@@ -53,6 +58,7 @@
 
 .sorter {
   cursor: pointer;
+  margin-left: 4px;
 
   &[data-order='DESC'] {
     transform: rotate(0.5turn);