From 44bfd68d99805b83cf5fc083a2f020d87a39213b Mon Sep 17 00:00:00 2001
From: Sergey Chystiakov <anyxem@gmail.com>
Date: Sun, 7 Apr 2024 10:58:28 +0200
Subject: [PATCH] move wallet state to contect, walletHook only for reading

---
 src/components/composed/Header/Header.js      |   7 +-
 .../NetworkProvider/NetworkProvider.js        | 114 ++++++++++++++++++
 src/contexts/index.js                         |   7 ++
 src/hooks/UseWalletInfo/useMlWalletInfo.js    |  85 ++-----------
 src/index.js                                  |  13 +-
 src/pages/Dashboard/Dashboard.js              |  12 +-
 src/pages/SendTransaction/SendTransaction.js  |   7 +-
 src/pages/Staking/Staking.js                  |  39 +++---
 src/pages/Wallet/Wallet.js                    |  15 +--
 src/utils/Helpers/ML/ML.js                    |   1 +
 10 files changed, 166 insertions(+), 134 deletions(-)
 create mode 100644 src/contexts/NetworkProvider/NetworkProvider.js

diff --git a/src/components/composed/Header/Header.js b/src/components/composed/Header/Header.js
index 2a1c7b44..c1a6dcf7 100644
--- a/src/components/composed/Header/Header.js
+++ b/src/components/composed/Header/Header.js
@@ -8,11 +8,12 @@ import { ReactComponent as ExpandImg } from '@Assets/images/icon-expand.svg'
 import { ReactComponent as SettingsImg } from '@Assets/images/settings.svg'
 
 import { Button, Logo, Tooltip } from '@BasicComponents'
-import { AccountContext } from '@Contexts'
+import { AccountContext, NetworkContext } from '@Contexts'
 
 import './Header.css'
 
 const Header = ({ customBackAction, noBackButton = false }) => {
+  const network = useContext(NetworkContext)
   const [unlocked, setUnlocked] = useState(false)
   const [tooltipVisible, setTooltipVisible] = useState(false)
   const tooltipMessage = 'Expand view'
@@ -60,6 +61,10 @@ const Header = ({ customBackAction, noBackButton = false }) => {
 
   return (
     <header data-testid="header-container">
+      <pre style={{ position: 'absolute', top: 1, left: 1 }}>
+        {JSON.stringify(network)}
+      </pre>
+
       {!noBackButton && (
         <Button
           alternate
diff --git a/src/contexts/NetworkProvider/NetworkProvider.js b/src/contexts/NetworkProvider/NetworkProvider.js
new file mode 100644
index 00000000..6f65afa3
--- /dev/null
+++ b/src/contexts/NetworkProvider/NetworkProvider.js
@@ -0,0 +1,114 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import {
+  getAddressData,
+  getChainTip,
+  getTransactionData,
+} from '../../services/API/Mintlayer/Mintlayer'
+import { AccountContext, SettingsContext } from '@Contexts'
+import { AppInfo } from '@Constants'
+import { ML_ATOMS_PER_COIN } from '../../utils/Constants/AppInfo/AppInfo'
+import { ML } from '@Helpers'
+
+const NetworkContext = createContext()
+
+const REFRESH_INTERVAL = 1000
+
+const NetworkProvider = ({ value: propValue, children }) => {
+  const { addresses } = useContext(AccountContext)
+  const { networkType } = useContext(SettingsContext)
+
+  const currentMlAddresses =
+    networkType === AppInfo.NETWORK_TYPES.MAINNET
+      ? addresses.mlMainnetAddress
+      : addresses.mlTestnetAddresses
+
+  const [onlineHeight, setOnlineHeight] = useState(0)
+  const [currentHeight, setCurrentHeight] = useState(0)
+  const [balance, setBalance] = useState(0)
+  const [lockedBalance, setLockedBalance] = useState(0)
+  // const [addresses, setAddresses] = useState({})
+  // const [utxos, setUtxos] = useState({})
+  const [transactions, setTransactions] = useState([])
+
+  useEffect(() => {
+    if (onlineHeight > currentHeight) {
+      console.log('fetch data')
+      setCurrentHeight(onlineHeight)
+      // fetch addresses, utxos, transactions
+      const getData = async () => {
+        // fetch address data
+        const addressList = [
+          ...currentMlAddresses.mlReceivingAddresses,
+          ...currentMlAddresses.mlChangeAddresses,
+        ]
+        const addresses = addressList.map((address) => getAddressData(address))
+        const addresses_data = await Promise.all(addresses)
+        let available_balance = BigInt(0)
+        let locked_balance = BigInt(0)
+        const transaction_ids = []
+        addresses_data.forEach((address_data) => {
+          const { coin_balance, locked_coin_balance, transaction_history } =
+            JSON.parse(address_data)
+          console.log('===', coin_balance, transaction_history)
+          available_balance = coin_balance
+            ? available_balance + BigInt(coin_balance.atoms)
+            : available_balance
+          locked_balance = locked_coin_balance
+            ? locked_balance + BigInt(locked_coin_balance.atoms)
+            : locked_balance
+          transaction_ids.push(...transaction_history)
+        })
+        console.log('available_balance===', available_balance.toString())
+        setBalance(Number(available_balance) / ML_ATOMS_PER_COIN)
+        setLockedBalance(Number(locked_balance) / ML_ATOMS_PER_COIN)
+
+        // fetch transactions data
+        const transactions = transaction_ids.map((txid) =>
+          getTransactionData(txid),
+        )
+        const transactions_data = await Promise.all(transactions)
+        console.log('transactions_data', transactions_data)
+
+        const parsedTransactions = ML.getParsedTransactions(
+          transactions_data,
+          addressList,
+        )
+        console.log(parsedTransactions)
+        setTransactions(parsedTransactions)
+      }
+      getData()
+    }
+  }, [onlineHeight, currentHeight])
+
+  useEffect(() => {
+    const data = setInterval(() => {
+      // fetch current network height
+      const getData = async () => {
+        const result = await getChainTip()
+        const { block_height } = JSON.parse(result)
+        setOnlineHeight(block_height)
+      }
+      getData()
+    }, REFRESH_INTERVAL)
+
+    return () => clearInterval(data)
+  }, [])
+
+  const value = {
+    balance,
+    lockedBalance,
+    // addresses,
+    // utxos,
+    transactions,
+    currentHeight,
+    onlineHeight,
+  }
+
+  return (
+    <NetworkContext.Provider value={propValue || value}>
+      {children}
+    </NetworkContext.Provider>
+  )
+}
+
+export { NetworkContext, NetworkProvider }
diff --git a/src/contexts/index.js b/src/contexts/index.js
index 8f5b4600..fb6b7e82 100644
--- a/src/contexts/index.js
+++ b/src/contexts/index.js
@@ -13,6 +13,11 @@ import {
   TransactionProvider,
 } from './TransactionProvider/TransactionProvider'
 
+import {
+  NetworkContext,
+  NetworkProvider,
+} from './NetworkProvider/NetworkProvider'
+
 export {
   AccountContext,
   AccountProvider,
@@ -20,4 +25,6 @@ export {
   SettingsProvider,
   TransactionContext,
   TransactionProvider,
+  NetworkContext,
+  NetworkProvider,
 }
diff --git a/src/hooks/UseWalletInfo/useMlWalletInfo.js b/src/hooks/UseWalletInfo/useMlWalletInfo.js
index 399eaf01..cac7eb92 100644
--- a/src/hooks/UseWalletInfo/useMlWalletInfo.js
+++ b/src/hooks/UseWalletInfo/useMlWalletInfo.js
@@ -1,84 +1,21 @@
 import { useEffect, useState, useRef, useCallback, useContext } from 'react'
 import { Mintlayer } from '@APIs'
-import { Format, ML } from '@Helpers'
-import { AccountContext, TransactionContext } from '@Contexts'
+import { AccountContext, NetworkContext, TransactionContext } from '@Contexts'
 
 const useMlWalletInfo = (addresses) => {
   // const isWalletPage = location.pathname === '/wallet'
-  const { walletType, setBalanceLoading } = useContext(AccountContext)
-  const { setTransactionsLoading, setDelegationsLoading } =
-    useContext(TransactionContext)
+  const { walletType } = useContext(AccountContext)
+  const { setDelegationsLoading } = useContext(TransactionContext)
+  const {
+    balance: mlBalance,
+    lockedBalance: mlBalanceLocked,
+    transactions: mlTransactionsList,
+  } = useContext(NetworkContext)
   const effectCalled = useRef(false)
-  const [mlTransactionsList, setMlTransactionsList] = useState([])
   const [mlDelegationList, setMlDelegationList] = useState([])
   const [mlDelegationsBalance, setMlDelegationsBalance] = useState(0)
-  const [mlBalance, setMlBalance] = useState(0)
-  const [mlBalanceLocked, setMlBalanceLocked] = useState(0)
-  const [mlUnformattedBalance, setMlUnformattedBalance] = useState(0)
-  const [mlUnformattedBalanceLocked, setMlUnformattedBalanceLocked] =
-    useState(0)
   const isMintlayer = walletType.name === 'Mintlayer'
 
-  const getTransactions = useCallback(async () => {
-    try {
-      if (!addresses || !isMintlayer) return
-      setTransactionsLoading(true)
-      const addressList = [
-        ...addresses.mlReceivingAddresses,
-        ...addresses.mlChangeAddresses,
-      ]
-      const transactions = await Mintlayer.getWalletTransactions(addressList)
-
-      const parsedTransactions = ML.getParsedTransactions(
-        transactions,
-        addressList,
-      )
-      setMlTransactionsList(parsedTransactions)
-      setTransactionsLoading(false)
-    } catch (error) {
-      console.error(error)
-      setTransactionsLoading(false)
-    }
-  }, [addresses, setTransactionsLoading, isMintlayer])
-
-  const getBalance = useCallback(async () => {
-    try {
-      if (!addresses) return
-      setBalanceLoading(true)
-      const addressList = [
-        ...addresses.mlReceivingAddresses,
-        ...addresses.mlChangeAddresses,
-      ]
-
-      const balanceResult = await Mintlayer.getWalletBalance(addressList)
-
-      const balance = balanceResult.totalBalance
-      const balanceLocked = balanceResult.lockedBalance
-      const balanceInCoins = ML.getAmountInCoins(balance.balanceInAtoms)
-      const balanceLockedInCoins = ML.getAmountInCoins(
-        balanceLocked.balanceInAtoms,
-      )
-      const formattedBalance = Format.BTCValue(balanceInCoins)
-      const formattedBalanceLocked = Format.BTCValue(balanceLockedInCoins)
-
-      if (balance) {
-        setMlBalance(formattedBalance)
-        setMlUnformattedBalance(balance)
-      } else setMlBalance(0)
-
-      if (balanceLocked) {
-        setMlBalanceLocked(formattedBalanceLocked)
-        setMlUnformattedBalanceLocked(formattedBalanceLocked)
-      } else setMlBalanceLocked(0)
-      setBalanceLoading(false)
-    } catch (error) {
-      console.error(error)
-      setMlBalance(0)
-      setBalanceLoading(false)
-      return
-    }
-  }, [addresses, setBalanceLoading])
-
   const getDelegations = useCallback(async () => {
     try {
       if (!addresses || !isMintlayer) return
@@ -133,19 +70,15 @@ const useMlWalletInfo = (addresses) => {
     // getTransactions()
     // getDelegations()
     // getBalance()
-  }, [getBalance, getTransactions, getDelegations])
+  }, [getDelegations])
 
   return {
     mlTransactionsList,
     mlDelegationList,
     mlBalance,
     mlBalanceLocked,
-    mlUnformattedBalance,
-    mlUnformattedBalanceLocked,
     mlDelegationsBalance,
     getDelegations,
-    getTransactions,
-    getBalance,
   }
 }
 
diff --git a/src/index.js b/src/index.js
index 6a62d3b4..f91fe3c3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,6 +29,7 @@ import {
   AccountProvider,
   SettingsProvider,
   TransactionProvider,
+  NetworkProvider,
 } from '@Contexts'
 import { ML } from '@Cryptos'
 import { LocalStorageService } from '@Storage'
@@ -208,11 +209,13 @@ root.render(
   <React.StrictMode>
     <AccountProvider>
       <SettingsProvider>
-        <TransactionProvider>
-          <MemoryRouter>
-            <App />
-          </MemoryRouter>
-        </TransactionProvider>
+        <NetworkProvider>
+          <TransactionProvider>
+            <MemoryRouter>
+              <App />
+            </MemoryRouter>
+          </TransactionProvider>
+        </NetworkProvider>
       </SettingsProvider>
     </AccountProvider>
   </React.StrictMode>,
diff --git a/src/pages/Dashboard/Dashboard.js b/src/pages/Dashboard/Dashboard.js
index 475fcb5e..318dee3a 100644
--- a/src/pages/Dashboard/Dashboard.js
+++ b/src/pages/Dashboard/Dashboard.js
@@ -18,7 +18,6 @@ import useOneDayAgoHist from 'src/hooks/UseOneDayAgoHist/useOneDayAgoHist'
 import { useNavigate } from 'react-router-dom'
 import { BTC } from '@Helpers'
 import { AppInfo } from '@Constants'
-import { useEffectOnce } from 'src/hooks/etc/useEffectOnce'
 
 const DashboardPage = () => {
   const { addresses, accountName, setWalletType, accountID } =
@@ -28,17 +27,14 @@ const DashboardPage = () => {
     networkType === AppInfo.NETWORK_TYPES.MAINNET
       ? addresses.btcMainnetAddress
       : addresses.btcTestnetAddress
-  const currentMlAddresses =
-    networkType === AppInfo.NETWORK_TYPES.MAINNET
-      ? addresses.mlMainnetAddress
-      : addresses.mlTestnetAddresses
+
   const [openConnectConfirmation, setOpenConnectConfirmation] = useState(false)
   const [allowClosing, setAllowClosing] = useState(true)
   const [account, setAccount] = useState(null)
 
   const [connectedWalletType, setConnectedWalletType] = useState('')
   const { btcBalance } = useBtcWalletInfo(currentBtcAddress)
-  const { mlBalance, getBalance } = useMlWalletInfo(currentMlAddresses)
+  const { mlBalance } = useMlWalletInfo()
   const { exchangeRate: btcExchangeRate } = useExchangeRates('btc', 'usd')
   const { exchangeRate: mlExchangeRate } = useExchangeRates('ml', 'usd')
   const { yesterdayExchangeRate: btcYesterdayExchangeRate } =
@@ -173,10 +169,6 @@ const DashboardPage = () => {
     getCurrentAccount(accountID).then((account) => setAccount(account))
   }, [accountID])
 
-  useEffectOnce(() => {
-    getBalance()
-  }, [])
-
   return (
     <>
       <Header noBackButton />
diff --git a/src/pages/SendTransaction/SendTransaction.js b/src/pages/SendTransaction/SendTransaction.js
index 10f4f259..d406c897 100644
--- a/src/pages/SendTransaction/SendTransaction.js
+++ b/src/pages/SendTransaction/SendTransaction.js
@@ -21,7 +21,6 @@ import { ML } from '@Cryptos'
 import { Mintlayer } from '@APIs'
 
 import './SendTransaction.css'
-import { useEffectOnce } from '../../hooks/etc/useEffectOnce'
 
 const SendTransactionPage = () => {
   const { addresses, accountID, walletType } = useContext(AccountContext)
@@ -50,11 +49,7 @@ const SendTransactionPage = () => {
 
   const { exchangeRate } = useExchangeRates(tokenName, fiatName)
   const { btcBalance } = useBtcWalletInfo(currentBtcAddress)
-  const { mlBalance, getBalance } = useMlWalletInfo(currentMlAddresses)
-
-  useEffectOnce(() => {
-    getBalance()
-  })
+  const { mlBalance } = useMlWalletInfo(currentMlAddresses)
 
   const maxValueToken = walletType.name === 'Mintlayer' ? mlBalance : btcBalance
 
diff --git a/src/pages/Staking/Staking.js b/src/pages/Staking/Staking.js
index 868ed725..9ad207ae 100644
--- a/src/pages/Staking/Staking.js
+++ b/src/pages/Staking/Staking.js
@@ -14,7 +14,6 @@ import { ML } from '@Cryptos'
 import { Mintlayer } from '@APIs'
 
 import './Staking.css'
-import { useEffectOnce } from '../../hooks/etc/useEffectOnce'
 
 const StakingPage = () => {
   const { state } = useLocation()
@@ -51,7 +50,7 @@ const StakingPage = () => {
   const [transactionInformation, setTransactionInformation] = useState(null)
 
   const { exchangeRate } = useExchangeRates(tokenName, fiatName)
-  const { mlBalance, getBalance } = useMlWalletInfo(currentMlAddresses)
+  const { mlBalance } = useMlWalletInfo(currentMlAddresses)
   const delegationBalance = Format.BTCValue(
     MLHelpers.getAmountInCoins(currentDelegationInfo.balance),
   )
@@ -64,10 +63,6 @@ const StakingPage = () => {
     navigate('/wallet')
   }
 
-  useEffectOnce(()=>{
-    getBalance()
-  })
-
   useEffect(() => {
     if (state && state.action === 'createDelegate') {
       setDelegationStep(2)
@@ -99,9 +94,7 @@ const StakingPage = () => {
   const calculateMlTotalFee = async (transactionInfo) => {
     setFeeLoading(true)
     const address = transactionInfo.to
-    const amountToSend = MLHelpers.getAmountInAtoms(
-      transactionInfo.amount,
-    )
+    const amountToSend = MLHelpers.getAmountInAtoms(transactionInfo.amount)
     const unusedChangeAddress = await ML.getUnusedAddress(changeAddresses)
     const unusedReceivingAddress = await ML.getUnusedAddress(receivingAddresses)
     const utxos = await Mintlayer.getWalletUtxos(mlAddressList)
@@ -111,12 +104,12 @@ const StakingPage = () => {
     const fee =
       transactionMode === AppInfo.ML_TRANSACTION_MODES.STAKING
         ? await MLTransaction.calculateFee({
-          utxosTotal: parsedUtxos,
-          changeAddress: unusedChangeAddress,
-          amountToUse: amountToSend,
-          network: networkType,
-          delegationId: address,
-        })
+            utxosTotal: parsedUtxos,
+            changeAddress: unusedChangeAddress,
+            amountToUse: amountToSend,
+            network: networkType,
+            delegationId: address,
+          })
         : transactionMode === AppInfo.ML_TRANSACTION_MODES.WITHDRAW
         ? await MLTransaction.calculateSpenDelegFee(
             address,
@@ -131,7 +124,7 @@ const StakingPage = () => {
             amountToUse: BigInt(0),
             network: networkType,
             poolId: address,
-      })
+          })
     const feeInCoins = MLHelpers.getAmountInCoins(Number(fee))
     setTotalFeeFiat(Format.fiatValue(feeInCoins * exchangeRate))
     setTotalFeeCrypto(feeInCoins)
@@ -174,13 +167,13 @@ const StakingPage = () => {
     const result =
       transactionMode === AppInfo.ML_TRANSACTION_MODES.STAKING
         ? await MLTransaction.sendTransaction({
-          utxosTotal: parsedUtxos,
-          keysList: keysList,
-          changeAddress: unusedChageAddress,
-          amountToUse: amountToSend,
-          network: networkType,
-          delegationId: transactionInformation.to,
-        })
+            utxosTotal: parsedUtxos,
+            keysList: keysList,
+            changeAddress: unusedChageAddress,
+            amountToUse: amountToSend,
+            network: networkType,
+            delegationId: transactionInformation.to,
+          })
         : transactionMode === AppInfo.ML_TRANSACTION_MODES.WITHDRAW
         ? await MLTransaction.spendFromDelegation(
             keysList,
diff --git a/src/pages/Wallet/Wallet.js b/src/pages/Wallet/Wallet.js
index 1096c9e5..fed8e860 100644
--- a/src/pages/Wallet/Wallet.js
+++ b/src/pages/Wallet/Wallet.js
@@ -12,7 +12,6 @@ import { AppInfo } from '@Constants'
 import { LocalStorageService } from '@Storage'
 
 import './Wallet.css'
-import { useEffectOnce } from '../../hooks/etc/useEffectOnce'
 
 const WalletPage = () => {
   const navigate = useNavigate()
@@ -30,13 +29,8 @@ const WalletPage = () => {
       : addresses.mlTestnetAddresses
   const [openShowAddress, setOpenShowAddress] = useState(false)
   const { btcTransactionsList, btcBalance } = useBtcWalletInfo(btcAddress)
-  const {
-    mlTransactionsList,
-    mlBalance,
-    mlBalanceLocked,
-    getTransactions,
-    getBalance,
-  } = useMlWalletInfo(currentMlAddresses)
+  const { mlTransactionsList, mlBalance, mlBalanceLocked } =
+    useMlWalletInfo(currentMlAddresses)
   const { exchangeRate: btcExchangeRate } = useExchangeRates('btc', 'usd')
   const { exchangeRate: mlExchangeRate } = useExchangeRates('ml', 'usd')
 
@@ -70,11 +64,6 @@ const WalletPage = () => {
     LocalStorageService.getItem(unconfirmedTransactionString) &&
     walletType.name === 'Mintlayer'
 
-  useEffectOnce(() => {
-    getTransactions()
-    getBalance()
-  })
-
   return (
     <div data-testid="wallet-page">
       <VerticalGroup bigGap>
diff --git a/src/utils/Helpers/ML/ML.js b/src/utils/Helpers/ML/ML.js
index c3e0b2b1..4d3a4ab7 100644
--- a/src/utils/Helpers/ML/ML.js
+++ b/src/utils/Helpers/ML/ML.js
@@ -11,6 +11,7 @@ const getAmountInAtoms = (amountInCoins) => {
 }
 
 const getParsedTransactions = (transactions, addresses) => {
+  console.log('transactions', transactions)
   const account = LocalStorageService.getItem('unlockedAccount')
   const networkType = LocalStorageService.getItem('networkType')
   const accountName = account.name