ani-ads-sdk 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -34
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,28 +1,25 @@
|
|
|
1
|
-
# Ani Ads SDK
|
|
1
|
+
# Ani Ads SDK - Implementation Guide
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A simple guide for integrating Ani Ads into your Mini App.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install
|
|
9
|
-
#
|
|
10
|
-
pnpm add
|
|
8
|
+
npm install ani-ads-sdk
|
|
9
|
+
# or
|
|
10
|
+
pnpm add ani-ads-sdk
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## Usage
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
|
-
import { AniAds } from '
|
|
16
|
+
import { AniAds } from 'ani-ads-sdk'
|
|
17
17
|
|
|
18
18
|
function MyApp() {
|
|
19
19
|
return (
|
|
20
20
|
<AniAds
|
|
21
|
-
creator_code="
|
|
22
|
-
user_wallet_address="0x..."
|
|
23
|
-
ad_format={["16:9", "9:16"]}
|
|
24
|
-
api_url="https://your-domain.com" // Optional
|
|
25
|
-
onAdClick={(adId, url) => console.log('Ad clicked:', adId, url)} // Optional
|
|
21
|
+
creator_code="YOUR_APP_CREATOR_CODE"
|
|
22
|
+
user_wallet_address="0x..."
|
|
26
23
|
/>
|
|
27
24
|
)
|
|
28
25
|
}
|
|
@@ -30,32 +27,43 @@ function MyApp() {
|
|
|
30
27
|
|
|
31
28
|
## Props
|
|
32
29
|
|
|
33
|
-
- `creator_code` (string, required):
|
|
34
|
-
- `user_wallet_address` (string, required):
|
|
35
|
-
- `ad_format` (string[] | string, required): Gewünschte Bildformate (z.B. `["16:9", "9:16", "1:1"]`)
|
|
36
|
-
- `api_url` (string, optional): API URL (Standard: Production URL)
|
|
37
|
-
- `onAdClick` (function, optional): Callback wenn Ad geklickt wird
|
|
30
|
+
- `creator_code` (string, required): Your unique mini app creator code from the Ani Ads platform
|
|
31
|
+
- `user_wallet_address` (string, required): The wallet address of the current user viewing your app
|
|
38
32
|
|
|
39
|
-
##
|
|
33
|
+
## How It Works
|
|
40
34
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
1. The SDK automatically fetches available ads from the Ani Ads API
|
|
36
|
+
2. Ads are displayed in a 380x90px banner format
|
|
37
|
+
3. When a user clicks an ad:
|
|
38
|
+
- The click is tracked
|
|
39
|
+
- Claim your Payment on Ani Ads Platform
|
|
40
|
+
- The destination URL opens in a new tab
|
|
44
41
|
|
|
45
|
-
##
|
|
42
|
+
## Requirements
|
|
46
43
|
|
|
47
|
-
|
|
44
|
+
- React 18+ or React 19+
|
|
45
|
+
- A creator code from the Ani Ads platform
|
|
48
46
|
|
|
49
|
-
|
|
50
|
-
2. **Datenbank schreibt**: Speichert Clicks und Earnings
|
|
51
|
-
3. **Smart Contract schreibt**: Verarbeitet Zahlungen (0.005 USDC an Creator, 0.005 USDC an Platform)
|
|
47
|
+
## Example
|
|
52
48
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
Bei jedem Click wird automatisch:
|
|
58
|
-
- Geprüft ob unique user (nur einmal pro User bezahlt)
|
|
59
|
-
- Zahlung im Smart Contract verarbeitet
|
|
60
|
-
- Earnings in der Datenbank aktualisiert
|
|
49
|
+
```tsx
|
|
50
|
+
import React from 'react'
|
|
51
|
+
import { AniAds } from 'ani-ads-sdk'
|
|
61
52
|
|
|
53
|
+
function MyMiniApp() {
|
|
54
|
+
const userWallet = "0x1234..." // Get from your wallet connection
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div>
|
|
58
|
+
<h1>My Mini App</h1>
|
|
59
|
+
<AniAds
|
|
60
|
+
creator_code="ABC123XY"
|
|
61
|
+
user_wallet_address={userWallet}
|
|
62
|
+
onAdClick={(adId, url) => {
|
|
63
|
+
console.log(`Ad ${adId} clicked, opening ${url}`)
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
</div>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
```
|