I'm trying to use Vuex and Onboard.js to store a web3 provider in my DApp, however I keep getting a Maximum call stack size exceeded when I try to commit the selected wallet in my state, here's how my files look like:
store/ethers.js
import { ethers } from 'ethers';
import Onboard from 'bnc-onboard';
export const state = () => ({
address: '',
onboard: null,
wallet: null,
});
export const actions = {
async initOnboard({ commit, state }) {
const onboard = Onboard({
networkId: 4,
walletSelect: {
wallets: [
{ walletName: 'metamask' },
],
},
subscriptions: {
wallet: (wallet) => {
// If I comment out this line it works...
commit('SET_WALLET', wallet);
localStorage.setItem('wallet', wallet.name);
},
address: (address) => {
commit('SET_ADDRESS', address);
},
},
});
if (localStorage.getItem('wallet')) {
await onboard.walletSelect(localStorage.getItem('wallet'));
}
commit('SET_ONBOARD', onboard);
},
};
export const mutations = {
SET_WALLET(state, wallet) {
state.wallet = wallet;
},
SET_ONBOARD(state, onboard) {
state.onboard = onboard;
},
SET_ADDRESS(state, address) {
state.address = address;
},
};
index.vue
<template>
<button @click="connect">
Connect
</button>
</template>
<script>
import { mapActions } from 'vuex';
export default {
mounted() {
this.$store.dispatch('ethers/initOnboard');
},
methods: {
...mapActions('ethers', ['connect']),
},
};
</script>
I don't think it's a problem with the ethers library as I swapped it for web3 and got the same issue. If I comment out the commit('SET_WALLET', wallet); line the error is gone but I need a way to access this in my app.
I think I'm doing something wrong with the commits in my store and it's causing some recursion but I haven't been able to figure out what it is.
Here's a link with a reproduction of the issue, you'll need metamask installed. If you click the "connect" button and select "metamask" you'll see the error in the console.
Preview: https://f6875.sse.codesandbox.io/
Editor: https://codesandbox.io/s/upbeat-ardinghelli-f6875?file=/pages/index.vue
