Compare commits
No commits in common. "c37abdec944b06c25b5e2d7238be3b9ec267033d" and "9dea998d2013bb466b64eedce806eb4a5e8d536c" have entirely different histories.
c37abdec94
...
9dea998d20
|
|
@ -43,18 +43,18 @@ export const AppContextProvider = ({ children }) => {
|
|||
]
|
||||
|
||||
const docItems = [
|
||||
{ name: t('announcement'), icon: '', path: '/ann', enabled: true },
|
||||
{ name: t('faq'), icon: '', path: '/faq', enabled: true },
|
||||
{ name: t('tutorial'), icon: '', path: '/tut', enabled: true },
|
||||
{ name: t('announcement'), icon: '', path: '', enabled: true },
|
||||
{ name: t('faq'), icon: '', path: '', enabled: true },
|
||||
{ name: t('tutorial'), icon: '', path: '', 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,10 +71,8 @@ export const AppContextProvider = ({ children }) => {
|
|||
|
||||
setBannerLink(s.pic_url)
|
||||
|
||||
SOCIALS[0].path = b.telegram
|
||||
SOCIALS[1].path = b.twitter
|
||||
SOCIALS[2].path = b.facebook
|
||||
SOCIALS[3].path = b.whatsapp
|
||||
SOCIALS[0].path = s.telegram
|
||||
SOCIALS[1].path = s.twitter
|
||||
|
||||
setSocials(SOCIALS)
|
||||
setKefuUrl(s.kefu_url)
|
||||
|
|
|
|||
|
|
@ -137,14 +137,8 @@ export const get_withdrawal = (address, balance, he_address) => {
|
|||
type: 1,
|
||||
})
|
||||
}
|
||||
|
||||
export const retrieve_all = (address) => {
|
||||
return getWith('all', {
|
||||
address,
|
||||
})
|
||||
}
|
||||
|
||||
export const get_article = (params) => {
|
||||
return getWith('article', params)
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export const ChakraBottomNavItem = ({ index, icon, text,
|
|||
p="4"
|
||||
bg={actived() ? _bgActive : bg}
|
||||
fontFamily="monospace"
|
||||
fontSize="16"
|
||||
fontSize="18"
|
||||
fontWeight="700"
|
||||
color={actived() ? 'white' : 'black'}
|
||||
flex="1"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react"
|
||||
import { Flex, Stack, Icon, Text, VStack, HStack, Button, Badge } from "@chakra-ui/react"
|
||||
import { useCountup } from '../hooks'
|
||||
import { Flex, Stack, Icon, Text, VStack, HStack } from "@chakra-ui/react"
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
|
@ -31,14 +31,11 @@ export const NumCard = ({ icon, title, num }) => {
|
|||
)
|
||||
}
|
||||
|
||||
export const MultiChainCard = ({ icon, title, num, enabledCountup = true }) => {
|
||||
const [counter, setCounter] = useCountup()
|
||||
export const MultiChainCard = ({ icon, title, num }) => {
|
||||
|
||||
React.useEffect(() => {
|
||||
if (enabledCountup) {
|
||||
setCounter(parseFloat(num || 0.00))
|
||||
}
|
||||
}, [num])
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<VStack
|
||||
|
|
@ -69,24 +66,24 @@ export const MultiChainCard = ({ icon, title, num, enabledCountup = true }) => {
|
|||
fontSize="22"
|
||||
fontWeight="900"
|
||||
>
|
||||
<Text>{enabledCountup ? counter : num}</Text>
|
||||
<Text>{num}</Text>
|
||||
</HStack>
|
||||
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
|
||||
export const StateCard = ({ icon, title, num, button = '', onClick = null, enabledCountup = true }) => {
|
||||
const [counter, setCounter] = useCountup()
|
||||
export const StateCard = ({ icon, title, num }) => {
|
||||
|
||||
React.useEffect(() => {
|
||||
enabledCountup && setCounter(parseFloat(num || 0.00))
|
||||
}, [num])
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<VStack
|
||||
align="center"
|
||||
justify="center"
|
||||
direction="column"
|
||||
flex={1}
|
||||
borderRadius="5"
|
||||
>
|
||||
|
|
@ -111,17 +108,7 @@ export const StateCard = ({ icon, title, num, button = '', onClick = null, enabl
|
|||
fontSize="18"
|
||||
fontWeight="700"
|
||||
>
|
||||
<Text>{enabledCountup ? counter : num}</Text>
|
||||
{
|
||||
button && <Badge
|
||||
variant="ghost"
|
||||
colorScheme="yellow"
|
||||
cursor="pointer"
|
||||
onClick={onClick}
|
||||
>
|
||||
{button}
|
||||
</Badge>
|
||||
}
|
||||
<Text>{num}</Text>
|
||||
</HStack>
|
||||
|
||||
</VStack>
|
||||
|
|
|
|||
|
|
@ -10,22 +10,17 @@ 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,
|
||||
plans,
|
||||
}) => {
|
||||
|
||||
const { t } = useTranslation()
|
||||
nodesStaked, nodesNominations, share, status }) => {
|
||||
|
||||
return (
|
||||
<ModalBox
|
||||
title={t('strategy')}
|
||||
title="Strategy"
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
showFooter={false}
|
||||
|
|
@ -37,7 +32,8 @@ 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}
|
||||
|
|
@ -55,7 +51,7 @@ export const StakingModalStrategy = ({ isOpen, onClose,
|
|||
fontSize="12"
|
||||
color="gray.400"
|
||||
>
|
||||
{t('staked')}
|
||||
Staked
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
|
@ -66,62 +62,30 @@ export const StakingModalStrategy = ({ isOpen, onClose,
|
|||
color="yellow.400"
|
||||
fontSize="14"
|
||||
>
|
||||
{t('nodeNominations')}
|
||||
Note:The pledged amount of the node includes the pledged
|
||||
amount of CoinWind's entire network staking
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* body */}
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
w="full"
|
||||
>
|
||||
<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>
|
||||
</VStack>
|
||||
</ModalBox>
|
||||
)
|
||||
}
|
||||
|
||||
export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
|
||||
index, coin, assets, income }) => {
|
||||
const { t } = useTranslation()
|
||||
icon, symbol, index, assets, apy, income, start, days, authorized }) => {
|
||||
|
||||
const Row2Text = ({ row1, row2 }) => {
|
||||
|
||||
|
|
@ -143,11 +107,11 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
|
|||
|
||||
return (
|
||||
<ModalBox
|
||||
title={t('certificate')}
|
||||
title="Certificate"
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
showCancel={false}
|
||||
textConfirm={t('certificate')}
|
||||
textConfirm="Certificate"
|
||||
onConfirm={() => { onConfirm(index) }}
|
||||
>
|
||||
<VStack>
|
||||
|
|
@ -158,12 +122,9 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
|
|||
justify="space-between"
|
||||
>
|
||||
<HStack>
|
||||
<Image w="10" h="10"
|
||||
borderRadius="50%"
|
||||
src={config.ENDPOINT + 'upload/' + coin?.name_img}
|
||||
alt={coin?.name} />
|
||||
<Image w="10" h="10" borderRadius="50%" src={icon} alt={symbol} />
|
||||
<Text fontSize="22" fontWeight="900">
|
||||
{coin?.name}
|
||||
{symbol}
|
||||
</Text>
|
||||
</HStack>
|
||||
<VStack>
|
||||
|
|
@ -172,23 +133,21 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
|
|||
fontWeight="700"
|
||||
color="gray.400"
|
||||
>
|
||||
{t('assets') + ' ' + assets}
|
||||
{'Assets ' + assets}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
{/* tag */}
|
||||
<HFStack py="4">
|
||||
<Tag colorScheme="orange" variant="solid" size="lg">
|
||||
{t('current')}
|
||||
</Tag>
|
||||
<Tag colorScheme="orange" variant="solid" size="lg">Current</Tag>
|
||||
</HFStack>
|
||||
|
||||
<HBetween>
|
||||
<Text
|
||||
color="gray.400"
|
||||
>
|
||||
{t('apy')}
|
||||
APY
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
|
|
@ -196,10 +155,7 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
|
|||
fontSize="20"
|
||||
fontWeight="700"
|
||||
>
|
||||
{
|
||||
coin?.conf.plans[0].interest + '% ~' +
|
||||
coin?.conf.plans[coin?.conf.plans.length - 1].interest + '%'
|
||||
}
|
||||
{apy}
|
||||
</Text>
|
||||
</HBetween>
|
||||
|
||||
|
|
@ -223,24 +179,25 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
|
|||
{/* intro */}
|
||||
<HBetween py="4">
|
||||
<Row2Text
|
||||
row1="2022-04-02"
|
||||
row2={t('deposite')}
|
||||
row1={start}
|
||||
row2="Deposite"
|
||||
/>
|
||||
|
||||
<Row2Text
|
||||
row1={t('atAnyTime')}
|
||||
row2={t('unlock')}
|
||||
row1="At any time"
|
||||
row2="Unlock"
|
||||
/>
|
||||
|
||||
<Row2Text
|
||||
row1={coin?.conf.plans[0].days + t('daysAfter')}
|
||||
row2={t('claim')}
|
||||
row1={days + ' days after'}
|
||||
row2="Claim"
|
||||
/>
|
||||
</HBetween>
|
||||
</VFStack>
|
||||
|
||||
|
||||
<HBetween pt="4">
|
||||
<Text color="gray.400">{t('income')}</Text>
|
||||
<Text color="gray.400">Income</Text>
|
||||
<Text fontWeight="700">{income}</Text>
|
||||
</HBetween>
|
||||
</VStack>
|
||||
|
|
@ -251,8 +208,6 @@ export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
|
|||
export const StakingCoinCard = ({
|
||||
symbol, icon, index,
|
||||
apy, vl, assets,
|
||||
loading,
|
||||
authorized,
|
||||
onStrategy,
|
||||
onCertificate,
|
||||
}) => {
|
||||
|
|
@ -298,7 +253,7 @@ export const StakingCoinCard = ({
|
|||
w="full"
|
||||
direction="row"
|
||||
>
|
||||
<Badge colorScheme="orange">{t('current')}</Badge>
|
||||
<Badge colorScheme="orange">Current</Badge>
|
||||
</Stack>
|
||||
|
||||
<HStack
|
||||
|
|
@ -316,15 +271,15 @@ export const StakingCoinCard = ({
|
|||
fontWeight="700"
|
||||
color="green.500"
|
||||
>
|
||||
{apy}
|
||||
{apy}%
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<HStack
|
||||
w="full"
|
||||
>
|
||||
<StateCard title={t('vl') + '(' + symbol + ')'} num={vl} enabledCountup={false} />
|
||||
<StateCard title={t('assets') + '(' + symbol + ')'} num={assets} enabledCountup={false} />
|
||||
<StateCard title={t('vl') + '(' + symbol + ')'} num={vl} />
|
||||
<StateCard title={t('assets') + '(' + symbol + ')'} num={assets} />
|
||||
</HStack>
|
||||
|
||||
<HStack
|
||||
|
|
@ -341,11 +296,10 @@ export const StakingCoinCard = ({
|
|||
</Button>
|
||||
|
||||
<Button
|
||||
isLoading={loading}
|
||||
colorScheme="orange"
|
||||
onClick={() => { onCertificate(index) }}
|
||||
>
|
||||
{authorized ? t('deposite') : t('certificate')}
|
||||
{t('certificate')}
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,4 @@ export const VFStack = ({ children, ...rest }) => ((
|
|||
<VStack w="full" {...rest}>
|
||||
{children}
|
||||
</VStack>
|
||||
))
|
||||
|
||||
export const UpDown = ({ children, ...rest }) => ((
|
||||
<VFStack
|
||||
{...rest}
|
||||
>
|
||||
|
||||
</VFStack>
|
||||
))
|
||||
|
|
@ -1,2 +1 @@
|
|||
export * from './useLocalStorage'
|
||||
export * from './useCountup'
|
||||
export * from './useLocalStorage'
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import React from "react"
|
||||
import { toF } from "../utils"
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {number} dest 目標數字
|
||||
*/
|
||||
export const useCountup = (mill_secs = 1000, interval = 100, start = 0) => {
|
||||
const [dest, setDest] = React.useState(0)
|
||||
const [cur, setCur] = React.useState(start)
|
||||
const hi = React.useRef()
|
||||
|
||||
const stopInterval = () => {
|
||||
if (hi.current) {
|
||||
clearInterval(hi.current)
|
||||
hi.current = null
|
||||
}
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
const times = mill_secs / interval
|
||||
const step = (dest - start) / times
|
||||
const step_min = step / 2
|
||||
const step_max = step * 1.5
|
||||
|
||||
setCur((cur) => start)
|
||||
|
||||
if (dest <= 0 || hi.current) {
|
||||
return
|
||||
}
|
||||
|
||||
hi.current = setInterval(() => {
|
||||
let new_delta = Math.random() * (step_max - step_min) + step_min
|
||||
// console.log('new_delta:', new_delta)
|
||||
setCur((cur) => {
|
||||
let new_val = new_delta + cur
|
||||
if (new_val >= dest) {
|
||||
new_val = dest
|
||||
stopInterval()
|
||||
}
|
||||
// console.log('new_val:', new_val)
|
||||
return toF(new_val, 2)
|
||||
})
|
||||
}, interval)
|
||||
|
||||
return stopInterval
|
||||
}, [dest])
|
||||
|
||||
return [cur, setDest]
|
||||
}
|
||||
|
|
@ -40,22 +40,4 @@ 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',
|
||||
}
|
||||
|
|
@ -40,22 +40,4 @@ 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',
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ export const tw = {
|
|||
compoundInterest: 'Compound Interest',
|
||||
deposite: '存入',
|
||||
deposited: '已存入',
|
||||
vl: '鎖倉量',
|
||||
vl: 'VL',
|
||||
remaining: 'Remaining',
|
||||
withdrawal: '取出',
|
||||
mining: '挖礦',
|
||||
|
|
@ -36,26 +36,8 @@ export const tw = {
|
|||
notFoundContent: "The page you're looking for does not seem to exist",
|
||||
goHome: 'Go to Home',
|
||||
|
||||
current: '活期',
|
||||
strategy: '資金策略',
|
||||
certificate: '憑證',
|
||||
assets: '資產量',
|
||||
staked: '已質押',
|
||||
stakingNote: '說明：節點已質押量包含全網Staking的質押量',
|
||||
stakingFunds: '質押資金',
|
||||
proportionOfFunds: '質押比例',
|
||||
stakingAddress: '主網地址',
|
||||
nodesStaked: '節點質押數',
|
||||
nodeNominations: '節點提名數',
|
||||
myShare: '我的份額',
|
||||
status: '狀態',
|
||||
|
||||
atAnyTime: '隨時',
|
||||
unlock: '解鎖',
|
||||
daysAfter: '天後',
|
||||
claim: '提取',
|
||||
income: '收益',
|
||||
|
||||
duration: 'Duration',
|
||||
hashrate: 'Hashrate',
|
||||
current: 'Current',
|
||||
strategy: 'Stragety',
|
||||
certificate: 'Certificate',
|
||||
assets: 'Assets',
|
||||
}
|
||||
|
|
@ -18,7 +18,6 @@ import {
|
|||
} from "../api"
|
||||
import { approve, transfer } from '../lib'
|
||||
import { ModalBox } from '../components'
|
||||
import { ModalDeposite } from '../uimsg'
|
||||
|
||||
let DEF_LOCK = {
|
||||
count: 0,
|
||||
|
|
@ -249,12 +248,19 @@ export const Farm = () => {
|
|||
</ModalBox>
|
||||
|
||||
{/* deposite box */}
|
||||
<ModalDeposite
|
||||
<ModalBox
|
||||
title="Deposite"
|
||||
isOpen={isDepositeOpen}
|
||||
onClose={onDepositeClose}
|
||||
onConfirm={onDepositeConfirmed}
|
||||
ref={depositeRef}
|
||||
/>
|
||||
focusRef={depositeRef}
|
||||
>
|
||||
<Box>
|
||||
<FormControl>Amount</FormControl>
|
||||
<Input ref={depositeRef} placeholder="deposite amount" />
|
||||
</Box>
|
||||
|
||||
</ModalBox>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -7,7 +7,6 @@ import { Auditors, Partners, Carousel, MultiChainCard, StateCard, MiningListCard
|
|||
import { useApp } from '../AppContext'
|
||||
import { get_coins_platform } from '../api'
|
||||
import { ImPieChart, ImFire } from 'react-icons/im'
|
||||
import { useCountup } from "../hooks"
|
||||
|
||||
const HomeFooter = () => {
|
||||
|
||||
|
|
|
|||
|
|
@ -2,86 +2,21 @@ import React from "react"
|
|||
import {
|
||||
Stack, Image, HStack,
|
||||
AspectRatio, useColorModeValue,
|
||||
useDisclosure, useToast, Tag,
|
||||
Text, Box,
|
||||
useDisclosure, useToast,
|
||||
} from "@chakra-ui/react"
|
||||
|
||||
import {
|
||||
StateCard, StakingCoinCard, StakingModalStrategy,
|
||||
StakingModalCertificate, ModalBox,
|
||||
VFStack, HFStack, HBetween,
|
||||
} from "../components"
|
||||
import {
|
||||
ModalDeposite
|
||||
} from '../uimsg'
|
||||
import { StateCard, StakingCoinCard, StakingModalStrategy, StakingModalCertificate } from "../components"
|
||||
import { useApp } from "../AppContext"
|
||||
import { config } from "../config"
|
||||
import { ABI, Images } from "../data"
|
||||
import { ABI } from "../data"
|
||||
import {
|
||||
get_staking_balance,
|
||||
get_coins_staking,
|
||||
get_ether,
|
||||
get_authorization_v,
|
||||
get_authorization_one,
|
||||
get_authorization_search,
|
||||
retrieve_all,
|
||||
get_upBalance,
|
||||
get_ether, get_authorization_v,
|
||||
get_authorization_one, get_authorization_search,
|
||||
} from "../api"
|
||||
import { approve, transfer } from '../lib'
|
||||
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>
|
||||
)
|
||||
}
|
||||
import { Images } from '../data'
|
||||
|
||||
export const Staking = () => {
|
||||
const [balance, setBalance] = React.useState({})
|
||||
|
|
@ -89,7 +24,6 @@ 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()
|
||||
|
|
@ -97,12 +31,6 @@ 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) {
|
||||
|
|
@ -111,7 +39,7 @@ export const Staking = () => {
|
|||
|
||||
get_staking_balance(app.address).then((res) => {
|
||||
setBalance(res.data)
|
||||
console.log('balances:', res.data)
|
||||
console.log(res.data)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -121,162 +49,72 @@ export const Staking = () => {
|
|||
onOpenStrategy()
|
||||
}
|
||||
|
||||
// click certificate / deposite button
|
||||
const onCertificate = (index) => {
|
||||
setCertificateIndex(index)
|
||||
if (index < 0 || index >= coins.length) {
|
||||
console.warning('index out of range')
|
||||
return
|
||||
}
|
||||
|
||||
if (coins[index].authorized) {
|
||||
setDepositeIndex(prev => index)
|
||||
onOpenDeposite()
|
||||
} else {
|
||||
onOpenCertificate()
|
||||
}
|
||||
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',
|
||||
description: "Please connect your wallet first to perform the operation",
|
||||
status: 'warning',
|
||||
duration: 9000,
|
||||
isClosable: true,
|
||||
})
|
||||
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
|
||||
// clicked Certificate
|
||||
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)
|
||||
if (_coins[index].authorized) {
|
||||
|
||||
approve(ABI, _coins[index].address, app.appAddress, app.address, (err, tx) => {
|
||||
_coins = [...coins]
|
||||
|
||||
if (!err) {
|
||||
get_authorization_one(app.address, _coins[index].name, tx).then(res => {
|
||||
// we dont care the result
|
||||
}).catch(err => {
|
||||
console.error('get_authorization_one() error:' + err.message)
|
||||
} else {
|
||||
if (!app.address) {
|
||||
toast({
|
||||
title: 'Wallet not connected',
|
||||
description: "Please connect your wallet first to perform the operation",
|
||||
status: 'warning',
|
||||
duration: 9000,
|
||||
isClosable: true,
|
||||
})
|
||||
|
||||
//
|
||||
let hi = setInterval(() => {
|
||||
get_authorization_search(tx).then(res => {
|
||||
_coins[index].authorized = true // for simple, we dont check the result.
|
||||
setCoins(_coins)
|
||||
|
||||
clearInterval(hi)
|
||||
}).catch(err => {
|
||||
console.error("get_authorization_search() error:" + err.message)
|
||||
})
|
||||
}, 8000)
|
||||
} else {
|
||||
console.error("approve error:" + err.message)
|
||||
return
|
||||
}
|
||||
// recover loading
|
||||
_coins[index].loading = false
|
||||
// make button loading
|
||||
_coins[index].loading = true
|
||||
setCoins(_coins)
|
||||
})
|
||||
|
||||
approve(ABI, _coins[index].address, app.appAddress, app.address, (err, tx) => {
|
||||
_coins = [...coins]
|
||||
|
||||
if (!err) {
|
||||
get_authorization_one(app.address, _coins[index].name, tx).then(res => {
|
||||
// we dont care the result
|
||||
}).catch(err => {
|
||||
console.error('get_authorization_one() error:' + err.message)
|
||||
})
|
||||
|
||||
//
|
||||
let hi = setInterval(() => {
|
||||
get_authorization_search(tx).then(res => {
|
||||
_coins[index].authorized = true // for simple, we dont check the result.
|
||||
setCoins(_coins)
|
||||
|
||||
clearInterval(hi)
|
||||
}).catch(err => {
|
||||
console.error("get_authorization_search() error:" + err.message)
|
||||
})
|
||||
}, 8000)
|
||||
} else {
|
||||
console.error("approve error:" + err.message)
|
||||
}
|
||||
// recover loading
|
||||
_coins[index].loading = false
|
||||
setCoins(_coins)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
_getVaultBalance()
|
||||
|
||||
get_coins_staking().then(res => {
|
||||
res.data.forEach((obj) => {
|
||||
obj.conf = JSON.parse(obj.conf)
|
||||
obj.authorized = true
|
||||
})
|
||||
setCoins(prev => res.data)
|
||||
setCoins(res.data)
|
||||
}).catch(err => {
|
||||
console.error('get_coins_staking() error:' + err.message)
|
||||
})
|
||||
|
|
@ -285,8 +123,6 @@ 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') {
|
||||
|
|
@ -329,13 +165,8 @@ export const Staking = () => {
|
|||
<HStack
|
||||
flex={1}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
<StateCard title="Personal TVL($)" num={balance.USDC} />
|
||||
<StateCard title="Total Personal Earned($)" num={balance.USDC_T} />
|
||||
</HStack>
|
||||
</Stack>
|
||||
|
||||
|
|
@ -348,13 +179,8 @@ export const Staking = () => {
|
|||
index={index}
|
||||
icon={config.ENDPOINT + 'upload/' + coin.name_img}
|
||||
symbol={coin.name}
|
||||
apy={
|
||||
coin.conf.plans[0].interest + '% ~ ' +
|
||||
coin.conf.plans[coin.conf.plans.length - 1].interest + '%'
|
||||
}
|
||||
apy={coin.yield}
|
||||
vl={coin.count_use}
|
||||
loading={coin.loading}
|
||||
authorized={coin.authorized}
|
||||
assets={0.00}
|
||||
onStrategy={onStrategy}
|
||||
onCertificate={onCertificate}
|
||||
|
|
@ -363,7 +189,6 @@ export const Staking = () => {
|
|||
))
|
||||
}
|
||||
|
||||
{/* Modal for Strategy button */}
|
||||
<StakingModalStrategy
|
||||
isOpen={isOpenStrategy}
|
||||
onClose={onCloseStrategy}
|
||||
|
|
@ -374,32 +199,24 @@ 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}
|
||||
onConfirm={onConfirmCertificate}
|
||||
icon={config.ENDPOINT + 'upload/' + coins[certificateIndex]?.name_img}
|
||||
symbol={coins[certificateIndex]?.name}
|
||||
apy={coins[certificateIndex]?.yield}
|
||||
authorized={coins[certificateIndex]?.authorized}
|
||||
index={certificateIndex}
|
||||
coin={coins[certificateIndex]}
|
||||
onConfirm={onConfirmCertificate}
|
||||
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}
|
||||
/>
|
||||
|
||||
<ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
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>
|
||||
)
|
||||
})
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './ModalDeposite'
|
||||
export * from './toasts'
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
|
||||
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')
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
|
||||
export const toF = (org, pn) => parseFloat(parseFloat(org).toFixed(pn))
|
||||
Loading…
Reference in New Issue