soos3d/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Example webpage to interact with MetaMask

Here you have a very simple website that, when run, allows you to connect your MetaMAsk and interact.
Use it to learn what the different parameters are; and how MetaMask builds a transaction in JavaScript.
Deploy a Ropsten node on Chainstack and use it as an endpoint for your MetaMask. Follow this link for instructions, Chainstack on MetaMask.
This way, you will be able to see the requests sent from MetaMask to the node on the Chainstack dashboard.
How to run this webpage
To serve the webpage, you can use a simple node server. Follow these instructions:
1 - Install Node.js - Download and instructions.
2 - Install lite-server (with NPM in a terminal/command prompt).
npm install -g lite-server 

Now, you have the tools to serve a webpage on localhost.
  1 - Create a new folder where you will save and run this project.
  2 - Open the folder in a code editor, like Atom or VS Code.
  3 - Create a new file called index.html.
  4 - Paste the code from this Gist into the new file and save it.
  5 - Serve the webpage via terminal/command prompt from the directory that has index.html in it and run:
lite-server

Now, your webpage will be available on http://127.0.0.1:3000/.
Try to modify the parameters inside the sendTransaction() function to see how MetaMask reacts to the changes.
These are the parameters "out of the box":
let params = [{

   "from": accounts[0],
   "to": '0x8f8e7012F8F974707A8F11C7cfFC5d45EfF5c2Ae', 
   "value": '0xDE0B6B3A7640000', 
   //"gasPrice": '0x09184e72a000', 		
   //"gas": '0x2710',

Where:
"from": accounts[0], is the account that will send the transaction. In this case, the address selected in your MetaMask.
"to": '0x8f8e7012F8F974707A8F11C7cfFC5d45EfF5c2Ae', is the address receiving the transaction. Replace it with one of your addresses. You can keep this one if you want, but make sure you only send testnet funds!
"value": '0xDE0B6B3A7640000', is the amount of ETH transferred. In this case, 1 ETH. It must be hex encoded, starting with "0x".
"gasPrice": '0x09184e72a000' and "gas": '0x2710' are optional because MetaMask estimates the proper values from the network. You can try to modify them and see how they change the transaction validation!
Remember that the value passed into the function must be a Wei value encoded in hex, starting with "0x".
Use this website to convert to/from Wei.

Use this website to convert decimals to/from hex.

  
## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }

        div {
            width: 30%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        button {
            width: 40%;
            margin: 10px 0px 5px 0px;
            transform: translateX(+70%)
        }
    </style>
</head>

<body>
    <div>
        <h1>Build your MetaMask transaction!</h1>
        <label>Use a <a href="https://support.chainstack.com/hc/en-us/articles/360034636571-Using-MetaMask-Desktop-with-Chainstack" target="_blank">Chainstack node as a MetaMask endpoint</a>, and see what requests are sent to the node on the dashboard.</label> <br>
        <label>Click the button to connect MM to the website</label> <br>
        <button onclick="connect()">Connect Wallet</button><br>
        <label>Modify the parameters inside the "sendTransaction()" function, and try to send the transaction</label> <br>
        <button onclick="sendTransaction()">Send Transaction</button>
    </div>

    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript">
        // this allows accessing the ethers library without installing dependencies.
    </script>

    <script>
        // Identify the ethereum provider.
        const provider = new ethers.providers.Web3Provider(
            window.ethereum,
            "ropsten"
        );

        // Variables for identifying the accounts and connecting to the website.
        let signer;

        let accounts = [];

        // Identify the accounts and connect MetaMask to the website.
        async function connect() {

            accounts = await ethereum.request({
                method: 'eth_requestAccounts'
            });
            provider.send("eth_requestAccounts", []).then(() => {
                provider.listAccounts().then(function(accounts) {
                    signer = provider.getSigner(accounts[0]);
                });
            })
        };

        //Define the transaction's parameters and send it to MetaMask to be signed.
        async function sendTransaction() {

            let params = [{

                "from": accounts[0], // Sender address.
                "to": '0x8f8e7012F8F974707A8F11C7cfFC5d45EfF5c2Ae', // Receiver address.
                "value": '0xDE0B6B3A7640000', // Amount of ETH to send encoded as hex. 1 ETH in this case.
                //"gasPrice": '0x09184e72a000',
                //"gas": '0x2710',
            }];

            let result = await window.ethereum.request({
                    method: 'eth_sendTransaction',
                    params
                })
                .then((txHash) => console.log(txHash)) // See the transaction's hash in the console.
                .catch((err) => {
                    console.log(err)
                })

        };
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	body {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	}

	div {
	width: 30%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	}

	button {
	width: 40%;
	margin: 10px 0px 5px 0px;
	transform: translateX(+70%)
	}
	</style>
	</head>

	<body>
	<div>
	<h1>Build your MetaMask transaction!</h1>
	<label>Use a <a href="https://support.chainstack.com/hc/en-us/articles/360034636571-Using-MetaMask-Desktop-with-Chainstack" target="_blank">Chainstack node as a MetaMask endpoint</a>, and see what requests are sent to the node on the dashboard.</label> <br>
	<label>Click the button to connect MM to the website</label> <br>
	<button onclick="connect()">Connect Wallet</button><br>
	<label>Modify the parameters inside the "sendTransaction()" function, and try to send the transaction</label> <br>
	<button onclick="sendTransaction()">Send Transaction</button>
	</div>

	<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript">
	// this allows accessing the ethers library without installing dependencies.
	</script>

	<script>
	// Identify the ethereum provider.
	const provider = new ethers.providers.Web3Provider(
	window.ethereum,
	"ropsten"
	);

	// Variables for identifying the accounts and connecting to the website.
	let signer;

	let accounts = [];

	// Identify the accounts and connect MetaMask to the website.
	async function connect() {

	accounts = await ethereum.request({
	method: 'eth_requestAccounts'
	});
	provider.send("eth_requestAccounts", []).then(() => {
	provider.listAccounts().then(function(accounts) {
	signer = provider.getSigner(accounts[0]);
	});
	})
	};

	//Define the transaction's parameters and send it to MetaMask to be signed.
	async function sendTransaction() {

	let params = [{

	"from": accounts[0], // Sender address.
	"to": '0x8f8e7012F8F974707A8F11C7cfFC5d45EfF5c2Ae', // Receiver address.
	"value": '0xDE0B6B3A7640000', // Amount of ETH to send encoded as hex. 1 ETH in this case.
	//"gasPrice": '0x09184e72a000',
	//"gas": '0x2710',
	}];

	let result = await window.ethereum.request({
	method: 'eth_sendTransaction',
	params
	})
	.then((txHash) => console.log(txHash)) // See the transaction's hash in the console.
	.catch((err) => {
	console.log(err)
	})

	};
	</script>
	</body>

	</html>