woggioni-opencode-agent/bee-dashboard
1
0
Fork 0
Code Actions Packages Releases Activity

fix: display account wallet partially while loading (#420)

Browse Source
This commit is contained in:
Cafe137
2022-06-21 10:51:51 +02:00
committed by GitHub
parent f238c43307
commit f43de77294
2 changed files with 44 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/account/chequebook/AccountChequebook.tsx
+26 -19
View File
@@ -22,30 +22,37 @@ export function AccountChequebook(): ReactElement {
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard /> if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
const showChequebook = chequebookBalance?.totalBalance !== undefined
return ( return (
<> <>
<Header /> <Header />
<AccountNavigation active="CHEQUEBOOK" /> <AccountNavigation active="CHEQUEBOOK" />
<div> <div>
<ExpandableList label="Chequebook" defaultOpen> {showChequebook && (
<ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} /> <ExpandableList label="Chequebook" defaultOpen>
<ExpandableListItem <ExpandableListItem
label="Available Uncommitted Balance" label="Total Balance"
value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`} value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`}
/> />
<ExpandableListItem <ExpandableListItem
label="Total Cheques Amount Sent" label="Available Uncommitted Balance"
value={`${settlements?.totalSent.toFixedDecimal()} BZZ`} value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
/> />
<ExpandableListItem <ExpandableListItem
label="Total Cheques Amount Received" label="Total Cheques Amount Sent"
value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`} value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
/> />
<ExpandableListItemActions> <ExpandableListItem
<WithdrawModal /> label="Total Cheques Amount Received"
<DepositModal /> value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
</ExpandableListItemActions> />
</ExpandableList> <ExpandableListItemActions>
<WithdrawModal />
<DepositModal />
</ExpandableListItemActions>
</ExpandableList>
)}
<ExpandableList label="Blockchain" defaultOpen> <ExpandableList label="Blockchain" defaultOpen>
<ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} /> <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
<ExpandableListItemKey <ExpandableListItemKey
src/pages/account/wallet/AccountWallet.tsx
+18 -14
View File
@@ -1,9 +1,9 @@
import { Box, Grid, Typography } from '@material-ui/core' import { Box, Grid, Typography } from '@material-ui/core'
import { ReactElement, useContext } from 'react' import { ReactElement, useContext } from 'react'
import { useNavigate } from 'react-router'
import Download from 'remixicon-react/DownloadLineIcon' import Download from 'remixicon-react/DownloadLineIcon'
import Gift from 'remixicon-react/GiftLineIcon' import Gift from 'remixicon-react/GiftLineIcon'
import Link from 'remixicon-react/LinkIcon' import Link from 'remixicon-react/LinkIcon'
import { useNavigate } from 'react-router'
import ExpandableListItem from '../../../components/ExpandableListItem' import ExpandableListItem from '../../../components/ExpandableListItem'
import ExpandableListItemActions from '../../../components/ExpandableListItemActions' import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../../components/ExpandableListItemKey' import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
@@ -19,10 +19,6 @@ export function AccountWallet(): ReactElement {
const navigate = useNavigate() const navigate = useNavigate()
if (!balance || !nodeAddresses) {
return <Loading />
}
function onCheckTransactions() { function onCheckTransactions() {
window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank') window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
} }
@@ -47,15 +43,23 @@ export function AccountWallet(): ReactElement {
</SwarmButton> </SwarmButton>
</Grid> </Grid>
</Box> </Box>
<Box mb={0.25}> {balance && nodeAddresses ? (
<ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded /> <>
</Box> <Box mb={0.25}>
<Box mb={0.25}> <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
<ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} /> </Box>
</Box> <Box mb={0.25}>
<Box mb={2}> <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
<ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} /> </Box>
</Box> <Box mb={2}>
<ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
</Box>
</>
) : (
<Box mb={8}>
<Loading />
</Box>
)}
<ExpandableListItemActions> <ExpandableListItemActions>
<SwarmButton onClick={onCheckTransactions} iconType={Link}> <SwarmButton onClick={onCheckTransactions} iconType={Link}>
Check transactions on Blockscout Check transactions on Blockscout