fix: get current price from chain state (#286)

* fix: get current price from chain state

* refactor: do not allow optional currentPrice

src/pages/stamps/PostageStampCreation.tsx

@@ -6,8 +6,9 @@ import React, { ReactElement, useContext } from 'react'
 import { Check } from 'react-feather'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
-import { Context } from '../../providers/Stamps'
+import { Context as StampsContext } from '../../providers/Stamps'
 import {
   calculateStampPrice,
   convertAmountToSeconds,
@@ -34,8 +35,10 @@ interface Props {
 }
 
 export function PostageStampCreation({ onFinished }: Props): ReactElement {
-  const { refresh } = useContext(Context)
+  const { chainState } = useContext(BeeContext)
+  const { refresh } = useContext(StampsContext)
   const { beeDebugApi } = useContext(SettingsContext)
+
   const { enqueueSnackbar } = useSnackbar()
 
   function getFileSize(depth: number): string {
@@ -55,10 +58,14 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
   }
 
   function getPrice(depth: number, amount: number): string {
-    if (isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255) {
+    const hasInvalidInput = isNaN(amount) || amount <= 0 || isNaN(depth) || depth < 17 || depth > 255
+    const isCurrentPriceAvailable = chainState && chainState.currentPrice
+
+    if (hasInvalidInput || !isCurrentPriceAvailable) {
       return '-'
     }
-    const price = calculateStampPrice(depth, amount)
+
+    const price = calculateStampPrice(depth, amount, chainState.currentPrice)
 
     return `${formatBzz(price)} BZZ`
   }

src/providers/Bee.tsx

@@ -1,4 +1,5 @@
 import type {
+  ChainState,
   ChequebookAddressResponse,
   Health,
   LastChequesResponse,
@@ -44,6 +45,7 @@ interface ContextInterface {
   peerBalances: Balance[] | null
   peerCheques: LastChequesResponse | null
   settlements: Settlements | null
+  chainState: ChainState | null
   latestBeeRelease: LatestBeeRelease | null
   isLoading: boolean
   isRefreshing: boolean
@@ -82,6 +84,7 @@ const initialValues: ContextInterface = {
   peerBalances: null,
   peerCheques: null,
   settlements: null,
+  chainState: null,
   latestBeeRelease: null,
   isLoading: true,
   isRefreshing: false,
@@ -144,6 +147,8 @@ export function Provider({ children }: Props): ReactElement {
   const [peerBalances, setPeerBalances] = useState<Balance[] | null>(null)
   const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
   const [settlements, setSettlements] = useState<Settlements | null>(null)
+  const [chainState, setChainState] = useState<ChainState | null>(null)
+
   const { latestBeeRelease } = useLatestBeeRelease()
 
   const [error, setError] = useState<Error | null>(initialValues.error)
@@ -177,6 +182,7 @@ export function Provider({ children }: Props): ReactElement {
     setPeerBalances(null)
     setPeerCheques(null)
     setSettlements(null)
+    setChainState(null)
 
     refresh()
   }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -277,6 +283,12 @@ export function Provider({ children }: Props): ReactElement {
           .then(setPeerCheques)
           .catch(() => setPeerCheques(null)),
 
+        // Chain state
+        beeDebugApi
+          .getChainState()
+          .then(setChainState)
+          .catch(() => setChainState(null)),
+
         // Chequebook balance
         chequeBalanceWrapper()
           .then(setChequebookBalance)
@@ -354,6 +366,7 @@ export function Provider({ children }: Props): ReactElement {
         peerBalances,
         peerCheques,
         settlements,
+        chainState,
         latestBeeRelease,
         isLoading,
         isRefreshing,

src/utils/index.ts

@@ -1,3 +1,4 @@
+import { NumberString } from '@ethersphere/bee-js'
 import { BigNumber } from 'bignumber.js'
 
 /**
@@ -186,6 +187,8 @@ export function convertAmountToSeconds(amount: number): number {
   return amount / 10 / 1
 }
 
-export function calculateStampPrice(depth: number, amount: number): number {
-  return (amount * 2 ** (depth - 16) * 2) / 1e16
+export function calculateStampPrice(depth: number, amount: number, currentPrice: NumberString): number {
+  const price = parseInt(currentPrice, 10)
+
+  return (amount * 2 ** (depth - 16) * price) / 1e16
 }