Speedrun Logo

🚩 Challenge #4: 🔄 Uniswap V2-Stylus

⚠️ Important: Please complete Challenge #3 first if you haven't already, as it contains essential instructions related to all upcoming challenges.

🎫 Build a Uniswap V2-style liquidity pool interface with Arbitrum Stylus:

👷‍♀️ In this challenge, you'll build and deploy smart contracts that enable users to interact with a Uniswap V2-style liquidity pool. You'll work with token pairs, implement liquidity management functions, and create a frontend that allows users to perform various pool operations through an intuitive guided interface! 🚀

🌟 The final deliverable is a full-stack application featuring token pair initialization, liquidity management with clear explanations of how LP tokens work, and helpful information about pool operations. The guided step-by-step approach makes learning DeFi concepts easier while interacting with Arbitrum Stylus-based smart contracts. Deploy your contracts to a testnet, then build and upload your app to a public web server.

Checkpoint 0: 📦 Environment Setup 📚

Before starting, ensure you have the following installed:

Clone the Repository

git clone -b stylus-uniswap https://github.com/abhi152003/speedrun_stylus.git
cd speedrun_stylus
yarn install

Checkpoint 1: 🚀 Start Your Dev Environment

Step 1: Start the Nitro Dev Node

  1. Navigate to the cargo-stylus folder:

    cd packages/cargo-stylus/stylus-uniswap-v2

  2. Run the run-dev-node.sh script:

    bash run-dev-node.sh

    This script:

    • Spins up an Arbitrum Stylus Nitro dev node in Docker.
    • Deploys the contract.
    • Generates the ABI for interacting with the contract.

🛠️ Debugging Tips

Fixing Line Endings for Shell Scripts on Windows (CRLF Issue)

If you encounter errors like Command not found, convert line endings to LF:

sudo apt install dos2unix
dos2unix run-dev-node.sh
chmod +x run-dev-node.sh

Run the script again:

bash run-dev-node.sh

The dev node will be accessible at http://localhost:8547.

Step 2: Start the Frontend

  1. Navigate to the nextjs folder:

    cd ../../nextjs

  2. Install dependencies:

    yarn install

  3. Start the development server:

    yarn dev

The app will be available at http://localhost:3000 as shown below.

uniswap-frontend The Uniswap V2 interface now features a guided step-by-step process with clear explanations

Checkpoint 2: 💫 Explore the Features

The Uniswap V2 interface now features a guided step-by-step approach to help you understand the liquidity provision process:

Step 1: Initialize Pool

pool-init Pool initialization interface

  • In the first step, you'll initialize a Uniswap V2 pool with a token pair.
  • Required inputs: 
    Token0 Address: 0x11b57fe348584f042e436c6bf7c3c3def171de49 (You can get this from the terminal where you run the dev node)
Token1 Address: 0xa6e41ffd769491a42a6e5ce453259b93983a22ef (You can get this from the terminal where you run the dev node)
FeeTo Address:  0x3f1Eae7D46d88F08fc2F8ed27FCb2AB183EB2d0E (Your address)
  • Click "Initialize Pool" to create a new liquidity pool for the token pair.
  • The system will remember your token addresses for the next steps.
  • After successful initialization, you'll automatically proceed to Step 2.

Step 2: Approve Tokens

token-approve Token approval interface

  • Before adding liquidity, you need to approve both tokens for use by the Uniswap pool contract.
  • You'll see your current token balances and existing allowances.
  • For each token:
    1. First Mint the tokens using the "Mint 1000 Token" buttons and then click on "Refresh Token Status" button to see the minted tokens in your wallet
    2. Enter the amount you want to approve (or leave default)
    3. Click "Approve" button for each token
  • The interface will track your approval progress and enable you to move to Step 3 once approvals are complete.

Step 3: Add Liquidity (Mint)

liquidity-add Adding liquidity interface

  • Now you can add liquidity to the pool and receive LP tokens.
  • The interface displays:
    1. Your current token balances and allowances
    2. Pool information with token addresses
    3. A detailed explanation of how liquidity provision works
  • Enter your recipient address for LP tokens (or leave default)
  • Click "Add Liquidity" to provide liquidity to the pool
  • After successful addition:
    1. You'll receive LP tokens representing your share of the pool
    2. The system displays your LP token balance (with both decimal and wei values)
    3. A detailed explanation of what LP tokens represent and what happens next

Understanding LP Tokens:

Your LP token balance may appear small (like 0.000000000000001) because:

  • LP tokens use 18 decimals regardless of the token pair's decimals
  • This small number correctly represents your ownership share of the pool
  • As users trade through the pool, you'll earn fees proportional to your share
  • You can redeem LP tokens anytime to withdraw your tokens plus earned fees

Additional Information

The guided interface helps you understand each step of the Uniswap V2 process. Some important concepts:

  1. Automatic Token Deposits: When adding liquidity, Uniswap uses the full balance of both approved tokens in your wallet, maintaining the proper ratio.

  2. LP Tokens and Ownership: The LP tokens represent your share of the pool, and they earn you a share of the 0.3% fee from each swap.

  3. Token Units: All displayed values are shown in their natural units with appropriate decimals, and raw wei values are provided for reference.

  4. Error Handling: The interface provides detailed error messages and troubleshooting suggestions for common issues.

Common Issues:

  1. Connection Error: If you see "Failed to initialize contract":

    • Ensure the Nitro dev node is running at http://localhost:8547
    • Check if the contract address matches your deployed contract

  2. Transaction Errors:

    • Ensure you have sufficient balance for gas fees
    • Check that input addresses are valid Ethereum addresses
    • Verify that token amounts are properly formatted
    • For liquidity provision, make sure both tokens are approved first

Checkpoint 3: 🛠 Modify and Deploy Contracts

You can modify the contract logic by editing files in the packages/cargo-stylus/src folder. After making changes, redeploy by running:

bash run-dev-node.sh

Common Issues:

  1. Connection Error: If you see "Failed to initialize contract":

    • Ensure the Nitro dev node is running at http://localhost:8547
    • Check if the contract address matches your deployed contract

  2. Transaction Errors:

    • Ensure you have sufficient balance for gas fees
    • Check that input addresses are valid Ethereum addresses
    • Verify that token amounts are properly formatted

Checkpoint 4: 🚢 Ship your frontend! 🚁

To deploy your app to Vercel:

vercel

Follow Vercel's instructions to get a public URL.

For production deployment:

vercel --prod

Checkpoint 5: 📜 Contract Verification

You can verify your deployed smart contract using:

cargo stylus verify -e http://127.0.0.1:8547 --deployment-tx "$deployment_tx"

Replace $deployment_tx with your deployment transaction hash.

🏁 Next Steps

  1. Add more token pairs to your liquidity pool
  2. Implement additional features like:
    • Flash swaps
    • Price oracles
    • Fee management
  3. Enhance the frontend with:
    • Price charts and historical data
    • LP token analytics dashboard
    • Impermanent loss calculator
    • Yield farming integrations
  4. Extend the guided interface with:
    • Token swap functionality
    • Remove liquidity flow
    • Educational tooltips explaining DeFi concepts

Explore more challenges or contribute to this project!

🏃 Head to your next challenge here.

Submit Challenge

uniswap-v2-stylus

GitHub Repository
Deployed URL (Optional)
TelegramNeed help? Join Telegram