diff --git a/public/images/announcement/goback-icon.svg b/public/images/announcement/goback-icon.svg new file mode 100644 index 0000000..1d83b63 --- /dev/null +++ b/public/images/announcement/goback-icon.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/images/announcement/search-icon.svg b/public/images/announcement/search-icon.svg new file mode 100644 index 0000000..84de184 --- /dev/null +++ b/public/images/announcement/search-icon.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json index 232069f..5592efc 100644 --- a/public/locales/zh-CN.json +++ b/public/locales/zh-CN.json @@ -1105,6 +1105,18 @@ "Assets and chain":"资产公链", "each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时", "last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得", - "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费" - + "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费", + "announcement":"公告", + "return":"返回", + "Total capital pool":"资金池总额", + "The total amount of dividends":"分红总额", + "Pending dividend":"待领取分红", + "Number of boards":"董事会数量", + "Number of holders":"持有人数量", + "total revenue":"总收益", + "revenue":"收益", + "purchase":"购买", + "Enter a keyword search":"输入关键字搜索", + "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":"的提成！" } diff --git a/src/App.tsx b/src/App.tsx index 56fa646..44c7424 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,6 +52,7 @@ 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 Announcement = lazy(() => import('./views/Announcement')) // This config is required for number formatting BigNumber.config({ @@ -103,6 +104,9 @@ const App: React.FC = () => { + + + {/* @@ -153,6 +157,7 @@ const App: React.FC = () => { + {/* Redirect */} {/* diff --git a/src/components/Menu/config.ts b/src/components/Menu/config.ts index 3516e8d..9244c4a 100644 --- a/src/components/Menu/config.ts +++ b/src/components/Menu/config.ts @@ -50,6 +50,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [ icon: 'TicketIcon', href: '/board', }, + { + label: t('announcement'), + icon: 'TicketIcon', + href: '/announcement', + }, // { // label: t('Prediction (BETA)'), // icon: 'PredictionsIcon', diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json index e7f2c6e..4373195 100644 --- a/src/config/localization/translations.json +++ b/src/config/localization/translations.json @@ -1232,5 +1232,18 @@ "Assets and chain":"Assets and chain", "each time":"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time", "last bid":"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid", - "commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee" + "commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee", + "announcement":"announcement", + "return":"return", + "Total capital pool":"Total capital pool", + "The total amount of dividends":"The total amount of dividends", + "Pending dividend":"Pending dividend", + "Number of boards":"Number of boards", + "Number of holders":"Number of holders", + "total revenue":"total revenue", + "revenue":"revenue", + "purchase":"purchase", + "Enter a keyword search":"Enter a keyword search", + "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！" } diff --git a/src/services/announcement.ts b/src/services/announcement.ts new file mode 100644 index 0000000..bd4131e --- /dev/null +++ b/src/services/announcement.ts @@ -0,0 +1,18 @@ +import request from 'utils/request' + +export const getAnnouncementPage = (params) => { + return request.request({ + url: '/high_city/app/api/announcement/page', + method: 'get', + params, + }) +} + +export const getAnnouncementDetail = (id) => { + return request.request({ + url: `/high_city/app/api/announcement/detail/${id}`, + method: 'get', + }) +} + +export default getAnnouncementPage diff --git a/src/services/referral.ts b/src/services/referral.ts index e4a8f18..1367736 100644 --- a/src/services/referral.ts +++ b/src/services/referral.ts @@ -14,4 +14,11 @@ export const withdrawReward = () => { }) } +export const inviteReceive = () => { + return request.request({ + url: '/high_city/app/api/invite/reward/receive', + method: 'get', + }) +} + export default getReferralInfo diff --git a/src/types/referral.ts b/src/types/referral.ts index 0b3ae64..43cecd0 100644 --- a/src/types/referral.ts +++ b/src/types/referral.ts @@ -6,6 +6,7 @@ export enum ReferralConfigType { export interface ReferralConfigInfo { dividendFirst?: number dividendSecond?: number + receiveLimit?: number id?: number properties?: Record type?: string diff --git a/src/views/Announcement/components/Detail.tsx b/src/views/Announcement/components/Detail.tsx new file mode 100644 index 0000000..8186d32 --- /dev/null +++ b/src/views/Announcement/components/Detail.tsx @@ -0,0 +1,67 @@ +import React, { useState, useEffect, useMemo, useRef } from 'react' +import dayjs from 'dayjs' +import styled from 'styled-components' +import { useTranslation } from 'contexts/Localization' +import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit' + +interface ListProps { + title?: string + publishTime?: number + content?: string + close: () => void +} + +const DetailDiv = styled.div` + width: 80%; + background: rgba(255, 255, 255); + border-radius: 20px; + margin: 0 auto; + box-sizing: border-box; + padding: 40px 30px; +` +const HeaderFlex = styled(Flex)` + align-items: center; + cursor: pointer; +` +const TextBack = styled(Text)` + font-size: 18px; + color: #1fc7d4; + margin-left: 10px; +` +const HeadingText = styled(Heading)` + margin-top: 17px; + color: #333333; + font-size: 32px; +` +const TextTime = styled(Text)` + font-size: 14px; + color: #999999; + padding: 30px 0 20px 0; + border-bottom: 1px solid #e3e3e3; +` +const TextInfo = styled(Text)` + font-size: 14px; + color: #999999; + margin-top: 30px; +` + +const Detail: React.FC = ({ title, publishTime, content, close }) => { + const { t } = useTranslation() + const closeDetail = () => { + close() + } + return ( + <> + + + + {t('return')} + + {title} + {dayjs(publishTime).format('YYYY-MM-DD HH:mm')} + {content} + + + ) +} +export default Detail diff --git a/src/views/Announcement/components/ListItem.tsx b/src/views/Announcement/components/ListItem.tsx new file mode 100644 index 0000000..9f9f1df --- /dev/null +++ b/src/views/Announcement/components/ListItem.tsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react' +import styled from 'styled-components' +import { Text, Flex } from '@pancakeswap/uikit' + +interface InfoProps { + title?: string + content?: string + publishTime?: number +} + +const FlexTable = styled(Flex)` + padding: 25px 0 20px 0; + align-items: center; + justify-content: space-between; + cursor: pointer; + border-bottom: 1px solid #e3e3e3; +` +const TableInfo = styled.div` + width: 70%; +` +const TextTitle = styled(Text)` + font-size: 18px; + color: #333333; +` +const TextInfo = styled(Text)` + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font-size: 14px; + color: #666666; + margin-top: 10px; +` +const TextTime = styled(Text)` + font-size: 18px; + color: #999999; +` + +const ListItem: React.FC = ({ title, content, publishTime }) => { + return ( + <> + + + {title} + {content} + + {publishTime} + + + ) +} +export default ListItem diff --git a/src/views/Announcement/index.tsx b/src/views/Announcement/index.tsx new file mode 100644 index 0000000..0bacc21 --- /dev/null +++ b/src/views/Announcement/index.tsx @@ -0,0 +1,189 @@ +import React, { useState, useEffect, useMemo, useRef } from 'react' +import styled from 'styled-components' +import { useTranslation } from 'contexts/Localization' +import { getAnnouncementPage, getAnnouncementDetail } from 'services/announcement' +import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit' +import ListItem from './components/ListItem' +import Detail from './components/Detail' + +interface DetailProps { + title?: string + content?: string + publishTime?: number +} + +const MainDiv = styled.div` + width: 100%; + min-height: calc(100vh - 64px); + background: ${({ theme }) => theme.colors.gradients.bubblegum}; + box-sizing: border-box; + padding: 30px 0; +` +const TableDiv = styled.div` + width: 80%; + background: rgba(255, 255, 255); + border-radius: 20px; + margin: 0 auto; +` + +const SearchDiv = styled(Flex)` + box-sizing: border-box; + border-bottom: 1px solid #e3e3e3; + width: 100%; + height: 105px; + align-items: center; + justify-content: center; +` + +const InputMain = styled(Flex)` + width: 60%; + height: 45px; + border: 1px solid #1fc7d4; + border-radius: 30px; + box-sizing: border-box; + align-items: center; + justify-content: space-between; + padding: 0 4px; +` + +const SearchInput = styled(Input)` + background-color: transparent; + width: calc(100% - 80px); + :focus { + } +` +const SearchBtn = styled.div` + width: 50px; + height: 37px; + background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%); + border-radius: 19px; + display: flex; + align-items: center; + justify-content: center; +` + +const ListMain = styled.div` + box-sizing: border-box; + padding: 0 30px; +` + +const FlexTable = styled(Flex)` + padding: 25px 0 20px 0; + align-items: center; + justify-content: space-between; +` +const TableInfo = styled.div` + width: 70%; +` +const TextTitle = styled(Text)` + font-size: 18px; + color: #333333; +` +const DetailDiv = styled.div` + width: 80%; + background: rgba(255, 255, 255); + border-radius: 20px; + margin: 0 auto; + box-sizing: border-box; + padding: 40px 30px; +` +const HeaderFlex = styled(Flex)` + align-items: center; + cursor: pointer; +` +const TextBack = styled(Text)` + font-size: 18px; + color: #1fc7d4; + margin-left: 10px; +` +const HeadingText = styled(Heading)` + margin-top: 17px; + color: #333333; + font-size: 32px; +` +const TextTime = styled(Text)` + font-size: 14px; + color: #999999; + padding: 30px 0 20px 0; + border-bottom: 1px solid #e3e3e3; +` +const TextInfo = styled(Text)` + font-size: 14px; + color: #999999; + margin-top: 30px; +` + +const Announcement: React.FC = () => { + const { t } = useTranslation() + const loadMoreRef = useRef(null) + + const [detailVisible, setDetailVisible] = useState(false) + const [list, setList] = useState([]) + const [detailData, setDetailData] = useState({ title: '', publishTime: 0, content: '' }) + const getList = async (page: number, size: number) => { + const data = await getAnnouncementPage({ page, size }) + console.log(data.content) + setList(data.content) + } + useEffect(() => { + getList(1, 10) + }, []) + + const lookDetail = async (id) => { + const data = await getAnnouncementDetail(id) + setDetailData(data) + setDetailVisible(true) + } + const searchList = () => { + getList(1, 10) + } + const close = () => { + setDetailVisible(false) + } + + const renderContent = (): JSX.Element => { + return ( +
+ {list.map((item) => ( + lookDetail(item.id)}> + + + ))} +
+ ) + } + + return ( + + {detailVisible ? ( + + ) : ( + + + + + + + + + + + {renderContent()} +
+ {/* {list.map((item) => ( + lookDetail(item.id)}> + + + ))} */} + + + )} + + ) +} +export default Announcement diff --git a/src/views/Board/components/HeaderItem.tsx b/src/views/Board/components/HeaderItem.tsx new file mode 100644 index 0000000..f40c3f0 --- /dev/null +++ b/src/views/Board/components/HeaderItem.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { Text } from '@pancakeswap/uikit' +import styled from 'styled-components' + +interface InfoProps { + title: string + price: number +} + +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 HeaderItem: React.FC = ({ title, price }) => { + return ( + <> + + + {price} + + + {title} + + + + ) +} + +export default HeaderItem diff --git a/src/views/Board/index.tsx b/src/views/Board/index.tsx index aa45de6..37b8ea5 100644 --- a/src/views/Board/index.tsx +++ b/src/views/Board/index.tsx @@ -12,6 +12,7 @@ import useRefresh from 'hooks/useRefresh' import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions' import { useTranslation } from 'contexts/Localization' import BoardCard from './components/BoardCard/BoardCard' +import HeaderItem from './components/HeaderItem' const Header = styled.div` padding: 32px 0px; @@ -27,6 +28,9 @@ const Header = styled.div` const SecondText = styled(Text)` white-space: break-spaces; ` +const FlexLayoutMain = styled(FlexLayout)` + margin-top: 20px; +` const Boards: React.FC = () => { const { t } = useTranslation() const boardsList = useBoards() @@ -58,13 +62,22 @@ const Boards: React.FC = () => { <>
- {t('Boards')} + {t('Total capital pool')} - + {/* {t( 'Joining the board of directors will obtain the governance token xcandy \n participate in the governance of the project, vote, obtain additional pledge income, \n and have a higher invitation airdrop reward', )} - + */} + + 1.000.000.000.000 + + + + + + +
{renderContent()} diff --git a/src/views/Referral/components/BuyNftModal.tsx b/src/views/Referral/components/BuyNftModal.tsx index dcf6f69..ff31720 100644 --- a/src/views/Referral/components/BuyNftModal.tsx +++ b/src/views/Referral/components/BuyNftModal.tsx @@ -1,10 +1,10 @@ import React from 'react' import styled from 'styled-components' import { useTranslation } from 'contexts/Localization' +import { useReferralNormalConfigInfo, useReferralCommanderConfigInfo } from 'state/referral/hooks' import { Flex, Button, Modal, Image } from '@pancakeswap/uikit' import TextFlex from './TextFlex' import FlexCom from './FlexCom' -import { useBuyTransaction } from '../hooks' const ModalDiv = styled(Modal)` width: 80%; @@ -50,15 +50,19 @@ const ImageDiv = styled(Image)` const BuyNftModal: React.FC = () => { const { t } = useTranslation() - const sendBuyTransaction = useBuyTransaction() + const referralCommanderConfigInfo = useReferralCommanderConfigInfo() + const referralRewardInfo = useReferralNormalConfigInfo() // const onDismiss = () => {} - const handleBuy = () => { - sendBuyTransaction() - } return ( - + - + + {/* */} { /> - - + + @@ -75,7 +79,7 @@ const BuyNftModal: React.FC = () => { - {t('Buy It Now')} + {t('Buy It Now')} ) diff --git a/src/views/Referral/components/Connected.tsx b/src/views/Referral/components/Connected.tsx index 5a4550f..6407c7b 100644 --- a/src/views/Referral/components/Connected.tsx +++ b/src/views/Referral/components/Connected.tsx @@ -2,6 +2,12 @@ import React from 'react' import styled from 'styled-components' import { useTranslation } from 'contexts/Localization' import { Button, useModal, Text } from '@pancakeswap/uikit' +import { inviteReceive } from 'services/referral' +import { + useReferralNormalConfigInfo, + useReferralCommanderConfigInfo, + useReferralRewardInfo, +} from 'state/referral/hooks' import FlexCom from './FlexCom' import BuyNftModal from './BuyNftModal' import HeaderMain from './HeaderMain' @@ -13,6 +19,13 @@ const ButtonDiv = styled(Button)` border: 1px solid ${({ theme }) => theme.colors.textDisabled}; color: ${({ theme }) => theme.colors.textDisabled}; ` +const ButtonGet = styled(Button)` + width: 100%; + margin: 20px auto 0px auto; + border-radius: 50px; + border: 1px solid #1fc7d4; + color: #1fc7d4; +` const UpBtn = styled(Button)` width: 100%; @@ -41,23 +54,44 @@ const TextDiv = styled(Text)` const ConnectedCom: React.FC = () => { const { t } = useTranslation() const [onBuyModal] = useModal() - + const referralNormalConfigInfo = useReferralNormalConfigInfo() + console.log('referralNormalConfigInfo:', referralNormalConfigInfo) + const referralRewardInfo = useReferralRewardInfo() + console.log('referralRewardInfo:', referralRewardInfo) + const referralCommanderConfigInfo = useReferralCommanderConfigInfo() + const getInviteReceive = async () => { + await inviteReceive() + } return ( <> - - - + + + - {t('No income is received temporarily')} + {referralNormalConfigInfo.receiveLimit <= + referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? ( + + {t('Claim now')} + + ) : ( + {t('No income is received temporarily')} + )} + {t('Upgrade commander')} - {t('each time')} + {`${t( + 'By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins', + )}${referralCommanderConfigInfo.dividendFirst / 10000}%${t('The commission')}`} + {/* {t('each time')} {t('last bid')} - {t('commission fee')} + {t('commission fee')} */} ) diff --git a/src/views/Referral/components/HeaderMain.tsx b/src/views/Referral/components/HeaderMain.tsx index 43119fa..32276aa 100644 --- a/src/views/Referral/components/HeaderMain.tsx +++ b/src/views/Referral/components/HeaderMain.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { Image, Heading } from '@pancakeswap/uikit' interface HeaderProp { - title: string + title?: string } const HeadingDiv = styled(Heading)` @@ -17,7 +17,7 @@ const TipDiv = styled(Image)` top: 24px; left: 0; ` -const HeaderMain: React.FC = ({ title }) => { +const HeaderMain: React.FC = ({ title = '' }) => { return ( {title} diff --git a/src/views/Referral/components/Regimental.tsx b/src/views/Referral/components/Regimental.tsx index dabd677..d88649e 100644 --- a/src/views/Referral/components/Regimental.tsx +++ b/src/views/Referral/components/Regimental.tsx @@ -1,9 +1,10 @@ import React from 'react' import styled from 'styled-components' import { useTranslation } from 'contexts/Localization' -import { Text, Image, Button } from '@pancakeswap/uikit' +import { inviteReceive } from 'services/referral' +import { useReferralCommanderConfigInfo, useReferralRewardInfo } from 'state/referral/hooks' +import { Text, Image, Button, Heading } from '@pancakeswap/uikit' import FlexCom from './FlexCom' -import HeaderMain from './HeaderMain' const ButtonDiv = styled(Button)` width: 100%; @@ -12,6 +13,13 @@ const ButtonDiv = styled(Button)` border: 1px solid ${({ theme }) => theme.colors.textDisabled}; color: ${({ theme }) => theme.colors.textDisabled}; ` +const ButtonGet = styled(Button)` + width: 100%; + margin: 20px auto 0px auto; + border-radius: 50px; + border: 1px solid #1fc7d4; + color: #1fc7d4; +` const UpBtn = styled(Button)` width: 100%; @@ -62,24 +70,48 @@ const LogoImage = styled.div` align-items: center; justify-content: center; ` +const HeadingDiv = styled(Heading)` + padding-top: 30px; + position: relative; +` const RegimentalCom: React.FC = () => { const { t } = useTranslation() + const referralCommanderConfigInfo = useReferralCommanderConfigInfo() + console.log(referralCommanderConfigInfo) + const referralRewardInfo = useReferralRewardInfo() + const getInviteReceive = async () => { + await inviteReceive() + } return ( - + + {referralCommanderConfigInfo.properties.name} + - + + {/* */} <> - + + + + + + {/* { leftColor="textSubtle" value="100000.00(HCC)" /> - - + + */} - {t('No income is received temporarily')} - {/* {t('Upgrade commander')} */} + {referralCommanderConfigInfo.receiveLimit <= + referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? ( + + {t('Claim now')} + + ) : ( + {t('No income is received temporarily')} + )} + + {/* {t('Upgrade commander')} */} - {t('each time')} + {`${t( + 'By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins', + )}${referralCommanderConfigInfo.dividendFirst / 10000}%${t('The commission')}`} + {/* {t('each time')} {t('last bid')} - {t('commission fee')} + {t('commission fee')} */} diff --git a/src/views/Referral/components/UnunitedCom.tsx b/src/views/Referral/components/UnunitedCom.tsx index 2961506..7dd42e2 100644 --- a/src/views/Referral/components/UnunitedCom.tsx +++ b/src/views/Referral/components/UnunitedCom.tsx @@ -32,9 +32,9 @@ const UnunitedCom: React.FC = () => { - {t('each time')} + {/* {t('each time')} {t('last bid')} - {t('commission fee')} + {t('commission fee')} */} ) diff --git a/src/views/Referral/index.tsx b/src/views/Referral/index.tsx index 911f214..1eec00b 100644 --- a/src/views/Referral/index.tsx +++ b/src/views/Referral/index.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react' import styled from 'styled-components' import { fetchReferralInfoAsync } from 'state/actions' import { useAccount } from 'state/userInfo/hooks' -import { useReferralCommanderConfigInfo } from 'state/referral/hooks' +import { useReferralIsCommander } from 'state/referral/hooks' import { useDispatch } from 'react-redux' import UnunitedCom from './components/UnunitedCom' import ConnectedCom from './components/Connected' @@ -37,20 +37,31 @@ const ContentDiv = styled.div` ` const Nft: React.FC = () => { - // 邀请false普通邀请 true军团长邀请 - const [type, setType] = useState(false) const dispatch = useDispatch() const account = useAccount() - const referralConfigInfo = useReferralCommanderConfigInfo() - console.log(referralConfigInfo) + const referralIsCommander = useReferralIsCommander() + // const referralIsCommander = false + console.log('referralIsCommander:', referralIsCommander) useEffect(() => { dispatch(fetchReferralInfoAsync(account)) }, [account]) return ( - {type ? : {account ? : }} + {referralIsCommander ? ( + <> + {account ? ( + + ) : ( + + + + )} + + ) : ( + {account ? : } + )} ) }