Skip to main content

⚒️ 1. Create a new web app and install dependencies

If you already set up your web app, you can skip this step and move to the next one.

This is available for all web frameworks as long as you're using TypeScript or JavaScript. Furthermore, if you're building your game with a game engine such as Unity, Cocos, or Godot and want to bring it to the Telegram Mini App, let us know and we will guide you on how to integrate it.

In this guide, you will create a new web app using Next.js.

Step 1. Install Node.js and npm​

Ensure you have Node.js and npm installed on your machine. You can check their versions by running node -v and npm -v in the terminal.

Step 2. Init a new web app​

  1. Open your terminal.

  2. Navigate to the directory where you want to create your project.

  3. Run the following command to create a new Next.js project.

    npx create-next-app@latest

  4. On installation, answer the prompts as follows:

    What is your project named? example-daily-checkin
    Would you like to use TypeScript? Yes
    Would you like to use ESLint? Yes
    Would you like to use Tailwind CSS? Yes
    Would you like to use `src/` directory? No
    Would you like to use App Router? (recommended) Yes
    Would you like to customize the default import alias (@/*)? Yes
    What import alias would you like configured? @/

Step 3. Run the development server​

  1. Run npm run dev to start the development server.

  2. Visit http://localhost:3000 to view your app.

  3. Edit app/page.tsx (or pages/index.tsx) file and save it to see the updated result in your browser.

Step 4. Install required packages​

  1. Ronin Waypoint SDK: @sky-mavis/waypoint. This package lets developers integrate with waypoint.roninchain.com. The SDK is an EIP-1193-compatible Ethereum JavaScript provider, working with any Ethereum interface such as viem, Ethers.js, or web3.js. To install the package, run the following command:

    npm i @sky-mavis/waypoint

  2. viem, an Ethereum interface. We recommend using viem for the following reasons:

    • It supports TypeScript and is type-safe.
    • Lightweight, composable, and type-safe modules.
    • Clear documentation and many examples.

    To install viem, run the following command in your project directory:

    npm i viem

This is what your package.json should look like after installing the required packages:

{
  "name": "example-daily-checkin-no-popup",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@sky-mavis/waypoint": "^3.0.0",
    "clsx": "^2.1.1",
    "jwt-decode": "^4.0.0",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18",
    "viem": "^2.21.27"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Next step​

2. Register your app and get client ID