From bc82e6756154b33d01796a6e66e51dcfa1495338 Mon Sep 17 00:00:00 2001
From: Cafe137 <77121044+Cafe137@users.noreply.github.com>
Date: Thu, 20 Jan 2022 15:49:41 +0100
Subject: [PATCH] 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 | 15 +++++++++++----
 src/providers/Bee.tsx                     | 13 +++++++++++++
 src/utils/index.ts                        |  7 +++++--
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/pages/stamps/PostageStampCreation.tsx b/src/pages/stamps/PostageStampCreation.tsx
index 4f297ba..a746c08 100644
--- a/src/pages/stamps/PostageStampCreation.tsx
+++ b/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`
   }
diff --git a/src/providers/Bee.tsx b/src/providers/Bee.tsx
index 4b58ebe..d5cc8f6 100644
--- a/src/providers/Bee.tsx
+++ b/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,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 490dc81..3bef651 100644
--- a/src/utils/index.ts
+++ b/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
 }