Vojtech Simetka
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import { BeeModes } from '@ethersphere/bee-js'
|
|
import { Box, Grid, Typography } from '@material-ui/core'
|
|
import { ReactElement, useContext } from 'react'
|
|
import { useNavigate } from 'react-router'
|
|
import Download from 'remixicon-react/DownloadLineIcon'
|
|
import Gift from 'remixicon-react/GiftLineIcon'
|
|
import Link from 'remixicon-react/LinkIcon'
|
|
import ExpandableListItem from '../../../components/ExpandableListItem'
|
|
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
|
|
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
|
|
import { Loading } from '../../../components/Loading'
|
|
import { SwarmButton } from '../../../components/SwarmButton'
|
|
import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
|
|
import config from '../../../config'
|
|
import { CheckState, Context } from '../../../providers/Bee'
|
|
import { ROUTES } from '../../../routes'
|
|
import { AccountNavigation } from '../AccountNavigation'
|
|
import { Header } from '../Header'
|
|
|
|
export function AccountWallet(): ReactElement {
|
|
const { balance, nodeAddresses, nodeInfo, status } = useContext(Context)
|
|
|
|
const navigate = useNavigate()
|
|
|
|
function onCheckTransactions() {
|
|
window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
|
|
}
|
|
|
|
function onInvite() {
|
|
navigate(ROUTES.ACCOUNT_INVITATIONS)
|
|
}
|
|
|
|
function onDeposit() {
|
|
navigate(ROUTES.TOP_UP)
|
|
}
|
|
|
|
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
{nodeInfo?.beeMode !== BeeModes.ULTRA_LIGHT && <AccountNavigation active="WALLET" />}
|
|
<Box mb={4}>
|
|
<Grid container direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography variant="h2">Wallet balance</Typography>
|
|
<SwarmButton onClick={onDeposit} iconType={Download}>
|
|
Top up wallet
|
|
</SwarmButton>
|
|
</Grid>
|
|
</Box>
|
|
{balance && nodeAddresses ? (
|
|
<>
|
|
<Box mb={0.25}>
|
|
<ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
|
|
</Box>
|
|
<Box mb={0.25}>
|
|
<ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
|
|
</Box>
|
|
<Box mb={2}>
|
|
<ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
|
|
</Box>
|
|
</>
|
|
) : (
|
|
<Box mb={8}>
|
|
<Loading />
|
|
</Box>
|
|
)}
|
|
<ExpandableListItemActions>
|
|
<SwarmButton onClick={onCheckTransactions} iconType={Link}>
|
|
Check transactions on Blockscout
|
|
</SwarmButton>
|
|
{config.BEE_DESKTOP_ENABLED && (
|
|
<SwarmButton onClick={onInvite} iconType={Gift}>
|
|
Invite to Swarm...
|
|
</SwarmButton>
|
|
)}
|
|
</ExpandableListItemActions>
|
|
</>
|
|
)
|
|
}
|