diff --git a/src/components/AppBar.js b/src/components/AppBar.js index d7dab56..e2ef88f 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -6,7 +6,7 @@ import { } from '@chakra-ui/react' import { FiMenu, FiCircle } from 'react-icons/fi' import { Logo } from './Logo' -import { ColorModeSwitcher } from './ColorModeSwitcher' +import { ColorModeSwitcher } from './base' import { config } from '../config' import { useApp } from '../AppContext' import { AlertBox } from './alert' diff --git a/src/components/BottomNav.js b/src/components/BottomNav.js index 795d3f0..46079a4 100644 --- a/src/components/BottomNav.js +++ b/src/components/BottomNav.js @@ -1,4 +1,4 @@ -import { ChakraBottomNav, ChakraBottomNavItem } from './ChakraBottomNav' +import { ChakraBottomNav, ChakraBottomNavItem } from './base' import { useApp } from '../AppContext' export const BottomNav = (props) => { diff --git a/src/components/SideBar.js b/src/components/SideBar.js index 8e30fc4..98618d2 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -2,12 +2,11 @@ import { Box, CloseButton, Flex, Icon, useColorModeValue, Stack, } from '@chakra-ui/react' -import { FiArrowRight, FiHome, FiTrendingUp, FiLock } from 'react-icons/fi' +import { FiArrowRight } from 'react-icons/fi' import { useApp } from '../AppContext' import { Logo } from './Logo' -import { ColorModeSwitcher } from './ColorModeSwitcher' +import { ColorModeSwitcher } from './base' import { Link } from 'react-router-dom' -import { useTranslation } from 'react-i18next' import { Lang } from './Lang' import { supportedLangs } from '../i18' @@ -71,7 +70,6 @@ export const SideBar = ({ onCloseDrawer, ...rest }) => { const app = useApp() const bg = useColorModeValue('white', 'gray.900') - const { t } = useTranslation() // const colorBorderRight = useColorModeValue('gray.200', 'gray.700') return ( diff --git a/src/components/StakingCoinCard.js b/src/components/StakingCoinCard.js index beb3dee..6cde1e5 100644 --- a/src/components/StakingCoinCard.js +++ b/src/components/StakingCoinCard.js @@ -1,252 +1,10 @@ import React from "react" import { VStack, Image, Text, Stack, HStack, - Button, Tag, Box, - useColorModeValue, Badge, Divider, Icon, + Button, useColorModeValue, Badge, Divider, } 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" -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 ( - - - {/* title */} - - - {symbol} - - {symbol} - - - - - {amount} - - - - {t('staked')} - - - - - {/* tips */} - - - {t('nodeNominations')} - - - - {/* body */} - - - - - - - - - - - - - - - - - {t('duration')} - {t('hashrate')} - {t('apy')} - - - { - plans && plans.map((p, index) => ( - - {p.days} - {p.min + '~' + p.max} - - {p.interest + '%'} - - - )) - } - - - - ) -} - -export const StakingModalCertificate = ({ isOpen, onClose, onConfirm, - index, coin, assets, income }) => { - const { t } = useTranslation() - - const Row2Text = ({ row1, row2 }) => { - - return ( - - - {row1} - - - {row2} - - - ) - } - - return ( - { onConfirm(index) }} - > - - {/* title */} - - - {coin?.name} - - {coin?.name} - - - - - {t('assets') + ' ' + assets} - - - - - {/* tag */} - - - {t('current')} - - - - - - {t('apy')} - - - - { - coin?.conf.plans[0].interest + '% ~' + - coin?.conf.plans[coin?.conf.plans.length - 1].interest + '%' - } - - - - - {/* progressing */} - - - - - - - - {/* intro */} - - - - - - - - - - - {t('income')} - {income} - - - - ) -} export const StakingCoinCard = ({ symbol, icon, index, diff --git a/src/components/alert/AlertBox.js b/src/components/alert/AlertBox.js index 0631e7a..dcdadce 100644 --- a/src/components/alert/AlertBox.js +++ b/src/components/alert/AlertBox.js @@ -6,8 +6,13 @@ import { AlertDialogBody, AlertDialogFooter } 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() @@ -28,13 +33,13 @@ export const AlertBox = ({ isOpen, onClose, title, children, {children} - + { - showCancel && + showCancel && } { - showOk && } diff --git a/src/components/alert/ModalBox.js b/src/components/alert/ModalBox.js index 4761247..8171c65 100644 --- a/src/components/alert/ModalBox.js +++ b/src/components/alert/ModalBox.js @@ -1,10 +1,12 @@ import React from '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, textCancel = 'Cancel', textConfirm = 'OK', - onConfirm = null, focusRef = null }) => { + onConfirm = null, focusRef = null, +}) => { return ( { ) } -export const ChakraBottomNavItem = ({ index, icon, text, - bgNormal = null, bgHover = null, bgActive = null, navPath = "", onClick = null, ...rest }) => { +export const ChakraBottomNavItem = ({ + index, icon, text, + bgNormal = null, bgHover = null, bgActive = null, navPath = "", onClick = null, + ...rest +}) => { const ctx = React.useContext(BottomNavContext) diff --git a/src/components/ColorModeSwitcher.js b/src/components/base/ColorModeSwitcher.js similarity index 100% rename from src/components/ColorModeSwitcher.js rename to src/components/base/ColorModeSwitcher.js diff --git a/src/components/Panel.js b/src/components/base/Panel.js similarity index 100% rename from src/components/Panel.js rename to src/components/base/Panel.js diff --git a/src/components/Placeholder.js b/src/components/base/Placeholder.js similarity index 100% rename from src/components/Placeholder.js rename to src/components/base/Placeholder.js diff --git a/src/components/base/col.js b/src/components/base/col.js index 161f31b..c7a153f 100644 --- a/src/components/base/col.js +++ b/src/components/base/col.js @@ -11,6 +11,6 @@ export const UpDown = ({ children, ...rest }) => (( - + {children} )) \ No newline at end of file diff --git a/src/components/base/index.js b/src/components/base/index.js index 1d2cc98..bb68870 100644 --- a/src/components/base/index.js +++ b/src/components/base/index.js @@ -1,2 +1,6 @@ export * from './row' export * from './col' +export * from './ChakraBottomNav' +export * from './ColorModeSwitcher' +export * from './Panel' +export * from './Placeholder' diff --git a/src/components/index.js b/src/components/index.js index 6c35e0d..b7bb800 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -7,8 +7,5 @@ export * from './Partners' export * from './Auditors' export * from './FarmCoinCard' export * from './StakingCoinCard' -export * from './ColorModeSwitcher' -export * from './Placeholder' -export * from './Panel' export * from './alert' export * from './base' diff --git a/src/lang/fr.js b/src/lang/fr.js index 2719c1b..85b1d53 100644 --- a/src/lang/fr.js +++ b/src/lang/fr.js @@ -41,12 +41,12 @@ export const fr = { certificate: 'Certificate', assets: 'Assets', staked: 'Staked', - stakingNote: '', + stakingNote: "Note:The pledged amount of the node includes the pledged amount of CoinWind's entire network staking", stakingFunds: 'Staking funds', proportionOfFunds: 'Proportion of funds', stakingAddress: 'Staking Address', nodesStaked: 'Nodes Staked', - nodeNominations: '', + nodeNominations: 'Node nominations', myShare: 'My share', status: 'Status', diff --git a/src/lib/eth.js b/src/lib/eth.js index 5f44b34..8dd1c95 100644 --- a/src/lib/eth.js +++ b/src/lib/eth.js @@ -32,7 +32,7 @@ const web3Modal = new Web3Modal({ network: "mainnet", cacheProvider: true, providerOptions, - disableInjectedProvider: false, + disableInjectedProvider: true, }) export const connectWallet = async () => { diff --git a/src/pages/Farm.js b/src/pages/Farm.js index 516bed2..37c4cf1 100644 --- a/src/pages/Farm.js +++ b/src/pages/Farm.js @@ -28,13 +28,14 @@ let DEF_LOCK = { export const Farm = () => { const [lock, setLock] = React.useState(DEF_LOCK) const [coins, setCoins] = React.useState([]) - const [depositeIndex, setDepositeIndex] = React.useState(-1) + const [indexDeposite, setIndexDeposite] = React.useState(-1) + const app = useApp() const toast = useToast() const bg = useColorModeValue('white', 'gray.900') - const { isOpen: isWithdrawalOpen, onOpen: onWithdrawalOpen, onClose: onWithdrawalClose } = useDisclosure() - const { isOpen: isDepositeOpen, onOpen: onDepositeOpen, onClose: onDepositeClose } = useDisclosure() + const { isOpen: isOpenWithdrawal, onOpen: onOpenWithdrawal, onClose: onCloseWithdrawal } = useDisclosure() + const { isOpen: isOpenDeposite, onOpen: onOpenDeposite, onClose: onCloseDeposite } = useDisclosure() const withdrawalRef = React.useRef() const depositeRef = React.useRef() @@ -44,17 +45,17 @@ export const Farm = () => { } const onDepositeConfirmed = () => { - if (depositeIndex < 0 || depositeIndex >= coins.length) { + if (indexDeposite < 0 || indexDeposite >= 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) => { + transfer(ABI, coins[indexDeposite].address, app.appAddress, amount, app.address, (err, res) => { if (!err) { toast({ title: 'Succeed', - description: "You have successfully deposited " + amount + " " + coins[depositeIndex].name, + description: "You have successfully deposited " + amount + " " + coins[indexDeposite].name, status: 'success', duration: 9000, isClosable: true, @@ -80,7 +81,7 @@ export const Farm = () => { // click withdrawal const onBtnWithdrawal = (index) => { - onWithdrawalOpen() + onOpenWithdrawal() } // clicked minming @@ -93,8 +94,8 @@ export const Farm = () => { let _coins = [...coins] if (_coins[index].authorized) { - setDepositeIndex(index) - onDepositeOpen() + setIndexDeposite(index) + onOpenDeposite() } else { if (!app.address) { toast({ @@ -238,8 +239,8 @@ export const Farm = () => { {/* withdrawal box */} @@ -250,8 +251,8 @@ export const Farm = () => { {/* deposite box */} diff --git a/src/pages/Staking.js b/src/pages/Staking.js index 0a1e251..d4838b7 100644 --- a/src/pages/Staking.js +++ b/src/pages/Staking.js @@ -2,17 +2,14 @@ import React from "react" import { Stack, Image, HStack, AspectRatio, useColorModeValue, - useDisclosure, useToast, Tag, - Text, Box, + useDisclosure, useToast, } from "@chakra-ui/react" import { - StateCard, StakingCoinCard, StakingModalStrategy, - StakingModalCertificate, ModalBox, - VFStack, HFStack, HBetween, + StateCard, StakingCoinCard, } from "../components" import { - ModalDeposite + ModalDeposite, ModalRetrieve, StakingModalCertificate, StakingModalStrategy, } from '../uimsg' import { useApp } from "../AppContext" import { config } from "../config" @@ -30,66 +27,14 @@ import { import { approve, transfer } from '../lib' import { useTranslation } from "react-i18next" -// Modal box for extraction -const ModalRetrieve = ({ isOpen, onClose, onConfirm, vLeft = 0, vRight = 0 }) => { - - const TopT = ({ v }) => (( - - {v} - - )) - - const BelowT = ({ v }) => (( - - {v} - - )) - return ( - - - - Current - - - - - - - - - - - - - - ) -} export const Staking = () => { const [balance, setBalance] = React.useState({}) const [coins, setCoins] = React.useState([]) - const [strategyIndex, setStrategyIndex] = React.useState(-1) - const [certificateIndex, setCertificateIndex] = React.useState(-1) - const [depositeIndex, setDepositeIndex] = React.useState(-1) + const [indexStrategy, setIndexStrategy] = React.useState(-1) + const [indexCertificate, setIndexCertificate] = React.useState(-1) + const [indexDeposite, setIndexDeposite] = React.useState(-1) const app = useApp() const toast = useToast() @@ -111,26 +56,25 @@ export const Staking = () => { get_staking_balance(app.address).then((res) => { setBalance(res.data) - console.log('balances:', res.data) }) } // click Strategy const onStrategy = (index) => { - setStrategyIndex(index) + setIndexStrategy(index) onOpenStrategy() } // click certificate / deposite button const onCertificate = (index) => { - setCertificateIndex(index) + setIndexCertificate(index) if (index < 0 || index >= coins.length) { console.warning('index out of range') return } if (coins[index].authorized) { - setDepositeIndex(prev => index) + setIndexDeposite(prev => index) onOpenDeposite() } else { onOpenCertificate() @@ -139,18 +83,18 @@ export const Staking = () => { // ModalDeposite callback const onConfirmDeposite = () => { - if (depositeIndex < 0 || depositeIndex >= coins.length) { - console.error(depositeIndex, ' out of range') + if (indexDeposite < 0 || indexDeposite >= coins.length) { + console.error(indexDeposite, ' out of range') return } 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) { toast({ title: 'Succeed', - description: "You have successfully deposited " + amount + " " + coins[depositeIndex].name, + description: "You have successfully deposited " + amount + " " + coins[indexDeposite].name, status: 'success', duration: 9000, isClosable: true, @@ -286,7 +230,6 @@ export const Staking = () => { let changed = false let _coins = [...coins] - console.log(res.data) res.data.result.forEach(v => { if (v.from == app.address.toLowerCase() && v.isError == 0) { if (v.to == '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48') { @@ -367,14 +310,14 @@ export const Staking = () => { @@ -384,8 +327,8 @@ export const Staking = () => { isOpen={isOpenCertificate} onClose={onCloseCertificate} onConfirm={onConfirmCertificate} - index={certificateIndex} - coin={coins[certificateIndex]} + index={indexCertificate} + coin={coins[indexCertificate]} assets={0.00} income={0.00} /> diff --git a/src/uimsg/ModalRetrieve.js b/src/uimsg/ModalRetrieve.js new file mode 100644 index 0000000..49ed309 --- /dev/null +++ b/src/uimsg/ModalRetrieve.js @@ -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 }) => (( + + {v} + + )) + + const BelowT = ({ v }) => (( + + {v} + + )) + + return ( + + + + Current + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/uimsg/StakingModals.js b/src/uimsg/StakingModals.js new file mode 100644 index 0000000..7425132 --- /dev/null +++ b/src/uimsg/StakingModals.js @@ -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 ( + + + {/* title */} + + + {symbol} + + {symbol} + + + + + {amount} + + + + {t('staked')} + + + + + {/* tips */} + + + {t('nodeNominations')} + + + + {/* body */} + + + + + + + + + + + + + + + + + {t('duration')} + {t('hashrate')} + {t('apy')} + + + { + plans && plans.map((p, index) => ( + + {p.days} + {p.min + '~' + p.max} + + {p.interest + '%'} + + + )) + } + + + + ) +} + +export const StakingModalCertificate = ({ + isOpen, onClose, onConfirm, + index, coin, assets, income, +}) => { + const { t } = useTranslation() + + const Row2Text = ({ row1, row2 }) => { + + return ( + + + {row1} + + + {row2} + + + ) + } + + return ( + { onConfirm(index) }} + > + + {/* title */} + + + {coin?.name} + + {coin?.name} + + + + + {t('assets') + ' ' + assets} + + + + + {/* tag */} + + + {t('current')} + + + + + + {t('apy')} + + + + { + coin?.conf.plans[0].interest + '% ~' + + coin?.conf.plans[coin?.conf.plans.length - 1].interest + '%' + } + + + + + {/* progressing */} + + + + + + + + {/* intro */} + + + + + + + + + + + {t('income')} + {income} + + + + ) +} \ No newline at end of file diff --git a/src/uimsg/index.js b/src/uimsg/index.js index 683815d..8a83cd1 100644 --- a/src/uimsg/index.js +++ b/src/uimsg/index.js @@ -1,2 +1,4 @@ export * from './ModalDeposite' +export * from './ModalRetrieve' +export * from './StakingModals' export * from './toasts'