New Substrate Kitties UI

[shawntabrizi]

This project needs a new Substrate Kitties UI to go along with the latest Polkadot SDK and Polkadot Tech Stack.

This UI will be used to create a tutorial, so the structure of the UI must be designed with this in mind.

Requirements:

• [ ] Must use React
  • I am open to additional UIs build with other frameworks, but probably the tutorial I create will use React.
• [ ] Must use Polkadot-API (PAPI)
• [ ] Must separate all core React / UI components from all Polkadot API components. The hope being that the user following the UI tutorial can simply work in one or two files which only contain PAPI code. The tutorial will expect that they already know react, or hide the react parts of the project.
  • [ ] The project should function and show UI elements without any connection to the blockchain. You can imagine this as the "starting state" for the tutorial.
    • [ ] For example, a simple example.json could contain static data which makes the UI look like it is running and pulling data from the blockchain.
    • [ ] All components should have simple APIs which accept raw fields and should not require modification to change from the JSON input to the blockchain input.
    • [ ] Buttons can show an error / be greyed out since they are not connected to the blockchain.
  • [ ] Must include components for all basic functions of the Substrate Kitties Pallet:
    • [ ] Account Selector, working with default dev accounts (Alice, Bob, Charlie), and also extension accounts if the users chooses.
    • [ ] A UI which shows all Kitties owned by the selected user with all properties of the kitty.
      • [ ] DNA
      • [ ] Owner
      • [ ] Price (Option)
    • [ ] The ability to directly transfer a kitty to another owner.
    • [ ] The ability to put the kitty they own on the market, and set the price.
    • [ ] The ability to take a kitty they own off the market, and automatically sets the price to None.
    • [ ] A UI showing all kitties not owned by the user which are available to purchase.
    • [ ] The button to purchase one of the kitties on the marketplace for its asking price.

The Polkadot SDK Node and Substrate Kitties Pallet works in this repo. See the instructions in the README to get those running.

The Substrate UI folder does not work, but has some old code which may be helpful. You do not need tp start with the existing Substrate UI.

[pranavcpawar]

Hey, @shawntabrizi gm!

For example, a simple example.json could contain static data which makes the UI look like it is running and pulling data from the blockchain.

Can you please elaborate on this?

[aaronbassett]

Must separate all core React / UI components from all Polkadot API components.

@rossbulat does this well in the Polkadot Developer Console (PDC) through smart use of hooks, contexts, and models

All components should have simple APIs which accept raw fields and should not require modification to change from the JSON input to the blockchain input.

This should be possible using models similar to PDC. Their components don't interact with the models directly, they'll use contexts like useChainState. The context doesn't care if the ChainState model retrieves the value from a blockchain or a JSON file, as long as the function signature and return type of fetchConstant doesn't change.

If anyone is building with PAPI and React, I would suggest checking out the PDC's source, @rossbulat really has done a great job. Also the w3ux-library, it's sparse on documentation right now, but it's still very useful. I've mostly been learning it by seeing how it is used in PDC.

---

@shawntabrizi - if you're still short on help when I finish the first guide for AP I can take a look then.

[shawntabrizi]

@pranavcpawar

Can you please elaborate on this?

I would want the UI to initially be populated by a file that looks like this:

let kitties = [
    {
        "dna": "0x8670149c535360ee9e1c6097b53d6f2d79c401143d5f2daf618b5ec1d943828a",
        "owner": "126TwBzBM4jUEK2gTphmW4oLoBWWnYvPp8hygmduTr4uds57",
        "price": null
    },
    {
        "dna": "0xc589a20a598ec1c0cd38d4f4222292b3e6ce461bee68e5439b76eee91d0ddb9d",
        "owner": "126TwBzBM4jUEK2gTphmW4oLoBWWnYvPp8hygmduTr4uds57",
        "price": null
    },
    {
        "dna": "0xd925ad500b4d02d656e66a4fda1cc32f71c5285f784559e82a8ace33e6802cf6",
        "owner": "15oF4uVJwmo4TdGW7VfQxNLavjCXviqxT9S1MgbjMNHr6Sp5",
        "price": 123456
    },
    {
        "dna": "0x3347ff95f67432f4fb236daf78dfec0a18e12b4e22f3db2b69c34f8d9e892a31",
        "owner": "16D2eVuK5SWfwvtFD3gVdBC2nc2BafK31BY6PrbZHBAGew7L",
        "price": null
    },
    {
        "dna": "0x9a0a9d89424a54c0b153f18d5904e6eca08304afd99f37264955fe19adfbcc5b",
        "owner": "14E5nqKAp3oAJcmzgZhUD2RcptBeUBScxKHgJKU4HPNcKVf3",
        "price": null
    },
    {
        "dna": "0xe9be41ac4f36bb381f1a941fba6bad7877e55c00c0cd6fabe748fb6e2ce47f4a",
        "owner": "126TwBzBM4jUEK2gTphmW4oLoBWWnYvPp8hygmduTr4uds57",
        "price": null
    },
    {
        "dna": "0x7f6629f239c4a30495c3eb68442b267f4823769e79e437ca54c6da6c4c2e005e",
        "owner": "16D2eVuK5SWfwvtFD3gVdBC2nc2BafK31BY6PrbZHBAGew7L",
        "price": 456789
    },
    {
        "dna": "0x8eb69b4b3852aeb9e3daeb7f2878be7ae7f4075661ac9d7b4ca97e47a80832e2",
        "owner": "14Gjs1TD93gnwEBfDMHoCgsuf1s2TVKUP6Z1qKmAZnZ8cW5q",
        "price": null
    },
    {
        "dna": "0xc3449b3791799bd1034cdaa30a9e88c50eb17d3388dc689016cf591a1201bca1",
        "owner": "14E5nqKAp3oAJcmzgZhUD2RcptBeUBScxKHgJKU4HPNcKVf3",
        "price": null
    },
    {
        "dna": "0x6084c75c7ef68b8c8c65d73e4c5a75a3aa074c6e87b8700acc152b18f4f86693",
        "owner": "15oF4uVJwmo4TdGW7VfQxNLavjCXviqxT9S1MgbjMNHr6Sp5",
        "price": null
    }
];

let kittiesOwned = {
    "14E5nqKAp3oAJcmzgZhUD2RcptBeUBScxKHgJKU4HPNcKVf3": [
        "0x9a0a9d89424a54c0b153f18d5904e6eca08304afd99f37264955fe19adfbcc5b",
        "0xc3449b3791799bd1034cdaa30a9e88c50eb17d3388dc689016cf591a1201bca1"
    ],
    "14Gjs1TD93gnwEBfDMHoCgsuf1s2TVKUP6Z1qKmAZnZ8cW5q": [
        "0x8eb69b4b3852aeb9e3daeb7f2878be7ae7f4075661ac9d7b4ca97e47a80832e2"
    ],
    "15oF4uVJwmo4TdGW7VfQxNLavjCXviqxT9S1MgbjMNHr6Sp5": [
        "0x6084c75c7ef68b8c8c65d73e4c5a75a3aa074c6e87b8700acc152b18f4f86693",
        "0xd925ad500b4d02d656e66a4fda1cc32f71c5285f784559e82a8ace33e6802cf6"
    ],
    "126TwBzBM4jUEK2gTphmW4oLoBWWnYvPp8hygmduTr4uds57": [
        "0xe9be41ac4f36bb381f1a941fba6bad7877e55c00c0cd6fabe748fb6e2ce47f4a",
        "0xc589a20a598ec1c0cd38d4f4222292b3e6ce461bee68e5439b76eee91d0ddb9d",
        "0x8670149c535360ee9e1c6097b53d6f2d79c401143d5f2daf618b5ec1d943828a"
    ],
    "16D2eVuK5SWfwvtFD3gVdBC2nc2BafK31BY6PrbZHBAGew7L": [
        "0x3347ff95f67432f4fb236daf78dfec0a18e12b4e22f3db2b69c34f8d9e892a31",
        "0x7f6629f239c4a30495c3eb68442b267f4823769e79e437ca54c6da6c4c2e005e"
    ]
}

let countForKitties = 10;

You can see this exactly emulates the 3 storage items found in the pallet / tutorial, and has populated those storage items with 10 kitties, across 5 users, some with a buy price.

Using this data to populate the UI would show the user what a working final looking UI might look like at the start of the tutorial. Probably none of the buttons would work, since you would need to basically write all of the pallet logic in JS, but at least the UI "looks" real.

Then through the tutorial, the user would actually write the code which queries the chain and gets this data from the blockchain rather than a JSON file. Each variable can be replaced by a storage query.

The point of this is that whatever APIs your UI exposes, should be compatible with input in both ways, so that the user does not really need to write any code to modify the UI to get it to work. Just code which queries the blockchain, and creates an equivalent JSON which is passed into the same component.

[marcuspang]

Sounds interesting, I would like to do this @shawntabrizi