Files
bee-dashboard/src/pages/account/chequebook/AccountChequebook.tsx
T
Vojtech Simetka a3c02dbf8a fix: use xDAI and xBZZ on Gnosis chain (#454)
* 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
2022-06-28 16:29:05 +02:00

68 lines
2.9 KiB
TypeScript

import { ReactElement, useContext } from 'react'
import ExpandableList from '../../../components/ExpandableList'
import ExpandableListItem from '../../../components/ExpandableListItem'
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
import DepositModal from '../../../containers/DepositModal'
import WithdrawModal from '../../../containers/WithdrawModal'
import { useAccounting } from '../../../hooks/accounting'
import { CheckState, Context as BeeContext } from '../../../providers/Bee'
import { Context as SettingsContext } from '../../../providers/Settings'
import PeerBalances from '../../accounting/PeerBalances'
import { AccountNavigation } from '../AccountNavigation'
import { Header } from '../Header'
export function AccountChequebook(): ReactElement {
const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
useContext(BeeContext)
const { beeDebugApi } = useContext(SettingsContext)
const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
const showChequebook = chequebookBalance?.totalBalance !== undefined
return (
<>
<Header />
<AccountNavigation active="CHEQUEBOOK" />
<div>
{showChequebook && (
<ExpandableList label="Chequebook" defaultOpen>
<ExpandableListItem
label="Total Balance"
value={`${chequebookBalance?.totalBalance.toFixedDecimal()} xBZZ`}
/>
<ExpandableListItem
label="Available Uncommitted Balance"
value={`${chequebookBalance?.availableBalance.toFixedDecimal()} xBZZ`}
/>
<ExpandableListItem
label="Total Cheques Amount Sent"
value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
/>
<ExpandableListItem
label="Total Cheques Amount Received"
value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
/>
<ExpandableListItemActions>
<WithdrawModal />
<DepositModal />
</ExpandableListItemActions>
</ExpandableList>
)}
<ExpandableList label="Blockchain" defaultOpen>
<ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
<ExpandableListItemKey
label="Chequebook contract address"
value={chequebookAddress?.chequebookAddress || ''}
/>
</ExpandableList>
<PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
</div>
</>
)
}