This commit is contained in:
john 2022-05-14 15:21:22 +07:00
commit c37abdec94
6 changed files with 192 additions and 56 deletions

View File

@ -43,9 +43,9 @@ export const AppContextProvider = ({ children }) => {
]
const docItems = [
{ name: t('announcement'), icon: '', path: '', enabled: true },
{ name: t('faq'), icon: '', path: '', enabled: true },
{ name: t('tutorial'), icon: '', path: '', enabled: true },
{ name: t('announcement'), icon: '', path: '/ann', enabled: true },
{ name: t('faq'), icon: '', path: '/faq', enabled: true },
{ name: t('tutorial'), icon: '', path: '/tut', enabled: true },
]
React.useEffect(() => {

View File

@ -18,6 +18,7 @@ import {
} from "../api"
import { approve, transfer } from '../lib'
import { ModalBox } from '../components'
import { ModalDeposite } from '../uimsg'
let DEF_LOCK = {
count: 0,
@ -248,19 +249,12 @@ export const Farm = () => {
</ModalBox>
{/* deposite box */}
<ModalBox
title="Deposite"
<ModalDeposite
isOpen={isDepositeOpen}
onClose={onDepositeClose}
onConfirm={onDepositeConfirmed}
focusRef={depositeRef}
>
<Box>
<FormControl>Amount</FormControl>
<Input ref={depositeRef} placeholder="deposite amount" />
</Box>
</ModalBox>
ref={depositeRef}
/>
</>
)
}

View File

@ -11,6 +11,9 @@ import {
StakingModalCertificate, ModalBox,
VFStack, HFStack, HBetween,
} from "../components"
import {
ModalDeposite
} from '../uimsg'
import { useApp } from "../AppContext"
import { config } from "../config"
import { ABI, Images } from "../data"
@ -22,6 +25,7 @@ import {
get_authorization_one,
get_authorization_search,
retrieve_all,
get_upBalance,
} from "../api"
import { approve, transfer } from '../lib'
import { useTranslation } from "react-i18next"
@ -85,6 +89,7 @@ export const Staking = () => {
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()
@ -93,6 +98,9 @@ export const Staking = () => {
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()
@ -113,70 +121,151 @@ export const Staking = () => {
onOpenStrategy()
}
// click certificate / deposite button
const onCertificate = (index) => {
setCertificateIndex(index)
onOpenCertificate()
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 = () => {
console.log('extract')
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)
})
}
// clicked Certificate
// 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]
if (_coins[index].authorized) {
// make button loading
_coins[index].loading = true
setCoins(_coins)
} else {
if (!app.address) {
toast({
title: 'Wallet not connected',
description: "Please connect your wallet first to perform the operation",
status: 'warning',
duration: 9000,
isClosable: true,
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)
})
return
}
// make button loading
_coins[index].loading = true
setCoins(_coins)
approve(ABI, _coins[index].address, app.appAddress, app.address, (err, tx) => {
_coins = [...coins]
//
let hi = setInterval(() => {
get_authorization_search(tx).then(res => {
_coins[index].authorized = true // for simple, we dont check the result.
setCoins(_coins)
if (!err) {
get_authorization_one(app.address, _coins[index].name, tx).then(res => {
// we dont care the result
clearInterval(hi)
}).catch(err => {
console.error('get_authorization_one() error:' + err.message)
console.error("get_authorization_search() 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)
})
}
}, 8000)
} else {
console.error("approve error:" + err.message)
}
// recover loading
_coins[index].loading = false
setCoins(_coins)
})
}
React.useEffect(() => {
@ -302,6 +391,15 @@ export const Staking = () => {
/>
<ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
<ModalDeposite
isOpen={isOpenDeposite}
onClose={onCloseDeposite}
onConfirm={onConfirmDeposite}
ref={refDepositeFocus}
/>
<ModalRetrieve isOpen={isOpenExtract} onClose={onCloseExtract} onConfirm={onConfirmExtract} />
</>
)
}

View File

@ -0,0 +1,24 @@
import { useTranslation } from "react-i18next"
import { ModalBox } from "../components"
import { Box, FormControl, Input } from "@chakra-ui/react"
import React from "react"
export const ModalDeposite = React.forwardRef((props, ref) => {
const { t } = useTranslation()
return (
<ModalBox
title={t('deposite')}
isOpen={props.isOpen}
onClose={props.onClose}
onConfirm={props.onConfirm}
focusRef={ref}
>
<Box>
<FormControl>Amount</FormControl>
<Input ref={ref} placeholder="deposite amount" />
</Box>
</ModalBox>
)
})

2
src/uimsg/index.js Normal file
View File

@ -0,0 +1,2 @@
export * from './ModalDeposite'
export * from './toasts'

18
src/uimsg/toasts.js Normal file
View File

@ -0,0 +1,18 @@
const toast = (t, content = '', title = '', duration = 9000, status = 'warning') => {
t({
title: title,
description: content,
status: status,
duration: duration,
isClosable: true,
})
}
export const toastw = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration)
export const toasti = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'info')
export const toasts = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'success')
export const toaste = (t, content = '', title = '', duration = 9000) => toast(t, content, title, duration, 'error')