How to establish a web3 provider connection from a Vue.js DApp?

Question

I am intended to interact with Rootstock blockchain from a vue.js DApp to track wallet balance and send RBTC. ​ I want to establish a Metamask connection and use ethers.js web3 provider to interact with the Rootstock network. ​ I created a Pinia storage to keep all the web3 data available for the whole app. Here is a concise version of what I've done so far: ​

import { ref } from 'vue';
import { defineStore } from 'pinia';
import { providers } from 'ethers';
​
export const useRootstockStore = defineStore('rootstock', () => {
  const balance = ref(0);
  const address = ref('');
  const provider = ref(null);
​
  const getBalance = async () => {
    balance.value = await provider.value.getBalance(address.value);
  };
​
  const connect = async () => {
    await window.ethereum.request({
      method: 'eth_requestAccounts',
    });
    provider.value = new providers.Web3Provider(window.ethereum);
    [address.value] = await provider.value.listAccounts();
  };
​
...
});

​ Within the storage I have: ​

• provider ref which is supposed to store a reference to web3 provider
• address ref keeping the Metamask wallet address
• balance ref storing the wallet balance
• connect function which establishes Metamask connection and instantiates ethers web3 provider
• getBalance function which queries the provider for RBTC balance of the wallet ​ After calling the connect function, the app connects to Metamask and seems to establish a connection with Rootstock, however when I try to query the wallet's RBTC balance, I keep getting the following error: ​

TypeError: 'get' on proxy: property '_network' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '#<Object>')
    at Proxy.<anonymous> (base-provider.ts:820:22)
    at Generator.next (<anonymous>)
    at fulfilled (formatter.ts:523:1)

​ What am I missing here?

Answer 1

Swap out ref, and replace it with computed.

Instead of using a ref to store the provider:

const provider = ref(null);

you should use computed to store the provider instead:

const provider = computed(() => new providers.Web3Provider(window.ethereum));

So, the whole script should be as follows:

import { ref, computed } from 'vue';
...
export const useRootstockStore = defineStore('rootstock', () => {
  const balance = ref(0);
  const address = ref('');
  const provider = computed(() => new providers.Web3Provider(window.ethereum));

  const getBalance = async () => {
    balance.value = await provider.value.getBalance(address.value);
  };

  const connect = async () => {
    await window.ethereum.request({
      method: 'eth_requestAccounts',
    });
    [address.value] = await provider.value.listAccounts();
  };
...
});

This should resolve your issue.