Maximum call stack size exceeded error using Vuex and Onboard.js

Viewed 384

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.

enter image description here

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

1 Answers

This answer pointed me in the right direction: maximum calstack size exceeded on vuex commit

So freezing the object when calling commit fixed the issue:

commit('SET_WALLET', Object.freeze(wallet));

I'm not sure exactly why this works though.

Related