feat: add PAPI UI

[marcuspang]

Fixes #41

Description

Frontend created with React, tailwind.css, and Radix UI. I am not sure if it's necessary to add the crypto kitties images, but the main functionality is implemented as mentioned in requirements.

Requirements

• Must 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.

[marcuspang]

cc @shawntabrizi

[shawntabrizi]

@marcuspang This is a good start, but seems like some stuff was broken when I tried to use it locally.

• When the blockchain isn't connected I don't see anything. I added .env.local with VITE_USE_LOCAL_DATA=true, but the UI is empty.
• When connected to the blockchain, and I set .env.local to VITE_USE_LOCAL_DATA=false
  • Mint kitty works, but nothing is shown in the UI
  • I get the following error:

     StructuralSharing requires data to be JSON serializable. To fix this, turn off structuralSharing or return JSON-serializable data from your queryFn. [["kitties"]]: TypeError: BigInt value can't be serialized in JSON
    

I am not sure if it's necessary to add the crypto kitties images

Yes, this is something we would definitely need to have, and the code for making working images should be found in the old UI included in this repo.

If you want to follow up in a slightly more synchronous chat, you can ping me at @shawntabrizi on Discord.

[marcuspang]

@shawntabrizi sorry about that, I should have tested without the node running more thoroughly. I've got it working without the node now, along with the images. Here's a short demo

demo_compressed.mov

[shawntabrizi]

@marcuspang this is awesome!

It has basically all the features i was looking for and way more.

I really appreciate that you made the offline scenario work so well.

I am going to approve and merge this in, and then look more deeply to see how to convert this into a tutorial.

Please let me know if you would like to continue to be involved!

Also share your Polkadot address so I can make sure you receive a tip for your work!

[shawntabrizi]

awesome :)

[marcuspang]

@shawntabrizi awesome, would love to continue to get involved. Once you have some details for how the frontend part of the tutorial will look like, I can update the structure to make it more step-by-step

Polkadot address: 5DybbVdLvVWd7MiA1YwkzLUNL1ThMDicozbuLc8v9pQEScPQ

[shawntabrizi]

@marcuspang i haven't had time yet to update the UI or make the tutorial, but you can find your Tip was approved here:

https://polkadot.subsquare.io/referenda/1167?tab=timeline