>, newValue: number) {
navigate(ACCOUNT_TABS[newValue])
@@ -45,10 +45,11 @@ export function AccountNavigation({ active }: Props): ReactElement {
return (
-
-
-
-
+
+
+
+
+ {nodeInfo?.beeMode === BeeModes.FULL ? : null}
)
diff --git a/src/pages/account/staking/AccountStaking.tsx b/src/pages/account/staking/AccountStaking.tsx
new file mode 100644
index 00000000..451c9494
--- /dev/null
+++ b/src/pages/account/staking/AccountStaking.tsx
@@ -0,0 +1,53 @@
+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 { Context as BalanceContext } from '../../../providers/WalletBalance'
+import { AccountNavigation } from '../AccountNavigation'
+import { Header } from '../Header'
+
+export function AccountStaking(): ReactElement {
+ const [loading, setLoading] = useState(false)
+
+ const { status, stake } = useContext(BeeContext)
+ const { balance } = useContext(BalanceContext)
+
+ if (status.all === CheckState.ERROR) return
+
+ function onStarted() {
+ setLoading(true)
+ }
+
+ function onFinished() {
+ setLoading(false)
+ }
+
+ return (
+ <>
+
+
+
+ {loading || stake?.toDecimal === undefined ? (
+
+ ) : (
+
+
+ {balance?.bzz ? (
+
+ ) : null}
+
+
+
+
+ )}
+
+ >
+ )
+}
diff --git a/src/providers/Bee.tsx b/src/providers/Bee.tsx
index f2b04591..0d2e0f49 100644
--- a/src/providers/Bee.tsx
+++ b/src/providers/Bee.tsx
@@ -13,6 +13,7 @@ import { createContext, ReactChild, ReactElement, useContext, useEffect, useStat
import semver from 'semver'
import PackageJson from '../../package.json'
import { useLatestBeeRelease } from '../hooks/apiHooks'
+import { BzzToken } from '../models/BzzToken'
import { Token } from '../models/Token'
import type { Balance, ChequebookBalance, Settlements } from '../types'
import { Context as SettingsContext } from './Settings'
@@ -62,6 +63,7 @@ interface ContextInterface {
chequebookAddress: ChequebookAddressResponse | null
peers: Peer[] | null
chequebookBalance: ChequebookBalance | null
+ stake: BzzToken | null
peerBalances: Balance[] | null
peerCheques: LastChequesResponse | null
settlements: Settlements | null
@@ -98,6 +100,7 @@ const initialValues: ContextInterface = {
nodeInfo: null,
topology: null,
chequebookAddress: null,
+ stake: null,
peers: null,
chequebookBalance: null,
peerBalances: null,
@@ -225,6 +228,7 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
const [chequebookAddress, setChequebookAddress] = useState(null)
const [peers, setPeers] = useState(null)
const [chequebookBalance, setChequebookBalance] = useState(null)
+ const [stake, setStake] = useState(null)
const [peerBalances, setPeerBalances] = useState(null)
const [peerCheques, setPeerCheques] = useState(null)
const [settlements, setSettlements] = useState(null)
@@ -388,6 +392,11 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
.then(setChequebookBalance)
.catch(() => setChequebookBalance(null)),
+ beeDebugApi
+ .getStake({ timeout: TIMEOUT })
+ .then(stake => setStake(new BzzToken(stake)))
+ .catch(() => setStake(null)),
+
// Peer balances
peerBalanceWrapper()
.then(setPeerBalances)
@@ -471,6 +480,7 @@ export function Provider({ children, isDesktop }: Props): ReactElement {
chequebookAddress,
peers,
chequebookBalance,
+ stake,
peerBalances,
peerCheques,
settlements,
diff --git a/src/routes.tsx b/src/routes.tsx
index 56402133..0093ee4f 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -2,6 +2,7 @@ import { ReactElement, useContext } from 'react'
import { Route, Routes } from 'react-router-dom'
import { AccountChequebook } from './pages/account/chequebook/AccountChequebook'
import { AccountFeeds } from './pages/account/feeds/AccountFeeds'
+import { AccountStaking } from './pages/account/staking/AccountStaking'
import { AccountStamps } from './pages/account/stamps/AccountStamps'
import { AccountWallet } from './pages/account/wallet/AccountWallet'
import CreateNewFeed from './pages/feeds/CreateNewFeed'
@@ -14,10 +15,10 @@ import { UploadLander } from './pages/files/UploadLander'
import GiftCards from './pages/gift-code'
import Info from './pages/info'
import LightModeRestart from './pages/restart/LightModeRestart'
-import TopUp from './pages/top-up'
import Settings from './pages/settings'
import { CreatePostageStampPage } from './pages/stamps/CreatePostageStampPage'
import Status from './pages/status'
+import TopUp from './pages/top-up'
import { BankCardTopUpIndex } from './pages/top-up/BankCardTopUpIndex'
import { CryptoTopUpIndex } from './pages/top-up/CryptoTopUpIndex'
import { GiftCardFund } from './pages/top-up/GiftCardFund'
@@ -51,6 +52,7 @@ export enum ROUTES {
ACCOUNT_FEEDS_UPDATE = '/account/feeds/update/:hash',
ACCOUNT_FEEDS_VIEW = '/account/feeds/:uuid',
ACCOUNT_INVITATIONS = '/account/invitations',
+ ACCOUNT_STAKING = '/account/staking',
}
export const ACCOUNT_TABS = [
@@ -58,6 +60,7 @@ export const ACCOUNT_TABS = [
ROUTES.ACCOUNT_CHEQUEBOOK,
ROUTES.ACCOUNT_STAMPS,
ROUTES.ACCOUNT_FEEDS,
+ ROUTES.ACCOUNT_STAKING,
]
const BaseRouter = (): ReactElement => {
@@ -88,6 +91,7 @@ const BaseRouter = (): ReactElement => {
} />
} />
} />
+ } />
{isDesktop && } />}
)