Category Archives: plugin

Example Sending coin via MetaMask

Posted on by

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.

tweb3mmexplore_v1.1.1Download

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.

The base WordPress plugin development environment

Posted on by

In order for you to play along, it’s important to be able to review and run what I’ve created. This involves being able to build and test code, or at least the ability to install and run it.

This will involve some work on your part, but if you’ve done any development, you’ll have an idea with regards to what you need to do when you understand it’s purpose.

Because this project is centered around using WordPress – by means of a plugin – the project is relatively contained. As you probably already know, plugins are the way you introduce 3rd party code to the WordPress environment. This allows for basic enhancements to your website without creating dependencies to core or theme-based code. They can be installed, activated, deactivated and uninstalled. Theoretically leaving no footprint after install.

Another nice thing about WordPress code is that it’s compiled and interpreted at runtime within the browser. This means that the files we’re going to modify are text based.

Also, most functionality can be developed in a local development environment and once tested, uploaded to your website. It’s rare that you actually dynamically build on a live website. That’s just bad form, but sometimes required.

What I use

Get yourself a hosting service that allows you to install WordPress in its raw form. You’ll need the ability to upload files to the actual WordPress directory on your hosting server. You’ll also need phpMyAdmin access to the associated database. After you install, take note of the \wp-content\plugins directory. That is where the plugin(s) will go.

The local development environment requires installing XAMPP Control Panel in order to have your development system provide localhost services. Basically, your system will simulate the server environment so you can test and run you plugin. The XAMPP environment is tightly integrated with phpMyAdmin. Like with the live internet hosted website, here, you’ll also need to use phpMyAdmin to manage your database.

Once you have the basic tools to simulate a server, you’ll need WordPress. Download the latest version. Now you’re going to need to install WordPress in a directory that XAMPP is expecting. Basically, when you run localhost\X in your browser, the XAMPP simulated server environment is going to capture the command and ‘run’ the X directory.

For this project, I have a directory labeled AmorStyle in the .\xampp\htdocs directory. Thus, I can run “localhost\amorstyle” in the browser of my development computer and my WordPress website is rendered in that local browser. When this happens, the ‘code’ is interpreted and run – allowing for debugging opportunities.

At this point, do what you can to run the same look & feel between your local website and the live server hosted site.

Modifying code

Because the plugin files are html, php, js and cs, you can use Notepad to modify the contents.

I use Visual Studio. Having an integrated development environment is not needed, but hard to work without. There are features build into development tools that are considered essential when doing real development work.

Running a plugin

As you investigate installing plugins, most plugins are installed from within WordPress itself. The backend admin pages of WordPress allow you to search and find official plugins that have been approved by the WordPress organization. In other words, they screen the plugins so they meet a relatively high standard (documented, tested, reviewed, etc). What you get here will be a little more raw.

As the project develops, I’ll probably revisit this post or blog about changes to my process. Some technologies will involve additional tools (or simulators) which will be called out as appropriate.

WP Plugin to Connect to MetaMask

Posted on by

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.

tweb3mmexplore_v1.0.7Download

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

Posted on by

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.

tweb2price_v1.0.1Download

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.18604

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.186 TFuel $0.105 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.