Files
bee-dashboard/src/pages/info/WalletInfoCard.tsx
T
Cafe137 02469046b0 fix: add loading state to info page (#584)
* fix: add loading state to info page

* refactor: use bee-js for readiness check
2022-11-14 14:22:49 +01:00

54 lines
1.5 KiB
TypeScript

import { useContext } from 'react'
import { useNavigate } from 'react-router'
import Upload from 'remixicon-react/UploadLineIcon'
import Wallet from 'remixicon-react/Wallet3LineIcon'
import Card from '../../components/Card'
import { Context as BeeContext } from '../../providers/Bee'
import { Context as BalanceProvider } from '../../providers/WalletBalance'
import { ROUTES } from '../../routes'
export function WalletInfoCard() {
const { nodeInfo } = useContext(BeeContext)
const { balance, error } = useContext(BalanceProvider)
const navigate = useNavigate()
let balanceText = 'Loading...'
if (error) {
balanceText = 'Could not load...'
console.error(error) // eslint-disable-line
} else if (balance) {
balanceText = `${balance.bzz.toSignificantDigits(4)} xBZZ | ${balance.dai.toSignificantDigits(4)} xDAI`
}
if (nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode)) {
return (
<Card
buttonProps={{
iconType: Wallet,
children: 'Manage your wallet',
onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
}}
icon={<Wallet />}
title={balanceText}
subtitle="Current wallet balance."
status="ok"
/>
)
}
return (
<Card
buttonProps={{
iconType: Wallet,
children: 'Setup wallet',
onClick: () => navigate(ROUTES.TOP_UP),
}}
icon={<Upload />}
title="Your wallet is not setup."
subtitle="To share content on Swarm, please setup your wallet."
status="error"
/>
)
}