Frontend Section Missing

[FrankBevr]

Frontend Section Missing

Problem

After succesfully created a beautiful contract in ink! The logical next step is to make it available to non Devs. How to work with an deployed ink! Contract on the Frontend Side?

Solution

A step by step guide of how to creating something like this Snapshot of DCL Voting - Example

If we get rid of the the non core stuff, we get something like this. A minimalistic view:

Possible Walkthruh

Steps:

1. Create a Navbar, 1 heading, 1 button.
2. Create a div container for proposoals
3. Creating a card for one proposal. It holds 1 span(circle), 1 span(address), 1 heading, 1 paragraph.
4. Make Connect Button work. Out of the box component or by hand
5. Make function to get Proposal Address. Fill span tag with address.
6. Make functio to get Proposal Title, Fill paragraph with Title.
7. Make function to get Proposal Descriptio. Truncate it. Fill paragraph with truncate text.

Further Steps: Make a button to create or interact or ... with the voting contract.

Some ressources out of my head:

useink inkathon polkadotJS Astar, AlephZero, Phala should have some ressources somwhere as well.

[FrankBevr]

Random Info for myself

Problem

Ink thingies doesn't work on my machine.

Solution

I created a Dockerimage for my dev Setup.

Available under docker pull frankbevr/ink

Build it for yourself to add spice or get rid of spice.

2. mkdir DockerInk
3. cd DockerInk
4. touch Dockerfile
5. copy/paste the following in Dockerfile

   
   # Start from rust offical docker image 
   FROM rust:latest
   # Set install shell as bash
   SHELL ["/bin/bash", "-c"]
   # Add Rust to PATH
   ENV PATH="/root/.cargo/bin:${PATH}"
   # Add Neovim to PATH
   ENV PATH="/root/.local/share/bob/nvim-bin/:${PATH}"

Install basics

https://docs.substrate.io/install/linux/

RUN apt update -y && apt upgrade -y &&\ apt install cmake -y &&\ apt install build-essential &&\ apt install --assume-yes git clang curl libssl-dev protobuf-compiler

Install Frank Dev Utils

https://github.com/0atman/noboilerplate/blob/main/scripts/20-rust-userland.md#oxidise-your-life-1

RUN cargo install cargo-info ripgrep exa \ bat irust nu zellij bacon \ gitui rtx-cli starship nu \ bob-nvim

Add Neovim(AstroVim) via bob-nvim

https://astronvim.com/

RUN bob install 0.9.1 && \ bob use 0.9.1 &&\ git clone --depth 1 https://github.com/AstroNvim/AstroNvim ~/.config/nvim &&\ nvim --headless "+Lazy! sync" +qa

Setup Franks NuShell

https://www.nushell.sh/book/configuration.html

https://starship.rs/guide/

RUN mkdir ~/.config/nushell &&\ touch ~/.config/nushell/env.nu &&\ touch ~/.config/nushell/config.nu &&\ mkdir ~/.cache/starship &&\ touch ~/.cache/starship/init.nu &&\ starship init nu >> ~/.cache/starship/init.nu &&\ touch ~/.config/starship.toml &&\ starship preset pastel-powerline > ~/.config/starship.toml &&\ echo "source-env ~/.cache/starship/init.nu" >> ~/.config/nushell/env.nu &&\ echo "let-env config = { show_banner:false, edit_mode: nvim, }" >> ~/.config/nushell/config.nu

Setup Ink Utitls

https://use.ink/getting-started/setup

RUN rustup toolchain install nightly-2023-03-09 &&\ rustup default nightly-2022-12-24 &&\ rustup target add wasm32-unknown-unknown &&\ rustup update nightly &&\ rustup target add wasm32-unknown-unknown --toolchain nightly &&\ cargo install --version 2.1.0 cargo-contract &&\ cargo install contracts-node --git https://github.com/paritytech/substrate-contracts-node.git

Add missing things

RUN cargo install kondo &&\ rustup component add rust-src --toolchain nightly-2022-12-24-x86_64-unknown-linux-gnu &&\ rustup component add rustfmt &&\ nvim --headless "+LspInstall rust_analyzer" +qa &&\ nvim --headless "+MasonInstall rustfmt" +qa

Start Zellij

https://zellij.dev/documentation/

CMD ["zellij", "options", "--default-shell", "nu", "--session-name", "Rusty"]

5. `sudo systemctl start docker` or in WSL its `sudo service docker start`
> If docker is not installed, Check out the official documentation. 
> https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository
> For Windows people, its highly reccomended to use Windows Subsystem for Linux. Unix Based Systems is a thing in the space.
6. `docker buildx build -t ink-frank .`
7. Make a big chunk of coffee that will take while
8. `docker images` to see if you got the image
9. `docker run -it frankbevr/ink`
10. 🎉 

How to work with it, i will add maybe later, but maybe too nichee anyways.
I use a Terminal Based Dev workflow. And people who do the same and write rust have enough understanding. If not pm me `FrankBevr#9593` and i pm of how it works.

[sacha-l]

I found out that Polkadot.Study has some grant funding (3x1400$) for community contributors to submit tutorials to.

Wouldn't it be cool if you submitted a tutorial to build a front-end for this dapp ... 😏

How ?

File an issue here with the New Tutorial Template :)

[FrankBevr]

I was not aware of pollkadot.study . Cool project :100: haha 280Döner bounty :taco: Yeap, sounds solid. Lets do it. I file an issue next week.

*Edit: https://github.com/PolkadotStudy/polkadot.study/issues/30