zhangshu
/
hiCity-nft
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

调整部分页面

This commit is contained in:
myf 2022-06-13 16:28:37 +08:00
parent 66ba6369c4
commit 4307d36205
9 changed files with 164 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/hooks/Tokens.ts
View File

@ -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

17
src/types/bazaar.ts Normal file
View File

@ -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
}

22
src/types/blindBox.ts Normal file
View File

@ -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
}

99
src/views/Bazaar/components/Content.tsx
View File

@ -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('latest release'), value: '1' },
{ label: t('end time'), value: '2' },
// { label: t('The latest offer'), value: '0' },
// { label: t('latest release'), value: '1' },
// { 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('epic'), id: '2' },
{ label: t('legend'), id: '3' },
{ label: t('uncommon'), id: '4' },
{ label: t('common'), id: '5' },
{ label: t('All'), id: '1', grade: '' },
{ label: t('epic'), id: '2', grade: 'EPIC' },
{ label: t('legend'), id: '3', grade: 'LEGEND' },
{ label: t('uncommon'), id: '4', grade: 'RARE' },
{ 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>
<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={() => setAuctionSelect(item)}>
{item.label}
</FlexOption>
)
})}
</Dropdown>
</SelectMain>
{typeIndex !== 0 && (
<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={() => setAuctionSelect(item)}>
{item.label}
</FlexOption>
)
})}
</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>

26
src/views/Bazaar/components/ContentShop.tsx
View File

@ -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 = () => {
getDetail()
const showDetail = (id) => {
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}

60
src/views/Bazaar/components/ShopDetail.tsx
View File

@ -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>
<FlexCom name={t('Auction countdown')} value="10:57:55:79" size="18px" rightSize="30px" textColor="#333333" />
<TitleText>{detail.name}</TitleText>
{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>
<FlexCom name={t('owner')} value="钱包地址" />
<FlexCom name={t('Contract address')} value={t('Contract address')} />
<FlexCom name="token ID" value="token ID" />
<FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
<FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
<FlexCom name={t('The male chain')} value={t('The male chain')} />
{typeIndex === 0 ? (
<PriceButton>{t('Buy It Now')}</PriceButton>
) : (
<PriceButton>{t('Fixed markup (%price% premium)', { price: '10%' })}</PriceButton>
)}
{typeIndex !== 0 && <FlexCom name={t('owner')} value="钱包地址" />}
{/* <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 />

33
src/views/BlindBox/component/Operation.tsx
View File

@ -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
}
interface coverResourceProps {
path?: string
url?: string
}
interface priceProps {
label?: string
value?: string | number
detail: ListProp
getNum?: (v) => void
}
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>
)

35
src/views/BlindBox/component/SeriesDetail.tsx
View File

@ -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
}
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
detail: ListProp
}
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>

34
src/views/BlindBox/index.tsx
View File

@ -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>
)