230 lines
8.6 KiB
JavaScript
230 lines
8.6 KiB
JavaScript
import {
|
|
Text, Button, Tab, TabList, TabPanel, TabPanels,
|
|
Tabs, Center, Input, Divider, Image,
|
|
Badge, Icon, StackDivider, HStack,
|
|
} from '@chakra-ui/react'
|
|
import React from 'react'
|
|
import { HBetween, HFStack, PoolData, VFStack } from '../components'
|
|
import { Images } from '../data'
|
|
import {
|
|
get_page_account, post_withdraw,
|
|
get_withdrawal_history,
|
|
get_daily_revenue_history,
|
|
get_reward_history,
|
|
} from '../api'
|
|
import { useApp } from '../AppContext'
|
|
|
|
|
|
let accountData = [
|
|
{ name: 'Total output', value: 0, emp: false, unit: 'USDT' },
|
|
{ name: 'Wallet balance', value: 0, emp: false, unit: 'USDT' },
|
|
{ name: 'Withdrawal balance', value: 0, emp: false, unit: 'USDT' },
|
|
]
|
|
|
|
const NoData = () => (
|
|
<HStack h='20' >
|
|
<Text>
|
|
No Available Data
|
|
</Text>
|
|
</HStack>
|
|
)
|
|
|
|
export const Account = () => {
|
|
const app = useApp()
|
|
|
|
const [accountInfo, setAccountInfo] = React.useState(accountData)
|
|
const [withdrawalHist, setWithdrawalHist] = React.useState([])
|
|
const [dailyRevenueHist, setDailyRevenueHist] = React.useState([])
|
|
const [rewardHist, setRewardHist] = React.useState([])
|
|
|
|
const [withdrawalAmount, setWithdrawalAmount] = React.useState(0)
|
|
|
|
const onBtnConfirm = () => {
|
|
if (app.address && withdrawalAmount > 0) {
|
|
post_withdraw(app.address, withdrawalAmount).then(res => {
|
|
|
|
}).catch(err => {
|
|
console.error(err.message)
|
|
})
|
|
}
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (app.address) {
|
|
get_page_account(app.address).then(res => {
|
|
console.log(res.data)
|
|
const d = res.data
|
|
let newAccount = [...accountData]
|
|
newAccount[0].value = d.output
|
|
newAccount[1].value = d.balance
|
|
newAccount[2].value = d.withdrawal
|
|
setAccountInfo(newAccount)
|
|
|
|
}).catch(err => {
|
|
console.error(err.message)
|
|
})
|
|
|
|
get_withdrawal_history().then(res => {
|
|
console.log(res.data)
|
|
})
|
|
get_daily_revenue_history().then(res => {
|
|
console.log(res.data)
|
|
})
|
|
get_reward_history().then(res => {
|
|
console.log(res.data)
|
|
})
|
|
}
|
|
}, [app.address])
|
|
|
|
return (
|
|
<>
|
|
<PoolData title='My Account' data={accountInfo} />
|
|
|
|
<Tabs mt="4" isFitted variant="enclosed">
|
|
<TabList>
|
|
<Tab _selected={{ color: 'white', bg: 'purple.500' }}> Withdrawal</Tab>
|
|
<Tab _selected={{ color: 'white', bg: 'purple.500' }}>Record</Tab>
|
|
</TabList>
|
|
|
|
<TabPanels>
|
|
|
|
<TabPanel
|
|
bg="white"
|
|
borderWidth="1px"
|
|
borderRadius="lg"
|
|
boxShadow="lg"
|
|
>
|
|
<VFStack>
|
|
<HFStack
|
|
p="4"
|
|
>
|
|
<Text fontWeight='700'>Withdraw</Text>
|
|
</HFStack>
|
|
|
|
<HFStack
|
|
align="center"
|
|
borderRadius="lg"
|
|
borderWidth="1px"
|
|
p="2"
|
|
divider={<StackDivider borderColor='gray.200' />}
|
|
>
|
|
<VFStack flex={1} align="start">
|
|
<Input
|
|
type='number'
|
|
borderWidth="0"
|
|
_focus={{ borderWidth: "0" }}
|
|
size="lg"
|
|
value={withdrawalAmount}
|
|
onChange={(ev) => {
|
|
setWithdrawalAmount(ev.target.value)
|
|
}}
|
|
/>
|
|
|
|
<Badge
|
|
as="button"
|
|
colorScheme='blue'
|
|
variant='solid'
|
|
fontSize='10'
|
|
onClick={() => {
|
|
setWithdrawalAmount(accountInfo[1].value)
|
|
}}
|
|
>
|
|
Redeem all
|
|
</Badge>
|
|
</VFStack>
|
|
|
|
<HFStack
|
|
flex={1}
|
|
justify="center"
|
|
align="center"
|
|
fontWeight='700'
|
|
pb="6"
|
|
>
|
|
<Image w='8' h='8' borderRadius='50%' src={Images.usdt} alt="usdt" />
|
|
<Text>USDT</Text>
|
|
</HFStack>
|
|
|
|
</HFStack>
|
|
|
|
<Center py="4">
|
|
<Button colorScheme="purple" onClick={onBtnConfirm}>Confirm</Button>
|
|
</Center>
|
|
|
|
<Divider />
|
|
|
|
<HFStack>
|
|
<Text
|
|
fontSize='12'
|
|
color='gray.400'
|
|
>
|
|
Your withdrawal will be sent to you USDT wallet address within 24 hours.
|
|
</Text>
|
|
</HFStack>
|
|
</VFStack>
|
|
</TabPanel>
|
|
|
|
<TabPanel>
|
|
|
|
<Tabs>
|
|
<TabList>
|
|
<Tab _selected={{ color: 'white', bg: 'purple.400' }}>Withdraw</Tab>
|
|
<Tab _selected={{ color: 'white', bg: 'purple.400' }}>DailyRevenue</Tab>
|
|
<Tab _selected={{ color: 'white', bg: 'purple.400' }}>Reward</Tab>
|
|
</TabList>
|
|
|
|
<TabPanels>
|
|
<TabPanel>
|
|
<HBetween>
|
|
<Text>Time</Text>
|
|
<Text>Quantity</Text>
|
|
<Text>Status</Text>
|
|
</HBetween>
|
|
{
|
|
withdrawalHist ?
|
|
<>
|
|
</>
|
|
:
|
|
'No Data.'
|
|
}
|
|
</TabPanel>
|
|
|
|
<TabPanel>
|
|
<HBetween>
|
|
<Text>Time</Text>
|
|
<Text>Quantity</Text>
|
|
<Text>Type</Text>
|
|
</HBetween>
|
|
{
|
|
dailyRevenueHist ?
|
|
<>
|
|
</>
|
|
:
|
|
'No Data.'
|
|
}
|
|
</TabPanel>
|
|
|
|
<TabPanel>
|
|
<HBetween>
|
|
<Text>Time</Text>
|
|
<Text>Quantity</Text>
|
|
<Text>User Address</Text>
|
|
</HBetween>
|
|
{
|
|
rewardHist ?
|
|
<>
|
|
</>
|
|
:
|
|
'No Data.'
|
|
}
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
</>
|
|
|
|
)
|
|
}
|
|
|