[SOLVED] Accept ERC-20 Token Payments In Your Dapp

Moralis General
#1

Hey guys i having a problem with keeping the Staking Button Enabled, i notice if the page gets refreshed the button gets disabled again , i only them paying once each time they stake a new amount.
It works perfect with the current logic after transactions is complete Alert pops up and button gets enabled.

async function enableStaking(val){
      let options = {
        contractAddress:"0xA8F7Fbd9602533CCc6D698db23485d026c40a3fF",
        functionName:"newStaking",
        abi:[{"inputs":[{"internalType":"string","name":"note","type":"string"}],"name":"newStaking","outputs":[],"stateMutability":"payable","type":"function"}],
        params:{
          note: "Enabled Staking To Earn Passive Income"
        },
        msgValue: Moralis.Units.ETH(val)
      }
      await contractProcessor.fetch({
        params: options,
        onSuccess: () => {
          alert("sucess");
        setDisable(false);
        },
      })
    }


 <button className='btn3'   onClick={() => enableStaking(0.01)}> EnableStaking </button>
 <button className='btn3' disabled={disable} onClick={() => approve()}> StakeSFV2 </button>
#2

Are you talking about the “StakeSFV2” button? Are you using setDisable() anywhere else?

Make sure the value of the disable state is not true to begin with.

1 Like
#3

yes im talking about the StakeSFV2 button , No setDisable is only being use in the async function enableStaking , Yes the inital state is set to true .

const [disable, setDisable] = useState(true); // should i change it ?

#4

You should use a logic that executes when page refreshes, like an useEffect, that should be able to determine what should be the right state and set it accordingly

1 Like
#5

how would you go about it @cryptokid its tried couple but seems like im missing the point some help on the syntax would be helpful

#6

I don’t know the code syntax or how your application is structured. How do you know when that button should be enabled or not?
After you know that you can write some code to set it automatically when the page is refreshed

#7 
import React, { useEffect, useState} from 'react'
import { useMoralis } from 'react-moralis';
import "./RespModal.css"
import { useWeb3ExecuteFunction ,} from 'react-moralis';  
import { Modal } from 'react-responsive-modal';
import ERC20TokenBalance from './ERC20TokenBalance';
import FeeAbi from "../../Contracts/StakingFee.json";
import SFV2 from "../../Contracts/SFV2.json";
import StakingContract from "../../Contracts/StakingContract.json";
const RespModal = () => {
  const [open, setOpen] = useState(false);
  const onOpenModal = () => setOpen(true);
  const onCloseModal = () => setOpen(false);
  const [disable, setDisable] = useState(true);
  const [amount, setAmount] = useState(null)
  const contractProcessor = useWeb3ExecuteFunction();
  const {Moralis} = useMoralis();
  async function enableStaking(val){
      let options = {
        contractAddress:"0xA8F7Fbd9602533CCc6D698db23485d026c40a3fF",
        functionName:"newStaking",
        abi:FeeAbi,
        params:{
          note: "Enabled Staking To Earn Passive Income"
        },
        msgValue: Moralis.Units.ETH(val)
      }
      await contractProcessor.fetch({
        params: options,
        onSuccess: () => {
          alert("sucess");
        setDisable(false);      // HERE IS WHERE THE BUTTON GETS ENABLED 
        },
      })
    }

  async function approve(){
      const sendOptions = {
        contractAddress: "0x9388c7484C95BF1FeF464684Ce291B0334Cc4a7c",
        functionName: "approve",
        abi: SFV2,
        params: {
          spender: "0xF0e6d6D8f55656b302969D192c5bD0eBC8A1b1E8",
          amount: Moralis.Units.Token(amount)
        },
      };    
     const transaction = await Moralis.executeFunction(sendOptions)
     const results = transaction.hash;
     console.log(results)
     
 }
 async function deposit(){
  const sendOptions = {
    contractAddress: "0xF0e6d6D8f55656b302969D192c5bD0eBC8A1b1E8",
    functionName: "deposit",
    abi: StakingContract,
    params: {
      owner:"0xF0e6d6D8f55656b302969D192c5bD0eBC8A1b1E8",
      amount: Moralis.Units.Token(amount)
    },
  };    
  const transaction = await Moralis.executeFunction(sendOptions)
  console.log(transaction)
 }
 function handleAmount(val){
  console.log(val.target.value)
  setAmount(val.target.value)
 }
return (
     <div style={{ display: "flex" , width:"500px", alignItems:"center", justifyContent:"flex-start"}}>
     <button className='btn3'   onClick={() => enableStaking(0.01)}> EnableStaking </button>
      <button className='btn3' disabled={disable} onClick={onOpenModal}> StakeSFV2 </button>
      <Modal open={open} onClose={onCloseModal} center >
      <div style={{display:"flex" , flexDirection:"column",alignItems:"center"}}>  
        <h2 style={{color:"white", marginLeft:"40px",marginRight:"40px",marginTop:"5px"}}>STAKE SHIBAFAMEV2</h2>
        <input  type="text" placeholder="0.00" 
        style={{width:"100%",marginTop:"15px"}}
        onChange={handleAmount}
        ></input>
        <ERC20TokenBalance/>
        <button className='btn3' onClick={() => approve()}>Approve</button>
        <button className='btn3' onClick={() => deposit()}>Supply</button>
        </div>
      </Modal>
     </div>

  )
}
export default RespModal

Button gets enabled after the onSuccess message pops up at aysnc function enableStaking.

#8

Id you load that page for the first time, how would you know to enable or not that button? Assuming that some actions were done before and you closed the browser window.

1 Like
#9 
 useEffect(() => {
    setDisable(disable)
   },[disable])

adding this seemed to work just now :slight_smile:

1 Like
#10

yes actually i want it to listing to an event on the moralis database table i created using the sync smart contract

#11

i guess i will have to use MoralisQuery to confirmed the initial state for that right ?

#12

If you have that state in the database, then yes, you could do that

#13

will post a clean code as im done guys

1 Like