Merge branch 'develop' into data-sorting-filtering

Signed-off-by: Chen Yu <[email protected]>

.gitignore

@@ -4,6 +4,7 @@
 
 node_modules/
 build/
+dist/
 npm-debug.log
 *.log
 coverage/

config-overrides.js

@@ -1,5 +1,6 @@
 /* config-overrides.js */
 const SentryWebpackPlugin = require('@sentry/webpack-plugin')
+const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
 
 module.exports = function override(config) {
   if (config.ignoreWarnings == null) {
@@ -26,6 +27,7 @@ module.exports = function override(config) {
         project:
           process.env.SENTRY_PROJECT || (isMainnet ? 'ckb-explorer-frontend-mainnet' : 'ckb-explorer-frontend-testnet'),
       }),
+      new AntdDayjsWebpackPlugin(),
     )
   }
 

package.json

@@ -3,15 +3,15 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "4.8.0",
+    "@ant-design/icons": "4.8.1",
     "@nervosnetwork/ckb-sdk-utils": "0.103.1",
     "@sentry/react": "7.38.0",
     "@sentry/tracing": "7.38.0",
     "antd": "4.24.5",
     "axios": "0.21.4",
     "bignumber.js": "9.0.1",
     "camelcase": "7.0.0",
-    "camelcase-keys": "7.0.0",
+    "camelcase-keys": "7.0.2",
     "classnames": "2.3.2",
     "dayjs": "1.11.5",
     "default-passive-events": "2.0.0",
@@ -22,6 +22,7 @@
     "i18next": "20.3.5",
     "jsbi": "3.2.5",
     "lint-staged": "^13.2.3",
+    "moment": "2.29.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.11.4",
@@ -36,21 +37,22 @@
     "three": "0.149.0"
   },
   "devDependencies": {
-    "@sentry/webpack-plugin": "1.20.0",
+    "@sentry/webpack-plugin": "1.20.1",
     "@testing-library/react": "12.1.5",
     "@types/echarts": "4.9.9",
     "@types/eslint": "7.28.0",
     "@types/jest": "26.0.24",
     "@types/node": "16.4.10",
-    "@types/react": "17.0.15",
-    "@types/react-dom": "17.0.9",
+    "@types/react": "17.0.64",
+    "@types/react-dom": "17.0.20",
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-router-dom": "5.1.8",
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "5.1.11",
     "@types/three": "0.149.0",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "5.48.1",
+    "antd-dayjs-webpack-plugin": "^1.0.6",
     "create-react-app": "^4.0.3",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",

src/components/CsvExport/index.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import styles from './styles.module.scss'
+import { ReactComponent as ExportIcon } from '../../assets/export_icon.svg'
+
+export function CsvExport({ type, id }: { type: State.TransactionCsvExportType; id?: string }) {
+  const [t] = useTranslation()
+  return (
+    <Link
+      className={styles.exportLink}
+      to={`/export-transactions?type=${type}${id ? `&id=${id}` : ''}`}
+      target="_blank"
+    >
+      <div>{t(`export_transactions.csv_export`)}</div>
+      <ExportIcon />
+    </Link>
+  )
+}

src/components/CsvExport/styles.module.scss

@@ -0,0 +1,12 @@
+.exportLink {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  color: var(--primary-color);
+  cursor: pointer;
+
+  > div:first-child {
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+}

src/components/Pagination/styled.tsx

@@ -9,7 +9,6 @@ export const PaginationPanel = styled.div`
   justify-content: center;
   border-radius: 0 0 6px 6px;
   box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
-  background-color: #fff;
 
   @media (width <= 750px) {
     margin-bottom: 30px;
@@ -204,8 +203,8 @@ export const PaginationRightItem = styled.div`
       background: #ddd;
     }
 
-    @media (width <= 750px) {
-      margin: 0 10px;
+    @media (max-width <= 750px) {
+      margin-left: 10px;
       font-size: 12px;
     }
   }

src/components/PaginationWithRear/index.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react'
+import classNames from 'classnames'
+import Pagination from '../Pagination'
+import styles from './styles.module.scss'
+
+const PaginationWithRear = ({
+  currentPage,
+  totalPages,
+  onChange,
+  paginationClassName,
+  rear,
+}: {
+  currentPage: number
+  totalPages: number
+  onChange: (page: number) => void
+  paginationClassName?: string
+  rear: ReactNode
+}) => {
+  return (
+    <div className={classNames(styles.paginationWithRear, { [styles.withPagination]: totalPages > 1 })}>
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onChange={onChange}
+          className={classNames(styles.pagination, paginationClassName)}
+        />
+      )}
+      <div className={styles.rear}>{rear}</div>
+    </div>
+  )
+}
+
+export default PaginationWithRear

src/components/PaginationWithRear/styles.module.scss

@@ -0,0 +1,54 @@
+.paginationWithRear {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 4px;
+  background-color: white;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
+  padding: 0 40px;
+
+  .pagination {
+    width: fit-content;
+    box-shadow: none;
+    flex: 1 0.8 auto;
+    min-width: 650px;
+    @media (max-width: 750px) {
+      min-width: auto;
+      border-radius: 0;
+    }
+
+    :global(.pagination__input__page) {
+      flex: 1;
+      width: 60px;
+      max-width: 120px;
+    }
+  }
+  :global(.pagination__goto__page) {
+    min-width: 42px;
+  }
+
+  .rear {
+    display: flex;
+    justify-content: flex-end;
+
+    @media (max-width: 750px) {
+      height: 50px;
+      border-radius: 0 0 6px 6px;
+      border-top: 1px solid #f0f0f0;
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 750px) {
+    justify-content: flex-end;
+    margin-top: 5px;
+    padding: 0 20px;
+
+    > .pagination {
+      margin-bottom: 0;
+    }
+  }
+}

src/index.css

@@ -3,6 +3,7 @@
 body {
   --primary-color: #00cc9b;
   --primary-hover-bg-color: #e8fff1;
+  --primary-chiffon-color: #e6fcf7;
   --navbar-height: 64px;
   --table-separator-color: #f5f5f5;
   margin: 0;
@@ -16,6 +17,7 @@ body {
 body[data-chain-type='testnet'] {
   --primary-color: #9a2cec;
   --primary-hover-bg-color: #eeeafc;
+  --primary-chiffon-color: #eeeafc;
 }
 
 * {

src/locales/en.json

@@ -528,6 +528,29 @@
       "transaction_count": "Transaction Count",
       "n_days_historical_fee_rate": "Average fee rate (Recent {{n}} days)",
       "count": "Count"
+    },
+    "export_transactions": {
+      "csv_export": "CSV Export",
+      "download_data": "Download Data",
+      "transactions": "Transactions",
+      "description_str": "The information you requested can be downloaded from this page. Before continuing please verify that you are not a robot by completing the captcha below.",
+      "select_download_options": "Select download options",
+      "date": "Date",
+      "start_date": "Start Date",
+      "end_date": "End Date",
+      "from_block": "From Block",
+      "to_block": "To Block",
+      "note_str": "The earliest 5,000 records within the selected range will be exported",
+      "download": "Download",
+      "block_number": "Block Number",
+      "please_pick_date": "please pick start date and end date!",
+      "error_date_order": "end date should be after than start date!",
+      "download_processed": "Your download is being processed!",
+      "please_input_block_number": "please input `from block number` and `to block number`!",
+      "error_block_number_order": "`to block number` should be higher than `from block number`!",
+      "block_number_should_be_positive": "block number should be positive",
+      "too_many_blocks": "The selected range exceeds 5,000 blocks,please re-enter the block numbers",
+      "fetch_processed_export_link_empty": "fetch processed export link empty"
     }
   }
 }

src/locales/zh.json

@@ -527,6 +527,29 @@
       "transaction_count": "交易数量",
       "n_days_historical_fee_rate": " 平均费率 (最近 {{n}} 天)",
       "count": "数量"
+    },
+    "export_transactions": {
+      "csv_export": "CSV导出",
+      "download_data": "下载数据",
+      "transactions": "交易",
+      "description_str": "您请求的信息可以从该页面下载。 在继续之前，请通过填写下面的验证码来验证您不是机器人。",
+      "select_download_options": "选择下载选项",
+      "date": "日期",
+      "start_date": "开始日期",
+      "end_date": "结束日期",
+      "from_block": "起始块高",
+      "to_block": "目标块高",
+      "note_str": "这将导出所选范围内最早的 5,000 条记录",
+      "download": "下载",
+      "block_number": "块高",
+      "please_pick_date": "请选择开始日期和结束日期!",
+      "error_date_order": "结束日期应该比开始日期晚!",
+      "download_processed": "您的下载请求已被处理!",
+      "please_input_block_number": "请输入起始块高和目标块高!",
+      "error_block_number_order": "目标块高不应该小于起始块高!",
+      "block_number_should_be_positive": "块高应该输入正数!",
+      "too_many_blocks": "选择的范围超过了 5,000 个区块, 请重新输入区块高度!",
+      "fetch_processed_export_link_empty": "获取已处理的导出链接为空"
     }
   }
 }

src/pages/Address/AddressComp.tsx

@@ -2,7 +2,6 @@ import axios, { AxiosResponse } from 'axios'
 import { useState, useEffect, FC } from 'react'
 import { useQuery } from 'react-query'
 import { Radio } from 'antd'
-import Pagination from '../../components/Pagination'
 import OverviewCard, { OverviewItemData } from '../../components/Card/OverviewCard'
 import TransactionItem from '../../components/TransactionItem/index'
 import { v2AxiosIns } from '../../service/http/fetcher'
@@ -12,7 +11,6 @@ import { shannonToCkb, deprecatedAddrToNewAddr, handleNftImgError, patchMibaoImg
 import {
   AddressLockScriptController,
   AddressLockScriptPanel,
-  AddressTransactionsPagination,
   AddressTransactionsPanel,
   AddressUDTAssetsPanel,
   AddressUDTItemPanel,
@@ -43,6 +41,8 @@ import ArrowUpBlueIcon from '../../assets/arrow_up_blue.png'
 import ArrowDownIcon from '../../assets/arrow_down.png'
 import ArrowDownBlueIcon from '../../assets/arrow_down_blue.png'
 import { omit } from '../../utils/object'
+import { CsvExport } from '../../components/CsvExport'
+import PaginationWithRear from '../../components/PaginationWithRear'
 
 const addressAssetInfo = (address: State.Address, useMiniStyle: boolean) => {
   const items = [
@@ -411,11 +411,12 @@ export const AddressTransactions = ({
           ))
         )}
       </AddressTransactionsPanel>
-      {totalPages > 1 && (
-        <AddressTransactionsPagination>
-          <Pagination currentPage={currentPage} totalPages={totalPages} onChange={setPage} />
-        </AddressTransactionsPagination>
-      )}
+      <PaginationWithRear
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onChange={setPage}
+        rear={<CsvExport type="address_transactions" id={addressHash} />}
+      />
     </>
   )
 }

src/pages/Address/styled.tsx

@@ -82,11 +82,6 @@ export const AddressTransactionsPanel = styled.div`
   }
 `
 
-export const AddressTransactionsPagination = styled.div`
-  margin-top: 4px;
-  width: 100%;
-`
-
 export const AddressUDTAssetsPanel = styled.div`
   display: flex;
   flex-direction: column;

src/pages/BlockList/index.tsx

@@ -11,14 +11,15 @@ import { deprecatedAddrToNewAddr, shannonToCkb } from '../../utils/util'
 import { DELAY_BLOCK_NUMBER } from '../../constants/common'
 import { localeNumberString } from '../../utils/number'
 import i18n from '../../utils/i18n'
-import Pagination from '../../components/Pagination'
 import DecimalCapacity from '../../components/DecimalCapacity'
 import { ItemCardData, ItemCardGroup } from '../../components/Card/ItemCard'
 import AddressText from '../../components/AddressText'
 import { useIsMobile, useMediaQuery, usePaginationParamsInListPage, useSortParam } from '../../utils/hook'
 import { fetchBlocks } from '../../service/http/fetcher'
 import { RouteState } from '../../routes/state'
 import { ReactComponent as SortIcon } from '../../assets/sort_icon.svg'
+import { CsvExport } from '../../components/CsvExport'
+import PaginationWithRear from '../../components/PaginationWithRear'
 import styles from './styles.module.scss'
 
 const BlockValueItem = ({ value, to }: { value: string; to: string }) => (
@@ -267,9 +268,12 @@ export default () => {
             )}
           </ContentTable>
         )}
-        <div className="block_list__pagination">
-          <Pagination currentPage={currentPage} totalPages={totalPages} onChange={setPage} />
-        </div>
+        <PaginationWithRear
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onChange={setPage}
+          rear={<CsvExport type="blocks" />}
+        />
       </BlockListPanel>
     </Content>
   )