Forem: jonyx

First P2E game on Tableland (2)

jonyx — Sun, 12 Feb 2023 13:34:51 +0000

It's been a while since I posted a blog about the first P2E game on Tableland, in order to give you an idea about how to manipulate metadata on-chain, just like normal relational database manipulation.

Previously, I talked about the databases on Tableland for Kart and Asset collections, how to create tables on the Tableland, and how to return URI based on that.
If you missed the previous one, please check it before you move forward.
https://dev.to/ponyjackal/first-p2e-game-on-tableland-1-2p8p

Today, I will deep dive into AutobodyShop contract, where you will eventually apply many assets to the kart, which leads to metadata updates on the Kart collection.

So we have the applyAssets function which will take assets data for the kart, and update the metadata table on Tableland for the kart.

It will be easy since we will just fetch assets metadata, and update the kart table.

But here is the thing, we are not able to get results from tableland on-chain, we can only do that off-chain.
Furthermore, our assets have multiple attributes, do you remember?
This means, we have to do some sub-queries, which is also not possible in the current tableland.

So I ended up using the hybrid method, we will fetch the results from the assets table and do some sub-queries to finalize the attributes we will apply to the kart off-chain, which is node js api.
Once user hits apply assets button on UI, it will hit this api, not the smart contract function directly, and from that api, we make some voucher which contains (BE signature, query strings to run on tableland tables), call the smart contract on UI.

Hope you will find it easy to understand, or this blog will help you.
https://dev.to/ponyjackal/signature-verification-on-hybrid-method-2349

Here is the voucher for applyAssets function on Autobodyshop.

struct AutoBodyShopVoucher {
    address owner;
    uint256 kartId;
    uint256[] assetIds;
    string resetQuery;
    string applyQuery;
    string updateImageQuery;
    uint256 nonce;
    uint256 expiry;
    bytes signature;
}

Now that I'd love to share applyAssets function.

  /**
   * @dev Apply assets attributes to a kart
   * @param _voucher The AutoBodyShopVoucher
   */
  function applyAssets(AutoBodyShopVoucher calldata _voucher) external nonContract nonReentrant {
    address signer = _verify(_voucher);
    require(signer == gameServer && msg.sender == _voucher.owner, "AutoBodyShop: invalid call");
    require(_voucher.nonce == nonces[_voucher.owner], "AutoBodyShop: invalid nonce");
    require(_voucher.expiry == 0 || block.timestamp <= _voucher.expiry, "AutoBodyShop: signature is expired");
    require(kittyKartGoKart.ownerOf(_voucher.kartId) == msg.sender, "AutoBodyShop: not a kart owner");

    nonces[_voucher.owner]++;
    for (uint256 i = 0; i < _voucher.assetIds.length; i++) {
      require(kittyKartAsset.ownerOf(_voucher.assetIds[i]) == msg.sender, "AutoBodyShop: not an asset owner");
      kittyKartAsset.safeTransferFrom(msg.sender, address(this), _voucher.assetIds[i]);
    }

    // update in_use for previously applied asset
    tableland.runSQL(address(this), kittyKartAssetAttributeTableId, _voucher.resetQuery);
    // set kart_id in asset attribute table
    tableland.runSQL(address(this), kittyKartAssetAttributeTableId, _voucher.applyQuery);
    // update image url for kart
    tableland.runSQL(address(this), kittyKartGoKartTableId, _voucher.updateImageQuery);

    emit ApplyAssets(_voucher.kartId, _voucher.assetIds);
  }

Looks pretty much straight forward, doesn't it?

First there are some validation checks including ownership and voucher.
And then transfer assets to Autobodyshop contract,

Finally, update tableland tables,

Note that we need 3 things to update.

update in_use column in asset table
update kart_id column in asset table
update image_url column in kart table

Oh, did I tell you about tableland write permissions?

Okay, no worries, let me explain now.

Each tableland table has privileges so that onlyowners can write into the table, though it's public to read.
And table owner here is the table creator obivously, in our case, for assets table, owner is Asset contract, for kart table, owner is Kart contract.
For more details, https://docs.tableland.xyz/table-writes-updates

As you notice, we are going to update assets and kart tables on Autobodyshop contract, which is not the owner.
In order to make this work, we have to grant write permission to Autobodyshop contract, and only owner of the table can do this.

That's why we have grantAccess and revokeAccess functions in Kart and Asset contracts.

 /**
   * @dev Grant access of table to EOA
   * @param _to The address to grant access
   */
  function grantAccess(address _to) external onlyOwner {
    require(metadataTableId != 0, "KittyKartGoKart: table is not created yet");
    tableland.runSQL(
      address(this),
      metadataTableId,
      string.concat(
        "GRANT INSERT, UPDATE, DELETE ON ",
        metadataTable,
        " TO ",
        "'",
        StringsUpgradeable.toHexString(_to),
        "'",
        ";"
      )
    );
    emit AccessGranted(_to);
  }

  /**
   * @dev Revoke access of table to EOA
   * @param _to The address to grant access
   */
  function revokeAccess(address _to) external onlyOwner {
    require(metadataTableId != 0, "KittyKartGoKart: table is not created yet");
    tableland.runSQL(
      address(this),
      metadataTableId,
      string.concat(
        "REVOKE INSERT, UPDATE, DELETE ON ",
        metadataTable,
        " FROM ",
        "'",
        StringsUpgradeable.toHexString(_to),
        "'",
        ";"
      )
    );
    emit AccessRevoked(_to);
  }

Once the write permission is granted to the Autobodyshop contract, we are able to run SQL queries to update assets and the kart table on Autobodyshop contract.

Damn, I think I went through all the things you need to get familiar with the app.

Here are 2 things I want to emphasize, that shaped our current design.

There is no way to get query results on-chain
For now, it's not possible to run sub-queries in the tableland

As you know, it will give a sense of building on-chain metadata in NFT space with tableland.

Hope you enjoyed this,
Thanks

First P2E game on Tableland (1)

jonyx — Sun, 27 Nov 2022 14:04:39 +0000

We say that blockchain is a distributed ledger as we think of it as a decentralized database.
And there are many decentralized apps on top of it.

And we all know that it is not always easy to query data from the blockchain and that's where many database layer services like The Graph come into play.

But there are still inefficiencies in terms of performance and latency.
And that's why we sometimes in the need of own indexer for nft collections.

Today, I'd like to introudce Tableland Network, a decentralized web3 protocol for structured relational data, starting with Ethereum (EVM) and EVM-compatible L2s.
https://docs.tableland.xyz/what-is-tableland

The first time, I checked their doc, I was so excited about this one since it will just make developers' lives way easier.

Simply they have their own relational database and then mint NFTs representing privileges to the tables.
And again its accessible from both on-chain and off-chain.

You can check the first nft collection storing metadata on tableland tables.
https://opensea.io/collection/tableland-rigs

Of all the advantages Tableland will bring, I think the fact that it lets us build dynamic metadata would be the one we have to consider first.

Okay, I know that you can walk through all the technical details and some approaches yourself from the doc above.
So I will remain lots of things on you and skip to the P2E game I built on top of the tableland, pretty assume that this will attract you since it's the very first approach yet.

What I was trying to build for KittyKart
(https://kittyinu.com/

https://twitter.com/KittyKartRacing?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor

https://playtoearn.net/blockchaingame/kittykart)

NFT collections (Kart, Assets) There are 2 NFT collections, Kart and Asset. Kart is the automotive in the game which you will use to race others, and assets are the part of Kart. You can replace any assets you want in your kart for the better performance of the kart. FYI, assets can hold several traits, for example, you can think of an asset

{
    "engine": "v8",
    "color": "violet"
}

Autobody shop It's the place where users can apply various assets to the Kart, Technically once one asset is applied to the kart, the metadata of the kart will be updated accordingly.

First and foremost, we have to design the tables for nft collections, and create tables on smart contracts. (FYI, table creator will have admin privilege of that table, in our case smart contracts)

Here are the code piece for creating tables.

/**
   * @dev create table in TableLand
   * @param _registry The registry address
   */
  function createMetadataTable(address _registry) external payable onlyOwner returns (uint256) {
    /*
     * registry if the address of the Tableland registry. You can always find those
     * here https://github.com/tablelandnetwork/evm-tableland#currently-supported-chains
     */
    tableland = ITablelandTables(_registry);

    metadataTableId = tableland.createTable(
      address(this),
      /*
       *  CREATE TABLE prefix_chainId (
       *    int id,
       *    string name,
       *    string description,
       *    string image,
       *    string background_color,
       *    string external_url,
       *    string animation_url,
       *    string owner,
       *  );
       */
      string.concat(
        "CREATE TABLE ",
        tablePrefix,
        "_",
        StringsUpgradeable.toString(block.chainid),
        " (id int, name text, description text, image text, background_color text, external_url text, animation_url text, owner text);"
      )
    );

    metadataTable = string.concat(
      tablePrefix,
      "_",
      StringsUpgradeable.toString(block.chainid),
      "_",
      StringsUpgradeable.toString(metadataTableId)
    );

    emit CreateMetadataTable(metadataTable, metadataTableId);

    return metadataTableId;
  }

Now it's time to build tokenURI for public access to metadata. (again tableland tables are accessible by public off-chain)

/**
   * @dev tokenURI is an example of how to turn a row in your table back into
   * erc721 compliant metadata JSON. Here, we do a simple SELECT statement
   * with function that converts the result into json.
   */
  function tokenURI(uint256 _tokenId) public view virtual override returns (string memory) {
    require(_exists(_tokenId), "KittyKartGoKart: URI query for nonexistent token");
    string memory base = _baseURI();

    return
      string.concat(
        base,
        "SELECT%20json_object(%27id%27,id,%27name%27,name,%27description%27,description",
        ",%27image%27,image,%27background_color%27,background_color,%27external_url%27,external_url,%27animation_url%27,animation_url",
        ",%27attributes%27,json_group_array(json_object(%27display_type%27,display_type",
        ",%27trait_type%27,trait_type,%27value%27,value)))",
        "%20FROM%20",
        metadataTable,
        "%20LEFT%20JOIN%20",
        assetAttributeTable,
        "%20ON%20(",
        metadataTable,
        ".id=",
        assetAttributeTable,
        ".kart_id%20AND%20",
        assetAttributeTable,
        ".in_use=1)",
        "%20WHERE%20id=",
        StringsUpgradeable.toString(_tokenId),
        "%20GROUP%20BY%20id",
        "&mode=list"
      );
  }

This is the basic example of token URI.

https://testnet.tableland.network/query?s=SELECT%20json_object(%27id%27,id,%27name%27,name,%27description%27,description,%27image%27,image,%27external_url%27,external_url,%27animation_url%27,animation_url,%27attributes%27,json_group_array(json_object(%27display_type%27,display_type,%27trait_type%27,trait_type,%27value%27,value)))%20FROM%20kitty_kart_test_5_700%20LEFT%20JOIN%20kitty_asset_test_attribute_5_702%20ON%20(kitty_kart_test_5_700.id=kitty_asset_test_attribute_5_702.kart_id%20AND%20kitty_asset_test_attribute_5_702.in_use=1)%20WHERE%20id=1%20GROUP%20BY%20id&mode=list

You will ask how to mint NFT and insert metadata into the tableland tables.
No worries, I have this to show you.

  /**
   * @dev Its free mint for test
   * @param _quantity The quantity value to mint
   */
  function publicMint(uint256 _quantity) external nonContract nonReentrant {
    uint256 tokenId = _nextTokenId();
    for (uint256 i = 0; i < _quantity; i++) {
      tableland.runSQL(
        address(this),
        metadataTableId,
        string.concat(
          "INSERT INTO ",
          metadataTable,
          " (id, name, description, image, external_url, animation_url) VALUES (",
          StringsUpgradeable.toString(tokenId + i),
          ", '#",
          StringsUpgradeable.toString(tokenId + i),
          "', '",
          description,
          "', '",
          defaultImage,
          "', '",
          externalURL,
          "', '",
          defaultAnimationURL,
          "');"
        )
      );
    }
    _mint(msg.sender, _quantity);

    emit Mint(msg.sender, _quantity);
  }

Now you will be clear about how to play with tableland tables, and yes it is almost the same as normal interaction with relational databases with SQL queries.
One exception here is tableland can't accept sub queries, which is a barrier of tabeland adaption in cases, but this shouldn't be a blocker.

time to move on to autobody shop?

You will have a basic idea of it, since you are very familiar with database manipulations,
and you are right, it is all about updating existing kart metadata on the tableland.

but how?

Am going to leave you alone to think about this. (heading to Khalifa International Stadium for Canada vs Croatia match)

See you next time.

Signature verification on hybrid method

jonyx — Sun, 30 Oct 2022 13:52:34 +0000

It's true that hybrid approach in the design of web3 applications can not be ignored.
While on chain smart contracts are great to verify things as a single source of truth, it is not so great for data manipulation.

That's where hybrid comes into play.

We normally make some calculations off chain on top of synced database with on chain storages, and then reflect the result onto smart contracts as soon as we make sure that it's valid.

And yet, this validation is not that easy and this is the most vulnerable point in whole application, cause malicious actors can always try to pretend to be a valid user.

Of course there is a number of approaches for this, as you know, the most well-knowns are Merkle proof and signature verification.

Today, I am going to deep dive into signature verification in hybrid applications.
I will more focus on the overall architecture rather that how we use signature verification.

If you are not familiar with signature and EIP712, you'd better first go through it,
https://nftschool.dev/tutorial/lazy-minting/

Here is the basic diagram below about the flow.

As you can see there are 3 steps to go in terms of frontend application, I think it will make you more sense to overview this in frontend's perspective since it is actually the entry point for the users to the application.

Step1, once user triggers actions on the frontend, it will require to sign a message.
And then it will make an API request to backend in order to get signature singed by private wallet.

Example requests body would be like this

{
    ...
    userAddress: string,
    userSignature: string,
}

When it comes to request body, it will vary depends on the actions user made and the application you are building.
For instance, it would include collection address, token id, price in case user is trying to list his NFT on the marketplace.

Step 2, Once frontend gets signature from the backend side, now it's time to make a transaction, here just for your note, user is actually making a transaction through UI.

The very basic voucher struct would be something like this

{
    user: address;
    ...
    nonce: uint256;
    expiry: uint256
    signature: bytes;
}

In smart contract, there must be some validations about signature, like if the signature is signed by the private wallet, user is matched to transaction sender, nonce is correct, and finally voucher is not expired by checking expiry.
You are free to add more validations for your specific needs.

FYI, it's obvious to make an update on signatures mapping and nonce once signature is valid and you are about to proceed your update on states.

mapping(address => uint256) public nonces;
mapping(bytes => bool) public signatures;

nonces[_voucher.user]++;
signatures[_voucher.signature] = true;

Step3. There must be a result from the transaction, right? whether it's succeed or reverted.
Only if transaction is succeed and state variables are updated on chain, we are now ready to update a database in order to sync with on chain.

You will call the API for this with request body includes

{
    ...
    userSignature: string, // signature by user
    txSignature: string, // signature by private wallet
}

For this, you have to validate if transaction is succeed and states are updated, it might be a good way to check signature mapping if txSingature is valid or not.

and you might want to do some updates on your DB and then return the result to the user.

Finally the user will get the result of his action on UI.

Thanks for your attention, I tried to make this as short as possible but at the same time, I tried to give you more sense.))

I am going to walk through tableland implementation for dynamic metadata which is the must-solve thing in P2E games.
https://docs.tableland.xyz/

So stay tuned.

What would be the best choice later on?

jonyx — Sun, 05 Apr 2020 00:34:34 +0000

Hello guys.
Since COVID has affected our original lives, I am in the need to get remote jobs.
I know that there are lots of frameworks and developers on the job sites.
So it would be important to learn the right skills.

I am going to choose the best framework for web development to learn later on.
I am now considering Node js/Express js, PHP/Laravel/Symfony, Python/Django/Flask, Ruby on Rails as well as ASP.NET CORE for the backend.
And React js, Vue js, Angular, Svelte for the frontend.

Not sure which is the best one to learn to get more jobs in the freelancing market place.

When it comes to the backend, I've heard that it goes without saying that ASP.NET CORE and Laravel have the largest amount of jobs in market places like Upwork.com, linkedin.com and so on.
However, it is true that it would be hard to get this kind of job since there are tons of PHP, ASP.NET developers.
Meanwhile, the cost would be quite low.

Regarding the frontend, it is obviously true that React has tons of jobs and developers on the Job sites.

What I am considering are two things.

More chances to get jobs means low competition - (more jobs, fewer developers on market place)
The cost
consistency - (should keep its value at least a few more years from now)

Looking forward to your valuable comments.
Thanks in advance,

Voice conference and Video Room in Twilio API

jonyx — Sun, 08 Dec 2019 04:33:37 +0000

I'd like to build video conference platform using Twilio api in PHP for the backend.
And I want to know how to create voice conference and video room in twilio using PHP.
There are PHP code for this in twilio doc.

$response = new TwiML;

// Start with a <Dial> verb
$dial = $response->dial();

dial->conference('My conference', array(
                'startConferenceOnEnter' => True,
                'endConferenceOnExit' => True
                ));

I have some questions

Do I need to return $reponse to the client side?
How can I connect this voice conference?

Please help me with this
Thanks