= ({ onDismiss }) => {
+ const { t } = useTranslation()
+
+ const typeList = [
+ { label: '全部交易', value: '1' },
+ { label: '出售中', value: '2' },
+ { label: '已出售', value: '3' },
+ { label: '已购买', value: '4' },
+ ]
+ const [typeIndex, setTypeIndex] = useState(0)
+
+ const ThemedList = ['NFT名称', '价格', '时间', '状态', '操作']
+
+ const list = [{ name: 'Cat goddess Emerald ', icon: '', price: '1', time: '2022-02-02', status: '已售卖' }]
+
+ return (
+
+
+ 交易记录
+
+ {typeList.map((item, index) => {
+ return (
+ setTypeIndex(index)}>
+ {item.label}
+
+ )
+ })}
+
+ <>
+
+ {ThemedList.map((item) => {
+ return {item}
+ })}
+
+
+ {list.map((item) => {
+ return (
+
+
+
+ {item.name}
+
+ {item.price}
+ {item.time}
+ {item.status}
+
+ 详情
+ 交易Hash
+
+
+ )
+ })}
+
+
+
+ )
+}
+
+export default TransactionRecord
diff --git a/src/views/Bazaar/components/TransactionTable.tsx b/src/views/Bazaar/components/TransactionTable.tsx
new file mode 100644
index 0000000..77e1cd9
--- /dev/null
+++ b/src/views/Bazaar/components/TransactionTable.tsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+interface TableProps {
+ title?: string
+ th?: string[]
+ tr?: any
+}
+
+const FlexMain = styled.div`
+ margin-top: 30px;
+ height: 405px;
+ background: #fff;
+ font-size: 18px;
+ color: #999999;
+ z-index: 9999;
+ position: relative;
+ background: #fff;
+ box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+ border-radius: 20px;
+`
+const CloseImage = styled(Image)`
+ cursor: pointer;
+ position: absolute;
+ top: 30px;
+ right: 30px;
+`
+const HeaderText = styled(Text)`
+ font-size: 24px;
+ color: #333333;
+ text-align: center;
+ padding: 30px 0;
+`
+
+const TypeFlex = styled(Flex)`
+ flex-wrap: wrap;
+ align-items: center;
+ margin-top: 35px;
+ padding-left: 30px;
+ & > .active {
+ background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
+ color: #fff;
+ }
+`
+const TypeItem = styled(Flex)`
+ width: 128px;
+ height: 42px;
+ border: 1px solid #1fc7d4;
+ border-radius: 30px;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ color: #1fc7d4;
+ margin-right: 15px;
+ cursor: pointer;
+`
+const TableThemed = styled(Flex)`
+ height: 42px;
+ align-items: center;
+ /* flex-wrap: wrap; */
+`
+const ThemedItem = styled.div`
+ width: 100%;
+ height: 42px;
+ line-height: 42px;
+ text-align: center;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 16px;
+ color: #666666;
+ border-top: 1px solid #e3e3e3;
+`
+const TableBody = styled.div``
+const TrFlex = styled(Flex)`
+ height: 42px;
+ border-top: 1px solid #e3e3e3;
+ align-items: center;
+ /* flex-wrap: wrap; */
+`
+const TdFlex = styled(Flex)`
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ color: #666666;
+ font-size: 16px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+`
+const TdImage = styled(Image)`
+ margin-right: 20px;
+`
+const TdBtnFlex = styled(Flex)`
+ width: 197px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+`
+const DetailButton = styled(Button)`
+ width: 80px;
+ height: 30px;
+ background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
+ border-radius: 30px;
+ font-size: 12px;
+`
+const HashText = styled(Text)`
+ cursor: pointer;
+ font-size: 14px;
+ color: #1fc7d4;
+ margin-top: 5px;
+ border-bottom: 1px solid #1fc7d4;
+`
+
+const AuctionTable: React.FC = () => {
+ const { t } = useTranslation()
+
+ const ThemedList = ['事件', '单价', '卖方', '买方', '交易时间']
+
+ const list = [
+ { name: 'Cat goddess Emerald ', icon: '', price: '1', newPrice: '2', time: '2022-02-02', status: '已售卖' },
+ ]
+
+ return (
+
+ 交易历史
+ <>
+
+ {ThemedList.map((item) => {
+ return {item}
+ })}
+
+
+ {list.map((item) => {
+ return (
+
+ {item.name}
+ {item.price}
+ {item.newPrice}
+ {item.time}
+ {item.status}
+
+ )
+ })}
+
+
+
+ )
+}
+
+export default AuctionTable
diff --git a/src/views/Bazaar/index.tsx b/src/views/Bazaar/index.tsx
index ea1be75..c4f25e3 100644
--- a/src/views/Bazaar/index.tsx
+++ b/src/views/Bazaar/index.tsx
@@ -1,24 +1,30 @@
import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
+import Page from 'components/Layout/Page'
import { useAccount } from 'state/userInfo/hooks'
import useRefresh from 'hooks/useRefresh'
import { UnOpenModel } from 'components/Modal'
+import Content from './components/Content'
const PageContent = styled.div`
height: calc(100vh - 64px);
- /* background-image: url('/images/home/bg.svg');
+ background-image: url('/images/home/bg.svg');
background-size: cover;
- background-repeat: no-repeat; */
- background-image: url('/images/page/bazaar.jpg');
+ background-repeat: no-repeat;
+
+ /* background-image: url('/images/page/bazaar.jpg');
background-position: 50%;
background-size: 50% 90%;
- background-repeat: no-repeat;
+ background-repeat: no-repeat; */
`
const Bazaar: React.FC = () => {
return (
-
+
+
+
+ {/* */}
)
}
diff --git a/src/views/Compound/index.tsx b/src/views/Compound/index.tsx
index 3c28231..5888ec0 100644
--- a/src/views/Compound/index.tsx
+++ b/src/views/Compound/index.tsx
@@ -16,21 +16,21 @@ interface RoundDetailProps {
const PageContent = styled.div`
min-height: calc(100vh - 64px);
- /* background-image: url('/images/nft/bg.svg');
+ background-image: url('/images/nft/bg.svg');
background-size: cover;
- background-repeat: no-repeat; */
+ background-repeat: no-repeat;
- background-image: url('/images/page/compound.jpg');
+ /* background-image: url('/images/page/compound.jpg');
background-position: 50%;
background-size: 60% 90%;
- background-repeat: no-repeat;
+ background-repeat: no-repeat; */
`
const NftBox: React.FC = () => {
return (
-
- {/* */}
+ {/* */}
+
)
}
diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx
index a333972..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'
@@ -56,8 +58,9 @@ const TextDetail = styled(Text)`
const CourseCom: React.FC = () => {
const { t } = useTranslation()
+ const location = useLocation()
+ const ref = useRef(null)
const [list, setListState] = useState([])
-
useEffect(() => {
setListState([
{
@@ -104,15 +107,90 @@ 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}
@@ -125,12 +203,12 @@ const CourseCom: React.FC = () => {
})}
- ))}
+ ))} */}
-
+
)
}
diff --git a/src/views/Home/components/UnOpenModel.tsx b/src/views/Home/components/UnOpenModel.tsx
index cc7e8e8..3f20a88 100644
--- a/src/views/Home/components/UnOpenModel.tsx
+++ b/src/views/Home/components/UnOpenModel.tsx
@@ -31,7 +31,7 @@ const UnOpenModel: React.FC = () => {
return (
- {t('Stay tuned')}
+ {t('Coming Soon')}
{t('This page is not currently open')}
)