Bálint Ujvári
519c411db0
* feat: sync and update with all changes from fork * refactor: extract clipboard copy logic into custom hook * fix: correct spelling of DEFAULT_REFRESH_FREQUENCY_MS in Stamps and WalletBalance providers * refactor(ui-tests): replace fixed sleeps with condition-based waits * fix: handle null values for size and granteeCount in infoGroups * fix(lint): add newline at end of file in useClipboardCopy hook * fix(ui-tests): page.goto URL * refactor: update import paths for useClipboardCopy --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { ReactElement, useContext, useState } from 'react'
|
|
|
|
import ExpandableList from '../../../components/ExpandableList'
|
|
import ExpandableListItem from '../../../components/ExpandableListItem'
|
|
import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
|
|
import { Loading } from '../../../components/Loading'
|
|
import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
|
|
import StakeModal from '../../../containers/StakeModal'
|
|
import { CheckState, Context as BeeContext } from '../../../providers/Bee'
|
|
import { AccountNavigation } from '../AccountNavigation'
|
|
import { Header } from '../Header'
|
|
|
|
export function AccountStaking(): ReactElement {
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const { status, stake, walletBalance } = useContext(BeeContext)
|
|
|
|
if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
|
|
|
|
function onStarted() {
|
|
setLoading(true)
|
|
}
|
|
|
|
function onFinished() {
|
|
setLoading(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<AccountNavigation active="STAKING" />
|
|
<div>
|
|
{loading || !stake ? (
|
|
<Loading />
|
|
) : (
|
|
<ExpandableList label="Staking" defaultOpen>
|
|
<ExpandableListItem label="Staked BZZ" value={`${stake?.toSignificantDigits(4)} xBZZ`} />
|
|
{walletBalance?.bzzBalance ? (
|
|
<ExpandableListItem
|
|
label="Available xBZZ balance"
|
|
value={`${walletBalance.bzzBalance.toSignificantDigits(4)} xBZZ`}
|
|
/>
|
|
) : null}
|
|
<ExpandableListItemActions>
|
|
<StakeModal onStarted={onStarted} onFinished={onFinished} />
|
|
</ExpandableListItemActions>
|
|
</ExpandableList>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|