TNS names not fully functional – yet

Ok, note the day that I posted this info. If you’re visiting from the future, I’m hoping that some of this info will be out of date. Let me know, and I’ll edit it out.

Since a couple hackathons ago, we’ve all been waiting for the Theta Name Service (TNS) to go live. The promise is that by linking your wallet address to a name, people can easily locate you in order to interact with your wallet. And, we all know that this work came out of ThetaBoard.io. Thus, you’ll want to keep that site on the radar.

And, I have but the code is still in alpha. That’s a proof-of-concept phase. Because TNS associations had been sold into the public, I was expecting that the code was in beta, which is the testing phase just before release. Thus, I’ll save you a lot of reading, I found that some things seem to work, but the end-to-end solution that I was looking for is not there.

Yet.

Here’s the backstory

Last month I had the idea that I would be creating this website. Knowing that people don’t work well with 40-digit numbers, the obvious solution would be a TNS name. So, I bought AmorStyle.Theta. Having seen TNS resolved names in the official Theta explorer, I set out to integrate this functionality into the website.

I knew that I wanted a dedicated account for any coin flow through this address, so I created another account through the official website. Naively, I figured I could just send the TNS I purchased to this new address and it would resolve. The TheteBoard.io website made it easy to do this, thus I sent it over. Then I tried to give the address to ThetaBoard.io so that it could make the assignment for me, and there was no way to do that. ThetaBoard.io would only act to set it to the account held by MetaMask.

I immediately search to see if MetaMask handles multiple accounts. It does. I created another account and that didn’t work. Turns out, there is an import functionality that I was able to work through which allowed me to assign my newly created wallet with MetaMask by using the keystore file.

After doing that, I had the account that was holding the TNS name registered with MetaMask so I connected that new account with ThetaBoard.io and the object was recognized so I could perform the assignment.

Feeling bold, I clicked the assign button. It notified me that there would be three MetaMask operations, which I worked through. After the first one came along, I clicked the completion notification from MetaMask to view the wallet activity in the explorer. After the third notification, my address in the explorer resolved to AmorStyle.Theta.

Success!

ThetaBoard.io didn’t seem to get that last completion and continued to spin as if it was working. After about 10 minutes, I refreshed the page to see that the assignment looked to have completed successfully.

The last thing that I needed to do was send some coin using this TNS name. Thus, opened my official Theta wallet, clicked to “Send” coin and placed AmorStyle.Theta in the “To” control. It wouldn’t resolve.

I looked over the ThetaBoard.io page to see if there was any place there that would resolve it for me.

Nothing.

Wrap up

Turns out that it’s just proof-of-concept code. Official TNS names should never have been sold into the public, they should have been ‘test’ names. In other words, this functionality should have been proven on the test net to make sure there was an end-to-end solution before rolling it out to the public. Particularly to someone like myself that would publicly critic it.

Going through this attempt at integrating a TNS name pointed out that I’m probably going to need a bit more information in order to really integrate this into any project. Specifically, a spec that shows how I need to interface to this service. I had thought that if I modified the “To” address in a Send Transaction to the network, the network would simply resolve that TNS name for me into the address. Well, that’s not the experience today.

What do I need to move forward? I need to see a roadmap outlining who and what the service really is, where the dependencies are and what happens if wallets don’t use the service.

TNS names are a cool idea, but still too early to use.

The base WordPress plugin development environment

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

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:

1.58052

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 $1.580 TFuel $0.074 TDrop $0.002

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.

Rebooting the Website

Every once in a while, when it comes to hosting websites, configurations get messed up and the process of debugging takes more time than simply restarting another website.

So, here we are with another website.

Let the journey continue!