CODEWITHSUNDEEP
javascriptethereumweb3jsmetamask
Martin X
Martin X

Reputation: 1

injection - How user can pay custom value of ETH with metamask API?

  1. I want to give user possibility to choose his own value of Ether. How to do this?
  2. How efficiently change the network when pressing connect to metamask (for example when user will press this button metamask should change network to binance smart chain (ID 56)

here is my code:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    </head>
    <body>
        <div>
        <button class="enableEthereumButton btn">Enable Ethereum</button>
        <button class="sendEthButton btn">Send Eth</button>
        <div id="status"></div>
        </div>
        <script type="text/javascript">

        // Running on the page, in the browser
        if (typeof window.ethereum !== 'undefined') {
          console.log('MetaMask is installed!');
        }   
        if (!ethereum || !ethereum.isMetaMask) {
          throw new Error('Please install MetaMask.')
        }   
        /*********************************************************/
        /* Handle chain (network) and chainChanged, per EIP 1193 */
        /*********************************************************/

        // Do this:
        ethereum.on('chainChanged', (chainId) => {
          /* handle the chainId */
        });
        const ethereumButton = document.querySelector('.enableEthereumButton');
        const sendEthButton = document.querySelector('.sendEthButton');

        let accounts = [];

        //Sending Ethereum to an address
        sendEthButton.addEventListener('click', () => {
          ethereum
            .request({
              method: 'eth_sendTransaction',
              params: [
                {
                  from: accounts[0],
                  to: '0x6adress.................',
                  value: '0x00',
                  gasPrice: '0x0000001F6EA08600',
                  gas: '0x0001ADB0',
                },
              ],
            })
            .then((txHash) => console.log(txHash))
            .catch((error) => console.error);
        });

        ethereumButton.addEventListener('click', () => {
          getAccount();
        });

        async function getAccount() {
          accounts = await ethereum.request({ method: 'eth_requestAccounts' });
        }
        </script>
    </body>
</html>

Metamask screenshot

Upvotes: 0

Views: 907

Answers (1)

valem
valem

Reputation: 1880

Add an input field for the value and pass it in to your params. This is basic html form + javascript interactions, not specific to web3, so for more info on how to do that I would look here https://www.w3schools.com/html/html_forms.asp

To read the network the user is connecting with in your app you can listen for a chain change event: https://docs.metamask.io/guide/ethereum-provider.html#events

Then if they are not connected to a network your app supports you should show the user a notice.

Upvotes: 1

Related Questions