Write contract - web3 - interact web site - Moralis.executeFunction - api / abi

Moralis General
#1

Good day!
I need help with the issue of integrating a smart contract with a website.
I have deployed a smart contract on the BSC network:
testnet.bscscan – /address/0xec08f00fe90fcf5e205b45ac067f22c6f0e0854b#writeContract
How do I interact with the write contract section?
I want to make a site and display forms on it so that they are synchronized with Web3 (metamask) and then I can fill in the form fields and this goes into a ready-made smart contract from my site?

#2

can you paste/write in English?

1 Like
#3

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2022-05-19 Π² 21.13.28
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2022-05-19 Π² 21.13.281442Γ—706 117 KB
Uploading: Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2022-05-19 Π² 21.13.28.png…

#4

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2022-05-19 Π² 21.13.15
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2022-05-19 Π² 21.13.151452Γ—1164 179 KB
Uploading: Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2022-05-19 Π² 21.13.15.png…

#5

I made a frontend and connected it to the input with a metamask through the moralis service. I found a video, but there is only a button to donate:
https://www.youtube/watch?v=7TKqLJd_aYI&t=307s

I want to do the same but fill in the fields unfortunately I’m not good at programming, but I think I can handle it

#6 
HTML

<main class="col-md-9 ms-sm-4 col-lg-10 px-md-4">
  </div>
  <p>
  <h2>Deposit</h2>
  <div id="tableOfDeposit" class="table-responsive">
    <h1 class="h6 mb-6 fw-normal">Send BNB and get 0.6% every day!</h1>
    </p>
    <p>
    <div class="form-floating">

      <input type="text" class="form-control" id="Amount-Payable" placeholder="Amount-Payable">
      <label for="Amount-Payable">
        <spann>*</spann>BNB Amount Payable (Min 0.1 BNB)
      </label>
    </div>
    </p>
    <p>
    <div class="form-floating">

      <input type="Upline-Address" class="form-control" id="Uplline-Address" placeholder="Upline-Address">
      <label for="Upline-Address">
        <spann>*</spann>Uplline Adress Ref Partners (0x0123456789...Abс)
      </label>
    </div>
    </p>

    <button id="transfer-native" class="w-100 btn btn-lg btn-primary" type="submit">Send BNB and create a deposit</button>
  </div>
  <p>
  <h2>Withdraw</h2>
  <div id="tableOfWithdraw" class="table-responsive">
    <h1 class="h6 mb-6 fw-normal">Withdraw interest in BNB every 24 hours!</h1>
  </div>
  </p>

  <button id="btn-withdraw" class="w-100 btn btn-lg btn-primary" type="submit">Withdraw interest in BNB</button>
  </div>
  <p>
#7 
ABI
{
    "inputs": [
        {
            "internalType": "address",
            "name": "_upline",
            "type": "address"
        }
    ],
    "name": "deposit",
    "outputs": [],
    "stateMutability": "payable",
    "type": "function"
},

{
    "inputs": [],
    "name": "withdraw",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
},
#8 
MAIN.JS
logout = async () => {
    await Moralis.User.logOut();
    window.location.href = "indexx.html";
}
if (document.querySelector('#btn-logout') != null) {
    document.querySelector('#btn-logout').onclick = logout;
}
// Π€ΠΎΡ€ΠΌΠ° ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Π² смарт ΠΊΠΎΠ½Ρ‚Ρ€Π°ΠΊΡ‚ 
async function transferNative() {
    const amount = document.getElementById('Amount-Payable').value;
    const address = document.getElementById('Uplline-Address').value;
    // sending 0.1 tokens with 18 decimals to smart contract 0xEc08f00FE90fcf5e205b45Ac067f22C6F0e0854B
const options = {
    type: "erc20",
    amount: Moralis.Units.BNB(amount),
    receiver: "0x..",
    contractAddress: "0xEc08f00FE90fcf5e205b45Ac067f22C6F0e0854B",
  };
  let result = await Moralis.transfer(options);
}
document.getElementById('#transfer-native').onclick = logout;
#9

By and large I need help to properly integrate the form with the: abi, main, html. in order to fill in the fields on the site and submit the request

#10

you can find here example in documentation on how to use Moralis.executeFunction:
https://docs.moralis.io/moralis-dapp/web3/web3#executefunction

#11

I want to make it so that from the form on the site I take data from field 1 (send bnb)
and fields 2 (send the address of the inviter)
on the button (Send BNB)
how can i write it in this code?

const options = {
  contractAddress: "0xe...56",
  functionName: "swapNativeForTokens",
  abi: ABI,
  msgValue: Moralis.Units.ETH("0.1"),
};

const transaction = await Moralis.executeFunction(options);
const receipt = await transaction.wait();
console.log(receipt);

Is it possible?

#12

I checked some YouTube videos
but didn’t find anything like what i need

https://www.youtube.com/watch?v=7TKqLJd_aYI

https://www.youtube.com/watch?v=jUpyJhnXRFE

https://www.youtube.com/watch?v=djRxq7Q7xBk

everything is complicated by the fact that the logic of the smart contract does not allow accepting sent (BNB without specifying the amount) and (ref of the BNB address of the inviter)

(https://testnet.bscscan.com/address/0xec08f00fe90fcf5e205b45ac067f22c6f0e0854b#writeContract)

#13

it is possible to call a function with Moralis.executeFunction, it seems that you are close

what doesn’t work?

#14

I’ve uploaded the files to the archive below, the items I can’t link

indexx.html - line 121
main.js - line 31

https://drive.google.com/file/d/1_HWImQt_gsd39hek88IrrZm35AHRc9Zq/view?usp=sharing

I am trying to complete:
1 - collection of data with the amount and address in the send button to the smart contact
2 - output block from the smart contract

I need to see how to make it right

#15

try only to run Moralis.executeFunction in your browser console, in vanilla js should work directly
you can test it until you make it work

#16

I understand how to watch errors through the browser, but I would like to see a video instruction on how to interact with (web3executefunction)
I looked at the github morality but also did not find anything similar
and started working on my project after watching this video, but I realized that sending directly will not work
https://www.youtube.com/watch?v=MY4WYoZPr-U&t=5615s - recording a smart contract for 1.55 minutes.

in general i need any example how to setup web3executefunction

#17

Probably you already saw this:

You can also use directly Moralis.executeFunction in react:
https://docs.moralis.io/moralis-dapp/web3/web3#executefunction

#18

You can look into this too https://youtu.be/7TKqLJd_aYI

#19

Yes, thanks, I started doing according to your video from 3 minutes but changed to ExecuteFunction
I think I correctly compiled the deposit function from smart contract and ABI: https://testnet.bscscan.com/address/0xec08f00fe90fcf5e205b45ac067f22c6f0e0854b#code

async function transferNative() {
    const amount = document.getElementById('#Amount-Payable').value;
    const address = document.getElementById('#Uplline-Address').value;
const ABI = [
    {
        "inputs": [
            {
                "internalType": "address",
                "name": "_upline",
                "type": "address"
            }
        ],
        "name": "deposit",
        "outputs": [],
        "stateMutability": "payable",
        "type": "function"
    },
    
    {
        "inputs": [],
        "name": "withdraw",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
  ];
  const sendOptions = {
    contractAddress: "0xEc08f00FE90fcf5e205b45Ac067f22C6F0e0854B",
    functionName: "deposit",
    abi: ABI,
    params: {
        _upline: "#Uplline_Address", 
    },
    msgValue: "#Amount_Payble"
  };
  await Moralis.executeFunction(sendOptions);
}

document.getElementById('#transfer-native').onclick = transferNative;
#20 

async function Withdraw() {
const ABI = [
    {
        "inputs": [],
        "name": "withdraw",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
  ];
  const sendOptions = {
    contractAddress: "0xEc08f00FE90fcf5e205b45Ac067f22C6F0e0854B",
    functionName: "withdraw",
    abi: ABI,
    params: {
        , ????
    },
  };
  await Moralis.executeFunction(sendOptions);
}

document.getElementById('#withdraw').onclick = Withdraw;