调整ui，修改bug，增加盲盒页面，增加nft盒子页面
This commit is contained in:
myf
parent
241c7048cf
commit
143ee13dcf
|
|
@ -19,7 +19,7 @@ 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://192.253.237.94:9090'
|
||||
# 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://6o7g1fv83e.51xd.pub'
|
||||
|
|
|
|||
|
|
@ -19,5 +19,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://192.253.237.94:9090'
|
||||
# REACT_APP_REQUEST_URL = 'http://192.168.2.210:8080'
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 532 KiB |
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 |
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="https://fonts.gstatic.com" />
|
||||
<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="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!-- Meta -->
|
||||
<title>HighCity Swap</title>
|
||||
<title>HiCity Swap</title>
|
||||
<meta
|
||||
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."
|
||||
|
|
|
|||
|
|
@ -1055,27 +1055,27 @@
|
|||
"Auction duration": "Auction duration",
|
||||
"Terms & Conditions": "Terms & Conditions",
|
||||
|
||||
"Hcc Info": "HighCityCoin简称HCC，由HighCityTM铸造，",
|
||||
"Hcc Nft": "其作用主要是在HighCitySwap上购买NFT、NFT盒子与其他可交易产品。",
|
||||
"Hcc Info": "HiCityCoin简称HCC，由HiCityTM铸造，",
|
||||
"Hcc Nft": "其作用主要是在HiCitySwap上购买NFT、NFT盒子与其他可交易产品。",
|
||||
"Hcc BTC": "同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。",
|
||||
"Bazaar": "NFT市场",
|
||||
"HlighCitySwapInfo": "HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。",
|
||||
"HlighCitySwapInfo": "HiCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HiCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HiCity团队将永远前行。",
|
||||
"Stage one: Origin": "第一阶段：起源",
|
||||
"Stage two: Action": "第二阶段：行动",
|
||||
"Stage three: Creation": "第三阶段：创造",
|
||||
"Stage four: Integration": "第四阶段：融合",
|
||||
"Stage five: Closing the curtain": "第五阶段：落幕",
|
||||
"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月团队磨合；",
|
||||
"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月项目立项，网页设计，路线图公布，智能合约开发；",
|
||||
"Launch of social software in December 2022": "2022年12月社交软件落地；",
|
||||
"Created by NFT in May 2022": "2022年5月NFT创造；",
|
||||
"June 2022 social software development": "2022年6月社交软件开发；",
|
||||
"December 2022 NFT bonus binding social software": "2022年12月NFT分红绑定社交软件；",
|
||||
"In December 2022, HighCity Ecology was preliminarily completed": "2022年12月HighCity生态初步建成；",
|
||||
"HighCity Ecology completed in December 2022": "2022年12月HighCity生态建成;",
|
||||
"In December 2022, HighCity Ecology was preliminarily completed": "2022年12月HiCity生态初步建成；",
|
||||
"HighCity Ecology completed in December 2022": "2022年12月HiCity生态建成;",
|
||||
"Maintain dividend income growth in December 2022": "2022年12月保持分红收益增长；",
|
||||
"Buy commander NFT": "购买军团长NFT",
|
||||
"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": "使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得",
|
||||
"The commission": "的提成！",
|
||||
"footer %number% text": "使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得 %number% 的提成！",
|
||||
"market value": "市值(24h)",
|
||||
"market value": "市值",
|
||||
"Loaded all": "已加载全部",
|
||||
"Insufficient Balance": "余额不足",
|
||||
"HCC Currency amount": "HCC币总量",
|
||||
|
|
@ -1144,7 +1144,7 @@
|
|||
"How to use": "如何使用",
|
||||
"person": "人",
|
||||
"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%",
|
||||
"IDO exchange in the first phase": "第一期IDO兑换",
|
||||
"Opening time of next exchange period:": "下期兑换开启时间：",
|
||||
|
|
@ -1158,6 +1158,38 @@
|
|||
"IDO Get": "IDO 领取",
|
||||
"Estimated time of collection": "预计领取时间",
|
||||
"amount": "金额",
|
||||
"Change the end": "兑换结束",
|
||||
"After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "购买后，预计%time%时间后可进行领取，是否确认购买"
|
||||
"Change the end": "兑换已结束",
|
||||
"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 合成",
|
||||
"All": "全部",
|
||||
"total quantity": "总数量",
|
||||
"With the number": "拥有数量",
|
||||
"Did not have": "未拥有",
|
||||
"already owned": "已拥有",
|
||||
"epic": "史诗",
|
||||
"legend": "传说",
|
||||
"uncommon": "稀有",
|
||||
"common": "普通",
|
||||
"time remaining": "剩余时间",
|
||||
"series": "系列",
|
||||
"French feast": "法式盛宴",
|
||||
"price": "价格",
|
||||
"quantity": "数量",
|
||||
"NFT": "NFT",
|
||||
"Stay tuned": "敬请关注",
|
||||
"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": "限量",
|
||||
"nft Smoking in the probability": "NFT抽中概率",
|
||||
"%num%kind nft": "%num%种NFT",
|
||||
"Selling immediately": "立即出售",
|
||||
"Total quantity of ownership": "总拥有数量"
|
||||
}
|
||||
|
|
|
|||
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 Referral = lazy(() => import('./views/Referral'))
|
||||
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 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
|
||||
BigNumber.config({
|
||||
|
|
@ -114,12 +117,21 @@ const App: React.FC = () => {
|
|||
<Route path="/board">
|
||||
<Board />
|
||||
</Route>
|
||||
<Route path="/nft">
|
||||
<Nft />
|
||||
<Route path="/blindBox">
|
||||
<BlindBox />
|
||||
</Route>
|
||||
<Route path="/announcement">
|
||||
<Announcement />
|
||||
</Route>
|
||||
<Route path="/nftBox">
|
||||
<NftBox />
|
||||
</Route>
|
||||
<Route path="/compound">
|
||||
<Compound />
|
||||
</Route>
|
||||
<Route path="/bazaar">
|
||||
<Bazaar />
|
||||
</Route>
|
||||
{/* <Route path="/lottery">
|
||||
<Lottery />
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,35 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
icon: 'HomeIcon',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
label: t('nft box'),
|
||||
icon: 'NFTBox',
|
||||
href: '/nftBox',
|
||||
},
|
||||
{
|
||||
label: t('nft compound'),
|
||||
icon: 'NFTBox',
|
||||
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'),
|
||||
// icon: 'TradeIcon',
|
||||
|
|
@ -30,16 +59,16 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
icon: 'FarmIcon',
|
||||
href: '/Ido',
|
||||
},
|
||||
{
|
||||
label: t('Exchange'),
|
||||
icon: 'FarmIcon',
|
||||
href: 'https://pancake.kiemtienonline360.com/#/swap',
|
||||
},
|
||||
{
|
||||
label: t('Liquidity'),
|
||||
icon: 'FarmIcon',
|
||||
href: 'https://pancake.kiemtienonline360.com/#/pool',
|
||||
},
|
||||
// {
|
||||
// label: t('Exchange'),
|
||||
// icon: 'FarmIcon',
|
||||
// href: 'https://pancake.kiemtienonline360.com/#/swap',
|
||||
// },
|
||||
// {
|
||||
// label: t('Liquidity'),
|
||||
// icon: 'FarmIcon',
|
||||
// href: 'https://pancake.kiemtienonline360.com/#/pool',
|
||||
// },
|
||||
// {
|
||||
// label: t('Farms'),
|
||||
// icon: 'FarmIcon',
|
||||
|
|
@ -52,22 +81,22 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
// },
|
||||
{
|
||||
label: t('recommend'),
|
||||
icon: 'PoolIcon',
|
||||
icon: 'Recommend',
|
||||
href: '/referral',
|
||||
},
|
||||
// {
|
||||
// label: 'NFT',
|
||||
// icon: 'TicketIcon',
|
||||
// href: '/nft',
|
||||
// },
|
||||
{
|
||||
label: t('Blind box'),
|
||||
icon: 'BlindBox',
|
||||
href: '/blindBox',
|
||||
},
|
||||
{
|
||||
label: t('capital pool'),
|
||||
icon: 'TicketIcon',
|
||||
icon: 'Board',
|
||||
href: '/board',
|
||||
},
|
||||
{
|
||||
label: t('announcement'),
|
||||
icon: 'TicketIcon',
|
||||
icon: 'Announcement',
|
||||
href: '/announcement',
|
||||
},
|
||||
// {
|
||||
|
|
|
|||
|
|
@ -107,10 +107,11 @@ const ModalInput: React.FC<ModalInputProps> = ({
|
|||
</StyledTokenInput>
|
||||
{isBalanceZero && (
|
||||
<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">
|
||||
{t('Get %symbol%', { symbol })}
|
||||
</Link>
|
||||
</Link> */}
|
||||
</StyledErrorMessage>
|
||||
)}
|
||||
</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: 12px;
|
||||
color: #fff;
|
||||
padding: 0 20px;
|
||||
`
|
||||
|
||||
const UnOpenModel: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Model />
|
||||
<ModelFlex>
|
||||
<ModelDiv>
|
||||
<HeaderText>{t('Stay tuned')}</HeaderText>
|
||||
<TipText>{t('This page is not currently open')}</TipText>
|
||||
<BtnText href="/">{t('Viewing the Path Diagram')}</BtnText>
|
||||
</ModelDiv>
|
||||
</ModelFlex>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default UnOpenModel
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
export { default as ModalActions } from './ModalActions'
|
||||
export { default as ModalInput } from './ModalInput'
|
||||
export { default as UnOpenModel } from './UnOpenModel'
|
||||
|
|
|
|||
|
|
@ -8,32 +8,32 @@ export default {
|
|||
56: '0x6ab8463a4185b80905e05a9ff80a2d6b714b9e95',
|
||||
},
|
||||
boardChef: {
|
||||
97: '0x4ECC687D67138694729433e77cD95eEE9a858E40',
|
||||
56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会合约
|
||||
97: '0x82ab2659c3de15f48cd67f12668dca514b44070f',
|
||||
56: '0x82ab2659c3de15f48cd67f12668dca514b44070f', // NEED CHANGE 节点董事会合约
|
||||
},
|
||||
boardRewardChef: {
|
||||
97: '0xbCb980b6A4CD67d81B63B0bFA734B4116B218700',
|
||||
56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会分红合约
|
||||
97: '0x44a7b703a90b87e54abff5ae0861e917c828d062',
|
||||
56: '0x44a7b703a90b87e54abff5ae0861e917c828d062', // NEED CHANGE 节点董事会分红合约
|
||||
},
|
||||
holderChef: {
|
||||
97: '0x8faafb4ba8945917e7fe024dbbad0a5fb1da2181',
|
||||
56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 持币人
|
||||
97: '0xe3031f378f201dca46361a34e3fd12e50bdd202f',
|
||||
56: '0xe3031f378f201dca46361a34e3fd12e50bdd202f', // NEED CHANGE 持币人
|
||||
},
|
||||
holderRewardChef: {
|
||||
97: '0x61FB526924c6BAC9A08E146Da103B19c0DFA1899',
|
||||
56: '0x46271393dd6f2c8798a44f857888aa6a85af3527', // NEED CHANGE 持币人分红
|
||||
97: '0x9ee1c805a9508c0799b157ebbe3108d57c8d8588',
|
||||
56: '0x9ee1c805a9508c0799b157ebbe3108d57c8d8588', // NEED CHANGE 持币人分红
|
||||
},
|
||||
referralChef: {
|
||||
97: '0xe94282DA5166AD3FEB82F7aE299b2D5DFDF392Ae',
|
||||
56: '0xf42D1e1883C2FAA058dfa0D301556EB2d964859a', // NEED CHANGE 邀请或则军团长
|
||||
97: '0x0866962d208e91ea8804db3f547cccf22fe39ea7',
|
||||
56: '0x0866962d208e91ea8804db3f547cccf22fe39ea7', // NEED CHANGE 邀请或则军团长
|
||||
},
|
||||
referralRewardChef: {
|
||||
97: '0xf42D1e1883C2FAA058dfa0D301556EB2d964859a',
|
||||
56: '0xf42D1e1883C2FAA058dfa0D301556EB2d964859a', // NEED CHANGE 邀请或则军团长收益
|
||||
97: '0x0fb12ffe4b38730b80c26f44fa540eabfd03a30e',
|
||||
56: '0x0fb12ffe4b38730b80c26f44fa540eabfd03a30e', // NEED CHANGE 邀请或则军团长收益
|
||||
},
|
||||
idoPurchase: {
|
||||
97: '0xCCFD5B33774a1568A322FCa262D3378Ff8CcdeCB',
|
||||
56: '0xCCFD5B33774a1568A322FCa262D3378Ff8CcdeCB', // NEED CHANGE IDO兑换
|
||||
97: '0x2f562A9fE0325501A6Aa92cd9e2081B026fC35aa',
|
||||
56: '0x2f562A9fE0325501A6Aa92cd9e2081B026fC35aa', // NEED CHANGE IDO兑换
|
||||
},
|
||||
lotteryV2: {
|
||||
97: '0x5790c3534F30437641541a0FA04C992799602998',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { ContextApi } from 'contexts/Localization/types'
|
|||
import { PageMeta } from './types'
|
||||
|
||||
export const DEFAULT_META: PageMeta = {
|
||||
title: 'HighCitySwap',
|
||||
title: 'HiCitySwap',
|
||||
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.',
|
||||
image: 'https://pancakeswap.finance/images/hero.png',
|
||||
|
|
@ -12,47 +12,47 @@ export const getCustomMeta = (path: string, t: ContextApi['t']): PageMeta => {
|
|||
switch (path) {
|
||||
case '/':
|
||||
return {
|
||||
title: `${t('Home')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Home')}`,
|
||||
}
|
||||
case '/competition':
|
||||
case '/compound':
|
||||
return {
|
||||
title: `${t('Trading Battle')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('compound')}`,
|
||||
}
|
||||
case '/prediction':
|
||||
case '/nftBox':
|
||||
return {
|
||||
title: `${t('Prediction')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('nft box')}`,
|
||||
}
|
||||
case '/farms':
|
||||
return {
|
||||
title: `${t('Farms')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Farms')}`,
|
||||
}
|
||||
case '/pools':
|
||||
return {
|
||||
title: `${t('Pools')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Pools')}`,
|
||||
}
|
||||
case '/lottery':
|
||||
return {
|
||||
title: `${t('Lottery')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Lottery')}`,
|
||||
}
|
||||
case '/collectibles':
|
||||
return {
|
||||
title: `${t('Collectibles')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Collectibles')}`,
|
||||
}
|
||||
case '/ifo':
|
||||
return {
|
||||
title: `${t('Initial Farm Offering')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Initial Farm Offering')}`,
|
||||
}
|
||||
case '/teams':
|
||||
return {
|
||||
title: `${t('Leaderboard')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Leaderboard')}`,
|
||||
}
|
||||
case '/profile/tasks':
|
||||
return {
|
||||
title: `${t('Task Center')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Task Center')}`,
|
||||
}
|
||||
case '/profile':
|
||||
return {
|
||||
title: `${t('Your Profile')} | ${t('PancakeSwap')}`,
|
||||
title: `${t('Your Profile')}`,
|
||||
}
|
||||
default:
|
||||
return null
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ const tokens = {
|
|||
symbol: 'HCC',
|
||||
address: {
|
||||
56: '0x20de22029ab63cf9A7Cf5fEB2b737Ca1eE4c82A6',
|
||||
97: '0xE7619D544bD06f4d7362c8aA06a4ca0Ea73ce8c2',
|
||||
97: '0x5554c56e94bf07a85206dfeb584c7cb7f7d21227',
|
||||
},
|
||||
decimals: 18,
|
||||
projectLink: 'https://tranchess.com/',
|
||||
|
|
|
|||
|
|
@ -1184,27 +1184,27 @@
|
|||
"Confirm this transaction in your wallet": "Confirm this transaction in your wallet",
|
||||
"Dismiss": "Dismiss",
|
||||
|
||||
"Hcc Info": "HighCityCoin abbreviation HCC,cause HighCityTM cast,",
|
||||
"Hcc Nft": "Its function is mainly in HighCitySwap On the purchase NFT、NFT Boxes and other tradeable products.",
|
||||
"Hcc Info": "HiCityCoin abbreviation HCC,cause HiCityTM cast,",
|
||||
"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.",
|
||||
"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 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": "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;",
|
||||
"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;",
|
||||
"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;",
|
||||
"June 2022 social software development": "June 2022 social software development;",
|
||||
"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;",
|
||||
"HighCity Ecology completed in December 2022": "HighCity Ecology completed in December 2022",
|
||||
"In December 2022, HighCity Ecology was preliminarily completed": "In December 2022, HiCity Ecology was preliminarily completed;",
|
||||
"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;",
|
||||
"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",
|
||||
|
|
@ -1247,7 +1247,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": "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",
|
||||
"HCC Currency amount": "HCC Currency amount",
|
||||
"Lock up time": "Lock up time",
|
||||
|
|
@ -1271,7 +1271,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 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%",
|
||||
"IDO exchange in the first phase": "IDO exchange in the first phase",
|
||||
"Opening time of next exchange period:": "Opening time of next exchange period:",
|
||||
|
|
@ -1286,5 +1286,37 @@
|
|||
"Estimated time of collection": "Estimated time of collection",
|
||||
"amount": "amount",
|
||||
"Change the end": "Change the end",
|
||||
"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",
|
||||
"All": "All",
|
||||
"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",
|
||||
"NFT": "NFT",
|
||||
"Stay tuned": "Stay tuned",
|
||||
"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",
|
||||
"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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const useGetDocumentTitlePrice = () => {
|
|||
const cakePriceBusd = useCakeBusdPrice()
|
||||
useEffect(() => {
|
||||
const cakePriceBusdString = cakePriceBusd ? cakePriceBusd.toFixed(2) : ''
|
||||
document.title = `HighCity Swap - ${cakePriceBusdString}`
|
||||
document.title = `HiCity Swap - ${cakePriceBusdString}`
|
||||
}, [cakePriceBusd])
|
||||
}
|
||||
export default useGetDocumentTitlePrice
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ interface ListProps {
|
|||
|
||||
const DetailDiv = styled.div`
|
||||
width: 80%;
|
||||
max-height: 85vh;
|
||||
background: rgba(255, 255, 255);
|
||||
border-radius: 20px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -39,10 +40,13 @@ const TextTime = styled(Text)`
|
|||
padding: 30px 0 20px 0;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
`
|
||||
const TextInfo = styled(Text)`
|
||||
const TextInfo = styled.div`
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
margin-top: 30px;
|
||||
max-height: calc(85vh - 240px);
|
||||
line-height: 20px;
|
||||
overflow-y: auto;
|
||||
`
|
||||
|
||||
const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) => {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const ContainerMain = styled.div`
|
|||
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
||||
`
|
||||
const MainDiv = styled.div`
|
||||
padding: 20px 0;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 64px);
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
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'
|
||||
|
||||
const PageContent = styled.div`
|
||||
/* background: rgba(255, 255, 255, 0.39); */
|
||||
background-image: url('/images/page/bazaar.jpg');
|
||||
background-position: 50%;
|
||||
background-size: 50% 90%;
|
||||
background-repeat: no-repeat;
|
||||
min-height: calc(100vh - 64px);
|
||||
`
|
||||
|
||||
const Bazaar: React.FC = () => {
|
||||
return (
|
||||
<PageContent>
|
||||
<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,59 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Flex, Text, useModal } from '@pancakeswap/uikit'
|
||||
import SeriesDetail from './SeriesDetail'
|
||||
|
||||
interface FlexProp {
|
||||
name?: string | number
|
||||
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<FlexProp> = ({ name, value }) => {
|
||||
const { t } = useTranslation()
|
||||
const [onSeriesDetail] = useModal(<SeriesDetail />)
|
||||
|
||||
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,54 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Flex, Text } from '@pancakeswap/uikit'
|
||||
import StepCom from './StepCom'
|
||||
|
||||
interface DetailProp {
|
||||
series: string
|
||||
price: number | string
|
||||
number: number
|
||||
}
|
||||
|
||||
interface OperationProp {
|
||||
detail: DetailProp
|
||||
}
|
||||
|
||||
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 Operation: React.FC<OperationProp> = ({ detail }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<DetailDiv>
|
||||
<DetailInfo>
|
||||
<Text color="textSubtle">{t('series')}</Text>
|
||||
<Text color="text">{detail.series}</Text>
|
||||
</DetailInfo>
|
||||
<DetailInfo>
|
||||
<Text color="textSubtle">{t('price')}</Text>
|
||||
<Flex alignItems="center" justifyContent="flex-end">
|
||||
<Text color="#1FC7D4" fontSize="24px">
|
||||
{detail.price}
|
||||
</Text>
|
||||
<Text color="text">HCC</Text>
|
||||
</Flex>
|
||||
</DetailInfo>
|
||||
<DetailInfo>
|
||||
<Text color="textSubtle">{t('quantity')}</Text>
|
||||
<StepCom number={detail.number} />
|
||||
</DetailInfo>
|
||||
</DetailDiv>
|
||||
)
|
||||
}
|
||||
export default Operation
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Modal, Flex, Text, Image } from '@pancakeswap/uikit'
|
||||
import ShopList from './ShopList'
|
||||
|
||||
interface SeriesDetailProp {
|
||||
name?: string | number
|
||||
value?: string | number
|
||||
onDismiss?: () => void
|
||||
}
|
||||
|
||||
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 }) => {
|
||||
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 }] },
|
||||
]
|
||||
|
||||
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 styled from 'styled-components'
|
||||
import { Text, Flex, Image, Button } from '@pancakeswap/uikit'
|
||||
import { Flex, Text, Button } from '@pancakeswap/uikit'
|
||||
|
||||
const SubButton = styled(Button)`
|
||||
width: 25px;
|
||||
|
|
@ -25,10 +25,14 @@ const AddButton = styled(Button)`
|
|||
padding: 0;
|
||||
`
|
||||
|
||||
export default function StepCom() {
|
||||
const [valNumber, setInputState] = useState(1)
|
||||
interface StepProp {
|
||||
number?: number
|
||||
}
|
||||
|
||||
const onAdd = (type) => {
|
||||
const StepCom: React.FC<StepProp> = ({ number }) => {
|
||||
const [valNumber, setInputState] = useState(number)
|
||||
|
||||
const onChange = (type) => {
|
||||
if (type === 'add') {
|
||||
setInputState(valNumber + 1)
|
||||
} else {
|
||||
|
|
@ -39,13 +43,12 @@ export default function StepCom() {
|
|||
|
||||
return (
|
||||
<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={() => onAdd('sub')}>-</SubButton>
|
||||
<SubButton onClick={() => onChange('sub')}>-</SubButton>
|
||||
<Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
|
||||
{valNumber}
|
||||
</Text>
|
||||
<AddButton onClick={() => onAdd('add')}>+</AddButton>
|
||||
{/* <Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} /> */}
|
||||
<AddButton onClick={() => onChange('add')}>+</AddButton>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
export default StepCom
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import UnlockButton from 'components/UnlockButton'
|
||||
import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Card, Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
import { UnOpenModel } from 'components/Modal'
|
||||
import Header from './component/Header'
|
||||
import Operation from './component/Operation'
|
||||
|
||||
import 'swiper/swiper.min.css'
|
||||
import 'swiper/components/pagination/pagination.min.css'
|
||||
|
||||
SwiperCore.use([Keyboard, Mousewheel, Pagination])
|
||||
|
||||
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;
|
||||
background: linear-gradient(360deg, #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 BlindBox: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [blindBoxList, setBlindBoxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
|
||||
const [detail, setDetail] = useState({ series: '法式盛宴', price: 500, number: 1 })
|
||||
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">
|
||||
<div className="ribbon1 epic">{t('epic')}</div>
|
||||
</div>
|
||||
<Header />
|
||||
<Image src="/images/nft/blindbox.svg" width={500} height={460} marginTop="-40px" />
|
||||
<Operation detail={detail} />
|
||||
</BlindBoxCard>
|
||||
<UnlockButtonDiv />
|
||||
</BlindBoxFlex>
|
||||
</SwiperSlide>
|
||||
)
|
||||
})}
|
||||
</SwiperDiv>
|
||||
</MainFlex>
|
||||
)
|
||||
}
|
||||
export default BlindBox
|
||||
|
|
@ -90,7 +90,13 @@ const CardActions: React.FC<NodeCardActionsProps> = ({ board, account }) => {
|
|||
</Text>
|
||||
</Flex> */}
|
||||
<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"> */}
|
||||
{/* <Text color="textSubtle" fontSize="12px">
|
||||
{t('Unclaimed income')}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const HarvestAction: React.FC<FarmCardActionsProps> = ({ earnings, pid, board })
|
|||
try {
|
||||
await onReward()
|
||||
toastSuccess(
|
||||
`${t('Harvested')}!`,
|
||||
`${t('already received')}!`,
|
||||
t('Your %symbol% earnings have been sent to your wallet!', { symbol: TOKEN_SYMBOL }),
|
||||
)
|
||||
} catch (e) {
|
||||
|
|
|
|||
|
|
@ -12,24 +12,28 @@ const HeaderMain = styled.div`
|
|||
height: 84px;
|
||||
background: linear-gradient(180deg, #c2f9ff 0%, #b596f5 100%);
|
||||
box-shadow: 0px 2px 1px #371588;
|
||||
opacity: 0.5;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 0 0 20px;
|
||||
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 }) => {
|
||||
return (
|
||||
<>
|
||||
<HeaderMain>
|
||||
{/* <Text color="text" fontSize="24px">
|
||||
{price}
|
||||
</Text> */}
|
||||
<Balance lineHeight="1" fontSize="24px" decimals={0} value={Number(price)} />
|
||||
<Text color="textSubtle" fontSize="14px">
|
||||
{title}
|
||||
</Text>
|
||||
<BalanceNum lineHeight="1" decimals={0} value={Number(price)} />
|
||||
<HeaderText>{title}</HeaderText>
|
||||
</HeaderMain>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import useRefresh from 'hooks/useRefresh'
|
|||
import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
|
||||
import { useAccount } from 'state/userInfo/hooks'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { UnOpenModel } from 'components/Modal'
|
||||
import BoardCard from './components/BoardCard/BoardCard'
|
||||
import HeaderItem from './components/HeaderItem'
|
||||
|
||||
|
|
@ -29,6 +30,17 @@ const PageContent = styled.div`
|
|||
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`
|
||||
padding: 32px 0px;
|
||||
padding-left: 16px;
|
||||
|
|
@ -127,12 +139,11 @@ const Boards: React.FC = () => {
|
|||
|
||||
return (
|
||||
<PageContent>
|
||||
{/* <UnOpenModel /> */}
|
||||
<Page>
|
||||
<Header>
|
||||
<Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
|
||||
{t('Total capital pool')}
|
||||
</Heading>
|
||||
<Balance lineHeight="1" fontSize="32px" decimals={0} value={Number(totalAmount)} />
|
||||
<HeadingText>{t('Total capital pool')}</HeadingText>
|
||||
<BalanceNum lineHeight="1" decimals={0} value={Number(totalAmount)} />
|
||||
<FlexLayoutMain>
|
||||
<HeaderItem title={t('The total amount of dividends')} price={shareOutBonus} />
|
||||
{/* <HeaderItem title={t('Pending dividend')} price={1.0} /> */}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import styled, { keyframes } from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Text, Flex, Button, Image } from '@pancakeswap/uikit'
|
||||
|
||||
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;
|
||||
`
|
||||
const PreviewFlex = styled(Flex)`
|
||||
width: 100%;
|
||||
background: rgba(243, 255, 255, 0.39);
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
|
||||
opacity: 1;
|
||||
border-radius: 15px;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
`
|
||||
|
||||
const FlexImg = styled(Flex)`
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 211px;
|
||||
height: 213px;
|
||||
background: rgba(31, 201, 208, 0.29);
|
||||
border-radius: 20px;
|
||||
`
|
||||
|
||||
const PreviewDetail = styled.div`
|
||||
margin-left: 20px;
|
||||
`
|
||||
const PreviewTitle = styled(Text)`
|
||||
font-size: 26px;
|
||||
color: #280d5f;
|
||||
`
|
||||
const NftName = styled(Text)`
|
||||
margin-top: 15px;
|
||||
color: #666666;
|
||||
font-size: 18px;
|
||||
`
|
||||
const PreviewNum = styled(Text)`
|
||||
font-size: 16px;
|
||||
color: #1fc7d4;
|
||||
`
|
||||
|
||||
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: 60px;
|
||||
background: #fff5e9;
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
`
|
||||
|
||||
const ProbabilityNum = styled(Text)`
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
`
|
||||
const ProbabilityText = styled(Text)`
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
`
|
||||
|
||||
const CompoundButton = styled(Button)`
|
||||
width: 260px;
|
||||
height: 60px;
|
||||
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||
border-radius: 30px;
|
||||
border: none;
|
||||
margin-top: 15px;
|
||||
`
|
||||
const CostFlex = styled(Flex)`
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
`
|
||||
|
||||
const CostText = styled(Text)`
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
`
|
||||
|
||||
const CostNum = styled(Text)`
|
||||
font-size: 18px;
|
||||
color: #1fc7d4;
|
||||
margin-left: 10px;
|
||||
`
|
||||
|
||||
const CompoundBox: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<PageContent>
|
||||
<FlexMain>
|
||||
<MainItem style={{ borderRight: '1px solid #E3E3E3' }}>
|
||||
<PreviewFlex>
|
||||
<FlexImg>
|
||||
<Image src="/images/nft/hammer.svg" width={142} height={138} />
|
||||
</FlexImg>
|
||||
<PreviewDetail>
|
||||
<PreviewTitle>合成成功预览</PreviewTitle>
|
||||
<NftName>NFT名称</NftName>
|
||||
<PreviewNum>暂无</PreviewNum>
|
||||
<NftName>合成成功数量</NftName>
|
||||
<PreviewNum>0</PreviewNum>
|
||||
</PreviewDetail>
|
||||
</PreviewFlex>
|
||||
<CompoundFlex>
|
||||
<ProbabilityFlex>
|
||||
<ProbabilityNum>0%</ProbabilityNum>
|
||||
<ProbabilityText>合成成功率</ProbabilityText>
|
||||
</ProbabilityFlex>
|
||||
<CompoundButton>合成</CompoundButton>
|
||||
<CostFlex>
|
||||
<CostText>预计合成费用 </CostText>
|
||||
<CostNum> -----HCC</CostNum>
|
||||
</CostFlex>
|
||||
</CompoundFlex>
|
||||
</MainItem>
|
||||
<MainItem>2</MainItem>
|
||||
</FlexMain>
|
||||
</PageContent>
|
||||
)
|
||||
}
|
||||
export default CompoundBox
|
||||
|
|
@ -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 { CACHE_INVITE_CODE } from 'config/constants/cacheKey'
|
||||
import useParsedQueryString from 'hooks/useParsedQueryString'
|
||||
|
|
|
|||
|
|
@ -40,11 +40,18 @@ const FlexMain = styled(Flex)`
|
|||
|
||||
const CardDiv = styled(Card)`
|
||||
padding: 10px 20px;
|
||||
width: 350px;
|
||||
width: 330px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
`
|
||||
const HeaderText = styled(Text)`
|
||||
font-size: 22px;
|
||||
`
|
||||
const TextDetail = styled(Text)`
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
`
|
||||
|
||||
const CourseCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
|
@ -58,7 +65,7 @@ const CourseCom: React.FC = () => {
|
|||
id: 1,
|
||||
list: [
|
||||
{ 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') },
|
||||
],
|
||||
},
|
||||
|
|
@ -106,14 +113,14 @@ const CourseCom: React.FC = () => {
|
|||
<FlexMain>
|
||||
<Stepper>
|
||||
{list.map((item, index) => (
|
||||
<Step key={item.id} index={index} status={index % 2 ? 'past' : 'current'}>
|
||||
<Step key={item.id} index={index} status={index % 2 ? 'current' : 'past'}>
|
||||
<CardDiv style={{ height: '290px' }}>
|
||||
<Heading>{item.title}</Heading>
|
||||
<HeaderText style={{ color: index % 2 ? '#7645D9' : '#1FC7D4' }}>{item.title}</HeaderText>
|
||||
{item.list.map((childItem) => {
|
||||
return (
|
||||
<Text color="textSubtle" marginTop="15px" key={childItem.text}>
|
||||
<TextDetail color="textSubtle" marginTop="15px" key={childItem.text}>
|
||||
{childItem.text}
|
||||
</Text>
|
||||
</TextDetail>
|
||||
)
|
||||
})}
|
||||
</CardDiv>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const ItemText = styled(Text)`
|
|||
|
||||
const ItemSubText = styled(Text)`
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
`
|
||||
|
||||
const FlexItemCom: React.FC<FlexProp> = ({ name, valueNum }) => {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react'
|
|||
import styled from 'styled-components'
|
||||
import { useDispatch } from 'react-redux'
|
||||
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 { usePriceHccUsdt } from 'state/hooks'
|
||||
import { OutLink } from 'types/user'
|
||||
import UnOpenModel from './UnOpenModel'
|
||||
|
||||
import FlexItemCom from './FlexItemCom'
|
||||
|
||||
|
|
@ -32,6 +32,17 @@ const StyledPage = styled(Box)`
|
|||
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)`
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -68,13 +79,19 @@ const BtnFlex = styled(Flex)`
|
|||
margin-top: 60px;
|
||||
}
|
||||
`
|
||||
const RadiusBtn = styled(Button)`
|
||||
|
||||
const RadiusBtn = styled(Link)`
|
||||
border-radius: 50px;
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 140px;
|
||||
|
|
@ -90,6 +107,8 @@ const WhiteBtn = styled(Button)`
|
|||
width: 140px;
|
||||
height: 30px;
|
||||
border: 1px solid #1fc7d4;
|
||||
color: #1fc7d4;
|
||||
background-color: #fff;
|
||||
margin: 0px 35px 10px 0;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 140px;
|
||||
|
|
@ -112,13 +131,14 @@ const BtnImage = styled(Image)`
|
|||
`
|
||||
|
||||
const ScoreDiv = styled(Flex)`
|
||||
margin-top: 127px;
|
||||
margin-top: 118px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
||||
opacity: 1;
|
||||
border-radius: 15px;
|
||||
padding: 59px 0;
|
||||
padding: 44px 0;
|
||||
justify-content: space-between;
|
||||
display: none;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 50px;
|
||||
padding: 30px 0;
|
||||
|
|
@ -140,6 +160,9 @@ const FristCom: React.FC = () => {
|
|||
volume: '',
|
||||
market: 0,
|
||||
})
|
||||
|
||||
const [onUnOpenModel] = useModal(<UnOpenModel />)
|
||||
|
||||
const hccPriceUsdt = usePriceHccUsdt()
|
||||
const [linkList, setLinkList] = useState([])
|
||||
|
||||
|
|
@ -165,18 +188,18 @@ const FristCom: React.FC = () => {
|
|||
<FirstPage>
|
||||
<StyledPage px={['16px', '24px']} mx="auto">
|
||||
<FlexDiv>
|
||||
<ImageDiv src="/images/home/logo.svg" alt="" width={315} height={315} />
|
||||
<ImageDiv src="/images/home/logo.svg" alt="" width={313} height={313} />
|
||||
<InfoDiv>
|
||||
<Heading as="h1" scale="xl" mb="24px" color="secondary">
|
||||
High City Coin
|
||||
</Heading>
|
||||
<Text>{t('Hcc Info')}</Text>
|
||||
<Text> {t('Hcc Nft')}</Text>
|
||||
<Text>{t('Hcc BTC')}</Text>
|
||||
<HeaderText>Hi City Coin</HeaderText>
|
||||
{/* <Heading as="h1" scale="xl" mb="24px" color="secondary">
|
||||
Hi City Coin
|
||||
</Heading> */}
|
||||
<DetailText>{t('Hcc Info')}</DetailText>
|
||||
<DetailText> {t('Hcc Nft')}</DetailText>
|
||||
<DetailText>{t('Hcc BTC')}</DetailText>
|
||||
<BtnFlex>
|
||||
<RadiusBtn variant="primary" onClick={() => openLink('https://pancake.kiemtienonline360.com/#/swap')}>
|
||||
{t('Exchange')}
|
||||
</RadiusBtn>
|
||||
<RadiusBtn href="/ido">{t('IDO Exchange')}</RadiusBtn>
|
||||
<WhiteBtn onClick={onUnOpenModel}>{t('social contact demo')}</WhiteBtn>
|
||||
<Flex>
|
||||
{linkList?.map((item, index) => {
|
||||
return index < 6 ? (
|
||||
|
|
@ -200,11 +223,8 @@ const FristCom: React.FC = () => {
|
|||
</FlexDiv>
|
||||
<ScoreDiv>
|
||||
<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} />
|
||||
{/* {burned.map((item) => {
|
||||
return <FlexItemCom key={item.id} name={item.name} value={item.value} />
|
||||
})} */}
|
||||
</ScoreDiv>
|
||||
</StyledPage>
|
||||
</FirstPage>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useTranslation } from 'contexts/Localization'
|
|||
|
||||
const FirstPage = styled.div`
|
||||
background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
|
||||
padding: 100px 0 50px 0;
|
||||
padding: 99px 0 37px 0;
|
||||
`
|
||||
|
||||
const StyledPage = styled(Box)`
|
||||
|
|
@ -62,10 +62,10 @@ const MainDiv = styled.div`
|
|||
}
|
||||
`
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
const HeadingDiv = styled(Text)`
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
font-size: 36px;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 10px;
|
||||
|
|
@ -81,6 +81,8 @@ const TextCom = styled(Text)`
|
|||
text-align: center;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -103,7 +105,7 @@ const IntroduceCom: React.FC = () => {
|
|||
<Image src="/images/home/intor.svg" alt="" width={75} height={75} />
|
||||
</div>
|
||||
</MainDiv>
|
||||
<HeadingDiv textAlign="center">HighCitySwap</HeadingDiv>
|
||||
<HeadingDiv textAlign="center">HiCitySwap</HeadingDiv>
|
||||
<TextCom>{t('HighCitySwapInfo')}</TextCom>
|
||||
</BoxMain>
|
||||
</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('Stay tuned')}</HeaderText>
|
||||
<TipText>{t('This page is not currently open')}</TipText>
|
||||
</FlexMain>
|
||||
)
|
||||
}
|
||||
|
||||
export default UnOpenModel
|
||||
|
|
@ -22,6 +22,22 @@ const FCard = styled.div`
|
|||
padding: 27px 20px;
|
||||
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 { t } = useTranslation()
|
||||
|
|
@ -39,15 +55,15 @@ const ExchangeCard: React.FC<GetCardProps> = ({ price = 0, time = 0 }) => {
|
|||
{/* 当前时间大于锁仓时间 不显示 */}
|
||||
<Flex justifyContent="space-between" alignItems="center">
|
||||
<div>
|
||||
<Text>{t('IDO Get')}</Text>
|
||||
<TitleText>{t('IDO Get')}</TitleText>
|
||||
{new Date().getTime() <= time && (
|
||||
<Text>
|
||||
<TimeText>
|
||||
{t('Estimated time of collection')}：{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</Text>
|
||||
</TimeText>
|
||||
)}
|
||||
<Flex alignItems="center">
|
||||
<Text>{t('amount')}：</Text>
|
||||
<Text>{price}HCC</Text>
|
||||
<PriceLabel>{t('amount')}：</PriceLabel>
|
||||
<PriceText>{price}HCC</PriceText>
|
||||
</Flex>
|
||||
</div>
|
||||
<Button disabled={time > new Date().getTime() || !price} onClick={getPrice}>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,24 @@ import React from 'react'
|
|||
import dayjs from 'dayjs'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Text } from '@pancakeswap/uikit'
|
||||
import { Text, Flex } from '@pancakeswap/uikit'
|
||||
|
||||
const TimeText = styled(Text)`
|
||||
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 {
|
||||
beginTime?: number
|
||||
endTime?: number
|
||||
|
|
@ -27,10 +39,15 @@ const HeaderStatus: React.FC<HeaderStatusProps> = ({ status, roundDetail }) => {
|
|||
return (
|
||||
<TimeText>
|
||||
{status === 'none' && t('Change the end')}
|
||||
{status === 'proceed' &&
|
||||
`${dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')} ~ ${dayjs(roundDetail?.endTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)}`}
|
||||
|
||||
{status === 'proceed' && (
|
||||
<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' &&
|
||||
`${t('Opening time of next exchange period:')}${dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')}`}
|
||||
</TimeText>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,15 @@ import { Text, Input } from '@pancakeswap/uikit'
|
|||
import { useTranslation } from 'contexts/Localization'
|
||||
|
||||
const PriceContent = styled.div`
|
||||
height: 148px;
|
||||
background: rgba(238, 234, 244, 0.39);
|
||||
border: 1px solid #d7caec;
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18px;
|
||||
padding: 23px 20px;
|
||||
margin-top: 20px;
|
||||
padding: 20px 20px 25px 20px;
|
||||
margin-top: 30px;
|
||||
`
|
||||
const CoinText = styled(Text)`
|
||||
font-size: 26px;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import BuyModal from './BuyModal'
|
|||
import { useApproveIdo, useBuyTransaction, useCheckTokenBalance } from '../hooks'
|
||||
|
||||
const FCard = styled.div`
|
||||
width: 650px;
|
||||
width: 580px;
|
||||
background: ${(props) => props.theme.card.background};
|
||||
border-radius: 32px;
|
||||
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -30,22 +30,22 @@ const FCard = styled.div`
|
|||
flex-direction: column;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 50px 70px;
|
||||
padding: 45px 95px;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 350px;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 650px;
|
||||
padding: 50px 70px;
|
||||
width: 580px;
|
||||
padding: 45px 95px;
|
||||
}
|
||||
`
|
||||
const HeaderText = styled(Text)`
|
||||
font-size: 48px;
|
||||
font-size: 32px;
|
||||
color: #280d5f;
|
||||
`
|
||||
const FooterButton = styled.div`
|
||||
margin-top: 50px;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
`
|
||||
const UnlockButtonDiv = styled(UnlockButton)`
|
||||
|
|
@ -159,7 +159,7 @@ const ExchangeCard: React.FC<Props> = ({ status, roundDetail, time }) => {
|
|||
<FooterButton>
|
||||
{account ? (
|
||||
allowanceList.usdt ? (
|
||||
time ? (
|
||||
time > new Date().getTime() ? (
|
||||
<Button width="100%" onClick={onPresentAffirm} disabled={status !== 'proceed' || !hccPrice}>
|
||||
{t('Immediately change')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -4,23 +4,25 @@ import { useTranslation } from 'contexts/Localization'
|
|||
import { Flex, Text } from '@pancakeswap/uikit'
|
||||
|
||||
const RateText = styled(Text)`
|
||||
font-size: 30px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #280d5f;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
font-size: 25px;
|
||||
font-size: 18px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
font-size: 30px;
|
||||
font-size: 22px;
|
||||
}
|
||||
`
|
||||
const RateNumber = styled(Text)`
|
||||
font-size: 30px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #1fc7d4;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
font-size: 25px;
|
||||
font-size: 18px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
font-size: 30px;
|
||||
font-size: 22px;
|
||||
}
|
||||
`
|
||||
const FlexRowCenter = styled(Flex)`
|
||||
|
|
@ -30,6 +32,7 @@ const FlexRowCenter = styled(Flex)`
|
|||
const FlexCenter = styled(Flex)`
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
flex-direction: column;
|
||||
|
|
@ -56,15 +59,15 @@ const RateCom: React.FC<Props> = ({ status, roundDetail }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<FlexRowCenter marginTop={20}>
|
||||
<FlexRowCenter marginTop={30}>
|
||||
<RateText>{t('Exchange rate')}：</RateText>
|
||||
<RateNumber>{status === 'none' ? '-------' : `1USDT=${roundDetail?.price}HCC`}</RateNumber>
|
||||
</FlexRowCenter>
|
||||
<FlexCenter>
|
||||
<Text color="textSubtle">
|
||||
<Text color="textSubtle" fontSize="16px">
|
||||
{t('gross')}：{status === 'none' ? ' -------- ' : `${roundDetail?.total}HCC`}
|
||||
</Text>
|
||||
<Text color="textSubtle" marginLeft={20}>
|
||||
<Text color="textSubtle" fontSize="16px" marginLeft={20}>
|
||||
{t('remaining quantity')}：{status === 'none' ? ' -------- ' : `${roundDetail?.remaining}HCC`}
|
||||
</Text>
|
||||
</FlexCenter>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ export const useBuyTransaction = () => {
|
|||
export const useGetRound = () => {
|
||||
const transaction = async () => {
|
||||
const data = await getPurchaseActivity()
|
||||
console.log(data)
|
||||
if (!data) {
|
||||
return null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ const PageContent = styled.div`
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
`
|
||||
|
||||
const Exchange: React.FC = () => {
|
||||
|
|
@ -40,7 +41,7 @@ const Exchange: React.FC = () => {
|
|||
const getRound = useGetRound()
|
||||
const init = async () => {
|
||||
const detail = await getRound()
|
||||
if (!detail) {
|
||||
if (!detail || detail.endTime < new Date().getTime() || roundDetail?.remaining === 0) {
|
||||
setStatus('none')
|
||||
} else if (detail.beginTime < new Date().getTime() && detail.endTime > new Date().getTime()) {
|
||||
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,140 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
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)
|
||||
}
|
||||
|
||||
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>
|
||||
</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
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
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 Box from './components/Box'
|
||||
|
||||
const PageContent = styled.div`
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
min-height: calc(100vh - 64px);
|
||||
|
||||
background-image: url('/images/page/nftBox.jpg');
|
||||
background-position: 50%;
|
||||
background-size: 50% 90%;
|
||||
background-repeat: no-repeat;
|
||||
`
|
||||
|
||||
const NftBox: React.FC = () => {
|
||||
return (
|
||||
<PageContent>
|
||||
<UnOpenModel />
|
||||
{/* <Box /> */}
|
||||
</PageContent>
|
||||
)
|
||||
}
|
||||
export default NftBox
|
||||
|
|
@ -21,6 +21,7 @@ const InfoDiv = styled.div`
|
|||
padding: 30px 26px;
|
||||
margin-left: 60px;
|
||||
box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
|
||||
border-radius: 15px;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
padding: 20px 10px;
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -21,11 +21,13 @@ const ButtonDiv = styled(Button)`
|
|||
width: 100%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
border: 1px solid ${({ theme }) => theme.colors.textDisabled};
|
||||
color: ${({ theme }) => theme.colors.textDisabled};
|
||||
font-size: 16px;
|
||||
border: 1px solid #dcdcdc;
|
||||
color: #dcdcdc;
|
||||
`
|
||||
const ButtonGet = styled(Button)`
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
border: 1px solid #1fc7d4;
|
||||
|
|
@ -36,6 +38,8 @@ const UpBtn = styled(Button)`
|
|||
width: 100%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
||||
border: none;
|
||||
`
|
||||
|
|
@ -46,7 +50,7 @@ const FooterBtn = styled.div`
|
|||
padding-bottom: 20px;
|
||||
`
|
||||
const MainDiv = styled.div`
|
||||
padding: 0 30px;
|
||||
padding: 0 50px;
|
||||
`
|
||||
const FooterDiv = styled.div`
|
||||
margin: 0 auto 30px auto;
|
||||
|
|
@ -54,6 +58,7 @@ const FooterDiv = styled.div`
|
|||
const TextDiv = styled(Text)`
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
`
|
||||
|
||||
const ConnectedCom: React.FC = () => {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ interface FlexProps {
|
|||
leftColor?: string
|
||||
rightColor?: string
|
||||
typeLink?: string
|
||||
size?: string
|
||||
textColor?: string
|
||||
}
|
||||
|
||||
const FlexDiv = styled(Flex)`
|
||||
|
|
@ -17,7 +19,6 @@ const FlexDiv = styled(Flex)`
|
|||
margin-top: 20px;
|
||||
`
|
||||
const TextLink = styled(Text)`
|
||||
border-bottom: 1px solid #7a6eaa;
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
|
|
@ -28,6 +29,8 @@ const FlexCom: React.FC<FlexProps> = ({
|
|||
leftColor = 'text',
|
||||
rightColor = 'textSubtle',
|
||||
typeLink,
|
||||
size = '16px',
|
||||
textColor = '#1FC7D4',
|
||||
}) => {
|
||||
const openPage = () => {
|
||||
console.log(typeLink)
|
||||
|
|
@ -36,13 +39,21 @@ const FlexCom: React.FC<FlexProps> = ({
|
|||
|
||||
return (
|
||||
<FlexDiv style={{ padding: paddings }}>
|
||||
<Text color={leftColor}>{name}</Text>
|
||||
<Text style={{ fontSize: size }} color={leftColor}>
|
||||
{name}
|
||||
</Text>
|
||||
{typeLink ? (
|
||||
<TextLink color={rightColor} onClick={openPage}>
|
||||
<TextLink
|
||||
color={rightColor}
|
||||
style={{ color: textColor, borderBottom: `1px solid ${textColor}` }}
|
||||
onClick={openPage}
|
||||
>
|
||||
{value}
|
||||
</TextLink>
|
||||
) : (
|
||||
<Text color={rightColor}>{value}</Text>
|
||||
<Text color={rightColor} style={{ color: textColor }}>
|
||||
{value}
|
||||
</Text>
|
||||
)}
|
||||
</FlexDiv>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Image, Heading } from '@pancakeswap/uikit'
|
||||
import { Image, Text } from '@pancakeswap/uikit'
|
||||
|
||||
interface HeaderProp {
|
||||
title?: string
|
||||
}
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
padding-top: 30px;
|
||||
const HeadingDiv = styled(Text)`
|
||||
padding-top: 35px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
color: #280d5f;
|
||||
`
|
||||
|
||||
const TipDiv = styled(Image)`
|
||||
|
|
@ -18,10 +21,6 @@ const TipDiv = styled(Image)`
|
|||
left: 0;
|
||||
`
|
||||
const HeaderMain: React.FC<HeaderProp> = ({ title = '' }) => {
|
||||
return (
|
||||
<HeadingDiv scale="xl" mb="24px" textAlign="center">
|
||||
{title}
|
||||
</HeadingDiv>
|
||||
)
|
||||
return <HeadingDiv>{title}</HeadingDiv>
|
||||
}
|
||||
export default HeaderMain
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const FooterBtn = styled.div`
|
|||
|
||||
const ContentDiv = styled.div`
|
||||
width: 75%;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
background: #fff;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 40px;
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ const ContentDiv = styled.div`
|
|||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
}
|
||||
`
|
||||
|
||||
|
|
@ -66,6 +66,7 @@ const FooterDiv = styled.div`
|
|||
const TextDiv = styled(Text)`
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
`
|
||||
const LogoImage = styled.div`
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -4,14 +4,17 @@ import { useTranslation } from 'contexts/Localization'
|
|||
import { Heading, Text } from '@pancakeswap/uikit'
|
||||
import UnlockButton from 'components/UnlockButton'
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
padding-top: 90px;
|
||||
const HeadingDiv = styled(Text)`
|
||||
padding-top: 81px;
|
||||
font-size: 46px;
|
||||
color: #1fc7d4;
|
||||
text-align: center;
|
||||
`
|
||||
|
||||
const UnlockButtonDiv = styled(UnlockButton)`
|
||||
width: 80%;
|
||||
margin: 80px auto 10px auto;
|
||||
margin-left: 10%;
|
||||
margin: 80px auto 10px 10%;
|
||||
border-radius: 25px;
|
||||
`
|
||||
const FooterDiv = styled.div`
|
||||
width: 80%;
|
||||
|
|
@ -23,9 +26,7 @@ const UnunitedCom: React.FC = () => {
|
|||
const { t } = useTranslation()
|
||||
return (
|
||||
<>
|
||||
<HeadingDiv scale="xl" mb="24px" textAlign="center">
|
||||
{t('recommend')}
|
||||
</HeadingDiv>
|
||||
<HeadingDiv>{t('recommend')}</HeadingDiv>
|
||||
<UnlockButtonDiv />
|
||||
<FooterDiv>
|
||||
{/* <TextDiv color="textSubtle">{t('each time')}</TextDiv>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export const useBuyTransaction = () => {
|
|||
const { to, hccPrice, otherPaymentPrice, timestamp, code, sign } = data
|
||||
const params = [to, hccPrice, otherPaymentPrice, timestamp, code, sign]
|
||||
const res = await referralContract.mint(...params)
|
||||
console.log(res)
|
||||
return res
|
||||
}
|
||||
return transaction
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const MainDiv = styled.div`
|
|||
`
|
||||
|
||||
const ContentDiv = styled.div`
|
||||
width: 50%;
|
||||
max-width: 600px;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 40px;
|
||||
|
|
@ -61,29 +61,6 @@ const Nft: React.FC = () => {
|
|||
<UnunitedCom />
|
||||
</ContentUnunited>
|
||||
)}
|
||||
{/* {referralIsCommander ? (
|
||||
<>
|
||||
{account ? (
|
||||
<RegimentalCom />
|
||||
) : (
|
||||
<ContentUnunited>
|
||||
<UnunitedCom />
|
||||
</ContentUnunited>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{account ? (
|
||||
<ContentDiv>
|
||||
<ConnectedCom />
|
||||
</ContentDiv>
|
||||
) : (
|
||||
<ContentUnunited>
|
||||
<UnunitedCom />
|
||||
</ContentUnunited>
|
||||
)}
|
||||
</>
|
||||
)} */}
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9097,10 +9097,9 @@ ethereum-cryptography@^0.1.3:
|
|||
secp256k1 "^4.0.1"
|
||||
setimmediate "^1.0.5"
|
||||
|
||||
ethereumjs-abi@0.6.8:
|
||||
ethereumjs-abi@0.6.8, "ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git":
|
||||
version "0.6.8"
|
||||
resolved "https://registry.npmjs.org/ethereumjs-abi/-/ethereumjs-abi-0.6.8.tgz#71bc152db099f70e62f108b7cdfca1b362c6fcae"
|
||||
integrity sha512-Tx0r/iXI6r+lRsdvkFDlut0N08jWMnKRZ6Gkq+Nmw75lZe4e6o3EkSnkaBP5NF6+m5PTGAr9JP43N3LyeoglsA==
|
||||
resolved "git+https://github.com/ethereumjs/ethereumjs-abi.git#ee3994657fa7a427238e6ba92a84d0b529bbcde0"
|
||||
dependencies:
|
||||
bn.js "^4.11.8"
|
||||
ethereumjs-util "^6.0.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue