MyETHMeta - Gravatar for Your Ethereum Account by@thebojda

MyETHMeta - Gravatar for Your Ethereum Account

image
Laszlo Fazekas HackerNoon profile picture

Laszlo Fazekas

Freelancer developer, ENVIENTA activist, blogger

Gravatar is the most widely used profile picture service. It is used by GitHub, WordPress, Disqus, and many other services. But Gravatar is not only a profile pic service. It can manage full user profiles based on portable contacts.

When I created my minimalistic decentralized Uber service, I used it for profile management. When I wrote that article, I wondered how difficult would be to create something like Gravatar for Ethereum accounts. After a long weekend, MyETHMeta has born, which is first introduced here in HackerNoon.🎉🎉🎉

MyETHMeta is a completely decentralized metadata service for Ethereum. Your profile picture and profile data are assigned to your Ethereum address instead of your e-mail address. The metadata assignment is managed by a smart contract on the Polygon chain. I choose Polygon because of the low gas fees. The metadata can be stored on any URL. The storage can be a centralized server or any decentralized storage like IPFS or Swarm. The metadata itself is a simple JSON file. It is based on PortableContacts (like Gravatar), but you can freely extend it by custom fields.

The theory was easy, but I had to implement some user-friendly stuff because, without a UI or a webpage, nobody will use it. So I registered a domain and picked up my usual toolset: Parcel, Bootstrap, and Vue.js and started to develop some web pages and docs for it.

The first step was the smart contract, which is very simple. You can simply set a URL for your Ethereum account. The authentication is done by the smart contract, so only the owner of the account can change the URL. The code looks like this:

contract MyEthMeta {
    mapping(address => string) private metaURIs;

    event MetaURIChanged(address indexed ethAddress, string uri);

    function setMetaURI(string memory uri) public {
        metaURIs[msg.sender] = uri;
        emit MetaURIChanged(msg.sender, uri);
    }

    function getMetaURI(address ethAddress)
        public
        view
        returns (string memory)
    {
        return metaURIs[ethAddress];
    }
}

As you can see, the smart contract is not owned by me or anybody else. Anybody can freely publish a URL, who pays the gas fee, which is about 2 cents on the Polygon chain.

After the smart contract deployment, I started to build a simple JavaScript library for reading the metadata. In the first round, I used web3.js and other standard tools, but the generated library was too fat. I took quick research, and I realized that calling Ethereum through JSON-RPC is not a big deal, so I started from the beginning and built a really slim library with zero dependencies. If you want to implement MyETHMeta into your next project, you can do it with some lines of JS code:

const client = new MyEthMetaClient()
const metadata = await client.getMetaData(eth_address)

image.src = metadata.thumbnailUrl // show profile picture

The next step was the metadata specification. It was relatively easy because I implemented a part of the PortableContacts specification. This is what is used by Gravatar, so I thought it will be also good for me. I defined a JSON schema and generated the TypeScript typings from it for the library. I have many plans for the schema extension in the future. I will write about them at the end of this article.

One of the biggest tasks was the development of the profile page. This is the UI of the service where anybody can set up his/her own profile without any deeper knowledge. I am not a frontend developer, so it won’t be the best UX or design of the year, but it is more or less usable. One of my plans is to improve the UI.

That’s all. The really short story of MyETHMeta. At the end of this article, let’s see some of my plans:

  • UI/UX improvements (obviously needed)
  • Validated data. Some digital signatures could be added to the JSON in EIP-191 format. Trusted validators could sign some data in the JSON (ex.: your Twitter account) to validate it.
  • More data. Adding some more personal data and using the previous validation method could help to develop more trusted services. For example, in a decentralized Uber, if you see the validated driving license number of your driver, you can trust him better.
  • NFT profile pictures. Guys are crazy with their NFT profile pictures, so why don’t we use it in MyETHMeta. Ownership can be easily validated because the data is assigned to the Ethereum account.

I hope you guys will love my little pet project. If you have an Ethereum address (you obviously have), let’s create a MyETHMeta profile. You have nothing to lose. The smart contract is public and cheap to use (about 2 cents in MATIC). Your metadata will be stored in YOUR pinata account. We don’t have any backend servers. The pages are static HTML that are hosted on AWS S3/CloudFront. Everything is open-source, so you can check it if you don’t believe me. You can find the GitHub repo here.

Keep in mind that MyETHMeta is in the beta stage, so any error report, feature request, and PR are really appreciated.


Welcome To The Web3 Writing Contest

Gravatar is the most widely used profile picture service. It is used by GitHub, WordPress, Disqus, and many other services. But Gravatar is not only a profile pic service. It can manage full user profiles based on portable contacts.

When I created my minimalistic decentralized Uber service, I used it for profile management. When I wrote that article, I wondered how difficult would be to create something like Gravatar for Ethereum accounts. After a long weekend, MyETHMeta has born, which is first introduced here in HackerNoon.🎉🎉🎉

MyETHMeta is a completely decentralized metadata service for Ethereum. Your profile picture and profile data are assigned to your Ethereum address instead of your e-mail address. The metadata assignment is managed by a smart contract on the Polygon chain. I choose Polygon because of the low gas fees. The metadata can be stored on any URL. The storage can be a centralized server or any decentralized storage like IPFS or Swarm. The metadata itself is a simple JSON file. It is based on PortableContacts (like Gravatar), but you can freely extend it by custom fields.

The theory was easy, but I had to implement some user-friendly stuff because, without a UI or a webpage, nobody will use it. So I registered a domain and picked up my usual toolset: Parcel, Bootstrap, and Vue.js and started to develop some web pages and docs for it.

The first step was the smart contract, which is very simple. You can simply set a URL for your Ethereum account. The authentication is done by the smart contract, so only the owner of the account can change the URL. The code looks like this:

contract MyEthMeta {
    mapping(address => string) private metaURIs;

    event MetaURIChanged(address indexed ethAddress, string uri);

    function setMetaURI(string memory uri) public {
        metaURIs[msg.sender] = uri;
        emit MetaURIChanged(msg.sender, uri);
    }

    function getMetaURI(address ethAddress)
        public
        view
        returns (string memory)
    {
        return metaURIs[ethAddress];
    }
}

As you can see, the smart contract is not owned by me or anybody else. Anybody can freely publish a URL, who pays the gas fee, which is about 2 cents on the Polygon chain.

After the smart contract deployment, I started to build a simple JavaScript library for reading the metadata. In the first round, I used web3.js and other standard tools, but the generated library was too fat. I took quick research, and I realized that calling Ethereum through JSON-RPC is not a big deal, so I started from the beginning and built a really slim library with zero dependencies. If you want to implement MyETHMeta into your next project, you can do it with some lines of JS code:

const client = new MyEthMetaClient()
const metadata = await client.getMetaData(eth_address)

image.src = metadata.thumbnailUrl // show profile picture

The next step was the metadata specification. It was relatively easy because I implemented a part of the PortableContacts specification. This is what is used by Gravatar, so I thought it will be also good for me. I defined a JSON schema and generated the TypeScript typings from it for the library. I have many plans for the schema extension in the future. I will write about them at the end of this article.

One of the biggest tasks was the development of the profile page. This is the UI of the service where anybody can set up his/her own profile without any deeper knowledge. I am not a frontend developer, so it won’t be the best UX or design of the year, but it is more or less usable. One of my plans is to improve the UI.

That’s all. The really short story of MyETHMeta. At the end of this article, let’s see some of my plans:

  • UI/UX improvements (obviously needed)
  • Validated data. Some digital signatures could be added to the JSON in EIP-191 format. Trusted validators could sign some data in the JSON (ex.: your Twitter account) to validate it.
  • More data. Adding some more personal data and using the previous validation method could help to develop more trusted services. For example, in a decentralized Uber, if you see the validated driving license number of your driver, you can trust him better.
  • NFT profile pictures. Guys are crazy with their NFT profile pictures, so why don’t we use it in MyETHMeta. Ownership can be easily validated because the data is assigned to the Ethereum account.

I hope you guys will love my little pet project. If you have an Ethereum address (you obviously have), let’s create a MyETHMeta profile. You have nothing to lose. The smart contract is public and cheap to use (about 2 cents in MATIC). Your metadata will be stored in YOUR pinata account. We don’t have any backend servers. The pages are static HTML that are hosted on AWS S3/CloudFront. Everything is open-source, so you can check it if you don’t believe me. You can find the GitHub repo here.

Keep in mind that MyETHMeta is in the beta stage, so any error report, feature request, and PR are really appreciated.

Comments

Signup or Login to Join the Discussion

Tags

Related Stories