Ani Ads SDK - Implementation Guide

A simple guide for integrating Ani Ads into your Mini App.

Installation

npm install ani-ads-sdk
# or
pnpm add ani-ads-sdk

Usage

import { AniAds } from 'ani-ads-sdk'

function MyApp() {
  return (
    <AniAds
      creator_wallet="0x..." 
      app_name="My App Name"
      user_wallet_address="0x..." 
    />
  )
}

Props

• creator_wallet (string, required): Your creator wallet address registered on the Ani Ads platform
• app_name (string, required): The exact app name as registered on the Ani Ads platform
• user_wallet_address (string, required): The wallet address of the current user viewing your app
• api_url (string, optional): Custom API URL (defaults to production)
• onAdClick (function, optional): Callback when an ad is clicked

How It Works

1. The SDK automatically fetches available ads from the Ani Ads API
2. Ads are displayed in a 380x90px banner format
3. When a user clicks an ad:
   • The click is tracked
   • Claim your Payment on Ani Ads Platform
   • The destination URL opens in a new tab

Requirements

• React 18+ or React 19+
• A creator wallet address and app name registered on the Ani Ads platform

Example

import React from 'react'
import { AniAds } from 'ani-ads-sdk'

function MyMiniApp() {
  const userWallet = "0x1234..." // Get from your wallet connection
  const creatorWallet = "0x5678..." // Your creator wallet address
  const appName = "My Mini App" // Exact name as registered on Ani Ads platform
  
  return (
    <div>
      <h1>My Mini App</h1>
      <AniAds
        creator_wallet={creatorWallet}
        app_name={appName}
        user_wallet_address={userWallet}
      />
    </div>
  )
}

Breaking Changes (v2.0.0)

• Removed: creator_code prop
• Added: creator_wallet and app_name props
• The SDK now uses wallet addresses and app names instead of creator codes for better security and flexibility