Convert Figma logo to code with AI

inkonchain logoink-kit

Onchain-focused SDK with ready-to-use templates, themes, and magical animated components ✨

35,400
364
35,400
5

Top Related Projects

1,372

Polkadot's ink! to write smart contracts.

Quick Overview

Ink-kit is a comprehensive toolkit for developing smart contracts on the Ink! platform, which is designed for the Polkadot ecosystem. It provides a set of utilities, libraries, and tools to streamline the process of writing, testing, and deploying Ink! smart contracts.

Pros

  • Simplifies the development process for Ink! smart contracts
  • Includes a variety of pre-built components and utilities
  • Integrates well with the Polkadot ecosystem
  • Regularly updated and maintained by the community

Cons

  • Limited documentation compared to more established smart contract platforms
  • Relatively new project, which may lead to potential instability or breaking changes
  • Steeper learning curve for developers not familiar with Rust or Polkadot
  • Smaller ecosystem compared to Ethereum or other major blockchain platforms

Code Examples

  1. Creating a simple token contract:
#![cfg_attr(not(feature = "std"), no_std)]

use ink_lang as ink;

#[ink::contract]
mod simple_token {
    #[ink(storage)]
    pub struct SimpleToken {
        total_supply: Balance,
        balances: ink_storage::collections::HashMap<AccountId, Balance>,
    }

    impl SimpleToken {
        #[ink(constructor)]
        pub fn new(initial_supply: Balance) -> Self {
            let mut balances = ink_storage::collections::HashMap::new();
            let caller = Self::env().caller();
            balances.insert(caller, initial_supply);
            Self {
                total_supply: initial_supply,
                balances,
            }
        }

        #[ink(message)]
        pub fn balance_of(&self, owner: AccountId) -> Balance {
            self.balances.get(&owner).copied().unwrap_or(0)
        }
    }
}
  1. Implementing a transfer function:
#[ink(message)]
pub fn transfer(&mut self, to: AccountId, value: Balance) -> bool {
    let from = self.env().caller();
    let from_balance = self.balance_of(from);
    if from_balance < value {
        return false;
    }
    self.balances.insert(from, from_balance - value);
    let to_balance = self.balance_of(to);
    self.balances.insert(to, to_balance + value);
    true
}
  1. Adding events to the contract:
#[ink(event)]
pub struct Transfer {
    #[ink(topic)]
    from: Option<AccountId>,
    #[ink(topic)]
    to: Option<AccountId>,
    value: Balance,
}

// Inside the transfer function:
self.env().emit_event(Transfer {
    from: Some(from),
    to: Some(to),
    value,
});

Getting Started

To start using ink-kit, follow these steps:

  1. Install Rust and cargo-contract:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install cargo-contract --force
  1. Create a new Ink! project:
cargo contract new my_contract
cd my_contract
  1. Build and test your contract:
cargo contract build
cargo test
  1. Deploy your contract using the Polkadot.js Apps or a similar tool.

Competitor Comparisons

1,372

Polkadot's ink! to write smart contracts.

Pros of ink

  • More actively maintained with frequent updates and contributions
  • Extensive documentation and examples for developers
  • Larger community support and ecosystem integration

Cons of ink

  • Steeper learning curve for beginners
  • May have more complex setup and configuration

Code Comparison

ink:

#[ink::contract]
mod my_contract {
    #[ink(storage)]
    pub struct MyContract {
        value: bool,
    }
    // ... implementation
}

ink-kit:

#[ink_kit::contract]
mod my_contract {
    #[ink_kit(storage)]
    pub struct MyContract {
        value: bool,
    }
    // ... implementation
}

Key Differences

  • Syntax: ink uses #[ink::contract] while ink-kit uses #[ink_kit::contract]
  • Attribute naming: ink uses #[ink(storage)] while ink-kit uses #[ink_kit(storage)]
  • Feature set: ink generally offers more advanced features and optimizations
  • Community: ink has a larger user base and more third-party integrations

Use Cases

  • ink: Suitable for complex smart contract development and production-ready projects
  • ink-kit: May be more appropriate for simpler contracts or specific use cases

Conclusion

While both ink and ink-kit provide tools for smart contract development on Substrate-based blockchains, ink offers a more comprehensive and widely-adopted solution. However, ink-kit may still be valuable for certain scenarios or developers with specific requirements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Ink Kit Banner

Welcome to Ink Kit

Ink Kit is an onchain-focused SDK that delivers a delightful developer experience with ready-to-use app layout templates, themes, and magical animated components.

Install

npm install @inkonchain/ink-kit
# or
pnpm install @inkonchain/ink-kit

Usage

// Import styles first at the root of your project (required)
import "@inkonchain/ink-kit/style.css";
// Import components as needed
import { Button } from "@inkonchain/ink-kit";

function App() {
  return (
    <div>
      <Button onClick={() => {}} size="md" variant="secondary">
        Ship It
      </Button>
    </div>
  );
}

Note: Ink Kit classes are prefixed with ink: and can be customized using CSS variables instead of Tailwind classes. They should be imported first so that your own custom classes are taking precedence.

Key Features

  • 🎨 Customizable app layout templates
  • ✨ Magical animated components
  • 🎭 Vibrant themes
  • ⛓️ Onchain-focused development
  • 🚀 Efficient developer experience
  • 📱 Polished, engaging interfaces

Theming

By default, Ink Kit provides a couple of themes already in the stylesheet:

  • Light (light-theme)
  • Dark (dark-theme)
  • Contrast (contrast-theme)
  • Neo (neo-theme)
  • Morpheus (morpheus-theme)

To specify which theme to use, add the ink:THEME_ID to your document root:

<html class="ink:dark-theme">
  ...

If you want to programmatically set this value, you can use the useInkThemeClass:

const theme = getMyCurrentTheme();
useInkThemeClass(theme === "light" ? "ink:neo-theme" : "ink:dark-theme");

Custom Theme

To create a custom theme, you can override CSS variables:

:root {
  --ink-button-primary: rgb(10, 55, 10);
  ...
}

To see examples on specific colors that you can override, check the following theme section of the Ink Kit repository.

Resources

WIP Notice

This is a work in progress: we are constantly adding new components, improving the developer experience, and fixing bugs.

NPM DownloadsLast 30 Days