Vojtech Simetka
a3c02dbf8a
* fix: use xDAI on Gnosis chain * fix: rename BZZ to xBZZ when on Gnosis chain * fix: replace MINIMUM_xDAI with MINIMUM_XDAI * fix: update xdai links to correct gnosis chain urls
75 lines
2.6 KiB
TypeScript
75 lines
2.6 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 { Context } from '../../../providers/Bee'
|
|
import { ROUTES } from '../../../routes'
|
|
import { AccountNavigation } from '../AccountNavigation'
|
|
import { Header } from '../Header'
|
|
|
|
export function AccountWallet(): ReactElement {
|
|
const { balance, nodeAddresses, nodeInfo } = 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.CONFIRMATION)
|
|
}
|
|
|
|
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>
|
|
<SwarmButton onClick={onInvite} iconType={Gift}>
|
|
Invite to Swarm...
|
|
</SwarmButton>
|
|
</ExpandableListItemActions>
|
|
</>
|
|
)
|
|
}
|