patrickalphac / full-stack-web3-metamask-connectors

A few different examples on connecting your dApps to metamask / wallets.

full-stack-web3-metamask-connectors's Issues

Question: How to Ask Users to "Allow Contract to Spend Tokens On Your Behalf"

Hi, Mr. Collins,

I don't have any issues thus far with this repo, but I just had a question. I've been watching your tutorial on "how to connect your smart contract to your frontend in 6 different ways", and I was wondering how I could ask the users to approve a contract to spend their tokens, using the JS that I've typed so far. This is my code (your code, really):

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import {useState} from "react";
import {ethers} from "ethers";

export default function Home() {
  const [isConnected, setIsConnected] = useState(false);
  const [provider, setProvider] = useState();
  async function connect() {
    if (typeof window.ethereum !== "undefined") {
      try {
        await ethereum.request({method: "eth_requestAccounts"});
        setIsConnected(true);
        let connectedProvider = new ethers.providers.Web3Provider(window.ethereum);
        setSigner(connectedProvider.getSigner());
      } catch(e) {
        console.log(e);
      } 
    } else {
      setIsConnected(false);
    }
  }

  async function approve() {
    if (typeof window.ethereum !== "undefined") {
      const contractAddress = "...";
      const abi = [...];
      const connectedProvider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = connectedProvider.getSigner();
      const contract = new ethers.Contract(contractAddress, abi, signer);
      try {
        await contract.approve();
      } catch (error) {
        console.log(error);
      }
    } else {
      console.log("Please install MetaMask");
    }
  }
    return(<div className={styles.container}>Hello, user! {isConnected
    ? ("You're connected!") : (<button onClick= {() => connect()}>Connect!</button>)}
    {isConnected ? <button onClick={() => approve()}>Approve</button> : ""}
    </div>);
}

I just want to have it like most swaps (I'm not making a swap) where they ask you to approve their spending your tokens before you actually spend anything. When I click "approve" on my localhost, nothing happens. What am I doing wrong?

Thanks!