Skip to content
/ icp-eth-starter Public template

An advanced starter project for interacting with Ethereum on the Internet Computer (Beta)

License

Notifications You must be signed in to change notification settings

dfinity/icp-eth-starter

Repository files navigation

IC 🔗 ETH

Interact with the Ethereum blockchain from the Internet Computer.


Get started directly in your browser:

Open in Gitpod

Visit Deployed Webapp

Create a New Project

Make sure that Node.js >= 16.x, dfx >= 0.12.x, and the latest version of Rust are installed on your system.

Set up Rust canister development with the following command:

rustup target add wasm32-unknown-unknown

Run the following commands in a new, empty project directory:

npx degit dfinity/ic-eth-starter # Download this starter project
dfx start --clean --background # Run dfx in the background
npm run setup # Install packages, deploy canisters, and generate type bindings

npm start # Start the development server

When ready, run dfx deploy to build and deploy your application.

Technology Stack

Front-end Webapp:

  • TypeScript: JavaScript extended with syntax for types
  • Vite: high-performance tooling for front-end web development
  • React: a component-based UI library
  • Tailwind: a highly expressive, utility-first CSS framework
  • Prettier: code formatting for a wide range of supported languages

Back-end Canister:

  • Motoko: a safe and simple programming language for the Internet Computer
  • Mops: an on-chain community package manager for Motoko
  • mo-dev: a live reload development server for Motoko

Ethereum Integration:

  • Rust: a secure, high-performance canister programming language
  • MetaMask: a wallet and browser extension for interacting with Ethereum dapps

Documentation

Tips and Tricks

  • Customize your project's code style by editing the .prettierrc file and then running npm run format.
  • Reduce the latency of update calls by passing the --emulator flag to dfx start.
  • Install a Motoko package by running npx ic-mops add <package-name>. Here is a list of available packages.
  • Split your frontend and backend console output by running npm run frontend and npm run backend in separate terminals.

Contributions are welcome! Please check out the contributor guidelines for more information.