= ({ name, value, onDismiss }) => {
+ const { t } = useTranslation()
+ const [list, setList] = useState([])
+
+ const pitchOn = (index) => {
+ list[index].select = !list[index].select
+ setList([...list])
+ }
+ useEffect(() => {
+ setList([
+ { label: 'Cat goddess Emerald ', type: 1, id: 1, select: true },
+ { label: 'Cat goddess Emerald ', type: 2, id: 2, select: false },
+ { label: 'Cat goddess Emerald ', type: 3, id: 3, select: false },
+ { label: 'Cat goddess Emerald ', type: 4, id: 4, select: false },
+ { label: 'Cat goddess Emerald ', type: 1, id: 5, select: false },
+ ])
+ }, [])
+
+ return (
+
+
+ {list.map((item, index) => {
+ return (
+ pitchOn(index)} className={item.select ? 'active' : ''}>
+ {item.select && }
+
+ {item.label}
+
+ )
+ })}
+
+
+ {t('add NFT')}
+ {t('Sign out')}
+
+
+ )
+}
+export default ShopModal
diff --git a/src/views/Compound/components/SynthesisDetail.tsx b/src/views/Compound/components/SynthesisDetail.tsx
new file mode 100644
index 0000000..5add9d8
--- /dev/null
+++ b/src/views/Compound/components/SynthesisDetail.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text } from '@pancakeswap/uikit'
+
+const Detail = styled.div`
+ width: 100%;
+ background: rgba(255, 255, 255, 0.39);
+ box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+ border-radius: 30px;
+ padding: 20px;
+ margin-top: 30px;
+`
+const DetailTitle = styled(Text)`
+ font-size: 24px;
+ color: #333333;
+ text-align: center;
+`
+
+const DetailText = styled(Text)`
+ font-size: 14px;
+ color: #999999;
+ margin-bottom: 15px;
+`
+
+const SynthesisDetail: React.FC = () => {
+ const { t } = useTranslation()
+
+ return (
+
+ {t('Synthesis of details')}
+ {t('Synthesis results: synthesis success, no change, synthesis failure;')}
+
+ {t('Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;')}
+
+
+ {t('No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;')}
+
+
+ {t(
+ 'Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;',
+ )}
+
+ {t('compound probability:')}
+
+ {t('NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost')}
+
+
+ )
+}
+export default SynthesisDetail
diff --git a/src/views/Compound/index.tsx b/src/views/Compound/index.tsx
new file mode 100644
index 0000000..5888ec0
--- /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..2bd9e0b 100644
--- a/src/views/Home/components/CourseCom.tsx
+++ b/src/views/Home/components/CourseCom.tsx
@@ -1,4 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, MutableRefObject, useEffect, useRef } from 'react'
+import { useLocation, useHistory, useParams } from 'react-router-dom'
+import { FixedSizeList } from 'react-window'
import styled from 'styled-components'
import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
import { useTranslation } from 'contexts/Localization'
@@ -40,17 +42,25 @@ 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()
+ const location = useLocation()
+ const ref = useRef(null)
const [list, setListState] = useState([])
-
useEffect(() => {
setListState([
{
@@ -58,7 +68,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') },
],
},
@@ -97,33 +107,108 @@ const CourseCom: React.FC = () => {
],
},
])
+ setTimeout(() => {
+ const offsetTop = ref.current.offsetTop + 100
+ if (location.search) {
+ window.scrollTo({
+ top: offsetTop,
+ behavior: 'smooth',
+ })
+ }
+ })
}, [t])
return (
- <>
+
- {list.map((item, index) => (
-
+
+
+ {t('Stage one: Origin')}
+
+ {t('The project concept was born in May 2021')}
+
+
+ {t('Set up HiCity team in June 2021')}
+
+
+ {t('May 2021 -- January 2022 Team run-in')}
+
+
+
+
+
+ {t('Stage two: Action')}
+
+ {t(
+ 'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
+ )}
+
+
+ {t('In March 2022, project approval, web design, roadmap announcement, smart contract development')}
+
+
+
+
+
+ {t('Stage three: Creation')}
+
+ {t('Created by NFT in May 2022')}
+
+
+ {t('June 2022 social software development')}
+
+
+
+
+
+ {t('Stage four: Integration')}
+
+ {t('Launch of social software in December 2022')}
+
+
+ {t('December 2022 NFT bonus binding social software')}
+
+
+ {t('In December 2022, HighCity Ecology was preliminarily completed')}
+
+
+
+
+
+ {t('Stage five: Closing the curtain')}
+
+ {t('HighCity Ecology completed in December 2022')}
+
+
+ {t('Set up HiCity team in June 2021')}
+
+
+ {t('Maintain dividend income growth in December 2022')}
+
+
+
+ {/* {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 = () => {