调整部分页面

src/hooks/Tokens.ts

@@ -23,7 +23,6 @@ import { filterTokens } from '../components/SearchModal/filtering'
 function useTokensFromMap(tokenMap: TokenAddressMap, includeUserAdded: boolean): { [address: string]: Token } {
   const { chainId } = useActiveWeb3React()
   const userAddedTokens = useUserAddedTokens()
-
   return useMemo(() => {
     if (!chainId) return {}
 
@@ -32,7 +31,6 @@ function useTokensFromMap(tokenMap: TokenAddressMap, includeUserAdded: boolean):
       newMap[address] = tokenMap[chainId][address].token
       return newMap
     }, {})
-    console.log(mapWithoutUrls)
     if (includeUserAdded) {
       return (
         userAddedTokens

src/types/bazaar.ts

@@ -0,0 +1,17 @@
+export interface ListProps {
+  coverResource?: CoverResourceProps
+  grade?: string
+  id?: string
+  name?: string
+  price?: undefined
+  priceList?: PriceProps[]
+  type?: string
+}
+export interface CoverResourceProps {
+  path?: string
+  url?: string
+}
+export interface PriceProps {
+  label?: string
+  value?: string
+}

src/types/blindBox.ts

@@ -0,0 +1,22 @@
+export interface ListProp {
+  beginTime?: string
+  coverResource: coverResourceProps
+  endTime?: string
+  id?: string
+  name?: string
+  priceList?: priceProps[]
+  price?: any
+  purchased?: string | number
+  total?: string | number
+  type?: string
+  num?: number
+}
+
+export interface coverResourceProps {
+  path?: string
+  url?: string
+}
+export interface priceProps {
+  label?: string
+  value?: string | number
+}

src/views/Bazaar/components/Content.tsx

@@ -5,6 +5,7 @@ import Pagination from '@mui/material/Pagination'
 import { Flex, Text, Input, Image, Dropdown } from '@pancakeswap/uikit'
 import { useAccount } from 'state/userInfo/hooks'
 import useRefresh from 'hooks/useRefresh'
+import { ListProps } from 'types/bazaar'
 
 import { useGetOfficialPage } from '../hooks'
 import HeaderOperation from './HeaderOperation'
@@ -12,24 +13,6 @@ import ContentShop from './ContentShop'
 import Transaction from './Transaction'
 import ShopDetail from './ShopDetail'
 
-interface ListProps {
-  coverResource?: CoverResourceProps
-  grade?: string
-  id?: string
-  name?: string
-  price?: undefined
-  priceList?: PriceProps[]
-  type?: string
-}
-interface CoverResourceProps {
-  path?: string
-  url?: string
-}
-interface PriceProps {
-  label?: string
-  value?: string
-}
-
 const HeaderFlex = styled(Flex)`
   width: 100%;
   justify-content: space-between;
@@ -146,6 +129,7 @@ const FlexOption = styled(Flex)`
 
 const Content: React.FC = () => {
   const { t } = useTranslation()
+  const [detail, setDetail] = useState<ListProps>({})
   const [detailVisible, setDetailVisible] = useState(false)
   const typeList = [
     { label: t('All'), type: 1 },
@@ -159,26 +143,27 @@ const Content: React.FC = () => {
   ]
   const [auctionSelect, setAuctionSelect] = useState({ label: t('In the auction'), value: '0' })
   const newPrice = [
-    { label: t('The latest offer'), value: '0' },
+    // { label: t('The latest offer'), value: '0' },
-    { label: t('latest release'), value: '1' },
+    // { label: t('latest release'), value: '1' },
-    { label: t('end time'), value: '2' },
+    // { label: t('end time'), value: '2' },
     { label: t('Prices go from low to high'), value: '3' },
     { label: t('Prices go from high to low'), value: '4' },
   ]
-  const [priceSelect, setPriceSelect] = useState({ label: t('The latest offer'), value: '0' })
+  const [priceSelect, setPriceSelect] = useState({ label: t('Prices go from low to high'), value: '3' })
   const [searchTitle, setSearchTitle] = useState('')
 
   const [list, setList] = useState<ListProps[]>([])
   const statusList = [
-    { label: t('All'), id: '1' },
+    { label: t('All'), id: '1', grade: '' },
-    { label: t('epic'), id: '2' },
+    { label: t('epic'), id: '2', grade: 'EPIC' },
-    { label: t('legend'), id: '3' },
+    { label: t('legend'), id: '3', grade: 'LEGEND' },
-    { label: t('uncommon'), id: '4' },
+    { label: t('uncommon'), id: '4', grade: 'RARE' },
-    { label: t('common'), id: '5' },
+    { label: t('common'), id: '5', grade: 'NORMAL' },
   ]
   const [statusIndex, setStatusIndex] = useState(0)
 
   const [pageNum, setPage] = useState(1)
+  const [searchGrade, setGrade] = useState('')
 
   const [count, setCount] = useState(undefined)
 
@@ -188,6 +173,7 @@ const Content: React.FC = () => {
     const params = {
       page: pageNum,
       size: 10,
+      grade: searchGrade,
     }
     const data = await getOfficialPage(params)
     const arr = []
@@ -206,7 +192,7 @@ const Content: React.FC = () => {
 
   useEffect(() => {
     getData()
-  }, [pageNum])
+  }, [pageNum, searchGrade])
 
   const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = evt.target
@@ -214,8 +200,11 @@ const Content: React.FC = () => {
   }
   const searchList = () => {
     console.log('search')
+    setPage(1)
   }
-  const showDetail = () => {
+  const showDetail = (val) => {
+    console.log(val)
+    setDetail(val)
     setDetailVisible(!detailVisible)
   }
   const pageChange = (e, page) => {
@@ -226,9 +215,15 @@ const Content: React.FC = () => {
     return parseInt(countTotal)
   }
 
+  const selectStatus = (index, grade) => {
+    setStatusIndex(index)
+    setGrade(grade)
+    setPage(1)
+  }
+
   return (
     <>
-      {detailVisible && <ShopDetail close={showDetail} />}
+      {detailVisible && <ShopDetail detail={detail} typeIndex={typeIndex} close={() => setDetailVisible(false)} />}
 
       {!detailVisible && (
         <>
@@ -256,7 +251,7 @@ const Content: React.FC = () => {
                 return (
                   <StatusFlexItem
                     key={item.id}
-                    onClick={() => setStatusIndex(index)}
+                    onClick={() => selectStatus(index, item.grade)}
                     className={statusIndex === index ? 'statusActive' : ''}
                   >
                     {item.label}
@@ -265,25 +260,27 @@ const Content: React.FC = () => {
               })}
             </StatusFlexContent>
             <Flex>
-              <SelectMain>
+              {typeIndex !== 0 && (
-                <Dropdown
+                <SelectMain>
-                  position="bottom"
+                  <Dropdown
-                  target={
+                    position="bottom"
-                    <SelectFlex>
+                    target={
-                      <Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
+                      <SelectFlex>
-                      <SelectText>{auctionSelect.label}</SelectText>
+                        <Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
-                    </SelectFlex>
+                        <SelectText>{auctionSelect.label}</SelectText>
-                  }
+                      </SelectFlex>
-                >
+                    }
-                  {auctionList.map((item) => {
+                  >
-                    return (
+                    {auctionList.map((item) => {
-                      <FlexOption key={item.value} onClick={() => setAuctionSelect(item)}>
+                      return (
-                        {item.label}
+                        <FlexOption key={item.value} onClick={() => setAuctionSelect(item)}>
-                      </FlexOption>
+                          {item.label}
-                    )
+                        </FlexOption>
-                  })}
+                      )
-                </Dropdown>
+                    })}
-              </SelectMain>
+                  </Dropdown>
+                </SelectMain>
+              )}
               <SelectMain>
                 <Dropdown
                   position="bottom"
@@ -313,7 +310,7 @@ const Content: React.FC = () => {
               </SearchBtn>
             </InputMain>
           </SearchDiv>
-          <ContentShop list={list} getDetail={showDetail} />
+          <ContentShop list={list} getDetail={(v) => showDetail(v)} />
           <Flex justifyContent="center" padding={10}>
             <Pagination count={count} onChange={pageChange} page={pageNum} />
           </Flex>

src/views/Bazaar/components/ContentShop.tsx

@@ -3,6 +3,7 @@ import styled, { keyframes } from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { formatTimeNumber } from 'utils/formatBalance'
 import { Flex, Text, Image } from '@pancakeswap/uikit'
+import { ListProps } from 'types/bazaar'
 import { useAccount } from 'state/userInfo/hooks'
 import useRefresh from 'hooks/useRefresh'
 import { TOKEN_SYMBOL } from 'config/index'
@@ -11,26 +12,9 @@ import ShopList from './ShopList'
 
 interface ContentShop {
   list?: ListProps[]
-  getDetail?: () => void
+  getDetail?: (v) => void
 }
 
-interface ListProps {
-  coverResource?: CoverResourceProps
-  grade?: string
-  id?: string
-  name?: string
-  price?: undefined
-  priceList?: PriceProps[]
-  type?: string
-}
-interface CoverResourceProps {
-  path?: string
-  url?: string
-}
-interface PriceProps {
-  label?: string
-  value?: string
-}
 const ShopMain = styled.div`
   width: 100%;
   display: grid;
@@ -83,15 +67,15 @@ const FooterValue = styled(Text)`
 const ContentShop: React.FC<ContentShop> = ({ list, getDetail }) => {
   const { t } = useTranslation()
 
-  const showDetail = () => {
+  const showDetail = (id) => {
-    getDetail()
+    getDetail(id)
   }
 
   return (
     <ShopMain>
       {list.map((item) => {
         return (
-          <ShopFlex key={item.id} onClick={showDetail}>
+          <ShopFlex key={item.id} onClick={() => showDetail(item)}>
             <ShopList
               item={item}
               width={278}

src/views/Bazaar/components/ShopDetail.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from 'contexts/Localization'
 import { Heading, Flex, Button, Text, Input, Image, useModal } from '@pancakeswap/uikit'
 import { useAccount } from 'state/userInfo/hooks'
 import useRefresh from 'hooks/useRefresh'
+import { ListProps } from 'types/bazaar'
+import { getContract } from 'services/referral'
 import ShopList from './ShopList'
 import FlexCom from './FlexCom'
 import AuctionTable from './AuctionTable'
@@ -12,6 +14,8 @@ import AuctionRule from './AuctionRule'
 
 interface DetailProps {
   close: () => void
+  detail: ListProps
+  typeIndex: number | string
 }
 
 const HeaderFlex = styled(Flex)`
@@ -88,26 +92,48 @@ const PriceButton = styled(Button)`
   margin: 30px 0;
 `
 
-const ShopDetail: React.FC<DetailProps> = ({ close }) => {
+const ShopDetail: React.FC<DetailProps> = ({ close, detail, typeIndex }) => {
   const { t } = useTranslation()
+  const [link, setLink] = useState('')
 
-  const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 })
+  const getLinkAddress = async () => {
+    const data = await getContract()
+    setLink(data)
+  }
+  useEffect(() => {
+    getLinkAddress()
+  }, [])
   return (
     <>
       <HeaderFlex>
         <FirstText onClick={close}>{t('Bazaar')}</FirstText>
-        <ShopText> &gt; Crumb 1</ShopText>
+        <ShopText> &gt; {detail.name}</ShopText>
       </HeaderFlex>
       <MainFlex>
         <ShopFlex>
-          <ShopList item={shopData} width={476} height={606} borderRadius="20px" />
+          <ShopList
+            item={detail}
+            width={476}
+            height={606}
+            img={detail.coverResource.url}
+            grade={detail.grade}
+            borderRadius="20px"
+          />
         </ShopFlex>
         <Detail>
           <Flex justifyContent="flex-end">
             <Image src="/images/nft/share.svg" width={35} height={35} style={{ cursor: 'pointer' }} />
           </Flex>
-          <TitleText>Cat goddess Emerald</TitleText>
+          <TitleText>{detail.name}</TitleText>
-          <FlexCom name={t('Auction countdown')} value="10:57:55:79" size="18px" rightSize="30px" textColor="#333333" />
+          {typeIndex !== 0 && (
+            <FlexCom
+              name={t('Auction countdown')}
+              value="10:57:55:79"
+              size="18px"
+              rightSize="30px"
+              textColor="#333333"
+            />
+          )}
           <FlexCom
             name={t('present price%price%', { price: '（HCC）=100U' })}
             value="70.000.000"
@@ -115,13 +141,21 @@ const ShopDetail: React.FC<DetailProps> = ({ close }) => {
             rightSize="30px"
             textColor="#1FC7D4"
           />
-          <PriceButton>{t('Fixed markup (%price% premium)', { price: '10%' })}</PriceButton>
+          {typeIndex === 0 ? (
-          <FlexCom name={t('owner')} value="钱包地址" />
+            <PriceButton>{t('Buy It Now')}</PriceButton>
-          <FlexCom name={t('Contract address')} value={t('Contract address')} />
+          ) : (
-          <FlexCom name="token ID" value="token ID" />
+            <PriceButton>{t('Fixed markup (%price% premium)', { price: '10%' })}</PriceButton>
-          <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
+          )}
-          <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
+          {typeIndex !== 0 && <FlexCom name={t('owner')} value="钱包地址" />}
-          <FlexCom name={t('The male chain')} value={t('The male chain')} />
+          {/* <FlexCom name={t('Contract address')} value={t('Contract address')} /> */}
+          <FlexCom
+            name={t('Contract address')}
+            typeLink={`https://bscscan.com/token/${link}`}
+            value={`${link && link.substring(0, 6)}...${link && link.substring(link.length - 4, link.length)}`}
+          />
+          {typeIndex !== 0 && <FlexCom name="token ID" value="token ID" />}
+          <FlexCom name={t('Assets agreement')} value="ERC721" />
+          <FlexCom name={t('Assets and chain')} value="BSC" />
         </Detail>
       </MainFlex>
       <AuctionTable />

src/views/BlindBox/component/Operation.tsx

@@ -5,31 +5,12 @@ import BigNumber from 'bignumber.js'
 import { useTranslation } from 'contexts/Localization'
 import { Flex, Text } from '@pancakeswap/uikit'
 import { TOKEN_SYMBOL } from 'config/index'
+import { ListProp } from 'types/blindBox'
 import StepCom from './StepCom'
 
-interface DetailProp {
-  beginTime?: string
-  coverResource: coverResourceProps
-  endTime?: string
-  id?: string
-  name?: string
-  priceList?: priceProps[]
-  price?: any
-  purchased?: string | number
-  total?: string | number
-  type?: string
-}
-
 interface OperationProp {
-  detail: DetailProp
+  detail: ListProp
-}
+  getNum?: (v) => void
-interface coverResourceProps {
-  path?: string
-  url?: string
-}
-interface priceProps {
-  label?: string
-  value?: string | number
 }
 
 const DetailDiv = styled.div`
@@ -53,10 +34,12 @@ const HeaderText = styled(Text)`
   margin: 0 5px 0 10px;
 `
 
-const Operation: React.FC<OperationProp> = ({ detail }) => {
+const Operation: React.FC<OperationProp> = ({ detail, getNum }) => {
   const { t } = useTranslation()
 
-  const [buyNum, setBuyNum] = useState(0)
+  const getStepValue = (v) => {
+    getNum(v)
+  }
 
   return (
     <DetailDiv>
@@ -80,7 +63,7 @@ const Operation: React.FC<OperationProp> = ({ detail }) => {
       </DetailInfo>
       <DetailInfo>
         <Text color="textSubtle">{t('quantity')}</Text>
-        <StepCom number={buyNum} value={(v) => setBuyNum(v)} />
+        <StepCom number={detail.num} value={(v) => getStepValue(v)} />
       </DetailInfo>
     </DetailDiv>
   )

src/views/BlindBox/component/SeriesDetail.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Modal, Flex, Text, Image } from '@pancakeswap/uikit'
+import { ListProp } from 'types/blindBox'
 import { useGetBoxDetail } from '../hooks'
 import ShopList from './ShopList'
 
@@ -9,29 +10,7 @@ interface SeriesDetailProp {
   name?: string | number
   value?: string | number
   onDismiss?: () => void
-  detail: DetailProp
+  detail: ListProp
-}
-
-interface DetailProp {
-  beginTime?: string
-  coverResource: coverResourceProps
-  endTime?: string
-  id?: string
-  name?: string
-  priceList?: priceProps[]
-  price?: any
-  purchased?: string | number
-  total?: string | number
-  type?: string
-}
-
-interface coverResourceProps {
-  path?: string
-  url?: string
-}
-interface priceProps {
-  label?: string
-  value?: string | number
 }
 
 const Main = styled(Modal)`
@@ -70,11 +49,9 @@ const TextNum = styled(Text)`
   color: #280d5f;
 `
 const Detail = styled.div`
-  /* border: 1px solid red; */
   height: calc(100vh - 320px);
   overflow: auto;
   padding-top: 30px;
-  /* border-left: 1px solid #d5d5d5; */
 `
 const ShopText = styled(Text)`
   font-size: 26px;
@@ -111,9 +88,11 @@ const SeriesDetail: React.FC<SeriesDetailProp> = ({ name, value, onDismiss, deta
   const { t } = useTranslation()
   const [list, setList] = useState([])
   const [totalNum, setTotal] = useState(0)
+  const [size, setSize] = useState(0)
   const getDetail = useGetBoxDetail()
   const getData = async () => {
     const { contentList, total } = await getDetail(detail.id)
+    setSize(contentList.length)
     setTotal(total)
     const dataList = []
     contentList.forEach((item, index) => {
@@ -143,19 +122,19 @@ const SeriesDetail: React.FC<SeriesDetailProp> = ({ name, value, onDismiss, deta
       <Detail>
         <FlexBetween style={{ paddingRight: '20px' }}>
           <ProbabilityFlex>{t('nft Smoking in the probability')}</ProbabilityFlex>
-          <TextNum>{t('%num%kind nft', { num: 100 })}</TextNum>
+          <TextNum>{t('%num%kind nft', { num: size })}</TextNum>
         </FlexBetween>
         <div>
           {list.map((item) => {
             return (
-              <ShopMain>
+              <ShopMain key={item.grade}>
                 {item.grade === 'EPIC' && <ShopText>{t('epic')}</ShopText>}
                 {item.grade === 'LEGEND' && <ShopText>{t('legend')}</ShopText>}
                 {item.grade === 'RARE' && <ShopText>{t('uncommon')}</ShopText>}
                 {item.grade === 'NORMAL' && <ShopText>{t('common')}</ShopText>}
                 <Shop>
                   {item.list.map((childItem) => {
-                    return <ShopList item={childItem} grade={item.grade} />
+                    return <ShopList key={childItem.id} item={childItem} grade={item.grade} />
                   })}
                 </Shop>
               </ShopMain>

src/views/BlindBox/index.tsx

@@ -7,6 +7,7 @@ import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Card, Text, Flex, Image, Button } from '@pancakeswap/uikit'
 import { UnOpenModel } from 'components/Modal'
+import { ListProp } from 'types/blindBox'
 import Header from './component/Header'
 import Operation from './component/Operation'
 import { useGetList } from './hooks'
@@ -16,27 +17,6 @@ import 'swiper/components/pagination/pagination.min.css'
 
 SwiperCore.use([Keyboard, Mousewheel, Pagination])
 
-interface listProps {
-  beginTime?: string
-  coverResource: coverResourceProps
-  endTime?: string
-  id?: string
-  name?: string
-  priceList?: priceProps[]
-  price?: any
-  purchased?: string | number
-  total?: string | number
-  type?: string
-}
-interface coverResourceProps {
-  path?: string
-  url?: string
-}
-interface priceProps {
-  label?: string
-  value?: string | number
-}
-
 const MainFlex = styled(Flex)`
   width: 100%;
   min-height: calc(100vh - 64px);
@@ -163,7 +143,8 @@ const BuyButton = styled(Button)`
 const BlindBox: React.FC = () => {
   const { t } = useTranslation()
   const account = useAccount()
-  const [blindBoxList, setBlindBoxList] = useState<listProps[]>()
+  const [blindBoxList, setBlindBoxList] = useState<ListProp[]>()
+  const [buyNum, setBuyNum] = useState(0)
 
   const getList = useGetList()
 
@@ -172,6 +153,7 @@ const BlindBox: React.FC = () => {
     const arr = []
     content.forEach((item) => {
       const obj = item
+      obj.num = 0
       obj.priceList = []
       Object.keys(obj.price).forEach((childItem) => {
         obj.priceList.push({ label: childItem, value: obj.price[childItem] })
@@ -186,6 +168,10 @@ const BlindBox: React.FC = () => {
     getData()
   }, [])
 
+  const handleBuy = () => {
+    console.log(buyNum)
+  }
+
   return (
     <MainFlex>
       {/* <UnOpenModel /> */}
@@ -210,9 +196,9 @@ const BlindBox: React.FC = () => {
                   </div>
                   <Header detail={item} />
                   <Image src={item.coverResource.url} width={500} height={460} marginTop="-40px" />
-                  <Operation detail={item} />
+                  <Operation detail={item} getNum={(v) => setBuyNum(v)} />
                 </BlindBoxCard>
-                {account ? <BuyButton>{t('Buy It Now')}</BuyButton> : <UnlockButtonDiv />}
+                {account ? <BuyButton onClick={handleBuy}>{t('Buy It Now')}</BuyButton> : <UnlockButtonDiv />}
               </BlindBoxFlex>
             </SwiperSlide>
           )