{t(`asset`)} | {t(`assetType`)} | -{t(`balance`)} | +
+
+
+
+ {isShowUsd ? t(`USD`, { ns: 'list' }) : t(`balance`)}
+
+
+ |
{t(item.udt.type === GraphQLSchema.UdtType.Native ? 'native' : 'bridged')} | -
- |
+ {isShowUsd ? (
+ |
)
diff --git a/components/AssetList/styles.module.scss b/components/AssetList/styles.module.scss
index 009259ac2..0ef0d40da 100644
--- a/components/AssetList/styles.module.scss
+++ b/components/AssetList/styles.module.scss
@@ -46,3 +46,23 @@
margin: 0 auto;
}
}
+
+.balance {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ div {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ cursor: pointer;
+ span {
+ display: block;
+ height: 17px;
+ svg {
+ margin-left: 0.25rem;
+ cursor: pointer;
+ }
+ }
+ }
+}
diff --git a/components/BaseTransferlist/styles.module.scss b/components/BaseTransferlist/styles.module.scss
index 40afec27c..1692124cc 100644
--- a/components/BaseTransferlist/styles.module.scss
+++ b/components/BaseTransferlist/styles.module.scss
@@ -45,6 +45,9 @@
.to {
display: flex;
align-items: center;
+ svg {
+ margin-left: 0.25rem;
+ }
}
.noRecords {
diff --git a/components/ERC20TransferList/index.tsx b/components/ERC20TransferList/index.tsx
index 16792c0b3..526adb84e 100644
--- a/components/ERC20TransferList/index.tsx
+++ b/components/ERC20TransferList/index.tsx
@@ -1,7 +1,10 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
import { useTranslation } from 'next-i18next'
import NextLink from 'next/link'
+import { useRouter } from 'next/router'
import { gql } from 'graphql-request'
+import dayjs from 'dayjs'
+import BigNumber from 'bignumber.js'
import Table from 'components/Table'
import Address from 'components/TruncatedAddress'
import Pagination from 'components/SimplePagination'
@@ -9,11 +12,14 @@ import TxStatusIcon from 'components/TxStatusIcon'
import TransferDirection from 'components/TransferDirection'
import RoundedAmount from 'components/RoundedAmount'
import TokenLogo from 'components/TokenLogo'
+import Tooltip from 'components/Tooltip'
+import FilterMenu from 'components/FilterMenu'
+import AgeFilterMenu from 'components/FilterMenu/AgeFilterMenu'
import ChangeIcon from 'assets/icons/change.svg'
import NoDataIcon from 'assets/icons/no-data.svg'
+import UsdIcon from 'assets/icons/usd.svg'
import { client, timeDistance, GraphQLSchema } from 'utils'
import styles from './styles.module.scss'
-import Tooltip from 'components/Tooltip'
export type TransferListProps = {
token_transfers: {
@@ -27,31 +33,58 @@ export type TransferListProps = {
log_index: number
polyjuice: Pick
---|
{t('txHash')} | -{t('block')} | -{t('age')} | -{t('from')} | -{t('to')} | +
+
+ {t('block')}
+
+ |
+
+
+ {t('age')}
+
+ |
+
+
+ {t('from')}
+
+ |
+
+
+ {t('to')}
+
+ |
{showToken ? ( |
-
+
{t('token')}
|
) : null}
- {`${t('value')}`} | +
+
+
+
+ {isShowUsd ? t(`USD`) : t('value')}
+
+
+ |
- |
+ {isShowUsd ? (
+ |
)
diff --git a/components/ERC20TransferList/styles.module.scss b/components/ERC20TransferList/styles.module.scss
index d06f50d71..571dd5049 100644
--- a/components/ERC20TransferList/styles.module.scss
+++ b/components/ERC20TransferList/styles.module.scss
@@ -19,9 +19,16 @@
.noRecords {
@include empty-list;
}
+ &[data-is-filter-unnecessary='true'] {
+ th {
+ svg {
+ display: none;
+ }
+ }
+ }
}
-.token {
+.tokenHeader {
display: flex;
align-items: center;
svg {
@@ -30,6 +37,26 @@
}
}
+.value {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ div {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ cursor: pointer;
+ span {
+ display: block;
+ height: 17px;
+ svg {
+ margin-left: 0.25rem;
+ cursor: pointer;
+ }
+ }
+ }
+}
+
.tokenUrl {
display: block;
max-width: 60px;
@@ -41,6 +68,18 @@
padding-left: 0 !important;
padding-right: 0 !important;
}
+
.amount {
margin-right: 0.25rem;
}
+
+.ageHeader,
+.blockHeader,
+.fromHeader,
+.toHeader {
+ display: flex;
+ align-items: center;
+ svg {
+ margin-left: 0.25rem;
+ }
+}
diff --git a/components/FilterMenu/AgeFilterMenu.tsx b/components/FilterMenu/AgeFilterMenu.tsx
new file mode 100644
index 000000000..8a498daf5
--- /dev/null
+++ b/components/FilterMenu/AgeFilterMenu.tsx
@@ -0,0 +1,267 @@
+import { useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+import dayjs, { Dayjs } from 'dayjs'
+import 'dayjs/locale/en'
+import 'dayjs/locale/zh-cn'
+import utc from 'dayjs/plugin/utc'
+import timezones from 'dayjs/plugin/timezone'
+import TextField from '@mui/material/TextField'
+import { usePopupState, bindTrigger, bindPopper } from 'material-ui-popup-state/hooks'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
+import { Popper, ClickAwayListener, Fade } from '@mui/material'
+import styled from '@emotion/styled'
+import Alert from 'components/Alert'
+import FilterIcon from 'assets/icons/filter.svg'
+import ClearIcon from 'assets/icons/clear.svg'
+
+dayjs.extend(utc)
+dayjs.extend(timezones)
+
+const locales = { 'en-US': 'en', 'zh-CN': 'zh-cn' }
+
+const Container = styled.div`
+ position: relative;
+ display: inline-flex;
+ label.filterBtn {
+ display: flex;
+ cursor: pointer;
+ &:hover {
+ color: var(--primary-color);
+ }
+ svg {
+ @media screen and (max-width: 1024px) {
+ transform: scale(0.9);
+ }
+ }
+ }
+ .clearIcon {
+ display: none;
+ position: absolute;
+ top: -70%;
+ right: -70%;
+ width: 12px;
+ height: 12px;
+ cursor: pointer;
+ path {
+ fill: #333;
+ }
+ }
+
+ &[data-active='true'] {
+ label.filterBtn {
+ svg {
+ color: var(--primary-color);
+ }
+ }
+ .clearIcon {
+ display: block;
+ }
+ }
+`
+
+const FormMenu = styled.form`
+ padding: 0.7rem;
+ width: 256px;
+ background: #fff;
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ overflow: hidden;
+ z-index: 9;
+
+ .field {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 10px;
+ label {
+ line-height: 1em;
+ text-transform: capitalize;
+ color: var(--secondary-text-color);
+ font-size: 90%;
+ margin-bottom: 6px;
+ }
+ .MuiInputBase-root {
+ input {
+ padding-left: 10px;
+ }
+ fieldset {
+ border: unset;
+ }
+ width: 100%;
+ height: 42px;
+ color: var(--primary-text-color);
+ font-size: 0.875rem;
+ font-weight: 500;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ box-sizing: border-box;
+ &:hover,
+ &:focus {
+ border-color: var(--primary-color);
+ }
+ &::placeholder {
+ color: #999;
+ }
+ }
+ }
+
+ .btns {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 10px;
+ button {
+ appearance: none;
+ border: none;
+ margin-left: 0.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 5.5rem;
+ height: 2rem;
+ border-radius: 1rem;
+ border: 1px solid #e5e5e5;
+ background-color: transparent;
+ text-transform: capitalize;
+ cursor: pointer;
+ &[type='submit'] {
+ background: var(--primary-color);
+ border-color: var(--primary-color);
+ color: #fff;
+ }
+ }
+ }
+`
+
+const AgeFilterMenu: React.FC<{ filterKeys: Array
---|---|---|---|---|---|---|---|---|---|---|---|---|
-
- {t(h.label ?? h.key)}
+
+
{t(h.label ?? h.key)}
{h.key === 'token' ? (
-
-
+
+
+ |
))}