132 lines
3.6 KiB
JavaScript
132 lines
3.6 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
VStack, Image, Text, HStack,
|
|
Button, Flex, Slider,
|
|
SliderTrack, SliderFilledTrack
|
|
} from "@chakra-ui/react"
|
|
import { Images } from '../data'
|
|
|
|
const Row = ({ children }) => {
|
|
return (
|
|
<HStack
|
|
w="full"
|
|
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, loading = false, isNew = false, authorized = false, onWithdrawal = null, onMining = null }) => {
|
|
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"
|
|
onClick={() => { onWithdrawal && onWithdrawal(index) }}
|
|
>
|
|
Withdrawal
|
|
</Button>
|
|
<Button w="30" h="10" colorScheme="teal" isLoading={loading}
|
|
onClick={() => { onMining && onMining(index) }}
|
|
>
|
|
{
|
|
authorized ? 'Deposite' : 'Mining'
|
|
}
|
|
</Button>
|
|
</HStack>
|
|
|
|
</VStack>
|
|
)
|
|
} |