farm page done

src/AppContext.js

@@ -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,

src/api/api.js

@@ -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

src/components/AppBar.js

@@ -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}

src/components/FarmCoinCard.js

@@ -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"
-        </Box>
+            justify="space-between"
+            align="center"
+        >
+            {children}
+        </HStack>
+    )
+}
+
+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>
     )
 }

src/components/Layout.js

@@ -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>

src/components/MiningListCard.js

@@ -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 (

src/data.js

@@ -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',
 }

src/pages/Farm.js

@@ -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}
+                    />
+
+                ))
+            }
+        </>
     )
 }