调整NFT市场

public/locales/zh-CN.json

@@ -1305,5 +1305,6 @@
   "In the sale": "售卖中",
   "The purchase": "竞拍成功",
   "The selling time cannot be less than %hour% hour": "出售时间不能小于%hour%小时",
-  "Did not take": "未拍中"
+  "Did not take": "未拍中",
+  "transaction price": "成交价"
 }

src/App.tsx

@@ -132,6 +132,8 @@ const App: React.FC = () => {
             <Route path="/bazaar">
               <Bazaar />
             </Route>
+            <Route exact strict path="/swap" component={Swap} />
+            <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
             {/* <Route path="/lottery">
               <Lottery />
             </Route>

src/components/Menu/config.ts

@@ -41,24 +41,24 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
   //     },
   //   ],
   // },
+  {
+    label: t('Trade'),
+    icon: 'TradeIcon',
+    items: [
+      {
+        label: t('Exchange'),
+        href: '/swap',
+      },
+      {
+        label: t('Liquidity'),
+        href: '/pool',
+      },
       // {
-  //   label: t('Trade'),
+      //   label: t('LP Migration'),
-  //   icon: 'TradeIcon',
+      //   href: 'https://v1exchange.pancakeswap.finance/#/migrate',
-  //   items: [
-  //     {
-  //       label: t('Exchange'),
-  //       href: '/swap',
-  //     },
-  //     {
-  //       label: t('Liquidity'),
-  //       href: '/pool',
-  //     },
-  //     // {
-  //     //   label: t('LP Migration'),
-  //     //   href: 'https://v1exchange.pancakeswap.finance/#/migrate',
-  //     // },
-  //   ],
       // },
+    ],
+  },
   // {
   //   label: t('Exchange'),
   //   icon: 'FarmIcon',

src/config/localization/translations.json

@@ -1432,5 +1432,6 @@
   "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"
+  "Did not take": "Did not take",
+  "transaction price": "transaction price"
 }

src/services/bazaar.ts

@@ -105,5 +105,11 @@ export const getPublishTime = () => {
     method: 'get',
   })
 }
+export const getGoodsDetail = (id) => {
+  return request.request({
+    url: `/high_city/app/api/goods/${id}`,
+    method: 'get',
+  })
+}
 
 export default getOfficialPage

src/views/Bazaar/components/AuctionRecord.tsx

@@ -24,7 +24,7 @@ interface ListProps {
 }
 
 const FlexMain = styled.div`
-  width: 70%;
+  width: 1062px;
   height: 658px;
   background: #fff;
   font-size: 18px;
@@ -121,11 +121,12 @@ const TdBtnFlex = styled(Flex)`
   align-items: center;
 `
 const DetailButton = styled(Button)`
-  width: 80px;
+  width: 60px;
   height: 30px;
   background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
   border-radius: 30px;
   font-size: 12px;
+  padding: 0;
 `
 const HashText = styled(Text)`
   cursor: pointer;
@@ -319,7 +320,7 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss, recordDetail }
                 <TrFlex key={item.id}>
                   <TdFlex>
                     {/* <TdImage src="/images/nft/epic-icon.svg" width={24} height={40} /> */}
-                    {item.goodsName}
+                    {`${item.goodsName}(#${item.token})`}
                   </TdFlex>
                   <TdFlex>{item.price}</TdFlex>
                   <TdFlex>{item.lastPrice}HCC</TdFlex>

src/views/Bazaar/components/AuctionTable.tsx

@@ -4,6 +4,7 @@ import Tooltip from '@mui/material/Tooltip'
 import { Text, Flex } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 import { tradeRecord } from 'services/bazaar'
+import useRefresh from 'hooks/useRefresh'
 import Empty from 'components/Empty'
 
 interface AuctionTableProps {
@@ -95,6 +96,7 @@ const TxFlex = styled(Flex)`
 
 const AuctionTable: React.FC<AuctionTableProps> = ({ token, time }) => {
   const { t } = useTranslation()
+  const { fastRefresh } = useRefresh()
   const [pageNum, setPage] = useState(1)
   const [list, serList] = useState<ListProps[]>()
   // 交易记录
@@ -107,6 +109,11 @@ const AuctionTable: React.FC<AuctionTableProps> = ({ token, time }) => {
       getTradeRecord()
     }
   }, [pageNum, token])
+  useEffect(() => {
+    if (token) {
+      getTradeRecord()
+    }
+  }, [fastRefresh])
   const goHash = (val) => {
     window.open(`https://goerli.etherscan.io/tx/${val}`)
   }

src/views/Bazaar/components/BtnStatus.tsx

@@ -25,7 +25,7 @@ const PriceButton = styled(Button)`
   background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
   border-radius: 30px;
   font-size: 16px;
-  margin: 30px 0;
+  /* margin: 30px 0; */
 `
 const AuthorizationBtn = styled(Button)`
   width: 100%;
@@ -86,6 +86,7 @@ const BtnStatus: React.FC<DetailProps> = ({ detail }) => {
   }
 
   useEffect(() => {
+    console.log(detail)
     if (detail.priceList) {
       const priceList = detail.priceList.map((item) => {
         return `${Number(item.value).toFixed(3)} ${item.label}`
@@ -150,10 +151,10 @@ const BtnStatus: React.FC<DetailProps> = ({ detail }) => {
     <>
       {buyVisible && <PriceButton onClick={handleBuy}>{t('Buy It Now')}</PriceButton>}
       <Flex style={{ width: '100%' }}>
-        {detail.priceList.map((item, i) =>
+        {detail?.priceList?.map((item, i) =>
           item.label === 'HCC' && !allowanceList.HCC ? (
             <AuthorizationBtn
-              key={item.label}
+              key={item?.label}
               disabled={loading}
               onClick={() => {
                 handleApprove(onHccApprove)
@@ -163,7 +164,7 @@ const BtnStatus: React.FC<DetailProps> = ({ detail }) => {
             </AuthorizationBtn>
           ) : item.label === 'USDT' && !allowanceList.USDT ? (
             <AuthorizationBtn
-              key={item.label}
+              key={item?.label}
               disabled={loading}
               onClick={() => {
                 handleApprove(onUsdtApprove)

src/views/Bazaar/components/Content.tsx

@@ -9,6 +9,7 @@ import { useAccount } from 'state/userInfo/hooks'
 import useRefresh from 'hooks/useRefresh'
 import useToast from 'hooks/useToast'
 import { ListProps } from 'types/bazaar'
+import { getGoodsDetail } from 'services/bazaar'
 
 import Empty from 'components/Empty'
 import { useGetOfficialPage, useGetTradePage } from '../hooks'
@@ -225,12 +226,22 @@ const Content: React.FC = () => {
     if (location.search) {
       const locationData = qs.parse(location.search.slice(1))
       if (!locationData?.type) {
-        arr.forEach((item) => {
+        const res = await getGoodsDetail(locationData.id)
-          if (item.id === locationData.id) {
+        console.log(res)
-            setDetail(item)
+        res.priceList = []
-            setDetailVisible(true)
+        Object.keys(res.price).forEach((childItem) => {
-          }
+          res.priceList.push({ label: childItem, value: res.price[childItem] })
         })
+        res.price = undefined
+        console.log(res)
+        setDetail(res)
+        setDetailVisible(true)
+        // arr.forEach((item) => {
+        //   if (item.id === locationData.id) {
+        //     setDetail(item)
+        //     setDetailVisible(true)
+        //   }
+        // })
       }
     }
     setCount(getTotalPageNum(data.total, data.size))

src/views/Bazaar/components/SellModal.tsx

@@ -40,40 +40,46 @@ interface CoverResourceProps {
   url?: string
 }
 
+const MainContainer = styled.div`
+  position: relative;
+  z-index: 9999;
+`
+const CloseImage = styled(Image)`
+  cursor: pointer;
+  position: absolute;
+  bottom: -100px;
+  left: 50%;
+  margin-left: -25px;
+`
+
 const FlexMain = styled.div`
-  width: 70%;
+  width: 480px;
-  min-height: 598px;
+  /* min-height: 598px; */
   overflow-y: auto;
   background: #fff;
   font-size: 18px;
   color: #999999;
   z-index: 9999;
   border-radius: 15px;
-  position: relative;
   ${({ theme }) => theme.mediaQueries.xs} {
-    width: 90%;
+    width: 350px;
   }
   ${({ theme }) => theme.mediaQueries.lg} {
-    width: 70%;
+    width: 480px;
   }
 `
-const CloseImage = styled(Image)`
-  cursor: pointer;
-  position: absolute;
-  top: 30px;
-  right: 30px;
-`
 const HeaderText = styled(Text)`
   font-size: 24px;
   color: #333333;
   margin-top: 40px;
   text-align: center;
+  margin-bottom: 35px;
 `
 const SelectFlex = styled(Flex)`
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  padding: 35px 100px 30px 100px;
+  padding: 0 40px;
   border-bottom: 1px solid #e3e3e3;
   ${({ theme }) => theme.mediaQueries.xs} {
     justify-content: center;
@@ -150,7 +156,7 @@ const AddNftButton = styled(Button)`
   font-size: 14px;
 `
 const ShopFlex = styled(Flex)`
-  width: 278px;
+  width: 248px;
   flex-direction: column;
   background: #fff;
   box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
@@ -160,7 +166,7 @@ const ShopFlex = styled(Flex)`
 `
 
 const ShopName = styled(Text)`
-  padding: 26px 0;
+  padding: 24px 29px 24px 29px;
   text-align: center;
   font-size: 18px;
   color: #666666;
@@ -190,6 +196,7 @@ const SelectShopModal = styled(Flex)`
 `
 const InputDiv = styled.div`
   position: relative;
+  margin-bottom: 20px;
 `
 const InputText = styled(Text)`
   position: absolute;
@@ -264,8 +271,8 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
       toastError(t('Please enter price'))
       return
     }
-    if (Number(price) <= 0) {
+    if (Number(price) < 1) {
-      toastError(t('The price is greater than %num%', { num: 0 }))
+      toastError(t('The price is greater than %num%', { num: 1 }))
       return
     }
     if (sellingWay?.value === '2' && Number(time) < 0) {
@@ -322,8 +329,8 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
   }, [fastRefresh])
 
   return (
+    <MainContainer>
       <FlexMain>
-      <CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
         <HeaderText>{t('sell NFT')}</HeaderText>
         <SelectFlex>
           <WayFlex>
@@ -347,7 +354,7 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
             <InputDiv>
               <SellInput
                 type="number"
-              style={{ marginBottom: '20px' }}
+                // style={{ marginBottom: '20px' }}
                 placeholder={t('Please enter price')}
                 onChange={handlePriceChange}
               />
@@ -370,8 +377,8 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
                 item={shopData}
                 img={shopData?.info?.coverResource?.url}
                 grade={shopData?.info?.grade}
-              width={278}
+                width={248}
-              height={280}
+                height={238}
                 borderRadius="20px 20px 0 0"
               />
               <ShopName>{shopData?.info?.name}</ShopName>
@@ -395,6 +402,8 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss, detailData }) => {
           </SelectShopModal>
         )}
       </FlexMain>
+      <CloseImage src="/images/nft/close.png" width={50} height={50} onClick={onDismiss} />
+    </MainContainer>
   )
 }
 

src/views/Bazaar/components/ShopDetail.tsx

@@ -89,7 +89,7 @@ const PriceButton = styled(Button)`
   background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
   border-radius: 30px;
   font-size: 16px;
-  margin: 30px 0;
+  /* margin: 30px 0; */
 `
 const AuthorizationBtn = styled(Button)`
   width: 100%;
@@ -106,10 +106,11 @@ const UnlockButtonDiv = styled(UnlockButton)`
   background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
   border-radius: 30px;
   font-size: 16px;
-  margin: 30px 0;
+  /* margin: 30px 0; */
 `
 const DetailFlexInfo = styled(Flex)`
   flex-direction: column;
+  justify-content: space-between;
   width: 100%;
   height: 304px;
   background: #f5ffff;
@@ -131,6 +132,7 @@ const ShopDetail: React.FC<DetailProps> = ({ close, detail, typeIndex }) => {
   const { fastRefresh } = useRefresh()
   const account = useAccount()
   useEffect(() => {
+    console.log(detail)
     if (detail.priceList) {
       const priceList = detail.priceList.map((item) => {
         return `${Number(item.value).toFixed(3)} ${item.label}`
@@ -175,7 +177,7 @@ const ShopDetail: React.FC<DetailProps> = ({ close, detail, typeIndex }) => {
             item={detail}
             width={476}
             height={606}
-            img={detail?.coverResource.url}
+            img={detail?.coverResource?.url}
             grade={detail.grade}
             borderRadius="20px"
           />

src/views/Bazaar/components/ShopDetailBazaar.tsx

@@ -159,6 +159,7 @@ const UnlockButtonDiv = styled(UnlockButton)`
 `
 const DetailFlexInfo = styled(Flex)`
   flex-direction: column;
+  justify-content: space-between;
   width: 100%;
   height: 304px;
   background: #f5ffff;
@@ -182,12 +183,14 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
     CANCEL: t('Canceled'),
     STREAMING: t('abortive auction'),
     SUCCESS: t('success'),
+    BID_SUCCESS: t('The purchase'),
   }
   const statusHeaderTxt = {
     PENDING: t('They are in'),
     CANCEL: t('Canceled'),
     STREAMING: t('abortive auction'),
     SUCCESS: t('success'),
+    BID_SUCCESS: t('The purchase'),
   }
 
   const [loading, setLoading] = useState(false)
@@ -377,7 +380,7 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
   const getNft = async () => {
     setLoading(true)
     // const res = await executeOrder(detail.token, orderMapData?.bid)
-    const res = await executeOrder(orderMapData?.bidder, orderMapData?.bid)
+    const res = await executeOrder(detail.token, orderMapData?.bid)
     setTxExecuteId(res.hash)
   }
   const getOrderMap = async (token) => {
@@ -453,7 +456,7 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
                 style={{ cursor: 'pointer' }}
               />
             </DetailHeaderFlex>
-            {orderMapData?.expiresAt > new Date().getTime() && typeIndex === 2 && (
+            {orderMapData?.expiresAt > new Date().getTime() && typeIndex === 2 && statusBtnTxt !== 'SUCCESS' && (
               <FlexCom
                 name={t('Auction remaining time')}
                 value={countDown}
@@ -471,7 +474,7 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
                 textColor="#666666"
               />
             )}
-            {typeIndex !== 2 && (
+            {typeIndex !== 2 && statusBtnTxt !== 'SUCCESS' && statusBtnTxt !== 'CANCEL' && (
               <FlexCom
                 name={t('present price%price%', { price: '(HCC)' })}
                 // value={detail?.price}
@@ -481,7 +484,30 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
                 textColor="#1FC7D4"
               />
             )}
-            {typeIndex === 2 && (
+            {typeIndex !== 2 && statusBtnTxt === 'SUCCESS' && (
+              <FlexCom
+                name={`${t('trading value')}（HCC）`}
+                // value={detail?.price}
+                value={detail?.price}
+                size="18px"
+                rightSize="30px"
+                textColor="#1FC7D4"
+              />
+            )}
+            {typeIndex !== 2 && statusBtnTxt === 'CANCEL' && (
+              <FlexCom
+                name={t('present price%price%', { price: '(HCC)' })}
+                // value={detail?.price}
+                value={detail?.price}
+                size="18px"
+                rightSize="30px"
+                textColor="#1FC7D4"
+              />
+            )}
+            {typeIndex === 2 &&
+              statusBtnTxt !== 'SUCCESS' &&
+              statusBtnTxt !== 'CANCEL' &&
+              statusBtnTxt !== 'BID_SUCCESS' && (
                 //
                 <FlexCom
                   name={
@@ -498,6 +524,29 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
                   textColor="#1FC7D4"
                 />
               )}
+            {/* 竞拍成功之后使用接口数据 */}
+            {typeIndex === 2 && (statusBtnTxt === 'SUCCESS' || statusBtnTxt === 'BID_SUCCESS') && (
+              //
+              <FlexCom
+                name={`${t('transaction price')}（HCC）`}
+                // value={detail?.price}
+                value={detail?.price}
+                size="18px"
+                rightSize="30px"
+                textColor="#1FC7D4"
+              />
+            )}
+            {typeIndex === 2 && statusBtnTxt === 'CANCEL' && (
+              //
+              <FlexCom
+                name={t('present price%price%', { price: '(HCC)' })}
+                // value={detail?.price}
+                value={detail?.price}
+                size="18px"
+                rightSize="30px"
+                textColor="#1FC7D4"
+              />
+            )}
             {!account && <UnlockButtonDiv />}
             {approveStatus && account && (
               <AuthorizationBtn
@@ -516,10 +565,29 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
             )}
             {/* 改版 */}
             {/* 竞拍取消挂单：没有人竞拍时 */}
-            {account && allowance && ownOrder && orderMapData?.bidder === '0' ? (
+            {account &&
+            allowance &&
+            ownOrder &&
+            orderMapData?.bidder === '0' &&
+            statusBtnTxt !== 'STREAMING' &&
+            statusBtnTxt !== 'SUCCESS' ? (
               <AuthorizationBtn onClick={cancelOrder} disabled={!orderMapData}>
                 {statusTxt[statusBtnTxt]}
               </AuthorizationBtn>
+            ) : account &&
+              allowance &&
+              ownOrder &&
+              orderMapData?.bidder === '0' &&
+              statusBtnTxt !== 'STREAMING' &&
+              statusBtnTxt === 'SUCCESS' ? (
+              <AuthorizationBtn disabled>{statusTxt[statusBtnTxt]}</AuthorizationBtn>
+            ) : (
+              ''
+            )}
+            {account && allowance && ownOrder && orderMapData?.bidder === '0' && statusBtnTxt === 'STREAMING' ? (
+              <AuthorizationBtn onClick={cancelOrder} disabled={!orderMapData}>
+                {t('Cancel the deity')}
+              </AuthorizationBtn>
             ) : (
               ''
             )}
@@ -530,14 +598,20 @@ const ShopDetail: React.FC<DetailProps> = ({ close, id, typeIndex }) => {
             ) : (
               ''
             )}
-            {bidAuctionStatus && (
+            {bidAuctionStatus && statusBtnTxt !== 'SUCCESS' ? (
               <PriceButton onClick={onBidAuctionOrder} disabled={loading || !orderMapData?.price || forbid}>
                 {t('Fixed markup (%price% premium)', { price: '10%' })}
               </PriceButton>
+            ) : bidAuctionStatus && statusBtnTxt === 'SUCCESS' ? (
+              <PriceButton onClick={onBidAuctionOrder} disabled>
+                {statusTxt[statusBtnTxt]}
+              </PriceButton>
+            ) : (
+              ''
             )}
             {account &&
             orderMapData?.expiresAt < new Date().getTime() &&
-            account === orderMapData?.bidder &&
+            account.toLowerCase() === orderMapData?.bidder.toLowerCase() &&
             typeIndex === 2 ? (
               <AuthorizationBtn disabled={loading} onClick={getNft}>
                 {t('Claim now')}

src/views/Bazaar/components/ShopModal.tsx

@@ -38,21 +38,24 @@ interface CoverResourceProps {
   url?: string
 }
 const Main = styled.div`
-  width: 60%;
+  width: 890px;
   background-color: #fff;
-  padding: 30px 15px;
   border-radius: 30px;
+  /* padding-top: 30px; */
   /* height: 80%; */
   z-index: 10;
 `
 const Shop = styled.div`
+  padding: 30px 30px 0 30px;
+  max-height: 544px;
   width: 100%;
   display: grid;
-  gap: 18px;
+  gap: 9px;
   grid-template-rows: 1fr;
   margin: 0px auto;
   grid-template-columns: repeat(4, 1fr);
   box-sizing: border-box;
+  overflow-y: auto;
   & > .active {
     border: 3px solid #0deeff;
   }
@@ -69,14 +72,15 @@ const Shop = styled.div`
 `
 const ShopFlex = styled(Flex)`
   flex-direction: column;
+  width: 198px;
+  height: 252px;
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
-  opacity: 1;
   border-radius: 20px;
   position: relative;
 `
 const ShopName = styled(Text)`
-  padding: 26px 0;
+  padding: 10px 0;
   text-align: center;
   font-size: 18px;
   color: #666666;
@@ -86,8 +90,8 @@ const SelectFlex = styled(Flex)`
   position: absolute;
   top: 10px;
   right: 10px;
-  width: 30px;
+  width: 20px;
-  height: 30px;
+  height: 20px;
   background: #fff;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.16);
   border-radius: 50%;
@@ -96,8 +100,8 @@ const SelectFlex = styled(Flex)`
   justify-content: center;
 `
 const SelectDiv = styled.div`
-  width: 15px;
+  width: 10px;
-  height: 15px;
+  height: 10px;
   background: #0deeff;
   border-radius: 50%;
   margin-left: 1px;
@@ -190,8 +194,8 @@ const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss, close, add }) =
                 <ShopList
                   item={item}
                   img={item?.info?.coverResource?.url}
-                  width={278}
+                  width={198}
-                  height={280}
+                  height={201}
                   grade={item?.info?.grade}
                   borderRadius="20px 20px 0 0"
                 />
@@ -201,7 +205,7 @@ const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss, close, add }) =
           })}
       </Shop>
       {list?.length > 0 && (
-        <Flex justifyContent="center" padding={10}>
+        <Flex justifyContent="center" padding={10} marginTop={20}>
           <Pagination count={count} onChange={pageChange} page={pageNum} />
         </Flex>
       )}

src/views/Bazaar/components/Transaction.tsx

@@ -68,17 +68,17 @@ const Transaction: React.FC = () => {
   return (
     <TransactionFlex>
       <TransactionItem>
-        <TransactionItemNum>{Number(detail?.tradeAmount).toFixed(3)}</TransactionItemNum>
+        <TransactionItemNum>{Math.round(Number(detail?.tradeAmount))}</TransactionItemNum>
         <TransactionItemLabel>{t('The total volume')}</TransactionItemLabel>
       </TransactionItem>
       <Separate />
       <TransactionItem>
-        <TransactionItemNum>{detail?.tradeTimes}</TransactionItemNum>
+        <TransactionItemNum>{detail?.tradeTimes || 0}</TransactionItemNum>
         <TransactionItemLabel>{t('The total number of transactions')}</TransactionItemLabel>
       </TransactionItem>
       <Separate />
       <TransactionItem>
-        <TransactionItemNum>{detail?.auctionTimes}</TransactionItemNum>
+        <TransactionItemNum>{detail?.auctionTimes || 0}</TransactionItemNum>
         <TransactionItemLabel>{t('Total number of auctions')}</TransactionItemLabel>
       </TransactionItem>
       {/* <Separate />

src/views/Bazaar/components/TransactionRecord.tsx

@@ -15,7 +15,7 @@ interface TransactionRecordProps {
 }
 
 const FlexMain = styled.div`
-  width: 70%;
+  width: 1062px;
   height: 658px;
   background: #fff;
   font-size: 18px;
@@ -98,6 +98,10 @@ const TdFlex = styled(Flex)`
   white-space: nowrap;
   text-overflow: ellipsis;
 `
+const PriceText = styled(Text)`
+  color: #666666;
+  font-size: 14px;
+`
 const TdBtnFlex = styled(Flex)`
   width: 20%;
   flex-direction: column;
@@ -261,14 +265,14 @@ const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss, active
           {list.map((item) => {
             return (
               <TrFlex key={item.id}>
-                <TdFlex>{item.goodsName}</TdFlex>
+                <TdFlex>{`${item.goodsName}(#${item.token})`}</TdFlex>
                 {activeIndex === 0 && (
                   <TdFlex>
                     {item.priceList.map((childItem, childIndex) => {
                       return (
                         <Flex alignItems="center" key={childItem.label}>
                           <>{Number(childItem.value).toFixed(2)}</>
-                          <Text color="text">{childItem.label}</Text>
+                          <PriceText color="text">{childItem.label}</PriceText>
                           {childIndex === 0 && item.priceList.length === 2 && <Text margin="0 5px">-</Text>}
                         </Flex>
                       )

src/views/Bazaar/hooks/index.ts

@@ -202,6 +202,7 @@ export const useExecuteOrder = () => {
   const transaction = async (tokenId, price) => {
     const hccMarketplaceAddress = getHccMarketplaceAddress()
     const mintParams = [tokenId, getDecimalAmount(price).toString()]
+    console.log(mintParams)
     const res = await hccMarketplace.executeOrder(...mintParams)
     return res
   }
@@ -243,6 +244,7 @@ export const useOrderMap = () => {
         bid: getBalanceNumber(item.bid._hex),
       }
     })
+    console.log(arr[0])
     return arr[0]
   }
   return transaction