Modified today Viewed 2 times 0

Hi i cain't get my code to work as it use to a few months back and I caint figure out why can anyone support I appreciate it, I tried a few things but none worked.

I would like to simply be able to interact with a smart contract from my js frontend

I get this error when trying to call the mint method

Provider not available. Use .setProvider or .provider= to initialize the provider

import axios from 'axios';
import {useMetaMaskWallet} from 'vue-connect-wallet';
import {ABI, ADDRESS} from './util/constants/contract';
import {Web3} from 'web3';

const wallet = useMetaMaskWallet();
const $toast = useToast();

export default {
    data: () => {
        return {
            loading: false,
            metamaskAddress: '',
            contract: null,
            web3: null,
    async created() {
        const {ethereum} = window;
        if (!ethereum) {
        const localInstance = new Web3(ethereum);
        this.web3 = localInstance;
        this.contract = new localInstance.eth.Contract(ABI, ADDRESS);
    methods: {
        async connectWallet() {
            const accounts = await wallet.connect();
            this.metamaskAddress = accounts[0];
            // check if the address is on the whitelist
            // check if the address already minted

        async mint() {
            if (this.loading) return;
            try {
                this.loading = true;

                const url = 'http://localhost:8888/.netlify/functions/sign';
                const res = await axios.post(url, {
                    address: this.metamaskAddress,

                if (!res.data.signature) {
                    this.loading = false;
                    return this.showErrorMessage('Invalid signature');
                await this.contract.methods
                        from: this.metamaskAddress,
                        value: 0,
                await this.contract.methods.mint(res.data.signature).send({
                    from: this.metamaskAddress,
                    value: 0,
                this.loading = false;
            } catch (e) {
                this.loading = false;
                return this.showErrorMessage(e);


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.