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

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.