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 />
const showChequebook = chequebookBalance?.totalBalance !== undefined
return (
<>
<Header />
<AccountNavigation active="CHEQUEBOOK" />
<div>
<ExpandableList label="Chequebook" defaultOpen>
<ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
<ExpandableListItem
label="Available Uncommitted Balance"
value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
/>
<ExpandableListItem
label="Total Cheques Amount Sent"
value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
/>
<ExpandableListItem
label="Total Cheques Amount Received"
value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
/>
<ExpandableListItemActions>
<WithdrawModal />
<DepositModal />
</ExpandableListItemActions>
</ExpandableList>
{showChequebook && (
<ExpandableList label="Chequebook" defaultOpen>
<ExpandableListItem
label="Total Balance"
value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`}
/>
<ExpandableListItem
label="Available Uncommitted Balance"
value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
/>
<ExpandableListItem
label="Total Cheques Amount Sent"
value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
/>
<ExpandableListItem
label="Total Cheques Amount Received"
value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
/>
<ExpandableListItemActions>
<WithdrawModal />
<DepositModal />
</ExpandableListItemActions>
</ExpandableList>
)}
<ExpandableList label="Blockchain" defaultOpen>
<ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
<ExpandableListItemKey
src/pages/account/wallet/AccountWallet.tsx
+18 -14
View File
@@ -1,9 +1,9 @@
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 { useNavigate } from 'react-router'
import ExpandableListItem from '../../../components/ExpandableListItem'
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
@@ -19,10 +19,6 @@ export function AccountWallet(): ReactElement {
const navigate = useNavigate()
if (!balance || !nodeAddresses) {
return <Loading />
}
function onCheckTransactions() {
window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
}
@@ -47,15 +43,23 @@ export function AccountWallet(): ReactElement {
</SwarmButton>
</Grid>
</Box>
<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="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
</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="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
</Box>
</>
) : (
<Box mb={8}>
<Loading />
</Box>
)}
<ExpandableListItemActions>
<SwarmButton onClick={onCheckTransactions} iconType={Link}>
Check transactions on Blockscout