Example Sending coin via MetaMask

Here is an example of how to use Metamask to send some coin on the Theta network.

ChainId:
From:
BlockHeight:
Balance:

Amount of tfuel:
To:

Status:

Here is a downloadable ZIP file that contains the WordPress plugin code that integrates with Metamask.

This plugin installs just like any other WordPress plugin.

When you review the code, you’ll find a csendtobutton.js file that contains the class that handles the above shortcode.

Note that this is the next version of my tweb3mmexplore plugin. All the old functionality should continue to work as should this new ‘send’ functionality.

WP Plugin to Connect to MetaMask

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

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.

Theta Price Plugin

This plugin fetches the price of a number of common coins used in the Theta Network ecosystem as seen by ThetaScan.io. It allows the user to show the price in US dollar and determine the number of decimal places to display.

It is designed to be used as WordPress shortcode and the results can be seen in the header of this website.

This is also web2 type work. It is 100% dependent upon two servers remaining online.

The Work

The code is an automation for parsing the price functionality using the ThetaScan.io price API. See all their interfaces are documented at the following link.

http://thetascan.io/document/

To see what this plugin parses, place the following URL in your browser and press enter.

http://www.thetascan.io/api/price/

The response from ThetaScan.io looks like this.

{"date":"2022-05-30","theta_price":"1.2490799505828","tfuel_price":"0.06095157509396","VOLT_price":"0.020057886080295","BDOG_price":"0.0089963218653731","BNB.bsc_price":"18.980818840725","BUSD.bsc_price":"1.00","TDROP_price":"0.008536863397248","STABLE_price":"1.00","USDT_price":"1.00","TBILL_price":"1.1869637912051","USDC_price":"1.00","USDC.eth_price":"1.00","WETH_price":"366.21590730422","MTRG_price":"2.1180041814219","WTFUEL_price":"0.06095157509396"}

Note that this is JSON data which contains the current prices as seen by ThetaScan.io.

The shortcode in this plugin allows for parsing out any of the data items. The decimal point is considered a special character, thus if you parse out the date, there is no decimal, thus you get the entire date.

Limitations

In the documentation for using ThetaScan API, it says to limit the calls to no more than 1 or 2 per second and that there are two independent servers available to provide robustness to their reliability.

Also, when looking specifically at the price API, they state that they only update the price every 10 minutes. Thus, calling any more often than that would be overkill.

Implemented Solution

In order to not call ThetaScan.io any more than once every 10 minutes, the last call will be stored in the database with the timestamp of when the data was fetched. If an additional call is made by the website within that 10-minute window, the response will simply be read from the database rather than fetching it from ThetaScan.io.

In order to do this, the response will be stored in the WordPress database as a json string. In order to do that, this plugin has a module that interacts with the database. Upon activation and deactivation of the plugin, the database record will be created and removed so as to sandbox the information added.

To keep things simple with regards to the price, the user will be able to specify how many decimal places they want returned for the coin that they are interested in.

The Install

As with any WordPress plugin, unzip the file in the plugin directory.

After placing the file, you’ll need to activate it like you would any other plugin.

Usage

The current proof-of-concept code is a shortcode hook for extracting the data that you want from the ThetaScan.io response. It looks like:

2.15720

Tweb2price – this is the shortcode signifier which also matches the plugin name

Item – represents text item in response

Decimals – number of digits right of decimal, but it does not add to the response.

If item is not listed, the code will decode “theta_price”. If decimals is not listed, the default is 4.

Widget

On the right side of the header for that website, I’ve placed the following code in a text widget. As you can see, the shortcode simply returns the number to display. You can format it however you’d like. The following code is also shown just below.

<span style="color: #00ccff;">Theta</span> $[tweb2price decimals=3]
<span style="color: #ff9966;">TFuel</span> $[tweb2price item=tfuel_price decimals=3]
TDrop $[tweb2price item=TDROP_price decimals=3]
Theta $2.157 TFuel $0.104 TDrop $0.003

Code

The basic framework of the Plugin code came from https://wppb.me/. If you generate your own copy with the same plugin name, you’ll be able to compare the files to see where I made changes.

The bulk of the code is in class-tweb2price-shortcode.php and class-tweb2price-record.php. As the naming convention implies, the shortcode handling is separate from the database record & fetch.

Summary

This code is a really simple example of using WordPress’s wp_remote_get() function to call a server to get a response. It also demonstrates how to cache that information in the database in a sandboxed way so as to have a low impact on the WordPress environment.

The framework of this code could be modified to gather and parse out responses from other websites on the internet. If there is one that you’d like to see included in the default plugin, let me know.