yll
/
cwfront
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

progressing

This commit is contained in:
john 2022-05-14 14:03:04 +07:00
parent 2efeca6756
commit 8bd00b1ef3
14 changed files with 470 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/AppContext.js
View File

@ -43,18 +43,18 @@ export const AppContextProvider = ({ children }) => {
]
const docItems = [
{ name: t('announcement'), icon: '', path: '', enabled: true },
{ name: t('faq'), icon: '', path: '', enabled: true },
{ name: t('tutorial'), icon: '', path: '', enabled: true },
{ name: t('announcement'), icon: '', path: '/ann', enabled: true },
{ name: t('faq'), icon: '', path: '/faq', enabled: true },
{ name: t('tutorial'), icon: '', path: '/tut', enabled: true },
]
React.useEffect(() => {
console.debug('should be once')
get_settings().then((res) => {
const o = res.data.other
const s = res.data.system
const b = res.data.base
setTitle(o.title)
document.title = o.title + ' - DeFi platform for professor'
@ -71,8 +71,10 @@ export const AppContextProvider = ({ children }) => {
setBannerLink(s.pic_url)
SOCIALS[0].path = s.telegram
SOCIALS[1].path = s.twitter
SOCIALS[0].path = b.telegram
SOCIALS[1].path = b.twitter
SOCIALS[2].path = b.facebook
SOCIALS[3].path = b.whatsapp
setSocials(SOCIALS)
setKefuUrl(s.kefu_url)

10
src/api/api.js
View File

@ -137,8 +137,14 @@ export const get_withdrawal = (address, balance, he_address) => {
type: 1,
})
}
export const get_article = (params) => {
return getWith('article', params)
export const retrieve_all = (address) => {
return getWith('all', {
address,
})
}
export const get_article = (params) => {
return getWith('article', params)
}

2
src/components/ChakraBottomNav.js
View File

@ -57,7 +57,7 @@ export const ChakraBottomNavItem = ({ index, icon, text,
p="4"
bg={actived() ? _bgActive : bg}
fontFamily="monospace"
fontSize="18"
fontSize="16"
fontWeight="700"
color={actived() ? 'white' : 'black'}
flex="1"

15
src/components/NumCard.js
View File

@ -1,5 +1,5 @@
import React from "react"
import { Flex, Stack, Icon, Text, VStack, HStack } from "@chakra-ui/react"
import { Flex, Stack, Icon, Text, VStack, HStack, Button, Badge } from "@chakra-ui/react"
import { useCountup } from '../hooks'
/**
*
@ -76,7 +76,7 @@ export const MultiChainCard = ({ icon, title, num, enabledCountup = true }) => {
)
}
export const StateCard = ({ icon, title, num, enabledCountup = true }) => {
export const StateCard = ({ icon, title, num, button = '', onClick = null, enabledCountup = true }) => {
const [counter, setCounter] = useCountup()
React.useEffect(() => {
@ -87,7 +87,6 @@ export const StateCard = ({ icon, title, num, enabledCountup = true }) => {
<VStack
align="center"
justify="center"
direction="column"
flex={1}
borderRadius="5"
>
@ -113,6 +112,16 @@ export const StateCard = ({ icon, title, num, enabledCountup = true }) => {
fontWeight="700"
>
<Text>{enabledCountup ? counter : num}</Text>
{
button && <Badge
variant="ghost"
colorScheme="yellow"
cursor="pointer"
onClick={onClick}
>
{button}
</Badge>
}
</HStack>
</VStack>

120
src/components/StakingCoinCard.js
View File

@ -10,17 +10,22 @@ import { ModalBox } from "./alert"
import { CardRow } from './FarmCoinCard'
import { FiLock, FiUnlock } from "react-icons/fi"
import { HBetween, HFStack, VFStack } from "./base"
import { config } from "../config"
/**
* Special Modal Box, Why not ask who is your daddy ???
*/
export const StakingModalStrategy = ({ isOpen, onClose,
icon, symbol, amount, percentage, address,
nodesStaked, nodesNominations, share, status }) => {
nodesStaked, nodesNominations, share, status,
plans,
}) => {
const { t } = useTranslation()
return (
<ModalBox
title="Strategy"
title={t('strategy')}
isOpen={isOpen}
onClose={onClose}
showFooter={false}
@ -32,8 +37,7 @@ export const StakingModalStrategy = ({ isOpen, onClose,
align="center"
justify="space-between"
>
<HStack
>
<HStack>
<Image w="10" h="10" borderRadius="50%" src={icon} alt={symbol} />
<Text fontSize="22" fontWeight="900">
{symbol}
@ -51,7 +55,7 @@ export const StakingModalStrategy = ({ isOpen, onClose,
fontSize="12"
color="gray.400"
>
Staked
{t('staked')}
</Text>
</VStack>
</HStack>
@ -62,30 +66,62 @@ export const StakingModalStrategy = ({ isOpen, onClose,
color="yellow.400"
fontSize="14"
>
Note:The pledged amount of the node includes the pledged
amount of CoinWind's entire network staking
{t('nodeNominations')}
</Text>
</HStack>
{/* body */}
<VStack
w="full"
<VFStack>
<CardRow title={t('stakingFunds')} value={amount} />
<CardRow title={t('proportionOfFunds')} value={percentage} />
<CardRow title={t('stakingAddress')} value={address?.substring(0, 6) + '...'} />
<CardRow title={t('nodesStaked')} value={nodesStaked} />
<CardRow title={t('nodeNominations')} value={nodesNominations} />
<CardRow title={t('myShare')} value={share + '%'} />
<CardRow title={t('status')} value={status} />
</VFStack>
<HFStack py="4">
<Divider />
</HFStack>
<VFStack>
<HBetween
fontSize="16"
fontWeight="700"
>
<CardRow title="Staking funds" value={amount} />
<CardRow title="Proportion of funds" value={percentage} />
<CardRow title="Staking Address" value={address?.substring(0, 6) + '...'} />
<CardRow title="Nodes Staked" value={nodesStaked} />
<CardRow title="Node Nominations" value={nodesNominations} />
<CardRow title="My share" value={share + '%'} />
<CardRow title="Status" value={status} />
</VStack>
<Text>{t('duration')}</Text>
<Text>{t('hashrate')}</Text>
<Text>{t('apy')}</Text>
</HBetween>
{
plans && plans.map((p, index) => (
<HBetween
key={index}
fontSize="14"
color="gray.500"
>
<Text>{p.days}</Text>
<Text>{p.min + '~' + p.max}</Text>
<Text
color="green.500"
fontWeight="700"
>
{p.interest + '%'}
</Text>
</HBetween>
))
}
</VFStack>
</VStack>
</ModalBox>
)
}
export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
icon, symbol, index, assets, apy, income, start, days, authorized }) => {
index, coin, assets, income }) => {
const { t } = useTranslation()
const Row2Text = ({ row1, row2 }) => {
@ -107,11 +143,11 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
return (
<ModalBox
title="Certificate"
title={t('certificate')}
isOpen={isOpen}
onClose={onClose}
showCancel={false}
textConfirm="Certificate"
textConfirm={t('certificate')}
onConfirm={() => { onConfirm(index) }}
>
<VStack>
@ -122,9 +158,12 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
justify="space-between"
>
<HStack>
<Image w="10" h="10" borderRadius="50%" src={icon} alt={symbol} />
<Image w="10" h="10"
borderRadius="50%"
src={config.ENDPOINT + 'upload/' + coin?.name_img}
alt={coin?.name} />
<Text fontSize="22" fontWeight="900">
{symbol}
{coin?.name}
</Text>
</HStack>
<VStack>
@ -133,21 +172,23 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
fontWeight="700"
color="gray.400"
>
{'Assets ' + assets}
{t('assets') + ' ' + assets}
</Text>
</VStack>
</HStack>
{/* tag */}
<HFStack py="4">
<Tag colorScheme="orange" variant="solid" size="lg">Current</Tag>
<Tag colorScheme="orange" variant="solid" size="lg">
{t('current')}
</Tag>
</HFStack>
<HBetween>
<Text
color="gray.400"
>
APY
{t('apy')}
</Text>
<Text
@ -155,7 +196,10 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
fontSize="20"
fontWeight="700"
>
{apy}
{
coin?.conf.plans[0].interest + '% ~' +
coin?.conf.plans[coin?.conf.plans.length - 1].interest + '%'
}
</Text>
</HBetween>
@ -179,25 +223,24 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
{/* intro */}
<HBetween py="4">
<Row2Text
row1={start}
row2="Deposite"
row1="2022-04-02"
row2={t('deposite')}
/>
<Row2Text
row1="At any time"
row2="Unlock"
row1={t('atAnyTime')}
row2={t('unlock')}
/>
<Row2Text
row1={days + ' days after'}
row2="Claim"
row1={coin?.conf.plans[0].days + t('daysAfter')}
row2={t('claim')}
/>
</HBetween>
</VFStack>
<HBetween pt="4">
<Text color="gray.400">Income</Text>
<Text color="gray.400">{t('income')}</Text>
<Text fontWeight="700">{income}</Text>
</HBetween>
</VStack>
@ -208,6 +251,8 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
export const StakingCoinCard = ({
symbol, icon, index,
apy, vl, assets,
loading,
authorized,
onStrategy,
onCertificate,
}) => {
@ -253,7 +298,7 @@ export const StakingCoinCard = ({
w="full"
direction="row"
>
<Badge colorScheme="orange">Current</Badge>
<Badge colorScheme="orange">{t('current')}</Badge>
</Stack>
<HStack
@ -271,7 +316,7 @@ export const StakingCoinCard = ({
fontWeight="700"
color="green.500"
>
{apy}%
{apy}
</Text>
</HStack>
@ -296,10 +341,11 @@ export const StakingCoinCard = ({
</Button>
<Button
isLoading={loading}
colorScheme="orange"
onClick={() => { onCertificate(index) }}
>
{t('certificate')}
{authorized ? t('deposite') : t('certificate')}
</Button>
</HStack>
</VStack>

8
src/components/base/col.js
View File

@ -6,3 +6,11 @@ export const VFStack = ({ children, ...rest }) => ((
{children}
</VStack>
))
export const UpDown = ({ children, ...rest }) => ((
<VFStack
{...rest}
>
</VFStack>
))

18
src/lang/en.js
View File

@ -40,4 +40,22 @@ export const en = {
strategy: 'Stragety',
certificate: 'Certificate',
assets: 'Assets',
staked: 'Staked',
stakingNote: "Note:The pledged amount of the node includes the pledged amount of CoinWind's entire network staking",
stakingFunds: 'Staking funds',
proportionOfFunds: 'Proportion of funds',
stakingAddress: 'Staking Address',
nodesStaked: 'Nodes Staked',
nodeNominations: 'Node nominations',
myShare: 'My share',
status: 'Status',
atAnyTime: 'At any time',
unlock: 'Unlock',
daysAfter: 'days after',
claim: 'Claim',
income: 'Income',
duration: 'Duration',
hashrate: 'Hashrate',
}

18
src/lang/fr.js
View File

@ -40,4 +40,22 @@ export const fr = {
strategy: 'Stragety',
certificate: 'Certificate',
assets: 'Assets',
staked: 'Staked',
stakingNote: '',
stakingFunds: 'Staking funds',
proportionOfFunds: 'Proportion of funds',
stakingAddress: 'Staking Address',
nodesStaked: 'Nodes Staked',
nodeNominations: '',
myShare: 'My share',
status: 'Status',
atAnyTime: 'At any time',
unlock: 'Unlock',
daysAfter: 'days after',
claim: 'Claim',
income: 'Income',
duration: 'Duration',
hashrate: 'Hashrate',
}

28
src/lang/tw.js
View File

@ -17,7 +17,7 @@ export const tw = {
compoundInterest: 'Compound Interest',
deposite: '存入',
deposited: '已存入',
vl: 'VL',
vl: '鎖倉量',
remaining: 'Remaining',
withdrawal: '取出',
mining: '挖礦',
@ -36,8 +36,26 @@ export const tw = {
notFoundContent: "The page you're looking for does not seem to exist",
goHome: 'Go to Home',
current: 'Current',
strategy: 'Stragety',
certificate: 'Certificate',
assets: 'Assets',
current: '活期',
strategy: '資金策略',
certificate: '憑證',
assets: '資產量',
staked: '已質押',
stakingNote: '說明：節點已質押量包含全網Staking的質押量',
stakingFunds: '質押資金',
proportionOfFunds: '質押比例',
stakingAddress: '主網地址',
nodesStaked: '節點質押數',
nodeNominations: '節點提名數',
myShare: '我的份額',
status: '狀態',
atAnyTime: '隨時',
unlock: '解鎖',
daysAfter: '天後',
claim: '提取',
income: '收益',
duration: 'Duration',
hashrate: 'Hashrate',
}

14
src/pages/Farm.js
View File

@ -18,6 +18,7 @@ import {
} from "../api"
import { approve, transfer } from '../lib'
import { ModalBox } from '../components'
import { ModalDeposite } from '../uimsg'
let DEF_LOCK = {
count: 0,
@ -248,19 +249,12 @@ export const Farm = () => {
</ModalBox>
{/* deposite box */}
<ModalBox
title="Deposite"
<ModalDeposite
isOpen={isDepositeOpen}
onClose={onDepositeClose}
onConfirm={onDepositeConfirmed}
focusRef={depositeRef}
>
<Box>
<FormControl>Amount</FormControl>
<Input ref={depositeRef} placeholder="deposite amount" />
</Box>
</ModalBox>
ref={depositeRef}
/>
</>
)
}

238
src/pages/Staking.js
View File

@ -2,21 +2,86 @@ import React from "react"
import {
Stack, Image, HStack,
AspectRatio, useColorModeValue,
useDisclosure, useToast,
useDisclosure, useToast, Tag,
Text, Box,
} from "@chakra-ui/react"
import { StateCard, StakingCoinCard, StakingModalStrategy, StakingModalCertificate } from "../components"
import {
StateCard, StakingCoinCard, StakingModalStrategy,
StakingModalCertificate, ModalBox,
VFStack, HFStack, HBetween,
} from "../components"
import {
ModalDeposite
} from '../uimsg'
import { useApp } from "../AppContext"
import { config } from "../config"
import { ABI } from "../data"
import { ABI, Images } from "../data"
import {
get_staking_balance,
get_coins_staking,
get_ether, get_authorization_v,
get_authorization_one, get_authorization_search,
get_ether,
get_authorization_v,
get_authorization_one,
get_authorization_search,
retrieve_all,
get_upBalance,
} from "../api"
import { approve, transfer } from '../lib'
import { Images } from '../data'
import { useTranslation } from "react-i18next"
// Modal box for extraction
const ModalRetrieve = ({ isOpen, onClose, onConfirm, vLeft = 0, vRight = 0 }) => {
const TopT = ({ v }) => ((
<Text
fontSize="20"
fontWeight="700"
>
{v}
</Text>
))
const BelowT = ({ v }) => ((
<Text
fontSize={12}
color="gray.400"
>
{v}
</Text>
))
return (
<ModalBox
title="Income"
isOpen={isOpen}
onClose={onClose}
showCancel={false}
textConfirm="Extract"
onConfirm={onConfirm}
>
<VFStack
bg="gray.100"
p="4"
pb="20"
borderRadius="10"
>
<HFStack>
<Tag colorScheme="orange" variant="solid" size="lg">Current</Tag>
</HFStack>
<HBetween>
<VFStack>
<TopT v={vLeft} />
<BelowT v="USDT" />
</VFStack>
<VFStack>
<TopT v={vRight} />
<BelowT v="USDC" />
</VFStack>
</HBetween>
</VFStack>
</ModalBox>
)
}
export const Staking = () => {
const [balance, setBalance] = React.useState({})
@ -24,6 +89,7 @@ export const Staking = () => {
const [coins, setCoins] = React.useState([])
const [strategyIndex, setStrategyIndex] = React.useState(-1)
const [certificateIndex, setCertificateIndex] = React.useState(-1)
const [depositeIndex, setDepositeIndex] = React.useState(-1)
const app = useApp()
const toast = useToast()
@ -31,6 +97,12 @@ export const Staking = () => {
const { isOpen: isOpenStrategy, onOpen: onOpenStrategy, onClose: onCloseStrategy } = useDisclosure()
const { isOpen: isOpenCertificate, onOpen: onOpenCertificate, onClose: onCloseCertificate } = useDisclosure()
const { isOpen: isOpenExtract, onOpen: onOpenExtract, onClose: onCloseExtract } = useDisclosure()
const { isOpen: isOpenDeposite, onOpen: onOpenDeposite, onClose: onCloseDeposite } = useDisclosure()
const refDepositeFocus = React.useRef()
const { t } = useTranslation()
const _getVaultBalance = () => {
if (!app.address) {
@ -39,7 +111,7 @@ export const Staking = () => {
get_staking_balance(app.address).then((res) => {
setBalance(res.data)
console.log(res.data)
console.log('balances:', res.data)
})
}
@ -49,22 +121,63 @@ export const Staking = () => {
onOpenStrategy()
}
// click certificate / deposite button
const onCertificate = (index) => {
setCertificateIndex(index)
onOpenCertificate()
}
// clicked Certificate
const onConfirmCertificate = (index) => {
if (index < 0 || index >= coins.length) {
console.error('index out of range')
console.warning('index out of range')
return
}
let _coins = [...coins]
if (_coins[index].authorized) {
if (coins[index].authorized) {
setDepositeIndex(prev => index)
onOpenDeposite()
} else {
onOpenCertificate()
}
}
// ModalDeposite callback
const onConfirmDeposite = () => {
if (depositeIndex < 0 || depositeIndex >= coins.length) {
console.error(depositeIndex, ' out of range')
return
}
const amount = refDepositeFocus.current.value
transfer(ABI, coins[depositeIndex].address, app.appAddress, amount, app.address, (err, res) => {
if (!err) {
toast({
title: 'Succeed',
description: "You have successfully deposited " + amount + " " + coins[depositeIndex].name,
status: 'success',
duration: 9000,
isClosable: true,
})
// TODO 提交充值记录
get_upBalance(app.address).then(res => {
}).catch(err => {
console.error('get_upBalance() error:' + err.message)
})
} else {
toast({
title: 'Failed',
description: "Your operation has not been completed.",
status: 'info',
duration: 9000,
isClosable: true,
})
console.error('transfer() error:' + err.message)
}
})
}
// ModalExtract callback
const onConfirmExtract = () => {
if (!app.address) {
toast({
title: 'Wallet not connected',
@ -75,6 +188,53 @@ export const Staking = () => {
})
return
}
if (balance.USDT_T <= 0 && balance.USDC_T <= 0) {
toast({
title: '',
description: "Has no income",
status: 'info',
duration: 9000,
isClosable: true,
})
return
}
retrieve_all(app.address).then(res => {
_getVaultBalance()
toast({
title: 'Succeed',
description: "Operation succeed.",
status: 'success',
duration: 9000,
isClosable: true,
})
}).catch(err => {
console.error('retrieve_all() error:', err.message)
})
}
// Modal certificate callback
const onConfirmCertificate = (index) => {
if (index < 0 || index >= coins.length) {
console.error('index out of range')
return
}
if (!app.address) {
toast({
title: 'Wallet not connected',
description: "Please connect your wallet first to perform the operation",
status: 'warning',
duration: 9000,
isClosable: true,
})
return
}
let _coins = [...coins]
// make button loading
_coins[index].loading = true
setCoins(_coins)
@ -108,13 +268,16 @@ export const Staking = () => {
setCoins(_coins)
})
}
}
React.useEffect(() => {
_getVaultBalance()
get_coins_staking().then(res => {
setCoins(res.data)
res.data.forEach((obj) => {
obj.conf = JSON.parse(obj.conf)
obj.authorized = true
})
setCoins(prev => res.data)
}).catch(err => {
console.error('get_coins_staking() error:' + err.message)
})
@ -123,6 +286,8 @@ export const Staking = () => {
let list = ''
let changed = false
let _coins = [...coins]
console.log(res.data)
res.data.result.forEach(v => {
if (v.from == app.address.toLowerCase() && v.isError == 0) {
if (v.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') {
@ -165,8 +330,13 @@ export const Staking = () => {
<HStack
flex={1}
>
<StateCard title="Personal TVL($)" num={balance.USDC} />
<StateCard title="Total Personal Earned($)" num={balance.USDC_T} />
<StateCard title="Personal TVL($)" num={balance.USDC + balance.USDT} />
<StateCard
title="Total Personal Earned($)"
num={balance.USDC_T + balance.USDT_T}
button={t('claim')}
onClick={onOpenExtract}
/>
</HStack>
</Stack>
@ -179,8 +349,13 @@ export const Staking = () => {
index={index}
icon={config.ENDPOINT + 'upload/' + coin.name_img}
symbol={coin.name}
apy={coin.yield}
apy={
coin.conf.plans[0].interest + '% ~ ' +
coin.conf.plans[coin.conf.plans.length - 1].interest + '%'
}
vl={coin.count_use}
loading={coin.loading}
authorized={coin.authorized}
assets={0.00}
onStrategy={onStrategy}
onCertificate={onCertificate}
@ -189,6 +364,7 @@ export const Staking = () => {
))
}
{/* Modal for Strategy button */}
<StakingModalStrategy
isOpen={isOpenStrategy}
onClose={onCloseStrategy}
@ -199,23 +375,29 @@ export const Staking = () => {
address={coins[strategyIndex]?.address}
nodesStaked={coins[strategyIndex]?.count}
nodesNominations={coins[strategyIndex]?.count}
plans={coins[strategyIndex]?.conf.plans}
share={0.58}
status='normal'
/>
{/* Modal for Certificate button */}
<StakingModalCertificate
isOpen={isOpenCertificate}
onClose={onCloseCertificate}
icon={config.ENDPOINT + 'upload/' + coins[certificateIndex]?.name_img}
symbol={coins[certificateIndex]?.name}
apy={coins[certificateIndex]?.yield}
authorized={coins[certificateIndex]?.authorized}
index={certificateIndex}
onConfirm={onConfirmCertificate}
index={certificateIndex}
coin={coins[certificateIndex]}
assets={0.00}
income={0.00}
start="2022-04-01"
days="22"
/>
<ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
<ModalDeposite
isOpen={isOpenDeposite}
onClose={onCloseDeposite}
onConfirm={onConfirmDeposite}
ref={refDepositeFocus}
/>
</>
)

24
src/uimsg/ModalDeposite.js Normal file
View File

@ -0,0 +1,24 @@
import { useTranslation } from "react-i18next"
import { ModalBox } from "../components"
import { Box, FormControl, Input } from "@chakra-ui/react"
import React from "react"
export const ModalDeposite = React.forwardRef((props, ref) => {
const { t } = useTranslation()
return (
<ModalBox
title={t('deposite')}
isOpen={props.isOpen}
onClose={props.onClose}
onConfirm={props.onConfirm}
focusRef={ref}
>
<Box>
<FormControl>Amount</FormControl>
<Input ref={ref} placeholder="deposite amount" />
</Box>
</ModalBox>
)
})

2
src/uimsg/index.js Normal file
View File

@ -0,0 +1,2 @@
export * from './ModalDeposite'
export * from './toasts'

18
src/uimsg/toasts.js Normal file
View File

@ -0,0 +1,18 @@
const toast = (t, content = '', title = '', duration = 9000, status = 'warning') => {
t({
title: title,
description: content,
status: status,
duration: duration,
isClosable: true,
})
}
export const toastw = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration)
export const toasti = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'info')
export const toasts = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'success')
export const toaste = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'error')