raise mixnodedetails to main context

nym-wallet/src/context/main.tsx

@@ -1,8 +1,9 @@
 import React, { createContext, useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
-import { TClientDetails, TSignInWithMnemonic } from '../types'
+import { TClientDetails, TMixnodeBondDetails, TSignInWithMnemonic } from '../types'
 import { TUseuserBalance, useGetBalance } from '../hooks/useGetBalance'
 import { config } from '../../config'
+import { getMixnodeBondDetails } from '../requests'
 
 export const { MAJOR_CURRENCY, MINOR_CURRENCY, ADMIN_ADDRESS, NETWORK_NAME } = config
 
@@ -14,9 +15,11 @@ export const urls = {
 type TClientContext = {
   mode: 'light' | 'dark'
   clientDetails?: TClientDetails
+  mixnodeDetails?: TMixnodeBondDetails | null
   userBalance: TUseuserBalance
   showAdmin: boolean
   showSettings: boolean
+  getBondDetails: () => Promise<void>
   handleShowSettings: () => void
   handleShowAdmin: () => void
   logIn: (clientDetails: TSignInWithMnemonic) => void
@@ -27,6 +30,7 @@ export const ClientContext = createContext({} as TClientContext)
 
 export const ClientContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [clientDetails, setClientDetails] = useState<TClientDetails>()
+  const [mixnodeDetails, setMixnodeDetails] = useState<TMixnodeBondDetails | null>()
   const [showAdmin, setShowAdmin] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
   const [mode, setMode] = useState<'light' | 'dark'>('light')
@@ -43,7 +47,10 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
     }
   }, [clientDetails, userBalance.fetchBalance])
 
-  const logIn = async (clientDetails: TSignInWithMnemonic) => setClientDetails(clientDetails)
+  const logIn = async (clientDetails: TSignInWithMnemonic) => {
+    await getBondDetails()
+    setClientDetails(clientDetails)
+  }
 
   const logOut = () => {
     setClientDetails(undefined)
@@ -53,14 +60,21 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
   const handleShowAdmin = () => setShowAdmin((show) => !show)
   const handleShowSettings = () => setShowSettings((show) => !show)
 
+  const getBondDetails = async () => {
+    const mixnodeDetails = await getMixnodeBondDetails()
+    setMixnodeDetails(mixnodeDetails)
+  }
+
   return (
     <ClientContext.Provider
       value={{
         mode,
         clientDetails,
+        mixnodeDetails,
         userBalance,
         showAdmin,
         showSettings,
+        getBondDetails,
         handleShowSettings,
         handleShowAdmin,
         logIn,

nym-wallet/src/pages/settings/index.tsx

@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react'
-import { Alert, Box, Dialog, Typography } from '@mui/material'
+import React, { useContext, useState } from 'react'
+import { Alert, Box, Dialog } from '@mui/material'
 import { SettingsOutlined } from '@mui/icons-material'
 import { NymCard } from '../../components'
 import { ClientContext } from '../../context/main'
@@ -14,10 +14,10 @@ import { NodeStatus } from '../../components/NodeStatus'
 const tabs = ['Profile', 'System variables', 'Node stats']
 
 export const Settings = () => {
-  const { showSettings, handleShowSettings } = useContext(ClientContext)
   const [selectedTab, setSelectedTab] = useState(0)
 
-  const { mixnodeDetails, status, saturation, rewardEstimation, getBondDetails } = useSettingsState(showSettings)
+  const { mixnodeDetails, showSettings, handleShowSettings, getBondDetails } = useContext(ClientContext)
+  const { status, saturation, rewardEstimation } = useSettingsState(showSettings)
 
   const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab)
 

nym-wallet/src/pages/settings/useSettingsState.ts

@@ -7,31 +7,26 @@ import {
   getMixnodeStatus,
   minorToMajor,
 } from '../../requests'
-import { TMixnodeBondDetails, MixnodeStatus } from '../../types'
+import { MixnodeStatus } from '../../types'
 
 export const useSettingsState = (shouldUpdate: boolean) => {
-  const [mixnodeDetails, setMixnodeDetails] = useState<TMixnodeBondDetails | null>()
   const [status, setStatus] = useState<MixnodeStatus>('not_found')
   const [saturation, setSaturation] = useState<number>(0)
   const [rewardEstimation, setRewardEstimation] = useState<number>(0)
 
-  const { clientDetails } = useContext(ClientContext)
-
-  const getBondDetails = async () => {
-    const details = await getMixnodeBondDetails()
-    setMixnodeDetails(details)
-  }
+  const { mixnodeDetails } = useContext(ClientContext)
 
   const getStatus = async () => {
-    if (clientDetails?.client_address) {
-      const status = await getMixnodeStatus(clientDetails?.contract_address)
+    if (mixnodeDetails?.mix_node.identity_key) {
+      const status = await getMixnodeStatus(mixnodeDetails?.mix_node.identity_key)
       setStatus(status.status)
     }
   }
 
   const getStakeSaturation = async () => {
-    if (clientDetails?.client_address) {
-      const saturation = await getMixnodeStakeSaturation(clientDetails?.contract_address)
+    if (mixnodeDetails?.mix_node.identity_key) {
+      const saturation = await getMixnodeStakeSaturation(mixnodeDetails?.mix_node.identity_key)
+
       if (saturation) {
         setSaturation(Math.round(saturation.saturation * 100))
       }
@@ -39,8 +34,8 @@ export const useSettingsState = (shouldUpdate: boolean) => {
   }
 
   const getRewardEstimation = async () => {
-    if (clientDetails?.client_address) {
-      const rewardEstimation = await getMixnodeRewardEstimation(clientDetails?.contract_address)
+    if (mixnodeDetails?.mix_node.identity_key) {
+      const rewardEstimation = await getMixnodeRewardEstimation(mixnodeDetails?.mix_node.identity_key)
       if (rewardEstimation) {
         const toMajor = await minorToMajor(rewardEstimation.estimated_total_node_reward.toString())
         setRewardEstimation(parseInt(toMajor.amount))
@@ -50,7 +45,6 @@ export const useSettingsState = (shouldUpdate: boolean) => {
 
   useEffect(() => {
     if (shouldUpdate) {
-      getBondDetails()
       getStatus()
       getStakeSaturation()
       getRewardEstimation()
@@ -60,8 +54,6 @@ export const useSettingsState = (shouldUpdate: boolean) => {
   return {
     status,
     saturation,
-    mixnodeDetails,
     rewardEstimation,
-    getBondDetails,
   }
 }