Add UI templates to init

[codespool]

Overview (What and Why)

To make swanky all-around tool, the frontend part should also be taken into consideration.

For the contract template we provide, there should also be UI templates ready to add.

How

Init command and new contract command should offer to add the UI templates as well.

Optionally, there should be a choice of fronted frameworks (react/vue/svelte), but React with useink should be enough for the first iteration.

Definition of Done

• [ ] UI templates added to templates package
• [ ] init command offers to add UI template
• [ ] contract new command offers to add UI template
• [ ] new contract command to add UI template to existing contract
• [ ] all changes merged
• [ ] docs updated

Open Issues and Blockers

Work was started on this, but since adding UI project (a dapp) introduces yet another layer of dependencies on polkadot.js, the compatibility issues had to be addressed first.

To address this, focus was shifted to the swanky-dev-container and swanky and swanky-node updates to newer versions of ink! and weights V2.

Since more urgent/useful features were suggested in the meantime, this was given a lower prio.

[codespool]

polkadot.js duplication issues have been resolved with the switch to ESM in v3, and this is now ready to be considered again.

[ipapandinas]

With the recent shift from useInk to useInkathon, the approach to setting up a Swanky project with integrated frontend and smart contract development needs to adapt. The idea is still to spin up a "fullstack ~monorepo~" development environment project of a real full stack ink! app. I suggest leveraging useInkathon for frontend development and streamlining the setup process for a Swanky project using the Flipper contract template first. Here is a new "Definition of Done" suggestion:

• [ ] Develop a new, customized frontend UI template tailored to Swanky.
• [ ] Incorporate React hooks from useInkathon into the frontend template to interact with the Swanky project local configuration (contract deployments, networks, accounts).
• [ ] init & new command offers to add frontend UI template (for flipper contract template only).
• [ ] init command prints next steps to onboard/upskill new users: compile the contract, start the swanky node and start the frontend dev server.

And optional but recommend additional tasks:

• [ ] Optional: Support Shibuya testnet with faucet link and a one well-known Flipper contract instance already deployed.
• [ ] Optional: Refactor deploy, query, tx commands and ContractCall class to use useInkathon helpers for basic contract interactions.
• [ ] Optional: Support Wallet connection, otherwise we can only use Swanky key management

Alternative options considered:

• implement our own ink-contract-helpers package with generic helpers over any message/args and react hooks
• maintain archived useInk frontend template that looks like this

@vsofiya Let me know how we should prioritize this scope.

[codespool]

Sound great! Why monorepo though? Sounds like an overkill for just two packages, and would probably increase complexity unnecessarily.

[ipapandinas]

The term "monorepo" was mistakenly used; I meant to refer to the project structure generated by the swanky init command, which establishes a "fullstack ~monorepo~" development environment as follows:

swanky-project/
├── artifacts/
├── contracts/
├── frontend/
└── tests/

[codespool]

Ah, great, thanks for clarification. I see no problem with this proposal, would be a great adtion to swanky 👍