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

code refactor

This commit is contained in:
john 2022-05-14 18:14:42 +07:00
parent 83f47eba89
commit 1c7443217b
20 changed files with 378 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AppBar.js
View File

@ -6,7 +6,7 @@ import {
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { FiMenu, FiCircle } from 'react-icons/fi' import { FiMenu, FiCircle } from 'react-icons/fi'
import { Logo } from './Logo' import { Logo } from './Logo'
import { ColorModeSwitcher } from './ColorModeSwitcher' import { ColorModeSwitcher } from './base'
import { config } from '../config' import { config } from '../config'
import { useApp } from '../AppContext' import { useApp } from '../AppContext'
import { AlertBox } from './alert' import { AlertBox } from './alert'

2
src/components/BottomNav.js
View File

@ -1,4 +1,4 @@
import { ChakraBottomNav, ChakraBottomNavItem } from './ChakraBottomNav' import { ChakraBottomNav, ChakraBottomNavItem } from './base'
import { useApp } from '../AppContext' import { useApp } from '../AppContext'
export const BottomNav = (props) => { export const BottomNav = (props) => {

6
src/components/SideBar.js
View File

@ -2,12 +2,11 @@ import {
Box, CloseButton, Flex, Icon, useColorModeValue, Box, CloseButton, Flex, Icon, useColorModeValue,
Stack, Stack,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { FiArrowRight, FiHome, FiTrendingUp, FiLock } from 'react-icons/fi' import { FiArrowRight } from 'react-icons/fi'
import { useApp } from '../AppContext' import { useApp } from '../AppContext'
import { Logo } from './Logo' import { Logo } from './Logo'
import { ColorModeSwitcher } from './ColorModeSwitcher' import { ColorModeSwitcher } from './base'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { Lang } from './Lang' import { Lang } from './Lang'
import { supportedLangs } from '../i18' import { supportedLangs } from '../i18'
@ -71,7 +70,6 @@ export const SideBar = ({ onCloseDrawer, ...rest }) => {
const app = useApp() const app = useApp()
const bg = useColorModeValue('white', 'gray.900') const bg = useColorModeValue('white', 'gray.900')
const { t } = useTranslation()
// const colorBorderRight = useColorModeValue('gray.200', 'gray.700') // const colorBorderRight = useColorModeValue('gray.200', 'gray.700')
return ( return (

244
src/components/StakingCoinCard.js
View File

@ -1,252 +1,10 @@
import React from "react" import React from "react"
import { import {
VStack, Image, Text, Stack, HStack, VStack, Image, Text, Stack, HStack,
Button, Tag, Box, Button, useColorModeValue, Badge, Divider,
useColorModeValue, Badge, Divider, Icon,
} from "@chakra-ui/react" } from "@chakra-ui/react"
import { StateCard } from './NumCard' import { StateCard } from './NumCard'
import { useTranslation } from 'react-i18next' 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"
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()
return (
<ModalBox
title={t('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"
>
{t('staked')}
</Text>
</VStack>
</HStack>
{/* tips */}
<HStack>
<Text
color="yellow.400"
fontSize="14"
>
{t('nodeNominations')}
</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>
</ModalBox>
)
}
export const StakingModalCertificate = ({ isOpen, onClose, onConfirm,
index, coin, assets, income }) => {
const { t } = useTranslation()
const Row2Text = ({ row1, row2 }) => {
return (
<VStack
fontSize="14"
fontWeight="700"
align="start"
>
<Text>
{row1}
</Text>
<Text>
{row2}
</Text>
</VStack>
)
}
return (
<ModalBox
title={t('certificate')}
isOpen={isOpen}
onClose={onClose}
showCancel={false}
textConfirm={t('certificate')}
onConfirm={() => { onConfirm(index) }}
>
<VStack>
{/* title */}
<HStack
w="full"
align="center"
justify="space-between"
>
<HStack>
<Image w="10" h="10"
borderRadius="50%"
src={config.ENDPOINT + 'upload/' + coin?.name_img}
alt={coin?.name} />
<Text fontSize="22" fontWeight="900">
{coin?.name}
</Text>
</HStack>
<VStack>
<Text
fontSize="16"
fontWeight="700"
color="gray.400"
>
{t('assets') + ' ' + assets}
</Text>
</VStack>
</HStack>
{/* tag */}
<HFStack py="4">
<Tag colorScheme="orange" variant="solid" size="lg">
{t('current')}
</Tag>
</HFStack>
<HBetween>
<Text
color="gray.400"
>
{t('apy')}
</Text>
<Text
color="green.500"
fontSize="20"
fontWeight="700"
>
{
coin?.conf.plans[0].interest + '% ~' +
coin?.conf.plans[coin?.conf.plans.length - 1].interest + '%'
}
</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="2022-04-02"
row2={t('deposite')}
/>
<Row2Text
row1={t('atAnyTime')}
row2={t('unlock')}
/>
<Row2Text
row1={coin?.conf.plans[0].days + t('daysAfter')}
row2={t('claim')}
/>
</HBetween>
</VFStack>
<HBetween pt="4">
<Text color="gray.400">{t('income')}</Text>
<Text fontWeight="700">{income}</Text>
</HBetween>
</VStack>
</ModalBox>
)
}
export const StakingCoinCard = ({ export const StakingCoinCard = ({
symbol, icon, index, symbol, icon, index,

17
src/components/alert/AlertBox.js
View File

@ -6,8 +6,13 @@ import {
AlertDialogBody, AlertDialogFooter AlertDialogBody, AlertDialogFooter
} from '@chakra-ui/react' } from '@chakra-ui/react'
export const AlertBox = ({ isOpen, onClose, title, children,
showCancel = false, cancelText = 'Cancel', showOk = true, okText = 'OK' }) => { export const AlertBox = ({
isOpen, onClose, title, children,
showFooter = true,
showCancel = false, textCancel = 'Cancel',
showConfirm = true, textConfirm = 'OK'
}) => {
const cancelRef = React.useRef() const cancelRef = React.useRef()
@ -28,13 +33,13 @@ export const AlertBox = ({ isOpen, onClose, title, children,
{children} {children}
</AlertDialogBody> </AlertDialogBody>
<AlertDialogFooter> <AlertDialogFooter display={showFooter ? 'flex' : 'none'}>
{ {
showCancel && <Button ref={cancelRef} onClick={onClose}>{cancelText}</Button> showCancel && <Button ref={cancelRef} onClick={onClose}>{textCancel}</Button>
} }
{ {
showOk && <Button colorScheme='blue' onClick={onClose} ml={3}> showConfirm && <Button colorScheme='blue' onClick={onClose} ml={3}>
{okText} {textConfirm}
</Button> </Button>
} }

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

@ -1,10 +1,12 @@
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,
showFooter = true, showCancel = true, showConfirm = true, showFooter = true, showCancel = true, showConfirm = true,
textCancel = 'Cancel', textConfirm = 'OK', textCancel = 'Cancel', textConfirm = 'OK',
onConfirm = null, focusRef = null }) => { onConfirm = null, focusRef = null,
}) => {
return ( return (
<Modal <Modal

8
src/components/ChakraBottomNav.js → src/components/base/ChakraBottomNav.js
View File

@ -1,7 +1,6 @@
import React from "react" import React from "react"
import { Text, Icon, Stack, useColorModeValue } from "@chakra-ui/react" import { Text, Icon, Stack, useColorModeValue } from "@chakra-ui/react"
import { Placeholder } from "./Placeholder" import { Placeholder } from "./Placeholder"
import { PropTypes } from 'prop-types'
import { useNavigate } from "react-router-dom" import { useNavigate } from "react-router-dom"
const BottomNavContext = React.createContext([]) const BottomNavContext = React.createContext([])
@ -19,8 +18,11 @@ const BottomNavProvider = ({ children }) => {
) )
} }
export const ChakraBottomNavItem = ({ index, icon, text, export const ChakraBottomNavItem = ({
bgNormal = null, bgHover = null, bgActive = null, navPath = "", onClick = null, ...rest }) => { index, icon, text,
bgNormal = null, bgHover = null, bgActive = null, navPath = "", onClick = null,
...rest
}) => {
const ctx = React.useContext(BottomNavContext) const ctx = React.useContext(BottomNavContext)

0
src/components/ColorModeSwitcher.js → src/components/base/ColorModeSwitcher.js
View File

0
src/components/Panel.js → src/components/base/Panel.js
View File

0
src/components/Placeholder.js → src/components/base/Placeholder.js
View File

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

@ -11,6 +11,6 @@ export const UpDown = ({ children, ...rest }) => ((
<VFStack <VFStack
{...rest} {...rest}
> >
{children}
</VFStack> </VFStack>
)) ))

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

@ -1,2 +1,6 @@
export * from './row' export * from './row'
export * from './col' export * from './col'
export * from './ChakraBottomNav'
export * from './ColorModeSwitcher'
export * from './Panel'
export * from './Placeholder'

3
src/components/index.js
View File

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

4
src/lang/fr.js
View File

@ -41,12 +41,12 @@ export const fr = {
certificate: 'Certificate', certificate: 'Certificate',
assets: 'Assets', assets: 'Assets',
staked: 'Staked', staked: 'Staked',
stakingNote: '', stakingNote: "Note:The pledged amount of the node includes the pledged amount of CoinWind's entire network staking",
stakingFunds: 'Staking funds', stakingFunds: 'Staking funds',
proportionOfFunds: 'Proportion of funds', proportionOfFunds: 'Proportion of funds',
stakingAddress: 'Staking Address', stakingAddress: 'Staking Address',
nodesStaked: 'Nodes Staked', nodesStaked: 'Nodes Staked',
nodeNominations: '', nodeNominations: 'Node nominations',
myShare: 'My share', myShare: 'My share',
status: 'Status', status: 'Status',

2
src/lib/eth.js
View File

@ -32,7 +32,7 @@ const web3Modal = new Web3Modal({
network: "mainnet", network: "mainnet",
cacheProvider: true, cacheProvider: true,
providerOptions, providerOptions,
disableInjectedProvider: false, disableInjectedProvider: true,
}) })
export const connectWallet = async () => { export const connectWallet = async () => {

27
src/pages/Farm.js
View File

@ -28,13 +28,14 @@ let DEF_LOCK = {
export const Farm = () => { export const Farm = () => {
const [lock, setLock] = React.useState(DEF_LOCK) const [lock, setLock] = React.useState(DEF_LOCK)
const [coins, setCoins] = React.useState([]) const [coins, setCoins] = React.useState([])
const [depositeIndex, setDepositeIndex] = React.useState(-1) const [indexDeposite, setIndexDeposite] = 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: isWithdrawalOpen, onOpen: onWithdrawalOpen, onClose: onWithdrawalClose } = useDisclosure() const { isOpen: isOpenWithdrawal, onOpen: onOpenWithdrawal, onClose: onCloseWithdrawal } = useDisclosure()
const { isOpen: isDepositeOpen, onOpen: onDepositeOpen, onClose: onDepositeClose } = useDisclosure() const { isOpen: isOpenDeposite, onOpen: onOpenDeposite, onClose: onCloseDeposite } = useDisclosure()
const withdrawalRef = React.useRef() const withdrawalRef = React.useRef()
const depositeRef = React.useRef() const depositeRef = React.useRef()
@ -44,17 +45,17 @@ export const Farm = () => {
} }
const onDepositeConfirmed = () => { const onDepositeConfirmed = () => {
if (depositeIndex < 0 || depositeIndex >= coins.length) { if (indexDeposite < 0 || indexDeposite >= coins.length) {
console.error('index out of range') console.error('index out of range')
return return
} }
const amount = depositeRef.current.value const amount = depositeRef.current.value
transfer(ABI, coins[depositeIndex].address, app.appAddress, amount, app.address, (err, res) => { transfer(ABI, coins[indexDeposite].address, app.appAddress, amount, app.address, (err, res) => {
if (!err) { if (!err) {
toast({ toast({
title: 'Succeed', title: 'Succeed',
description: "You have successfully deposited " + amount + " " + coins[depositeIndex].name, description: "You have successfully deposited " + amount + " " + coins[indexDeposite].name,
status: 'success', status: 'success',
duration: 9000, duration: 9000,
isClosable: true, isClosable: true,
@ -80,7 +81,7 @@ export const Farm = () => {
// click withdrawal // click withdrawal
const onBtnWithdrawal = (index) => { const onBtnWithdrawal = (index) => {
onWithdrawalOpen() onOpenWithdrawal()
} }
// clicked minming // clicked minming
@ -93,8 +94,8 @@ export const Farm = () => {
let _coins = [...coins] let _coins = [...coins]
if (_coins[index].authorized) { if (_coins[index].authorized) {
setDepositeIndex(index) setIndexDeposite(index)
onDepositeOpen() onOpenDeposite()
} else { } else {
if (!app.address) { if (!app.address) {
toast({ toast({
@ -238,8 +239,8 @@ export const Farm = () => {
{/* withdrawal box */} {/* withdrawal box */}
<ModalBox <ModalBox
title="Withdrawal" title="Withdrawal"
isOpen={isWithdrawalOpen} isOpen={isOpenWithdrawal}
onClose={onWithdrawalClose} onClose={onCloseWithdrawal}
onConfirm={onWithdrawalConfirmed} onConfirm={onWithdrawalConfirmed}
focusRef={withdrawalRef} focusRef={withdrawalRef}
> >
@ -250,8 +251,8 @@ export const Farm = () => {
{/* deposite box */} {/* deposite box */}
<ModalDeposite <ModalDeposite
isOpen={isDepositeOpen} isOpen={isOpenDeposite}
onClose={onDepositeClose} onClose={onCloseDeposite}
onConfirm={onDepositeConfirmed} onConfirm={onDepositeConfirmed}
ref={depositeRef} ref={depositeRef}
/> />

103
src/pages/Staking.js
View File

@ -2,17 +2,14 @@ import React from "react"
import { import {
Stack, Image, HStack, Stack, Image, HStack,
AspectRatio, useColorModeValue, AspectRatio, useColorModeValue,
useDisclosure, useToast, Tag, useDisclosure, useToast,
Text, Box,
} from "@chakra-ui/react" } from "@chakra-ui/react"
import { import {
StateCard, StakingCoinCard, StakingModalStrategy, StateCard, StakingCoinCard,
StakingModalCertificate, ModalBox,
VFStack, HFStack, HBetween,
} from "../components" } from "../components"
import { import {
ModalDeposite ModalDeposite, ModalRetrieve, StakingModalCertificate, StakingModalStrategy,
} from '../uimsg' } from '../uimsg'
import { useApp } from "../AppContext" import { useApp } from "../AppContext"
import { config } from "../config" import { config } from "../config"
@ -30,66 +27,14 @@ import {
import { approve, transfer } from '../lib' import { approve, transfer } from '../lib'
import { useTranslation } from "react-i18next" 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>
)
}
export const Staking = () => { export const Staking = () => {
const [balance, setBalance] = React.useState({}) const [balance, setBalance] = React.useState({})
const [coins, setCoins] = React.useState([]) const [coins, setCoins] = React.useState([])
const [strategyIndex, setStrategyIndex] = React.useState(-1) const [indexStrategy, setIndexStrategy] = React.useState(-1)
const [certificateIndex, setCertificateIndex] = React.useState(-1) const [indexCertificate, setIndexCertificate] = React.useState(-1)
const [depositeIndex, setDepositeIndex] = React.useState(-1) const [indexDeposite, setIndexDeposite] = React.useState(-1)
const app = useApp() const app = useApp()
const toast = useToast() const toast = useToast()
@ -111,26 +56,25 @@ export const Staking = () => {
get_staking_balance(app.address).then((res) => { get_staking_balance(app.address).then((res) => {
setBalance(res.data) setBalance(res.data)
console.log('balances:', res.data)
}) })
} }
// click Strategy // click Strategy
const onStrategy = (index) => { const onStrategy = (index) => {
setStrategyIndex(index) setIndexStrategy(index)
onOpenStrategy() onOpenStrategy()
} }
// click certificate / deposite button // click certificate / deposite button
const onCertificate = (index) => { const onCertificate = (index) => {
setCertificateIndex(index) setIndexCertificate(index)
if (index < 0 || index >= coins.length) { if (index < 0 || index >= coins.length) {
console.warning('index out of range') console.warning('index out of range')
return return
} }
if (coins[index].authorized) { if (coins[index].authorized) {
setDepositeIndex(prev => index) setIndexDeposite(prev => index)
onOpenDeposite() onOpenDeposite()
} else { } else {
onOpenCertificate() onOpenCertificate()
@ -139,18 +83,18 @@ export const Staking = () => {
// ModalDeposite callback // ModalDeposite callback
const onConfirmDeposite = () => { const onConfirmDeposite = () => {
if (depositeIndex < 0 || depositeIndex >= coins.length) { if (indexDeposite < 0 || indexDeposite >= coins.length) {
console.error(depositeIndex, ' out of range') console.error(indexDeposite, ' out of range')
return return
} }
const amount = refDepositeFocus.current.value const amount = refDepositeFocus.current.value
transfer(ABI, coins[depositeIndex].address, app.appAddress, amount, app.address, (err, res) => { transfer(ABI, coins[indexDeposite].address, app.appAddress, amount, app.address, (err, res) => {
if (!err) { if (!err) {
toast({ toast({
title: 'Succeed', title: 'Succeed',
description: "You have successfully deposited " + amount + " " + coins[depositeIndex].name, description: "You have successfully deposited " + amount + " " + coins[indexDeposite].name,
status: 'success', status: 'success',
duration: 9000, duration: 9000,
isClosable: true, isClosable: true,
@ -286,7 +230,6 @@ export const Staking = () => {
let changed = false let changed = false
let _coins = [...coins] let _coins = [...coins]
console.log(res.data)
res.data.result.forEach(v => { res.data.result.forEach(v => {
if (v.from == app.address.toLowerCase() && v.isError == 0) { if (v.from == app.address.toLowerCase() && v.isError == 0) {
if (v.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') { if (v.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') {
@ -367,14 +310,14 @@ export const Staking = () => {
<StakingModalStrategy <StakingModalStrategy
isOpen={isOpenStrategy} isOpen={isOpenStrategy}
onClose={onCloseStrategy} onClose={onCloseStrategy}
icon={config.ENDPOINT + 'upload/' + coins[strategyIndex]?.name_img} icon={config.ENDPOINT + 'upload/' + coins[indexStrategy]?.name_img}
symbol={coins[strategyIndex]?.name} symbol={coins[indexStrategy]?.name}
amount={coins[strategyIndex]?.count_use} amount={coins[indexStrategy]?.count_use}
percentage={coins[strategyIndex]?.yield} percentage={coins[indexStrategy]?.yield}
address={coins[strategyIndex]?.address} address={coins[indexStrategy]?.address}
nodesStaked={coins[strategyIndex]?.count} nodesStaked={coins[indexStrategy]?.count}
nodesNominations={coins[strategyIndex]?.count} nodesNominations={coins[indexStrategy]?.count}
plans={coins[strategyIndex]?.conf.plans} plans={coins[indexStrategy]?.conf.plans}
share={0.58} share={0.58}
status='normal' status='normal'
/> />
@ -384,8 +327,8 @@ export const Staking = () => {
isOpen={isOpenCertificate} isOpen={isOpenCertificate}
onClose={onCloseCertificate} onClose={onCloseCertificate}
onConfirm={onConfirmCertificate} onConfirm={onConfirmCertificate}
index={certificateIndex} index={indexCertificate}
coin={coins[certificateIndex]} coin={coins[indexCertificate]}
assets={0.00} assets={0.00}
income={0.00} income={0.00}
/> />

59
src/uimsg/ModalRetrieve.js Normal file
View File

@ -0,0 +1,59 @@
import {
Tag, Text,
} from "@chakra-ui/react"
import { ModalBox, HFStack, VFStack, HBetween } from "../components"
// Modal box for extraction
export 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>
)
}

247
src/uimsg/StakingModals.js Normal file
View File

@ -0,0 +1,247 @@
import React from "react"
import {
VStack, Image, Text, HStack,
Tag, Box, Divider, Icon,
} from "@chakra-ui/react"
import { useTranslation } from 'react-i18next'
import { FiLock, FiUnlock } from "react-icons/fi"
import { ModalBox, HBetween, HFStack, VFStack, CardRow } from "../components"
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()
return (
<ModalBox
title={t('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"
>
{t('staked')}
</Text>
</VStack>
</HStack>
{/* tips */}
<HStack>
<Text
color="yellow.400"
fontSize="14"
>
{t('nodeNominations')}
</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>
</ModalBox>
)
}
export const StakingModalCertificate = ({
isOpen, onClose, onConfirm,
index, coin, assets, income,
}) => {
const { t } = useTranslation()
const Row2Text = ({ row1, row2 }) => {
return (
<VStack
fontSize="14"
fontWeight="700"
align="start"
>
<Text>
{row1}
</Text>
<Text>
{row2}
</Text>
</VStack>
)
}
return (
<ModalBox
title={t('certificate')}
isOpen={isOpen}
onClose={onClose}
showCancel={false}
textConfirm={t('certificate')}
onConfirm={() => { onConfirm(index) }}
>
<VStack>
{/* title */}
<HStack
w="full"
align="center"
justify="space-between"
>
<HStack>
<Image w="10" h="10"
borderRadius="50%"
src={config.ENDPOINT + 'upload/' + coin?.name_img}
alt={coin?.name} />
<Text fontSize="22" fontWeight="900">
{coin?.name}
</Text>
</HStack>
<VStack>
<Text
fontSize="16"
fontWeight="700"
color="gray.400"
>
{t('assets') + ' ' + assets}
</Text>
</VStack>
</HStack>
{/* tag */}
<HFStack py="4">
<Tag colorScheme="orange" variant="solid" size="lg">
{t('current')}
</Tag>
</HFStack>
<HBetween>
<Text
color="gray.400"
>
{t('apy')}
</Text>
<Text
color="green.500"
fontSize="20"
fontWeight="700"
>
{
coin?.conf.plans[0].interest + '% ~' +
coin?.conf.plans[coin?.conf.plans.length - 1].interest + '%'
}
</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="2022-04-02"
row2={t('deposite')}
/>
<Row2Text
row1={t('atAnyTime')}
row2={t('unlock')}
/>
<Row2Text
row1={coin?.conf.plans[0].days + t('daysAfter')}
row2={t('claim')}
/>
</HBetween>
</VFStack>
<HBetween pt="4">
<Text color="gray.400">{t('income')}</Text>
<Text fontWeight="700">{income}</Text>
</HBetween>
</VStack>
</ModalBox>
)
}

2
src/uimsg/index.js
View File

@ -1,2 +1,4 @@
export * from './ModalDeposite' export * from './ModalDeposite'
export * from './ModalRetrieve'
export * from './StakingModals'
export * from './toasts' export * from './toasts'