diff --git a/public/images/home/logo.svg b/public/images/home/logo.svg index f73f140..362a665 100644 --- a/public/images/home/logo.svg +++ b/public/images/home/logo.svg @@ -1,3 +1,10 @@ - - + + + + + diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json index 933acbc..1df6bc0 100644 --- a/public/locales/zh-CN.json +++ b/public/locales/zh-CN.json @@ -116,7 +116,7 @@ "Total jackpot this round": "此回合的总累积奖池", "Collect Winnings": "收集奖金", "Buy Tickets": "购买彩票", - "Harvest": "收割", + "Harvest": "领取收益", "Approve": "批准", "Select": "选择", "Winning Numbers This Round": "此回合的中奖号码", @@ -217,7 +217,7 @@ "Prize Pot": "奖金池", "Winners": "获胜者", "No. Matched": "中的号码数", - "Approve Contract": "批准合约", + "Approve %coin% Contract": "批准 %coin% 合约", "%asset% staked": "%asset% 已质押", "Total Value Locked": "锁定的总价值", "Across all LPs and Syrup Pools": "在所有 LP 和 Syrup 资金池中", @@ -1117,6 +1117,7 @@ "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": "的提成！", + "footer %number% text": "使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得 %number% 的提成！", "market value": "市值", "Loaded all": "已加载全部", "Insufficient Balance": "余额不足", @@ -1126,5 +1127,31 @@ "capital pool": "资金池", "Unclaimed income": "待领取收益", "pledge": "质押", - "Invite": "邀请" + "Invite": "邀请", + "top": "置顶", + "Cancel the pledge": "取消质押", + "Forced to cancel": "强制取消质押", + "End of the lock up": "锁仓结束", + "Get the benefits": "领取收益", + "license agreement": "授权合约", + "Minimum amount pledged": "最小质押金额", + "Holder": "持币人", + "Board": "董事会", + "Whether to cancel": "是否取消", + "Please enter a number": "请输入数字", + "my wallet": "我的钱包", + "Copy the address": "复制地址", + "How to use": "如何使用", + "person": "人", + "Earnings will be cleared after forced cancellation. Confirm cancellation": "强制取消后收益将清空，是否确认取消", + "HighCitySwapInfo": "HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。", + "After pledge, income will lock warehouse%times%": "质押后，收益将锁仓%times%", + "IDO exchange in the first phase": "第一期IDO兑换", + "Opening time of next exchange period:": "下期兑换开启时间：", + "Please enter the amount": "请输入金额", + "Exchange rate": "兑换比率", + "gross": "总量", + "remaining quantity": "剩余数量", + "Immediately change": "立即兑换", + "IDO Exchange": "IDO 兑换" } diff --git a/src/App.tsx b/src/App.tsx index 43bf629..db999e0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -54,6 +54,7 @@ const Referral = lazy(() => import('./views/Referral')) const Board = lazy(() => import('./views/Board')) const Nft = lazy(() => import('./views/Nft')) const Announcement = lazy(() => import('./views/Announcement')) +const Exchange = lazy(() => import('./views/Exchange')) // This config is required for number formatting BigNumber.config({ @@ -99,6 +100,9 @@ const App: React.FC = () => { + + + diff --git a/src/components/Menu/config.ts b/src/components/Menu/config.ts index bc1f065..4c4874d 100644 --- a/src/components/Menu/config.ts +++ b/src/components/Menu/config.ts @@ -25,6 +25,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [ // // }, // ], // }, + { + label: t('IDO Exchange'), + icon: 'FarmIcon', + href: '/exchange', + }, { label: t('Exchange'), icon: 'FarmIcon', diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index daf32a4..3f604f6 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -46,7 +46,7 @@ const Menu = (props) => { const links = Object.keys(item.linkMap).map((key) => { return { name: key, link: item.linkMap[key], icon: item.iconResource.url } }) - return { icon: item.iconResource.url, list: links, key: index + item.name } + return { icon: item.iconResource.url, list: links, key: index + item.name, name: item.name } }) setSocialLink(list) } diff --git a/src/config/abi/board.json b/src/config/abi/board.json index 5442bd1..21f6f06 100644 --- a/src/config/abi/board.json +++ b/src/config/abi/board.json @@ -91,7 +91,9 @@ "outputs": [ { "internalType": "uint256", "name": "accHCCPerShare", "type": "uint256" }, { "internalType": "uint256", "name": "totalAmount", "type": "uint256" }, - { "internalType": "uint256", "name": "num", "type": "uint256" } + { "internalType": "uint256", "name": "totalReward", "type": "uint256" }, + { "internalType": "uint256", "name": "curAmount", "type": "uint256" }, + { "internalType": "uint256", "name": "holderNum", "type": "uint256" } ], "stateMutability": "view", "type": "function" @@ -177,7 +179,8 @@ "outputs": [ { "internalType": "uint256", "name": "amount", "type": "uint256" }, { "internalType": "uint256", "name": "rewardDebt", "type": "uint256" }, - { "internalType": "uint256", "name": "unLockTime", "type": "uint256" } + { "internalType": "uint256", "name": "unLockTime", "type": "uint256" }, + { "internalType": "uint256", "name": "receiveReward", "type": "uint256" } ], "stateMutability": "view", "type": "function" diff --git a/src/config/abi/holder.json b/src/config/abi/holder.json index d41fb18..54db896 100644 --- a/src/config/abi/holder.json +++ b/src/config/abi/holder.json @@ -91,7 +91,9 @@ "outputs": [ { "internalType": "uint256", "name": "accHCCPerShare", "type": "uint256" }, { "internalType": "uint256", "name": "totalAmount", "type": "uint256" }, - { "internalType": "uint256", "name": "num", "type": "uint256" } + { "internalType": "uint256", "name": "totalReward", "type": "uint256" }, + { "internalType": "uint256", "name": "curAmount", "type": "uint256" }, + { "internalType": "uint256", "name": "holderNum", "type": "uint256" } ], "stateMutability": "view", "type": "function" @@ -162,7 +164,8 @@ "name": "userInfo", "outputs": [ { "internalType": "uint256", "name": "amount", "type": "uint256" }, - { "internalType": "uint256", "name": "rewardDebt", "type": "uint256" } + { "internalType": "uint256", "name": "rewardDebt", "type": "uint256" }, + { "internalType": "uint256", "name": "receiveReward", "type": "uint256" } ], "stateMutability": "view", "type": "function" diff --git a/src/config/constants/contracts.ts b/src/config/constants/contracts.ts index 11e8b54..2a752c6 100644 --- a/src/config/constants/contracts.ts +++ b/src/config/constants/contracts.ts @@ -8,7 +8,7 @@ export default { 56: '0x6ab8463a4185b80905e05a9ff80a2d6b714b9e95', }, boardChef: { - 97: '0x0e28f80e6560f0ebbba4bbdf155a946053e5056a', + 97: '0x126935cae1988efbf8e310abe6be1f9046eaf0ac', 56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会合约 }, boardRewardChef: { @@ -16,7 +16,7 @@ export default { 56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 节点董事会分红合约 }, holderChef: { - 97: '0xafa64f22a09fc197949c45281b2ad381a2b623a3', + 97: '0x8faafb4ba8945917e7fe024dbbad0a5fb1da2181', 56: '0xD34871F12ace1BB8034E18009104b9dA60B84250', // NEED CHANGE 持币人 }, holderRewardChef: { diff --git a/src/config/localization/languages.ts b/src/config/localization/languages.ts index 90078b4..896a1b4 100644 --- a/src/config/localization/languages.ts +++ b/src/config/localization/languages.ts @@ -30,34 +30,34 @@ export const ZHCN: Language = { locale: 'zh-CN', language: '简体中文', code: export const ZHTW: Language = { locale: 'zh-TW', language: '繁體中文', code: 'zh-tw' } export const languages = { - // 'ar-SA': AR, - // 'bn-BD': BN, + 'ar-SA': AR, + 'bn-BD': BN, 'en-US': EN, - // 'de-DE': DE, - // 'el-GR': EL, - // 'es-ES': ESES, - // 'fi-FI': FI, - // 'fil-PH': FIL, - // 'fr-FR': FR, - // 'hi-IN': HI, - // 'hu-HU': HU, - // 'id-ID': ID, - // 'it-IT': IT, - // 'ja-JP': JA, - // 'ko-KR': KO, - // 'nl-NL': NL, - // 'pl-PL': PL, - // 'pt-BR': PTBR, - // 'pt-PT': PTPT, - // 'ro-RO': RO, - // 'ru-RU': RU, - // 'sv-SE': SVSE, - // 'ta-IN': TA, - // 'tr-TR': TR, - // 'uk-UA': UK, - // 'vi-VN': VI, + 'de-DE': DE, + 'el-GR': EL, + 'es-ES': ESES, + 'fi-FI': FI, + 'fil-PH': FIL, + 'fr-FR': FR, + 'hi-IN': HI, + 'hu-HU': HU, + 'id-ID': ID, + 'it-IT': IT, + 'ja-JP': JA, + 'ko-KR': KO, + 'nl-NL': NL, + 'pl-PL': PL, + 'pt-BR': PTBR, + 'pt-PT': PTPT, + 'ro-RO': RO, + 'ru-RU': RU, + 'sv-SE': SVSE, + 'ta-IN': TA, + 'tr-TR': TR, + 'uk-UA': UK, + 'vi-VN': VI, 'zh-CN': ZHCN, - // 'zh-TW': ZHTW, + 'zh-TW': ZHTW, } export const languageList = Object.values(languages) diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json index c667abc..29721e2 100644 --- a/src/config/localization/translations.json +++ b/src/config/localization/translations.json @@ -217,7 +217,7 @@ "Prize Pot": "Prize Pot", "Winners": "Winners", "No. Matched": "No. Matched", - "Approve Contract": "Approve Contract", + "Approve %coin% Contract": "Approve %coin% Contract", "%asset% staked": "%asset% staked", "Total Value Locked": "Total Value Locked", "Across all LPs and Syrup Pools": "Across all LPs and Syrup Pools", @@ -1246,6 +1246,7 @@ "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！", + "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", "Loaded all": "Loaded all", "HCC Currency amount": "HCC Currency amount", @@ -1253,5 +1254,31 @@ "possess LP": "possess LP", "capital pool": "capital pool", "Unclaimed income": "Unclaimed income", - "pledge": "pledge" + "pledge": "pledge", + "top": "top", + "Cancel the pledge": "Cancel the pledge", + "Forced to cancel": "Forced to cancel", + "End of the lock up": "End of the lock up", + "Get the benefits": "Get the benefits", + "license agreement": "license agreement", + "Minimum amount pledged": "Minimum amount pledged", + "Holder": "Holder", + "Board": "Board", + "Whether to cancel": "Whether to cancel", + "Please enter a number": "Please enter a number", + "my wallet": "my wallet", + "Copy the address": "Copy the address", + "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.", + "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:", + "Please enter the amount": "Please enter the amount", + "Exchange rate": "Exchange rate", + "gross": "gross", + "remaining quantity": "remaining quantity", + "Immediately change": "Immediately change", + "IDO Exchange": "IDO Exchange" } diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts index ea6142f..6008e44 100644 --- a/src/hooks/useAuth.ts +++ b/src/hooks/useAuth.ts @@ -36,7 +36,7 @@ const useAuth = () => { } else { window.localStorage.removeItem(connectorLocalStorageKey) if (error instanceof NoEthereumProviderError || error instanceof NoBscProviderError) { - toastError(t('Provider Error'), t('No provider was found')) + toastError(t('Provider Error')) } else if ( error instanceof UserRejectedRequestErrorInjected || error instanceof UserRejectedRequestErrorWalletConnect diff --git a/src/services/board.ts b/src/services/board.ts new file mode 100644 index 0000000..fbb8ff9 --- /dev/null +++ b/src/services/board.ts @@ -0,0 +1,10 @@ +import request from 'utils/request' + +export const getBaseConfig = () => { + return request.request({ + url: '/high_city/app/api/base/config', + method: 'get', + }) +} + +export default getBaseConfig diff --git a/src/services/referral.ts b/src/services/referral.ts index acc5c0a..d728e98 100644 --- a/src/services/referral.ts +++ b/src/services/referral.ts @@ -30,9 +30,15 @@ export const getWithdrawRewardParams = () => { export const checkBuyResult = (params) => { return request.request({ url: '/high_city/app/api/invite/commander/tx', - method: 'post', + method: 'get', params, }) } +export const getContract = () => { + return request.request({ + url: '/high_city/app/api/contract', + method: 'get', + }) +} export default getReferralRewardInfo diff --git a/src/state/boards/fetchBoardsUser.ts b/src/state/boards/fetchBoardsUser.ts index 5979eb5..1aef6fe 100644 --- a/src/state/boards/fetchBoardsUser.ts +++ b/src/state/boards/fetchBoardsUser.ts @@ -58,7 +58,7 @@ export const fetchBoardUserInfo = async (account: string) => { stakedBalance: new BigNumber(userInfo.amount._hex).toJSON(), unLockTime: userInfo.unLockTime ? new BigNumber(userInfo.unLockTime._hex).toNumber() : 0, estimatedProfit: new BigNumber(estimatedProfit).toJSON(), - name: board.name, + receiveReward: userInfo.receiveReward ? new BigNumber(userInfo.receiveReward._hex).toNumber() : 0, amount: getBalanceAmount(new BigNumber(userInfo.amount?._hex)).toNumber(), rewardDebt: getBalanceAmount(new BigNumber(userInfo.rewardDebt?._hex)).toNumber(), } diff --git a/src/state/boards/index.ts b/src/state/boards/index.ts index 1bc6486..ad884c7 100644 --- a/src/state/boards/index.ts +++ b/src/state/boards/index.ts @@ -49,9 +49,9 @@ export const fetchBoardUserDataAsync = (account) => async (dispatch) => { stakedBalance: userInfo[index].stakedBalance, unlockTime: userInfo[index].unLockTime, estimatedProfit: userInfo[index].estimatedProfit, - name: userInfo[index].name, amount: userInfo[index].amount, rewardDebt: userInfo[index].rewardDebt, + receiveReward: userInfo[index].receiveReward, } }) dispatch(setBoardsUserData({ arrayOfUserDataObjects })) diff --git a/src/state/types.ts b/src/state/types.ts index efefbc2..c99d491 100644 --- a/src/state/types.ts +++ b/src/state/types.ts @@ -503,6 +503,7 @@ export interface Boards extends BoardConfig { stakedBalance: number unlockTime: number estimatedProfit: number + receiveReward: number } } export interface BoardsState { diff --git a/src/views/Announcement/components/ListItem.tsx b/src/views/Announcement/components/ListItem.tsx index 9e9e455..b5f6c98 100644 --- a/src/views/Announcement/components/ListItem.tsx +++ b/src/views/Announcement/components/ListItem.tsx @@ -1,11 +1,12 @@ import React, { useState } from 'react' import styled from 'styled-components' +import { useTranslation } from 'contexts/Localization' import { Text, Flex } from '@pancakeswap/uikit' interface InfoProps { title?: string content?: string - publishTime?: number + publishTime?: string top?: boolean } @@ -23,6 +24,24 @@ const FlexTitle = styled(Flex)` font-size: 18px; color: #333333; align-items: center; + ${({ theme }) => theme.mediaQueries.xs} { + font-size: 14px; + } + ${({ theme }) => theme.mediaQueries.lg} { + font-size: 18px; + } +` +const TextTitle = styled(Text)` + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #333333; + ${({ theme }) => theme.mediaQueries.xs} { + max-width: 100px; + } + ${({ theme }) => theme.mediaQueries.lg} { + max-width: 747px; + } ` const TextInfo = styled(Text)` overflow: hidden; @@ -33,10 +52,22 @@ const TextInfo = styled(Text)` font-size: 14px; color: #666666; margin-top: 10px; + ${({ theme }) => theme.mediaQueries.xs} { + font-size: 12px; + } + ${({ theme }) => theme.mediaQueries.lg} { + font-size: 14px; + } ` const TextTime = styled(Text)` font-size: 18px; color: #999999; + ${({ theme }) => theme.mediaQueries.xs} { + font-size: 14px; + } + ${({ theme }) => theme.mediaQueries.lg} { + font-size: 18px; + } ` const TextTop = styled(Flex)` margin-left: 10px; @@ -52,17 +83,18 @@ const TextTop = styled(Flex)` ` const ListItem: React.FC = ({ title, content, publishTime, top = false }) => { + const { t } = useTranslation() return ( <> - {title} - {top ? 置顶 : ''} + {title} + {top && {t('top')}} {content} - {publishTime} + {publishTime?.split(' ')[0]} ) diff --git a/src/views/Announcement/index.tsx b/src/views/Announcement/index.tsx index a7164ad..80a1ea8 100644 --- a/src/views/Announcement/index.tsx +++ b/src/views/Announcement/index.tsx @@ -14,7 +14,6 @@ interface DetailProps { } const ContainerMain = styled.div` background: ${({ theme }) => theme.colors.gradients.bubblegum}; - padding: 30px 0; ` const MainDiv = styled.div` width: 100%; diff --git a/src/views/Board/components/AffirmModal.tsx b/src/views/Board/components/AffirmModal.tsx new file mode 100644 index 0000000..bb29aba --- /dev/null +++ b/src/views/Board/components/AffirmModal.tsx @@ -0,0 +1,37 @@ +import BigNumber from 'bignumber.js' +import React, { useCallback, useMemo, useState } from 'react' +import { Button, Modal, Text } from '@pancakeswap/uikit' +import { ModalActions, ModalInput } from 'components/Modal' +import { useTranslation } from 'contexts/Localization' +import useToast from 'hooks/useToast' +import { getFullDisplayBalance } from 'utils/formatBalance' + +interface AffirmModalProps { + title?: string + content?: string + onDismiss?: () => void + handSubmit?: () => void +} + +const DepositModal: React.FC = ({ title, content, onDismiss, handSubmit }) => { + const { t } = useTranslation() + const submit = async () => { + await handSubmit() + onDismiss() + } + return ( + + {!content ? t('Whether to cancel') : content} + + + + + + ) +} + +export default DepositModal diff --git a/src/views/Board/components/BoardCard/BoardCard.tsx b/src/views/Board/components/BoardCard/BoardCard.tsx index e4aa3e3..2902e55 100644 --- a/src/views/Board/components/BoardCard/BoardCard.tsx +++ b/src/views/Board/components/BoardCard/BoardCard.tsx @@ -1,4 +1,5 @@ -import React, { useMemo, useState } from 'react' +import React, { useMemo, useState, useEffect } from 'react' +import dayjs from 'dayjs' import BigNumber from 'bignumber.js' import styled, { keyframes } from 'styled-components' import { Flex, Text, Skeleton } from '@pancakeswap/uikit' @@ -58,8 +59,8 @@ const FCard = styled.div` box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; - justify-content: space-around; - padding: 24px; + /* justify-content: space-around; */ + /* padding: 24px; */ position: relative; text-align: center; min-height: 410px; @@ -77,32 +78,75 @@ const ExpandingWrapper = styled.div<{ expanded: boolean }>` overflow: hidden; ` +const CardDiv = styled.div` + min-height: calc(410px - 90px); + padding: 0 20px; + display: flex; + flex-direction: column; + justify-content: space-around; +` +const ContentDiv = styled.div` + padding: 0 20px; +` +const InfoDiv = styled(Flex)` + flex-direction: column; + height: 60px; + justify-content: space-between; +` + interface NodeCardProps { board: any removed: boolean provider?: ProviderType account?: string + boardsData?: any } -const BoardCard: React.FC = ({ board, account }) => { +const BoardCard: React.FC = ({ board, account, boardsData }) => { const { t } = useTranslation() + const [countDown, setCountDown] = useState('') + useEffect(() => { + setTimeout(() => { + if (board.userData?.unlockTime) { + const time = board.userData?.unlockTime * 1000 + countDownFun(time - 1) + } + }, 1000) + }, [countDown, board]) + + const countDownFun = (date) => { + const date1 = dayjs() + const date2 = dayjs(date) + const time = date2.diff(date1) + if (time > 0) { + const hour = Math.floor((time / (1000 * 60 * 60)) % 24) + const minute = Math.floor((time / (1000 * 60)) % 60) + const second = Math.round((time / 1000) % 60) + setCountDown(`${hour}:${minute}:${second}`) + } else { + setCountDown(`${t('End of the lock up')}`) + } + } const [showExpandableSection, setShowExpandableSection] = useState(false) return ( - - {account && ( -
- - {board.userData?.name === 'Board' ? ( - - ) : ( - '' - )} - -
- )} - + + + {account && ( + + + {board.pid === 1 && board.userData?.amount ? : ''} + + + )} + + {/* setShowExpandableSection(!showExpandableSection)} diff --git a/src/views/Board/components/BoardCard/CardActionsContainer.tsx b/src/views/Board/components/BoardCard/CardActionsContainer.tsx index b853961..77c3136 100644 --- a/src/views/Board/components/BoardCard/CardActionsContainer.tsx +++ b/src/views/Board/components/BoardCard/CardActionsContainer.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback } from 'react' +import React, { useState, useCallback, useMemo } from 'react' import BigNumber from 'bignumber.js' import styled from 'styled-components' import { provider as ProviderType } from 'web3-core' @@ -6,17 +6,28 @@ import { getAddress } from 'utils/addressHelpers' import { Button, Flex, Text } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' import { Boards } from 'state/types' -import { useBoardUser } from 'state/hooks' +import { useBoardUser, usePriceCakeBusd, usePriceHccUsdt } from 'state/hooks' import { TOKEN_SYMBOL } from 'config/index' -import { getBalanceNumber } from 'utils/formatBalance' + +import { useWeb3React } from '@web3-react/core' +import { useAccount } from 'state/userInfo/hooks' +import { BIG_ZERO } from 'utils/bigNumber' + +import { getBalanceNumber, getBalanceAmount } from 'utils/formatBalance' import { useERC20 } from 'hooks/useContract' import UnlockButton from 'components/UnlockButton' import useApproveBoard from '../../hooks/useApproveBoard' import StakeAction from './StakeAction' import HarvestAction from './HarvestAction' +import useHarvestBoard from '../../hooks/useHarvestBoard' +import FlexText from './FlexText' + const Action = styled.div` - padding-top: 16px; + padding-top: 4px; +` +const PriceCoin = styled.div` + text-align: right; ` interface NodeCardActionsProps { @@ -35,6 +46,10 @@ const CardActions: React.FC = ({ board, account }) => { const { onApprove } = useApproveBoard(tokenContract, pid) + const rawEarningsBalance = account ? getBalanceAmount(new BigNumber(estimatedProfit)).toNumber() : BIG_ZERO + const displayBalance = rawEarningsBalance.toFixed(3, BigNumber.ROUND_DOWN) + const hccPriceUsdt = usePriceHccUsdt() + const handleApprove = useCallback(async () => { try { setRequestedApproval(true) @@ -44,29 +59,48 @@ const CardActions: React.FC = ({ board, account }) => { console.error(e) } }, [onApprove]) - + // const [totalPrice, setTotalPrice] = useState(0) + const totalPrice = useMemo(() => { + return getBalanceAmount(new BigNumber(board?.userData?.receiveReward)).toNumber() + Number(displayBalance) + }, [board]) const renderApprovalOrStakeButton = () => { return isApproved ? ( <> - + + + + {t('Unclaimed income')} + + + + {displayBalance} + + + {(Number(hccPriceUsdt.toNumber().toFixed(3)) * Number(displayBalance)).toFixed(3)} USDT + + + + {/* */} + {/* {board.tokenSymbol} {t('Staked')} - - - - + */} + + + {/* */} + {/* {t('Unclaimed income')} - - - + */} + {/* */} + {/* */} ) : ( ) } diff --git a/src/views/Board/components/BoardCard/CardHeading.tsx b/src/views/Board/components/BoardCard/CardHeading.tsx index a09d1eb..10f820c 100644 --- a/src/views/Board/components/BoardCard/CardHeading.tsx +++ b/src/views/Board/components/BoardCard/CardHeading.tsx @@ -1,6 +1,7 @@ import React from 'react' import styled from 'styled-components' import { Tag, Flex, Heading, Image } from '@pancakeswap/uikit' +import { useAccount } from 'state/userInfo/hooks' import Question from 'components/QuestionHelper' import { useTranslation } from 'contexts/Localization' @@ -9,23 +10,81 @@ export interface ExpandableSectionProps { isCommunityFarm?: boolean img?: string tokenSymbol?: string + amount?: number } const Wrapper = styled(Flex)` + height: 90px; + background: linear-gradient(90deg, #f1ecf2 0%, #e9f1f5 100%); + font-size: 30px; + color: #280d5f; + padding-left: 20px; + border-radius: 32px 32px 0 0; + position: relative; svg { margin-right: 4px; } -` + .corner-mark { + width: 88px; + height: 89px; + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + } -const CardHeading: React.FC = ({ name, img, tokenSymbol }) => { + .ribbon { + line-height: 12px; + text-align: center; + transform: rotate(50deg); + position: relative; + padding: 8px 0; + right: 15px; + top: 20px; + width: 150px; + background: linear-gradient(180deg, #b43ff9 0%, #7a44db 100%); + color: white; + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); + letter-spacing: 1px; + font-size: 14px; + } + + .ribbon1:before, + .ribbon1:after { + content: ''; + border-top: 3px solid #4e7c7d; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + position: absolute; + bottom: -4px; + } + + .ribbon1:before { + left: 0; + } + + .ribbon1:after { + right: 0; + } +` +const HeaderFlex = styled(Flex)`` + +const CardHeading: React.FC = ({ name, img, tokenSymbol, amount }) => { const { t } = useTranslation() + const account = useAccount() + return ( - - - {name} + {/* */} + + {t(`${name}`)} {/* */} - + + {amount > 0 && account && ( +
+
{t('Staked')}
+
+ )} ) } diff --git a/src/views/Board/components/BoardCard/HarvestAction.tsx b/src/views/Board/components/BoardCard/HarvestAction.tsx index 4bd79e6..beee83c 100644 --- a/src/views/Board/components/BoardCard/HarvestAction.tsx +++ b/src/views/Board/components/BoardCard/HarvestAction.tsx @@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js' import { Button, Flex, Heading } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' import { useAppDispatch } from 'state' +import { Boards } from 'state/types' import { fetchFarmUserDataAsync } from 'state/farms' import useToast from 'hooks/useToast' import { getBalanceAmount } from 'utils/formatBalance' @@ -16,9 +17,10 @@ import useHarvestBoard from '../../hooks/useHarvestBoard' interface FarmCardActionsProps { earnings?: BigNumber pid?: number + board?: Boards } -const HarvestAction: React.FC = ({ earnings, pid }) => { +const HarvestAction: React.FC = ({ earnings, pid, board }) => { const { account } = useWeb3React() const { toastSuccess, toastError } = useToast() const { t } = useTranslation() @@ -29,17 +31,19 @@ const HarvestAction: React.FC = ({ earnings, pid }) => { const rawEarningsBalance = account ? getBalanceAmount(earnings) : BIG_ZERO const displayBalance = rawEarningsBalance.toFixed(3, BigNumber.ROUND_DOWN) const earningsBusd = rawEarningsBalance ? rawEarningsBalance.multipliedBy(cakePrice).toNumber() : 0 + const unlockTime = board.userData.unlockTime * 1000 return ( - - + + {/* {displayBalance} {earningsBusd > 0 && ( )} - + */} + ) : ( {userData.stakedBalance > 0 ? ( - - - + // + + {board.pid === 1 + ? board.userData?.unlockTime * 1000 <= new Date().getTime() + ? t('Cancel the pledge') + : t('Forced to cancel') + : t('Cancel the pledge')} + ) : ( @@ -77,8 +149,8 @@ const StakeAction: React.FC = ({ stakedBalance, tokenBalan } return ( - - {rawStakedBalance} + + {/* {rawStakedBalance} */} {renderStakingButtons()} ) diff --git a/src/views/Board/components/DepositModal.tsx b/src/views/Board/components/DepositModal.tsx index cb9c22b..6b28d36 100644 --- a/src/views/Board/components/DepositModal.tsx +++ b/src/views/Board/components/DepositModal.tsx @@ -1,10 +1,11 @@ import BigNumber from 'bignumber.js' import React, { useCallback, useMemo, useState } from 'react' -import { Button, Modal, LinkExternal } from '@pancakeswap/uikit' +import { Button, Modal, LinkExternal, Text } from '@pancakeswap/uikit' import { ModalActions, ModalInput } from 'components/Modal' import { useTranslation } from 'contexts/Localization' import useToast from 'hooks/useToast' import { getFullDisplayBalance } from 'utils/formatBalance' +import { Boards } from 'state/types' interface DepositModalProps { min: BigNumber @@ -14,6 +15,8 @@ interface DepositModalProps { tokenName?: string tokenDecimals?: number addLiquidityUrl?: string + time?: string + board?: Boards } const DepositModal: React.FC = ({ @@ -24,7 +27,10 @@ const DepositModal: React.FC = ({ tokenDecimals = 18, tokenName = '', addLiquidityUrl, + time, + board, }) => { + const regNumber = /^\d+(\.\d+)?$/ const { toastSuccess, toastError, toastWarning } = useToast() const [val, setVal] = useState('') const [pendingTx, setPendingTx] = useState(false) @@ -43,9 +49,11 @@ const DepositModal: React.FC = ({ const handleSelectMax = useCallback(() => { setVal(fullBalance) }, [fullBalance, setVal]) - return ( + {time && board?.pid === 1 && ( + {t('After pledge, income will lock warehouse%times%', { times: time })} + )} = ({ width="100%" disabled={pendingTx || fullBalance === '0' || val === '0'} onClick={async () => { + if (!regNumber.test(val)) { + toastWarning(t('Please enter a number')) + return + } + if (Number(val) > Number(fullBalance)) { + toastWarning(t('Insufficient Balance')) + return + } if (Number(val) < min.toNumber()) { - toastWarning(t('Hint'), `${t('At least stake ')}${min.toNumber()}`) + toastWarning(`${t('Minimum amount pledged')}${min.toNumber()}`) return } setPendingTx(true) try { await onConfirm(val) - toastSuccess(t('Staked!'), t('Your funds have been staked in the farm')) + toastSuccess(t('Staked!')) onDismiss() } catch (e) { toastError( @@ -86,9 +102,9 @@ const DepositModal: React.FC = ({ {pendingTx ? t('Pending Confirmation') : t('Confirm')} - + {/* {t('Get %symbol%', { symbol: tokenName })} - + */} ) } diff --git a/src/views/Board/index.tsx b/src/views/Board/index.tsx index 559e604..e84eeaf 100644 --- a/src/views/Board/index.tsx +++ b/src/views/Board/index.tsx @@ -23,6 +23,12 @@ import { useTranslation } from 'contexts/Localization' import BoardCard from './components/BoardCard/BoardCard' import HeaderItem from './components/HeaderItem' +const PageContent = styled.div` + background-image: url('/images/recommend/bg.svg'); + background-repeat: no-repeat; + background-size: cover; +` + const Header = styled.div` padding: 32px 0px; padding-left: 16px; @@ -55,6 +61,8 @@ const Boards: React.FC = () => { const [boardNum, setBoardNum] = useState(0) const [holderNum, setHolder] = useState(0) + const [boardsDataList, setBoardsDataList] = useState([]) + // 获取分红总额 const fetchBoardShares = async () => { const boardsData = await Promise.all( @@ -74,25 +82,28 @@ const Boards: React.FC = () => { ]) return { pid: boardConfig.pid, - totalAmount: getBalanceAmount(new BigNumber(boardPoolInfo.totalAmount._hex)).toNumber(), - num: new BigNumber(boardPoolInfo?.num?._hex).toNumber(), + curAmount: getBalanceAmount(new BigNumber(boardPoolInfo.curAmount._hex)).toNumber(), + holderNum: new BigNumber(boardPoolInfo?.holderNum?._hex).toNumber(), waitWithdrawAmount: getBalanceAmount(new BigNumber(waitWithdrawAmount.balance._hex)).toNumber(), + totalReward: getBalanceAmount(new BigNumber(boardPoolInfo?.totalReward?._hex)).toNumber(), } }), ) + let total = 0 - let waitWithdrawAmountValue = 0 + let totalReward = 0 boardsData.forEach((item) => { - total += item.totalAmount - waitWithdrawAmountValue += item.waitWithdrawAmount + total += item.curAmount + totalReward += item.totalReward if (item.pid === 1) { - setBoardNum(item.num) + setBoardNum(item.holderNum) } else if (item.pid === 2) { - setHolder(item.waitWithdrawAmount) + setHolder(item.holderNum) } }) + setBoardsDataList(boardsData) setTotalAmount(total) - setShareOutBonus(waitWithdrawAmountValue) + setShareOutBonus(totalReward) } useEffect(() => { dispatch(fetchBoardsPublicDataAsync()) @@ -106,8 +117,8 @@ const Boards: React.FC = () => { return (
- {boardsList.map((board) => ( - + {boardsList.map((board, index) => ( + ))}
@@ -115,21 +126,23 @@ const Boards: React.FC = () => { } return ( - -
- - {t('Total capital pool')} - - - - - {/* */} - - - -
- {renderContent()} - + + +
+ + {t('Total capital pool')} + + + + + {/* */} + + + +
+ {renderContent()} + + ) } diff --git a/src/views/Exchange/components/ExchangeCard.tsx b/src/views/Exchange/components/ExchangeCard.tsx new file mode 100644 index 0000000..67a2c1a --- /dev/null +++ b/src/views/Exchange/components/ExchangeCard.tsx @@ -0,0 +1,74 @@ +import React, { useMemo, useState, useEffect } from 'react' +import styled, { keyframes } from 'styled-components' +import { useTranslation } from 'contexts/Localization' +import { Flex, Text, Button } from '@pancakeswap/uikit' + +import { useAccount } from 'state/userInfo/hooks' +import UnlockButton from 'components/UnlockButton' +import ExchangeInput from './ExchangeInput' + +const FCard = styled.div` + width: 650px; + background: ${(props) => props.theme.card.background}; + border-radius: 32px; + box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + position: relative; + text-align: center; + padding: 50px 70px; +` +const HeaderText = styled(Text)` + font-size: 48px; + color: #280d5f; +` +const TimeText = styled(Text)` + color: #7a6eaa; + font-size: 22px; +` + +const RateText = styled(Text)` + font-size: 30px; + color: #280d5f; +` +const RateNumber = styled(Text)` + font-size: 30px; + color: #1fc7d4; +` +const FooterButton = styled.div` + margin-top: 50px; + width: 100%; +` +const UnlockButtonDiv = styled(UnlockButton)` + width: 100%; +` + +const ExchangeCard: React.FC = () => { + const { t } = useTranslation() + + const account = useAccount() + + return ( + + {t('IDO exchange in the first phase')} + {t('Opening time of next exchange period:')}2022.5.16 00:00 + + + {t('Exchange rate')}： + 1USDT=100HCC + + + {t('gross')}：100000HCC + + {t('remaining quantity')}：100000HCC + + + + + {account ? : } + + + ) +} + +export default ExchangeCard diff --git a/src/views/Exchange/components/ExchangeInput.tsx b/src/views/Exchange/components/ExchangeInput.tsx new file mode 100644 index 0000000..89e28d9 --- /dev/null +++ b/src/views/Exchange/components/ExchangeInput.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import styled from 'styled-components' +import { Text, Input } from '@pancakeswap/uikit' +import { useTranslation } from 'contexts/Localization' + +const PriceContent = styled.div` + height: 148px; + background: rgba(238, 234, 244, 0.39); + border: 1px solid #d7caec; + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16); + border-radius: 18px; + padding: 23px 20px; + margin-top: 20px; +` +const CoinText = styled(Text)` + font-size: 26px; + color: #333333; + text-align: left; + margin-bottom: 20px; +` + +interface InputProps { + name: string + value?: number | string +} + +const ExchangeInput: React.FC = ({ name, value }) => { + const { t } = useTranslation() + + return ( + + {name} + + + ) +} + +export default ExchangeInput diff --git a/src/views/Exchange/index.tsx b/src/views/Exchange/index.tsx new file mode 100644 index 0000000..e4ec50c --- /dev/null +++ b/src/views/Exchange/index.tsx @@ -0,0 +1,22 @@ +import React, { useState, useEffect } from 'react' +import styled from 'styled-components' +import ExchangeCard from './components/ExchangeCard' + +const PageContent = styled.div` + min-height: calc(100vh - 64px); + background-image: url('/images/recommend/bg.svg'); + background-size: cover; + background-repeat: no-repeat; + display: flex; + align-items: center; + justify-content: center; +` + +const Exchange: React.FC = () => { + return ( + + + + ) +} +export default Exchange diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index 447d4b8..8d64e91 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import styled from 'styled-components' import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' @@ -39,81 +39,87 @@ const FlexMain = styled(Flex)` ` const CardDiv = styled(Card)` - padding: 20px; + padding: 10px 20px; + width: 350px; + display: flex; + flex-direction: column; + justify-content: center; ` const CourseCom: React.FC = () => { const { t } = useTranslation() - const [list, setListState] = useState([ - { - title: t('Stage one: Origin'), - id: 1, - list: [ - { text: t('The project concept was born in May 2021') }, - { text: t('Set up HighCity team in June 2021') }, - { text: t('May 2021 -- January 2022 Team run-in') }, - ], - }, - { - title: t('Stage two: Action'), - id: 2, - list: [ - { - text: t( - 'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online', - ), - }, - { text: t('In March 2022, project approval, web design, roadmap announcement, smart contract development') }, - ], - }, - { - title: t('Stage three: Creation'), - id: 3, - list: [{ text: t('Created by NFT in May 2022') }, { text: t('June 2022 social software development') }], - }, - { - title: t('Stage four: Integration'), - id: 4, - list: [ - { text: t('Launch of social software in December 2022') }, - { text: t('December 2022 NFT bonus binding social software') }, - { text: t('In December 2022, HighCity Ecology was preliminarily completed') }, - ], - }, - { - title: t('Stage five: Closing the curtain'), - id: 5, - list: [ - { text: t('HighCity Ecology completed in December 2022') }, - { text: t('Maintain dividend income growth in December 2022') }, - ], - }, - ]) + const [list, setListState] = useState([]) + + useEffect(() => { + setListState([ + { + title: t('Stage one: Origin'), + id: 1, + list: [ + { text: t('The project concept was born in May 2021') }, + { text: t('Set up HighCity team in June 2021') }, + { text: t('May 2021 -- January 2022 Team run-in') }, + ], + }, + { + title: t('Stage two: Action'), + id: 2, + list: [ + { + text: t( + 'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online', + ), + }, + { text: t('In March 2022, project approval, web design, roadmap announcement, smart contract development') }, + ], + }, + { + title: t('Stage three: Creation'), + id: 3, + list: [{ text: t('Created by NFT in May 2022') }, { text: t('June 2022 social software development') }], + }, + { + title: t('Stage four: Integration'), + id: 4, + list: [ + { text: t('Launch of social software in December 2022') }, + { text: t('December 2022 NFT bonus binding social software') }, + { text: t('In December 2022, HighCity Ecology was preliminarily completed') }, + ], + }, + { + title: t('Stage five: Closing the curtain'), + id: 5, + list: [ + { text: t('HighCity Ecology completed in December 2022') }, + { text: t('Maintain dividend income growth in December 2022') }, + ], + }, + ]) + }, [t]) return ( <> -
- - {list.map((item, index) => ( - - - {item.title} - {item.list.map((childItem) => { - return ( - - {childItem.text} - - ) - })} - - - ))} - -
+ + {list.map((item, index) => ( + + + {item.title} + {item.list.map((childItem) => { + return ( + + {childItem.text} + + ) + })} + + + ))} + diff --git a/src/views/Home/components/FristCom.tsx b/src/views/Home/components/FristCom.tsx index ac8703d..1cc5179 100644 --- a/src/views/Home/components/FristCom.tsx +++ b/src/views/Home/components/FristCom.tsx @@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux' import { uccnDetail, indexInfo } from 'services/user' import { Flex, Heading, Text, Box, Button, Image, Link } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' +import { usePriceHccUsdt } from 'state/hooks' import { OutLink } from 'types/user' import FlexItemCom from './FlexItemCom' @@ -137,7 +138,9 @@ const FristCom: React.FC = () => { externalLinkList: [], userCount: '', volume: '', + market: 0, }) + const hccPriceUsdt = usePriceHccUsdt() const [linkList, setLinkList] = useState([]) const getDetail = async () => { @@ -198,7 +201,7 @@ 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 60a2e80..0420955 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -96,7 +96,7 @@ const IntroduceCom: React.FC = () => { return ( <> - +
diff --git a/src/views/Referral/components/BuyActions.tsx b/src/views/Referral/components/BuyActions.tsx index 39dae44..b018db6 100644 --- a/src/views/Referral/components/BuyActions.tsx +++ b/src/views/Referral/components/BuyActions.tsx @@ -20,6 +20,13 @@ const Btn = styled(Button)` background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); border: none; ` +const AuthorizationBtn = styled(Button)` + width: 40%; + margin: 20px auto 0px auto; + border-radius: 50px; + background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); + border: none; +` const BuyActions: React.FC = () => { const { t } = useTranslation() const account = useAccount() @@ -95,25 +102,25 @@ const BuyActions: React.FC = () => { return ( {!allowanceList.usdt && ( - { handleApprove(onUsdtApprove) }} > - {t('Approve %coin% Contract', { coin: 'usdt' })} - + {t('Approve %coin% Contract', { coin: 'USDT' })} + )} {!allowanceList.hcc && ( - { handleApprove(onHccApprove) }} > - {t('Approve %coin% Contract', { coin: 'hcc' })} - + {t('Approve %coin% Contract', { coin: 'HCC' })} + )} {allowanceList?.usdt && allowanceList.hcc ? ( diff --git a/src/views/Referral/components/BuyNftModal.tsx b/src/views/Referral/components/BuyNftModal.tsx index abee484..7a607e8 100644 --- a/src/views/Referral/components/BuyNftModal.tsx +++ b/src/views/Referral/components/BuyNftModal.tsx @@ -1,15 +1,16 @@ -import React from 'react' +import React, { useState, useMemo, useEffect } from 'react' import styled from 'styled-components' import { formatDivNumber } from 'utils/formatBalance' import { useTranslation } from 'contexts/Localization' import { useReferralNormalConfigInfo, useReferralCommanderConfigInfo } from 'state/referral/hooks' -import { Flex, Button, Modal, Image } from '@pancakeswap/uikit' +import { Flex, Button, Modal, Image, Text } from '@pancakeswap/uikit' +import { getContract } from 'services/referral' import BuyActions from './BuyActions' import TextFlex from './TextFlex' import FlexCom from './FlexCom' const ModalDiv = styled(Modal)` - width: 80%; + width: 50%; ${({ theme }) => theme.mediaQueries.xs} { } @@ -43,6 +44,18 @@ const ImageDiv = styled(Image)` height: 300px; } ` +const TextDiv = styled(Text)` + text-align: center; + height: 45px; + opacity: 0.5; + border-radius: 23px; + font-size: 26px; + color: #280d5f; + display: flex; + align-items: center; + justify-content: center; +` + interface BuyNftModalProps { onDismiss?: () => void } @@ -50,15 +63,37 @@ const BuyNftModal: React.FC = ({ onDismiss }) => { const { t } = useTranslation() const referralCommanderConfigInfo = useReferralCommanderConfigInfo() const referralRewardInfo = useReferralNormalConfigInfo() + const [price, setPrice] = useState('') + const [link, setLink] = useState('') + + const getLinkAddress = async () => { + const data = await getContract() + setLink(data) + } + useEffect(() => { + getLinkAddress() + }, []) + useMemo(() => { + const priceList = [] + referralCommanderConfigInfo?.properties?.price && + Object.keys(referralCommanderConfigInfo?.properties?.price).forEach((item) => { + priceList.push(`${item}:${referralCommanderConfigInfo?.properties?.price[item]}`) + }) + setPrice(priceList.join(' - ')) + }, [referralCommanderConfigInfo]) + return ( - + - + + + {price} + {/* */} = ({ onDismiss }) => { - - - - + + + + diff --git a/src/views/Referral/components/Connected.tsx b/src/views/Referral/components/Connected.tsx index 0a92932..725af50 100644 --- a/src/views/Referral/components/Connected.tsx +++ b/src/views/Referral/components/Connected.tsx @@ -1,5 +1,8 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import styled from 'styled-components' +import { useDispatch } from 'react-redux' +import { fetchReferralInfoAsync } from 'state/actions' +import { useAccount } from 'state/userInfo/hooks' import { formatDivNumber } from 'utils/formatBalance' import { useTranslation } from 'contexts/Localization' import useToast from 'hooks/useToast' @@ -54,20 +57,25 @@ const TextDiv = styled(Text)` ` const ConnectedCom: React.FC = () => { + const dispatch = useDispatch() + const account = useAccount() const { t } = useTranslation() const [onBuyModal] = useModal() + const [gain, getGain] = useState(true) const referralNormalConfigInfo = useReferralNormalConfigInfo() const referralRewardInfo = useReferralRewardInfo() - const referralCommanderConfigInfo = useReferralCommanderConfigInfo() + const [loading, setLoading] = useState(false) const withdraw = useWithdraw() const { toastSuccess } = useToast() const handleWithdraw = async () => { setLoading(true) try { + dispatch(fetchReferralInfoAsync(account)) await withdraw() setLoading(false) toastSuccess(t('Successfully claimed!')) + getGain(false) } catch (error) { setLoading(false) } @@ -76,16 +84,16 @@ const ConnectedCom: React.FC = () => { <> - - + + {referralNormalConfigInfo?.receiveLimit <= - referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? ( + referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive && gain ? ( {t('Claim now')} @@ -96,9 +104,7 @@ const ConnectedCom: React.FC = () => { {t('Upgrade commander')} - {`${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', - )}${formatDivNumber(referralCommanderConfigInfo?.dividendFirst)}%${t('The commission')}`} + {t('footer %number% text', { number: `${referralNormalConfigInfo?.dividendFirst || 0}%` })} {/* {t('each time')} {t('last bid')} {t('commission fee')} */} diff --git a/src/views/Referral/components/FlexCom.tsx b/src/views/Referral/components/FlexCom.tsx index 3ac05e5..5f0e878 100644 --- a/src/views/Referral/components/FlexCom.tsx +++ b/src/views/Referral/components/FlexCom.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import { Flex, Text } from '@pancakeswap/uikit' +import { Flex, Text, Link } from '@pancakeswap/uikit' interface FlexProps { name: string @@ -8,6 +8,7 @@ interface FlexProps { paddings?: string leftColor?: string rightColor?: string + typeLink?: string } const FlexDiv = styled(Flex)` @@ -15,17 +16,34 @@ const FlexDiv = styled(Flex)` align-items: center; margin-top: 20px; ` +const TextLink = styled(Text)` + border-bottom: 1px solid #7a6eaa; + cursor: pointer; +` + const FlexCom: React.FC = ({ name, value, paddings = '0px', leftColor = 'text', rightColor = 'textSubtle', + typeLink, }) => { + const openPage = () => { + console.log(typeLink) + window.open(typeLink) + } + return ( {name} - {value} + {typeLink ? ( + + {value} + + ) : ( + {value} + )} ) } diff --git a/src/views/Referral/components/Regimental.tsx b/src/views/Referral/components/Regimental.tsx index 51f3192..14a2ec5 100644 --- a/src/views/Referral/components/Regimental.tsx +++ b/src/views/Referral/components/Regimental.tsx @@ -38,22 +38,22 @@ const FooterBtn = styled.div` ` const ContentDiv = styled.div` - width: 60%; + width: 75%; background: rgba(255, 255, 255, 0.39); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); border-radius: 40px; ${({ theme }) => theme.mediaQueries.sm} { - width: 60%; + width: 75%; + } + ${({ theme }) => theme.mediaQueries.xs} { + width: 75%; + /* height: 80vh; */ + overflow-y: auto; } ${({ theme }) => theme.mediaQueries.lg} { - width: 60%; - } - ${({ theme }) => theme.mediaQueries.xs} { - width: 90%; - height: 80vh; - overflow-y: auto; + width: 50%; } ` @@ -84,12 +84,14 @@ const RegimentalCom: React.FC = () => { const [loading, setLoading] = useState(false) const withdraw = useWithdraw() const { toastSuccess } = useToast() + const [gain, getGain] = useState(true) const handleWithdraw = async () => { setLoading(true) try { await withdraw() setLoading(false) toastSuccess(t('Successfully claimed!')) + getGain(false) } catch (error) { setLoading(false) } @@ -106,46 +108,28 @@ const RegimentalCom: React.FC = () => { <> - - + + - {/* - - - - - */} {referralCommanderConfigInfo?.receiveLimit <= - referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? ( + referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive && gain ? ( {t('Claim now')} @@ -156,9 +140,11 @@ const RegimentalCom: React.FC = () => { {/* {t('Upgrade commander')} */} - {`${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', - )}${formatDivNumber(referralCommanderConfigInfo?.dividendFirst)}%${t('The commission')}`} + + {t('footer %number% text', { + number: `${referralCommanderConfigInfo?.dividendFirst || 0}%`, + })} + {/* {t('each time')} {t('last bid')} {t('commission fee')} */} diff --git a/src/views/Referral/components/UnunitedCom.tsx b/src/views/Referral/components/UnunitedCom.tsx index 7dd42e2..a089c23 100644 --- a/src/views/Referral/components/UnunitedCom.tsx +++ b/src/views/Referral/components/UnunitedCom.tsx @@ -18,10 +18,6 @@ const FooterDiv = styled.div` margin: 0 auto 30px auto; margin-left: 10%; ` -const TextDiv = styled(Text)` - margin-top: 10px; - font-size: 14px; -` const UnunitedCom: React.FC = () => { const { t } = useTranslation() diff --git a/src/views/Referral/index.tsx b/src/views/Referral/index.tsx index 7484254..7ef177c 100644 --- a/src/views/Referral/index.tsx +++ b/src/views/Referral/index.tsx @@ -19,20 +19,21 @@ const MainDiv = styled.div` ` const ContentDiv = styled.div` - width: 60%; + width: 50%; + background: rgba(255, 255, 255, 0.39); + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); + border-radius: 40px; +` +const ContentUnunited = styled.div` + width: 30%; background: rgba(255, 255, 255, 0.39); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); border-radius: 40px; - - ${({ theme }) => theme.mediaQueries.sm} { - width: 60%; - } - - ${({ theme }) => theme.mediaQueries.lg} { - width: 60%; - } ${({ theme }) => theme.mediaQueries.xs} { - width: 90%; + width: 80%; + } + ${({ theme }) => theme.mediaQueries.lg} { + width: 30%; } ` @@ -43,23 +44,46 @@ const Nft: React.FC = () => { const referralIsCommander = useReferralIsCommander() useEffect(() => { dispatch(fetchReferralInfoAsync(account)) - }, [account]) + }, [account, referralIsCommander]) return ( - {referralIsCommander ? ( + {account ? ( + referralIsCommander ? ( + + ) : ( + + + + ) + ) : ( + + + + )} + {/* {referralIsCommander ? ( <> {account ? ( ) : ( - + - + )} ) : ( - {account ? : } - )} + <> + {account ? ( + + + + ) : ( + + + + )} + + )} */} ) }