dfinity / icp-eth-starter

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

ICP 🔗 Ethereum (Beta)

Interact with the Ethereum blockchain from the Internet Computer.

---

🌐 View Deployed Dapp

Designed for experienced Web3 developers, this starter project uses an IC canister to verify the ownership of Ethereum NFTs, with support for both the Sepolia and Goerli testnets in addition to the Ethereum mainnet.

This repository is in early beta testing; please feel free to open an issue to report a bug or request a feature. Thanks!

Note: this starter project is currently undergoing an internal security review. This message will be removed once the review process is complete.

🎬 Create a New Project

Make sure that Node.js >= 16, dfx >= 0.14, 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 --network ic to deploy your application to the Internet Computer.

🔌 Prepare a Testnet Wallet

Here is one way to acquire tokens and NFTs on the Sepolia testnet:

• Install MetaMask and create a new wallet for testing purposes
• Fund your wallet using the Sepolia Faucet (requires signing up for an Alchemy account)
• Navigate to MetaMask's E2E Test Dapp
  • Connect your wallet
  • In your MetaMask extension, change the network from "Ethereum Mainnet" to "Sepolia" (visual guide)
  • Scroll down to the "NFTs" section
  • Press "Deploy" and then "Mint" (may take a few seconds)
  • Press "Watch all NFTs" and in the MetaMask prompt, click the link with text "Test Dapp NFTs #1"
  • In the bottom-right of the page (under "TokenID"), press "#1" to view your newly minted NFT
  • Copy / paste the URL into the ICP 🔗 Ethereum demo project to verify that you are the owner of the NFT.

🛠️ 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
• ethers-core: a popular Rust library for working with Ethereum data structures
• MetaMask: a wallet and browser extension for interacting with Ethereum dapps

📚 Documentation

• Vite developer docs
• React quick start guide
• Tailwind reference
• Internet Computer docs
• dfx.json reference schema
• Motoko developer docs
• Mops usage instructions
• Rust canister guide
• MetaMask developer docs

💡 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.