Frontend
Art demo application UI walk through
This chapter aims to show how frontend applications can utilize backend functionality generated by Logosphere. We created a simple application for art management and minting.
Overview
Before discussing the UI, you need to know that we wanted to make it simple, clear, and readable. It means we did not implement form validations, error handlers, GraphQL wrappers, full-text filtering, and other elements we normally would add in case of production release.
We also decided to make the UI as backend first which means that some scenarios like create Arts or Tag initial state are executed as a sequence of calls. Thanks to that, the project can be smaller, and you can still easily check the syntax for particular queries and mutations.
Let's go through the sub-pages to understand how it works.
Albums
Albums are groups or arts and root elements of the application. Each piece of art can be part of only one album. Images here are generated as random mocks. Page-reload should make them change.
To create a new album, press the create album button below the search box. After completing the form, a new album will be created.
Arts
Arts are images based on which NFTs could be grouped end minted. These arts, minted already, are marked by small blue NFT badges in the top right corner. Each piece of art contains a number of tags, displayed as a list of grey badges at the bottom of the image. Clicking them, you should see each art tagged by the same tag.
Clicking the art image, You should see its details. Dynamic fields (like aa:bb) are displayed under the horizontal separator line. If the art has not yet been minted should have empty fields and a Mint button displayed.
Clicking create art at the bottom of the search box on Arts main page You will open the form for art creation.
URL needs to be unique. If You would like to use the default picsum image, change you want the index at the end of the address.
Tags
You should see a screen like the above by clicking on the tag badge. Tags are searched globally, which means that you will see all arts from all albums here.
When the application starts the first time, defaulttags are created. Check init.service.ts to find the call. New tags can also be created directly in the GraphQL client by sending artTagSave mutation.
Minting
Clicking the Mint button on the Art info page, you can mint the art to NFT tokens. Logosphere SDK already contains the API to load images on Pinata IPFS (1*), but we made the form to accept any other provider. Going that way, your image should already be uploaded on your chosen platform, and you should have the proper link.
The application use nami (2*) wallet. Other CIP 30 wallets, in theory, should work, but we have not tested them.
When you complete the form and click, Submit you should be asked to sign and authorize the transaction. After that minted token should be visible in your wallet.
Last updated
