0xKubitus / avnu-workshop-starknetcc

Learn to build a fullstack dApp on Starknet (Backend = Cairo contract | Frontend = React app using Starknet.React)

NextJS - Starknet-react - Cairo • Workshop

StarknetCC - Full dApp workshop by AVNU team

You'll find the PDF presentation here

Introduction

This workshop will show you how to dev a full Starknet dApp with NextJS & Starknet-react, including multi-wallets support(Argent web wallet | Argent-x | Braavos) and multi-call transactions.

You'll also use an ERC-721 contract, with a 'mint' function (see ABI).

This workshop currently run on the Starknet Goerli Testnet

Use case

Explore the contract interactions in NextJS by using an existing ERC-721 contract & ERC-20 contracts deployed on Starknet.

• Contract interactions
  • Start with existing contracts
  • Deploy & connect your own
• Display current information
  • Last block
  • Transactions
• ERC-721
  • mint
  • balanceOf
• Minting & send (multicalls)

The Goal

Prerequisite

To follow this workshop you should at least:

• Have a Starknet compatible wallet installed (with some Starknet Goerli ETH in wallet to do TX's)
• Have basic knowledge in ReactJS / NextJS framework
• Have basic knowledge in Cairo smart contracts development
• Have basic knowledge on how Starknet works(BC in general, Account abstraction, ...)

About the tooling:

• IDE
• Yarn or NPM

Clone the repository

git clone [e-mail]:avnu-labs/avnu-dapp-workshop.git
cd avnu-dapp-workshop

Install Dependencies

yarn | npm install 

Run in dev

yarn dev | npm run dev

File tree

Here are the interesting files tree you'll have to update/use during this workshop

• app
  • layout.tsx
  • page.tsx
• assets
  • abis
    • ERC20.json
    • AVNUNft.json
• lib
  • shared
    • components
      • layout
      • nft
      • transactions
    • models
      • nft-metadata.tsx
    • services
  • wallet
    • components
      • connect-button.tsx
      • connect-wallet-modal.tsx

TODO

1. Familiarize a little with the project
   1. See the file tree
   2. Contract addresses are located in environment
   3. (use of ChakraUI components library)
   4. Uncomment part by part the workshop
2. Fetching block infos
   1. Update the starknet providers to connect to the default Starknet Goerli provider by using Starknet-react
   2. Update the footer component to fetch & display the current block infos
   3. (The UI part is already done here)
3. Wallet connect
   1. Look at the Connect button component & Connect wallet modal component
   2. Update it to ask user wallet connection by using Starknet-react or Get starknet by argent if you want to use argent web wallet.
   3. You should be able to connect with Braavos or ArgentX, and see your current address on the UI
4. Managing ERC-721
   1. Start by taking a look at the NFT component & Mint button component
   2. You can now update the NFT component to
      1. Fetch & display the name, description and image of the NFT by fetching metadata
      2. Fetch the balance of the connected account
      3. Mint the NFT by using the mint button
         1. Simple call, only mint
         2. Multi-call, mint and donate
5. Managing transactions ---------------------------
   1. Look at the Current transaction component & the Transactions list component
   2. Here you'll have to
      1. Watch the last transaction registered by the app & display the current status in real time
      2. Display all registered transactions by the app
6. Deploy your own ERC-721 contract
   1. You can put aside IDE for the time & open your terminal
   2. You can use the OpenZeppelin ERC-721 contract
   3. Use Starkli to compile, declare & deploy the contracts
      1. Wait until the contract is deployed
   4. Once it's ok, you can test it by calling mint on the deployed contract to verify
      1. With the CLI
      2. With the voyager
   5. Declare & upload your metadata.json to IPFS (or other if you prefer)
   6. Set the tokenURI of your contract to the IPFS link
   7. You can now replace the nftAddress in the environment file to use your own

Contract addresses

AVNU ERC-721

0x039eb1299cbb259edabb45376ec742497c67150b9adc2d9c3c026a8cc58c634a

Go further

There some improvements you can make to improve this workshop, here is a non-exhaustive list:

• Use other starknet-reacts hooks
  • UseStarkName()
• Save transactions in local storage
• Display current transaction information on the UI (toast, history panel, ...)
• Auto reload of balance after mint
• Implement a button to be able to add a specific token to your wallet
• ...

Docs

Here is all the docs you'll need to complete the workshop

https://github.com/apibara/starknet-react

https://www.starknetjs.com/

https://www.npmjs.com/package/@argent/get-starknet

https://github.com/OpenZeppelin/cairo-contracts

https://github.com/xJonathanLEI/starkli

License

This workshop is released under the AGPL-3.0-only.