zhangshu
/
hiCity-nft
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

资金池总额

This commit is contained in:
myf 2022-04-28 14:28:12 +08:00
parent 54c0498f8b
commit dbf3d8bedc
8 changed files with 182 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/images/nft/23.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

13
public/images/nft/24.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

19
public/images/nft/blindbox.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 993 KiB

4
src/state/boards/fetchBoardsUser.ts
View File

@ -8,8 +8,8 @@ import { getAddress, getBoardAddress } from 'utils/addressHelpers'
export const fetchBoardUserAllowances = async (account: string) => {
const calls = boardsConfig.map((board) => {
const tokenAddresses = getAddress(board.tokenAddresses)
const boardChefAddress = getAddress(board.contractAddress)
return { address: tokenAddresses, name: 'allowance', params: [account, boardChefAddress] }
const boardChefAdress = getAddress(board.contractAddress)
return { address: tokenAddresses, name: 'allowance', params: [account, boardChefAdress] }
})
const rawLpAllowances = await multicall(erc20ABI, calls)

6
src/views/Board/components/HeaderItem.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'
import { Text } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import styled from 'styled-components'
interface InfoProps {
@ -22,9 +23,10 @@ const HeaderItem: React.FC<InfoProps> = ({ title, price }) => {
return (
<>
<HeaderMain>
<Text color="text" fontSize="24px">
{/* <Text color="text" fontSize="24px">
{price}
</Text>
</Text> */}
<Balance lineHeight="1" fontSize="24px" decimals={0} value={Number(price)} />
<Text color="textSubtle" fontSize="14px">
{title}
</Text>

59
src/views/Board/index.tsx
View File

@ -1,10 +1,13 @@
import BigNumber from 'bignumber.js'
import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react'
import { Route, useRouteMatch, useLocation } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import BigNumber from 'bignumber.js'
import erc20 from 'config/abi/erc20.json'
import boardsConfig from 'config/constants/boards'
import { getAddress, getBoardAddress } from 'utils/addressHelpers'
import boardABI from 'config/abi/board.json'
import multicall from 'utils/multicall'
import { useWeb3React } from '@web3-react/core'
import Balance from 'components/Balance'
import { Image, Heading, RowType, Toggle, Text } from '@pancakeswap/uikit'
import styled from 'styled-components'
import FlexLayout from 'components/Layout/Flex'
@ -41,27 +44,28 @@ const Boards: React.FC = () => {
const dispatch = useDispatch()
const { fastRefresh } = useRefresh()
// 资金池总额
const [totalAmount, setTotalAmount] = useState(0)
// 获取资金池总额
const getCapital = async () => {
const calls = boardsConfig.map((board) => {
const contractAddress = getAddress(board.contractAddress)
return {
address: contractAddress,
name: '_poolInfo',
}
})
const boardsPoolInfo = await multicall(boardABI, calls)
console.log('boardsPoolInfo:', boardsPoolInfo)
boardsPoolInfo.forEach((item) => {
setTotalAmount(totalAmount + Number(new BigNumber(item.totalAmount._hex).toJSON()))
})
}
useEffect(() => {
dispatch(fetchBoardsPublicDataAsync())
if (account) {
dispatch(fetchBoardUserDataAsync(account))
const calls = [
// 查节点的代币数量
{
address: tokenAddress,
name: 'balanceOf',
params: [BoardChefAddress],
},
// Token decimals
{
address: tokenAddress,
name: 'decimals',
},
]
// eslint-disable-next-line prefer-const
let [tokenBalance, tokenDecimals] = await multicall(erc20, calls)
tokenBalance = new BigNumber(tokenBalance).div(new BigNumber(10).pow(tokenDecimals))
getCapital()
}
}, [account, dispatch, fastRefresh])
@ -78,28 +82,21 @@ const Boards: React.FC = () => {
}
return (
<>
<Page>
<Header>
<Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
{t('Total capital pool')}
</Heading>
{/* <SecondText fontSize="28px" color="text">
{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',
)}
</SecondText> */}
<Text fontSize="32px" color="text">
1.000.000.000.000
</Text>
<Balance lineHeight="1" fontSize="32px" decimals={0} value={Number(totalAmount)} />
<FlexLayoutMain>
<HeaderItem title={t('The total amount of dividends')} price={1.0} />
<HeaderItem title={t('Pending dividend')} price={1.0} />
{/* <HeaderItem title={t('Pending dividend')} price={1.0} /> */}
<HeaderItem title={t('Number of boards')} price={1.0} />
<HeaderItem title={t('Number of holders')} price={1.0} />
</FlexLayoutMain>
</Header>
<Page>{renderContent()}</Page>
</>
{renderContent()}
</Page>
)
}

31
src/views/Nft/component/StepCom.tsx
View File

@ -1,6 +1,29 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { Text, Flex, Image } from '@pancakeswap/uikit'
import { Text, Flex, Image, Button } from '@pancakeswap/uikit'
const SubButton = styled(Button)`
width: 25px;
height: 25px;
background: rgba(239, 232, 247, 0.39);
border: 1px solid rgba(255, 255, 255, 0.0588235294117647);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
font-size: 18px;
color: #ada5ba;
border-radius: 5px;
padding: 0;
`
const AddButton = styled(Button)`
width: 25px;
height: 25px;
background: linear-gradient(180deg, #6eddfa 0%, #ac74f1 100%);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
font-size: 18px;
color: #fff;
border-radius: 5px;
padding: 0;
`
export default function StepCom() {
const [valNumber, setInputState] = useState(1)
@ -16,11 +39,13 @@ export default function StepCom() {
return (
<Flex justifyContent="space-between" alignItems="center" width={120}>
<Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} />
{/* <Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} /> */}
<SubButton onClick={() => onAdd('sub')}>-</SubButton>
<Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
{valNumber}
</Text>
<Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} />
<AddButton onClick={() => onAdd('add')}>+</AddButton>
{/* <Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} /> */}
</Flex>
)
}

102
src/views/Nft/index.tsx
View File

@ -46,12 +46,29 @@ const StyledPage = styled.div`
`
const BodyWrapper = styled(Card)`
padding-bottom: 20px;
border-radius: 24px;
max-width: 500px;
width: 100%;
/* width: 60%; */
width: 500px;
overflow: visible;
position: relative;
`
const TextKey = styled(Text)`
font-size: 26px;
color: #999999;
`
const TextVal = styled(Text)`
font-size: 26px;
color: #1fc7d4;
margin-left: 10px;
`
const FlexTime = styled(Flex)`
position: absolute;
width: 100%;
top: 20px;
justify-content: center;
`
const HindDiv = styled.div`
width: 32px;
@ -77,10 +94,12 @@ const Divs = styled.div`
min-height: calc(100vh - 104px);
background: ${({ theme }) => theme.colors.gradients.bubblegum};
`
const DetailDiv = styled.div`
margin-top: -100px;
`
const DetailInfo = styled(Flex)`
padding: 0 21px;
margin-top: 24px;
margin-top: 15px;
`
const SwiperDiv = styled(Swiper)`
@ -105,7 +124,31 @@ const SwiperDiv = styled(Swiper)`
const Nft: React.FC = () => {
const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
const [hour, setHour] = useState('0')
const [minute, setMinute] = useState('0')
const [second, setSecond] = useState('0')
const countFun = (time) => {
// const timer: any = null
// let sys_second = new Date(time).getTime() - new Date().getTime()
// timer = setInterval(() => {
// // 防止倒计时出现负数
// if (sys_second > 1000) {
// sys_second -= 1000
// // let day = Math.floor(sys_second / 1000 / 3600 / 24)
// setHour(Math.floor((sys_second / 1000 / 3600) % 24))
// setMinute(Math.floor((sys_second / 1000 / 60) % 60))
// setSecond(Math.floor((sys_second / 1000) % 60))
// // this.setState({
// // day: day,
// // hour: hour < 10 ? '0' + hour : hour,
// // minute: minute < 10 ? '0' + minute : minute,
// // second: second < 10 ? '0' + second : second,
// // })
// } else {
// clearInterval(timer)
// }
// }, 1000)
}
return (
<MainDiv>
<SwiperDiv
@ -121,29 +164,34 @@ const Nft: React.FC = () => {
<StyledPage>
<Divs>
<BodyWrapper>
<HindDiv>
<Image src="/images/nft/hint.png" alt="" width={32} height={32} />
</HindDiv>
<Flex justifyContent="center" marginTop="-40px">
{/* <Flex justifyContent="center" marginTop="-40px">
<BlindboxImage src="/images/nft/blindbox.png" alt="" width={377} height={367} />
</Flex>
<DetailInfo justifyContent="space-between" alignItems="center">
<Text color="textSubtle">系列</Text>
<Text color="text">法式盛宴</Text>
</DetailInfo>
<DetailInfo justifyContent="space-between" alignItems="center">
<Text color="textSubtle">价格</Text>
<Flex alignItems="center" justifyContent="flex-end">
<Text color="#1FC7D4" fontSize="24px">
500
</Text>
<Text color="text">黄油</Text>
</Flex>
</DetailInfo>
<DetailInfo justifyContent="space-between" alignItems="center">
<Text color="textSubtle">数量</Text>
<StepCom />
</DetailInfo>
</Flex> */}
<FlexTime>
<TextKey>剩余时间</TextKey>
<TextVal>7小时</TextVal>
</FlexTime>
<Image src="/images/nft/blindbox.svg" width={500} height={460} />
<DetailDiv>
<DetailInfo justifyContent="space-between" alignItems="center">
<Text color="textSubtle">系列</Text>
<Text color="text">法式盛宴</Text>
</DetailInfo>
<DetailInfo justifyContent="space-between" alignItems="center">
<Text color="textSubtle">价格</Text>
<Flex alignItems="center" justifyContent="flex-end">
<Text color="#1FC7D4" fontSize="24px">
500
</Text>
<Text color="text">黄油</Text>
</Flex>
</DetailInfo>
<DetailInfo justifyContent="space-between" alignItems="center">
<Text color="textSubtle">数量</Text>
<StepCom />
</DetailInfo>
</DetailDiv>
<FlexText name="钱包中的 BUTTER" value="0" />
<FlexText name="回收点数抵扣" value="0" />
<FlexText name="实际黄油成本" value="0" />