gary
Gitee
commit
a5335a0579
|
|
@ -19,7 +19,8 @@ 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://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.28: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'
|
||||||
|
|
|
||||||
|
|
@ -20,4 +20,5 @@ REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.a
|
||||||
|
|
||||||
|
|
||||||
REACT_APP_REQUEST_URL = 'http://101.35.117.69: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'
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,11 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@binance-chain/bsc-connector": "^1.0.0",
|
"@binance-chain/bsc-connector": "^1.0.0",
|
||||||
|
"@emotion/react": "^11.9.0",
|
||||||
|
"@emotion/styled": "^11.8.1",
|
||||||
"@ethersproject/experimental": "^5.0.1",
|
"@ethersproject/experimental": "^5.0.1",
|
||||||
|
"@mui/material": "^5.8.3",
|
||||||
|
"@mui/styled-engine-sc": "^5.8.0",
|
||||||
"@pancakeswap/sdk": "^2.3.2",
|
"@pancakeswap/sdk": "^2.3.2",
|
||||||
"@pancakeswap/uikit": "^0.40.2",
|
"@pancakeswap/uikit": "^0.40.2",
|
||||||
"@reduxjs/toolkit": "^1.5.0",
|
"@reduxjs/toolkit": "^1.5.0",
|
||||||
|
|
@ -51,7 +55,6 @@
|
||||||
"@web3-react/core": "^6.1.9",
|
"@web3-react/core": "^6.1.9",
|
||||||
"@web3-react/injected-connector": "^6.0.7",
|
"@web3-react/injected-connector": "^6.0.7",
|
||||||
"@web3-react/walletconnect-connector": "6.2.4",
|
"@web3-react/walletconnect-connector": "6.2.4",
|
||||||
"ethereumjs-abi": "0.6.8",
|
|
||||||
"ajv": "^6.12.3",
|
"ajv": "^6.12.3",
|
||||||
"bignumber.js": "^9.0.0",
|
"bignumber.js": "^9.0.0",
|
||||||
"canvas-confetti": "^1.3.3",
|
"canvas-confetti": "^1.3.3",
|
||||||
|
|
@ -59,6 +62,7 @@
|
||||||
"date-fns": "^2.21.3",
|
"date-fns": "^2.21.3",
|
||||||
"dayjs": "^1.11.1",
|
"dayjs": "^1.11.1",
|
||||||
"easymde": "^2.15.0",
|
"easymde": "^2.15.0",
|
||||||
|
"ethereumjs-abi": "0.6.8",
|
||||||
"ethers": "^5.1.4",
|
"ethers": "^5.1.4",
|
||||||
"graphql": "^15.5.0",
|
"graphql": "^15.5.0",
|
||||||
"graphql-request": "^3.4.0",
|
"graphql-request": "^3.4.0",
|
||||||
|
|
@ -82,7 +86,7 @@
|
||||||
"react-window": "^1.8.6",
|
"react-window": "^1.8.6",
|
||||||
"remark-gfm": "^1.0.0",
|
"remark-gfm": "^1.0.0",
|
||||||
"split-grid": "^1.0.11",
|
"split-grid": "^1.0.11",
|
||||||
"styled-components": "^5.3.0",
|
"styled-components": "^5.3.5",
|
||||||
"swiper": "^6.6.1",
|
"swiper": "^6.6.1",
|
||||||
"typescript": "^4.3.2"
|
"typescript": "^4.3.2"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 621 KiB |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="添加" class="cls-1" d="M100.58,92.854a10,10,0,1,0,10,10,10,10,0,0,0-10-10Zm5.633,10.625H101.2v5.008a.625.625,0,0,1-1.25,0v-5.008H94.947a.625.625,0,0,1,0-1.25h5.008V97.22a.625.625,0,0,1,1.25,0v5.009h5.008a.625.625,0,0,1,0,1.25Zm0,0" transform="translate(-90.58 -92.854)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 474 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 532 KiB |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="11.075" height="6.471" viewBox="0 0 11.075 6.471">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="展开" class="cls-1" d="M71.634,70.36c.015.007.028.02.042.026a.685.685,0,0,0,.8-.139l4.816-5.093a.692.692,0,0,0-1.006-.952l-4.322,4.572-4.385-4.553a.691.691,0,0,0-1,.958l4.862,5.047c.009.008.024.012.033.023a.17.17,0,0,1,.019.023.6.6,0,0,0,.139.088Z" transform="translate(-66.405 -63.986)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 506 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 395 KiB |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28.164" height="28.164" viewBox="0 0 28.164 28.164">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #1fc7d4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="关闭26" class="cls-1" d="M39.671,37.572,28.124,26.025a1.484,1.484,0,1,0-2.1,2.1L37.57,39.671,26.025,51.218a1.485,1.485,0,0,0,2.1,2.1L39.671,41.77,51.218,53.318a1.485,1.485,0,0,0,2.1-2.1L41.77,39.671,53.319,28.124a1.485,1.485,0,0,0-2.1-2.1L39.671,37.57Z" transform="translate(-25.59 -25.589)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 515 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 227 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 395 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 231 KiB |
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="141.774" height="138" viewBox="0 0 141.774 138">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #fff;
|
||||||
|
opacity: 0.49;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="锤子" class="cls-1" d="M74.863,191.431c4.341,3.575,11.492,9.449,16.089,13.28l.255.255a4.286,4.286,0,0,0,3.32,1.022A4.878,4.878,0,0,0,98.1,204.2l2.554-2.554,6.9-6.9c1.021-.766.766-2.3.511-3.575a7.482,7.482,0,0,1,1.277-7.917l5.618-5.618a5.343,5.343,0,0,0,1.532,1.021c2.043,1.788,3.831,3.831,5.874,5.618a8.672,8.672,0,0,0,2.554,7.917,8.865,8.865,0,0,0,6.384,2.554v.255L194.89,258.6a5.038,5.038,0,0,0,5.618,1.277,11.338,11.338,0,0,0,2.809-2.043c3.065-3.32,6.384-6.384,9.7-9.7a5.431,5.431,0,0,0,1.788-3.831,5.2,5.2,0,0,0-1.532-3.831c-14.046-13.79-37.285-37.03-51.331-51.331L150.71,177.9a8.833,8.833,0,0,0-9.449-10.981,21.19,21.19,0,0,1-3.831-4.341,1.951,1.951,0,0,1-.511-1.277,9.9,9.9,0,0,1,.255-6.64c1.277-3.32,3.575-6.384,5.618-9.194a78.4,78.4,0,0,1,6.384-6.64l.511-.511c7.917-6.9,17.366-11.492,27.07-15.067,1.021-.511,2.3-.511,3.575-1.021q-9.96,0-19.919.766c-2.554,0-5.108.511-7.661.766-.766,0-1.532.255-2.3.255a124.865,124.865,0,0,0-13.535,2.3,18.812,18.812,0,0,0-3.575,1.022,21.677,21.677,0,0,0-5.618,2.3c-2.043.766-3.575,2.554-5.108,4.086l-8.427,8.427c-3.831,3.831-7.917,7.661-11.747,11.492-1.022,1.022-2.3,2.043-2.809,3.575a4.622,4.622,0,0,0,.255,4.086,17.892,17.892,0,0,0,2.043,2.554c-1.788,1.788-3.575,3.575-5.108,5.363-.766.766-1.277,1.788-2.3,2.043-1.788,2.043-5.108,2.3-7.917,1.532-1.277-.255-2.809-.255-3.575.766l-4.6,5.363-3.831,4.6a6.459,6.459,0,0,0-1.532,3.831c-.255,1.532.766,3.065,1.788,4.086Z" transform="translate(-73.036 -122.224)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 395 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 229 KiB |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #1fc7d4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="减少" class="cls-1" d="M95.333,105.333a10,10,0,1,0-10-10,10,10,0,0,0,10,10Zm-3.75-10.75h7.5a.75.75,0,0,1,0,1.5h-7.5a.75.75,0,0,1,0-1.5Z" transform="translate(-85.333 -85.333)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #1fc7d4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="分享" class="cls-1" d="M80.5,64A17.5,17.5,0,1,0,98,81.5,17.5,17.5,0,0,0,80.5,64ZM77.891,81.5a2.941,2.941,0,0,1-.227,1.129l4.813,3.207a2.866,2.866,0,0,1,1.66-.527A2.895,2.895,0,1,1,81.242,88.2a2.973,2.973,0,0,1,.074-.648l-5.133-3.422a2.895,2.895,0,1,1,0-5.273l5.133-3.422a2.946,2.946,0,0,1-.074-.648,2.895,2.895,0,1,1,2.895,2.895,2.866,2.866,0,0,1-1.66-.527l-4.813,3.207A3,3,0,0,1,77.891,81.5Z" transform="translate(-63 -64)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 632 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 395 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -8,11 +8,11 @@
|
||||||
<link rel="preconnect" href="%REACT_APP_NODE_3%" />
|
<link rel="preconnect" href="%REACT_APP_NODE_3%" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap" rel="stylesheet" />
|
||||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
<!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> -->
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
<!-- Meta -->
|
<!-- Meta -->
|
||||||
<title>HighCity Swap</title>
|
<title>HiCity Swap</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Cheaper and faster than Uniswap? Discover PancakeSwap, the leading DEX on Binance Smart Chain (BSC) with the best farms in DeFi and a lottery for CAKE."
|
content="Cheaper and faster than Uniswap? Discover PancakeSwap, the leading DEX on Binance Smart Chain (BSC) with the best farms in DeFi and a lottery for CAKE."
|
||||||
|
|
|
||||||
|
|
@ -1055,27 +1055,27 @@
|
||||||
"Auction duration": "Auction duration",
|
"Auction duration": "Auction duration",
|
||||||
"Terms & Conditions": "Terms & Conditions",
|
"Terms & Conditions": "Terms & Conditions",
|
||||||
|
|
||||||
"Hcc Info": "HighCityCoin简称HCC，由HighCityTM铸造，",
|
"Hcc Info": "HiCityCoin简称HCC，由HiCityTM铸造，",
|
||||||
"Hcc Nft": "其作用主要是在HighCitySwap上购买NFT、NFT盒子与其他可交易产品。",
|
"Hcc Nft": "其作用主要是在HiCitySwap上购买NFT、NFT盒子与其他可交易产品。",
|
||||||
"Hcc BTC": "同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。",
|
"Hcc BTC": "同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。",
|
||||||
"Bazaar": "NFT市场",
|
"Bazaar": "NFT市场",
|
||||||
"HlighCitySwapInfo": "HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。",
|
"HlighCitySwapInfo": "HiCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HiCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HiCity团队将永远前行。",
|
||||||
"Stage one: Origin": "第一阶段：起源",
|
"Stage one: Origin": "第一阶段：起源",
|
||||||
"Stage two: Action": "第二阶段：行动",
|
"Stage two: Action": "第二阶段：行动",
|
||||||
"Stage three: Creation": "第三阶段：创造",
|
"Stage three: Creation": "第三阶段：创造",
|
||||||
"Stage four: Integration": "第四阶段：融合",
|
"Stage four: Integration": "第四阶段：融合",
|
||||||
"Stage five: Closing the curtain": "第五阶段：落幕",
|
"Stage five: Closing the curtain": "第五阶段：落幕",
|
||||||
"The project concept was born in May 2021": "2021年5月项目概念的诞生；",
|
"The project concept was born in May 2021": "2021年5月项目概念的诞生；",
|
||||||
"Set up HighClty team in June 2021": "2021年6月搭建HighClty团队；",
|
"Set up HiCity team in June 2021": "2021年6月搭建HiCity团队；",
|
||||||
"May 2021 -- January 2022 Team run-in": "2021年5月~2022年1月团队磨合；",
|
"May 2021 -- January 2022 Team run-in": "2021年5月~2022年1月团队磨合；",
|
||||||
"In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online": "2022年4月社交建社，交媒体发布活动，HighCity铸币开始，分红机制上线；",
|
"In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online": "2022年4月社交建社，交媒体发布活动，HiCity铸币开始，分红机制上线；",
|
||||||
"In March 2022, project approval, web design, roadmap announcement, smart contract development": "2022年3月项目立项，网页设计，路线图公布，智能合约开发；",
|
"In March 2022, project approval, web design, roadmap announcement, smart contract development": "2022年3月项目立项，网页设计，路线图公布，智能合约开发；",
|
||||||
"Launch of social software in December 2022": "2022年12月社交软件落地；",
|
"Launch of social software in December 2022": "2022年12月社交软件落地；",
|
||||||
"Created by NFT in May 2022": "2022年5月NFT创造；",
|
"Created by NFT in May 2022": "2022年5月NFT创造；",
|
||||||
"June 2022 social software development": "2022年6月社交软件开发；",
|
"June 2022 social software development": "2022年6月社交软件开发；",
|
||||||
"December 2022 NFT bonus binding social software": "2022年12月NFT分红绑定社交软件；",
|
"December 2022 NFT bonus binding social software": "2022年12月NFT分红绑定社交软件；",
|
||||||
"In December 2022, HighCity Ecology was preliminarily completed": "2022年12月HighCity生态初步建成；",
|
"In December 2022, HighCity Ecology was preliminarily completed": "2022年12月HiCity生态初步建成；",
|
||||||
"HighCity Ecology completed in December 2022": "2022年12月HighCity生态建成;",
|
"HighCity Ecology completed in December 2022": "2022年12月HiCity生态建成;",
|
||||||
"Maintain dividend income growth in December 2022": "2022年12月保持分红收益增长；",
|
"Maintain dividend income growth in December 2022": "2022年12月保持分红收益增长；",
|
||||||
"Buy commander NFT": "购买军团长NFT",
|
"Buy commander NFT": "购买军团长NFT",
|
||||||
"Upgrade recommendation rights, can enjoy the share of secondary recommendation": "升级推荐权益，可享有二级推荐的分成",
|
"Upgrade recommendation rights, can enjoy the share of secondary recommendation": "升级推荐权益，可享有二级推荐的分成",
|
||||||
|
|
@ -1118,7 +1118,7 @@
|
||||||
"By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins": "使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得",
|
"By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins": "使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得",
|
||||||
"The commission": "的提成！",
|
"The commission": "的提成！",
|
||||||
"footer %number% text": "使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得 %number% 的提成！",
|
"footer %number% text": "使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得 %number% 的提成！",
|
||||||
"market value": "市值(24h)",
|
"market value": "市值",
|
||||||
"Loaded all": "已加载全部",
|
"Loaded all": "已加载全部",
|
||||||
"Insufficient Balance": "余额不足",
|
"Insufficient Balance": "余额不足",
|
||||||
"HCC Currency amount": "HCC币总量",
|
"HCC Currency amount": "HCC币总量",
|
||||||
|
|
@ -1144,7 +1144,7 @@
|
||||||
"How to use": "如何使用",
|
"How to use": "如何使用",
|
||||||
"person": "人",
|
"person": "人",
|
||||||
"Earnings will be cleared after forced cancellation. Confirm cancellation": "强制取消后收益将清空，是否确认取消",
|
"Earnings will be cleared after forced cancellation. Confirm cancellation": "强制取消后收益将清空，是否确认取消",
|
||||||
"HighCitySwapInfo": "HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。",
|
"HighCitySwapInfo": "HiCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HiCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HiCity团队将永远前行。",
|
||||||
"After pledge, income will lock warehouse%times%": "质押后，收益将锁仓%times%",
|
"After pledge, income will lock warehouse%times%": "质押后，收益将锁仓%times%",
|
||||||
"IDO exchange in the first phase": "第一期IDO兑换",
|
"IDO exchange in the first phase": "第一期IDO兑换",
|
||||||
"Opening time of next exchange period:": "下期兑换开启时间：",
|
"Opening time of next exchange period:": "下期兑换开启时间：",
|
||||||
|
|
@ -1158,6 +1158,116 @@
|
||||||
"IDO Get": "IDO 领取",
|
"IDO Get": "IDO 领取",
|
||||||
"Estimated time of collection": "预计领取时间",
|
"Estimated time of collection": "预计领取时间",
|
||||||
"amount": "金额",
|
"amount": "金额",
|
||||||
"Change the end": "兑换结束",
|
"Exchange not commenced": "兑换未开始",
|
||||||
"After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "购买后，预计%time%时间后可进行领取，是否确认购买"
|
"After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "购买后，预计%time%时间后可进行领取，是否确认购买",
|
||||||
|
"Blind box": "盲盒",
|
||||||
|
"nft box": "NFT盒子",
|
||||||
|
"nft compound": "NFT 合成",
|
||||||
|
"total quantity": "总数量",
|
||||||
|
"With the number": "拥有数量",
|
||||||
|
"Did not have": "未拥有",
|
||||||
|
"already owned": "已拥有",
|
||||||
|
"epic": "史诗",
|
||||||
|
"legend": "传说",
|
||||||
|
"uncommon": "稀有",
|
||||||
|
"common": "普通",
|
||||||
|
"time remaining": "剩余时间",
|
||||||
|
"series": "系列",
|
||||||
|
"French feast": "法式盛宴",
|
||||||
|
"price": "价格",
|
||||||
|
"quantity": "数量",
|
||||||
|
"This page is not currently open": "此页面暂未开放",
|
||||||
|
"Viewing the Path Diagram": "查看路径图",
|
||||||
|
"nft bazaar": "NFT 市场",
|
||||||
|
"already received": "已领取",
|
||||||
|
"help center": "帮助中心",
|
||||||
|
"social contact demo": "社交demo",
|
||||||
|
"The rate of": "出率",
|
||||||
|
"%hour%hour": "%hour%小时",
|
||||||
|
"limit the quantity of": "限量",
|
||||||
|
"time limit": "限时",
|
||||||
|
"nft Smoking in the probability": "NFT抽中概率",
|
||||||
|
"%num%kind nft": "%num%种NFT",
|
||||||
|
"Selling immediately": "立即出售",
|
||||||
|
"Total quantity of ownership": "总拥有数量",
|
||||||
|
"Compositing success preview": "合成成功预览",
|
||||||
|
"nft name": "NFT名称",
|
||||||
|
"not available": "暂无",
|
||||||
|
"Number of successful synthesis": "合成成功数量",
|
||||||
|
"Synthetic success rate": "合成成功率",
|
||||||
|
"compound": "合成",
|
||||||
|
"Estimated synthesis cost": "预计合成费用",
|
||||||
|
"combination rules": "合成规则",
|
||||||
|
"1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;": "1、可使用多个相同NFT作为合成的原料，不同等级的NFT合成的成功率不一样，珍稀合成率为50%，史诗合成率为40%，传说合成率为23%；",
|
||||||
|
"2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;": "2、如果合成成功，则用户获得更高级的NFT，且合成池内所有NFT被销毁；",
|
||||||
|
"3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;": "3、如果合成失败，则根据合成的原料NFT等级出现不同概率的无变化或完全失败；无变化将损失合成时的合成费用；完全失败将损失合成的NFT原料及合成费用；",
|
||||||
|
"4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;": "4、举例：向合成池内填充2个普通 NFT，则此时的合成成功概率为：50%；无变化的概率为：47%；完全失败的概率为3%；",
|
||||||
|
"reselect nft": "重新选择NFT",
|
||||||
|
"add NFT": "添加NFT",
|
||||||
|
"Synthesis of details": "合成详情",
|
||||||
|
"Synthesis results: synthesis success, no change, synthesis failure;": "合成结果：合成成功、无变化、合成失败；",
|
||||||
|
"Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;": "合成成功：获得更高级的NFT，并对合成池内的原料NFT进行销毁；",
|
||||||
|
"No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;": "无变化：保留合成池内的原料NFT，但损失合成时的合成费用；",
|
||||||
|
"Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;": "合成失败：损失合成池内的原料NFT及合成时的合成费用；",
|
||||||
|
"compound probability:": "合成概率：",
|
||||||
|
"NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost": "合成成功NFT名称（等级）=原料NFT名称（等级）×数量+合成费用",
|
||||||
|
"bazaar": "市场",
|
||||||
|
"auction": "拍卖",
|
||||||
|
"I sell": "我的售卖",
|
||||||
|
"transaction record": "交易记录",
|
||||||
|
"The total volume": "总交易额",
|
||||||
|
"The total number of transactions": "总交易数",
|
||||||
|
"Total number of auctions": "总拍卖次数",
|
||||||
|
"Total auction commission": "总拍卖返佣",
|
||||||
|
"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": "交易时间"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
18
src/App.tsx
18
src/App.tsx
|
|
@ -52,9 +52,12 @@ const PoolFinder = lazy(() => import('./views/PoolFinder'))
|
||||||
const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
|
const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
|
||||||
const Referral = lazy(() => import('./views/Referral'))
|
const Referral = lazy(() => import('./views/Referral'))
|
||||||
const Board = lazy(() => import('./views/Board'))
|
const Board = lazy(() => import('./views/Board'))
|
||||||
const Nft = lazy(() => import('./views/Nft'))
|
const BlindBox = lazy(() => import('./views/BlindBox'))
|
||||||
const Announcement = lazy(() => import('./views/Announcement'))
|
const Announcement = lazy(() => import('./views/Announcement'))
|
||||||
const Ido = lazy(() => import('./views/Ido'))
|
const Ido = lazy(() => import('./views/Ido'))
|
||||||
|
const NftBox = lazy(() => import('./views/NftBox'))
|
||||||
|
const Compound = lazy(() => import('./views/Compound'))
|
||||||
|
const Bazaar = lazy(() => import('./views/Bazaar'))
|
||||||
|
|
||||||
// This config is required for number formatting
|
// This config is required for number formatting
|
||||||
BigNumber.config({
|
BigNumber.config({
|
||||||
|
|
@ -114,12 +117,21 @@ const App: React.FC = () => {
|
||||||
<Route path="/board">
|
<Route path="/board">
|
||||||
<Board />
|
<Board />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/nft">
|
<Route path="/blindBox">
|
||||||
<Nft />
|
<BlindBox />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/announcement">
|
<Route path="/announcement">
|
||||||
<Announcement />
|
<Announcement />
|
||||||
</Route>
|
</Route>
|
||||||
|
<Route path="/nftBox">
|
||||||
|
<NftBox />
|
||||||
|
</Route>
|
||||||
|
<Route path="/compound">
|
||||||
|
<Compound />
|
||||||
|
</Route>
|
||||||
|
<Route path="/bazaar">
|
||||||
|
<Bazaar />
|
||||||
|
</Route>
|
||||||
{/* <Route path="/lottery">
|
{/* <Route path="/lottery">
|
||||||
<Lottery />
|
<Lottery />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { Spinner } from '@pancakeswap/uikit'
|
import { Spinner, Image } from '@pancakeswap/uikit'
|
||||||
import Page from '../Layout/Page'
|
import Page from '../Layout/Page'
|
||||||
|
|
||||||
const Wrapper = styled(Page)`
|
const Wrapper = styled(Page)`
|
||||||
|
|
@ -12,7 +12,8 @@ const Wrapper = styled(Page)`
|
||||||
const PageLoader: React.FC = () => {
|
const PageLoader: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Spinner />
|
<Image src="/images/loading.gif" width={568} height={320} />
|
||||||
|
{/* <Spinner /> */}
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,40 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
||||||
icon: 'HomeIcon',
|
icon: 'HomeIcon',
|
||||||
href: '/',
|
href: '/',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: t('IDO Exchange'),
|
||||||
|
icon: 'Ido',
|
||||||
|
href: '/Ido',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('nft box'),
|
||||||
|
icon: 'NFTBox',
|
||||||
|
href: '/nftBox',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('nft compound'),
|
||||||
|
icon: 'Compound',
|
||||||
|
href: '/compound',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('nft bazaar'),
|
||||||
|
icon: 'Bazaar',
|
||||||
|
href: '/bazaar',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: t('NFT'),
|
||||||
|
// icon: 'GroupsIcon',
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// label: t('nft box'),
|
||||||
|
// href: '/nftBox',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: t('compound'),
|
||||||
|
// href: '/compound',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
// {
|
// {
|
||||||
// label: t('Trade'),
|
// label: t('Trade'),
|
||||||
// icon: 'TradeIcon',
|
// icon: 'TradeIcon',
|
||||||
|
|
@ -25,21 +59,16 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
||||||
// // },
|
// // },
|
||||||
// ],
|
// ],
|
||||||
// },
|
// },
|
||||||
{
|
// {
|
||||||
label: t('IDO Exchange'),
|
// label: t('Exchange'),
|
||||||
icon: 'FarmIcon',
|
// icon: 'FarmIcon',
|
||||||
href: '/Ido',
|
// href: 'https://pancake.kiemtienonline360.com/#/swap',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
label: t('Exchange'),
|
// label: t('Liquidity'),
|
||||||
icon: 'FarmIcon',
|
// icon: 'FarmIcon',
|
||||||
href: 'https://pancake.kiemtienonline360.com/#/swap',
|
// href: 'https://pancake.kiemtienonline360.com/#/pool',
|
||||||
},
|
// },
|
||||||
{
|
|
||||||
label: t('Liquidity'),
|
|
||||||
icon: 'FarmIcon',
|
|
||||||
href: 'https://pancake.kiemtienonline360.com/#/pool',
|
|
||||||
},
|
|
||||||
// {
|
// {
|
||||||
// label: t('Farms'),
|
// label: t('Farms'),
|
||||||
// icon: 'FarmIcon',
|
// icon: 'FarmIcon',
|
||||||
|
|
@ -52,22 +81,22 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
label: t('recommend'),
|
label: t('recommend'),
|
||||||
icon: 'PoolIcon',
|
icon: 'Recommend',
|
||||||
href: '/referral',
|
href: '/referral',
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// label: 'NFT',
|
label: t('Blind box'),
|
||||||
// icon: 'TicketIcon',
|
icon: 'BlindBox',
|
||||||
// href: '/nft',
|
href: '/blindBox',
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
label: t('capital pool'),
|
label: t('capital pool'),
|
||||||
icon: 'TicketIcon',
|
icon: 'Board',
|
||||||
href: '/board',
|
href: '/board',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('announcement'),
|
label: t('announcement'),
|
||||||
icon: 'TicketIcon',
|
icon: 'Announcement',
|
||||||
href: '/announcement',
|
href: '/announcement',
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useEffect, useState, useMemo } from 'react'
|
import React, { useEffect, useState, useMemo } from 'react'
|
||||||
import { Menu as UikitMenu, ConnectorNames } from '@pancakeswap/uikit'
|
import { Menu as UikitMenu, ConnectorNames } from '@pancakeswap/uikit'
|
||||||
import { useDispatch } from 'react-redux'
|
import { useDispatch } from 'react-redux'
|
||||||
import { uccnDetail, indexInfo } from 'services/user'
|
import { uccnDetail, indexInfo, getProjectDoc } from 'services/user'
|
||||||
import { useWeb3React } from '@web3-react/core'
|
import { useWeb3React } from '@web3-react/core'
|
||||||
import { languageList } from 'config/localization/languages'
|
import { languageList } from 'config/localization/languages'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
@ -17,6 +17,7 @@ const Menu = (props) => {
|
||||||
const account = useAccount()
|
const account = useAccount()
|
||||||
const { login, logout } = useAuth()
|
const { login, logout } = useAuth()
|
||||||
const [hasWalletLogin, setHasWalletLogin] = useState(false)
|
const [hasWalletLogin, setHasWalletLogin] = useState(false)
|
||||||
|
const [documentAddress, setDocumentAddress] = useState('')
|
||||||
const { isDark, toggleTheme } = useTheme()
|
const { isDark, toggleTheme } = useTheme()
|
||||||
const hccPriceUsdt = usePriceHccUsdt()
|
const hccPriceUsdt = usePriceHccUsdt()
|
||||||
const { library } = useWeb3Provider()
|
const { library } = useWeb3Provider()
|
||||||
|
|
@ -50,6 +51,11 @@ const Menu = (props) => {
|
||||||
})
|
})
|
||||||
setSocialLink(list)
|
setSocialLink(list)
|
||||||
}
|
}
|
||||||
|
const getDoc = async () => {
|
||||||
|
const result = await getProjectDoc()
|
||||||
|
const { data } = result.data
|
||||||
|
setDocumentAddress(data)
|
||||||
|
}
|
||||||
// 钱包登录后
|
// 钱包登录后
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (unActiveAccount && library.provider && hasWalletLogin) {
|
if (unActiveAccount && library.provider && hasWalletLogin) {
|
||||||
|
|
@ -59,6 +65,7 @@ const Menu = (props) => {
|
||||||
}, [unActiveAccount, hasWalletLogin, library])
|
}, [unActiveAccount, hasWalletLogin, library])
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getDetails()
|
getDetails()
|
||||||
|
getDoc()
|
||||||
}, [])
|
}, [])
|
||||||
return (
|
return (
|
||||||
<UikitMenu
|
<UikitMenu
|
||||||
|
|
@ -74,6 +81,7 @@ const Menu = (props) => {
|
||||||
cakePriceUsd={hccPriceUsdt}
|
cakePriceUsd={hccPriceUsdt}
|
||||||
links={config(t)}
|
links={config(t)}
|
||||||
socialLink={socialLink}
|
socialLink={socialLink}
|
||||||
|
documentAddress={documentAddress}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -107,10 +107,11 @@ const ModalInput: React.FC<ModalInputProps> = ({
|
||||||
</StyledTokenInput>
|
</StyledTokenInput>
|
||||||
{isBalanceZero && (
|
{isBalanceZero && (
|
||||||
<StyledErrorMessage fontSize="14px" color="failure">
|
<StyledErrorMessage fontSize="14px" color="failure">
|
||||||
{t('No tokens to stake')}:{' '}
|
{t('No tokens to stake')}
|
||||||
|
{/* :{' '}
|
||||||
<Link fontSize="14px" bold={false} href={addLiquidityUrl} external color="failure">
|
<Link fontSize="14px" bold={false} href={addLiquidityUrl} external color="failure">
|
||||||
{t('Get %symbol%', { symbol })}
|
{t('Get %symbol%', { symbol })}
|
||||||
</Link>
|
</Link> */}
|
||||||
</StyledErrorMessage>
|
</StyledErrorMessage>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
import { Text, Flex, Button, Link } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
const ModelFlex = styled(Flex)`
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
top: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 998;
|
||||||
|
`
|
||||||
|
const Model = styled.div`
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
top: 0;
|
||||||
|
background: rgba(31, 11, 117, 0.39);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(5px);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
filter: blur(8px);
|
||||||
|
z-index: 99;
|
||||||
|
`
|
||||||
|
const ModelDiv = styled(Flex)`
|
||||||
|
width: 488px;
|
||||||
|
height: 204px;
|
||||||
|
background: #f3f2f9;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 30px 0;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 32px;
|
||||||
|
color: #333333;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TipText = styled(Text)`
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
`
|
||||||
|
const BtnText = styled(Link)`
|
||||||
|
height: 40px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const UnOpenModel: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Model />
|
||||||
|
<ModelFlex>
|
||||||
|
<ModelDiv>
|
||||||
|
<HeaderText>{t('Coming Soon')}</HeaderText>
|
||||||
|
<TipText>{t('This page is not currently open')}</TipText>
|
||||||
|
<BtnText href="/?scrollTo=scrollTo">{t('Viewing the Path Diagram')}</BtnText>
|
||||||
|
</ModelDiv>
|
||||||
|
</ModelFlex>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default UnOpenModel
|
||||||
|
|
@ -1,2 +1,3 @@
|
||||||
export { default as ModalActions } from './ModalActions'
|
export { default as ModalActions } from './ModalActions'
|
||||||
export { default as ModalInput } from './ModalInput'
|
export { default as ModalInput } from './ModalInput'
|
||||||
|
export { default as UnOpenModel } from './UnOpenModel'
|
||||||
|
|
|
||||||
|
|
@ -8,32 +8,32 @@ export default {
|
||||||
56: '0x6ab8463a4185b80905e05a9ff80a2d6b714b9e95',
|
56: '0x6ab8463a4185b80905e05a9ff80a2d6b714b9e95',
|
||||||
},
|
},
|
||||||
boardChef: {
|
boardChef: {
|
||||||
97: '0x4ECC687D67138694729433e77cD95eEE9a858E40',
|
97: '0x82ab2659c3de15f48cd67f12668dca514b44070f',
|
||||||
56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会合约
|
56: '0x82ab2659c3de15f48cd67f12668dca514b44070f', // NEED CHANGE 节点董事会合约
|
||||||
},
|
},
|
||||||
boardRewardChef: {
|
boardRewardChef: {
|
||||||
97: '0xbCb980b6A4CD67d81B63B0bFA734B4116B218700',
|
97: '0x44a7b703a90b87e54abff5ae0861e917c828d062',
|
||||||
56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会分红合约
|
56: '0x44a7b703a90b87e54abff5ae0861e917c828d062', // NEED CHANGE 节点董事会分红合约
|
||||||
},
|
},
|
||||||
holderChef: {
|
holderChef: {
|
||||||
97: '0x8faafb4ba8945917e7fe024dbbad0a5fb1da2181',
|
97: '0xe3031f378f201dca46361a34e3fd12e50bdd202f',
|
||||||
56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 持币人
|
56: '0xe3031f378f201dca46361a34e3fd12e50bdd202f', // NEED CHANGE 持币人
|
||||||
},
|
},
|
||||||
holderRewardChef: {
|
holderRewardChef: {
|
||||||
97: '0x61FB526924c6BAC9A08E146Da103B19c0DFA1899',
|
97: '0x9ee1c805a9508c0799b157ebbe3108d57c8d8588',
|
||||||
56: '0x46271393dd6f2c8798a44f857888aa6a85af3527', // NEED CHANGE 持币人分红
|
56: '0x9ee1c805a9508c0799b157ebbe3108d57c8d8588', // NEED CHANGE 持币人分红
|
||||||
},
|
},
|
||||||
referralChef: {
|
referralChef: {
|
||||||
97: '0xe94282DA5166AD3FEB82F7aE299b2D5DFDF392Ae',
|
97: '0x0866962d208e91ea8804db3f547cccf22fe39ea7',
|
||||||
56: '0xf42D1e1883C2FAA058dfa0D301556EB2d964859a', // NEED CHANGE 邀请或则军团长
|
56: '0x0866962d208e91ea8804db3f547cccf22fe39ea7', // NEED CHANGE 邀请或则军团长
|
||||||
},
|
},
|
||||||
referralRewardChef: {
|
referralRewardChef: {
|
||||||
97: '0xf42D1e1883C2FAA058dfa0D301556EB2d964859a',
|
97: '0x0fb12ffe4b38730b80c26f44fa540eabfd03a30e',
|
||||||
56: '0xf42D1e1883C2FAA058dfa0D301556EB2d964859a', // NEED CHANGE 邀请或则军团长收益
|
56: '0x0fb12ffe4b38730b80c26f44fa540eabfd03a30e', // NEED CHANGE 邀请或则军团长收益
|
||||||
},
|
},
|
||||||
idoPurchase: {
|
idoPurchase: {
|
||||||
97: '0xCCFD5B33774a1568A322FCa262D3378Ff8CcdeCB',
|
97: '0x2f562A9fE0325501A6Aa92cd9e2081B026fC35aa',
|
||||||
56: '0xCCFD5B33774a1568A322FCa262D3378Ff8CcdeCB', // NEED CHANGE IDO兑换
|
56: '0x2f562A9fE0325501A6Aa92cd9e2081B026fC35aa', // NEED CHANGE IDO兑换
|
||||||
},
|
},
|
||||||
lotteryV2: {
|
lotteryV2: {
|
||||||
97: '0x5790c3534F30437641541a0FA04C992799602998',
|
97: '0x5790c3534F30437641541a0FA04C992799602998',
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import { ContextApi } from 'contexts/Localization/types'
|
||||||
import { PageMeta } from './types'
|
import { PageMeta } from './types'
|
||||||
|
|
||||||
export const DEFAULT_META: PageMeta = {
|
export const DEFAULT_META: PageMeta = {
|
||||||
title: 'HighCitySwap',
|
title: 'HiCitySwap',
|
||||||
description:
|
description:
|
||||||
'The most popular AMM on BSC by user count! Earn CAKE through yield farming or win it in the Lottery, then stake it in Syrup Pools to earn more tokens! Initial Farm Offerings (new token launch model pioneered by PancakeSwap), NFTs, and more, on a platform you can trust.',
|
'The most popular AMM on BSC by user count! Earn CAKE through yield farming or win it in the Lottery, then stake it in Syrup Pools to earn more tokens! Initial Farm Offerings (new token launch model pioneered by PancakeSwap), NFTs, and more, on a platform you can trust.',
|
||||||
image: 'https://pancakeswap.finance/images/hero.png',
|
image: 'https://pancakeswap.finance/images/hero.png',
|
||||||
|
|
@ -12,47 +12,47 @@ export const getCustomMeta = (path: string, t: ContextApi['t']): PageMeta => {
|
||||||
switch (path) {
|
switch (path) {
|
||||||
case '/':
|
case '/':
|
||||||
return {
|
return {
|
||||||
title: `${t('Home')} | ${t('PancakeSwap')}`,
|
title: `${t('Home')}`,
|
||||||
}
|
}
|
||||||
case '/competition':
|
case '/compound':
|
||||||
return {
|
return {
|
||||||
title: `${t('Trading Battle')} | ${t('PancakeSwap')}`,
|
title: `${t('compound')}`,
|
||||||
}
|
}
|
||||||
case '/prediction':
|
case '/nftBox':
|
||||||
return {
|
return {
|
||||||
title: `${t('Prediction')} | ${t('PancakeSwap')}`,
|
title: `${t('nft box')}`,
|
||||||
}
|
}
|
||||||
case '/farms':
|
case '/farms':
|
||||||
return {
|
return {
|
||||||
title: `${t('Farms')} | ${t('PancakeSwap')}`,
|
title: `${t('Farms')}`,
|
||||||
}
|
}
|
||||||
case '/pools':
|
case '/pools':
|
||||||
return {
|
return {
|
||||||
title: `${t('Pools')} | ${t('PancakeSwap')}`,
|
title: `${t('Pools')}`,
|
||||||
}
|
}
|
||||||
case '/lottery':
|
case '/lottery':
|
||||||
return {
|
return {
|
||||||
title: `${t('Lottery')} | ${t('PancakeSwap')}`,
|
title: `${t('Lottery')}`,
|
||||||
}
|
}
|
||||||
case '/collectibles':
|
case '/collectibles':
|
||||||
return {
|
return {
|
||||||
title: `${t('Collectibles')} | ${t('PancakeSwap')}`,
|
title: `${t('Collectibles')}`,
|
||||||
}
|
}
|
||||||
case '/ifo':
|
case '/ifo':
|
||||||
return {
|
return {
|
||||||
title: `${t('Initial Farm Offering')} | ${t('PancakeSwap')}`,
|
title: `${t('Initial Farm Offering')}`,
|
||||||
}
|
}
|
||||||
case '/teams':
|
case '/teams':
|
||||||
return {
|
return {
|
||||||
title: `${t('Leaderboard')} | ${t('PancakeSwap')}`,
|
title: `${t('Leaderboard')}`,
|
||||||
}
|
}
|
||||||
case '/profile/tasks':
|
case '/profile/tasks':
|
||||||
return {
|
return {
|
||||||
title: `${t('Task Center')} | ${t('PancakeSwap')}`,
|
title: `${t('Task Center')}`,
|
||||||
}
|
}
|
||||||
case '/profile':
|
case '/profile':
|
||||||
return {
|
return {
|
||||||
title: `${t('Your Profile')} | ${t('PancakeSwap')}`,
|
title: `${t('Your Profile')}`,
|
||||||
}
|
}
|
||||||
default:
|
default:
|
||||||
return null
|
return null
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ const tokens = {
|
||||||
symbol: 'HCC',
|
symbol: 'HCC',
|
||||||
address: {
|
address: {
|
||||||
56: '0x20de22029ab63cf9A7Cf5fEB2b737Ca1eE4c82A6',
|
56: '0x20de22029ab63cf9A7Cf5fEB2b737Ca1eE4c82A6',
|
||||||
97: '0xE7619D544bD06f4d7362c8aA06a4ca0Ea73ce8c2',
|
97: '0x5554c56e94bf07a85206dfeb584c7cb7f7d21227',
|
||||||
},
|
},
|
||||||
decimals: 18,
|
decimals: 18,
|
||||||
projectLink: 'https://tranchess.com/',
|
projectLink: 'https://tranchess.com/',
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,11 @@
|
||||||
import { Language } from '@pancakeswap/uikit'
|
import { Language } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
export const AR: Language = { locale: 'ar-SA', language: 'العربية', code: 'ar' }
|
|
||||||
export const BN: Language = { locale: 'bn-BD', language: 'বাংলা', code: 'bn' }
|
|
||||||
export const EN: Language = { locale: 'en-US', language: 'English', code: 'en' }
|
export const EN: Language = { locale: 'en-US', language: 'English', code: 'en' }
|
||||||
export const DE: Language = { locale: 'de-DE', language: 'Deutsch', code: 'de' }
|
|
||||||
export const EL: Language = { locale: 'el-GR', language: 'Ελληνικά', code: 'el' }
|
|
||||||
export const ESES: Language = { locale: 'es-ES', language: 'Español', code: 'es-ES' }
|
|
||||||
export const FI: Language = { locale: 'fi-FI', language: 'Suomalainen', code: 'fi' }
|
|
||||||
export const FIL: Language = { locale: 'fil-PH', language: 'Filipino', code: 'fil' }
|
|
||||||
export const FR: Language = { locale: 'fr-FR', language: 'Français', code: 'fr' }
|
|
||||||
export const HI: Language = { locale: 'hi-IN', language: 'हिंदी', code: 'hi' }
|
|
||||||
export const HU: Language = { locale: 'hu-HU', language: 'Magyar', code: 'hu' }
|
|
||||||
export const ID: Language = { locale: 'id-ID', language: 'Bahasa Indonesia', code: 'id' }
|
|
||||||
export const IT: Language = { locale: 'it-IT', language: 'Italiano', code: 'it' }
|
|
||||||
export const JA: Language = { locale: 'ja-JP', language: '日本語', code: 'ja' }
|
|
||||||
export const KO: Language = { locale: 'ko-KR', language: '한국어', code: 'ko' }
|
|
||||||
export const NL: Language = { locale: 'nl-NL', language: 'Nederlands', code: 'nl' }
|
|
||||||
export const PL: Language = { locale: 'pl-PL', language: 'Polski', code: 'pl' }
|
|
||||||
export const PTBR: Language = { locale: 'pt-BR', language: 'Português (Brazil)', code: 'pt-br' }
|
|
||||||
export const PTPT: Language = { locale: 'pt-PT', language: 'Português', code: 'pt-pt' }
|
|
||||||
export const RO: Language = { locale: 'ro-RO', language: 'Română', code: 'ro' }
|
|
||||||
export const RU: Language = { locale: 'ru-RU', language: 'Русский', code: 'ru' }
|
|
||||||
export const SVSE: Language = { locale: 'sv-SE', language: 'Svenska', code: 'sv' }
|
|
||||||
export const TA: Language = { locale: 'ta-IN', language: 'தமிழ்', code: 'ta' }
|
|
||||||
export const TR: Language = { locale: 'tr-TR', language: 'Türkçe', code: 'tr' }
|
|
||||||
export const UK: Language = { locale: 'uk-UA', language: 'Українська', code: 'uk' }
|
|
||||||
export const VI: Language = { locale: 'vi-VN', language: 'Tiếng Việt', code: 'vi' }
|
|
||||||
export const ZHCN: Language = { locale: 'zh-CN', language: '简体中文', code: 'zh-cn' }
|
export const ZHCN: Language = { locale: 'zh-CN', language: '简体中文', code: 'zh-cn' }
|
||||||
export const ZHTW: Language = { locale: 'zh-TW', language: '繁體中文', code: 'zh-tw' }
|
|
||||||
|
|
||||||
export const languages = {
|
export const languages = {
|
||||||
'ar-SA': AR,
|
|
||||||
'bn-BD': BN,
|
|
||||||
'en-US': EN,
|
'en-US': EN,
|
||||||
'de-DE': DE,
|
|
||||||
'el-GR': EL,
|
|
||||||
'es-ES': ESES,
|
|
||||||
'fi-FI': FI,
|
|
||||||
'fil-PH': FIL,
|
|
||||||
'fr-FR': FR,
|
|
||||||
'hi-IN': HI,
|
|
||||||
'hu-HU': HU,
|
|
||||||
'id-ID': ID,
|
|
||||||
'it-IT': IT,
|
|
||||||
'ja-JP': JA,
|
|
||||||
'ko-KR': KO,
|
|
||||||
'nl-NL': NL,
|
|
||||||
'pl-PL': PL,
|
|
||||||
'pt-BR': PTBR,
|
|
||||||
'pt-PT': PTPT,
|
|
||||||
'ro-RO': RO,
|
|
||||||
'ru-RU': RU,
|
|
||||||
'sv-SE': SVSE,
|
|
||||||
'ta-IN': TA,
|
|
||||||
'tr-TR': TR,
|
|
||||||
'uk-UA': UK,
|
|
||||||
'vi-VN': VI,
|
|
||||||
'zh-CN': ZHCN,
|
'zh-CN': ZHCN,
|
||||||
'zh-TW': ZHTW,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const languageList = Object.values(languages)
|
export const languageList = Object.values(languages)
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
@ -1184,27 +1183,27 @@
|
||||||
"Confirm this transaction in your wallet": "Confirm this transaction in your wallet",
|
"Confirm this transaction in your wallet": "Confirm this transaction in your wallet",
|
||||||
"Dismiss": "Dismiss",
|
"Dismiss": "Dismiss",
|
||||||
|
|
||||||
"Hcc Info": "HighCityCoin abbreviation HCC,cause HighCityTM cast,",
|
"Hcc Info": "HiCityCoin abbreviation HCC,cause HiCityTM cast,",
|
||||||
"Hcc Nft": "Its function is mainly in HighCitySwap On the purchase NFT、NFT Boxes and other tradeable products.",
|
"Hcc Nft": "Its function is mainly in HiCitySwap On the purchase NFT、NFT Boxes and other tradeable products.",
|
||||||
"Hcc BTC": "meanwhile,HCC and BTC、ETH Have the same properties,They can trade freely.",
|
"Hcc BTC": "meanwhile,HCC and BTC、ETH Have the same properties,They can trade freely.",
|
||||||
"Bazaar": "NFT Bazaar",
|
"Bazaar": "NFT Bazaar",
|
||||||
"HlighCitySwapInfo": "HIighCitySwap the birth of,From the founder Liu Bus Enthusiastic pursuit of blockchain technology,He has always believed that blockchain technology could be used more widely。for this purpose,He made a brave decision,Abandon investments in other areas,Focus on the practical application of blockchain technology,Put yourself in a familiar field -- social networking on the Internet,Integration with blockchain technology,HighCitySwap Thus was born.That's where we started,Thank you for your support,HighCity The team will always move forward.",
|
"HlighCitySwapInfo": "HIighCitySwap the birth of,From the founder Liu Bus Enthusiastic pursuit of blockchain technology,He has always believed that blockchain technology could be used more widely。for this purpose,He made a brave decision,Abandon investments in other areas,Focus on the practical application of blockchain technology,Put yourself in a familiar field -- social networking on the Internet,Integration with blockchain technology,HiCitySwap Thus was born.That's where we started,Thank you for your support,HiCity The team will always move forward.",
|
||||||
"Stage one: Origin": "Stage one: Origin",
|
"Stage one: Origin": "Stage one: Origin",
|
||||||
"Stage two: Action": "Stage two: Action",
|
"Stage two: Action": "Stage two: Action",
|
||||||
"Stage three: Creation": "Stage three: Creation",
|
"Stage three: Creation": "Stage three: Creation",
|
||||||
"Stage four: Integration": "Stage four: Integration",
|
"Stage four: Integration": "Stage four: Integration",
|
||||||
"Stage five: Closing the curtain": "Stage five: Closing the curtain",
|
"Stage five: Closing the curtain": "Stage five: Closing the curtain",
|
||||||
"The project concept was born in May 2021": "The project concept was born in May 2021;",
|
"The project concept was born in May 2021": "The project concept was born in May 2021;",
|
||||||
"Set up HighClty team in June 2021": "Set up HighClty team in June 2021;",
|
"Set up HiCity team in June 2021": "Set up HiCity team in June 2021;",
|
||||||
"May 2021 -- January 2022 Team run-in": "May 2021 -- January 2022 Team run-in;",
|
"May 2021 -- January 2022 Team run-in": "May 2021 -- January 2022 Team run-in;",
|
||||||
"In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online": "In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online;",
|
"In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online": "In April 2022, social networking and media release activities, HiCity coin started and dividend mechanism went online;",
|
||||||
"In March 2022, project approval, web design, roadmap announcement, smart contract development": "In March 2022, project approval, web design, roadmap announcement, smart contract development;",
|
"In March 2022, project approval, web design, roadmap announcement, smart contract development": "In March 2022, project approval, web design, roadmap announcement, smart contract development;",
|
||||||
"Launch of social software in December 2022": "Launch of social software in December 2022;",
|
"Launch of social software in December 2022": "Launch of social software in December 2022;",
|
||||||
"Created by NFT in May 2022": "Created by NFT in May 2022;",
|
"Created by NFT in May 2022": "Created by NFT in May 2022;",
|
||||||
"June 2022 social software development": "June 2022 social software development;",
|
"June 2022 social software development": "June 2022 social software development;",
|
||||||
"December 2022 NFT bonus binding social software": "December 2022 NFT bonus binding social software;",
|
"December 2022 NFT bonus binding social software": "December 2022 NFT bonus binding social software;",
|
||||||
"In December 2022, HighCity Ecology was preliminarily completed": "In December 2022, HighCity Ecology was preliminarily completed;",
|
"In December 2022, HighCity Ecology was preliminarily completed": "In December 2022, HiCity Ecology was preliminarily completed;",
|
||||||
"HighCity Ecology completed in December 2022": "HighCity Ecology completed in December 2022",
|
"HighCity Ecology completed in December 2022": "HiCity Ecology completed in December 2022",
|
||||||
"Maintain dividend income growth in December 2022": "Maintain dividend income growth in December 2022;",
|
"Maintain dividend income growth in December 2022": "Maintain dividend income growth in December 2022;",
|
||||||
"Buy commander NFT": "Buy commander NFT",
|
"Buy commander NFT": "Buy commander NFT",
|
||||||
"Upgrade recommendation rights, can enjoy the share of secondary recommendation": "Upgrade recommendation rights, can enjoy the share of secondary recommendation",
|
"Upgrade recommendation rights, can enjoy the share of secondary recommendation": "Upgrade recommendation rights, can enjoy the share of secondary recommendation",
|
||||||
|
|
@ -1213,7 +1212,7 @@
|
||||||
"First stage sharing ratio": "First stage sharing ratio",
|
"First stage sharing ratio": "First stage sharing ratio",
|
||||||
"Secondary split ratio": "Secondary split ratio",
|
"Secondary split ratio": "Secondary split ratio",
|
||||||
"Buy It Now": "Buy It Now",
|
"Buy It Now": "Buy It Now",
|
||||||
"recommend": "recommend",
|
"recommend": "Recommend",
|
||||||
"The lower the number of": "The lower the number of",
|
"The lower the number of": "The lower the number of",
|
||||||
"NFT total revenue": "NFT total revenue",
|
"NFT total revenue": "NFT total revenue",
|
||||||
"HCC total revenue": "HCC total revenue",
|
"HCC total revenue": "HCC total revenue",
|
||||||
|
|
@ -1233,7 +1232,7 @@
|
||||||
"each time": "1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
|
"each time": "1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
|
||||||
"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",
|
"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",
|
||||||
"commission fee": "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
|
"commission fee": "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
|
||||||
"announcement": "announcement",
|
"announcement": "Announcement",
|
||||||
"return": "return",
|
"return": "return",
|
||||||
"Total capital pool": "Total capital pool",
|
"Total capital pool": "Total capital pool",
|
||||||
"The total amount of dividends": "The total amount of dividends",
|
"The total amount of dividends": "The total amount of dividends",
|
||||||
|
|
@ -1247,12 +1246,12 @@
|
||||||
"By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins": "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins",
|
"By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins": "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins",
|
||||||
"The commission": "The commission！",
|
"The commission": "The commission！",
|
||||||
"footer %number% text": "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins %number% The commission！",
|
"footer %number% text": "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins %number% The commission！",
|
||||||
"market value": "market value(24h)",
|
"market value": "market value",
|
||||||
"Loaded all": "Loaded all",
|
"Loaded all": "Loaded all",
|
||||||
"HCC Currency amount": "HCC Currency amount",
|
"HCC Currency amount": "HCC Currency amount",
|
||||||
"Lock up time": "Lock up time",
|
"Lock up time": "Lock up time",
|
||||||
"possess LP": "possess LP",
|
"possess LP": "possess LP",
|
||||||
"capital pool": "capital pool",
|
"capital pool": "Capital Pool",
|
||||||
"Unclaimed income": "Unclaimed income",
|
"Unclaimed income": "Unclaimed income",
|
||||||
"pledge": "pledge",
|
"pledge": "pledge",
|
||||||
"top": "top",
|
"top": "top",
|
||||||
|
|
@ -1271,7 +1270,7 @@
|
||||||
"How to use": "How to use",
|
"How to use": "How to use",
|
||||||
"person": "person",
|
"person": "person",
|
||||||
"Earnings will be cleared after forced cancellation. Confirm cancellation": "Earnings will be cleared after forced cancellation. Confirm cancellation",
|
"Earnings will be cleared after forced cancellation. Confirm cancellation": "Earnings will be cleared after forced cancellation. Confirm cancellation",
|
||||||
"HighCitySwapInfo": "HIighCitySwap was born from the fanatical pursuit of blockchain technology by its founder Liu Bus, who always believes that blockchain technology can be applied more widely. For this reason, he made a brave decision to give up investment in other fields and focus on the practice and application of blockchain technology. He fused his familiar field -- Internet social interaction with blockchain technology and thus HighCitySwap was born. This is our beginning, thank you for your support, the HighCity team will always move forward.",
|
"HighCitySwapInfo": "HiCitySwap was born from the fanatical pursuit of blockchain technology by its founder Liu Bus, who always believes that blockchain technology can be applied more widely. For this reason, he made a brave decision to give up investment in other fields and focus on the practice and application of blockchain technology. He fused his familiar field -- Internet social interaction with blockchain technology and thus HiCitySwap was born. This is our beginning, thank you for your support, the HiCity team will always move forward.",
|
||||||
"After pledge, income will lock warehouse%times%": "After pledge, income will lock warehouse%times%",
|
"After pledge, income will lock warehouse%times%": "After pledge, income will lock warehouse%times%",
|
||||||
"IDO exchange in the first phase": "IDO exchange in the first phase",
|
"IDO exchange in the first phase": "IDO exchange in the first phase",
|
||||||
"Opening time of next exchange period:": "Opening time of next exchange period:",
|
"Opening time of next exchange period:": "Opening time of next exchange period:",
|
||||||
|
|
@ -1285,6 +1284,117 @@
|
||||||
"IDO Get": "IDO Get",
|
"IDO Get": "IDO Get",
|
||||||
"Estimated time of collection": "Estimated time of collection",
|
"Estimated time of collection": "Estimated time of collection",
|
||||||
"amount": "amount",
|
"amount": "amount",
|
||||||
"Change the end": "Change the end",
|
"Exchange not commenced": "Exchange not commenced",
|
||||||
"After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase"
|
"After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase",
|
||||||
|
"Blind box": "Blind Box",
|
||||||
|
"nft box": "NFT Box",
|
||||||
|
"nft compound": "NFT Compound",
|
||||||
|
"total quantity": "total quantity",
|
||||||
|
"With the number": "With the number",
|
||||||
|
"Did not have": "Did not have",
|
||||||
|
"already owned": "already owned",
|
||||||
|
"epic": "epic",
|
||||||
|
"legend": "legend",
|
||||||
|
"uncommon": "uncommon",
|
||||||
|
"common": "common",
|
||||||
|
"time remaining": "time remaining",
|
||||||
|
"series": "series",
|
||||||
|
"French feast": "French feast",
|
||||||
|
"price": "price",
|
||||||
|
"quantity": "quantity",
|
||||||
|
"Coming Soon": "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 Bazaar",
|
||||||
|
"already received": "already received",
|
||||||
|
"help center": "help",
|
||||||
|
"social contact demo": "social contact demo",
|
||||||
|
"The rate of": "The rate of",
|
||||||
|
"%hour%hour": "%hour%hour",
|
||||||
|
"limit the quantity of": "limit the quantity of",
|
||||||
|
"time limit": "time limit",
|
||||||
|
"nft Smoking in the probability": "nft Smoking in the probability",
|
||||||
|
"%num%kind nft": "%num%kind nft",
|
||||||
|
"Selling immediately": "Selling immediately",
|
||||||
|
"Total quantity of ownership": "Total quantity of ownership",
|
||||||
|
"Compositing success preview": "Compositing success preview",
|
||||||
|
"nft name": "NFT name",
|
||||||
|
"not available": "not available",
|
||||||
|
"Number of successful synthesis": "Number of successful synthesis",
|
||||||
|
"Synthetic success rate": "Synthetic success rate",
|
||||||
|
"compound": "compound",
|
||||||
|
"Estimated synthesis cost": "Estimated synthesis cost",
|
||||||
|
"combination rules": "combination rules",
|
||||||
|
"1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;": "1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;",
|
||||||
|
"2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;": "2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;",
|
||||||
|
"3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;": "3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;",
|
||||||
|
"4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;": "4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;",
|
||||||
|
"reselect nft": "reselect NFT",
|
||||||
|
"add NFT": "add NFT",
|
||||||
|
"Synthesis of details": "Synthesis of details",
|
||||||
|
"Synthesis results: synthesis success, no change, synthesis failure;": "Synthesis results: synthesis success, no change, synthesis failure;",
|
||||||
|
"Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;": "Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;",
|
||||||
|
"No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;": "No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;",
|
||||||
|
"Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;": "Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;",
|
||||||
|
"compound probability:": "compound probability:",
|
||||||
|
"NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost": "NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost",
|
||||||
|
"bazaar": "bazaar",
|
||||||
|
"auction": "auction",
|
||||||
|
"I sell": "I sell",
|
||||||
|
"transaction record": "transaction record",
|
||||||
|
"The total volume": "The total volume",
|
||||||
|
"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": "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"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ const useGetDocumentTitlePrice = () => {
|
||||||
const cakePriceBusd = useCakeBusdPrice()
|
const cakePriceBusd = useCakeBusdPrice()
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const cakePriceBusdString = cakePriceBusd ? cakePriceBusd.toFixed(2) : ''
|
const cakePriceBusdString = cakePriceBusd ? cakePriceBusd.toFixed(2) : ''
|
||||||
document.title = `HighCity Swap - ${cakePriceBusdString}`
|
document.title = `HiCity Swap - ${cakePriceBusdString}`
|
||||||
}, [cakePriceBusd])
|
}, [cakePriceBusd])
|
||||||
}
|
}
|
||||||
export default useGetDocumentTitlePrice
|
export default useGetDocumentTitlePrice
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import request from 'utils/request'
|
||||||
|
|
||||||
|
export const getOfficialPage = (params) => {
|
||||||
|
return request.request({
|
||||||
|
url: '/high_city/app/api/market/official/page',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getOfficialPage
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import request from 'utils/request'
|
||||||
|
|
||||||
|
export const getBoxPage = (params) => {
|
||||||
|
return request.request({
|
||||||
|
url: '/high_city/app/api/box/page',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getBoxDetail = (id) => {
|
||||||
|
return request.request({
|
||||||
|
url: `/high_city/app/api/box/detail/${id}`,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getBoxPage
|
||||||
|
|
@ -2,7 +2,7 @@ import request from 'utils/request'
|
||||||
|
|
||||||
export const getBaseConfig = () => {
|
export const getBaseConfig = () => {
|
||||||
return request.request({
|
return request.request({
|
||||||
url: '/high_city/app/api/base/config',
|
url: '/high_city/app/api/base/config/bod/lock/time',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,4 +19,11 @@ export const indexInfo = () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const getProjectDoc = () => {
|
||||||
|
return request.request({
|
||||||
|
url: '/high_city/app/api/base/config/project/doc',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export default queryUserInfo
|
export default queryUserInfo
|
||||||
|
|
|
||||||
|
|
@ -68,3 +68,6 @@ export const formatFixedNumber = (number: ethers.FixedNumber, displayDecimals =
|
||||||
export const formatDivNumber = (number: BigNumber | number, decimals = 4) => {
|
export const formatDivNumber = (number: BigNumber | number, decimals = 4) => {
|
||||||
return new BigNumber(number).div(BIG_TEN.pow(decimals)).toNumber()
|
return new BigNumber(number).div(BIG_TEN.pow(decimals)).toNumber()
|
||||||
}
|
}
|
||||||
|
export const formatTimeNumber = (number: BigNumber | number | string, decimals = 18) => {
|
||||||
|
return new BigNumber(number).times(BIG_TEN.pow(decimals)).toNumber()
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import dayjs from 'dayjs'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
|
import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
|
||||||
|
import './quill.snow.css'
|
||||||
|
|
||||||
interface ListProps {
|
interface ListProps {
|
||||||
title?: string
|
title?: string
|
||||||
|
|
@ -13,10 +14,12 @@ interface ListProps {
|
||||||
|
|
||||||
const DetailDiv = styled.div`
|
const DetailDiv = styled.div`
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
max-height: 85vh;
|
||||||
background: rgba(255, 255, 255);
|
background: rgba(255, 255, 255);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
margin-top: 30px;
|
||||||
padding: 40px 30px;
|
padding: 40px 30px;
|
||||||
`
|
`
|
||||||
const HeaderFlex = styled(Flex)`
|
const HeaderFlex = styled(Flex)`
|
||||||
|
|
@ -39,10 +42,14 @@ const TextTime = styled(Text)`
|
||||||
padding: 30px 0 20px 0;
|
padding: 30px 0 20px 0;
|
||||||
border-bottom: 1px solid #e3e3e3;
|
border-bottom: 1px solid #e3e3e3;
|
||||||
`
|
`
|
||||||
const TextInfo = styled(Text)`
|
const TextInfo = styled.span`
|
||||||
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
max-height: calc(85vh - 240px);
|
||||||
|
line-height: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
`
|
`
|
||||||
|
|
||||||
const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) => {
|
const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) => {
|
||||||
|
|
@ -59,7 +66,11 @@ const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) =>
|
||||||
</HeaderFlex>
|
</HeaderFlex>
|
||||||
<HeadingText scale="xl">{title}</HeadingText>
|
<HeadingText scale="xl">{title}</HeadingText>
|
||||||
<TextTime>{dayjs(publishTime).format('YYYY-MM-DD HH:mm')}</TextTime>
|
<TextTime>{dayjs(publishTime).format('YYYY-MM-DD HH:mm')}</TextTime>
|
||||||
<TextInfo>{content}</TextInfo>
|
{/* <TextInfo dangerouslySetInnerHTML={content} /> */}
|
||||||
|
|
||||||
|
<div className="ql-snow">
|
||||||
|
<TextInfo className="ql-editor" dangerouslySetInnerHTML={{ __html: content }} />
|
||||||
|
</div>
|
||||||
</DetailDiv>
|
</DetailDiv>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,945 @@
|
||||||
|
/*!
|
||||||
|
* Quill Editor v1.3.7
|
||||||
|
* https://quilljs.com/
|
||||||
|
* Copyright (c) 2014, Jason Chen
|
||||||
|
* Copyright (c) 2013, salesforce.com
|
||||||
|
*/
|
||||||
|
.ql-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ql-container.ql-disabled .ql-tooltip {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.ql-clipboard {
|
||||||
|
left: -100000px;
|
||||||
|
height: 1px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
.ql-clipboard p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.ql-editor {
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 1.42;
|
||||||
|
height: 100%;
|
||||||
|
outline: none;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 12px 15px;
|
||||||
|
tab-size: 4;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
.ql-editor > * {
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
.ql-editor p,
|
||||||
|
.ql-editor ol,
|
||||||
|
.ql-editor ul,
|
||||||
|
.ql-editor pre,
|
||||||
|
.ql-editor blockquote,
|
||||||
|
.ql-editor h1,
|
||||||
|
.ql-editor h2,
|
||||||
|
.ql-editor h3,
|
||||||
|
.ql-editor h4,
|
||||||
|
.ql-editor h5,
|
||||||
|
.ql-editor h6 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol,
|
||||||
|
.ql-editor ul {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor ol > li,
|
||||||
|
.ql-editor ul > li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.ql-editor ul > li::before {
|
||||||
|
content: '\2022';
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=true],
|
||||||
|
.ql-editor ul[data-checked=false] {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=true] > li *,
|
||||||
|
.ql-editor ul[data-checked=false] > li * {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=true] > li::before,
|
||||||
|
.ql-editor ul[data-checked=false] > li::before {
|
||||||
|
color: #777;
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=true] > li::before {
|
||||||
|
content: '\2611';
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=false] > li::before {
|
||||||
|
content: '\2610';
|
||||||
|
}
|
||||||
|
.ql-editor li::before {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 1.2em;
|
||||||
|
}
|
||||||
|
.ql-editor li:not(.ql-direction-rtl)::before {
|
||||||
|
margin-left: -1.5em;
|
||||||
|
margin-right: 0.3em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-direction-rtl::before {
|
||||||
|
margin-left: 0.3em;
|
||||||
|
margin-right: -1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor ol li:not(.ql-direction-rtl),
|
||||||
|
.ql-editor ul li:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-direction-rtl,
|
||||||
|
.ql-editor ul li.ql-direction-rtl {
|
||||||
|
padding-right: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor ol li {
|
||||||
|
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
counter-increment: list-0;
|
||||||
|
}
|
||||||
|
.ql-editor ol li:before {
|
||||||
|
content: counter(list-0, decimal) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-1 {
|
||||||
|
counter-increment: list-1;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-1:before {
|
||||||
|
content: counter(list-1, lower-alpha) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-1 {
|
||||||
|
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-2 {
|
||||||
|
counter-increment: list-2;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-2:before {
|
||||||
|
content: counter(list-2, lower-roman) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-2 {
|
||||||
|
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-3 {
|
||||||
|
counter-increment: list-3;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-3:before {
|
||||||
|
content: counter(list-3, decimal) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-3 {
|
||||||
|
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-4 {
|
||||||
|
counter-increment: list-4;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-4:before {
|
||||||
|
content: counter(list-4, lower-alpha) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-4 {
|
||||||
|
counter-reset: list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-5 {
|
||||||
|
counter-increment: list-5;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-5:before {
|
||||||
|
content: counter(list-5, lower-roman) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-5 {
|
||||||
|
counter-reset: list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-6 {
|
||||||
|
counter-increment: list-6;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-6:before {
|
||||||
|
content: counter(list-6, decimal) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-6 {
|
||||||
|
counter-reset: list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-7 {
|
||||||
|
counter-increment: list-7;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-7:before {
|
||||||
|
content: counter(list-7, lower-alpha) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-7 {
|
||||||
|
counter-reset: list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-8 {
|
||||||
|
counter-increment: list-8;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-8:before {
|
||||||
|
content: counter(list-8, lower-roman) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-8 {
|
||||||
|
counter-reset: list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-9 {
|
||||||
|
counter-increment: list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-9:before {
|
||||||
|
content: counter(list-9, decimal) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 3em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 4.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 3em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 4.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 6em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 7.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 6em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 7.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 9em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 10.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 9em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 10.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 12em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 13.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 12em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 13.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 15em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 16.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 15em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 16.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 18em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 19.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 18em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 19.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 21em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 22.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 21em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 22.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 24em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 25.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 24em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 25.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 27em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 28.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 27em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 28.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-video {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-video.ql-align-center {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-video.ql-align-right {
|
||||||
|
margin: 0 0 0 auto;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-black {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-red {
|
||||||
|
background-color: #e60000;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-orange {
|
||||||
|
background-color: #f90;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-yellow {
|
||||||
|
background-color: #ff0;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-green {
|
||||||
|
background-color: #008a00;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-blue {
|
||||||
|
background-color: #06c;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-purple {
|
||||||
|
background-color: #93f;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-white {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-red {
|
||||||
|
color: #e60000;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-orange {
|
||||||
|
color: #f90;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-yellow {
|
||||||
|
color: #ff0;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-green {
|
||||||
|
color: #008a00;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-blue {
|
||||||
|
color: #06c;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-purple {
|
||||||
|
color: #93f;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-font-serif {
|
||||||
|
font-family: Georgia, Times New Roman, serif;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-font-monospace {
|
||||||
|
font-family: Monaco, Courier New, monospace;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-size-small {
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-size-large {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-size-huge {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-direction-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-align-justify {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.ql-editor.ql-blank::before {
|
||||||
|
color: rgba(0,0,0,0.6);
|
||||||
|
content: attr(data-placeholder);
|
||||||
|
font-style: italic;
|
||||||
|
left: 15px;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar:after,
|
||||||
|
.ql-snow .ql-toolbar:after {
|
||||||
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button,
|
||||||
|
.ql-snow .ql-toolbar button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
height: 24px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
width: 28px;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button svg,
|
||||||
|
.ql-snow .ql-toolbar button svg {
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:active:hover,
|
||||||
|
.ql-snow .ql-toolbar button:active:hover {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar input.ql-image[type=file],
|
||||||
|
.ql-snow .ql-toolbar input.ql-image[type=file] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover,
|
||||||
|
.ql-snow .ql-toolbar button:hover,
|
||||||
|
.ql-snow.ql-toolbar button:focus,
|
||||||
|
.ql-snow .ql-toolbar button:focus,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
|
||||||
|
color: #06c;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:hover .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button:focus .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:focus .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
|
||||||
|
fill: #06c;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar button:hover .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar button:focus .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar button:focus .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
|
||||||
|
stroke: #06c;
|
||||||
|
}
|
||||||
|
@media (pointer: coarse) {
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active),
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
|
||||||
|
fill: #444;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
|
||||||
|
stroke: #444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ql-snow {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.ql-snow * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-out-bottom,
|
||||||
|
.ql-snow .ql-out-top {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip.ql-flip {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
.ql-snow .ql-formats {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-formats:after {
|
||||||
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-stroke {
|
||||||
|
fill: none;
|
||||||
|
stroke: #444;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-stroke-miter {
|
||||||
|
fill: none;
|
||||||
|
stroke: #444;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-fill,
|
||||||
|
.ql-snow .ql-stroke.ql-fill {
|
||||||
|
fill: #444;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-empty {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-even {
|
||||||
|
fill-rule: evenodd;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-thin,
|
||||||
|
.ql-snow .ql-stroke.ql-thin {
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-transparent {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-direction svg:last-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-direction.ql-active svg:last-child {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-direction.ql-active svg:first-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h3 {
|
||||||
|
font-size: 1.17em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h4 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h5 {
|
||||||
|
font-size: 0.83em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h6 {
|
||||||
|
font-size: 0.67em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor blockquote {
|
||||||
|
border-left: 4px solid #ccc;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor code,
|
||||||
|
.ql-snow .ql-editor pre {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor code {
|
||||||
|
font-size: 85%;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor pre.ql-syntax {
|
||||||
|
background-color: #23241f;
|
||||||
|
color: #f8f8f2;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker {
|
||||||
|
color: #444;
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
height: 24px;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker-label {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 2px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker-label::before {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker-options {
|
||||||
|
background-color: #fff;
|
||||||
|
display: none;
|
||||||
|
min-width: 100%;
|
||||||
|
padding: 4px 8px;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker-options .ql-picker-item {
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
|
||||||
|
color: #ccc;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
|
||||||
|
fill: #ccc;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
|
||||||
|
stroke: #ccc;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
||||||
|
display: block;
|
||||||
|
margin-top: -1px;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker,
|
||||||
|
.ql-snow .ql-icon-picker {
|
||||||
|
width: 28px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker .ql-picker-label,
|
||||||
|
.ql-snow .ql-icon-picker .ql-picker-label {
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker .ql-picker-label svg,
|
||||||
|
.ql-snow .ql-icon-picker .ql-picker-label svg {
|
||||||
|
right: 4px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-icon-picker .ql-picker-options {
|
||||||
|
padding: 4px 0px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-icon-picker .ql-picker-item {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker .ql-picker-options {
|
||||||
|
padding: 3px 5px;
|
||||||
|
width: 152px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker .ql-picker-item {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
float: left;
|
||||||
|
height: 16px;
|
||||||
|
margin: 2px;
|
||||||
|
padding: 0px;
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -9px;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
|
||||||
|
content: attr(data-label);
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header {
|
||||||
|
width: 98px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||||
|
content: 'Normal';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||||
|
content: 'Heading 1';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||||
|
content: 'Heading 2';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||||
|
content: 'Heading 3';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||||
|
content: 'Heading 4';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||||
|
content: 'Heading 5';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||||
|
content: 'Heading 6';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||||
|
font-size: 1.17em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||||
|
font-size: 0.83em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||||
|
font-size: 0.67em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font {
|
||||||
|
width: 108px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||||
|
content: 'Sans Serif';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
|
||||||
|
content: 'Serif';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
|
||||||
|
content: 'Monospace';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
|
||||||
|
font-family: Georgia, Times New Roman, serif;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
|
||||||
|
font-family: Monaco, Courier New, monospace;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size {
|
||||||
|
width: 98px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||||
|
content: 'Normal';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
|
||||||
|
content: 'Small';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
|
||||||
|
content: 'Large';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
|
||||||
|
content: 'Huge';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-formats {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-picker-label {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-picker-options {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
|
||||||
|
border-color: #ccc;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
||||||
|
border-color: #ccc;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
|
||||||
|
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
|
||||||
|
border-color: #000;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow + .ql-container.ql-snow {
|
||||||
|
border-top: 0px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-shadow: 0px 0px 5px #ddd;
|
||||||
|
color: #444;
|
||||||
|
padding: 5px 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip::before {
|
||||||
|
content: "Visit URL:";
|
||||||
|
line-height: 26px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip input[type=text] {
|
||||||
|
display: none;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 26px;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
width: 170px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a.ql-preview {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 200px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a.ql-action::after {
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
content: 'Edit';
|
||||||
|
margin-left: 16px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a.ql-remove::before {
|
||||||
|
content: 'Remove';
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
|
||||||
|
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip.ql-editing input[type=text] {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||||
|
border-right: 0px;
|
||||||
|
content: 'Save';
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip[data-mode=link]::before {
|
||||||
|
content: "Enter link:";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip[data-mode=formula]::before {
|
||||||
|
content: "Enter formula:";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip[data-mode=video]::before {
|
||||||
|
content: "Enter video:";
|
||||||
|
}
|
||||||
|
.ql-snow a {
|
||||||
|
color: #06c;
|
||||||
|
}
|
||||||
|
.ql-container.ql-snow {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState, useEffect, useMemo, useRef } from 'react'
|
import React, { useState, useEffect, useMemo, useRef } from 'react'
|
||||||
|
import Pagination from '@mui/material/Pagination'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
// import Container from 'components/Layout/Container'
|
// import Container from 'components/Layout/Container'
|
||||||
|
|
@ -16,9 +17,10 @@ const ContainerMain = styled.div`
|
||||||
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
||||||
`
|
`
|
||||||
const MainDiv = styled.div`
|
const MainDiv = styled.div`
|
||||||
|
padding: 20px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: calc(100vh - 64px);
|
min-height: calc(100vh - 64px);
|
||||||
box-sizing: border-box;
|
/* box-sizing: border-box; */
|
||||||
`
|
`
|
||||||
const TableDiv = styled.div`
|
const TableDiv = styled.div`
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|
@ -126,39 +128,26 @@ const Announcement: React.FC = () => {
|
||||||
const [searchTitle, setSearchTitle] = useState('')
|
const [searchTitle, setSearchTitle] = useState('')
|
||||||
const [detailVisible, setDetailVisible] = useState(false)
|
const [detailVisible, setDetailVisible] = useState(false)
|
||||||
const [list, setList] = useState([])
|
const [list, setList] = useState([])
|
||||||
const [totalVisible, setTotalVisible] = useState(false)
|
|
||||||
const [detailData, setDetailData] = useState<DetailProps>({ title: '', publishTime: 0, content: '' })
|
const [detailData, setDetailData] = useState<DetailProps>({ title: '', publishTime: 0, content: '' })
|
||||||
|
const [count, setCount] = useState(undefined)
|
||||||
const getList = async (page: number, size: number, title?: string, type?: string) => {
|
const getList = async (page: number, size: number, title?: string, type?: string) => {
|
||||||
if (totalVisible) return
|
|
||||||
if (type) {
|
|
||||||
setList([])
|
|
||||||
}
|
|
||||||
const data = await getAnnouncementPage({ page, size, title })
|
const data = await getAnnouncementPage({ page, size, title })
|
||||||
const dataList = type ? data.content : [...list, ...data.content]
|
setCount(getTotalPageNum(data.total, data.size))
|
||||||
setList(dataList)
|
setList(data.content)
|
||||||
if (data.content.length === 0 || !data.content) {
|
|
||||||
setTotalVisible(true)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
const onScrollCapture = () => {
|
* [getTotalPageNum 获取页码总数]
|
||||||
const innerHeight = window.innerHeight
|
* @param {[type]} totalRecord [总记录]
|
||||||
const screenH = Math.ceil(innerHeight + window.scrollY)
|
* @param {[type]} pageSize [每页记录条数]
|
||||||
const eleH = document.documentElement.offsetHeight
|
* @return {[type]} [总页码数据]
|
||||||
if (screenH >= eleH) {
|
*/
|
||||||
setPage(pageNum + 1)
|
const getTotalPageNum = (total, pageSize) => {
|
||||||
}
|
const countTotal = ((Number(total) + Number(pageSize) - 1) / Number(pageSize)).toString()
|
||||||
|
return parseInt(countTotal)
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!totalVisible) {
|
getList(pageNum, 10, searchTitle)
|
||||||
window.addEventListener('scroll', onScrollCapture)
|
}, [])
|
||||||
getList(pageNum, 10, searchTitle)
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('scroll', onScrollCapture)
|
|
||||||
}
|
|
||||||
}, [pageNum])
|
|
||||||
|
|
||||||
const lookDetail = async (id) => {
|
const lookDetail = async (id) => {
|
||||||
const data = await getAnnouncementDetail(id)
|
const data = await getAnnouncementDetail(id)
|
||||||
|
|
@ -167,7 +156,7 @@ const Announcement: React.FC = () => {
|
||||||
}
|
}
|
||||||
const searchList = () => {
|
const searchList = () => {
|
||||||
setList([])
|
setList([])
|
||||||
setTotalVisible(false)
|
// setTotalVisible(false)
|
||||||
getList(1, 10, searchTitle, 'search')
|
getList(1, 10, searchTitle, 'search')
|
||||||
}
|
}
|
||||||
const close = () => {
|
const close = () => {
|
||||||
|
|
@ -179,7 +168,7 @@ const Announcement: React.FC = () => {
|
||||||
<div>
|
<div>
|
||||||
{list.map((item) => (
|
{list.map((item) => (
|
||||||
<Text key={item.id} onClick={() => lookDetail(item.id)}>
|
<Text key={item.id} onClick={() => lookDetail(item.id)}>
|
||||||
<ListItem title={item.title} publishTime={item.publishTime} content={item.content} top={item.top} />
|
<ListItem title={item.title} publishTime={item.publishTime} content={item.overview} top={item.top} />
|
||||||
</Text>
|
</Text>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -189,9 +178,15 @@ const Announcement: React.FC = () => {
|
||||||
const { value: inputValue } = evt.target
|
const { value: inputValue } = evt.target
|
||||||
setSearchTitle(inputValue)
|
setSearchTitle(inputValue)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const pageChange = (event, page) => {
|
||||||
|
setPage(page)
|
||||||
|
getList(page, 10, searchTitle)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ContainerMain>
|
<ContainerMain>
|
||||||
<MainDiv ref={loadMoreRef as any} onScrollCapture={onScrollCapture}>
|
<MainDiv>
|
||||||
{detailVisible ? (
|
{detailVisible ? (
|
||||||
<Detail
|
<Detail
|
||||||
title={detailData.title}
|
title={detailData.title}
|
||||||
|
|
@ -211,14 +206,9 @@ const Announcement: React.FC = () => {
|
||||||
</SearchDiv>
|
</SearchDiv>
|
||||||
<ListMain>
|
<ListMain>
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
{totalVisible ? <TextAll>{t('Loaded all')}</TextAll> : ''}
|
<Flex justifyContent="center" padding={10}>
|
||||||
|
<Pagination count={count} onChange={pageChange} page={pageNum} />
|
||||||
{/* <div ref={loadMoreRef} /> */}
|
</Flex>
|
||||||
{/* {list.map((item) => (
|
|
||||||
<Text key={item.id} onClick={() => lookDetail(item.id)}>
|
|
||||||
<ListItem title={item.title} publishTime={item.publishTime} content={item.content} />
|
|
||||||
</Text>
|
|
||||||
))} */}
|
|
||||||
</ListMain>
|
</ListMain>
|
||||||
</TableDiv>
|
</TableDiv>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, Flex } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
interface AuctionRecordProps {
|
||||||
|
onDismiss?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
width: 70%;
|
||||||
|
height: 658px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
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;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 35px;
|
||||||
|
padding-left: 30px;
|
||||||
|
& > .active {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 128px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
margin-top: 30px;
|
||||||
|
height: 56px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 16.6%;
|
||||||
|
height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
/* height: 80px; */
|
||||||
|
padding: 10px 0;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 16.6%;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
const TdImage = styled(Image)`
|
||||||
|
margin-right: 20px;
|
||||||
|
`
|
||||||
|
const TdBtnFlex = styled(Flex)`
|
||||||
|
width: 16.6%;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const DetailButton = styled(Button)`
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
`
|
||||||
|
const HashText = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-bottom: 1px solid #1fc7d4;
|
||||||
|
`
|
||||||
|
|
||||||
|
const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const typeList = [
|
||||||
|
{ label: t('All transactions'), value: '1' },
|
||||||
|
{ label: t('I released'), value: '2' },
|
||||||
|
{ label: t('I participate in'), value: '3' },
|
||||||
|
]
|
||||||
|
const [typeIndex, setTypeIndex] = useState(0)
|
||||||
|
|
||||||
|
const ThemedList = [
|
||||||
|
t('NFT name'),
|
||||||
|
t('starting price'),
|
||||||
|
t('The latest offer'),
|
||||||
|
t('Offer the time'),
|
||||||
|
t('state'),
|
||||||
|
t('operation'),
|
||||||
|
]
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
name: 'Cat goddess Emerald ',
|
||||||
|
icon: '',
|
||||||
|
price: '1',
|
||||||
|
newPrice: '2',
|
||||||
|
time: '2022-02-02',
|
||||||
|
status: '已售卖',
|
||||||
|
id: '1',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
|
||||||
|
<HeaderText>{t('Auctions a record')}</HeaderText>
|
||||||
|
<TypeFlex>
|
||||||
|
{typeList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<TypeItem
|
||||||
|
key={item.value}
|
||||||
|
className={index === typeIndex ? 'active' : ''}
|
||||||
|
onClick={() => setTypeIndex(index)}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</TypeItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TypeFlex>
|
||||||
|
<>
|
||||||
|
<TableThemed>
|
||||||
|
{ThemedList.map((item) => {
|
||||||
|
return <ThemedItem key={item}>{item}</ThemedItem>
|
||||||
|
})}
|
||||||
|
</TableThemed>
|
||||||
|
<TableBody>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<TrFlex key={item.id}>
|
||||||
|
<TdFlex>
|
||||||
|
<TdImage src="/images/nft/epic-icon.svg" width={24} height={40} />
|
||||||
|
{item.name}
|
||||||
|
</TdFlex>
|
||||||
|
<TdFlex>{item.price}</TdFlex>
|
||||||
|
<TdFlex>{item.newPrice}</TdFlex>
|
||||||
|
<TdFlex>{item.time}</TdFlex>
|
||||||
|
<TdFlex>{item.status}</TdFlex>
|
||||||
|
<TdBtnFlex>
|
||||||
|
<DetailButton>{t('Detail')}</DetailButton>
|
||||||
|
<HashText>{t('deal Hash')}</HashText>
|
||||||
|
</TdBtnFlex>
|
||||||
|
</TrFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuctionRecord
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, Flex } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 34px 30px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
`
|
||||||
|
const DetailText = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const AuctionRule: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<HeaderText>{t('Auction rule')}</HeaderText>
|
||||||
|
<DetailText>
|
||||||
|
{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>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuctionRule
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Flex } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
margin-top: 30px;
|
||||||
|
height: 405px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
|
||||||
|
const AuctionTable: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const ThemedList = [t('The wallet address'), 'HASH', t('auction price'), t('The auction time'), t('state')]
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
name: 'Cat goddess Emerald ',
|
||||||
|
icon: '',
|
||||||
|
price: '1',
|
||||||
|
newPrice: '2',
|
||||||
|
time: '2022-02-02',
|
||||||
|
status: '已售卖',
|
||||||
|
id: '1',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<HeaderText>{t('Auctions a record')}</HeaderText>
|
||||||
|
<>
|
||||||
|
<TableThemed>
|
||||||
|
{ThemedList.map((item) => {
|
||||||
|
return <ThemedItem key={item}>{item}</ThemedItem>
|
||||||
|
})}
|
||||||
|
</TableThemed>
|
||||||
|
<TableBody>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<TrFlex key={item.id}>
|
||||||
|
<TdFlex>{item.name}</TdFlex>
|
||||||
|
<TdFlex>{item.price}</TdFlex>
|
||||||
|
<TdFlex>{item.newPrice}</TdFlex>
|
||||||
|
<TdFlex>{item.time}</TdFlex>
|
||||||
|
<TdFlex>{item.status}</TdFlex>
|
||||||
|
</TrFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuctionTable
|
||||||
|
|
@ -0,0 +1,325 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
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 { useGetOfficialPage } from '../hooks'
|
||||||
|
import HeaderOperation from './HeaderOperation'
|
||||||
|
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;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
width: 330px;
|
||||||
|
height: 40px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
& > .active {
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(180deg, #7be0fc 0%, #9961f0 100%);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 110px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 30px;
|
||||||
|
`
|
||||||
|
const StatusFlex = styled(Flex)`
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 30px;
|
||||||
|
`
|
||||||
|
const StatusFlexContent = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
& > .statusActive {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const StatusFlexItem = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 104px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const SearchDiv = styled(Flex)`
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 270px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 30px 0 35px 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
const InputMain = styled(Flex)`
|
||||||
|
width: 100%;
|
||||||
|
height: 45px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 4px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SearchInput = styled(Input)`
|
||||||
|
background-color: transparent;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
:focus {
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const SearchBtn = styled.div`
|
||||||
|
width: 50px;
|
||||||
|
height: 37px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 19px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SelectFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const SelectMain = styled(Flex)`
|
||||||
|
z-index: 999;
|
||||||
|
width: 120px;
|
||||||
|
`
|
||||||
|
const SelectText = styled(Text)`
|
||||||
|
font-size: 16px;
|
||||||
|
width: 120px;
|
||||||
|
color: #666666;
|
||||||
|
margin-left: 4px;
|
||||||
|
`
|
||||||
|
const FlexOption = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 999;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Content: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [detailVisible, setDetailVisible] = useState(false)
|
||||||
|
const typeList = [
|
||||||
|
{ label: t('All'), type: 1 },
|
||||||
|
{ label: t('bazaar'), type: 2 },
|
||||||
|
{ label: t('auction'), type: 3 },
|
||||||
|
]
|
||||||
|
const [typeIndex, setTypeIndex] = useState(0)
|
||||||
|
const auctionList = [
|
||||||
|
{ label: t('In the auction'), value: '0' },
|
||||||
|
{ label: t('traded'), value: '1' },
|
||||||
|
]
|
||||||
|
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('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 [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' },
|
||||||
|
]
|
||||||
|
const [statusIndex, setStatusIndex] = useState(0)
|
||||||
|
|
||||||
|
const [pageNum, setPage] = useState(1)
|
||||||
|
|
||||||
|
const [count, setCount] = useState(undefined)
|
||||||
|
|
||||||
|
const getOfficialPage = useGetOfficialPage()
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const params = {
|
||||||
|
page: pageNum,
|
||||||
|
size: 10,
|
||||||
|
}
|
||||||
|
const data = await getOfficialPage(params)
|
||||||
|
const arr = []
|
||||||
|
data.content.forEach((item) => {
|
||||||
|
const obj = item
|
||||||
|
obj.priceList = []
|
||||||
|
Object.keys(obj.price).forEach((childItem) => {
|
||||||
|
obj.priceList.push({ label: childItem, value: obj.price[childItem] })
|
||||||
|
})
|
||||||
|
obj.price = undefined
|
||||||
|
arr.push(obj)
|
||||||
|
})
|
||||||
|
setList(arr)
|
||||||
|
setCount(getTotalPageNum(data.total, data.size))
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getData()
|
||||||
|
}, [pageNum])
|
||||||
|
|
||||||
|
const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const { value } = evt.target
|
||||||
|
setSearchTitle(value)
|
||||||
|
}
|
||||||
|
const searchList = () => {
|
||||||
|
console.log('search')
|
||||||
|
}
|
||||||
|
const showDetail = () => {
|
||||||
|
setDetailVisible(!detailVisible)
|
||||||
|
}
|
||||||
|
const pageChange = (e, page) => {
|
||||||
|
setPage(page)
|
||||||
|
}
|
||||||
|
const getTotalPageNum = (total, pageSize) => {
|
||||||
|
const countTotal = ((Number(total) + Number(pageSize) - 1) / Number(pageSize)).toString()
|
||||||
|
return parseInt(countTotal)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{detailVisible && <ShopDetail close={showDetail} />}
|
||||||
|
|
||||||
|
{!detailVisible && (
|
||||||
|
<>
|
||||||
|
<HeaderFlex>
|
||||||
|
<TypeFlex>
|
||||||
|
{typeList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<TypeItem
|
||||||
|
key={item.type}
|
||||||
|
onClick={() => setTypeIndex(index)}
|
||||||
|
className={typeIndex === index ? 'active' : ''}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</TypeItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TypeFlex>
|
||||||
|
|
||||||
|
<HeaderOperation activeIndex={typeIndex} />
|
||||||
|
</HeaderFlex>
|
||||||
|
<Transaction />
|
||||||
|
<StatusFlex>
|
||||||
|
<StatusFlexContent>
|
||||||
|
{statusList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<StatusFlexItem
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => setStatusIndex(index)}
|
||||||
|
className={statusIndex === index ? 'statusActive' : ''}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</StatusFlexItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</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>
|
||||||
|
<SelectMain>
|
||||||
|
<Dropdown
|
||||||
|
position="bottom"
|
||||||
|
target={
|
||||||
|
<SelectFlex>
|
||||||
|
<Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
|
||||||
|
<SelectText>{priceSelect.label}</SelectText>
|
||||||
|
</SelectFlex>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{newPrice.map((item) => {
|
||||||
|
return (
|
||||||
|
<FlexOption key={item.value} onClick={() => setPriceSelect(item)}>
|
||||||
|
{item.label}
|
||||||
|
</FlexOption>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Dropdown>
|
||||||
|
</SelectMain>
|
||||||
|
</Flex>
|
||||||
|
</StatusFlex>
|
||||||
|
<SearchDiv>
|
||||||
|
<InputMain>
|
||||||
|
<SearchInput placeholder={t('Enter a keyword search')} value={searchTitle} onChange={handleChange} />
|
||||||
|
<SearchBtn onClick={searchList}>
|
||||||
|
<Image src="/images/announcement/search-icon.svg" alt="" width={16} height={16} />
|
||||||
|
</SearchBtn>
|
||||||
|
</InputMain>
|
||||||
|
</SearchDiv>
|
||||||
|
<ContentShop list={list} getDetail={showDetail} />
|
||||||
|
<Flex justifyContent="center" padding={10}>
|
||||||
|
<Pagination count={count} onChange={pageChange} page={pageNum} />
|
||||||
|
</Flex>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Content
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { formatTimeNumber } from 'utils/formatBalance'
|
||||||
|
import { Flex, Text, Image } from '@pancakeswap/uikit'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
import { TOKEN_SYMBOL } from 'config/index'
|
||||||
|
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
|
||||||
|
interface ContentShop {
|
||||||
|
list?: ListProps[]
|
||||||
|
getDetail?: () => 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;
|
||||||
|
gap: 18px;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
margin: 0px auto;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ShopFlex = styled(Flex)`
|
||||||
|
flex-direction: column;
|
||||||
|
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: 10px 0 14px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
border-bottom: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const ShopFooter = styled(Flex)`
|
||||||
|
padding: 15px;
|
||||||
|
justify-content: space-between;
|
||||||
|
`
|
||||||
|
const FooterLabel = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999999;
|
||||||
|
`
|
||||||
|
const FooterValue = styled(Text)`
|
||||||
|
width: 40%;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ContentShop: React.FC<ContentShop> = ({ list, getDetail }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const showDetail = () => {
|
||||||
|
getDetail()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ShopMain>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<ShopFlex key={item.id} onClick={showDetail}>
|
||||||
|
<ShopList
|
||||||
|
item={item}
|
||||||
|
width={278}
|
||||||
|
height={280}
|
||||||
|
img={item.coverResource.url}
|
||||||
|
grade={item.grade}
|
||||||
|
borderRadius="20px 20px 0 0"
|
||||||
|
/>
|
||||||
|
<ShopName>{item.name}</ShopName>
|
||||||
|
<ShopFooter>
|
||||||
|
<FooterLabel>{t('trading value')}</FooterLabel>
|
||||||
|
<FooterValue>
|
||||||
|
{item.priceList.map((childItem, index) => {
|
||||||
|
return (
|
||||||
|
<Flex alignItems="center" flexWrap="wrap" key={childItem.label}>
|
||||||
|
{/* <>{formatTimeNumber(childItem.value)}</> */}
|
||||||
|
<>{Number(childItem.value).toFixed(2)}</>
|
||||||
|
<Text color="text">{childItem.label}</Text>
|
||||||
|
{index === 0 && item.priceList.length === 2 && <Text marginLeft="10px">-</Text>}
|
||||||
|
</Flex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</FooterValue>
|
||||||
|
</ShopFooter>
|
||||||
|
</ShopFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ShopMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ContentShop
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Flex, Text, Link } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
interface FlexProps {
|
||||||
|
name: string
|
||||||
|
value: string
|
||||||
|
paddings?: string
|
||||||
|
leftColor?: string
|
||||||
|
rightColor?: string
|
||||||
|
typeLink?: string
|
||||||
|
size?: string
|
||||||
|
textColor?: string
|
||||||
|
rightSize?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexDiv = styled(Flex)`
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 14px;
|
||||||
|
`
|
||||||
|
const TextLink = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const FlexCom: React.FC<FlexProps> = ({
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
paddings = '0px',
|
||||||
|
leftColor = '#666666',
|
||||||
|
rightColor = 'textSubtle',
|
||||||
|
typeLink,
|
||||||
|
size = '14px',
|
||||||
|
textColor = '#666666',
|
||||||
|
rightSize = '14px',
|
||||||
|
}) => {
|
||||||
|
const openPage = () => {
|
||||||
|
window.open(typeLink)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexDiv style={{ padding: paddings }}>
|
||||||
|
<Text style={{ fontSize: size, color: leftColor }}>{name}</Text>
|
||||||
|
{typeLink ? (
|
||||||
|
<TextLink
|
||||||
|
color={rightColor}
|
||||||
|
style={{ color: textColor, borderBottom: `1px solid ${textColor}` }}
|
||||||
|
onClick={openPage}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</TextLink>
|
||||||
|
) : (
|
||||||
|
<Text style={{ color: textColor, fontSize: rightSize }}>{value}</Text>
|
||||||
|
)}
|
||||||
|
</FlexDiv>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default FlexCom
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Button, Text, Input, Image, useModal, Dropdown } from '@pancakeswap/uikit'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
|
||||||
|
import TransactionRecord from './TransactionRecord'
|
||||||
|
import AuctionRecord from './AuctionRecord'
|
||||||
|
import SellModal from './SellModal'
|
||||||
|
|
||||||
|
interface HeaderOperationProps {
|
||||||
|
activeIndex?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeaderButton = styled(Button)`
|
||||||
|
width: 110px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const HeaderOperation: React.FC<HeaderOperationProps> = ({ activeIndex }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const [onTransactionRecord] = useModal(<TransactionRecord />)
|
||||||
|
const [onAuctionRecord] = useModal(<AuctionRecord />)
|
||||||
|
const [onSellModal] = useModal(<SellModal />)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flex alignContent="center">
|
||||||
|
<HeaderButton onClick={onSellModal}>{t('I sell')}</HeaderButton>
|
||||||
|
{/* 当顶部切换选中的是全部和市场则显示交易记录，选中拍卖时展示拍卖纪录 */}
|
||||||
|
{activeIndex === 2 ? (
|
||||||
|
<HeaderButton onClick={onAuctionRecord}>{t('Auctions a record')}</HeaderButton>
|
||||||
|
) : (
|
||||||
|
<HeaderButton onClick={onTransactionRecord}>{t('transaction record')}</HeaderButton>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default HeaderOperation
|
||||||
|
|
@ -0,0 +1,357 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, Input, Flex, Dropdown } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
import ShopModal from './ShopModal'
|
||||||
|
|
||||||
|
interface sellModalProps {
|
||||||
|
onDismiss?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
width: 70%;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
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;
|
||||||
|
`
|
||||||
|
const SelectFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 35px 100px 30px 100px;
|
||||||
|
border-bottom: 1px solid #e3e3e3;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const SellingWayFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 400px;
|
||||||
|
height: 35px;
|
||||||
|
background: #eeeaf4;
|
||||||
|
border: 1px solid #d7caec;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const WayFlex = styled(Flex)`
|
||||||
|
width: 400px;
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const FlexOption = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 400px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const SellInput = styled(Input)`
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 400px;
|
||||||
|
height: 35px;
|
||||||
|
background: #eeeaf4;
|
||||||
|
border: 1px solid #d7caec;
|
||||||
|
border-radius: 18px;
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const FlexPrice = styled(Flex)`
|
||||||
|
width: 500px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
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)`
|
||||||
|
width: 180px;
|
||||||
|
/* margin-right: 80px; */
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const FlexCoinOption = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 180px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const PriceWay = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 180px;
|
||||||
|
height: 35px;
|
||||||
|
background: #eeeaf4;
|
||||||
|
border: 1px solid #d7caec;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
`
|
||||||
|
const PriceInput = styled(Input)`
|
||||||
|
width: 180px;
|
||||||
|
height: 35px;
|
||||||
|
margin-top: 20px;
|
||||||
|
`
|
||||||
|
const AddButton = styled(Button)`
|
||||||
|
width: 140px;
|
||||||
|
height: 35px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
background-color: #fff;
|
||||||
|
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)`
|
||||||
|
/* min-height: 366px; */
|
||||||
|
padding: 30px 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const AddNftButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 21px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
`
|
||||||
|
const PriceImage = styled(Image)`
|
||||||
|
margin: 0 10px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const ShopFlex = styled(Flex)`
|
||||||
|
width: 278px;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
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;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0 0 20px 20px;
|
||||||
|
`
|
||||||
|
const ShopButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: 20px;
|
||||||
|
`
|
||||||
|
const SelectShopModal = styled(Flex)`
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(31, 11, 117, 0.39);
|
||||||
|
z-index: 999;
|
||||||
|
/* background-color: #7a6eaa; */
|
||||||
|
`
|
||||||
|
|
||||||
|
const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [tradingOnList, setTradingOnList] = useState([{ price: '', value: 'HCC', id: 1 }])
|
||||||
|
const [sellingWay, setSellingWay] = useState(undefined)
|
||||||
|
const [coin, setCoin] = useState({ label: 'HCC', value: 'HCC' })
|
||||||
|
const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 })
|
||||||
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
|
||||||
|
const coinList = [
|
||||||
|
{ label: 'HCC', value: 'HCC' },
|
||||||
|
{ label: 'USDT', value: 'USDT' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const SellingWayList = [
|
||||||
|
{ label: t('Auction'), value: '0' },
|
||||||
|
{ label: t('fixed price'), value: '1' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const selectTradingOn = (index, value) => {
|
||||||
|
tradingOnList[index].value = value
|
||||||
|
setTradingOnList([...tradingOnList])
|
||||||
|
}
|
||||||
|
const addTradingOn = () => {
|
||||||
|
tradingOnList.push({ price: '', value: 'HCC', id: 2 })
|
||||||
|
setTradingOnList([...tradingOnList])
|
||||||
|
}
|
||||||
|
const reduceTradingOn = () => {
|
||||||
|
tradingOnList.splice(1, 1)
|
||||||
|
setTradingOnList([...tradingOnList])
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSelectNft = () => {
|
||||||
|
setShowModal(!showModal)
|
||||||
|
}
|
||||||
|
const close = () => {
|
||||||
|
setShowModal(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
|
||||||
|
<HeaderText>{t('sell NFT')}</HeaderText>
|
||||||
|
<SelectFlex>
|
||||||
|
<WayFlex>
|
||||||
|
<Dropdown
|
||||||
|
position="bottom"
|
||||||
|
target={
|
||||||
|
<SellingWayFlex>
|
||||||
|
{sellingWay ? sellingWay.label : t('Selling way')}
|
||||||
|
<Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
|
||||||
|
</SellingWayFlex>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{SellingWayList.map((item) => {
|
||||||
|
return (
|
||||||
|
<FlexOption key={item.value} onClick={() => setSellingWay(item)}>
|
||||||
|
{item.label}
|
||||||
|
</FlexOption>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Dropdown>
|
||||||
|
{sellingWay?.value === '0' && <SellInput placeholder={t('Selling time')} />}
|
||||||
|
</WayFlex>
|
||||||
|
<FlexPrice>
|
||||||
|
<>
|
||||||
|
{tradingOnList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<TransactionMain key={item.id}>
|
||||||
|
<PriceItem>
|
||||||
|
<Dropdown
|
||||||
|
position="bottom"
|
||||||
|
target={
|
||||||
|
<PriceWay>
|
||||||
|
{item.value}
|
||||||
|
<Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
|
||||||
|
</PriceWay>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{coinList.map((coinItem) => {
|
||||||
|
return (
|
||||||
|
<FlexCoinOption key={coinItem.value} onClick={() => selectTradingOn(index, coinItem.value)}>
|
||||||
|
{coinItem.label}
|
||||||
|
</FlexCoinOption>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Dropdown>
|
||||||
|
<PriceInput placeholder={t('Please enter the amount')} />
|
||||||
|
</PriceItem>
|
||||||
|
{index === 0 && tradingOnList.length === 2 && (
|
||||||
|
<PriceImage src="/images/nft/add.svg" width={20} height={20} />
|
||||||
|
)}
|
||||||
|
{index === 1 && (
|
||||||
|
<PriceImage src="/images/nft/reduce.svg" width={20} height={20} onClick={reduceTradingOn} />
|
||||||
|
)}
|
||||||
|
</TransactionMain>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
{tradingOnList.length < 2 && <AddButton onClick={addTradingOn}>{t('Add as a trading pair')}</AddButton>}
|
||||||
|
</FlexPrice>
|
||||||
|
</SelectFlex>
|
||||||
|
<Shop>
|
||||||
|
{/* <AddNftButton>{t('add NFT)}</AddNftButton> */}
|
||||||
|
<ShopFlex>
|
||||||
|
<ShopList item={shopData} width={278} height={280} borderRadius="20px 20px 0 0" />
|
||||||
|
<ShopName>{shopData.label}</ShopName>
|
||||||
|
</ShopFlex>
|
||||||
|
<ShopButton>{t('Selling immediately')}</ShopButton>
|
||||||
|
<ShopButton onClick={onSelectNft}>{t('reselect NFT')}</ShopButton>
|
||||||
|
</Shop>
|
||||||
|
{showModal && (
|
||||||
|
<SelectShopModal>
|
||||||
|
<ShopModal close={close} />
|
||||||
|
</SelectShopModal>
|
||||||
|
)}
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SellModal
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
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 ShopList from './ShopList'
|
||||||
|
import FlexCom from './FlexCom'
|
||||||
|
import AuctionTable from './AuctionTable'
|
||||||
|
import TransactionTable from './TransactionTable'
|
||||||
|
import AuctionRule from './AuctionRule'
|
||||||
|
|
||||||
|
interface DetailProps {
|
||||||
|
close: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeaderFlex = styled(Flex)`
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const FirstText = styled(Text)`
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const ShopText = styled(Text)`
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const MainFlex = styled(Flex)`
|
||||||
|
margin-top: 36px;
|
||||||
|
padding: 30px;
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20px;
|
||||||
|
align-items: center;
|
||||||
|
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)`
|
||||||
|
width: 476px;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
const Detail = styled.div`
|
||||||
|
width: 614px;
|
||||||
|
min-height: 580px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgba(245, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 67, 70, 0.15);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px 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)`
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
`
|
||||||
|
const PriceButton = styled(Button)`
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 30px 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopDetail: React.FC<DetailProps> = ({ close }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 })
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<HeaderFlex>
|
||||||
|
<FirstText onClick={close}>{t('Bazaar')}</FirstText>
|
||||||
|
<ShopText> > Crumb 1</ShopText>
|
||||||
|
</HeaderFlex>
|
||||||
|
<MainFlex>
|
||||||
|
<ShopFlex>
|
||||||
|
<ShopList item={shopData} width={476} height={606} 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" />
|
||||||
|
<FlexCom
|
||||||
|
name={t('present price%price%', { price: '（HCC）=100U' })}
|
||||||
|
value="70.000.000"
|
||||||
|
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={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')} />
|
||||||
|
</Detail>
|
||||||
|
</MainFlex>
|
||||||
|
<AuctionTable />
|
||||||
|
<TransactionTable />
|
||||||
|
<AuctionRule />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopDetail
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Image } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
const MainFlex = styled.div`
|
||||||
|
& > .epicBcg {
|
||||||
|
background-color: #ffd7d7;
|
||||||
|
}
|
||||||
|
& > .legendBcg {
|
||||||
|
background-color: #d7d7ff;
|
||||||
|
}
|
||||||
|
& > .uncommonBcg {
|
||||||
|
background-color: #cdf7d2;
|
||||||
|
}
|
||||||
|
& > .commonBcg {
|
||||||
|
background-color: #daf0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopItem = styled(Flex)`
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
& > .ribbon {
|
||||||
|
width: 106px;
|
||||||
|
height: 108px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: -6px;
|
||||||
|
z-index: 10;
|
||||||
|
& > .ribbon1 {
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: relative;
|
||||||
|
padding: 2px 0;
|
||||||
|
left: -36px;
|
||||||
|
top: 14px;
|
||||||
|
width: 121px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
& > .epic {
|
||||||
|
background: linear-gradient(-90deg, #efea48 0%, #f32121 100%);
|
||||||
|
}
|
||||||
|
& > .legend {
|
||||||
|
background: linear-gradient(-90deg, #4b84f5 0%, #bc21f3 100%);
|
||||||
|
}
|
||||||
|
& > .uncommon {
|
||||||
|
background: linear-gradient(-90deg, #3dffec 0%, #24bf52 100%);
|
||||||
|
}
|
||||||
|
& > .common {
|
||||||
|
background: linear-gradient(-90deg, #b5e9f3 0%, #1195d9 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ItemText = styled(Flex)`
|
||||||
|
padding: 25px 0;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
interface ShopListItemProps {
|
||||||
|
item?: Detail
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
borderRadius?: string
|
||||||
|
grade?: string
|
||||||
|
img?: string
|
||||||
|
}
|
||||||
|
interface Detail {
|
||||||
|
label?: string
|
||||||
|
type?: number | string
|
||||||
|
id?: number | string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShopList: React.FC<ShopListItemProps> = ({
|
||||||
|
item,
|
||||||
|
width = 186,
|
||||||
|
height = 187,
|
||||||
|
borderRadius = '20px',
|
||||||
|
img,
|
||||||
|
grade,
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const getClassBcg = () => {
|
||||||
|
let bcg = ''
|
||||||
|
switch (grade) {
|
||||||
|
case 'EPIC':
|
||||||
|
bcg = 'epicBcg'
|
||||||
|
break
|
||||||
|
case 'LEGEND':
|
||||||
|
bcg = 'legendBcg'
|
||||||
|
break
|
||||||
|
case 'RARE':
|
||||||
|
bcg = 'uncommonBcg'
|
||||||
|
break
|
||||||
|
case 'NORMAL':
|
||||||
|
bcg = 'commonBcg'
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
bcg = 'epicBcg'
|
||||||
|
}
|
||||||
|
return bcg
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MainFlex>
|
||||||
|
<ShopItem className={getClassBcg()} style={{ borderRadius }}>
|
||||||
|
<div className="ribbon">
|
||||||
|
{grade === 'EPIC' && <div className="ribbon1 epic">{t('epic')}</div>}
|
||||||
|
{grade === 'LEGEND' && <div className="ribbon1 legend">{t('legend')}</div>}
|
||||||
|
{grade === 'RARE' && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
|
||||||
|
{grade === 'NORMAL' && <div className="ribbon1 common">{t('common')}</div>}
|
||||||
|
</div>
|
||||||
|
{/* {item.type === 1 && <Image src="/images/nft/epic-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 2 && <Image src="/images/nft/legend-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 3 && <Image src="/images/nft/uncommon-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 4 && <Image src="/images/nft/box.svg" width={width} height={height} />} */}
|
||||||
|
{img ? (
|
||||||
|
<Image src={img} width={width} height={height} />
|
||||||
|
) : (
|
||||||
|
<Image src="/images/nft/uncommon.svg" width={width} height={height} />
|
||||||
|
)}
|
||||||
|
</ShopItem>
|
||||||
|
</MainFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopList
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Text, Button } from '@pancakeswap/uikit'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
|
||||||
|
interface ShopProp {
|
||||||
|
name?: string | number
|
||||||
|
value?: string | number
|
||||||
|
onDismiss?: () => void
|
||||||
|
close: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Main = styled.div`
|
||||||
|
width: 60%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30px 15px;
|
||||||
|
border-radius: 30px;
|
||||||
|
/* height: 80%; */
|
||||||
|
z-index: 10;
|
||||||
|
`
|
||||||
|
const Shop = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
margin: 0px auto;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
box-sizing: border-box;
|
||||||
|
& > .active {
|
||||||
|
border: 3px solid #0deeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ShopFlex = styled(Flex)`
|
||||||
|
flex-direction: column;
|
||||||
|
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;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SelectFlex = styled(Flex)`
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 9;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
const SelectDiv = styled.div`
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background: #0deeff;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 1px;
|
||||||
|
margin-top: -1px;
|
||||||
|
`
|
||||||
|
const BtnFlex = styled(Flex)`
|
||||||
|
margin-top: 30px;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const AddButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 21px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
`
|
||||||
|
const OutButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 21px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss, close }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [list, setList] = useState([])
|
||||||
|
|
||||||
|
const pitchOn = (index) => {
|
||||||
|
const arr = []
|
||||||
|
list.forEach((item, i) => {
|
||||||
|
const obj = item
|
||||||
|
obj.select = i === index ? !obj.select : false
|
||||||
|
arr.push(obj)
|
||||||
|
})
|
||||||
|
setList([...arr])
|
||||||
|
}
|
||||||
|
const onClose = () => {
|
||||||
|
close()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setList([
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 1, select: true },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 2, id: 2, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 3, id: 3, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 4, id: 4, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 5, select: false },
|
||||||
|
])
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Main>
|
||||||
|
<Shop>
|
||||||
|
{list.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<ShopFlex key={item.id} onClick={() => pitchOn(index)} className={item.select ? 'active' : ''}>
|
||||||
|
<SelectFlex>{item.select && <SelectDiv />}</SelectFlex>
|
||||||
|
<ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
|
||||||
|
<ShopName>{item.label}</ShopName>
|
||||||
|
</ShopFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Shop>
|
||||||
|
<BtnFlex>
|
||||||
|
<AddButton>{t('add NFT')}</AddButton>
|
||||||
|
<OutButton onClick={onClose}>{t('Sign out')}</OutButton>
|
||||||
|
</BtnFlex>
|
||||||
|
</Main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopModal
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Text } from '@pancakeswap/uikit'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
|
||||||
|
const TransactionFlex = styled(Flex)`
|
||||||
|
margin-top: 30px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 13px;
|
||||||
|
padding: 30px 0px 40px 0px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TransactionItem = styled(Flex)`
|
||||||
|
width: 25%;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const TransactionItemNum = styled(Text)`
|
||||||
|
font-size: 38px;
|
||||||
|
color: #ffffff;
|
||||||
|
`
|
||||||
|
const TransactionItemLabel = styled(Text)`
|
||||||
|
font-size: 16px;
|
||||||
|
color: #e4f8f7;
|
||||||
|
`
|
||||||
|
const Separate = styled.div`
|
||||||
|
height: 44px;
|
||||||
|
border-right: 1px solid #e4f8f7;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const Transaction: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TransactionFlex>
|
||||||
|
<TransactionItem>
|
||||||
|
<TransactionItemNum>1.000000</TransactionItemNum>
|
||||||
|
<TransactionItemLabel>{t('The total volume')}</TransactionItemLabel>
|
||||||
|
</TransactionItem>
|
||||||
|
<Separate />
|
||||||
|
<TransactionItem>
|
||||||
|
<TransactionItemNum>1.000000</TransactionItemNum>
|
||||||
|
<TransactionItemLabel>{t('The total number of transactions')}</TransactionItemLabel>
|
||||||
|
</TransactionItem>
|
||||||
|
<Separate />
|
||||||
|
<TransactionItem>
|
||||||
|
<TransactionItemNum>1.000000</TransactionItemNum>
|
||||||
|
<TransactionItemLabel>{t('Total number of auctions')}</TransactionItemLabel>
|
||||||
|
</TransactionItem>
|
||||||
|
<Separate />
|
||||||
|
<TransactionItem>
|
||||||
|
<TransactionItemNum>1.000000</TransactionItemNum>
|
||||||
|
<TransactionItemLabel>{t('Total auction commission')}</TransactionItemLabel>
|
||||||
|
</TransactionItem>
|
||||||
|
</TransactionFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Transaction
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, Flex } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
interface TransactionRecordProps {
|
||||||
|
onDismiss?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
width: 70%;
|
||||||
|
height: 658px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
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;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 35px;
|
||||||
|
padding-left: 30px;
|
||||||
|
& > .active {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 128px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
margin-top: 30px;
|
||||||
|
height: 56px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 20%;
|
||||||
|
height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
padding: 10px 0;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 20%;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
const TdImage = styled(Image)`
|
||||||
|
margin-right: 20px;
|
||||||
|
`
|
||||||
|
const TdBtnFlex = styled(Flex)`
|
||||||
|
width: 20%;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const DetailButton = styled(Button)`
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
`
|
||||||
|
const HashText = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-bottom: 1px solid #1fc7d4;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const typeList = [
|
||||||
|
{ label: t('All transactions'), value: '1' },
|
||||||
|
{ label: t('on offer'), value: '2' },
|
||||||
|
{ label: t('be sold'), value: '3' },
|
||||||
|
{ label: t('have bought'), value: '4' },
|
||||||
|
]
|
||||||
|
const [typeIndex, setTypeIndex] = useState(0)
|
||||||
|
|
||||||
|
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: t('Has been selling'), id: '1' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
|
||||||
|
<HeaderText>{t('transaction record')}</HeaderText>
|
||||||
|
<TypeFlex>
|
||||||
|
{typeList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<TypeItem
|
||||||
|
key={item.value}
|
||||||
|
className={index === typeIndex ? 'active' : ''}
|
||||||
|
onClick={() => setTypeIndex(index)}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</TypeItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TypeFlex>
|
||||||
|
<>
|
||||||
|
<TableThemed>
|
||||||
|
{ThemedList.map((item) => {
|
||||||
|
return <ThemedItem key={item}>{item}</ThemedItem>
|
||||||
|
})}
|
||||||
|
</TableThemed>
|
||||||
|
<TableBody>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<TrFlex key={item.id}>
|
||||||
|
<TdFlex>
|
||||||
|
<TdImage src="/images/nft/epic-icon.svg" width={24} height={40} />
|
||||||
|
{item.name}
|
||||||
|
</TdFlex>
|
||||||
|
<TdFlex>{item.price}</TdFlex>
|
||||||
|
<TdFlex>{item.time}</TdFlex>
|
||||||
|
<TdFlex>{item.status}</TdFlex>
|
||||||
|
<TdBtnFlex>
|
||||||
|
<DetailButton>{t('Detail')}</DetailButton>
|
||||||
|
<HashText>{t('deal Hash')}</HashText>
|
||||||
|
</TdBtnFlex>
|
||||||
|
</TrFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TransactionRecord
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Flex } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
margin-top: 30px;
|
||||||
|
height: 405px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TransactionTable: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const ThemedList = [t('incident'), t('unit price'), t('seller'), t('purchaser'), t('trading hour')]
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
name: 'Cat goddess Emerald ',
|
||||||
|
icon: '',
|
||||||
|
price: '1',
|
||||||
|
newPrice: '2',
|
||||||
|
time: '2022-02-02',
|
||||||
|
status: '已售卖',
|
||||||
|
id: '1',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<HeaderText>{t('Transaction history')}</HeaderText>
|
||||||
|
<>
|
||||||
|
<TableThemed>
|
||||||
|
{ThemedList.map((item) => {
|
||||||
|
return <ThemedItem key={item}>{item}</ThemedItem>
|
||||||
|
})}
|
||||||
|
</TableThemed>
|
||||||
|
<TableBody>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<TrFlex key={item.id}>
|
||||||
|
<TdFlex>{item.name}</TdFlex>
|
||||||
|
<TdFlex>{item.price}</TdFlex>
|
||||||
|
<TdFlex>{item.newPrice}</TdFlex>
|
||||||
|
<TdFlex>{item.time}</TdFlex>
|
||||||
|
<TdFlex>{item.status}</TdFlex>
|
||||||
|
</TrFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TransactionTable
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { useCallback } from 'react'
|
||||||
|
import { getOfficialPage } from 'services/bazaar'
|
||||||
|
|
||||||
|
export const useGetOfficialPage = () => {
|
||||||
|
const data = async (params) => {
|
||||||
|
const result = await getOfficialPage(params)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useGetOfficialPage
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import Page from 'components/Layout/Page'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
import { UnOpenModel } from 'components/Modal'
|
||||||
|
import Content from './components/Content'
|
||||||
|
|
||||||
|
const PageContent = styled.div`
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
background-image: url('/images/home/bg.svg');
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
/* background-image: url('/images/page/bazaar.jpg');
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: 50% 90%;
|
||||||
|
background-repeat: no-repeat; */
|
||||||
|
`
|
||||||
|
|
||||||
|
const Bazaar: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<PageContent>
|
||||||
|
<Page>
|
||||||
|
<Content />
|
||||||
|
</Page>
|
||||||
|
{/* <UnOpenModel /> */}
|
||||||
|
</PageContent>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Bazaar
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Flex, Text } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
interface FlexProp {
|
||||||
|
name?: string | number
|
||||||
|
value?: string | number
|
||||||
|
}
|
||||||
|
|
||||||
|
const MainFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 0 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const FlexText: React.FC<FlexProp> = ({ name, value }) => {
|
||||||
|
return (
|
||||||
|
<MainFlex>
|
||||||
|
<Text color="#6B6472" fontSize="18px">
|
||||||
|
{name}：
|
||||||
|
</Text>
|
||||||
|
<Text color="#1FC7D4" fontSize="18px">
|
||||||
|
{value}
|
||||||
|
</Text>
|
||||||
|
</MainFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default FlexText
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
import React, { useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Text, useModal } from '@pancakeswap/uikit'
|
||||||
|
import SeriesDetail from './SeriesDetail'
|
||||||
|
|
||||||
|
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 listProps {
|
||||||
|
// beginTime?: string
|
||||||
|
// coverResource: coverResourceProps
|
||||||
|
// endTime?: string
|
||||||
|
// id?: string
|
||||||
|
// name?: string
|
||||||
|
// price: priceProps
|
||||||
|
// purchased?: string | number
|
||||||
|
// total?: string | number
|
||||||
|
// type?: string
|
||||||
|
// }
|
||||||
|
interface coverResourceProps {
|
||||||
|
path?: string
|
||||||
|
url?: string
|
||||||
|
}
|
||||||
|
interface priceProps {
|
||||||
|
label?: string
|
||||||
|
value?: string | number
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeaderFlex = styled(Flex)`
|
||||||
|
margin-top: 25px;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
`
|
||||||
|
const TextKey = styled(Text)`
|
||||||
|
font-size: 22px;
|
||||||
|
color: #999999;
|
||||||
|
`
|
||||||
|
const TextVal = styled(Text)`
|
||||||
|
font-size: 22px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-left: 10px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TipFlex = styled(Flex)`
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background: rgba(237, 231, 246, 0.39);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.14901960784313725);
|
||||||
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #666666;
|
||||||
|
margin-right: 20px;
|
||||||
|
z-index: 10;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Header: React.FC<OperationProp> = ({ detail }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [onSeriesDetail] = useModal(<SeriesDetail detail={detail} />)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HeaderFlex>
|
||||||
|
<div />
|
||||||
|
<Flex>
|
||||||
|
<TextKey>{t('time remaining')}</TextKey>
|
||||||
|
<TextVal>{t('%hour%hour', { hour: 7 })}</TextVal>
|
||||||
|
</Flex>
|
||||||
|
<TipFlex onClick={onSeriesDetail}>?</TipFlex>
|
||||||
|
</HeaderFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Header
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { formatTimeNumber } from 'utils/formatBalance'
|
||||||
|
import BigNumber from 'bignumber.js'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Text } from '@pancakeswap/uikit'
|
||||||
|
import { TOKEN_SYMBOL } from 'config/index'
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
const DetailDiv = styled.div`
|
||||||
|
margin-top: -100px;
|
||||||
|
padding-bottom: 45px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const DetailInfo = styled(Flex)`
|
||||||
|
padding: 0 21px;
|
||||||
|
margin-top: 15px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const HeaderFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
color: #1fc7d4;
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 0 5px 0 10px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Operation: React.FC<OperationProp> = ({ detail }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const [buyNum, setBuyNum] = useState(0)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DetailDiv>
|
||||||
|
<DetailInfo>
|
||||||
|
<Text color="textSubtle">{t('series')}</Text>
|
||||||
|
<Text color="text">{detail.name}</Text>
|
||||||
|
</DetailInfo>
|
||||||
|
<DetailInfo>
|
||||||
|
<Text color="textSubtle">{t('price')}</Text>
|
||||||
|
<HeaderFlex>
|
||||||
|
{detail.priceList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<Flex alignItems="center" key={item.label}>
|
||||||
|
<HeaderText>{formatTimeNumber(item.value)}</HeaderText>
|
||||||
|
<Text color="text">{item.label}</Text>
|
||||||
|
{index === 0 && detail.priceList.length === 2 && <Text marginLeft="10px">-</Text>}
|
||||||
|
</Flex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</HeaderFlex>
|
||||||
|
</DetailInfo>
|
||||||
|
<DetailInfo>
|
||||||
|
<Text color="textSubtle">{t('quantity')}</Text>
|
||||||
|
<StepCom number={buyNum} value={(v) => setBuyNum(v)} />
|
||||||
|
</DetailInfo>
|
||||||
|
</DetailDiv>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Operation
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
import React, { useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Modal, Flex, Text, Image } from '@pancakeswap/uikit'
|
||||||
|
import { useGetBoxDetail } from '../hooks'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
const Main = styled(Modal)`
|
||||||
|
width: 60%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30px 0;
|
||||||
|
border-radius: 30px;
|
||||||
|
height: 90%;
|
||||||
|
z-index: 10;
|
||||||
|
`
|
||||||
|
const FlexBetween = styled(Flex)`
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const TypeText = styled(Text)`
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333333;
|
||||||
|
`
|
||||||
|
const TypeNum = styled(Text)`
|
||||||
|
font-size: 26px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
`
|
||||||
|
const ProbabilityFlex = styled(Flex)`
|
||||||
|
width: 220px;
|
||||||
|
height: 44px;
|
||||||
|
border: 1px solid #d5d5d5;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #666666;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
const TextNum = styled(Text)`
|
||||||
|
font-size: 22px;
|
||||||
|
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;
|
||||||
|
color: #3cbbcc;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding-top: 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Shop = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
margin: 0px auto;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ShopMain = styled.div`
|
||||||
|
border-bottom: 1px solid #d5d5d5;
|
||||||
|
border-left: 1px solid #d5d5d5;
|
||||||
|
padding: 0 20px 15px 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SeriesDetail: React.FC<SeriesDetailProp> = ({ name, value, onDismiss, detail }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const list = [
|
||||||
|
{
|
||||||
|
label: t('epic'),
|
||||||
|
type: '1',
|
||||||
|
list: [
|
||||||
|
{ label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 1 },
|
||||||
|
{ label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 2 },
|
||||||
|
{ label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 3 },
|
||||||
|
{ label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 4 },
|
||||||
|
{ label: 'Cat goddess Emerald ', id: 1, type: 1, probability: 5 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ label: t('legend'), type: '2', list: [{ label: 'Cat goddess Emerald ', id: 2, type: 2, probability: 6 }] },
|
||||||
|
{ label: t('uncommon'), type: '3', list: [{ label: 'Cat goddess Emerald ', id: 3, type: 3, probability: 7 }] },
|
||||||
|
{ label: t('common'), type: '4', list: [{ label: 'Cat goddess Emerald ', id: 4, type: 4, probability: 8 }] },
|
||||||
|
]
|
||||||
|
|
||||||
|
const getDetail = useGetBoxDetail()
|
||||||
|
const getData = async () => {
|
||||||
|
const data = await getDetail(detail.id)
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getData()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Main title="法式盛宴" onDismiss={onDismiss}>
|
||||||
|
<FlexBetween>
|
||||||
|
<TypeText>{t('limit the quantity of')}</TypeText>
|
||||||
|
<TypeNum>10000</TypeNum>
|
||||||
|
</FlexBetween>
|
||||||
|
<Detail>
|
||||||
|
<FlexBetween style={{ paddingRight: '20px' }}>
|
||||||
|
<ProbabilityFlex>{t('nft Smoking in the probability')}</ProbabilityFlex>
|
||||||
|
<TextNum>{t('%num%kind nft', { num: 100 })}</TextNum>
|
||||||
|
</FlexBetween>
|
||||||
|
<div>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<ShopMain>
|
||||||
|
<ShopText>{item.label}</ShopText>
|
||||||
|
<Shop>
|
||||||
|
{item.list.map((childItem) => {
|
||||||
|
return <ShopList item={childItem} />
|
||||||
|
})}
|
||||||
|
</Shop>
|
||||||
|
</ShopMain>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</Detail>
|
||||||
|
</Main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default SeriesDetail
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Image } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
const ShopItem = styled.div`
|
||||||
|
/* height: 358px; */
|
||||||
|
border-radius: 20px;
|
||||||
|
/* background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15); */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
& > .ribbon {
|
||||||
|
width: 106px;
|
||||||
|
height: 108px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: -6px;
|
||||||
|
z-index: 10;
|
||||||
|
& > .ribbon1 {
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 0;
|
||||||
|
left: -33px;
|
||||||
|
top: 26px;
|
||||||
|
width: 150px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
padding: 2px 0;
|
||||||
|
left: -43px;
|
||||||
|
top: 16px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
padding: 8px 0;
|
||||||
|
left: -33px;
|
||||||
|
top: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > .epic {
|
||||||
|
background: linear-gradient(180deg, #efea48 0%, #f32121 100%);
|
||||||
|
}
|
||||||
|
& > .legend {
|
||||||
|
background: linear-gradient(180deg, #4b84f5 0%, #bc21f3 100%);
|
||||||
|
}
|
||||||
|
& > .uncommon {
|
||||||
|
background: linear-gradient(180deg, #3dffec 0%, #24bf52 100%);
|
||||||
|
}
|
||||||
|
& > .common {
|
||||||
|
background: linear-gradient(180deg, #b5e9f3 0%, #1195d9 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ItemText = styled(Flex)`
|
||||||
|
padding: 10px 0;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #707070;
|
||||||
|
text-align: center;
|
||||||
|
`
|
||||||
|
const ImageType = styled.img`
|
||||||
|
border-radius: 20px;
|
||||||
|
`
|
||||||
|
const ProbabilityFlex = styled(Flex)`
|
||||||
|
font-size: 26px;
|
||||||
|
justify-content: center;
|
||||||
|
color: #3cbbcc;
|
||||||
|
`
|
||||||
|
const ProbabilityTitle = styled(Flex)`
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
margin-top: 5px;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
interface ShopListItemProps {
|
||||||
|
item?: Detail
|
||||||
|
}
|
||||||
|
interface Detail {
|
||||||
|
label?: string
|
||||||
|
type?: number | string
|
||||||
|
id?: number | string
|
||||||
|
probability?: number | string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShopList: React.FC<ShopListItemProps> = ({ item }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ShopItem key={item.id}>
|
||||||
|
<div className="ribbon">
|
||||||
|
{item.type === 1 && <div className="ribbon1 epic">{t('epic')}</div>}
|
||||||
|
{item.type === 2 && <div className="ribbon1 legend">{t('legend')}</div>}
|
||||||
|
{item.type === 3 && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
|
||||||
|
{item.type === 4 && <div className="ribbon1 common">{t('common')}</div>}
|
||||||
|
</div>
|
||||||
|
{item.type === 1 && <ImageType src="/images/nft/epic.svg" width={211} height={213} />}
|
||||||
|
{item.type === 2 && <ImageType src="/images/nft/legend.svg" width={211} height={213} />}
|
||||||
|
{item.type === 3 && <ImageType src="/images/nft/uncommon.svg" width={211} height={213} />}
|
||||||
|
{item.type === 4 && <ImageType src="/images/nft/common.svg" width={211} height={213} />}
|
||||||
|
<ItemText>{item.label}</ItemText>
|
||||||
|
<ProbabilityFlex>{item.probability}%</ProbabilityFlex>
|
||||||
|
<ProbabilityTitle>{t('The rate of')}</ProbabilityTitle>
|
||||||
|
</ShopItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopList
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { Text, Flex, Image, Button } from '@pancakeswap/uikit'
|
import { Flex, Text, Button } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
const SubButton = styled(Button)`
|
const SubButton = styled(Button)`
|
||||||
width: 25px;
|
width: 25px;
|
||||||
|
|
@ -25,27 +25,38 @@ const AddButton = styled(Button)`
|
||||||
padding: 0;
|
padding: 0;
|
||||||
`
|
`
|
||||||
|
|
||||||
export default function StepCom() {
|
interface StepProp {
|
||||||
const [valNumber, setInputState] = useState(1)
|
number?: number
|
||||||
|
max?: number
|
||||||
|
value?: (v) => void
|
||||||
|
}
|
||||||
|
|
||||||
const onAdd = (type) => {
|
const StepCom: React.FC<StepProp> = ({ number, max = 5, value }) => {
|
||||||
|
const [valNumber, setInputState] = useState(number)
|
||||||
|
|
||||||
|
const onChange = (type) => {
|
||||||
|
let num = valNumber
|
||||||
if (type === 'add') {
|
if (type === 'add') {
|
||||||
setInputState(valNumber + 1)
|
if (valNumber === max) return
|
||||||
|
num += 1
|
||||||
|
value(num)
|
||||||
|
setInputState(num)
|
||||||
} else {
|
} else {
|
||||||
if (valNumber === 0) return
|
if (valNumber === 0) return
|
||||||
setInputState(valNumber - 1)
|
num -= 1
|
||||||
|
value(num)
|
||||||
|
setInputState(num)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex justifyContent="space-between" alignItems="center" width={120}>
|
<Flex justifyContent="space-between" alignItems="center" width={120}>
|
||||||
{/* <Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} /> */}
|
<SubButton onClick={() => onChange('sub')}>-</SubButton>
|
||||||
<SubButton onClick={() => onAdd('sub')}>-</SubButton>
|
|
||||||
<Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
|
<Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
|
||||||
{valNumber}
|
{valNumber}
|
||||||
</Text>
|
</Text>
|
||||||
<AddButton onClick={() => onAdd('add')}>+</AddButton>
|
<AddButton onClick={() => onChange('add')}>+</AddButton>
|
||||||
{/* <Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} /> */}
|
|
||||||
</Flex>
|
</Flex>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
export default StepCom
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { useCallback } from 'react'
|
||||||
|
import { getBoxPage, getBoxDetail } from 'services/blindBox'
|
||||||
|
|
||||||
|
// nft盒子
|
||||||
|
export const useGetList = () => {
|
||||||
|
const data = async (page, size) => {
|
||||||
|
const result = await getBoxPage({ page, size })
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
// nft详情
|
||||||
|
export const useGetBoxDetail = () => {
|
||||||
|
const data = async (id) => {
|
||||||
|
const result = await getBoxDetail(id)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useGetList
|
||||||
|
|
@ -0,0 +1,224 @@
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import UnlockButton from 'components/UnlockButton'
|
||||||
|
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 Header from './component/Header'
|
||||||
|
import Operation from './component/Operation'
|
||||||
|
import { useGetList } from './hooks'
|
||||||
|
|
||||||
|
import 'swiper/swiper.min.css'
|
||||||
|
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);
|
||||||
|
align-items: center;
|
||||||
|
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
||||||
|
`
|
||||||
|
|
||||||
|
const SwiperDiv = styled(Swiper)`
|
||||||
|
height: 730px;
|
||||||
|
position: relative;
|
||||||
|
& > .swiper-wrapper > .swiper-slide > div > div {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
& > .swiper-container-horizontal > .swiper-pagination-bullets,
|
||||||
|
.swiper-pagination-custom,
|
||||||
|
.swiper-pagination-fraction {
|
||||||
|
/* position: absolute; */
|
||||||
|
bottom: 130px;
|
||||||
|
}
|
||||||
|
& > .swiper-pagination {
|
||||||
|
bottom: 130px !important;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
bottom: 260px !important;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
bottom: 130px !important;
|
||||||
|
}
|
||||||
|
& > .swiper-pagination-bullet {
|
||||||
|
background: #fff;
|
||||||
|
width: 14px;
|
||||||
|
height: 9px;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 3px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
& > .swiper-pagination-bullet-active {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const BlindBoxFlex = styled(Flex)`
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
const BlindBoxCard = styled.div`
|
||||||
|
width: 500px;
|
||||||
|
/* height: 590px; */
|
||||||
|
background: #ffffff !important;
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .ribbon {
|
||||||
|
width: 106px;
|
||||||
|
height: 108px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: -0px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 10;
|
||||||
|
& > .ribbon1 {
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 0;
|
||||||
|
left: -33px;
|
||||||
|
top: 26px;
|
||||||
|
width: 150px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
& > .limitQuantity {
|
||||||
|
background: linear-gradient(180deg, #4ee1b4 0%, #2183f3 100%);
|
||||||
|
}
|
||||||
|
& > .limitTime {
|
||||||
|
background: linear-gradient(180deg, #24bcf2 0%, #7e4ee1 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const UnlockButtonDiv = styled(UnlockButton)`
|
||||||
|
width: 500px;
|
||||||
|
height: 45px;
|
||||||
|
background: linear-gradient(180deg, #7be0fc 0%, #9961f0 100%);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 23px;
|
||||||
|
margin-top: 80px;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const BuyButton = styled(Button)`
|
||||||
|
width: 500px;
|
||||||
|
height: 45px;
|
||||||
|
background: linear-gradient(180deg, #7be0fc 0%, #9961f0 100%);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 23px;
|
||||||
|
margin-top: 80px;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const BlindBox: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const account = useAccount()
|
||||||
|
const [blindBoxList, setBlindBoxList] = useState<listProps[]>()
|
||||||
|
|
||||||
|
const getList = useGetList()
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const { content } = await getList(1, 10)
|
||||||
|
const arr = []
|
||||||
|
content.forEach((item) => {
|
||||||
|
const obj = item
|
||||||
|
obj.priceList = []
|
||||||
|
Object.keys(obj.price).forEach((childItem) => {
|
||||||
|
obj.priceList.push({ label: childItem, value: obj.price[childItem] })
|
||||||
|
})
|
||||||
|
obj.price = undefined
|
||||||
|
arr.push(obj)
|
||||||
|
})
|
||||||
|
setBlindBoxList(arr)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getData()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MainFlex>
|
||||||
|
{/* <UnOpenModel /> */}
|
||||||
|
<SwiperDiv
|
||||||
|
loop
|
||||||
|
pagination={{ clickable: true }}
|
||||||
|
spaceBetween={16}
|
||||||
|
freeModeMomentumRatio={0.25}
|
||||||
|
freeModeMomentumVelocityRatio={0.5}
|
||||||
|
>
|
||||||
|
{blindBoxList?.map((item) => {
|
||||||
|
return (
|
||||||
|
<SwiperSlide key={item.id}>
|
||||||
|
<BlindBoxFlex>
|
||||||
|
<BlindBoxCard>
|
||||||
|
<div className="ribbon">
|
||||||
|
{item.type === 'QUANTITATIVE' ? (
|
||||||
|
<div className="ribbon1 limitQuantity">{t('limit the quantity of')}</div>
|
||||||
|
) : (
|
||||||
|
<div className="ribbon1 limitTime">{t('time limit')}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Header detail={item} />
|
||||||
|
<Image src={item.coverResource.url} width={500} height={460} marginTop="-40px" />
|
||||||
|
<Operation detail={item} />
|
||||||
|
</BlindBoxCard>
|
||||||
|
{account ? <BuyButton>{t('Buy It Now')}</BuyButton> : <UnlockButtonDiv />}
|
||||||
|
</BlindBoxFlex>
|
||||||
|
</SwiperSlide>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</SwiperDiv>
|
||||||
|
</MainFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default BlindBox
|
||||||
|
|
@ -90,7 +90,13 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {
|
||||||
</Text>
|
</Text>
|
||||||
</Flex> */}
|
</Flex> */}
|
||||||
<HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} board={board} />
|
<HarvestAction earnings={new BigNumber(estimatedProfit)} pid={pid} board={board} />
|
||||||
<StakeAction stakedBalance={stakedBalance} tokenBalance={tokenBalance} pid={pid} board={board} />
|
<StakeAction
|
||||||
|
stakedBalance={stakedBalance}
|
||||||
|
tokenBalance={tokenBalance}
|
||||||
|
pid={pid}
|
||||||
|
board={board}
|
||||||
|
tokenName={board?.tokenSymbol}
|
||||||
|
/>
|
||||||
{/* <Flex flexDirection="column" alignItems="flex-start" mt="10"> */}
|
{/* <Flex flexDirection="column" alignItems="flex-start" mt="10"> */}
|
||||||
{/* <Text color="textSubtle" fontSize="12px">
|
{/* <Text color="textSubtle" fontSize="12px">
|
||||||
{t('Unclaimed income')}
|
{t('Unclaimed income')}
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@ const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid, board })
|
||||||
try {
|
try {
|
||||||
await onReward()
|
await onReward()
|
||||||
toastSuccess(
|
toastSuccess(
|
||||||
`${t('Harvested')}!`,
|
`${t('already received')}!`,
|
||||||
t('Your %symbol% earnings have been sent to your wallet!', { symbol: TOKEN_SYMBOL }),
|
t('Your %symbol% earnings have been sent to your wallet!', { symbol: TOKEN_SYMBOL }),
|
||||||
)
|
)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
|
||||||
|
|
@ -12,24 +12,28 @@ const HeaderMain = styled.div`
|
||||||
height: 84px;
|
height: 84px;
|
||||||
background: linear-gradient(180deg, #c2f9ff 0%, #b596f5 100%);
|
background: linear-gradient(180deg, #c2f9ff 0%, #b596f5 100%);
|
||||||
box-shadow: 0px 2px 1px #371588;
|
box-shadow: 0px 2px 1px #371588;
|
||||||
opacity: 0.5;
|
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 16px 0 0 20px;
|
padding: 16px 0 0 20px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const BalanceNum = styled(Balance)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
`
|
||||||
|
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
`
|
||||||
|
|
||||||
const HeaderItem: React.FC<InfoProps> = ({ title, price }) => {
|
const HeaderItem: React.FC<InfoProps> = ({ title, price }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<HeaderMain>
|
<HeaderMain>
|
||||||
{/* <Text color="text" fontSize="24px">
|
<BalanceNum lineHeight="1" decimals={0} value={Number(price)} />
|
||||||
{price}
|
<HeaderText>{title}</HeaderText>
|
||||||
</Text> */}
|
|
||||||
<Balance lineHeight="1" fontSize="24px" decimals={0} value={Number(price)} />
|
|
||||||
<Text color="textSubtle" fontSize="14px">
|
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
</HeaderMain>
|
</HeaderMain>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@ import useRefresh from 'hooks/useRefresh'
|
||||||
import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
|
import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
|
||||||
import { useAccount } from 'state/userInfo/hooks'
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { UnOpenModel } from 'components/Modal'
|
||||||
import BoardCard from './components/BoardCard/BoardCard'
|
import BoardCard from './components/BoardCard/BoardCard'
|
||||||
import HeaderItem from './components/HeaderItem'
|
import HeaderItem from './components/HeaderItem'
|
||||||
|
|
||||||
|
|
@ -29,6 +30,17 @@ const PageContent = styled.div`
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const HeadingText = styled(Text)`
|
||||||
|
font-size: 36px;
|
||||||
|
color: #333333;
|
||||||
|
`
|
||||||
|
|
||||||
|
const BalanceNum = styled(Balance)`
|
||||||
|
font-size: 32px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-top: 10px;
|
||||||
|
`
|
||||||
|
|
||||||
const Header = styled.div`
|
const Header = styled.div`
|
||||||
padding: 32px 0px;
|
padding: 32px 0px;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
|
|
@ -127,12 +139,11 @@ const Boards: React.FC = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContent>
|
<PageContent>
|
||||||
|
<UnOpenModel />
|
||||||
<Page>
|
<Page>
|
||||||
<Header>
|
<Header>
|
||||||
<Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
|
<HeadingText>{t('Total capital pool')}</HeadingText>
|
||||||
{t('Total capital pool')}
|
<BalanceNum lineHeight="1" decimals={0} value={Number(totalAmount)} />
|
||||||
</Heading>
|
|
||||||
<Balance lineHeight="1" fontSize="32px" decimals={0} value={Number(totalAmount)} />
|
|
||||||
<FlexLayoutMain>
|
<FlexLayoutMain>
|
||||||
<HeaderItem title={t('The total amount of dividends')} price={shareOutBonus} />
|
<HeaderItem title={t('The total amount of dividends')} price={shareOutBonus} />
|
||||||
{/* <HeaderItem title={t('Pending dividend')} price={1.0} /> */}
|
{/* <HeaderItem title={t('Pending dividend')} price={1.0} /> */}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Text } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
const Explain = styled.div`
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: left;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ExplainText = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
`
|
||||||
|
const CombinationRules: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Explain>
|
||||||
|
<ExplainText>{t('combination rules')}</ExplainText>
|
||||||
|
<ExplainText>
|
||||||
|
{t(
|
||||||
|
'1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;',
|
||||||
|
)}
|
||||||
|
</ExplainText>
|
||||||
|
<ExplainText>
|
||||||
|
{t(
|
||||||
|
'2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;',
|
||||||
|
)}
|
||||||
|
</ExplainText>
|
||||||
|
<ExplainText>
|
||||||
|
{t(
|
||||||
|
'3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;',
|
||||||
|
)}
|
||||||
|
</ExplainText>
|
||||||
|
<ExplainText>
|
||||||
|
{t(
|
||||||
|
'4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;',
|
||||||
|
)}
|
||||||
|
</ExplainText>
|
||||||
|
</Explain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default CombinationRules
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Text, Flex, Button, useModal } from '@pancakeswap/uikit'
|
||||||
|
import { TOKEN_SYMBOL } from 'config/index'
|
||||||
|
import Preview from './Preview'
|
||||||
|
import CombinationRules from './CombinationRules'
|
||||||
|
import SynthesisDetail from './SynthesisDetail'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
import ShopModal from './ShopModal'
|
||||||
|
|
||||||
|
const PageContent = styled.div`
|
||||||
|
padding: 30px 0;
|
||||||
|
max-width: 1180px;
|
||||||
|
margin: 0 auto;
|
||||||
|
`
|
||||||
|
const FlexMain = styled(Flex)`
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 30px;
|
||||||
|
justify-content: space-between;
|
||||||
|
`
|
||||||
|
|
||||||
|
const MainItem = styled.div`
|
||||||
|
width: 50%;
|
||||||
|
padding: 30px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SelectButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 30px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
`
|
||||||
|
const AddButton = styled(Button)`
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: -21px;
|
||||||
|
margin-left: -88px;
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 30px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const CompoundFlex = styled(Flex)`
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
`
|
||||||
|
const ProbabilityFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 260px;
|
||||||
|
height: 56px;
|
||||||
|
background: #fff5e9;
|
||||||
|
border-radius: 10px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ProbabilityNum = styled(Text)`
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
`
|
||||||
|
const ProbabilityText = styled(Text)`
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
`
|
||||||
|
|
||||||
|
const CompoundButton = styled(Button)`
|
||||||
|
width: 260px;
|
||||||
|
height: 56px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
border: none;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
`
|
||||||
|
const CostFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const CostText = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
`
|
||||||
|
|
||||||
|
const CostNum = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-left: 10px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Shop = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
gap: 23px;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
padding: 12px 0px;
|
||||||
|
margin: 0px auto;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.sm} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const CompoundBox: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [onShopDetail] = useModal(<ShopModal />)
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 1 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 2, id: 2 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 3, id: 3 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 4, id: 4 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 5 },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContent>
|
||||||
|
<FlexMain>
|
||||||
|
<MainItem style={{ borderRight: '1px solid #E3E3E3' }}>
|
||||||
|
<Preview />
|
||||||
|
<CompoundFlex>
|
||||||
|
<ProbabilityFlex>
|
||||||
|
<ProbabilityNum>0%</ProbabilityNum>
|
||||||
|
<ProbabilityText>{t('Synthetic success rate')}</ProbabilityText>
|
||||||
|
</ProbabilityFlex>
|
||||||
|
<CompoundButton>{t('compound')}</CompoundButton>
|
||||||
|
<CostFlex>
|
||||||
|
<CostText>{t('Estimated synthesis cost')} </CostText>
|
||||||
|
<CostNum> -----{TOKEN_SYMBOL}</CostNum>
|
||||||
|
</CostFlex>
|
||||||
|
</CompoundFlex>
|
||||||
|
<CombinationRules />
|
||||||
|
</MainItem>
|
||||||
|
<MainItem>
|
||||||
|
<Shop>
|
||||||
|
{list.map((item) => {
|
||||||
|
return <ShopList item={item} key={item.id} />
|
||||||
|
})}
|
||||||
|
</Shop>
|
||||||
|
<Flex justifyContent="center" marginTop="16px">
|
||||||
|
<SelectButton onClick={onShopDetail}>{t('reselect nft')}</SelectButton>
|
||||||
|
</Flex>
|
||||||
|
{list.length === 0 && <AddButton onClick={onShopDetail}>{t('add NFT')}</AddButton>}
|
||||||
|
</MainItem>
|
||||||
|
</FlexMain>
|
||||||
|
<SynthesisDetail />
|
||||||
|
</PageContent>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default CompoundBox
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Text, Flex, Image } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
const PreviewFlex = styled(Flex)`
|
||||||
|
width: 100%;
|
||||||
|
background: #f3ffff;
|
||||||
|
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 15px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 30px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const FlexImg = styled(Flex)`
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 211px;
|
||||||
|
height: 213px;
|
||||||
|
background: rgba(31, 201, 208, 0.39);
|
||||||
|
border-radius: 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const PreviewDetail = styled.div`
|
||||||
|
margin-left: 30px;
|
||||||
|
`
|
||||||
|
const PreviewTitle = styled(Text)`
|
||||||
|
font-size: 22px;
|
||||||
|
color: #280d5f;
|
||||||
|
`
|
||||||
|
const NftName = styled(Text)`
|
||||||
|
margin-top: 15px;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
`
|
||||||
|
const PreviewNum = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
`
|
||||||
|
const Preview: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PreviewFlex>
|
||||||
|
<FlexImg>
|
||||||
|
<Image src="/images/nft/hammer.svg" width={104} height={102} />
|
||||||
|
</FlexImg>
|
||||||
|
<PreviewDetail>
|
||||||
|
<PreviewTitle>{t('Compositing success preview')}</PreviewTitle>
|
||||||
|
<NftName>{t('nft name')}</NftName>
|
||||||
|
<PreviewNum>{t('not available')}</PreviewNum>
|
||||||
|
<NftName>{t('Number of successful synthesis')}</NftName>
|
||||||
|
<PreviewNum>0</PreviewNum>
|
||||||
|
</PreviewDetail>
|
||||||
|
</PreviewFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Preview
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Image } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
const MainFlex = styled.div`
|
||||||
|
& > .epicBcg {
|
||||||
|
background-color: #ffd7d7;
|
||||||
|
}
|
||||||
|
& > .legendBcg {
|
||||||
|
background-color: #d7d7ff;
|
||||||
|
}
|
||||||
|
& > .uncommonBcg {
|
||||||
|
background-color: #cdf7d2;
|
||||||
|
}
|
||||||
|
& > .commonBcg {
|
||||||
|
background-color: #daf0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopItem = styled(Flex)`
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
& > .ribbon {
|
||||||
|
width: 106px;
|
||||||
|
height: 108px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: -6px;
|
||||||
|
z-index: 10;
|
||||||
|
& > .ribbon1 {
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: relative;
|
||||||
|
padding: 2px 0;
|
||||||
|
left: -36px;
|
||||||
|
top: 14px;
|
||||||
|
width: 121px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
& > .epic {
|
||||||
|
background: linear-gradient(-90deg, #efea48 0%, #f32121 100%);
|
||||||
|
}
|
||||||
|
& > .legend {
|
||||||
|
background: linear-gradient(-90deg, #4b84f5 0%, #bc21f3 100%);
|
||||||
|
}
|
||||||
|
& > .uncommon {
|
||||||
|
background: linear-gradient(-90deg, #3dffec 0%, #24bf52 100%);
|
||||||
|
}
|
||||||
|
& > .common {
|
||||||
|
background: linear-gradient(-90deg, #b5e9f3 0%, #1195d9 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ItemText = styled(Flex)`
|
||||||
|
padding: 25px 0;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
interface ShopListItemProps {
|
||||||
|
item?: Detail
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
borderRadius?: string
|
||||||
|
}
|
||||||
|
interface Detail {
|
||||||
|
label?: string
|
||||||
|
type?: number | string
|
||||||
|
id?: number | string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShopList: React.FC<ShopListItemProps> = ({ item, width = 186, height = 187, borderRadius = '20px' }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const getClassBcg = () => {
|
||||||
|
let bcg = ''
|
||||||
|
switch (item.type) {
|
||||||
|
case 1:
|
||||||
|
bcg = 'epicBcg'
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
bcg = 'legendBcg'
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
bcg = 'uncommonBcg'
|
||||||
|
break
|
||||||
|
case 4:
|
||||||
|
bcg = 'commonBcg'
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
bcg = 'epicBcg'
|
||||||
|
}
|
||||||
|
return bcg
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MainFlex>
|
||||||
|
<ShopItem className={getClassBcg()} style={{ borderRadius }}>
|
||||||
|
<div className="ribbon">
|
||||||
|
{item.type === 1 && <div className="ribbon1 epic">{t('epic')}</div>}
|
||||||
|
{item.type === 2 && <div className="ribbon1 legend">{t('legend')}</div>}
|
||||||
|
{item.type === 3 && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
|
||||||
|
{item.type === 4 && <div className="ribbon1 common">{t('common')}</div>}
|
||||||
|
</div>
|
||||||
|
{item.type === 1 && <Image src="/images/nft/epic-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 2 && <Image src="/images/nft/legend-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 3 && <Image src="/images/nft/uncommon-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 4 && <Image src="/images/nft/box.svg" width={width} height={height} />}
|
||||||
|
</ShopItem>
|
||||||
|
</MainFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopList
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Text, Button } from '@pancakeswap/uikit'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
|
||||||
|
interface ShopProp {
|
||||||
|
name?: string | number
|
||||||
|
value?: string | number
|
||||||
|
onDismiss?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Main = styled.div`
|
||||||
|
width: 60%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30px 15px;
|
||||||
|
border-radius: 30px;
|
||||||
|
/* height: 80%; */
|
||||||
|
z-index: 10;
|
||||||
|
`
|
||||||
|
const Shop = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
margin: 0px auto;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
box-sizing: border-box;
|
||||||
|
& > .active {
|
||||||
|
border: 3px solid #0deeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ShopFlex = styled(Flex)`
|
||||||
|
flex-direction: column;
|
||||||
|
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;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SelectFlex = styled(Flex)`
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 9;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
const SelectDiv = styled.div`
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background: #0deeff;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 1px;
|
||||||
|
margin-top: -1px;
|
||||||
|
`
|
||||||
|
const BtnFlex = styled(Flex)`
|
||||||
|
margin-top: 30px;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const AddButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 21px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
`
|
||||||
|
const OutButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 21px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [list, setList] = useState([])
|
||||||
|
|
||||||
|
const pitchOn = (index) => {
|
||||||
|
list[index].select = !list[index].select
|
||||||
|
setList([...list])
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
setList([
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 1, select: true },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 2, id: 2, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 3, id: 3, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 4, id: 4, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 5, select: false },
|
||||||
|
])
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Main>
|
||||||
|
<Shop>
|
||||||
|
{list.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<ShopFlex onClick={() => pitchOn(index)} className={item.select ? 'active' : ''}>
|
||||||
|
<SelectFlex>{item.select && <SelectDiv />}</SelectFlex>
|
||||||
|
<ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
|
||||||
|
<ShopName>{item.label}</ShopName>
|
||||||
|
</ShopFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Shop>
|
||||||
|
<BtnFlex>
|
||||||
|
<AddButton>{t('add NFT')}</AddButton>
|
||||||
|
<OutButton onClick={onDismiss}>{t('Sign out')}</OutButton>
|
||||||
|
</BtnFlex>
|
||||||
|
</Main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopModal
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Text } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
const Detail = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-top: 30px;
|
||||||
|
`
|
||||||
|
const DetailTitle = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
const DetailText = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SynthesisDetail: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Detail>
|
||||||
|
<DetailTitle>{t('Synthesis of details')}</DetailTitle>
|
||||||
|
<DetailText>{t('Synthesis results: synthesis success, no change, synthesis failure;')}</DetailText>
|
||||||
|
<DetailText>
|
||||||
|
{t('Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;')}
|
||||||
|
</DetailText>
|
||||||
|
<DetailText>
|
||||||
|
{t('No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;')}
|
||||||
|
</DetailText>
|
||||||
|
<DetailText>
|
||||||
|
{t(
|
||||||
|
'Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;',
|
||||||
|
)}
|
||||||
|
</DetailText>
|
||||||
|
<DetailText>{t('compound probability:')}</DetailText>
|
||||||
|
<DetailText>
|
||||||
|
{t('NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost')}
|
||||||
|
</DetailText>
|
||||||
|
</Detail>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default SynthesisDetail
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
import { UnOpenModel } from 'components/Modal'
|
||||||
|
import CompoundBox from './components/CompoundBox'
|
||||||
|
|
||||||
|
interface RoundDetailProps {
|
||||||
|
beginTime?: number
|
||||||
|
endTime?: number
|
||||||
|
price?: number
|
||||||
|
remaining?: number
|
||||||
|
token?: string
|
||||||
|
total?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const PageContent = styled.div`
|
||||||
|
min-height: calc(100vh - 64px);
|
||||||
|
background-image: url('/images/nft/bg.svg');
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
/* background-image: url('/images/page/compound.jpg');
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: 60% 90%;
|
||||||
|
background-repeat: no-repeat; */
|
||||||
|
`
|
||||||
|
|
||||||
|
const NftBox: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<PageContent>
|
||||||
|
{/* <UnOpenModel /> */}
|
||||||
|
<CompoundBox />
|
||||||
|
</PageContent>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default NftBox
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect } from 'react'
|
import React, { useEffect, useRef } from 'react'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
import { CACHE_INVITE_CODE } from 'config/constants/cacheKey'
|
import { CACHE_INVITE_CODE } from 'config/constants/cacheKey'
|
||||||
import useParsedQueryString from 'hooks/useParsedQueryString'
|
import useParsedQueryString from 'hooks/useParsedQueryString'
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, MutableRefObject, useEffect, useRef } from 'react'
|
||||||
|
import { useLocation, useHistory, useParams } from 'react-router-dom'
|
||||||
|
import { FixedSizeList } from 'react-window'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
|
import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
@ -40,17 +42,25 @@ const FlexMain = styled(Flex)`
|
||||||
|
|
||||||
const CardDiv = styled(Card)`
|
const CardDiv = styled(Card)`
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
width: 350px;
|
width: 330px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
`
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 22px;
|
||||||
|
`
|
||||||
|
const TextDetail = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
`
|
||||||
|
|
||||||
const CourseCom: React.FC = () => {
|
const CourseCom: React.FC = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const location = useLocation()
|
||||||
|
const ref = useRef(null)
|
||||||
const [list, setListState] = useState([])
|
const [list, setListState] = useState([])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setListState([
|
setListState([
|
||||||
{
|
{
|
||||||
|
|
@ -58,7 +68,7 @@ const CourseCom: React.FC = () => {
|
||||||
id: 1,
|
id: 1,
|
||||||
list: [
|
list: [
|
||||||
{ text: t('The project concept was born in May 2021') },
|
{ text: t('The project concept was born in May 2021') },
|
||||||
{ text: t('Set up HighCity team in June 2021') },
|
{ text: t('Set up HiCity team in June 2021') },
|
||||||
{ text: t('May 2021 -- January 2022 Team run-in') },
|
{ text: t('May 2021 -- January 2022 Team run-in') },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -97,33 +107,108 @@ const CourseCom: React.FC = () => {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
setTimeout(() => {
|
||||||
|
const offsetTop = ref.current.offsetTop + 100
|
||||||
|
if (location.search) {
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetTop,
|
||||||
|
behavior: 'smooth',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
}, [t])
|
}, [t])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div ref={ref}>
|
||||||
<FirstPage>
|
<FirstPage>
|
||||||
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
|
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
|
||||||
<FlexMain>
|
<FlexMain>
|
||||||
<Stepper>
|
<Stepper>
|
||||||
{list.map((item, index) => (
|
<Step status="current" index={0}>
|
||||||
<Step key={item.id} index={index} status={index % 2 ? 'past' : 'current'}>
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#7645D9' }}>{t('Stage one: Origin')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('The project concept was born in May 2021')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Set up HiCity team in June 2021')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('May 2021 -- January 2022 Team run-in')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
<Step status="past" index={1}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#1FC7D4' }}>{t('Stage two: Action')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t(
|
||||||
|
'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
|
||||||
|
)}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('In March 2022, project approval, web design, roadmap announcement, smart contract development')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
<Step status="current" index={2}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#7645D9' }}>{t('Stage three: Creation')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Created by NFT in May 2022')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('June 2022 social software development')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
<Step status="past" index={3}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#1FC7D4' }}>{t('Stage four: Integration')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Launch of social software in December 2022')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('December 2022 NFT bonus binding social software')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('In December 2022, HighCity Ecology was preliminarily completed')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
<Step status="current" index={4}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#7645D9' }}>{t('Stage five: Closing the curtain')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('HighCity Ecology completed in December 2022')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Set up HiCity team in June 2021')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Maintain dividend income growth in December 2022')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
{/* {list.map((item, index) => (
|
||||||
|
<Step key={item.id} index={index} status={index % 2 ? 'current' : 'past'}>
|
||||||
<CardDiv style={{ height: '290px' }}>
|
<CardDiv style={{ height: '290px' }}>
|
||||||
<Heading>{item.title}</Heading>
|
<HeaderText style={{ color: index % 2 ? '#7645D9' : '#1FC7D4' }}>{item.title}</HeaderText>
|
||||||
{item.list.map((childItem) => {
|
{item.list.map((childItem) => {
|
||||||
return (
|
return (
|
||||||
<Text color="textSubtle" marginTop="15px" key={childItem.text}>
|
<TextDetail color="textSubtle" marginTop="15px" key={childItem.text}>
|
||||||
{childItem.text}
|
{childItem.text}
|
||||||
</Text>
|
</TextDetail>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</CardDiv>
|
</CardDiv>
|
||||||
</Step>
|
</Step>
|
||||||
))}
|
))} */}
|
||||||
</Stepper>
|
</Stepper>
|
||||||
</FlexMain>
|
</FlexMain>
|
||||||
</StyledPage>
|
</StyledPage>
|
||||||
</FirstPage>
|
</FirstPage>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ const ItemText = styled(Text)`
|
||||||
|
|
||||||
const ItemSubText = styled(Text)`
|
const ItemSubText = styled(Text)`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const FlexItemCom: React.FC<FlexProp> = ({ name, valueNum }) => {
|
const FlexItemCom: React.FC<FlexProp> = ({ name, valueNum }) => {
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { useDispatch } from 'react-redux'
|
import { useDispatch } from 'react-redux'
|
||||||
import { uccnDetail, indexInfo } from 'services/user'
|
import { uccnDetail, indexInfo } from 'services/user'
|
||||||
import { Flex, Heading, Text, Box, Button, Image, Link } from '@pancakeswap/uikit'
|
import { Flex, Heading, Text, Box, Button, Image, Link, useModal } from '@pancakeswap/uikit'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
import { usePriceHccUsdt } from 'state/hooks'
|
import { usePriceHccUsdt } from 'state/hooks'
|
||||||
import { OutLink } from 'types/user'
|
import UnOpenModel from './UnOpenModel'
|
||||||
|
|
||||||
import FlexItemCom from './FlexItemCom'
|
import FlexItemCom from './FlexItemCom'
|
||||||
|
|
||||||
|
|
@ -32,6 +32,17 @@ const StyledPage = styled(Box)`
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 52px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const DetailText = styled(Text)`
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
`
|
||||||
|
|
||||||
const FlexDiv = styled(Flex)`
|
const FlexDiv = styled(Flex)`
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -68,13 +79,19 @@ const BtnFlex = styled(Flex)`
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
const RadiusBtn = styled(Button)`
|
|
||||||
|
const RadiusBtn = styled(Link)`
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
width: 170px;
|
width: 170px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
width: 140px;
|
width: 140px;
|
||||||
|
|
@ -90,6 +107,8 @@ const WhiteBtn = styled(Button)`
|
||||||
width: 140px;
|
width: 140px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border: 1px solid #1fc7d4;
|
border: 1px solid #1fc7d4;
|
||||||
|
color: #1fc7d4;
|
||||||
|
background-color: #fff;
|
||||||
margin: 0px 35px 10px 0;
|
margin: 0px 35px 10px 0;
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
width: 140px;
|
width: 140px;
|
||||||
|
|
@ -112,13 +131,14 @@ const BtnImage = styled(Image)`
|
||||||
`
|
`
|
||||||
|
|
||||||
const ScoreDiv = styled(Flex)`
|
const ScoreDiv = styled(Flex)`
|
||||||
margin-top: 127px;
|
margin-top: 118px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 59px 0;
|
padding: 44px 0;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
display: none;
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
|
|
@ -140,6 +160,9 @@ const FristCom: React.FC = () => {
|
||||||
volume: '',
|
volume: '',
|
||||||
market: 0,
|
market: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const [onUnOpenModel] = useModal(<UnOpenModel />)
|
||||||
|
|
||||||
const hccPriceUsdt = usePriceHccUsdt()
|
const hccPriceUsdt = usePriceHccUsdt()
|
||||||
const [linkList, setLinkList] = useState([])
|
const [linkList, setLinkList] = useState([])
|
||||||
|
|
||||||
|
|
@ -165,18 +188,18 @@ const FristCom: React.FC = () => {
|
||||||
<FirstPage>
|
<FirstPage>
|
||||||
<StyledPage px={['16px', '24px']} mx="auto">
|
<StyledPage px={['16px', '24px']} mx="auto">
|
||||||
<FlexDiv>
|
<FlexDiv>
|
||||||
<ImageDiv src="/images/home/logo.svg" alt="" width={315} height={315} />
|
<ImageDiv src="/images/home/logo.svg" alt="" width={313} height={313} />
|
||||||
<InfoDiv>
|
<InfoDiv>
|
||||||
<Heading as="h1" scale="xl" mb="24px" color="secondary">
|
<HeaderText>Hi City Coin</HeaderText>
|
||||||
High City Coin
|
{/* <Heading as="h1" scale="xl" mb="24px" color="secondary">
|
||||||
</Heading>
|
Hi City Coin
|
||||||
<Text>{t('Hcc Info')}</Text>
|
</Heading> */}
|
||||||
<Text> {t('Hcc Nft')}</Text>
|
<DetailText>{t('Hcc Info')}</DetailText>
|
||||||
<Text>{t('Hcc BTC')}</Text>
|
<DetailText> {t('Hcc Nft')}</DetailText>
|
||||||
|
<DetailText>{t('Hcc BTC')}</DetailText>
|
||||||
<BtnFlex>
|
<BtnFlex>
|
||||||
<RadiusBtn variant="primary" onClick={() => openLink('https://pancake.kiemtienonline360.com/#/swap')}>
|
<RadiusBtn href="/ido">{t('IDO Exchange')}</RadiusBtn>
|
||||||
{t('Exchange')}
|
<WhiteBtn onClick={onUnOpenModel}>{t('social contact demo')}</WhiteBtn>
|
||||||
</RadiusBtn>
|
|
||||||
<Flex>
|
<Flex>
|
||||||
{linkList?.map((item, index) => {
|
{linkList?.map((item, index) => {
|
||||||
return index < 6 ? (
|
return index < 6 ? (
|
||||||
|
|
@ -200,11 +223,8 @@ const FristCom: React.FC = () => {
|
||||||
</FlexDiv>
|
</FlexDiv>
|
||||||
<ScoreDiv>
|
<ScoreDiv>
|
||||||
<FlexItemCom name={t('Number of holders')} valueNum={detail?.userCount} />
|
<FlexItemCom name={t('Number of holders')} valueNum={detail?.userCount} />
|
||||||
<FlexItemCom name={t('Your volume')} valueNum={detail?.volume} />
|
<FlexItemCom name={`${t('Your volume')}(24h)`} valueNum={detail?.volume} />
|
||||||
<FlexItemCom name={t('market value')} valueNum={detail?.market * hccPriceUsdt || 0} />
|
<FlexItemCom name={t('market value')} valueNum={detail?.market * hccPriceUsdt || 0} />
|
||||||
{/* {burned.map((item) => {
|
|
||||||
return <FlexItemCom key={item.id} name={item.name} value={item.value} />
|
|
||||||
})} */}
|
|
||||||
</ScoreDiv>
|
</ScoreDiv>
|
||||||
</StyledPage>
|
</StyledPage>
|
||||||
</FirstPage>
|
</FirstPage>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
const FirstPage = styled.div`
|
const FirstPage = styled.div`
|
||||||
background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
|
background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
|
||||||
padding: 100px 0 50px 0;
|
padding: 99px 0 37px 0;
|
||||||
`
|
`
|
||||||
|
|
||||||
const StyledPage = styled(Box)`
|
const StyledPage = styled(Box)`
|
||||||
|
|
@ -62,10 +62,10 @@ const MainDiv = styled.div`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const HeadingDiv = styled(Heading)`
|
const HeadingDiv = styled(Text)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
font-size: 36px;
|
font-size: 32px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
@ -81,6 +81,8 @@ const TextCom = styled(Text)`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -103,7 +105,7 @@ const IntroduceCom: React.FC = () => {
|
||||||
<Image src="/images/home/intor.svg" alt="" width={75} height={75} />
|
<Image src="/images/home/intor.svg" alt="" width={75} height={75} />
|
||||||
</div>
|
</div>
|
||||||
</MainDiv>
|
</MainDiv>
|
||||||
<HeadingDiv textAlign="center">HighCitySwap</HeadingDiv>
|
<HeadingDiv textAlign="center">HiCitySwap</HeadingDiv>
|
||||||
<TextCom>{t('HighCitySwapInfo')}</TextCom>
|
<TextCom>{t('HighCitySwapInfo')}</TextCom>
|
||||||
</BoxMain>
|
</BoxMain>
|
||||||
</StyledPage>
|
</StyledPage>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Input, InputProps, Flex, Link } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { BigNumber } from 'bignumber.js'
|
||||||
|
|
||||||
|
const FlexMain = styled(Flex)`
|
||||||
|
width: 488px;
|
||||||
|
height: 204px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
border-radius: 15px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 32px;
|
||||||
|
color: #333333;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TipText = styled(Text)`
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
`
|
||||||
|
|
||||||
|
const UnOpenModel: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<HeaderText>{t('Coming Soon')}</HeaderText>
|
||||||
|
<TipText>{t('This page is not currently open')}</TipText>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UnOpenModel
|
||||||
|
|
@ -3,6 +3,7 @@ import dayjs from 'dayjs'
|
||||||
import styled, { keyframes } from 'styled-components'
|
import styled, { keyframes } from 'styled-components'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
import { Flex, Text, Button, Input } from '@pancakeswap/uikit'
|
import { Flex, Text, Button, Input } from '@pancakeswap/uikit'
|
||||||
|
import { TOKEN_SYMBOL } from 'config/index'
|
||||||
import { useHarvest } from '../hooks'
|
import { useHarvest } from '../hooks'
|
||||||
|
|
||||||
interface GetCardProps {
|
interface GetCardProps {
|
||||||
|
|
@ -22,28 +23,26 @@ const FCard = styled.div`
|
||||||
padding: 27px 20px;
|
padding: 27px 20px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
`
|
`
|
||||||
|
const TitleText = styled(Text)`
|
||||||
|
font-size: 20px;
|
||||||
|
color: #280d5f;
|
||||||
|
`
|
||||||
|
const PriceLabel = styled(Text)`
|
||||||
|
font-size: 18px;
|
||||||
|
color: #280d5f;
|
||||||
|
`
|
||||||
|
const PriceText = styled(Text)`
|
||||||
|
font-size: 18px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
`
|
||||||
|
const TimeText = styled(Text)`
|
||||||
|
color: #280d5f;
|
||||||
|
font-size: 16px;
|
||||||
|
`
|
||||||
|
|
||||||
const ExchangeCard: React.FC<GetCardProps> = ({ price = 0, time = 0 }) => {
|
const ExchangeCard: React.FC<GetCardProps> = ({ price = 0, time = 0 }) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
// const account = useAccount()
|
|
||||||
// const lockTime = useLockTime()
|
|
||||||
// const [time, setTime] = useState(0)
|
|
||||||
// const userInfo = useUserInfo()
|
|
||||||
// const [price, setPrice] = useState(0)
|
|
||||||
// const init = async () => {
|
|
||||||
// const data = await lockTime()
|
|
||||||
// console.log(data)
|
|
||||||
// setTime(data)
|
|
||||||
// const info = await userInfo(account)
|
|
||||||
// console.log(info)
|
|
||||||
// setPrice(info)
|
|
||||||
// }
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (account) {
|
|
||||||
// init()
|
|
||||||
// }
|
|
||||||
// }, [account])
|
|
||||||
const harvest = useHarvest()
|
const harvest = useHarvest()
|
||||||
const getPrice = async () => {
|
const getPrice = async () => {
|
||||||
const res = await harvest()
|
const res = await harvest()
|
||||||
|
|
@ -57,15 +56,18 @@ const ExchangeCard: React.FC<GetCardProps> = ({ price = 0, time = 0 }) => {
|
||||||
{/* 当前时间大于锁仓时间 不显示 */}
|
{/* 当前时间大于锁仓时间 不显示 */}
|
||||||
<Flex justifyContent="space-between" alignItems="center">
|
<Flex justifyContent="space-between" alignItems="center">
|
||||||
<div>
|
<div>
|
||||||
<Text>{t('IDO Get')}</Text>
|
<TitleText>{t('IDO Get')}</TitleText>
|
||||||
{new Date().getTime() <= time && (
|
{new Date().getTime() <= time && (
|
||||||
<Text>
|
<TimeText>
|
||||||
{t('Estimated time of collection')}：{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}
|
{t('Estimated time of collection')}：{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
</Text>
|
</TimeText>
|
||||||
)}
|
)}
|
||||||
<Flex alignItems="center">
|
<Flex alignItems="center">
|
||||||
<Text>{t('amount')}：</Text>
|
<PriceLabel>{t('amount')}：</PriceLabel>
|
||||||
<Text>{price}HCC</Text>
|
<PriceText>
|
||||||
|
{price}
|
||||||
|
{TOKEN_SYMBOL}
|
||||||
|
</PriceText>
|
||||||
</Flex>
|
</Flex>
|
||||||
</div>
|
</div>
|
||||||
<Button disabled={time > new Date().getTime() || !price} onClick={getPrice}>
|
<Button disabled={time > new Date().getTime() || !price} onClick={getPrice}>
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,24 @@ import React from 'react'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
import { Text } from '@pancakeswap/uikit'
|
import { Text, Flex } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
const TimeText = styled(Text)`
|
const TimeText = styled(Text)`
|
||||||
color: #7a6eaa;
|
color: #7a6eaa;
|
||||||
font-size: 22px;
|
font-size: 18px;
|
||||||
`
|
`
|
||||||
|
const TimeFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
interface RoundDetailProps {
|
interface RoundDetailProps {
|
||||||
beginTime?: number
|
beginTime?: number
|
||||||
endTime?: number
|
endTime?: number
|
||||||
|
|
@ -26,11 +38,16 @@ const HeaderStatus: React.FC<HeaderStatusProps> = ({ status, roundDetail }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TimeText>
|
<TimeText>
|
||||||
{status === 'none' && t('Change the end')}
|
{status === 'none' && t('Exchange not commenced')}
|
||||||
{status === 'proceed' &&
|
|
||||||
`${dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')} ~ ${dayjs(roundDetail?.endTime).format(
|
{status === 'proceed' && (
|
||||||
'YYYY-MM-DD HH:mm:ss',
|
<TimeFlex>
|
||||||
)}`}
|
{dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
<Text> ~ </Text>
|
||||||
|
{dayjs(roundDetail?.endTime).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
</TimeFlex>
|
||||||
|
)}
|
||||||
|
|
||||||
{status === 'end' &&
|
{status === 'end' &&
|
||||||
`${t('Opening time of next exchange period:')}${dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')}`}
|
`${t('Opening time of next exchange period:')}${dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')}`}
|
||||||
</TimeText>
|
</TimeText>
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,15 @@ import { Text, Input } from '@pancakeswap/uikit'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
const PriceContent = styled.div`
|
const PriceContent = styled.div`
|
||||||
height: 148px;
|
|
||||||
background: rgba(238, 234, 244, 0.39);
|
background: rgba(238, 234, 244, 0.39);
|
||||||
border: 1px solid #d7caec;
|
border: 1px solid #d7caec;
|
||||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
|
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
padding: 23px 20px;
|
padding: 20px 20px 25px 20px;
|
||||||
margin-top: 20px;
|
margin-top: 30px;
|
||||||
`
|
`
|
||||||
const CoinText = styled(Text)`
|
const CoinText = styled(Text)`
|
||||||
font-size: 26px;
|
font-size: 18px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ import BuyModal from './BuyModal'
|
||||||
import { useApproveIdo, useBuyTransaction, useCheckTokenBalance } from '../hooks'
|
import { useApproveIdo, useBuyTransaction, useCheckTokenBalance } from '../hooks'
|
||||||
|
|
||||||
const FCard = styled.div`
|
const FCard = styled.div`
|
||||||
width: 650px;
|
width: 580px;
|
||||||
background: ${(props) => props.theme.card.background};
|
background: ${(props) => props.theme.card.background};
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1);
|
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
|
@ -30,22 +30,22 @@ const FCard = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 50px 70px;
|
padding: 45px 95px;
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
padding: 20px 30px;
|
padding: 20px 30px;
|
||||||
}
|
}
|
||||||
${({ theme }) => theme.mediaQueries.lg} {
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
width: 650px;
|
width: 580px;
|
||||||
padding: 50px 70px;
|
padding: 45px 95px;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
const HeaderText = styled(Text)`
|
const HeaderText = styled(Text)`
|
||||||
font-size: 48px;
|
font-size: 32px;
|
||||||
color: #280d5f;
|
color: #280d5f;
|
||||||
`
|
`
|
||||||
const FooterButton = styled.div`
|
const FooterButton = styled.div`
|
||||||
margin-top: 50px;
|
margin-top: 30px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`
|
`
|
||||||
const UnlockButtonDiv = styled(UnlockButton)`
|
const UnlockButtonDiv = styled(UnlockButton)`
|
||||||
|
|
@ -159,7 +159,7 @@ const ExchangeCard: React.FC<Props> = ({ status, roundDetail, time }) => {
|
||||||
<FooterButton>
|
<FooterButton>
|
||||||
{account ? (
|
{account ? (
|
||||||
allowanceList.usdt ? (
|
allowanceList.usdt ? (
|
||||||
time ? (
|
time > new Date().getTime() ? (
|
||||||
<Button width="100%" onClick={onPresentAffirm} disabled={status !== 'proceed' || !hccPrice}>
|
<Button width="100%" onClick={onPresentAffirm} disabled={status !== 'proceed' || !hccPrice}>
|
||||||
{t('Immediately change')}
|
{t('Immediately change')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
|
|
@ -4,23 +4,25 @@ import { useTranslation } from 'contexts/Localization'
|
||||||
import { Flex, Text } from '@pancakeswap/uikit'
|
import { Flex, Text } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
const RateText = styled(Text)`
|
const RateText = styled(Text)`
|
||||||
font-size: 30px;
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
color: #280d5f;
|
color: #280d5f;
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
font-size: 25px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
${({ theme }) => theme.mediaQueries.lg} {
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
font-size: 30px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
const RateNumber = styled(Text)`
|
const RateNumber = styled(Text)`
|
||||||
font-size: 30px;
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
color: #1fc7d4;
|
color: #1fc7d4;
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
font-size: 25px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
${({ theme }) => theme.mediaQueries.lg} {
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
font-size: 30px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
const FlexRowCenter = styled(Flex)`
|
const FlexRowCenter = styled(Flex)`
|
||||||
|
|
@ -30,6 +32,7 @@ const FlexRowCenter = styled(Flex)`
|
||||||
const FlexCenter = styled(Flex)`
|
const FlexCenter = styled(Flex)`
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 12px;
|
||||||
|
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -56,15 +59,15 @@ const RateCom: React.FC<Props> = ({ status, roundDetail }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<FlexRowCenter marginTop={20}>
|
<FlexRowCenter marginTop={30}>
|
||||||
<RateText>{t('Exchange rate')}：</RateText>
|
<RateText>{t('Exchange rate')}：</RateText>
|
||||||
<RateNumber>{status === 'none' ? '-------' : `1USDT=${roundDetail?.price}HCC`}</RateNumber>
|
<RateNumber>{status === 'none' ? '-------' : `1USDT=${roundDetail?.price}HCC`}</RateNumber>
|
||||||
</FlexRowCenter>
|
</FlexRowCenter>
|
||||||
<FlexCenter>
|
<FlexCenter>
|
||||||
<Text color="textSubtle">
|
<Text color="textSubtle" fontSize="16px">
|
||||||
{t('gross')}：{status === 'none' ? ' -------- ' : `${roundDetail?.total}HCC`}
|
{t('gross')}：{status === 'none' ? ' -------- ' : `${roundDetail?.total}HCC`}
|
||||||
</Text>
|
</Text>
|
||||||
<Text color="textSubtle" marginLeft={20}>
|
<Text color="textSubtle" fontSize="16px" marginLeft={20}>
|
||||||
{t('remaining quantity')}：{status === 'none' ? ' -------- ' : `${roundDetail?.remaining}HCC`}
|
{t('remaining quantity')}：{status === 'none' ? ' -------- ' : `${roundDetail?.remaining}HCC`}
|
||||||
</Text>
|
</Text>
|
||||||
</FlexCenter>
|
</FlexCenter>
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,7 @@ export const useBuyTransaction = () => {
|
||||||
export const useGetRound = () => {
|
export const useGetRound = () => {
|
||||||
const transaction = async () => {
|
const transaction = async () => {
|
||||||
const data = await getPurchaseActivity()
|
const data = await getPurchaseActivity()
|
||||||
|
console.log(data)
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@ const PageContent = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
padding: 20px 0;
|
||||||
`
|
`
|
||||||
|
|
||||||
const Exchange: React.FC = () => {
|
const Exchange: React.FC = () => {
|
||||||
|
|
@ -40,7 +41,7 @@ const Exchange: React.FC = () => {
|
||||||
const getRound = useGetRound()
|
const getRound = useGetRound()
|
||||||
const init = async () => {
|
const init = async () => {
|
||||||
const detail = await getRound()
|
const detail = await getRound()
|
||||||
if (!detail) {
|
if (!detail || detail.endTime < new Date().getTime() || roundDetail?.remaining === 0) {
|
||||||
setStatus('none')
|
setStatus('none')
|
||||||
} else if (detail.beginTime < new Date().getTime() && detail.endTime > new Date().getTime()) {
|
} else if (detail.beginTime < new Date().getTime() && detail.endTime > new Date().getTime()) {
|
||||||
setStatus('proceed')
|
setStatus('proceed')
|
||||||
|
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import React, { useState } from 'react'
|
|
||||||
import styled from 'styled-components'
|
|
||||||
// import SearchInput from 'components/SearchInput'
|
|
||||||
import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
||||||
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
|
|
||||||
|
|
||||||
export default function FlexText({ name, value }) {
|
|
||||||
return (
|
|
||||||
<Flex justifyContent="flex-end" alignItems="center" marginTop="12px" padding="0 21px">
|
|
||||||
<Text color="#6B6472" fontSize="14px">
|
|
||||||
{name}：
|
|
||||||
</Text>
|
|
||||||
<Text color="#1FC7D4" fontSize="14px">
|
|
||||||
{value}
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,208 +0,0 @@
|
||||||
import React, { useState } from 'react'
|
|
||||||
import styled from 'styled-components'
|
|
||||||
// import SearchInput from 'components/SearchInput'
|
|
||||||
import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
||||||
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
|
|
||||||
|
|
||||||
import FlexText from './component/FlexText'
|
|
||||||
// import Step from './component/Step'
|
|
||||||
|
|
||||||
import StepCom from './component/StepCom'
|
|
||||||
|
|
||||||
import 'swiper/swiper.min.css'
|
|
||||||
|
|
||||||
import 'swiper/components/pagination/pagination.min.css'
|
|
||||||
|
|
||||||
SwiperCore.use([Keyboard, Mousewheel, Pagination])
|
|
||||||
|
|
||||||
const MainDiv = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
min-height: calc(100vh - 64px);
|
|
||||||
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
|
||||||
`
|
|
||||||
|
|
||||||
const StyledPage = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
|
|
||||||
${({ theme }) => theme.mediaQueries.xs} {
|
|
||||||
background-size: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
${({ theme }) => theme.mediaQueries.sm} {
|
|
||||||
padding: 24px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
${({ theme }) => theme.mediaQueries.lg} {
|
|
||||||
padding-top: 32px;
|
|
||||||
min-height: calc(100vh - 64px);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const BodyWrapper = styled(Card)`
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-radius: 24px;
|
|
||||||
/* width: 60%; */
|
|
||||||
width: 500px;
|
|
||||||
overflow: visible;
|
|
||||||
position: relative;
|
|
||||||
`
|
|
||||||
const TextKey = styled(Text)`
|
|
||||||
font-size: 26px;
|
|
||||||
color: #999999;
|
|
||||||
`
|
|
||||||
const TextVal = styled(Text)`
|
|
||||||
font-size: 26px;
|
|
||||||
color: #1fc7d4;
|
|
||||||
margin-left: 10px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const FlexTime = styled(Flex)`
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
top: 20px;
|
|
||||||
justify-content: center;
|
|
||||||
`
|
|
||||||
|
|
||||||
const HindDiv = styled.div`
|
|
||||||
width: 32px;
|
|
||||||
position: absolute;
|
|
||||||
top: -40px;
|
|
||||||
left: 0;
|
|
||||||
z-index: 10;
|
|
||||||
`
|
|
||||||
const BlindboxImage = styled(Image)`
|
|
||||||
max-width: 377px;
|
|
||||||
max-height: 367px;
|
|
||||||
z-index: 9;
|
|
||||||
`
|
|
||||||
|
|
||||||
const Divs = styled.div`
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
min-height: calc(100vh - 104px);
|
|
||||||
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
|
||||||
`
|
|
||||||
const DetailDiv = styled.div`
|
|
||||||
margin-top: -100px;
|
|
||||||
`
|
|
||||||
const DetailInfo = styled(Flex)`
|
|
||||||
padding: 0 21px;
|
|
||||||
margin-top: 15px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const SwiperDiv = styled(Swiper)`
|
|
||||||
height: 730px;
|
|
||||||
& > .swiper-wrapper > .swiper-slide > div > div {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .swiper-pagination {
|
|
||||||
& > .swiper-pagination-bullet {
|
|
||||||
background: #fff;
|
|
||||||
width: 14px;
|
|
||||||
height: 9px;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
& > .swiper-pagination-bullet-active {
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const Nft: React.FC = () => {
|
|
||||||
const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
|
|
||||||
const [hour, setHour] = useState('0')
|
|
||||||
const [minute, setMinute] = useState('0')
|
|
||||||
const [second, setSecond] = useState('0')
|
|
||||||
const countFun = (time) => {
|
|
||||||
// const timer: any = null
|
|
||||||
// let sys_second = new Date(time).getTime() - new Date().getTime()
|
|
||||||
// timer = setInterval(() => {
|
|
||||||
// // 防止倒计时出现负数
|
|
||||||
// if (sys_second > 1000) {
|
|
||||||
// sys_second -= 1000
|
|
||||||
// // let day = Math.floor(sys_second / 1000 / 3600 / 24)
|
|
||||||
// setHour(Math.floor((sys_second / 1000 / 3600) % 24))
|
|
||||||
// setMinute(Math.floor((sys_second / 1000 / 60) % 60))
|
|
||||||
// setSecond(Math.floor((sys_second / 1000) % 60))
|
|
||||||
// // this.setState({
|
|
||||||
// // day: day,
|
|
||||||
// // hour: hour < 10 ? '0' + hour : hour,
|
|
||||||
// // minute: minute < 10 ? '0' + minute : minute,
|
|
||||||
// // second: second < 10 ? '0' + second : second,
|
|
||||||
// // })
|
|
||||||
// } else {
|
|
||||||
// clearInterval(timer)
|
|
||||||
// }
|
|
||||||
// }, 1000)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<MainDiv>
|
|
||||||
<SwiperDiv
|
|
||||||
loop
|
|
||||||
pagination={{ clickable: true }}
|
|
||||||
spaceBetween={16}
|
|
||||||
freeModeMomentumRatio={0.25}
|
|
||||||
freeModeMomentumVelocityRatio={0.5}
|
|
||||||
>
|
|
||||||
{blindboxList.map((item) => {
|
|
||||||
return (
|
|
||||||
<SwiperSlide key={item.id}>
|
|
||||||
<StyledPage>
|
|
||||||
<Divs>
|
|
||||||
<BodyWrapper>
|
|
||||||
{/* <Flex justifyContent="center" marginTop="-40px">
|
|
||||||
<BlindboxImage src="/images/nft/blindbox.png" alt="" width={377} height={367} />
|
|
||||||
</Flex> */}
|
|
||||||
<FlexTime>
|
|
||||||
<TextKey>剩余时间</TextKey>
|
|
||||||
<TextVal>7小时</TextVal>
|
|
||||||
</FlexTime>
|
|
||||||
<Image src="/images/nft/blindbox.svg" width={500} height={460} />
|
|
||||||
<DetailDiv>
|
|
||||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
|
||||||
<Text color="textSubtle">系列</Text>
|
|
||||||
<Text color="text">法式盛宴</Text>
|
|
||||||
</DetailInfo>
|
|
||||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
|
||||||
<Text color="textSubtle">价格</Text>
|
|
||||||
<Flex alignItems="center" justifyContent="flex-end">
|
|
||||||
<Text color="#1FC7D4" fontSize="24px">
|
|
||||||
500
|
|
||||||
</Text>
|
|
||||||
<Text color="text">黄油</Text>
|
|
||||||
</Flex>
|
|
||||||
</DetailInfo>
|
|
||||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
|
||||||
<Text color="textSubtle">数量</Text>
|
|
||||||
<StepCom />
|
|
||||||
</DetailInfo>
|
|
||||||
</DetailDiv>
|
|
||||||
|
|
||||||
<FlexText name="钱包中的 BUTTER" value="0" />
|
|
||||||
<FlexText name="回收点数抵扣" value="0" />
|
|
||||||
<FlexText name="实际黄油成本" value="0" />
|
|
||||||
</BodyWrapper>
|
|
||||||
</Divs>
|
|
||||||
</StyledPage>
|
|
||||||
</SwiperSlide>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</SwiperDiv>
|
|
||||||
</MainDiv>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Nft
|
|
||||||
|
|
@ -0,0 +1,148 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import Pagination from '@mui/material/Pagination'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Heading, Flex } from '@pancakeswap/uikit'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
import NumMain from './NumMain'
|
||||||
|
|
||||||
|
const aaa = keyframes`
|
||||||
|
0% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const PageContent = styled.div`
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
padding: 30px 0;
|
||||||
|
/* max-width: 70%; */
|
||||||
|
max-width: 1180px;
|
||||||
|
margin: 0 auto;
|
||||||
|
`
|
||||||
|
const StatusFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 30px;
|
||||||
|
/* padding: 0 23px; */
|
||||||
|
& > .active {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const StatusButton = styled.div`
|
||||||
|
width: 104px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const HeadingTitle = styled(Heading)`
|
||||||
|
margin: 30px 0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 28px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Shop = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
gap: 23px;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
padding: 12px 0px;
|
||||||
|
margin: 0px auto;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.sm} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const MainDiv = styled.div`
|
||||||
|
/* padding: 0 35px; */
|
||||||
|
`
|
||||||
|
|
||||||
|
const NftBox: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 1 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 2, id: 2 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 3, id: 3 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 4, id: 4 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 5 },
|
||||||
|
]
|
||||||
|
const status = [
|
||||||
|
{ 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' },
|
||||||
|
]
|
||||||
|
const [statusIndex, setStatusIndex] = useState(0)
|
||||||
|
|
||||||
|
const cutStatus = (index) => {
|
||||||
|
setStatusIndex(index)
|
||||||
|
}
|
||||||
|
const pageChange = (event, page) => {
|
||||||
|
console.log(event)
|
||||||
|
console.log(page)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContent>
|
||||||
|
<MainDiv>
|
||||||
|
<NumMain quantity={100} withNumber={100} />
|
||||||
|
</MainDiv>
|
||||||
|
<StatusFlex>
|
||||||
|
{status.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<StatusButton
|
||||||
|
key={item.id}
|
||||||
|
className={statusIndex === index ? 'active' : ''}
|
||||||
|
onClick={() => cutStatus(index)}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</StatusButton>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</StatusFlex>
|
||||||
|
<HeadingTitle scale="lg">{t('Did not have')}</HeadingTitle>
|
||||||
|
{/* 商品 */}
|
||||||
|
<Shop>
|
||||||
|
{list.map((item) => {
|
||||||
|
return <ShopList item={item} />
|
||||||
|
})}
|
||||||
|
</Shop>
|
||||||
|
<Flex justifyContent="center">
|
||||||
|
<Pagination count={10} onChange={pageChange} />
|
||||||
|
</Flex>
|
||||||
|
</PageContent>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default NftBox
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Modal, Flex, Text, Image, Button } from '@pancakeswap/uikit'
|
||||||
|
import FlexText from './FlexText'
|
||||||
|
|
||||||
|
interface DetailProp {
|
||||||
|
item?: Detail
|
||||||
|
onDismiss?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Detail {
|
||||||
|
label?: string
|
||||||
|
type?: number | string
|
||||||
|
id?: number | string
|
||||||
|
}
|
||||||
|
const Main = styled(Modal)`
|
||||||
|
width: 1050px;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30px 0;
|
||||||
|
border-radius: 30px;
|
||||||
|
height: 680px;
|
||||||
|
z-index: 10;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
width: 1050px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 1050px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const MainFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
& > .epicBcg {
|
||||||
|
background-color: #ffd7d7;
|
||||||
|
}
|
||||||
|
& > .legendBcg {
|
||||||
|
background-color: #d7d7ff;
|
||||||
|
}
|
||||||
|
& > .uncommonBcg {
|
||||||
|
background-color: #cdf7d2;
|
||||||
|
}
|
||||||
|
& > .commonBcg {
|
||||||
|
background-color: #daf0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ShopItem = styled(Flex)`
|
||||||
|
/* height: 358px; */
|
||||||
|
border-radius: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 401px;
|
||||||
|
height: 510px;
|
||||||
|
border-radius: 20px;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 201px;
|
||||||
|
height: 310px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
width: 301px;
|
||||||
|
height: 410px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 401px;
|
||||||
|
height: 510px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .ribbon {
|
||||||
|
width: 106px;
|
||||||
|
height: 108px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: -6px;
|
||||||
|
z-index: 10;
|
||||||
|
& > .ribbon1 {
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 0;
|
||||||
|
left: -26px;
|
||||||
|
top: 24px;
|
||||||
|
width: 121px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
& > .epic {
|
||||||
|
background: linear-gradient(-90deg, #efea48 0%, #f32121 100%);
|
||||||
|
}
|
||||||
|
& > .legend {
|
||||||
|
background: linear-gradient(-90deg, #4b84f5 0%, #bc21f3 100%);
|
||||||
|
}
|
||||||
|
& > .uncommon {
|
||||||
|
background: linear-gradient(-90deg, #3dffec 0%, #24bf52 100%);
|
||||||
|
}
|
||||||
|
& > .common {
|
||||||
|
background: linear-gradient(-90deg, #b5e9f3 0%, #1195d9 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const DetailFlex = styled(Flex)`
|
||||||
|
width: 550px;
|
||||||
|
flex-direction: column;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
width: 310px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
width: 450px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
width: 550px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const CardMain = styled.div`
|
||||||
|
height: 380px;
|
||||||
|
background-color: #f5ffff;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 50px 30px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TitleText = styled(Text)`
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SellButton = styled(Button)`
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const CenterDiv = styled.div`
|
||||||
|
height: 530px;
|
||||||
|
overflow-y: auto;
|
||||||
|
`
|
||||||
|
|
||||||
|
const DetailModal: React.FC<DetailProp> = ({ item, onDismiss }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const getClassBcg = () => {
|
||||||
|
let bcg = ''
|
||||||
|
switch (item.type) {
|
||||||
|
case 1:
|
||||||
|
bcg = 'epicBcg'
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
bcg = 'legendBcg'
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
bcg = 'uncommonBcg'
|
||||||
|
break
|
||||||
|
case 4:
|
||||||
|
bcg = 'commonBcg'
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
bcg = 'epicBcg'
|
||||||
|
}
|
||||||
|
return bcg
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Main title="" onDismiss={onDismiss}>
|
||||||
|
<CenterDiv>
|
||||||
|
<MainFlex>
|
||||||
|
<ShopItem className={getClassBcg()}>
|
||||||
|
<div className="ribbon">
|
||||||
|
{item.type === 1 && <div className="ribbon1 epic">{t('epic')}</div>}
|
||||||
|
{item.type === 2 && <div className="ribbon1 legend">{t('legend')}</div>}
|
||||||
|
{item.type === 3 && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
|
||||||
|
{item.type === 4 && <div className="ribbon1 common">{t('common')}</div>}
|
||||||
|
</div>
|
||||||
|
{item.type === 1 && <Image src="/images/nft/epic-icon.svg" width={267} height={405} />}
|
||||||
|
{item.type === 2 && <Image src="/images/nft/legend-icon.svg" width={267} height={405} />}
|
||||||
|
{item.type === 3 && <Image src="/images/nft/uncommon-icon.svg" width={267} height={405} />}
|
||||||
|
{item.type === 4 && <Image src="/images/nft/box.svg" width={267} height={405} />}
|
||||||
|
</ShopItem>
|
||||||
|
<DetailFlex>
|
||||||
|
<CardMain>
|
||||||
|
<TitleText>Cat goddess Emerald</TitleText>
|
||||||
|
<FlexText title={t('Total quantity of ownership')} value="10000" marginTop="58px" />
|
||||||
|
<FlexText title="NFT TOKEN" value="10000" />
|
||||||
|
<FlexText title={t('Contract address')} value="合约地址" />
|
||||||
|
<FlexText title={t('Assets agreement')} value="资产协议" />
|
||||||
|
<FlexText title={t('Assets and chain')} value="资产公链" />
|
||||||
|
</CardMain>
|
||||||
|
<SellButton>{t('Selling immediately')}</SellButton>
|
||||||
|
</DetailFlex>
|
||||||
|
</MainFlex>
|
||||||
|
</CenterDiv>
|
||||||
|
</Main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default DetailModal
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Text, Flex } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
interface FlexProp {
|
||||||
|
title: number | string
|
||||||
|
value: number | string
|
||||||
|
marginTop?: string
|
||||||
|
fontSize?: string
|
||||||
|
color?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const MainFlex = styled(Flex)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
`
|
||||||
|
|
||||||
|
const FlexText: React.FC<FlexProp> = ({ title, value, marginTop = '20px', color = '#666666', fontSize = '14px' }) => {
|
||||||
|
return (
|
||||||
|
<MainFlex style={{ marginTop }}>
|
||||||
|
<Text style={{ fontSize, color }}>{title}</Text>
|
||||||
|
<Text style={{ fontSize, color }}>{value}</Text>
|
||||||
|
</MainFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default FlexText
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Text, Flex } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
const NumFlex = styled(Flex)`
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 13px;
|
||||||
|
`
|
||||||
|
const ItemFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 50%;
|
||||||
|
`
|
||||||
|
const NumText = styled(Text)`
|
||||||
|
color: #fff;
|
||||||
|
font-size: 38px;
|
||||||
|
text-align: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
interface NumberProp {
|
||||||
|
quantity?: number | string
|
||||||
|
withNumber?: number | string
|
||||||
|
}
|
||||||
|
|
||||||
|
const NumMain: React.FC<NumberProp> = ({ quantity, withNumber }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NumFlex>
|
||||||
|
<ItemFlex>
|
||||||
|
<div>
|
||||||
|
<NumText>{quantity}</NumText>
|
||||||
|
<Text fontSize="16px" color="#E4F8F7" textAlign="center">
|
||||||
|
{t('total quantity')}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</ItemFlex>
|
||||||
|
<ItemFlex>
|
||||||
|
<div>
|
||||||
|
<NumText>{withNumber}</NumText>
|
||||||
|
<Text fontSize="16px" color="#E4F8F7" textAlign="center">
|
||||||
|
{t('With the number')}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</ItemFlex>
|
||||||
|
</NumFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default NumMain
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Image, useModal } from '@pancakeswap/uikit'
|
||||||
|
import DetailModal from './DetailModal'
|
||||||
|
|
||||||
|
const ShopItem = styled(Flex)`
|
||||||
|
/* height: 358px; */
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
& > .ribbon {
|
||||||
|
width: 106px;
|
||||||
|
height: 108px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: -6px;
|
||||||
|
z-index: 10;
|
||||||
|
& > .ribbon1 {
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 0;
|
||||||
|
left: -26px;
|
||||||
|
top: 24px;
|
||||||
|
width: 121px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
& > .epic {
|
||||||
|
background: linear-gradient(-90deg, #efea48 0%, #f32121 100%);
|
||||||
|
}
|
||||||
|
& > .legend {
|
||||||
|
background: linear-gradient(-90deg, #4b84f5 0%, #bc21f3 100%);
|
||||||
|
}
|
||||||
|
& > .uncommon {
|
||||||
|
background: linear-gradient(-90deg, #3dffec 0%, #24bf52 100%);
|
||||||
|
}
|
||||||
|
& > .common {
|
||||||
|
background: linear-gradient(-90deg, #b5e9f3 0%, #1195d9 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ItemText = styled(Flex)`
|
||||||
|
padding: 25px 0;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
interface ShopListItemProps {
|
||||||
|
item?: Detail
|
||||||
|
}
|
||||||
|
interface Detail {
|
||||||
|
label?: string
|
||||||
|
type?: number | string
|
||||||
|
id?: number | string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShopList: React.FC<ShopListItemProps> = ({ item }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [onDetailModal] = useModal(<DetailModal item={item} />)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ShopItem key={item.id} onClick={onDetailModal}>
|
||||||
|
<div className="ribbon">
|
||||||
|
{item.type === 1 && <div className="ribbon1 epic">{t('epic')}</div>}
|
||||||
|
{item.type === 2 && <div className="ribbon1 legend">{t('legend')}</div>}
|
||||||
|
{item.type === 3 && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
|
||||||
|
{item.type === 4 && <div className="ribbon1 common">{t('common')}</div>}
|
||||||
|
</div>
|
||||||
|
{item.type === 1 && <Image src="/images/nft/epic.svg" width={278} height={280} />}
|
||||||
|
{item.type === 2 && <Image src="/images/nft/legend.svg" width={278} height={280} />}
|
||||||
|
{item.type === 3 && <Image src="/images/nft/uncommon.svg" width={278} height={280} />}
|
||||||
|
{item.type === 4 && <Image src="/images/nft/common.svg" width={278} height={280} />}
|
||||||
|
<ItemText>{item.label}</ItemText>
|
||||||
|
</ShopItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopList
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue