Accepting ICRC-1 Payment and Using Internet Identity

This project is a tutorial to guide you through building a simple application on the Internet Computer that uses Internet Identity for authentication and accepts ICRC-1 tokens for payment.

This is a blogging dapp that allows users to create posts and pay ICRC-1 tokens to be able to make more posts.

Prerequisites

Before you can start building on the Internet Computer, you need to install the DFX command-line tool. You can find instructions on how to do this in the SDK documentation.

Tech Stack

This project uses the following technologies:

Motoko for the backend canister
React for the frontend

Running the project locally

If you want to test your project locally, you can use the following commands:

# Starts the replica, running in the background
dfx start --background

# Deploys your canisters to the replica and generates your candid interface
dfx deploy

Once the job completes, your application will be available at http://localhost:4943?canisterId={asset_canister_id}.

If you have made changes to your backend canister, you can generate a new candid interface with

npm run generate

at any time. This is recommended before starting the frontend development server, and will be run automatically any time you run dfx deploy.

If you are making frontend changes, you can start a development server with

npm start

Which will start a server at http://localhost:8080, proxying API requests to the replica at port 4943.

Note on frontend environment variables

If you are hosting frontend code somewhere without using DFX, you may need to make one of the following adjustments to ensure your project does not fetch the root key in production:

setDFX_NETWORK to ic if you are using Webpack
use your own preferred method to replace process.env.DFX_NETWORK in the autogenerated declarations
- Setting canisters -> {asset_canister_id} -> declarations -> env_override to a string in dfx.json will replace process.env.DFX_NETWORK with the string in the autogenerated declarations
Write your own createActor constructor

Commands

Set the ICRC-1 token canister id

dfx canister call ii-icrc1-tutorial-backend set_icrc1_token_canister  "(\"mxzaz-hqaaa-aaaar-qaada-cai\")"

Send ICRC-1 tokens to a principal

dfx canister call icrc1_ledger_canister icrc1_transfer "(record { to = record { owner = principal \"akhd4-zekp3-xgj6k-yi2xm-kmhql-po33q-acj24-feepq-i7wik-kgigj-tae\";};  amount = 10000000000;})"