So I'm trying to update real time a balance and deposit (I'm developing a blockchain dapp) so I await the function in componentWillMount, but the website "crashes" (mouse locked) whenever I call this functions here. I'm guessing its not the way it's done, but where do I call it to stay updated real-time?

  async componentWillMount() {
    await this.balance()
    await this.viewDeposit()
  }

these are the functions, in case they are the problem

  //Balance 
  balance = async() => {
    const web3 = window.web3
    const balanceWei = await web3.eth.getBalance(this.state.account)
    const balance = web3.utils.fromWei(await balanceWei, 'ether') + ' ETH'
    this.setState({balance})
  }

  //Deposit
  viewDeposit = async() =>{
    const web3 = window.web3
    const depositWei = await web3.payments_contract.methods.viewFunds.call()
    const depositAmount = web3.utils.fromWei(await depositWei, 'ether') + 'ETH'
    this.setState({depositAmount})
  }

edit: the problem is with the viewDeposit function, when deleting it it works fine