As you might have noticed, this website now has the ability to connect to MetaMask. That functionality is implemented within a WordPress plugin that I provide the download link to below.
At this point, the plugin demonstrates two different functionalities.
- The ability to dynamically connect to MetaMask, and
- How to Sign a transaction.
The connect functionality is demonstrated via the button on the top right part of the website. Feel free to give that a try.
The Signing functionality is demonstrated here:
Sign Typed Data V4
Result:
Note that the phrase “Describe what’s being signed here” and the secret is placed in the page HTML by the server, thus it can be custom designed.
Why MetaMask?
MetaMask is a 3rd party crypto wallet application that empowers the users of a smart contract based blockchain to interact with websites in new and unique ways. Users create accounts in MetaMask and then link in MetaMask friendly websites. The linked website as the ability to ask for information from the wallet to allow interactions on the blockchain without the website needing to know anything about the user’s private keys.
When a website is ‘connected’ to MetaMask, the user is effectively ‘white listing’ the website with regards to it’s public address and balance.
When a connected website asks for something to be signed, the website calls MetaMask with the information to be signed and awaits the signature. Signatures can only be generated by wallets for it requires the knowledge of private keys. Thus, the website can get proof that you are the owner of a public address by asking for a signature.
Please note that it’s good practice to keep little or no crypto in the MetaMask wallet that you connect to random websites. Yes, any interaction that occurs from the website to MetaMask will require your response to complete, but common sense would say to reduce your risks by only keeping what is needed on that wallet.
About the Code
As with the other plugins that I create and share, this one is built off a template generated from https://wppb.me/. If you generate your own copy using my tag strings, you’ll be able to see the lines/files of code that I added.
One thing that I would really like to point out is that when I went looking for samples that would provide the ‘connect’ functionality, the sample plugins typically included dozens of additional add-in files or libraries that seemed overly complex to me. My coding philosophy is, if you don’t intellectually understand the code, you’re dependent upon some other person to make forward progress. Thus, I’ve made it a point to reduce the sample down to what is functionally needed.
A word of caution here, this is my first JavaScript code example. In the process of trying to figure out how to debug and use the MetaMask sample code, I ended up reading through the JavaScript manual online in order to get the higher-level understandings upon which I built upon.
Out of this, one of the more important features empowered by coders is the ability to use libraries or incorporate classes that have been created from other projects. Thus here, you’ll see I import code from ‘modules’.
The Plugin
Here is a downloadable link to the WordPress plugin.
Please read through the code before using to make sure you understand what’s going on. If you have feedback, please let me know.