Metamask Integration - All related conversations

[zubin-madon]

Discussed in https://github.com/zubin-madon/NFTrees/discussions/22

^{Originally posted by **zubin-madon** September 16, 2021} I've successfully added the Metamask Connect Button. Now to make the button functioning, I created a contract.js file inside the template folder. In templates/index.html file, I added `` in the body. I guess I'm doing something wrong because my button doesn't work. Should I be integrating this using FastAPI? The contract.js code is as below: ``/*global ethereum, MetamaskOnboarding */ /* The `piggybankContract` is compiled from: pragma solidity ^0.4.0; contract PiggyBank { uint private balance; address public owner; function PiggyBank() public { owner = msg.sender; balance = 0; } function deposit() public payable returns (uint) { balance += msg.value; return balance; } function withdraw(uint withdrawAmount) public returns (uint remainingBal) { require(msg.sender == owner); balance -= withdrawAmount; msg.sender.transfer(withdrawAmount); return balance; } } */ const forwarderOrigin = 'http://localhost:8000' const initialize = () => { //Basic Actions Section const onboardButton = document.getElementById('connectButton'); //Created check function to see if the MetaMask extension is installed const isMetaMaskInstalled = () => { //Have to check the ethereum binding on the window object to see if it's installed const { ethereum } = window; return Boolean(ethereum && ethereum.isMetaMask); }; //We create a new MetaMask onboarding object to use in our app const onboarding = new MetaMaskOnboarding({ forwarderOrigin }); //This will start the onboarding proccess const onClickInstall = () => { onboardButton.innerText = 'Onboarding in progress'; onboardButton.disabled = true; //On this object we have startOnboarding which will start the onboarding process for our end user onboarding.startOnboarding(); }; const onClickConnect = async () => { try { // Will open the MetaMask UI // You should disable this button while the request is pending! await ethereum.request({ method: 'eth_requestAccounts' }); } catch (error) { console.error(error); } }; //------Inserted Code------\\ const MetaMaskClientCheck = () => { //Now we check to see if Metmask is installed if (!isMetaMaskInstalled()) { //If it isn't installed we ask the user to click to install it onboardButton.innerText = 'Click here to install MetaMask!'; //When the button is clicked we call th is function onboardButton.onclick = onClickInstall; //The button is now disabled onboardButton.disabled = false; } else { //If MetaMask is installed we ask the user to connect to their wallet onboardButton.innerText = 'Connect'; //When the button is clicked we call this function to connect the users MetaMask Wallet onboardButton.onclick = onClickConnect; //The button is now disabled onboardButton.disabled = false; } }; MetaMaskClientCheck(); //------/Inserted Code------\\ }; window.addEventListener('DOMContentLoaded', initialize)

``

[JennaSys]

I'm 90% sure that the templates folder isn't getting used at all at this point and we should probably remove the folder entirely (we're not using any templating libraries anyway).

fastapi is set up to use the /src/static/ folder for static files https://github.com/zubin-madon/NFTrees/blob/7f218e144c398a871f52bc9cf617c361f29ef5a3/src/nft_server.py#L11

If you move the JS file to that folder, I think you should then be able to use this for the import: <script src="/static/contract.js" defer></script>

[JennaSys]

I think I'm missing the big picture here. What is the purpose of MetaMask in the context of the application as a whole?

Does it need to run client side or should it be on the server side? If client side - it requires a browser plugin in order to work (might be a big "ask" of the user to install)? If server side, can't it use Python instead of JavaScript?

[zubin-madon]

I'm thoroughly confused between the static and templates folder. Now I deleted index.html from TEMPLATES folder and transferred contract.js to static. Soon as I launched FastAPI and accessed http://localhost:8000 from browser, a new index.html was auto created in templates. I am going to try making an html and js file for metamask in VS Code, and make it functioning. After that I will translate to our project. Right now everything is such a mess I'm thoroughly confused.