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

NFT市场

This commit is contained in:
myf 2022-06-09 11:53:03 +08:00
parent 94e8cac8f7
commit 875e746564
16 changed files with 356 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@ -20,6 +20,7 @@ REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.a
REACT_APP_REQUEST_URL = 'http://192.253.237.94:9090' REACT_APP_REQUEST_URL = 'http://192.253.237.94:9090'
# REACT_APP_REQUEST_URL = 'http://101.35.117.69:9090'
# REACT_APP_REQUEST_URL = 'http://192.168.2.147:8080' # REACT_APP_REQUEST_URL = 'http://192.168.2.147:8080'
# REACT_APP_REQUEST_URL = 'http://192.168.2.:8080' # REACT_APP_REQUEST_URL = 'http://192.168.2.:8080'
# REACT_APP_REQUEST_URL = 'http://6o7g1fv83e.51xd.pub' # REACT_APP_REQUEST_URL = 'http://6o7g1fv83e.51xd.pub'

3
.env.production
View File

@ -19,5 +19,6 @@ REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.a
REACT_APP_REQUEST_URL = 'http://192.253.237.94:9090' REACT_APP_REQUEST_URL = 'http://101.35.117.69:9090'
# REACT_APP_REQUEST_URL = 'http://192.253.237.94:9090'
# REACT_APP_REQUEST_URL = 'http://192.168.2.210:8080' # REACT_APP_REQUEST_URL = 'http://192.168.2.210:8080'

BIN
build.zip
View File

Binary file not shown.

55
public/locales/zh-CN.json
View File

@ -1163,7 +1163,6 @@
"Blind box": "盲盒", "Blind box": "盲盒",
"nft box": "NFT盒子", "nft box": "NFT盒子",
"nft compound": "NFT 合成", "nft compound": "NFT 合成",
"All": "全部",
"total quantity": "总数量", "total quantity": "总数量",
"With the number": "拥有数量", "With the number": "拥有数量",
"Did not have": "未拥有", "Did not have": "未拥有",
@ -1177,8 +1176,6 @@
"French feast": "法式盛宴", "French feast": "法式盛宴",
"price": "价格", "price": "价格",
"quantity": "数量", "quantity": "数量",
"NFT": "NFT",
"Coming Soon": "敬请关注",
"This page is not currently open": "此页面暂未开放", "This page is not currently open": "此页面暂未开放",
"Viewing the Path Diagram": "查看路径图", "Viewing the Path Diagram": "查看路径图",
"nft bazaar": "NFT 市场", "nft bazaar": "NFT 市场",
@ -1221,5 +1218,55 @@
"The total number of transactions": "总交易数", "The total number of transactions": "总交易数",
"Total number of auctions": "总拍卖次数", "Total number of auctions": "总拍卖次数",
"Total auction commission": "总拍卖返佣", "Total auction commission": "总拍卖返佣",
"trading value": "出售价格" "trading value": "出售价格",
"Detail": "详情",
"deal Hash": "交易Hash",
"Auctions a record": "拍卖记录",
"Auction rule": "拍卖规则",
"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time": "1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid": "2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
"3. After the auction is successful": "3.拍卖成功后，平台将收取发布人收益的6%作为手续费",
"4. After the auction, the publisher or the last bidder will collect revenue or NFT in the auction history. After one party of the bidder or the publisher receives revenue or NFT, the other party will automatically receive the corresponding revenue or NFT": "4.拍卖结束后，发布人或最后出价人在拍卖历史内进行领取收益或领取NFT，出价人或发布人其中一方领取收益或NFT后，另一方将自动领取对应的收益或NFT",
"5. NFT shall not be traded or transferred after the auction is issued by the issuer": "5.发布人发布拍卖后，NFT将不可进行交易或转让",
"All transactions": "全部交易",
"I released": "我发布的",
"I participate in": "我参与的",
"NFT name": "NFT名称",
"starting price": "起拍价",
"Offer the time": "出价时间",
"state": "状态",
"operation": "操作",
"The wallet address": "钱包地址",
"auction price": "拍卖价格",
"The auction time": "拍卖时间",
"In the auction": "拍卖中",
"traded": "已成交",
"The latest offer": "最新出价",
"latest release": "最新发布",
"end time": "结束时间",
"Prices go from low to high": "价格从低到高",
"Prices go from high to low": "价格从高到低",
"Auction": "拍卖",
"fixed price": "一口价",
"sell NFT": "出售NFT",
"Selling way": "出售方式",
"Selling time": "出售时间",
"Add as a trading pair": "添加为交易对",
"reselect NFT": "重新选择NFT",
"Auction countdown": "拍卖倒计时",
"present price%price%": "当前价格%price%",
"Fixed markup (%price% premium)": "固定加价(%price%溢价)",
"owner": "拥有者",
"The male chain": "公链",
"on offer": "出售中",
"be sold": "已出售",
"have bought": "已购买",
"Has been selling": "已售卖",
"Transaction history": "交易历史",
"incident": "事件",
"unit price": "单价",
"seller": "卖方",
"purchaser": "买方",
"trading hour": "交易时间"
} }

2
src/components/Modal/UnOpenModel.tsx
View File

@ -52,7 +52,7 @@ const BtnText = styled(Link)`
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%); background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
opacity: 1; opacity: 1;
border-radius: 30px; border-radius: 30px;
font-size: 12px; font-size: 14px;
color: #fff; color: #fff;
padding: 0 20px; padding: 0 20px;
` `

55
src/config/localization/translations.json
View File

@ -28,7 +28,6 @@
"XVS Tokens Earned": "XVS Tokens Earned", "XVS Tokens Earned": "XVS Tokens Earned",
"Rewards will be calculated per block and total rewards will be distributed automatically at the end of each project’s farming period.": "Rewards will be calculated per block and total rewards will be distributed automatically at the end of each project’s farming period.", "Rewards will be calculated per block and total rewards will be distributed automatically at the end of each project’s farming period.": "Rewards will be calculated per block and total rewards will be distributed automatically at the end of each project’s farming period.",
"Pool": "Pool", "Pool": "Pool",
"Coming Soon": "Coming Soon",
"APY": "APY", "APY": "APY",
"Total Liquidity": "Total Liquidity", "Total Liquidity": "Total Liquidity",
"View on BscScan": "View on BscScan", "View on BscScan": "View on BscScan",
@ -1290,7 +1289,6 @@
"Blind box": "Blind Box", "Blind box": "Blind Box",
"nft box": "NFT Box", "nft box": "NFT Box",
"nft compound": "NFT Compound", "nft compound": "NFT Compound",
"All": "All",
"total quantity": "total quantity", "total quantity": "total quantity",
"With the number": "With the number", "With the number": "With the number",
"Did not have": "Did not have", "Did not have": "Did not have",
@ -1304,7 +1302,6 @@
"French feast": "French feast", "French feast": "French feast",
"price": "price", "price": "price",
"quantity": "quantity", "quantity": "quantity",
"NFT": "NFT",
"Coming Soon": "Coming Soon", "Coming Soon": "Coming Soon",
"This page is not currently open": "This page is not currently open", "This page is not currently open": "This page is not currently open",
"Viewing the Path Diagram": "Viewing the Path Diagram", "Viewing the Path Diagram": "Viewing the Path Diagram",
@ -1348,5 +1345,55 @@
"The total number of transactions": "The total number of transactions", "The total number of transactions": "The total number of transactions",
"Total number of auctions": "Total number of auctions", "Total number of auctions": "Total number of auctions",
"Total auction commission": "Total auction commission", "Total auction commission": "Total auction commission",
"trading value": "trading value" "trading value": "trading value",
"Detail": "Detail",
"deal Hash": "deal Hash",
"Auctions a record": "Auctions a record",
"Auction rule": "Auction rule",
"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time": "1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid": "2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid",
"3. After the auction is successful": "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
"4. After the auction, the publisher or the last bidder will collect revenue or NFT in the auction history. After one party of the bidder or the publisher receives revenue or NFT, the other party will automatically receive the corresponding revenue or NFT": "4. After the auction, the publisher or the last bidder will collect revenue or NFT in the auction history. After one party of the bidder or the publisher receives revenue or NFT, the other party will automatically receive the corresponding revenue or NFT",
"5. NFT shall not be traded or transferred after the auction is issued by the issuer": "5. NFT shall not be traded or transferred after the auction is issued by the issuer",
"All transactions": "All transactions",
"I released": "I released",
"I participate in": "I participate in",
"NFT name": "NFT name",
"starting price": "starting price",
"The latest offer": "The latest offer",
"Offer the time": "Offer the time",
"state": "state",
"operation": "operation",
"The wallet address": "The wallet address",
"auction price": "auction price",
"The auction time": "The auction time",
"In the auction": "In the auction",
"traded": "traded",
"latest release": "latest release",
"end time": "end time",
"Prices go from low to high": "Prices go from low to high",
"Prices go from high to low": "Prices go from high to low",
"Auction": "Auction",
"fixed price": "fixed price",
"sell NFT": "sell NFT",
"Selling way": "Selling way",
"Selling time": "Selling time",
"Add as a trading pair": "Add as a trading pair",
"reselect NFT": "reselect NFT",
"Auction countdown": "Auction countdown",
"present price%price%": "present price%price%",
"Fixed markup (%price% premium)": "Fixed markup (%price% premium)",
"owner": "owner",
"The male chain": "The male chain",
"on offer": "on offer",
"be sold": "be sold",
"have bought": "have bought",
"Has been selling": "Has been selling",
"Transaction history": "Transaction history",
"incident": "incident",
"unit price": "unit price",
"seller": "seller",
"purchaser": "purchaser",
"trading hour": "trading hour"
} }

53
src/views/Bazaar/components/AuctionRecord.tsx
View File

@ -8,7 +8,7 @@ interface AuctionRecordProps {
} }
const FlexMain = styled.div` const FlexMain = styled.div`
width: 1180px; width: 70%;
height: 658px; height: 658px;
background: #fff; background: #fff;
font-size: 18px; font-size: 18px;
@ -59,7 +59,7 @@ const TableThemed = styled(Flex)`
flex-wrap: wrap; flex-wrap: wrap;
` `
const ThemedItem = styled.div` const ThemedItem = styled.div`
width: 196px; width: 16.6%;
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
text-align: center; text-align: center;
@ -72,7 +72,8 @@ const ThemedItem = styled.div`
` `
const TableBody = styled.div`` const TableBody = styled.div``
const TrFlex = styled(Flex)` const TrFlex = styled(Flex)`
height: 80px; /* height: 80px; */
padding: 10px 0;
border-top: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -80,7 +81,8 @@ const TrFlex = styled(Flex)`
const TdFlex = styled(Flex)` const TdFlex = styled(Flex)`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 196px; flex-wrap: wrap;
width: 16.6%;
color: #666666; color: #666666;
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
@ -91,7 +93,7 @@ const TdImage = styled(Image)`
margin-right: 20px; margin-right: 20px;
` `
const TdBtnFlex = styled(Flex)` const TdBtnFlex = styled(Flex)`
width: 197px; width: 16.6%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -115,26 +117,45 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss }) => {
const { t } = useTranslation() const { t } = useTranslation()
const typeList = [ const typeList = [
{ label: '全部交易', value: '1' }, { label: t('All transactions'), value: '1' },
{ label: '我发布的', value: '2' }, { label: t('I released'), value: '2' },
{ label: '我参与的', value: '3' }, { label: t('I participate in'), value: '3' },
] ]
const [typeIndex, setTypeIndex] = useState(0) const [typeIndex, setTypeIndex] = useState(0)
const ThemedList = ['NFT名称', '起拍价', '最新出价', '出价时间', '状态', '操作'] const ThemedList = [
t('NFT name'),
t('starting price'),
t('The latest offer'),
t('Offer the time'),
t('state'),
t('operation'),
]
const list = [ const list = [
{ name: 'Cat goddess Emerald ', icon: '', price: '1', newPrice: '2', time: '2022-02-02', status: '已售卖' }, {
name: 'Cat goddess Emerald ',
icon: '',
price: '1',
newPrice: '2',
time: '2022-02-02',
status: '已售卖',
id: '1',
},
] ]
return ( return (
<FlexMain> <FlexMain>
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} /> <CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
<HeaderText>拍卖记录</HeaderText> <HeaderText>{t('Auctions a record')}</HeaderText>
<TypeFlex> <TypeFlex>
{typeList.map((item, index) => { {typeList.map((item, index) => {
return ( return (
<TypeItem className={index === typeIndex ? 'active' : ''} onClick={() => setTypeIndex(index)}> <TypeItem
key={item.value}
className={index === typeIndex ? 'active' : ''}
onClick={() => setTypeIndex(index)}
>
{item.label} {item.label}
</TypeItem> </TypeItem>
) )
@ -143,13 +164,13 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss }) => {
<> <>
<TableThemed> <TableThemed>
{ThemedList.map((item) => { {ThemedList.map((item) => {
return <ThemedItem>{item}</ThemedItem> return <ThemedItem key={item}>{item}</ThemedItem>
})} })}
</TableThemed> </TableThemed>
<TableBody> <TableBody>
{list.map((item) => { {list.map((item) => {
return ( return (
<TrFlex> <TrFlex key={item.id}>
<TdFlex> <TdFlex>
<TdImage src="/images/nft/epic-icon.svg" width={24} height={40} /> <TdImage src="/images/nft/epic-icon.svg" width={24} height={40} />
{item.name} {item.name}
@ -159,8 +180,8 @@ const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss }) => {
<TdFlex>{item.time}</TdFlex> <TdFlex>{item.time}</TdFlex>
<TdFlex>{item.status}</TdFlex> <TdFlex>{item.status}</TdFlex>
<TdBtnFlex> <TdBtnFlex>
<DetailButton>详情</DetailButton> <DetailButton>{t('Detail')}</DetailButton>
<HashText>交易Hash</HashText> <HashText>{t('deal Hash')}</HashText>
</TdBtnFlex> </TdBtnFlex>
</TrFlex> </TrFlex>
) )

22
src/views/Bazaar/components/AuctionRule.tsx
View File

@ -113,14 +113,24 @@ const AuctionRule: React.FC = () => {
return ( return (
<FlexMain> <FlexMain>
<HeaderText>拍卖规则</HeaderText> <HeaderText>{t('Auction rule')}</HeaderText>
<DetailText>1.当倒计时少于1小时时，每次加价增加倒计时时间1小时</DetailText>
<DetailText>2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得</DetailText>
<DetailText>3.拍卖成功后，平台将收取发布人收益的6%作为手续费</DetailText>
<DetailText> <DetailText>
4.拍卖结束后，发布人或最后出价人在拍卖历史内进行领取收益或领取NFT，出价人或发布人其中一方领取收益或NFT后，另一方将自动领取对应的收益或NFT {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')}
</DetailText>
<DetailText>
{t(
'2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid',
)}
</DetailText>
<DetailText>{t('3. After the auction is successful')}</DetailText>
<DetailText>
{t(
'4. After the auction, the publisher or the last bidder will collect revenue or NFT in the auction history. After one party of the bidder or the publisher receives revenue or NFT, the other party will automatically receive the corresponding revenue or NFT',
)}
</DetailText>
<DetailText>
{t('5. NFT shall not be traded or transferred after the auction is issued by the issuer')}
</DetailText> </DetailText>
<DetailText>5.发布人发布拍卖后，NFT将不可进行交易或转让</DetailText>
</FlexMain> </FlexMain>
) )
} }

18
src/views/Bazaar/components/AuctionTable.tsx
View File

@ -117,25 +117,33 @@ const HashText = styled(Text)`
const AuctionTable: React.FC = () => { const AuctionTable: React.FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
const ThemedList = ['钱包地址', 'HASH', '拍卖价格', '拍卖时间', '状态'] const ThemedList = [t('The wallet address'), 'HASH', t('auction price'), t('The auction time'), t('state')]
const list = [ const list = [
{ name: 'Cat goddess Emerald ', icon: '', price: '1', newPrice: '2', time: '2022-02-02', status: '已售卖' }, {
name: 'Cat goddess Emerald ',
icon: '',
price: '1',
newPrice: '2',
time: '2022-02-02',
status: '已售卖',
id: '1',
},
] ]
return ( return (
<FlexMain> <FlexMain>
<HeaderText>拍卖纪录</HeaderText> <HeaderText>{t('Auctions a record')}</HeaderText>
<> <>
<TableThemed> <TableThemed>
{ThemedList.map((item) => { {ThemedList.map((item) => {
return <ThemedItem>{item}</ThemedItem> return <ThemedItem key={item}>{item}</ThemedItem>
})} })}
</TableThemed> </TableThemed>
<TableBody> <TableBody>
{list.map((item) => { {list.map((item) => {
return ( return (
<TrFlex> <TrFlex key={item.id}>
<TdFlex>{item.name}</TdFlex> <TdFlex>{item.name}</TdFlex>
<TdFlex>{item.price}</TdFlex> <TdFlex>{item.price}</TdFlex>
<TdFlex>{item.newPrice}</TdFlex> <TdFlex>{item.newPrice}</TdFlex>

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

@ -229,18 +229,19 @@ const Content: React.FC = () => {
] ]
const [typeIndex, setTypeIndex] = useState(0) const [typeIndex, setTypeIndex] = useState(0)
const auctionList = [ const auctionList = [
{ label: '拍卖中', value: '0' }, { label: t('In the auction'), value: '0' },
{ label: '已成交', value: '1' }, { label: t('traded'), value: '1' },
] ]
const [auctionSelect, setAuctionSelect] = useState({ label: '拍卖中', value: '0' }) const [auctionSelect, setAuctionSelect] = useState({ label: t('In the auction'), value: '0' })
const newPrice = [ const newPrice = [
{ label: '最新出价', value: '0' }, { label: t('The latest offer'), value: '0' },
{ label: '最新发布', value: '1' }, { label: t('latest release'), value: '1' },
{ label: '结束时间', value: '2' }, { label: t('end time'), value: '2' },
{ label: '价格从低到高', value: '3' }, { label: t('Prices go from low to high'), value: '3' },
{ label: '价格从高到低', value: '4' }, { label: t('Prices go from high to low'), value: '4' },
] ]
const [priceSelect, setPriceSelect] = useState({ label: '最新出价', value: '0' }) const [priceSelect, setPriceSelect] = useState({ label: t('The latest offer'), value: '0' })
const [searchTitle, setSearchTitle] = useState('')
const list = [ const list = [
{ label: 'Cat goddess Emerald ', type: 1, id: 1 }, { label: 'Cat goddess Emerald ', type: 1, id: 1 },
@ -262,7 +263,9 @@ const Content: React.FC = () => {
setStatusIndex(index) setStatusIndex(index)
} }
const [searchTitle, setSearchTitle] = useState('') const [onTransactionRecord] = useModal(<TransactionRecord />)
const [onAuctionRecord] = useModal(<AuctionRecord />)
const [onSellModal] = useModal(<SellModal />)
const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
const { value: inputValue } = evt.target const { value: inputValue } = evt.target
setSearchTitle(inputValue) setSearchTitle(inputValue)
@ -273,9 +276,6 @@ const Content: React.FC = () => {
const showDetail = () => { const showDetail = () => {
setDetailVisible(!detailVisible) setDetailVisible(!detailVisible)
} }
const [onTransactionRecord] = useModal(<TransactionRecord />)
const [onAuctionRecord] = useModal(<AuctionRecord />)
const [onSellModal] = useModal(<SellModal />)
return ( return (
<> <>
@ -301,7 +301,7 @@ const Content: React.FC = () => {
<HeaderButton onClick={onSellModal}>{t('I sell')}</HeaderButton> <HeaderButton onClick={onSellModal}>{t('I sell')}</HeaderButton>
{/* 当顶部切换选中的是全部和市场则显示交易记录，选中拍卖时展示拍卖纪录 */} {/* 当顶部切换选中的是全部和市场则显示交易记录，选中拍卖时展示拍卖纪录 */}
{typeIndex === 2 ? ( {typeIndex === 2 ? (
<HeaderButton onClick={onAuctionRecord}>拍卖纪录</HeaderButton> <HeaderButton onClick={onAuctionRecord}>{t('Auctions a record')}</HeaderButton>
) : ( ) : (
<HeaderButton onClick={onTransactionRecord}>{t('transaction record')}</HeaderButton> <HeaderButton onClick={onTransactionRecord}>{t('transaction record')}</HeaderButton>
)} )}
@ -374,7 +374,7 @@ const Content: React.FC = () => {
<ShopMain> <ShopMain>
{list.map((item) => { {list.map((item) => {
return ( return (
<ShopFlex onClick={showDetail}> <ShopFlex key={item.id} onClick={showDetail}>
<ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" /> <ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
<ShopName>{item.label}</ShopName> <ShopName>{item.label}</ShopName>
<ShopFooter> <ShopFooter>

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

@ -10,14 +10,21 @@ interface sellModalProps {
} }
const FlexMain = styled.div` const FlexMain = styled.div`
width: 1180px; width: 70%;
min-height: 598px; min-height: 598px;
overflow-y: auto;
background: #fff; background: #fff;
font-size: 18px; font-size: 18px;
color: #999999; color: #999999;
z-index: 9999; z-index: 9999;
border-radius: 15px; border-radius: 15px;
position: relative; position: relative;
${({ theme }) => theme.mediaQueries.xs} {
width: 90%;
}
${({ theme }) => theme.mediaQueries.lg} {
width: 70%;
}
` `
const CloseImage = styled(Image)` const CloseImage = styled(Image)`
cursor: pointer; cursor: pointer;
@ -34,8 +41,15 @@ const HeaderText = styled(Text)`
const SelectFlex = styled(Flex)` const SelectFlex = styled(Flex)`
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
padding: 35px 100px 30px 100px; padding: 35px 100px 30px 100px;
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
${({ theme }) => theme.mediaQueries.xs} {
justify-content: center;
}
${({ theme }) => theme.mediaQueries.lg} {
justify-content: space-between;
}
` `
const SellingWayFlex = styled(Flex)` const SellingWayFlex = styled(Flex)`
align-items: center; align-items: center;
@ -48,6 +62,12 @@ const SellingWayFlex = styled(Flex)`
padding: 0 15px; padding: 0 15px;
color: #666666; color: #666666;
font-size: 16px; font-size: 16px;
${({ theme }) => theme.mediaQueries.xs} {
width: 280px;
}
${({ theme }) => theme.mediaQueries.lg} {
width: 400px;
}
` `
const WayFlex = styled(Flex)` const WayFlex = styled(Flex)`
width: 400px; width: 400px;
@ -59,6 +79,13 @@ const FlexOption = styled(Flex)`
width: 400px; width: 400px;
height: 40px; height: 40px;
cursor: pointer; cursor: pointer;
${({ theme }) => theme.mediaQueries.xs} {
width: 280px;
}
${({ theme }) => theme.mediaQueries.lg} {
width: 400px;
}
` `
const SellInput = styled(Input)` const SellInput = styled(Input)`
margin-top: 20px; margin-top: 20px;
@ -67,10 +94,37 @@ const SellInput = styled(Input)`
background: #eeeaf4; background: #eeeaf4;
border: 1px solid #d7caec; border: 1px solid #d7caec;
border-radius: 18px; border-radius: 18px;
${({ theme }) => theme.mediaQueries.xs} {
width: 280px;
}
${({ theme }) => theme.mediaQueries.lg} {
width: 400px;
}
` `
const FlexPrice = styled(Flex)` const FlexPrice = styled(Flex)`
width: 50%; width: 500px;
flex-wrap: wrap;
align-items: center; align-items: center;
${({ theme }) => theme.mediaQueries.xs} {
width: 100%;
justify-content: center;
margin-top: 10px;
}
${({ theme }) => theme.mediaQueries.lg} {
width: 500px;
justify-content: flex-start;
}
`
const TransactionMain = styled(Flex)`
align-items: center;
${({ theme }) => theme.mediaQueries.xs} {
margin-top: 10px;
}
${({ theme }) => theme.mediaQueries.lg} {
margin-top: 0px;
}
` `
const PriceItem = styled(Flex)` const PriceItem = styled(Flex)`
width: 180px; width: 180px;
@ -110,6 +164,15 @@ const AddButton = styled(Button)`
color: #1fc7d4; color: #1fc7d4;
background-color: #fff; background-color: #fff;
margin-left: 80px; margin-left: 80px;
${({ theme }) => theme.mediaQueries.xs} {
margin-left: 0px;
margin-top: 10px;
}
${({ theme }) => theme.mediaQueries.lg} {
margin-left: 80px;
margin-top: 0px;
}
` `
const Shop = styled(Flex)` const Shop = styled(Flex)`
/* min-height: 366px; */ /* min-height: 366px; */
@ -128,6 +191,8 @@ const AddNftButton = styled(Button)`
` `
const PriceImage = styled(Image)` const PriceImage = styled(Image)`
margin: 0 10px; margin: 0 10px;
width: 20px;
height: 20px;
cursor: pointer; cursor: pointer;
` `
const ShopFlex = styled(Flex)` const ShopFlex = styled(Flex)`
@ -172,19 +237,20 @@ const SelectShopModal = styled(Flex)`
const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => { const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [tradingOnList, setTradingOnList] = useState([{ price: '', value: 'HCC' }]) const [tradingOnList, setTradingOnList] = useState([{ price: '', value: 'HCC', id: 1 }])
const [sellingWay, setSellingWay] = useState(undefined) const [sellingWay, setSellingWay] = useState(undefined)
const [coin, setCoin] = useState({ label: 'HCC', value: 'HCC' }) const [coin, setCoin] = useState({ label: 'HCC', value: 'HCC' })
const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 }) const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 })
const [showModal, setShowModal] = useState(false) const [showModal, setShowModal] = useState(false)
const coinList = [ const coinList = [
{ label: 'HCC', value: 'HCC' }, { label: 'HCC', value: 'HCC' },
{ label: 'USDT', value: 'USDT' }, { label: 'USDT', value: 'USDT' },
] ]
const SellingWayList = [ const SellingWayList = [
{ label: '拍卖', value: '0' }, { label: t('Auction'), value: '0' },
{ label: '一口价', value: '1' }, { label: t('fixed price'), value: '1' },
] ]
const selectTradingOn = (index, value) => { const selectTradingOn = (index, value) => {
@ -192,7 +258,7 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => {
setTradingOnList([...tradingOnList]) setTradingOnList([...tradingOnList])
} }
const addTradingOn = () => { const addTradingOn = () => {
tradingOnList.push({ price: '', value: 'HCC' }) tradingOnList.push({ price: '', value: 'HCC', id: 2 })
setTradingOnList([...tradingOnList]) setTradingOnList([...tradingOnList])
} }
const reduceTradingOn = () => { const reduceTradingOn = () => {
@ -211,14 +277,14 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => {
return ( return (
<FlexMain> <FlexMain>
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} /> <CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
<HeaderText>出售NFT</HeaderText> <HeaderText>{t('sell NFT')}</HeaderText>
<SelectFlex> <SelectFlex>
<WayFlex> <WayFlex>
<Dropdown <Dropdown
position="bottom" position="bottom"
target={ target={
<SellingWayFlex> <SellingWayFlex>
{sellingWay ? sellingWay.label : '出售方式'} {sellingWay ? sellingWay.label : t('Selling way')}
<Image src="/images/nft/bottom-arrows.svg" width={12} height={7} /> <Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
</SellingWayFlex> </SellingWayFlex>
} }
@ -231,13 +297,13 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => {
) )
})} })}
</Dropdown> </Dropdown>
{sellingWay?.value === '0' && <SellInput placeholder="出售时间" />} {sellingWay?.value === '0' && <SellInput placeholder={t('Selling time')} />}
</WayFlex> </WayFlex>
<FlexPrice> <FlexPrice>
<> <>
{tradingOnList.map((item, index) => { {tradingOnList.map((item, index) => {
return ( return (
<> <TransactionMain key={item.id}>
<PriceItem> <PriceItem>
<Dropdown <Dropdown
position="bottom" position="bottom"
@ -256,7 +322,7 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => {
) )
})} })}
</Dropdown> </Dropdown>
<PriceInput placeholder="请输入金额" value={item.price} /> <PriceInput placeholder={t('Please enter the amount')} />
</PriceItem> </PriceItem>
{index === 0 && tradingOnList.length === 2 && ( {index === 0 && tradingOnList.length === 2 && (
<PriceImage src="/images/nft/add.svg" width={20} height={20} /> <PriceImage src="/images/nft/add.svg" width={20} height={20} />
@ -264,22 +330,21 @@ const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => {
{index === 1 && ( {index === 1 && (
<PriceImage src="/images/nft/reduce.svg" width={20} height={20} onClick={reduceTradingOn} /> <PriceImage src="/images/nft/reduce.svg" width={20} height={20} onClick={reduceTradingOn} />
)} )}
</> </TransactionMain>
) )
})} })}
</> </>
{tradingOnList.length < 2 && <AddButton onClick={addTradingOn}>添加为交易对</AddButton>} {tradingOnList.length < 2 && <AddButton onClick={addTradingOn}>{t('Add as a trading pair')}</AddButton>}
</FlexPrice> </FlexPrice>
</SelectFlex> </SelectFlex>
<Shop> <Shop>
{/* <AddNftButton>添加NFT</AddNftButton> */} {/* <AddNftButton>{t('add NFT)}</AddNftButton> */}
{/* { label: 'Cat goddess Emerald ', type: 1, id: 1 } */}
<ShopFlex> <ShopFlex>
<ShopList item={shopData} width={278} height={280} borderRadius="20px 20px 0 0" /> <ShopList item={shopData} width={278} height={280} borderRadius="20px 20px 0 0" />
<ShopName>{shopData.label}</ShopName> <ShopName>{shopData.label}</ShopName>
</ShopFlex> </ShopFlex>
<ShopButton>立即出售</ShopButton> <ShopButton>{t('Selling immediately')}</ShopButton>
<ShopButton onClick={onSelectNft}>重新选择NFT</ShopButton> <ShopButton onClick={onSelectNft}>{t('reselect NFT')}</ShopButton>
</Shop> </Shop>
{showModal && ( {showModal && (
<SelectShopModal> <SelectShopModal>

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

@ -36,10 +36,17 @@ const MainFlex = styled(Flex)`
border-radius: 20px; border-radius: 20px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
${({ theme }) => theme.mediaQueries.xs} {
flex-wrap: wrap;
justify-content: center;
}
${({ theme }) => theme.mediaQueries.lg} {
flex-wrap: nowrap;
justify-content: space-between;
}
` `
const ShopFlex = styled(Flex)` const ShopFlex = styled(Flex)`
width: 476px; width: 476px;
height: 580px;
flex-direction: column; flex-direction: column;
background: #fff; background: #fff;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
@ -49,13 +56,22 @@ const ShopFlex = styled(Flex)`
` `
const Detail = styled.div` const Detail = styled.div`
width: 614px; width: 614px;
height: 580px; min-height: 580px;
box-sizing: border-box; box-sizing: border-box;
background: rgba(245, 255, 255, 0.39); background: rgba(245, 255, 255, 0.39);
box-shadow: 0px 2px 8px rgba(0, 67, 70, 0.15); box-shadow: 0px 2px 8px rgba(0, 67, 70, 0.15);
border-radius: 20px; border-radius: 20px;
padding: 20px 30px; padding: 20px 30px;
margin-left: 30px; margin-left: 30px;
${({ theme }) => theme.mediaQueries.xs} {
margin-top: 30px;
margin-left: 0px;
width: 482px;
}
${({ theme }) => theme.mediaQueries.lg} {
margin-left: 30px;
width: 614px;
}
` `
const TitleText = styled(Text)` const TitleText = styled(Text)`
font-size: 28px; font-size: 28px;
@ -76,11 +92,10 @@ const ShopDetail: React.FC<DetailProps> = ({ close }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 }) const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 })
return ( return (
<> <>
<HeaderFlex> <HeaderFlex>
<FirstText onClick={close}>NFT市场</FirstText> <FirstText onClick={close}>{t('Bazaar')}</FirstText>
<ShopText> &gt; Crumb 1</ShopText> <ShopText> &gt; Crumb 1</ShopText>
</HeaderFlex> </HeaderFlex>
<MainFlex> <MainFlex>
@ -92,15 +107,21 @@ const ShopDetail: React.FC<DetailProps> = ({ close }) => {
<Image src="/images/nft/share.svg" width={35} height={35} style={{ cursor: 'pointer' }} /> <Image src="/images/nft/share.svg" width={35} height={35} style={{ cursor: 'pointer' }} />
</Flex> </Flex>
<TitleText>Cat goddess Emerald</TitleText> <TitleText>Cat goddess Emerald</TitleText>
<FlexCom name="拍卖倒计时" value="10:57:55:79" size="18px" rightSize="30px" textColor="#333333" /> <FlexCom name={t('Auction countdown')} value="10:57:55:79" size="18px" rightSize="30px" textColor="#333333" />
<FlexCom name="当前价格（HCC）=100U" value="70.000.000" size="18px" rightSize="30px" textColor="#1FC7D4" /> <FlexCom
<PriceButton>固定加价(10%溢价)</PriceButton> name={t('present price%price%', { price: 'HCC）=100U' })}
<FlexCom name="拥有者" value="钱包地址" /> value="70.000.000"
<FlexCom name="合约地址" value="合约地址" /> size="18px"
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="token ID" value="token ID" />
<FlexCom name="资产协议" value="资产协议" /> <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
<FlexCom name="资产公链" value="资产公链" /> <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
<FlexCom name="公链" value="公链" /> <FlexCom name={t('The male chain')} value={t('The male chain')} />
</Detail> </Detail>
</MainFlex> </MainFlex>
<AuctionTable /> <AuctionTable />

13
src/views/Bazaar/components/ShopModal.tsx
View File

@ -105,10 +105,13 @@ const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss, close }) => {
const [list, setList] = useState([]) const [list, setList] = useState([])
const pitchOn = (index) => { const pitchOn = (index) => {
// list.forEach((item, i) => { const arr = []
// item.select = i === index ? !item.select : false list.forEach((item, i) => {
// }) const obj = item
setList([...list]) obj.select = i === index ? !obj.select : false
arr.push(obj)
})
setList([...arr])
} }
const onClose = () => { const onClose = () => {
close() close()
@ -129,7 +132,7 @@ const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss, close }) => {
<Shop> <Shop>
{list.map((item, index) => { {list.map((item, index) => {
return ( return (
<ShopFlex onClick={() => pitchOn(index)} className={item.select ? 'active' : ''}> <ShopFlex key={item.id} onClick={() => pitchOn(index)} className={item.select ? 'active' : ''}>
<SelectFlex>{item.select && <SelectDiv />}</SelectFlex> <SelectFlex>{item.select && <SelectDiv />}</SelectFlex>
<ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" /> <ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
<ShopName>{item.label}</ShopName> <ShopName>{item.label}</ShopName>

41
src/views/Bazaar/components/TransactionRecord.tsx
View File

@ -8,7 +8,7 @@ interface TransactionRecordProps {
} }
const FlexMain = styled.div` const FlexMain = styled.div`
width: 1180px; width: 70%;
height: 658px; height: 658px;
background: #fff; background: #fff;
font-size: 18px; font-size: 18px;
@ -59,7 +59,7 @@ const TableThemed = styled(Flex)`
flex-wrap: wrap; flex-wrap: wrap;
` `
const ThemedItem = styled.div` const ThemedItem = styled.div`
width: 236px; width: 20%;
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
text-align: center; text-align: center;
@ -72,7 +72,7 @@ const ThemedItem = styled.div`
` `
const TableBody = styled.div`` const TableBody = styled.div``
const TrFlex = styled(Flex)` const TrFlex = styled(Flex)`
height: 80px; padding: 10px 0;
border-top: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -80,7 +80,8 @@ const TrFlex = styled(Flex)`
const TdFlex = styled(Flex)` const TdFlex = styled(Flex)`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 236px; flex-wrap: wrap;
width: 20%;
color: #666666; color: #666666;
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
@ -91,7 +92,7 @@ const TdImage = styled(Image)`
margin-right: 20px; margin-right: 20px;
` `
const TdBtnFlex = styled(Flex)` const TdBtnFlex = styled(Flex)`
width: 236px; width: 20%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -115,25 +116,31 @@ const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss }) => {
const { t } = useTranslation() const { t } = useTranslation()
const typeList = [ const typeList = [
{ label: '全部交易', value: '1' }, { label: t('All transactions'), value: '1' },
{ label: '出售中', value: '2' }, { label: t('on offer'), value: '2' },
{ label: '已出售', value: '3' }, { label: t('be sold'), value: '3' },
{ label: '已购买', value: '4' }, { label: t('have bought'), value: '4' },
] ]
const [typeIndex, setTypeIndex] = useState(0) const [typeIndex, setTypeIndex] = useState(0)
const ThemedList = ['NFT名称', '价格', '时间', '状态', '操作'] const ThemedList = [t('NFT name'), t('price'), t('Time'), t('state'), t('operation')]
const list = [{ name: 'Cat goddess Emerald ', icon: '', price: '1', time: '2022-02-02', status: '已售卖' }] const list = [
{ name: 'Cat goddess Emerald ', icon: '', price: '1', time: '2022-02-02', status: t('Has been selling'), id: '1' },
]
return ( return (
<FlexMain> <FlexMain>
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} /> <CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
<HeaderText>交易记录</HeaderText> <HeaderText>{t('transaction record')}</HeaderText>
<TypeFlex> <TypeFlex>
{typeList.map((item, index) => { {typeList.map((item, index) => {
return ( return (
<TypeItem className={index === typeIndex ? 'active' : ''} onClick={() => setTypeIndex(index)}> <TypeItem
key={item.value}
className={index === typeIndex ? 'active' : ''}
onClick={() => setTypeIndex(index)}
>
{item.label} {item.label}
</TypeItem> </TypeItem>
) )
@ -142,13 +149,13 @@ const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss }) => {
<> <>
<TableThemed> <TableThemed>
{ThemedList.map((item) => { {ThemedList.map((item) => {
return <ThemedItem>{item}</ThemedItem> return <ThemedItem key={item}>{item}</ThemedItem>
})} })}
</TableThemed> </TableThemed>
<TableBody> <TableBody>
{list.map((item) => { {list.map((item) => {
return ( return (
<TrFlex> <TrFlex key={item.id}>
<TdFlex> <TdFlex>
<TdImage src="/images/nft/epic-icon.svg" width={24} height={40} /> <TdImage src="/images/nft/epic-icon.svg" width={24} height={40} />
{item.name} {item.name}
@ -157,8 +164,8 @@ const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss }) => {
<TdFlex>{item.time}</TdFlex> <TdFlex>{item.time}</TdFlex>
<TdFlex>{item.status}</TdFlex> <TdFlex>{item.status}</TdFlex>
<TdBtnFlex> <TdBtnFlex>
<DetailButton>详情</DetailButton> <DetailButton>{t('Detail')}</DetailButton>
<HashText>交易Hash</HashText> <HashText>{t('deal Hash')}</HashText>
</TdBtnFlex> </TdBtnFlex>
</TrFlex> </TrFlex>
) )

32
src/views/Bazaar/components/TransactionTable.tsx
View File

@ -3,7 +3,7 @@ import styled from 'styled-components'
import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit' import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
import { useTranslation } from 'contexts/Localization' import { useTranslation } from 'contexts/Localization'
interface TableProps { interface TransactionTableProps {
title?: string title?: string
th?: string[] th?: string[]
tr?: any tr?: any
@ -21,12 +21,6 @@ const FlexMain = styled.div`
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
border-radius: 20px; border-radius: 20px;
` `
const CloseImage = styled(Image)`
cursor: pointer;
position: absolute;
top: 30px;
right: 30px;
`
const HeaderText = styled(Text)` const HeaderText = styled(Text)`
font-size: 24px; font-size: 24px;
color: #333333; color: #333333;
@ -59,7 +53,6 @@ const TypeItem = styled(Flex)`
const TableThemed = styled(Flex)` const TableThemed = styled(Flex)`
height: 42px; height: 42px;
align-items: center; align-items: center;
/* flex-wrap: wrap; */
` `
const ThemedItem = styled.div` const ThemedItem = styled.div`
width: 100%; width: 100%;
@ -78,7 +71,6 @@ const TrFlex = styled(Flex)`
height: 42px; height: 42px;
border-top: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3;
align-items: center; align-items: center;
/* flex-wrap: wrap; */
` `
const TdFlex = styled(Flex)` const TdFlex = styled(Flex)`
align-items: center; align-items: center;
@ -114,28 +106,36 @@ const HashText = styled(Text)`
border-bottom: 1px solid #1fc7d4; border-bottom: 1px solid #1fc7d4;
` `
const AuctionTable: React.FC = () => { const TransactionTable: React.FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
const ThemedList = ['事件', '单价', '卖方', '买方', '交易时间'] const ThemedList = [t('incident'), t('unit price'), t('seller'), t('purchaser'), t('trading hour')]
const list = [ const list = [
{ name: 'Cat goddess Emerald ', icon: '', price: '1', newPrice: '2', time: '2022-02-02', status: '已售卖' }, {
name: 'Cat goddess Emerald ',
icon: '',
price: '1',
newPrice: '2',
time: '2022-02-02',
status: '已售卖',
id: '1',
},
] ]
return ( return (
<FlexMain> <FlexMain>
<HeaderText>交易历史</HeaderText> <HeaderText>{t('Transaction history')}</HeaderText>
<> <>
<TableThemed> <TableThemed>
{ThemedList.map((item) => { {ThemedList.map((item) => {
return <ThemedItem>{item}</ThemedItem> return <ThemedItem key={item}>{item}</ThemedItem>
})} })}
</TableThemed> </TableThemed>
<TableBody> <TableBody>
{list.map((item) => { {list.map((item) => {
return ( return (
<TrFlex> <TrFlex key={item.id}>
<TdFlex>{item.name}</TdFlex> <TdFlex>{item.name}</TdFlex>
<TdFlex>{item.price}</TdFlex> <TdFlex>{item.price}</TdFlex>
<TdFlex>{item.newPrice}</TdFlex> <TdFlex>{item.newPrice}</TdFlex>
@ -150,4 +150,4 @@ const AuctionTable: React.FC = () => {
) )
} }
export default AuctionTable export default TransactionTable

12
src/views/Compound/index.tsx
View File

@ -16,21 +16,21 @@ interface RoundDetailProps {
const PageContent = styled.div` const PageContent = styled.div`
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px);
background-image: url('/images/nft/bg.svg'); /* background-image: url('/images/nft/bg.svg');
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat; */
/* background-image: url('/images/page/compound.jpg'); background-image: url('/images/page/compound.jpg');
background-position: 50%; background-position: 50%;
background-size: 60% 90%; background-size: 60% 90%;
background-repeat: no-repeat; */ background-repeat: no-repeat;
` `
const NftBox: React.FC = () => { const NftBox: React.FC = () => {
return ( return (
<PageContent> <PageContent>
{/* <UnOpenModel /> */} <UnOpenModel />
<CompoundBox /> {/* <CompoundBox /> */}
</PageContent> </PageContent>
) )
} }