diff --git a/.env.development b/.env.development index 203f334..6dda3a2 100644 --- a/.env.development +++ b/.env.development @@ -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' diff --git a/.env.production b/.env.production index ba50e11..1dc4757 100644 --- a/.env.production +++ b/.env.production @@ -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' diff --git a/build.zip b/build.zip index 9e71f1c..988c401 100644 Binary files a/build.zip and b/build.zip differ diff --git a/public/images/nft/bg.svg b/public/images/nft/bg.svg new file mode 100644 index 0000000..280b30e --- /dev/null +++ b/public/images/nft/bg.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/images/nft/box.svg b/public/images/nft/box.svg new file mode 100644 index 0000000..a973694 --- /dev/null +++ b/public/images/nft/box.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/public/images/nft/close.svg b/public/images/nft/close.svg new file mode 100644 index 0000000..d7bdf5a --- /dev/null +++ b/public/images/nft/close.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/images/nft/common.svg b/public/images/nft/common.svg new file mode 100644 index 0000000..ca991d7 --- /dev/null +++ b/public/images/nft/common.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/public/images/nft/epic-icon.svg b/public/images/nft/epic-icon.svg new file mode 100644 index 0000000..f4fd1e4 --- /dev/null +++ b/public/images/nft/epic-icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/public/images/nft/epic.svg b/public/images/nft/epic.svg new file mode 100644 index 0000000..f270229 --- /dev/null +++ b/public/images/nft/epic.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/public/images/nft/hammer.svg b/public/images/nft/hammer.svg new file mode 100644 index 0000000..aed6403 --- /dev/null +++ b/public/images/nft/hammer.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/public/images/nft/legend-icon.svg b/public/images/nft/legend-icon.svg new file mode 100644 index 0000000..3bf726c --- /dev/null +++ b/public/images/nft/legend-icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/public/images/nft/legend.svg b/public/images/nft/legend.svg new file mode 100644 index 0000000..fe923e6 --- /dev/null +++ b/public/images/nft/legend.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/public/images/nft/uncommon-icon.svg b/public/images/nft/uncommon-icon.svg new file mode 100644 index 0000000..b44f3b6 --- /dev/null +++ b/public/images/nft/uncommon-icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/public/images/nft/uncommon.svg b/public/images/nft/uncommon.svg new file mode 100644 index 0000000..e425570 --- /dev/null +++ b/public/images/nft/uncommon.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/public/images/page/bazaar.jpg b/public/images/page/bazaar.jpg new file mode 100644 index 0000000..5327d42 Binary files /dev/null and b/public/images/page/bazaar.jpg differ diff --git a/public/images/page/compound.jpg b/public/images/page/compound.jpg new file mode 100644 index 0000000..dafa5cf Binary files /dev/null and b/public/images/page/compound.jpg differ diff --git a/public/images/page/nftBox.jpg b/public/images/page/nftBox.jpg new file mode 100644 index 0000000..cac9d23 Binary files /dev/null and b/public/images/page/nftBox.jpg differ diff --git a/public/index.html b/public/index.html index 308e168..5e7953a 100644 --- a/public/index.html +++ b/public/index.html @@ -8,11 +8,11 @@ - + - HighCity Swap + HiCity Swap 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 = () => { - - + + + + + + + + + + + {/* diff --git a/src/components/Menu/config.ts b/src/components/Menu/config.ts index de4f67d..377cb04 100644 --- a/src/components/Menu/config.ts +++ b/src/components/Menu/config.ts @@ -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', }, // { diff --git a/src/components/Modal/ModalInput.tsx b/src/components/Modal/ModalInput.tsx index c2ed52d..353e608 100644 --- a/src/components/Modal/ModalInput.tsx +++ b/src/components/Modal/ModalInput.tsx @@ -107,10 +107,11 @@ const ModalInput: React.FC = ({ {isBalanceZero && ( - {t('No tokens to stake')}:{' '} + {t('No tokens to stake')} + {/* :{' '} {t('Get %symbol%', { symbol })} - + */} )} diff --git a/src/components/Modal/UnOpenModel.tsx b/src/components/Modal/UnOpenModel.tsx new file mode 100644 index 0000000..0a122a1 --- /dev/null +++ b/src/components/Modal/UnOpenModel.tsx @@ -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 ( + <> + + + + {t('Stay tuned')} + {t('This page is not currently open')} + {t('Viewing the Path Diagram')} + + + + ) +} +export default UnOpenModel diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts index 975e488..f8e3300 100644 --- a/src/components/Modal/index.ts +++ b/src/components/Modal/index.ts @@ -1,2 +1,3 @@ export { default as ModalActions } from './ModalActions' export { default as ModalInput } from './ModalInput' +export { default as UnOpenModel } from './UnOpenModel' diff --git a/src/config/constants/contracts.ts b/src/config/constants/contracts.ts index 5db9f27..081051f 100644 --- a/src/config/constants/contracts.ts +++ b/src/config/constants/contracts.ts @@ -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', diff --git a/src/config/constants/meta.ts b/src/config/constants/meta.ts index 41f3def..13fb305 100644 --- a/src/config/constants/meta.ts +++ b/src/config/constants/meta.ts @@ -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 diff --git a/src/config/constants/tokens.ts b/src/config/constants/tokens.ts index 6dcd817..790884e 100644 --- a/src/config/constants/tokens.ts +++ b/src/config/constants/tokens.ts @@ -73,7 +73,7 @@ const tokens = { symbol: 'HCC', address: { 56: '0x20de22029ab63cf9A7Cf5fEB2b737Ca1eE4c82A6', - 97: '0xE7619D544bD06f4d7362c8aA06a4ca0Ea73ce8c2', + 97: '0x5554c56e94bf07a85206dfeb584c7cb7f7d21227', }, decimals: 18, projectLink: 'https://tranchess.com/', diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json index a11b707..fa9dab1 100644 --- a/src/config/localization/translations.json +++ b/src/config/localization/translations.json @@ -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" } diff --git a/src/hooks/useGetDocumentTitlePrice.ts b/src/hooks/useGetDocumentTitlePrice.ts index 12a9214..db04b3c 100644 --- a/src/hooks/useGetDocumentTitlePrice.ts +++ b/src/hooks/useGetDocumentTitlePrice.ts @@ -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 diff --git a/src/views/Announcement/components/Detail.tsx b/src/views/Announcement/components/Detail.tsx index 8186d32..c58d58a 100644 --- a/src/views/Announcement/components/Detail.tsx +++ b/src/views/Announcement/components/Detail.tsx @@ -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 = ({ title, publishTime, content, close }) => { diff --git a/src/views/Announcement/index.tsx b/src/views/Announcement/index.tsx index 80a1ea8..27b387f 100644 --- a/src/views/Announcement/index.tsx +++ b/src/views/Announcement/index.tsx @@ -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; diff --git a/src/views/Bazaar/index.tsx b/src/views/Bazaar/index.tsx new file mode 100644 index 0000000..bd28a93 --- /dev/null +++ b/src/views/Bazaar/index.tsx @@ -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 ( + + + + ) +} +export default Bazaar diff --git a/src/views/BlindBox/component/FlexText.tsx b/src/views/BlindBox/component/FlexText.tsx new file mode 100644 index 0000000..109620a --- /dev/null +++ b/src/views/BlindBox/component/FlexText.tsx @@ -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 = ({ name, value }) => { + return ( + + + {name}： + + + {value} + + + ) +} +export default FlexText diff --git a/src/views/BlindBox/component/Header.tsx b/src/views/BlindBox/component/Header.tsx new file mode 100644 index 0000000..6c9a13c --- /dev/null +++ b/src/views/BlindBox/component/Header.tsx @@ -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 = ({ name, value }) => { + const { t } = useTranslation() + const [onSeriesDetail] = useModal() + + return ( + +
+ + {t('time remaining')} + {t('%hour%hour', { hour: 7 })} + + ? + + ) +} +export default Header diff --git a/src/views/BlindBox/component/Operation.tsx b/src/views/BlindBox/component/Operation.tsx new file mode 100644 index 0000000..fe7a4b8 --- /dev/null +++ b/src/views/BlindBox/component/Operation.tsx @@ -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 = ({ detail }) => { + const { t } = useTranslation() + + return ( + + + {t('series')} + {detail.series} + + + {t('price')} + + + {detail.price} + + HCC + + + + {t('quantity')} + + + + ) +} +export default Operation diff --git a/src/views/BlindBox/component/SeriesDetail.tsx b/src/views/BlindBox/component/SeriesDetail.tsx new file mode 100644 index 0000000..f0c89cc --- /dev/null +++ b/src/views/BlindBox/component/SeriesDetail.tsx @@ -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 = ({ 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 ( +
+ + {t('limit the quantity of')} + 10000 + + + + {t('nft Smoking in the probability')} + {t('%num%kind nft', { num: 100 })} + +
+ {list.map((item) => { + return ( + + {item.label} + + {item.list.map((childItem) => { + return + })} + + + ) + })} +
+ +
+ ) +} +export default SeriesDetail diff --git a/src/views/BlindBox/component/ShopList.tsx b/src/views/BlindBox/component/ShopList.tsx new file mode 100644 index 0000000..ebc8a2d --- /dev/null +++ b/src/views/BlindBox/component/ShopList.tsx @@ -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 = ({ item }) => { + const { t } = useTranslation() + + return ( + +
+ {item.type === 1 &&
{t('epic')}
} + {item.type === 2 &&
{t('legend')}
} + {item.type === 3 &&
{t('uncommon')}
} + {item.type === 4 &&
{t('common')}
} +
+ {item.type === 1 && } + {item.type === 2 && } + {item.type === 3 && } + {item.type === 4 && } + {item.label} + {item.probability}% + {t('The rate of')} + + ) +} +export default ShopList diff --git a/src/views/Nft/component/StepCom.tsx b/src/views/BlindBox/component/StepCom.tsx similarity index 65% rename from src/views/Nft/component/StepCom.tsx rename to src/views/BlindBox/component/StepCom.tsx index 55d1826..078fb90 100644 --- a/src/views/Nft/component/StepCom.tsx +++ b/src/views/BlindBox/component/StepCom.tsx @@ -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 = ({ 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 ( - {/* onAdd('sub')} width={25} height={25} /> */} - onAdd('sub')}>- + onChange('sub')}>- {valNumber} - onAdd('add')}>+ - {/* 1 onAdd('add')} width={25} height={25} /> */} + onChange('add')}>+ ) } +export default StepCom diff --git a/src/views/BlindBox/index.tsx b/src/views/BlindBox/index.tsx new file mode 100644 index 0000000..7c48e84 --- /dev/null +++ b/src/views/BlindBox/index.tsx @@ -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 ( + + + + {blindBoxList.map((item) => { + return ( + + + +
+
{t('epic')}
+
+
+ + + + + + + ) + })} + + + ) +} +export default BlindBox diff --git a/src/views/Board/components/BoardCard/CardActionsContainer.tsx b/src/views/Board/components/BoardCard/CardActionsContainer.tsx index 135293b..3d618ab 100644 --- a/src/views/Board/components/BoardCard/CardActionsContainer.tsx +++ b/src/views/Board/components/BoardCard/CardActionsContainer.tsx @@ -90,7 +90,13 @@ const CardActions: React.FC = ({ board, account }) => { */} - + {/* */} {/* {t('Unclaimed income')} diff --git a/src/views/Board/components/BoardCard/HarvestAction.tsx b/src/views/Board/components/BoardCard/HarvestAction.tsx index beee83c..6e6d6a9 100644 --- a/src/views/Board/components/BoardCard/HarvestAction.tsx +++ b/src/views/Board/components/BoardCard/HarvestAction.tsx @@ -49,7 +49,7 @@ const HarvestAction: React.FC = ({ 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) { diff --git a/src/views/Board/components/HeaderItem.tsx b/src/views/Board/components/HeaderItem.tsx index 444881c..64f5ffa 100644 --- a/src/views/Board/components/HeaderItem.tsx +++ b/src/views/Board/components/HeaderItem.tsx @@ -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 = ({ title, price }) => { return ( <> - {/* - {price} - */} - - - {title} - + + {title} ) diff --git a/src/views/Board/index.tsx b/src/views/Board/index.tsx index e84eeaf..6e71964 100644 --- a/src/views/Board/index.tsx +++ b/src/views/Board/index.tsx @@ -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 ( + {/* */}
- - {t('Total capital pool')} - - + {t('Total capital pool')} + {/* */} diff --git a/src/views/Compound/components/CompoundBox.tsx b/src/views/Compound/components/CompoundBox.tsx new file mode 100644 index 0000000..35f99a0 --- /dev/null +++ b/src/views/Compound/components/CompoundBox.tsx @@ -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 ( + + + + + + + + + 合成成功预览 + NFT名称 + 暂无 + 合成成功数量 + 0 + + + + + 0% + 合成成功率 + + 合成 + + 预计合成费用 + -----HCC + + + + 2 + + + ) +} +export default CompoundBox diff --git a/src/views/Compound/index.tsx b/src/views/Compound/index.tsx new file mode 100644 index 0000000..3c28231 --- /dev/null +++ b/src/views/Compound/index.tsx @@ -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 ( + + + {/* */} + + ) +} +export default NftBox diff --git a/src/views/Home/HomeIndex.tsx b/src/views/Home/HomeIndex.tsx index a49a164..581a9a8 100644 --- a/src/views/Home/HomeIndex.tsx +++ b/src/views/Home/HomeIndex.tsx @@ -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' diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index 8d64e91..a333972 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -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 = () => { {list.map((item, index) => ( - + - {item.title} + {item.title} {item.list.map((childItem) => { return ( - + {childItem.text} - + ) })} diff --git a/src/views/Home/components/FlexItemCom.tsx b/src/views/Home/components/FlexItemCom.tsx index 9248b5d..29be68b 100644 --- a/src/views/Home/components/FlexItemCom.tsx +++ b/src/views/Home/components/FlexItemCom.tsx @@ -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 = ({ name, valueNum }) => { diff --git a/src/views/Home/components/FristCom.tsx b/src/views/Home/components/FristCom.tsx index 8e4cc20..682559b 100644 --- a/src/views/Home/components/FristCom.tsx +++ b/src/views/Home/components/FristCom.tsx @@ -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() + const hccPriceUsdt = usePriceHccUsdt() const [linkList, setLinkList] = useState([]) @@ -165,18 +188,18 @@ const FristCom: React.FC = () => { - + - - High City Coin - - {t('Hcc Info')} - {t('Hcc Nft')} - {t('Hcc BTC')} + Hi City Coin + {/* + Hi City Coin + */} + {t('Hcc Info')} + {t('Hcc Nft')} + {t('Hcc BTC')} - openLink('https://pancake.kiemtienonline360.com/#/swap')}> - {t('Exchange')} - + {t('IDO Exchange')} + {t('social contact demo')} {linkList?.map((item, index) => { return index < 6 ? ( @@ -200,11 +223,8 @@ const FristCom: React.FC = () => { - + - {/* {burned.map((item) => { - return - })} */} diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx index 0420955..300c0fa 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -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 = () => {
- HighCitySwap + HiCitySwap {t('HighCitySwapInfo')} diff --git a/src/views/Home/components/UnOpenModel.tsx b/src/views/Home/components/UnOpenModel.tsx new file mode 100644 index 0000000..cc7e8e8 --- /dev/null +++ b/src/views/Home/components/UnOpenModel.tsx @@ -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 ( + + {t('Stay tuned')} + {t('This page is not currently open')} + + ) +} + +export default UnOpenModel diff --git a/src/views/Ido/components/GetCard.tsx b/src/views/Ido/components/GetCard.tsx index bed3f5a..df785af 100644 --- a/src/views/Ido/components/GetCard.tsx +++ b/src/views/Ido/components/GetCard.tsx @@ -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 = ({ price = 0, time = 0 }) => { const { t } = useTranslation() @@ -39,15 +55,15 @@ const ExchangeCard: React.FC = ({ price = 0, time = 0 }) => { {/* 当前时间大于锁仓时间 不显示 */}
- {t('IDO Get')} + {t('IDO Get')} {new Date().getTime() <= time && ( - + {t('Estimated time of collection')}：{dayjs(time).format('YYYY-MM-DD HH:mm:ss')} - + )} - {t('amount')}： - {price}HCC + {t('amount')}： + {price}HCC
diff --git a/src/views/Ido/components/RateText.tsx b/src/views/Ido/components/RateText.tsx index c48a132..3c51a1e 100644 --- a/src/views/Ido/components/RateText.tsx +++ b/src/views/Ido/components/RateText.tsx @@ -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 = ({ status, roundDetail }) => { return ( <> - + {t('Exchange rate')}： {status === 'none' ? '-------' : `1USDT=${roundDetail?.price}HCC`} - + {t('gross')}：{status === 'none' ? ' -------- ' : `${roundDetail?.total}HCC`} - + {t('remaining quantity')}：{status === 'none' ? ' -------- ' : `${roundDetail?.remaining}HCC`} diff --git a/src/views/Ido/hooks/index.ts b/src/views/Ido/hooks/index.ts index 3bed001..f84effa 100644 --- a/src/views/Ido/hooks/index.ts +++ b/src/views/Ido/hooks/index.ts @@ -62,6 +62,7 @@ export const useBuyTransaction = () => { export const useGetRound = () => { const transaction = async () => { const data = await getPurchaseActivity() + console.log(data) if (!data) { return null } diff --git a/src/views/Ido/index.tsx b/src/views/Ido/index.tsx index 5b17e0a..b0488b2 100644 --- a/src/views/Ido/index.tsx +++ b/src/views/Ido/index.tsx @@ -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') diff --git a/src/views/Nft/component/FlexText.tsx b/src/views/Nft/component/FlexText.tsx deleted file mode 100644 index 805530b..0000000 --- a/src/views/Nft/component/FlexText.tsx +++ /dev/null @@ -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 ( - - - {name}： - - - {value} - - - ) -} diff --git a/src/views/Nft/index.tsx b/src/views/Nft/index.tsx deleted file mode 100644 index 933b4b4..0000000 --- a/src/views/Nft/index.tsx +++ /dev/null @@ -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 ( - - - {blindboxList.map((item) => { - return ( - - - - - {/* - - */} - - 剩余时间 - 7小时 - - - - - 系列 - 法式盛宴 - - - 价格 - - - 500 - - 黄油 - - - - 数量 - - - - - - - - - - - - ) - })} - - - ) -} -export default Nft diff --git a/src/views/NftBox/components/Box.tsx b/src/views/NftBox/components/Box.tsx new file mode 100644 index 0000000..e644ce8 --- /dev/null +++ b/src/views/NftBox/components/Box.tsx @@ -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 ( + + + + + + {status.map((item, index) => { + return ( + cutStatus(index)} + > + {item.label} + + ) + })} + + {t('Did not have')} + {/* 商品 */} + + {list.map((item) => { + return + })} + + + ) +} +export default NftBox diff --git a/src/views/NftBox/components/DetailModal.tsx b/src/views/NftBox/components/DetailModal.tsx new file mode 100644 index 0000000..cf5810a --- /dev/null +++ b/src/views/NftBox/components/DetailModal.tsx @@ -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 = ({ 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 ( +
+ + + +
+ {item.type === 1 &&
{t('epic')}
} + {item.type === 2 &&
{t('legend')}
} + {item.type === 3 &&
{t('uncommon')}
} + {item.type === 4 &&
{t('common')}
} +
+ {item.type === 1 && } + {item.type === 2 && } + {item.type === 3 && } + {item.type === 4 && } + + + + Cat goddess Emerald + + + + + + + {t('Selling immediately')} + + + +
+ ) +} +export default DetailModal diff --git a/src/views/NftBox/components/FlexText.tsx b/src/views/NftBox/components/FlexText.tsx new file mode 100644 index 0000000..3762b43 --- /dev/null +++ b/src/views/NftBox/components/FlexText.tsx @@ -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 = ({ title, value, marginTop = '20px', color = '#666666', fontSize = '14px' }) => { + return ( + + {title} + {value} + + ) +} +export default FlexText diff --git a/src/views/NftBox/components/NumMain.tsx b/src/views/NftBox/components/NumMain.tsx new file mode 100644 index 0000000..d1256b6 --- /dev/null +++ b/src/views/NftBox/components/NumMain.tsx @@ -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 = ({ quantity, withNumber }) => { + const { t } = useTranslation() + + return ( + + +
+ {quantity} + + {t('total quantity')} + +
+ + +
+ {withNumber} + + {t('With the number')} + +
+ + + ) +} +export default NumMain diff --git a/src/views/NftBox/components/ShopList.tsx b/src/views/NftBox/components/ShopList.tsx new file mode 100644 index 0000000..bf6f4c7 --- /dev/null +++ b/src/views/NftBox/components/ShopList.tsx @@ -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 = ({ item }) => { + const { t } = useTranslation() + const [onDetailModal] = useModal() + + return ( + +
+ {item.type === 1 &&
{t('epic')}
} + {item.type === 2 &&
{t('legend')}
} + {item.type === 3 &&
{t('uncommon')}
} + {item.type === 4 &&
{t('common')}
} +
+ {item.type === 1 && } + {item.type === 2 && } + {item.type === 3 && } + {item.type === 4 && } + {item.label} + + ) +} +export default ShopList diff --git a/src/views/NftBox/index.tsx b/src/views/NftBox/index.tsx new file mode 100644 index 0000000..234aec3 --- /dev/null +++ b/src/views/NftBox/index.tsx @@ -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 ( + + + {/* */} + + ) +} +export default NftBox diff --git a/src/views/Referral/components/BuyNftModal.tsx b/src/views/Referral/components/BuyNftModal.tsx index 7a607e8..5b86573 100644 --- a/src/views/Referral/components/BuyNftModal.tsx +++ b/src/views/Referral/components/BuyNftModal.tsx @@ -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; diff --git a/src/views/Referral/components/Connected.tsx b/src/views/Referral/components/Connected.tsx index 725af50..3cbd9ba 100644 --- a/src/views/Referral/components/Connected.tsx +++ b/src/views/Referral/components/Connected.tsx @@ -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 = () => { diff --git a/src/views/Referral/components/FlexCom.tsx b/src/views/Referral/components/FlexCom.tsx index 5f0e878..5a1f6df 100644 --- a/src/views/Referral/components/FlexCom.tsx +++ b/src/views/Referral/components/FlexCom.tsx @@ -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 = ({ leftColor = 'text', rightColor = 'textSubtle', typeLink, + size = '16px', + textColor = '#1FC7D4', }) => { const openPage = () => { console.log(typeLink) @@ -36,13 +39,21 @@ const FlexCom: React.FC = ({ return ( - {name} + + {name} + {typeLink ? ( - + {value} ) : ( - {value} + + {value} + )} ) diff --git a/src/views/Referral/components/HeaderMain.tsx b/src/views/Referral/components/HeaderMain.tsx index 32276aa..2dd4be8 100644 --- a/src/views/Referral/components/HeaderMain.tsx +++ b/src/views/Referral/components/HeaderMain.tsx @@ -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 = ({ title = '' }) => { - return ( - - {title} - - ) + return {title} } export default HeaderMain diff --git a/src/views/Referral/components/Regimental.tsx b/src/views/Referral/components/Regimental.tsx index 14a2ec5..18de2eb 100644 --- a/src/views/Referral/components/Regimental.tsx +++ b/src/views/Referral/components/Regimental.tsx @@ -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; diff --git a/src/views/Referral/components/UnunitedCom.tsx b/src/views/Referral/components/UnunitedCom.tsx index a089c23..011b5bf 100644 --- a/src/views/Referral/components/UnunitedCom.tsx +++ b/src/views/Referral/components/UnunitedCom.tsx @@ -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 ( <> - - {t('recommend')} - + {t('recommend')} {/* {t('each time')} diff --git a/src/views/Referral/hooks/index.ts b/src/views/Referral/hooks/index.ts index 9f99c47..4a5fc4b 100644 --- a/src/views/Referral/hooks/index.ts +++ b/src/views/Referral/hooks/index.ts @@ -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 diff --git a/src/views/Referral/index.tsx b/src/views/Referral/index.tsx index 7ef177c..d453d27 100644 --- a/src/views/Referral/index.tsx +++ b/src/views/Referral/index.tsx @@ -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 = () => { )} - {/* {referralIsCommander ? ( - <> - {account ? ( - - ) : ( - - - - )} - - ) : ( - <> - {account ? ( - - - - ) : ( - - - - )} - - )} */} ) } diff --git a/yarn.lock b/yarn.lock index 8f067d8..cedf738 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"