调整NFT市场

public/locales/zh-CN.json

@@ -1298,7 +1298,12 @@
   "1.NFT may not be traded or transferred at the time of sale": "1.NFT在出售挂单时不可进行交易或转让",
   "2. After the successful sale of NFT, the platform will charge the publisher 6% of the profits as a commission fee": "2.NFT出售成功后，平台将收取发布人收益的6%作为手续费",
   "order status": "订单状态",
-  "Asking price": "起拍价格",
+  "Asking price%price%": "起拍价格%price%",
   "Can't be less than %num%": "不能小于%num%",
-  "They are in": "挂单中"
+  "The price is greater than %num%": "价格要大于%num%",
+  "They are in": "挂单中",
+  "In the sale": "售卖中",
+  "The purchase": "竞拍成功",
+  "The selling time cannot be less than %hour% hour": "出售时间不能小于%hour%小时",
+  "Did not take": "未拍中"
 }

src/config/constants/contracts.ts

@@ -52,7 +52,7 @@ export default {
   hccMarketplace: {
     97: '0x91b9a998eedbb513f86b7d2a8efc01624a6d9636',
     56: '0x75c6c866f9f4ba6d0cad39d29f8e54a7ec64afb8', // NEED CHANGE NFT市场
-    5: '0x8678a822dfa815da423517b315641ef7f20020d7',
+    5: '0x0e88b33ff165679c841c55f5d39239d0f3e7df4f',
   },
   blindBox: {
     97: '0x0e226d7b83b511ce224803b1330beb4a59bfa5d6',

src/config/localization/translations.json

@@ -1425,7 +1425,12 @@
   "1.NFT may not be traded or transferred at the time of sale": "1.NFT may not be traded or transferred at the time of sale",
   "2. After the successful sale of NFT, the platform will charge the publisher 6% of the profits as a commission fee": "2. After the successful sale of NFT, the platform will charge the publisher 6% of the profits as a commission fee",
   "order status": "order status",
-  "Asking price": "Asking price",
+  "Asking price%price%": "Asking price%price%",
   "Can't be less than %num%": "Can't be less than %num%",
-  "They are in": "They are in"
+  "The price is greater than %num%": "The price is greater than %num%",
+  "They are in": "They are in",
+  "In the sale": "In the sale",
+  "The purchase": "The purchase",
+  "The selling time cannot be less than %hour% hour": "The selling time cannot be less than %hour% hour",
+  "Did not take": "Did not take"
 }

src/services/bazaar.ts

@@ -92,5 +92,18 @@ export const tradeRecordPage = (params) => {
     params,
   })
 }
+export const marketStatistics = () => {
+  return request.request({
+    url: `/high_city/app/api/market/statistics`,
+    method: 'get',
+  })
+}
+
+export const getPublishTime = () => {
+  return request.request({
+    url: `/high_city/app/api/base/config/market/auction/publish/time/limit`,
+    method: 'get',
+  })
+}
 
 export default getOfficialPage

src/views/Bazaar/components/AuctionRecord.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import Pagination from '@mui/material/Pagination'
-import { Text, Button, Image, Flex } from '@pancakeswap/uikit'
+import { Text, Button, Image, Flex, Dropdown } from '@pancakeswap/uikit'
+import useRefresh from 'hooks/useRefresh'
 import { useTranslation } from 'contexts/Localization'
-import { tradeRecordPage } from 'services/bazaar'
 import Empty from 'components/Empty'
+import { executeOrderTx, tradeRecordPage } from 'services/bazaar'
+import { useExecuteOrder } from '../hooks'
 
 interface AuctionRecordProps {
   onDismiss?: () => void
@@ -46,9 +48,12 @@ const HeaderText = styled(Text)`
 
 const TypeFlex = styled(Flex)`
   flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
   margin-top: 35px;
   padding-left: 30px;
+`
+const TypeLeftFlex = styled(Flex)`
   & > .active {
     background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
     color: #fff;
@@ -130,9 +135,51 @@ const HashText = styled(Text)`
   border-bottom: 1px solid #1fc7d4;
 `
 
+const SelectFlex = styled(Flex)`
+  align-items: center;
+  cursor: pointer;
+`
+const SelectMain = styled(Flex)`
+  z-index: 999;
+  width: 120px;
+`
+const SelectText = styled(Text)`
+  font-size: 16px;
+  width: 120px;
+  color: #666666;
+  margin-left: 4px;
+`
+const FlexOption = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 40px;
+  cursor: pointer;
+  z-index: 999;
+`
+const DidText = styled(Text)`
+  font-size: 14px;
+  margin-top: 5px;
+  color: rgba(102, 102, 102, 1);
+  margin-right: 5px;
+`
+
 const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }) => {
   const { t } = useTranslation()
   const [count, setCount] = useState(undefined)
+  const executeOrder = useExecuteOrder()
+  const [loading, setLoading] = useState(false)
+  const [txExecuteId, setTxExecuteId] = useState('')
+  const { fastRefresh } = useRefresh()
+  const [auctionSelect, setAuctionSelect] = useState({ label: t('All'), value: '' })
+  const auctionList = [
+    { label: t('All'), value: '' },
+    { label: t('In the auction'), value: 'PENDING' },
+    { label: t('traded'), value: 'SUCCESS' },
+    { label: t('Cancel'), value: 'CANCEL' },
+    { label: t('abortive auction'), value: 'STREAMING' },
+    { label: t('The purchase'), value: 'BID_SUCCESS' },
+  ]
 
   const typeList = [
     { label: t('All transactions'), value: '' },
@@ -152,11 +199,11 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }
     t('operation'),
   ]
   const statusTxt = {
-    PENDING: t('They are in'),
     CANCEL: t('Canceled'),
+    PENDING: t('In the auction'),
     STREAMING: t('abortive auction'),
-    SUCCESS: t('success'),
+    SUCCESS: t('traded'),
-    end: t('finished'),
+    BID_SUCCESS: t('The purchase'),
   }
 
   const getList = async () => {
@@ -165,6 +212,7 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }
       page: pageNum,
       size: 4,
       type: 'AUCTION',
+      status: auctionSelect.value,
       relationType: typeList[typeIndex].value,
     })
     setCount(getTotalPageNum(res.total, 4))
@@ -180,11 +228,26 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }
   }
   useEffect(() => {
     getList()
-  }, [pageNum, typeIndex])
+  }, [pageNum, typeIndex, auctionSelect])
+
+  useEffect(() => {
+    // 购买
+    if (txExecuteId && loading) {
+      executeOrderFn()
+    }
+  }, [fastRefresh])
   const goHash = (val) => {
     window.open(`https://goerli.etherscan.io/tx/${val.tx}`)
   }
-
+  const executeOrderFn = async () => {
+    setLoading(true)
+    const res = await executeOrderTx(txExecuteId)
+    if (res) {
+      setTxExecuteId(undefined)
+      setLoading(false)
+      getList()
+    }
+  }
   const changeType = async (index) => {
     setTypeIndex(index)
     setPage(1)
@@ -193,12 +256,23 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }
     recordDetail(item)
     onDismiss()
   }
+  // 领取
+  const onSell = async (item) => {
+    setLoading(true)
+    const res = await executeOrder(item.token, item.lastPrice)
+    setTxExecuteId(res.hash)
+  }
+  const changeAcution = (item) => {
+    setAuctionSelect(item)
+    setPage(1)
+  }
 
   return (
     <FlexMain>
       <CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
       <HeaderText>{t('Auctions a record')}</HeaderText>
       <TypeFlex>
+        <TypeLeftFlex>
           {typeList.map((item, index) => {
             return (
               <TypeItem
@@ -210,6 +284,26 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }
               </TypeItem>
             )
           })}
+        </TypeLeftFlex>
+        <SelectMain>
+          <Dropdown
+            position="bottom"
+            target={
+              <SelectFlex>
+                <Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
+                <SelectText>{auctionSelect.label}</SelectText>
+              </SelectFlex>
+            }
+          >
+            {auctionList.map((item) => {
+              return (
+                <FlexOption key={item.value} onClick={() => changeAcution(item)}>
+                  {item.label}
+                </FlexOption>
+              )
+            })}
+          </Dropdown>
+        </SelectMain>
       </TypeFlex>
       <>
         <TableThemed>
@@ -217,6 +311,7 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }
             return <ThemedItem key={item}>{item}</ThemedItem>
           })}
         </TableThemed>
+        {list?.length === 0 && <Empty />}
         <TableBody>
           {list?.length > 0 &&
             list.map((item) => {
@@ -227,24 +322,38 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }
                     {item.goodsName}
                   </TdFlex>
                   <TdFlex>{item.price}</TdFlex>
-                  <TdFlex>{item.lastPrice}</TdFlex>
+                  <TdFlex>{item.lastPrice}HCC</TdFlex>
                   <TdFlex>{item.updatedAt}</TdFlex>
                   <TdFlex>{statusTxt[item.status]}</TdFlex>
                   <TdBtnFlex>
+                    <Flex>
+                      {typeList[typeIndex].value === 'PARTICIPATE' && item.status === 'BID_SUCCESS' && (
+                        <DetailButton disabled={loading} onClick={() => onSell(item)}>
+                          {t('Get')}
+                        </DetailButton>
+                      )}
                       <DetailButton onClick={() => lookDetail(item)}>{t('Detail')}</DetailButton>
-                    <HashText onClick={() => goHash(item)}>{t('deal Hash')}</HashText>
+                    </Flex>
+                    <Flex alignItems="center">
+                      {typeList[typeIndex].value === 'PARTICIPATE' && item.status === 'SUCCESS' && (
+                        <DidText>{t('Did not take')}</DidText>
+                      )}
+                      <HashText onClick={() => goHash(item)}>{t('Trade')}Hash</HashText>
+                      {/* <HashText onClick={() => goHash(item)}>
+                        {item.tx && item.tx.substring(0, 6)}....
+                        {item.tx && item.tx.substring(item.tx.length - 6, item.tx.length)}
+                      </HashText> */}
+                    </Flex>
                   </TdBtnFlex>
                 </TrFlex>
               )
             })}
-          {list?.length === 0 ? (
+        </TableBody>
-            <Empty />
+        {list?.length > 0 && (
-          ) : (
           <Flex justifyContent="center" padding={10}>
             <Pagination count={count} onChange={pageChange} page={pageNum} />
           </Flex>
         )}
-        </TableBody>
       </>
     </FlexMain>
   )

src/views/Bazaar/components/Content.tsx

@@ -140,6 +140,7 @@ const Content: React.FC = () => {
   const [detail, setDetail] = useState<ListProps>({})
   const [detailVisible, setDetailVisible] = useState(false)
   const [ids, setId] = useState('')
+  const account = useAccount()
   const typeList = [
     { label: t('official market'), type: 1 },
     { label: t('bazaar'), type: 2 },
@@ -191,8 +192,8 @@ const Content: React.FC = () => {
     const params = {
       page: pageNum,
       size: 8,
-      name: searchTitle,
+      goodsName: searchTitle,
-      grade: searchGrade,
+      goodsGrade: searchGrade,
       status: auctionSelect.value,
       type,
     }
@@ -244,7 +245,7 @@ const Content: React.FC = () => {
       }
     }
   }, [])
-  useEffect(() => {
+  const getList = async () => {
     switch (typeIndex) {
       case 0:
         getData()
@@ -258,18 +259,26 @@ const Content: React.FC = () => {
       default:
         getData()
     }
+  }
+  useEffect(() => {
+    getList()
   }, [pageNum, searchGrade, typeIndex, detailVisible, auctionSelect])
 
   useEffect(() => {
     setPriceSelect({ label: t('Prices go from low to high'), value: '3' })
-  }, [t])
+    setAuctionSelect({ label: t('In the auction'), value: 'PENDING' })
+  }, [t, account])
 
   const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = evt.target
     setSearchTitle(value)
   }
   const searchList = () => {
+    if (pageNum !== 1) {
       setPage(1)
+    } else {
+      getList()
+    }
     // getData()
   }
   const showDetail = (val) => {

src/views/Bazaar/components/ContentShop.tsx

@@ -117,7 +117,7 @@ const ContentShop: React.FC<ContentShop> = ({ list, getDetail, typeIndex }) => {
                   width={278}
                   height={302}
                   img={item.coverResource.url}
-                  grade={item.grade}
+                  grade={item.goodsGrade}
                   borderRadius="20px 20px 0 0"
                 />
                 <ShopName>{item?.goodsName}</ShopName>

src/views/Bazaar/components/FlexCom.tsx

@@ -4,7 +4,7 @@ import { Flex, Text, Link } from '@pancakeswap/uikit'
 
 interface FlexProps {
   name: string
-  value: string
+  value: string | number
   paddings?: string
   leftColor?: string
   rightColor?: string

src/views/Bazaar/components/SellModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import dayjs from 'dayjs'
 import { useLocation, useHistory, useParams } from 'react-router-dom'
 import styled from 'styled-components'
 import { Text, Button, Image, Input, Flex, Dropdown } from '@pancakeswap/uikit'
@@ -6,7 +7,7 @@ import { useTranslation } from 'contexts/Localization'
 import useToast from 'hooks/useToast'
 import { getHccMarketplaceAddress } from 'utils/addressHelpers'
 import useRefresh from 'hooks/useRefresh'
-import { marketTradeCreateOrderTx } from 'services/bazaar'
+import { marketTradeCreateOrderTx, getPublishTime } from 'services/bazaar'
 import BigNumber from 'bignumber.js'
 import { useCreateNormalOrder, useCreateAuctionOrder, useIsApproved, useApproved } from '../hooks'
 import ShopList from './ShopList'
@@ -212,12 +213,16 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
   const [loading, setLoading] = useState(false)
   const [createOrderId, setCreateOrderId] = useState('')
   const [agreementLoading, setAgreementLoading] = useState(false)
+  const [minTime, setMinTime] = useState(0)
 
   const SellingWayList = [
     { label: t('fixed price'), value: '1' },
     { label: t('Auction'), value: '2' },
   ]
-
+  const getTime = async () => {
+    const res = await getPublishTime()
+    setMinTime(new BigNumber(res).toNumber())
+  }
   const onSelectNft = () => {
     setShowModal(!showModal)
   }
@@ -259,20 +264,32 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
       toastError(t('Please enter price'))
       return
     }
-    if (Number(price) < 0) {
+    if (Number(price) <= 0) {
-      toastError(t("Can't be less than %num%", { num: 0 }))
+      toastError(t('The price is greater than %num%', { num: 0 }))
       return
     }
     if (sellingWay?.value === '2' && Number(time) < 0) {
-      toastError(t("Can't be less than %num%", { num: 0 }))
+      toastError(t('The price is greater than %num%', { num: 0 }))
       return
     }
     setLoading(true)
     let res = { hash: undefined }
     if (sellingWay?.value === '2') {
-      const auctionTime = new BigNumber(time).multipliedBy(3600000).plus(new Date().getTime()).toNumber()
+      if (minTime > new BigNumber(time).multipliedBy(3600).toNumber()) {
+        setLoading(false)
+        toastError(
+          t('The selling time cannot be less than %hour% hour', {
+            hour: new BigNumber(minTime).dividedBy(3600).toNumber(),
+          }),
+        )
+        return
+      }
+      const auctionTime = new BigNumber(time)
+        .multipliedBy(3600)
+        .plus(new BigNumber(new Date().getTime()).dividedBy(1000).toNumber())
+        .toNumber()
       // const auctionTime = Number(time) * 3600000 + new Date().getTime()
-      res = await createAuctionOrder(shopData.token, price, auctionTime)
+      res = await createAuctionOrder(shopData.token, price, Math.round(auctionTime))
     } else {
       res = await createNormalOrder(shopData.token, price)
     }
@@ -292,6 +309,7 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
     }
   }
   useEffect(() => {
+    getTime()
     detailData && setShopData(detailData)
   }, [])
   useEffect(() => {
@@ -351,6 +369,7 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
             <ShopList
               item={shopData}
               img={shopData?.info?.coverResource?.url}
+              grade={shopData?.info?.grade}
               width={278}
               height={280}
               borderRadius="20px 20px 0 0"

src/views/Bazaar/components/ShopDetailBazaar.tsx

@@ -295,6 +295,11 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
       updatedAt: res?.updatedAt,
       token: res?.token,
     })
+    if (res.status === 'PENDING') {
+      setSellVerify(false)
+    } else {
+      setSellVerify(true)
+    }
     setStatusBtnTxt(res.status)
     setDetail(res)
   }
@@ -321,7 +326,7 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
 
   const getLink = () => {
     const createInput = document.createElement('input')
-    createInput.value = `${window.location.href}?id=${detail.id}`
+    createInput.value = `${window.location.href}?id=${detail.id}&type=${typeIndex}`
     document.body.appendChild(createInput)
     createInput.select()
     document.execCommand('Copy')
@@ -371,13 +376,14 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
   }
   const getNft = async () => {
     setLoading(true)
-    const res = await executeOrder(detail.token, 0)
+    // const res = await executeOrder(detail.token, orderMapData?.bid)
+    const res = await executeOrder(orderMapData?.bidder, orderMapData?.bid)
     setTxExecuteId(res.hash)
   }
   const getOrderMap = async (token) => {
     const res = await orderMap(token)
     // 竞价按钮
-    if (allowance && !ownOrder && typeIndex === 2 && res?.expiresAt > new Date().getTime()) {
+    if (account && allowance && !ownOrder && typeIndex === 2 && res?.expiresAt > new Date().getTime()) {
       setBidAuctionStatus(true)
     } else {
       setBidAuctionStatus(false)
@@ -414,7 +420,7 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
       setCountDown(`${hour}:${minute}:${second}`)
     } else {
       setCountDown(t('finished'))
-      setStatusBtnTxt('end')
+      // setStatusBtnTxt('end')
     }
   }
 
@@ -467,24 +473,33 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
             )}
             {typeIndex !== 2 && (
               <FlexCom
-                name={t('present price%price%', { price: '' })}
+                name={t('present price%price%', { price: '(HCC)' })}
-                value={detail?.price}
+                // value={detail?.price}
+                value={orderMapData?.bidder === '0' ? orderMapData?.price : orderMapData?.bid}
                 size="18px"
                 rightSize="30px"
                 textColor="#1FC7D4"
               />
             )}
             {typeIndex === 2 && (
+              //
               <FlexCom
-                name={orderMapData?.bidder === '0' ? t('Asking price') : t('present price%price%', { price: '' })}
+                name={
-                value={detail?.price}
+                  orderMapData?.bidder === '0'
+                    ? t('Asking price%price%', { price: '(HCC)' })
+                    : orderMapData?.expiresAt > new Date().getTime()
+                    ? `${t('The latest offer')}（HCC）`
+                    : t('present price%price%', { price: '(HCC)' })
+                }
+                // value={detail?.price}
+                value={orderMapData?.bidder === '0' ? orderMapData?.price : orderMapData?.bid}
                 size="18px"
                 rightSize="30px"
                 textColor="#1FC7D4"
               />
             )}
             {!account && <UnlockButtonDiv />}
-            {approveStatus && (
+            {approveStatus && account && (
               <AuthorizationBtn
                 disabled={loading}
                 onClick={() => {
@@ -508,7 +523,7 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
             ) : (
               ''
             )}
-            {allowance && !ownOrder && !sellVerify && typeIndex === 1 ? (
+            {account && allowance && !ownOrder && !sellVerify && typeIndex === 1 ? (
               <AuthorizationBtn disabled={loading} onClick={onSell}>
                 {t('Buy It Now')}
               </AuthorizationBtn>

src/views/Bazaar/components/ShopModal.tsx

@@ -192,6 +192,7 @@ const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss, close, add }) =
                   img={item?.info?.coverResource?.url}
                   width={278}
                   height={280}
+                  grade={item?.info?.grade}
                   borderRadius="20px 20px 0 0"
                 />
                 <ShopName>{item?.info?.name}</ShopName>

src/views/Bazaar/components/Transaction.tsx

@@ -4,6 +4,13 @@ import { useTranslation } from 'contexts/Localization'
 import { Flex, Text } from '@pancakeswap/uikit'
 import { useAccount } from 'state/userInfo/hooks'
 import useRefresh from 'hooks/useRefresh'
+import { useMarketStatistics } from '../hooks'
+
+interface MarketStatisticsProps {
+  auctionTimes?: string
+  tradeAmount?: string
+  tradeTimes?: string
+}
 
 const TransactionFlex = styled(Flex)`
   margin-top: 30px;
@@ -46,28 +53,39 @@ const Separate = styled.div`
 
 const Transaction: React.FC = () => {
   const { t } = useTranslation()
+  const account = useAccount()
+  const [detail, setDetail] = useState<MarketStatisticsProps>()
+  const marketStatistics = useMarketStatistics()
+
+  const getData = async () => {
+    const { auctionTimes, tradeAmount, tradeTimes } = await marketStatistics()
+    setDetail({ auctionTimes, tradeAmount, tradeTimes })
+  }
+  useEffect(() => {
+    getData()
+  }, [account])
 
   return (
     <TransactionFlex>
       <TransactionItem>
-        <TransactionItemNum>0</TransactionItemNum>
+        <TransactionItemNum>{Number(detail?.tradeAmount).toFixed(3)}</TransactionItemNum>
         <TransactionItemLabel>{t('The total volume')}</TransactionItemLabel>
       </TransactionItem>
       <Separate />
       <TransactionItem>
-        <TransactionItemNum>0</TransactionItemNum>
+        <TransactionItemNum>{detail?.tradeTimes}</TransactionItemNum>
         <TransactionItemLabel>{t('The total number of transactions')}</TransactionItemLabel>
       </TransactionItem>
       <Separate />
       <TransactionItem>
-        <TransactionItemNum>0</TransactionItemNum>
+        <TransactionItemNum>{detail?.auctionTimes}</TransactionItemNum>
         <TransactionItemLabel>{t('Total number of auctions')}</TransactionItemLabel>
       </TransactionItem>
-      <Separate />
+      {/* <Separate />
       <TransactionItem>
         <TransactionItemNum>0</TransactionItemNum>
         <TransactionItemLabel>{t('Total transaction rebate')}</TransactionItemLabel>
-      </TransactionItem>
+      </TransactionItem> */}
     </TransactionFlex>
   )
 }

src/views/Bazaar/components/TransactionRecord.tsx

@@ -78,7 +78,7 @@ const ThemedItem = styled.div`
   border-top: 1px solid #e3e3e3;
 `
 const TableBody = styled.div`
-  height: 420px;
+  height: 350px;
   overflow-y: auto;
 `
 const TrFlex = styled(Flex)`
@@ -123,13 +123,21 @@ const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss, active
   const { t } = useTranslation()
 
   const typeList = [
-    { label: t('All transactions'), value: '1' },
+    // { label: t('All transactions'), value: '1' },
-    { label: t('on offer'), value: '2' },
+    // { label: t('on offer'), value: '2' },
-    { label: t('be sold'), value: '3' },
+    // { label: t('be sold'), value: '3' },
-    { label: t('have bought'), value: '4' },
+    // { label: t('have bought'), value: '4' },
+    { label: t('All transactions'), value: '' },
+    { label: t('I participate in'), value: 'PARTICIPATE' },
+    { label: t('I released'), value: 'PUBLISH' },
   ]
   const [typeIndex, setTypeIndex] = useState(0)
-
+  const statusTxt = {
+    CANCEL: t('Canceled'),
+    PENDING: t('In the sale'),
+    STREAMING: t('abortive auction'),
+    SUCCESS: t('traded'),
+  }
   const ThemedList = [t('NFT name'), t('price'), t('Time'), t('state'), t('operation')]
 
   const [list, setList] = useState([])
@@ -163,7 +171,9 @@ const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss, active
         relationType = ''
         status = ''
     }
-    const obj = { page: pageNum, size: 10, type: 'NORMAL', relationType, status }
+
+    const obj = { page: pageNum, size: 4, type: 'NORMAL', relationType: typeList[typeIndex].value }
+    // const obj = { page: pageNum, size: 4, type: 'NORMAL', relationType, status }
     const res = await tradeRecordPage(obj)
     setCount(getTotalPageNum(res.total, 4))
     setList(res.content)
@@ -268,18 +278,23 @@ const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss, active
                 {activeIndex !== 0 && <TdFlex>{item.lastPrice}</TdFlex>}
                 {activeIndex === 0 && <TdFlex>{dayjs(Number(item.tradeTime)).format('YYYY-MM-DD HH:mm:ss')}</TdFlex>}
                 {activeIndex !== 0 && <TdFlex>{item.updatedAt}</TdFlex>}
-                <TdFlex>{item.status ? item.status : t('success')}</TdFlex>
+                <TdFlex>{item.status ? statusTxt[item.status] : t('success')}</TdFlex>
                 <TdBtnFlex>
                   <DetailButton onClick={() => lookDetail(item)}>{t('Detail')}</DetailButton>
-                  <HashText onClick={() => goHash(item)}>{t('deal Hash')}</HashText>
+                  <HashText onClick={() => goHash(item)}>
+                    {item.tx && item.tx.substring(0, 6)}....
+                    {item.tx && item.tx.substring(item.tx.length - 6, item.tx.length)}
+                  </HashText>
                 </TdBtnFlex>
               </TrFlex>
             )
           })}
         </TableBody>
+        {list.length > 0 && (
           <Flex justifyContent="center" padding={10}>
             <Pagination count={count} onChange={pageChange} page={pageNum} />
           </Flex>
+        )}
       </>
     </FlexMain>
   )

src/views/Bazaar/hooks/index.ts

@@ -4,7 +4,14 @@ import blindBoxABI from 'config/abi/blindBox.json'
 import { useBlindBox, useHccMarketplace } from 'hooks/useContract'
 import { getAddress, getBlindBoxAddress, getHccMarketplaceAddress } from 'utils/addressHelpers'
 import { useAccount } from 'state/userInfo/hooks'
-import { getOfficialPage, getOfficialPurchase, getPurchaseRecord, getNftDetail, getTradePage } from 'services/bazaar'
+import {
+  getOfficialPage,
+  getOfficialPurchase,
+  getPurchaseRecord,
+  getNftDetail,
+  getTradePage,
+  marketStatistics,
+} from 'services/bazaar'
 import { ethers, Contract } from 'ethers'
 import multicall from 'utils/multicall'
 import {
@@ -69,7 +76,6 @@ export const useMarketplaceApproveHcc = (tokenContract: Contract) => {
 export const useGetPurchaseRecord = () => {
   const data = async (page, size) => {
     const result = await getPurchaseRecord({ page, size })
-    console.log(result)
     return result
   }
   return data
@@ -93,7 +99,6 @@ export const useBuyTransaction = () => {
 export const useGetNftDetail = () => {
   const data = async (token, params) => {
     const result = await getNftDetail(token, params)
-    console.log(result)
     return result
   }
   return data
@@ -103,7 +108,6 @@ export const useGetNftDetail = () => {
 export const useGetTradePage = () => {
   const data = async (params) => {
     const result = await getTradePage(params)
-    console.log(result)
     return result
   }
   return data
@@ -127,9 +131,6 @@ export const useIsApproved = () => {
     ]
 
     const res = await multicall(blindBoxABI, calls)
-    // const res = await blindBox.getApproved(...mintParams)
-    console.log(res[0][0].toLowerCase())
-    console.log(hccMarketplaceAddress)
     let status = false
     if (res[0][0].toLowerCase() === hccMarketplaceAddress.toLowerCase()) {
       status = true
@@ -146,18 +147,7 @@ export const useApproved = () => {
   const hccMarketplaceAddress = getHccMarketplaceAddress()
   const transaction = async (tokenId) => {
     const mintParams = [hccMarketplaceAddress, tokenId]
-    console.log(mintParams)
-    // const calls = [
-    //   {
-    //     address,
-    //     name: 'getApproved',
-    //     params: [tokenId],
-    //   },
-    // ]
-
-    // const res = await multicall(blindBoxABI, calls)
     const res = await blindBox.approve(...mintParams)
-    console.log(res)
     return res
   }
   return transaction
@@ -176,11 +166,7 @@ export const useCreateNormalOrder = () => {
       },
     ]
     const mintParams = [tokenId, getDecimalAmount(price).toString()]
-    console.log(mintParams)
     const res = await hccMarketplace.createNormalOrder(...mintParams)
-
-    // const res = await multicall(hccMarketplaceABI, calls)
-    console.log(res)
     return res
   }
   return transaction
@@ -191,19 +177,8 @@ export const useCreateAuctionOrder = () => {
   const hccMarketplace = useHccMarketplace()
   const transaction = async (tokenId, price, time) => {
     const hccMarketplaceAddress = getHccMarketplaceAddress()
-    // const calls = [
-    //   {
-    //     address: hccMarketplaceAddress,
-    //     name: 'createAuctionOrder',
-    //     params: [account],
-    //   },
-    // ]
-    console.log(hccMarketplace)
     const mintParams = [tokenId, getDecimalAmount(price).toString(), time]
-    console.log(mintParams)
     const res = await hccMarketplace.createAuctionOrder(...mintParams)
-    // const res = await multicall(hccMarketplaceABI, calls)
-    console.log(res)
     return res
   }
   return transaction
@@ -214,19 +189,8 @@ export const useCancelOrder = () => {
   const hccMarketplace = useHccMarketplace()
   const transaction = async (id) => {
     const hccMarketplaceAddress = getHccMarketplaceAddress()
-    // const calls = [
-    //   {
-    //     address: hccMarketplaceAddress,
-    //     name: 'createAuctionOrder',
-    //     params: [account],
-    //   },
-    // ]
-
     const mintParams = [id]
-    console.log(...mintParams)
     const res = await hccMarketplace.cancelOrder(...mintParams)
-    // const res = await multicall(hccMarketplaceABI, calls)
-    console.log(res)
     return res
   }
   return transaction
@@ -237,19 +201,8 @@ export const useExecuteOrder = () => {
   const hccMarketplace = useHccMarketplace()
   const transaction = async (tokenId, price) => {
     const hccMarketplaceAddress = getHccMarketplaceAddress()
-    // const calls = [
-    //   {
-    //     address: hccMarketplaceAddress,
-    //     name: 'createAuctionOrder',
-    //     params: [account],
-    //   },
-    // ]
-
     const mintParams = [tokenId, getDecimalAmount(price).toString()]
-    console.log(...mintParams)
     const res = await hccMarketplace.executeOrder(...mintParams)
-    // const res = await multicall(hccMarketplaceABI, calls)
-    console.log(res)
     return res
   }
   return transaction
@@ -259,19 +212,8 @@ export const useBidAuctionOrder = () => {
   const hccMarketplace = useHccMarketplace()
   const transaction = async (tokenId, price) => {
     const hccMarketplaceAddress = getHccMarketplaceAddress()
-    // const calls = [
-    //   {
-    //     address: hccMarketplaceAddress,
-    //     name: 'createAuctionOrder',
-    //     params: [account],
-    //   },
-    // ]
-
     const mintParams = [tokenId, getDecimalAmount(price).toString()]
-    console.log(...mintParams)
     const res = await hccMarketplace.bidAuctionOrder(...mintParams)
-    // const res = await multicall(hccMarketplaceABI, calls)
-    console.log(res)
     return res
   }
   return transaction
@@ -290,11 +232,10 @@ export const useOrderMap = () => {
     ]
     const res = await multicall(hccMarketplaceABI, calls)
     const arr = res.map((item) => {
-      console.log(item)
-      console.log(new BigNumber(item.expiresAt._hex).toNumber())
       return {
         price: getBalanceNumber(item.price._hex),
-        expiresAt: new BigNumber(item.expiresAt._hex).toNumber(),
+        // expiresAt: new BigNumber(item.expiresAt._hex).toNumber(),
+        expiresAt: new BigNumber(item.expiresAt._hex).multipliedBy(1000).toNumber(),
         bidder:
           new BigNumber(item.bidder).toString().toLowerCase() === 'nan'
             ? item.bidder
@@ -307,4 +248,13 @@ export const useOrderMap = () => {
   return transaction
 }
 
+// 获取统计
+export const useMarketStatistics = () => {
+  const data = async () => {
+    const result = await marketStatistics()
+    return result
+  }
+  return data
+}
+
 export default useGetOfficialPage