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

farm page done

This commit is contained in:
mx 2022-05-09 14:24:17 +07:00
parent de2a297399
commit 34dd75e98c
8 changed files with 225 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/AppContext.js
View File

@ -1,7 +1,5 @@
import { useSafeLayoutEffect } from "@chakra-ui/react"
import axios from "axios"
import { config } from "./config"
import React from "react"
import { config } from "./config"
import { get_settings } from './api'
import { ImTwitter, ImTelegram, ImFacebook } from "react-icons/im";
@ -23,6 +21,7 @@ export const AppContextProvider = ({ children }) => {
const [title, setTitle] = React.useState('')
const [logo, setLogo] = React.useState('')
const [banners, setBanners] = React.useState([])
const [lockImg, setLockImg] = React.useState('')
const [socials, setSocials] = React.useState(SOCIALS)
@ -49,6 +48,8 @@ export const AppContextProvider = ({ children }) => {
setBanners(banr)
setLogo(config.ENDPOINT + 'upload/' + o.logo_url)
setLockImg(config.ENDPOINT + 'upload/' + o.lock_url)
setBannerLink(s.pic_url)
SOCIALS[0].path = s.telegram
@ -71,6 +72,7 @@ export const AppContextProvider = ({ children }) => {
address,
setAddress,
logo,
lockImg,
title,
banners,
bannerLink,

17
src/api/api.js
View File

@ -1,10 +1,14 @@
import axios from 'axios'
import { config } from '../config'
const get = (path, onSuccess, onFailed) => {
const get = (path) => {
return axios.get(config.ENDPOINT + path)
}
const getWith = (path, data) => {
return axios.get(config.ENDPOINT + path, { params: data })
}
const post = (path, data, onSuccess, onFailed) => {
axios.post(config.ENDPOINT + path, data).then(res => {
onSuccess && onSuccess(res.data)
@ -21,4 +25,15 @@ export const get_coins_platform = () => {
return get('v1/coins/platform')
}
export const get_coins_platform_all = () => {
return get('/v1/coins/platform/all')
}
export const get_lockup = (address) => {
return getWith('/lockup', {
address: address,
type: 1,
})
}
// export const

7
src/components/AppBar.js
View File

@ -6,8 +6,10 @@ import { FiBell, FiArrowRight, FiChevronDown, FiCompass, FiHome, FiMenu, FiSetti
import { ImTwitter, ImTelegram, ImFacebook } from "react-icons/im";
import { Logo } from './Logo'
import { Link } from 'react-router-dom';
import { useApp } from '../AppContext';
export const AppBar = ({ onOpen, ...rest }) => {
const app = useApp()
const bg = useColorModeValue('white', 'gray.900')
const borderBottomColor = useColorModeValue('gray.200', 'gray.700')
@ -32,8 +34,11 @@ export const AppBar = ({ onOpen, ...rest }) => {
<Button size="md"
border="2px"
borderColor='green.500'>
Connect Wallet
{
app.address ? 'Connected' : 'Connect Wallet'
}
</Button>
<IconButton
display={{ base: 'flex', md: 'none' }}
onClick={onOpen}

115
src/components/FarmCoinCard.js
View File

@ -1,10 +1,117 @@
import React from 'react'
import { Box, Image, Text, Stack, HStack, VStack, Flex } from '@chakra-ui/react'
import { Box, VStack, Image, Text, HStack, Button, Stack, Flex, AspectRatio, Center, Slider, ButtonGroup, SliderTrack, SliderFilledTrack } from "@chakra-ui/react"
import { Images } from '../data'
export const FarmCoinCard = () => {
const Row = ({ children }) => {
return (
<Box>
<HStack
w="full"
justify="space-between"
align="center"
>
{children}
</HStack>
)
}
</Box>
const CardRow = ({ title, value, compond = false }) => {
return (
<Row>
<Flex>
<Text
fontSize="14"
color="gray.600"
>
{title}
</Text>
{
compond && <Text
fontSize="14"
color="blue.400"
>(Compound Interest)</Text>
}
</Flex>
{
compond
? <Text fontWeight="900" fontSize="16" color="green.500">{value}</Text>
: <Text fontWeight="700" fontSize="12" color="gray.500">{value}</Text>
}
</Row>
)
}
export const FarmCoinCard = ({ index, icon, symbol, apy, deposited, vl, remaining, isNew = false }) => {
return (
<VStack
position="relative"
w="full"
py="4"
px="8"
my="4"
bg="white"
borderWidth="1px"
borderRadius="16"
align="center"
flex={1}
>
<HStack
w="full"
justify="space-between"
align="center"
py="4"
>
<HStack>
<Image
w="8" h="8"
borderRadius="50%"
src={icon} alt={symbol} />
<Text
fontWeight="700"
>{symbol}</Text>
</HStack>
<Text
color="gray.400"
fontSize="10"
>Harvest {symbol}</Text>
{
isNew && <Image
position="absolute"
top="0"
right="0"
src={Images.new}
alt="new" />
}
</HStack>
<CardRow title="APY" value={apy} compond="true" />
<CardRow title="Deposited" value={deposited} />
<CardRow title="VL" value={vl} />
<CardRow title="Remaining" value={remaining} />
<HStack
w="full"
>
<Slider aria-label='slider-ex-4' defaultValue={deposited} min={0} max={vl}>
<SliderTrack bg='red.100'>
<SliderFilledTrack bg='tomato' />
</SliderTrack>
</Slider>
</HStack>
<HStack
w="full"
align="center"
justify="space-around"
>
<Button w="30" h="10">Withdrawal</Button>
<Button w="30" h="10" colorScheme="teal" >Mining</Button>
</HStack>
</VStack>
)
}

7
src/components/Layout.js
View File

@ -39,7 +39,12 @@ export const Layout = ({ children }) => {
<AppBar onOpen={onOpen} />
<Box ml={{ base: 0, md: 60 }} p="4" overflowY="auto">
<Box
ml={{ base: 0, md: 60 }}
py="4"
px={{ base: 2, md: 8 }}
overflowY="auto"
>
{children}
</Box>
</Box>

6
src/components/MiningListCard.js
View File

@ -2,13 +2,13 @@ import React from 'react'
import { HStack, Stack, Flex, Box, Slider, Image, Text, Button, VStack, Icon, AspectRatio, useCallbackRef } from '@chakra-ui/react'
import { ImArrowRight2 } from 'react-icons/im'
import { config } from '../config'
import { Link } from 'react-router-dom'
import { Link, useNavigate } from 'react-router-dom'
const FarmListItem = ({ id, img, symbol, percentage, ...rest }) => {
const navigateTo = useNavigate()
const onBtnMining = () => {
console.log('press ' + id)
navigateTo('/farm')
}
return (

3
src/data.js
View File

@ -20,5 +20,6 @@ export const Images = {
config.ENDPOINT + '/static/media/aolink.55778d9b.svg',
config.ENDPOINT + '/static/media/codebank.db7917c8.svg',
],
more: config.ENDPOINT + '/static/media/icon-more.c502d302.svg'
more: config.ENDPOINT + '/static/media/icon-more.c502d302.svg',
new: config.ENDPOINT + '/static/media/jiaobiao-eth.4b55fb16.svg',
}

82
src/pages/Farm.js
View File

@ -1,13 +1,83 @@
import { Box } from "@chakra-ui/react";
import React from "react";
import React from "react"
import { Box, VStack, Stack, Image, Text, HStack, Flex, AspectRatio, Center, Slider, ButtonGroup, SliderTrack, SliderFilledTrack } from "@chakra-ui/react"
import { StateCard, MiningListCard, FarmCoinCard } from "../components"
import { useApp } from "../AppContext"
import { config } from "../config"
import { get_lockup, get_coins_platform_all } from "../api"
let DEF_LOCK = {
count: 0,
income: 0,
}
export const Farm = () => {
const [lock, setLock] = React.useState(DEF_LOCK)
const [coins, setCoins] = React.useState([])
const app = useApp()
React.useEffect(() => {
get_lockup(app.address).then(res => {
DEF_LOCK.count = res.data?.count ?? 0
DEF_LOCK.income = res.data?.income ?? 0
setLock(DEF_LOCK)
}).catch(err => {
console.error('get_lockup() error:' + err.message)
})
get_coins_platform_all().then(res => {
setCoins(res.data)
}).catch(err => {
console.error('get_coins_platform_all() error:' + err.message)
})
}, [app.address])
return (
<Box>
{/* pool list */}
</Box>
<>
<AspectRatio maxW="full" ratio={4 / 1} >
<Image h="20" borderRadius="5" src={app.lockImg} alt="lock" />
</AspectRatio>
<Stack
my="4"
bg="white"
w="full"
borderRadius="lg"
direction={{ base: 'column', md: 'row' }}
>
<HStack
flex={1}
>
<StateCard title="TVL($)" num={app.rewards[7]} />
<StateCard title="Total Users Earned($)" num={app.rewards[8]} />
</HStack>
<HStack
flex={1}
>
<StateCard title="Personal TVL($)" num={lock.count} />
<StateCard title="Total Personal Earned($)" num={lock.income} />
</HStack>
</Stack>
{
coins && coins.map((coin, index) => (
<FarmCoinCard
key={coin.name}
index={index}
icon={config.ENDPOINT + 'upload/' + coin.name_img}
symbol={coin.name}
apy={coin.yield}
deposited={coin.count_use}
vl={coin.count}
remaining={coin.count - coin.count_use}
isNew={coin.new}
/>
))
}
</>
)
}