2002.md

🏠 HOME

Building a dApp with Ink!

There are a few tutorials on building a web frontend for on Ink!, but probably the most relevant is use-Ink Examples. Updated resources are on use.ink.

1. Supercharge the incrementor

We will enhance our first smart contract by adding custom increments, reset functionality, unit tests and a basic frontend.

Follow the instructions of the previous chapter to create a new contract, but this time call it "incrementor". When compilation is completed Replace lib.rs with this upgraded code:

#![cfg_attr(not(feature = "std"), no_std, no_main)]

#[ink::contract]
mod incrementor {
    #[ink(storage)]
    pub struct Incrementor {
        count: u32,
    }

    #[ink(event)]
    pub struct Incremented {
        new_count: u32,
    }

    #[ink(event)]
    pub struct Reset {
        reset_to: u32,
    }

    impl Incrementor {
        #[ink(constructor)]
        pub fn new(init_value: u32) -> Self {
            Self { count: init_value }
        }

        #[ink(message)]
        pub fn increment(&mut self, by: u32) {
            self.count = self.count.checked_add(by).expect("Overflow in increment operation");
        
        }

        #[ink(message)]
        pub fn get_count(&self) -> u32 {
            self.count
        }

        #[ink(message)]
        pub fn reset(&mut self) {
            self.count = 0;
            self.env().emit_event(Reset { reset_to: 0 });
        }
    }

    #[cfg(test)]
    mod tests {
        use super::*;

        #[ink::test]
        fn new_works() {
            let contract = Incrementor::new(0);
            assert_eq!(contract.get_count(), 0);
        }

        #[ink::test]
        fn increment_works() {
            let mut contract = Incrementor::new(1);
            contract.increment(1);
            assert_eq!(contract.get_count(), 2);
            contract.increment(2);
            assert_eq!(contract.get_count(), 4);
        }

        #[ink::test]
        fn reset_works() {
            let mut contract = Incrementor::new(5);
            contract.reset();
            assert_eq!(contract.get_count(), 0);
        }
    }
}

As you can see, we can increment it by a specific amount and reset and test it.

2. Time to run the tests

Polkadot developers test in Rust, not HSpec – but the principles are familiar.

#same cargo workflow you already know
cargo test

Now deploy and instantiate it as learned, and test it with the playground. If successful, it's time for frontend. Let's build the web scaffold.

3. Frontend: From Rust to React

npx create-react-app incrementor
cd incrementor
npm install @polkadot/api @polkadot/api-contract
# npm install web-vitals if you have dependencies

Connect to Your Contract:

1. Copy target/incrementor.json to src/ (this is your ABI)
2. Open your src/App.js and paste the content of App.js
3. Substitute YOUR_CONTRACT_ADDRESS with the address of the deployed contract.

Everything should be ready now starting the web server

4. Launch Your dApp and play

npm start

Visit localhost:3000

🏠 HOME