Tendermint web application - customize

Question

I am new to blockchain development and to tendermint as well.

I already have a blockchain running locally.

Using this command starport scaffold vue I could mount a local web application. Inspecting a bit I could replicate some network requests (localhost) and I can get the ballance of current wallet (hard-coded on the request), get the current wallet from the localstorage. I'm struggling on authentication (mnemonic, wallet name and password).

However I also would like to costumize it according to my needs and I thought I could start a web application from scratch. I can see that the generated web project is importing this project https://github.com/tendermint/vue which is making a lot of "magic behind the scenes" and importing UI elements as well and I would like to have my own elements.

I don't want to re-invent the wheel and I can make some imports to help me on connection to wallet, validate authentication (mnemonic, wallet name and password), create wallet and so on.

I am trying to build a web application to connect to wallet, make transations.... but I would like to control the styles and the connections (and if possible using reactjs instead of vuejs, otherwise I dont mind learn vuejs as well).

Is this possible or reasonable? Where I can find good documentation or tutorial to guide me on customize a web application using tendermint. Honestly I searched but I am kind of lost.

Thanks

UPDATE: I found good examples and here and here. It helped me to validate mnemonics and make transactions, with my stack tech.

Answer 1

Because Starport generates both plain Javascript and VUE controllers, you have few options:

1. Create your own site re-using VUE components
2. Take plain JS part and build a website using whatever technology you like
3. Use a plain JS client for standard cosmos modules you can find on GitHub
4. Use Protobuf generator to generate light client code yourself

If you only need wallet functionality, #2 and #3 may work best for you because the bank module is stable and hasn't changed much in a long time.

You can find plain JS file for bank in your project: vue/src/store/generated/cosmos/cosmos-sdk/cosmos.bank.v1beta1/module/index.ts

There is a link to starport discord channel related to frontend: https://discord.gg/CvbdYh9AWQ