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

Compare commits

base: yll:9dea998d2013bb466b64eedce806eb4a5e8d536c
Branches Tags
yll:master
..
compare: yll:7c85336467c66662203b286288cbdea0b318d024
Branches Tags
yll:master

No commits in common. "9dea998d2013bb466b64eedce806eb4a5e8d536c" and "7c85336467c66662203b286288cbdea0b318d024" have entirely different histories.
9dea998d20 ... 7c85336467

17 changed files with 145 additions and 474 deletions
Show Stats Expand all files Collapse all files

1
.env.sample
View File

@ -1,3 +1,2 @@
REACT_APP_NAME = CoinWind REACT_APP_NAME = CoinWind
REACT_APP_I18N_ENABLED = true REACT_APP_I18N_ENABLED = true
REACT_APP_DEV_ENDPOINT = http://coinwind.test/

2
public/index.html
View File

@ -22,7 +22,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>%REACT_APP_NAME%</title> <title>React App</title>
</head> </head>
<body> <body>

16
src/AppContext.js
View File

@ -36,22 +36,20 @@ export const AppContextProvider = ({ children }) => {
const [appKey, setAppKey] = React.useState('') const [appKey, setAppKey] = React.useState('')
const [kefuUrl, setKefuUrl] = React.useState('') const [kefuUrl, setKefuUrl] = React.useState('')
const menuItems = [ const [menuItems, setMenuItems] = React.useState([
{ name: t('home'), icon: FiHome, path: '/home', enabled: true }, { name: t('home'), icon: FiHome, path: '/home', enabled: true },
{ name: t('farm'), icon: FiTrendingUp, path: '/farm', enabled: true }, { name: t('farm'), icon: FiTrendingUp, path: '/farm', enabled: true },
{ name: t('staking'), icon: FiLock, path: '/staking', enabled: true }, { name: t('staking'), icon: FiLock, path: '/staking', enabled: true },
] ])
const [docItems, setDocItems] = React.useState([
const docItems = [ { name: t('announcement'), icon: '', path: '/ann', enabled: true },
{ name: t('announcement'), icon: '', path: '', enabled: true }, { name: t('faq'), icon: '', path: '/faq', enabled: true },
{ name: t('faq'), icon: '', path: '', enabled: true }, { name: t('tutorial'), icon: '', path: '/tut', enabled: true },
{ name: t('tutorial'), icon: '', path: '', enabled: true }, ])
]
React.useEffect(() => { React.useEffect(() => {
console.debug('should be once') console.debug('should be once')
get_settings().then((res) => { get_settings().then((res) => {
const o = res.data.other const o = res.data.other
const s = res.data.system const s = res.data.system

2
src/components/FarmCoinCard.js
View File

@ -20,7 +20,7 @@ const Row = ({ children }) => {
) )
} }
export const CardRow = ({ title, value, compond = false }) => { const CardRow = ({ title, value, compond = false }) => {
return ( return (
<Row> <Row>

307
src/components/StakingCoinCard.js
View File

@ -1,307 +0,0 @@
import React from "react"
import {
VStack, Image, Text, Stack, HStack,
Button, Tag, Box,
useColorModeValue, Badge, Divider, Icon,
} from "@chakra-ui/react"
import { StateCard } from './NumCard'
import { useTranslation } from 'react-i18next'
import { ModalBox } from "./alert"
import { CardRow } from './FarmCoinCard'
import { FiLock, FiUnlock } from "react-icons/fi"
import { HBetween, HFStack, VFStack } from "./base"
/**
* Special Modal Box, Why not ask who is your daddy ???
*/
export const StakingModalStrategy = ({ isOpen, onClose,
icon, symbol, amount, percentage, address,
nodesStaked, nodesNominations, share, status }) => {
return (
<ModalBox
title="Strategy"
isOpen={isOpen}
onClose={onClose}
showFooter={false}
>
<VStack>
{/* title */}
<HStack
w="full"
align="center"
justify="space-between"
>
<HStack
>
<Image w="10" h="10" borderRadius="50%" src={icon} alt={symbol} />
<Text fontSize="22" fontWeight="900">
{symbol}
</Text>
</HStack>
<VStack>
<Text
fontSize="18"
fontWeight="700"
>
{amount}
</Text>
<Text
fontSize="12"
color="gray.400"
>
Staked
</Text>
</VStack>
</HStack>
{/* tips */}
<HStack>
<Text
color="yellow.400"
fontSize="14"
>
Note:The pledged amount of the node includes the pledged
amount of CoinWind's entire network staking
</Text>
</HStack>
{/* body */}
<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,
icon, symbol, index, assets, apy, income, start, days, authorized }) => {
const Row2Text = ({ row1, row2 }) => {
return (
<VStack
fontSize="14"
fontWeight="700"
align="start"
>
<Text>
{row1}
</Text>
<Text>
{row2}
</Text>
</VStack>
)
}
return (
<ModalBox
title="Certificate"
isOpen={isOpen}
onClose={onClose}
showCancel={false}
textConfirm="Certificate"
onConfirm={() => { onConfirm(index) }}
>
<VStack>
{/* title */}
<HStack
w="full"
align="center"
justify="space-between"
>
<HStack>
<Image w="10" h="10" borderRadius="50%" src={icon} alt={symbol} />
<Text fontSize="22" fontWeight="900">
{symbol}
</Text>
</HStack>
<VStack>
<Text
fontSize="16"
fontWeight="700"
color="gray.400"
>
{'Assets ' + assets}
</Text>
</VStack>
</HStack>
{/* tag */}
<HFStack py="4">
<Tag colorScheme="orange" variant="solid" size="lg">Current</Tag>
</HFStack>
<HBetween>
<Text
color="gray.400"
>
APY
</Text>
<Text
color="green.500"
fontSize="20"
fontWeight="700"
>
{apy}
</Text>
</HBetween>
<VFStack
borderWidth="1px"
borderRadius="lg"
boxShadow="lg"
p="4"
>
{/* progressing */}
<HFStack
color="green.400"
justify="center"
>
<Icon as={FiLock} />
<Box h="2px" w="40%" bg="green.400" />
<Icon as={FiUnlock} />
<Box h="2px" w="40%" bg="green.400" />
<Icon as={FiUnlock} />
</HFStack>
{/* intro */}
<HBetween py="4">
<Row2Text
row1={start}
row2="Deposite"
/>
<Row2Text
row1="At any time"
row2="Unlock"
/>
<Row2Text
row1={days + ' days after'}
row2="Claim"
/>
</HBetween>
</VFStack>
<HBetween pt="4">
<Text color="gray.400">Income</Text>
<Text fontWeight="700">{income}</Text>
</HBetween>
</VStack>
</ModalBox>
)
}
export const StakingCoinCard = ({
symbol, icon, index,
apy, vl, assets,
onStrategy,
onCertificate,
}) => {
const { t } = useTranslation()
const bg = useColorModeValue('white', 'gray.900')
return (
<VStack
position="relative"
w="full"
py="4"
px="8"
my="4"
bg={bg}
borderWidth="1px"
borderRadius="16"
align="center"
flex={1}
>
{/* title */}
<HStack
w="full"
justify="space-between"
align="center"
py="4"
>
<Text
fontWeight="700"
>{symbol}</Text>
<Image
w="8" h="8"
borderRadius="50%"
src={icon} alt={symbol}
/>
</HStack>
<Divider />
{/* body */}
<Stack
py="2"
w="full"
direction="row"
>
<Badge colorScheme="orange">Current</Badge>
</Stack>
<HStack
py="2"
w="full"
justify="space-between"
>
<Text
color="gray.500"
>
{t('apy')}
</Text>
<Text
fontSize="22"
fontWeight="700"
color="green.500"
>
{apy}%
</Text>
</HStack>
<HStack
w="full"
>
<StateCard title={t('vl') + '(' + symbol + ')'} num={vl} />
<StateCard title={t('assets') + '(' + symbol + ')'} num={assets} />
</HStack>
<HStack
w="full"
justify="space-around"
align="center"
>
<Button
colorScheme="orange"
variant="outline"
onClick={() => { onStrategy(index) }}
>
{t('strategy')}
</Button>
<Button
colorScheme="orange"
onClick={() => { onCertificate(index) }}
>
{t('certificate')}
</Button>
</HStack>
</VStack>
)
}

26
src/components/alert/ModalBox.js
View File

@ -1,10 +1,7 @@
import React from 'react' import React from 'react'
import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react' import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react'
export const ModalBox = ({ title, isOpen, onClose, children, export const ModalBox = ({ title, isOpen, onClose, children, onConfirm = null, focusRef = null }) => {
showFooter = true, showCancel = true, showConfirm = true,
textCancel = 'Cancel', textConfirm = 'OK',
onConfirm = null, focusRef = null }) => {
return ( return (
<Modal <Modal
@ -21,25 +18,14 @@ export const ModalBox = ({ title, isOpen, onClose, children,
{children} {children}
</ModalBody> </ModalBody>
<ModalFooter display={showFooter ? 'flex' : 'none'}> <ModalFooter>
<Button <Button colorScheme="blue" onClick={() => {
display={showConfirm ? 'flex' : 'none'}
colorScheme="blue"
onClick={() => {
onConfirm && onConfirm() onConfirm && onConfirm()
onClose() onClose()
}} }} mr={3}>
mr={3} OK
>
{textConfirm}
</Button>
<Button
display={showCancel ? 'flex' : 'none'}
onClick={onClose}
>
{textCancel}
</Button> </Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>

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

@ -1,8 +0,0 @@
import { VStack } from "@chakra-ui/react"
export const VFStack = ({ children, ...rest }) => ((
<VStack w="full" {...rest}>
{children}
</VStack>
))

2
src/components/base/index.js
View File

@ -1,2 +0,0 @@
export * from './row'
export * from './col'

25
src/components/base/row.js
View File

@ -1,25 +0,0 @@
import { HStack, Stack } from "@chakra-ui/react"
export const HFStack = ({ children, ...rest }) => ((
<HStack w="full" {...rest}>
{children}
</HStack>
))
export const HBetween = ({ children, ...rest }) => ((
<HStack
w="full"
justify="space-between"
align="center"
{...rest}
>
{children}
</HStack>
))
export const AutoRowCol = () => ((
<Stack>
</Stack>
))

2
src/components/index.js
View File

@ -6,9 +6,7 @@ export * from './MiningListCard'
export * from './Partners' export * from './Partners'
export * from './Auditors' export * from './Auditors'
export * from './FarmCoinCard' export * from './FarmCoinCard'
export * from './StakingCoinCard'
export * from './ColorModeSwitcher' export * from './ColorModeSwitcher'
export * from './Placeholder' export * from './Placeholder'
export * from './Panel' export * from './Panel'
export * from './alert' export * from './alert'
export * from './base'

2
src/config.js
View File

@ -1,7 +1,7 @@
const items = { const items = {
development: { development: {
ENDPOINT: process.env.REACT_APP_DEV_ENDPOINT || 'http://localhost/' ENDPOINT: 'http://coinwind.local.com/'
}, },
production: { production: {
ENDPOINT: 'https://gdb.01a01.com/' ENDPOINT: 'https://gdb.01a01.com/'

5
src/lang/en.js
View File

@ -35,9 +35,4 @@ export const en = {
notFound: 'Page Not Found', notFound: 'Page Not Found',
notFoundContent: "The page you're looking for does not seem to exist", notFoundContent: "The page you're looking for does not seem to exist",
goHome: 'Go to Home', goHome: 'Go to Home',
current: 'Current',
strategy: 'Stragety',
certificate: 'Certificate',
assets: 'Assets',
} }

7
src/lang/fr.js
View File

@ -2,7 +2,7 @@
export const fr = { export const fr = {
home: 'Domicile', home: 'Domicile',
farm: 'Ferme', farm: 'Ferme',
staking: 'Jalonnement', staking: 'Staking',
announcement: 'Annonce', announcement: 'Annonce',
faq: 'FAQ', faq: 'FAQ',
tutorial: 'Didacticiel', tutorial: 'Didacticiel',
@ -35,9 +35,4 @@ export const fr = {
notFound: 'Page Not Found', notFound: 'Page Not Found',
notFoundContent: "The page you're looking for does not seem to exist", notFoundContent: "The page you're looking for does not seem to exist",
goHome: 'Go to Home', goHome: 'Go to Home',
current: 'Current',
strategy: 'Stragety',
certificate: 'Certificate',
assets: 'Assets',
} }

7
src/lang/tw.js
View File

@ -2,7 +2,7 @@
export const tw = { export const tw = {
home: '首頁', home: '首頁',
farm: '農場', farm: '農場',
staking: '質押', staking: 'Staking',
announcement: '公告', announcement: '公告',
faq: 'FAQ', faq: 'FAQ',
tutorial: '教案', tutorial: '教案',
@ -35,9 +35,4 @@ export const tw = {
notFound: 'Page Not Found', notFound: 'Page Not Found',
notFoundContent: "The page you're looking for does not seem to exist", notFoundContent: "The page you're looking for does not seem to exist",
goHome: 'Go to Home', goHome: 'Go to Home',
current: 'Current',
strategy: 'Stragety',
certificate: 'Certificate',
assets: 'Assets',
} }

5
src/pages/Dao.js
View File

@ -1,5 +0,0 @@
import React from "react"
export const Dao = () => {
}

6
src/pages/Invite.js
View File

@ -1,6 +0,0 @@
import React from "react"
export const Invite = () => {
}

186
src/pages/Staking.js
View File

@ -1,60 +1,109 @@
import React from "react" import React from "react"
import { import {
Stack, Image, HStack, Stack, Image, HStack,
AspectRatio, useColorModeValue, AspectRatio, Input,
FormControl, Box,
useDisclosure, useToast, useDisclosure, useToast,
useColorModeValue,
} from "@chakra-ui/react" } from "@chakra-ui/react"
import { StateCard, StakingCoinCard, StakingModalStrategy, StakingModalCertificate } from "../components" import { StateCard, FarmCoinCard } from "../components"
import { useApp } from "../AppContext" import { useApp } from "../AppContext"
import { config } from "../config" import { config } from "../config"
import { ABI } from "../data" import { ABI } from "../data"
import { import {
get_staking_balance, get_staking_balance,
get_coins_platform_all,
get_coins_staking, get_coins_staking,
get_ether, get_authorization_v, get_ether, get_authorization_v,
get_authorization_one, get_authorization_search, get_authorization_one, get_authorization_search, get_upBalance,
} from "../api" } from "../api"
import { approve, transfer } from '../lib' import { approve, transfer } from '../lib'
import { ModalBox } from '../components'
import { Images } from '../data' import { Images } from '../data'
export const Staking = () => { export const Staking = () => {
const [balance, setBalance] = React.useState({}) const [balance, setBalance] = React.useState({})
const [lock, setLock] = React.useState([])
const [coins, setCoins] = React.useState([]) const [coins, setCoins] = React.useState([])
const [strategyIndex, setStrategyIndex] = React.useState(-1) const [depositeIndex, setDepositeIndex] = React.useState(-1)
const [certificateIndex, setCertificateIndex] = React.useState(-1)
const app = useApp() const app = useApp()
const toast = useToast() const toast = useToast()
const bg = useColorModeValue('white', 'gray.900') const bg = useColorModeValue('white', 'gray.900')
const { isOpen: isOpenStrategy, onOpen: onOpenStrategy, onClose: onCloseStrategy } = useDisclosure() const { isOpen: isWithdrawalOpen, onOpen: onWithdrawalOpen, onClose: onWithdrawalClose } = useDisclosure()
const { isOpen: isOpenCertificate, onOpen: onOpenCertificate, onClose: onCloseCertificate } = useDisclosure() const { isOpen: isDepositeOpen, onOpen: onDepositeOpen, onClose: onDepositeClose } = useDisclosure()
const withdrawalRef = React.useRef()
const depositeRef = React.useRef()
const _getcoins = () => {
get_coins_staking().then(res => {
// setCoins(res.data)
console.log(res.data)
}).catch(err => {
console.error('get_coins_staking() error:' + err.message)
})
}
const _getVaultBalance = () => { const _getVaultBalance = () => {
if (!app.address) { if (!app.balance) {
return false return false
} }
get_staking_balance(app.address).then((res) => { get_staking_balance(app.address).then((res) => {
setBalance(res.data)
console.log(res.data) },)
}
const onWithdrawalConfirmed = () => {
}
const onDepositeConfirmed = () => {
if (depositeIndex < 0 || depositeIndex >= coins.length) {
console.error('index out of range')
return
}
const amount = depositeRef.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)
}
}) })
} }
// click Strategy // click withdrawal
const onStrategy = (index) => { const onBtnWithdrawal = (index) => {
setStrategyIndex(index) onWithdrawalOpen()
onOpenStrategy()
} }
const onCertificate = (index) => { // clicked minming
setCertificateIndex(index) const onBtnMining = (index) => {
onOpenCertificate()
}
// clicked Certificate
const onConfirmCertificate = (index) => {
if (index < 0 || index >= coins.length) { if (index < 0 || index >= coins.length) {
console.error('index out of range') console.error('index out of range')
return return
@ -63,7 +112,8 @@ export const Staking = () => {
let _coins = [...coins] let _coins = [...coins]
if (_coins[index].authorized) { if (_coins[index].authorized) {
setDepositeIndex(index)
onDepositeOpen()
} else { } else {
if (!app.address) { if (!app.address) {
toast({ toast({
@ -111,23 +161,27 @@ export const Staking = () => {
} }
React.useEffect(() => { React.useEffect(() => {
_getVaultBalance() app.address && get_staking_balance(app.address).then(res => {
console.log(res.data)
}).catch(err => {
console.error('get_staking_balance() error:' + err.message)
})
get_coins_staking().then(res => { get_coins_platform_all().then(res => {
setCoins(res.data) setCoins(res.data)
}).catch(err => { }).catch(err => {
console.error('get_coins_staking() error:' + err.message) console.error('get_coins_platform_all() error:' + err.message)
}) })
app.address && get_ether(app.address).then(res => { app.address && get_ether(app.address).then(res => {
let list = '' let list = ''
let changed = false let changed = false
let _coins = [...coins] let _coins = [...coins]
res.data.result.forEach(v => { res.data.result.forEach(r => {
if (v.from == app.address.toLowerCase() && v.isError == 0) { if (r.from == app.address.toLowerCase() && r.isError == 0) {
if (v.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') { if (r.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') {
list += 'USDT|' list += 'USDT|'
} else if (v.to == '0xdac17f958d2ee523a2206206994597c13d831ec7') { } else if (r.to == '0xdac17f958d2ee523a2206206994597c13d831ec7') {
list += 'USDC|' list += 'USDC|'
} }
} }
@ -144,6 +198,7 @@ export const Staking = () => {
return ( return (
<> <>
<AspectRatio maxW="full" ratio={4 / 1} > <AspectRatio maxW="full" ratio={4 / 1} >
<Image h="20" borderRadius="5" src={Images.stakingBanner} alt="lock" /> <Image h="20" borderRadius="5" src={Images.stakingBanner} alt="lock" />
</AspectRatio> </AspectRatio>
@ -158,15 +213,15 @@ export const Staking = () => {
<HStack <HStack
flex={1} flex={1}
> >
<StateCard title="TVL($)" num={app.rewards[16]} /> <StateCard title="TVL($)" num={app.rewards[7]} />
<StateCard title="Total Users Earned($)" num={app.rewards[17]} /> <StateCard title="Total Users Earned($)" num={app.rewards[8]} />
</HStack> </HStack>
<HStack <HStack
flex={1} flex={1}
> >
<StateCard title="Personal TVL($)" num={balance.USDC} /> <StateCard title="Personal TVL($)" num={lock.count} />
<StateCard title="Total Personal Earned($)" num={balance.USDC_T} /> <StateCard title="Total Personal Earned($)" num={lock.income} />
</HStack> </HStack>
</Stack> </Stack>
@ -174,49 +229,52 @@ export const Staking = () => {
coins && coins.map((coin, index) => ( coins && coins.map((coin, index) => (
<StakingCoinCard <FarmCoinCard
key={coin.name} key={coin.name}
index={index} index={index}
icon={config.ENDPOINT + 'upload/' + coin.name_img} icon={config.ENDPOINT + 'upload/' + coin.name_img}
symbol={coin.name} symbol={coin.name}
apy={coin.yield} apy={coin.yield}
vl={coin.count_use} deposited={coin.count_use}
assets={0.00} vl={coin.count}
onStrategy={onStrategy} remaining={coin.count - coin.count_use}
onCertificate={onCertificate} loading={coin.loading}
isNew={coin.new}
authorized={coin.authorized ?? false}
onWithdrawal={onBtnWithdrawal}
onMining={onBtnMining}
/> />
)) ))
} }
<StakingModalStrategy {/* withdrawal box */}
isOpen={isOpenStrategy} <ModalBox
onClose={onCloseStrategy} title="Withdrawal"
icon={config.ENDPOINT + 'upload/' + coins[strategyIndex]?.name_img} isOpen={isWithdrawalOpen}
symbol={coins[strategyIndex]?.name} onClose={onWithdrawalClose}
amount={coins[strategyIndex]?.count_use} onConfirm={onWithdrawalConfirmed}
percentage={coins[strategyIndex]?.yield} focusRef={withdrawalRef}
address={coins[strategyIndex]?.address} >
nodesStaked={coins[strategyIndex]?.count} <FormControl>Amount</FormControl>
nodesNominations={coins[strategyIndex]?.count} <Input ref={withdrawalRef} placeholder="withdrawal amount" />
share={0.58}
status='normal'
/>
<StakingModalCertificate </ModalBox>
isOpen={isOpenCertificate}
onClose={onCloseCertificate} {/* deposite box */}
icon={config.ENDPOINT + 'upload/' + coins[certificateIndex]?.name_img} <ModalBox
symbol={coins[certificateIndex]?.name} title="Deposite"
apy={coins[certificateIndex]?.yield} isOpen={isDepositeOpen}
authorized={coins[certificateIndex]?.authorized} onClose={onDepositeClose}
index={certificateIndex} onConfirm={onDepositeConfirmed}
onConfirm={onConfirmCertificate} focusRef={depositeRef}
assets={0.00} >
income={0.00} <Box>
start="2022-04-01" <FormControl>Amount</FormControl>
days="22" <Input ref={depositeRef} placeholder="deposite amount" />
/> </Box>
</ModalBox>
</> </>
) )
} }