Hieuwax-wuffi-tap-mini-app-lib NPM

🐾 Wuffi Tap Mini App Library

wuffi-tap-mini-app-lib is a utility library designed for embedding mini-apps inside the Wuffi Tap platform. This library provides functionality to interact with the host app, handle authentication, and manage game states seamlessly. It simplifies communication between the mini-app and the Wuffi Tap host.

✨ Features

Authentication: Retrieve user authentication data (JWT, user info, etc.).
Game Management: Ability to close the game from within the mini-app.
Cross-window Communication: Send and receive messages between the mini-app and the Wuffi Tap host via postMessage.

📦 Installation

Install the package using npm or yarn:

npm install wuffi-tap-mini-app-lib

yarn add wuffi-tap-mini-app-lib

🚀 Usage

Example Mini-App Component

Below is an example of how to use the library to create a simple mini-game that interacts with the Wuffi Tap host:

import { useEffect, useState } from "react";
import { IAuthenData, miniAppWrapper } from "wuffi-tap-mini-app-lib";

export function MiniGameExample() {
  const [userData, setUserData] = useState<IAuthenData | null>();

  useEffect(() => {
    miniAppWrapper
      .requestAuthData()
      .then((data) => {
        setUserData(data);
      })
      .catch((err) => {
        console.error("Error fetching auth data", err);
      });
  }, []);

  const handleClose = () => {
    miniAppWrapper.closeGame();
  };

  return (
    <div>
      <h1>Mini Game</h1>
      {userData ? (
        <div>
          <p>
            Welcome {userData.user.first_name} {userData.user.last_name}
          </p>
          <p>Total Paws: {userData.tapStatus?.totalPawsEarned}</p>
        </div>
      ) : (
        <p>Loading user data...</p>
      )}

      {/* Game logic goes here */}

      <button onClick={handleClose}>Close Game</button>
    </div>
  );
}

📋 Methods Available

`requestAuthData()`

Requests authentication data from the Wuffi Tap host app.

miniAppWrapper.requestAuthData().then((authData: IAuthenData) => {
  console.log("User JWT:", authData.jwt);
});

`closeGame()`

Sends a message to the Wuffi Tap host app to close the mini-game.

miniAppWrapper.closeGame();

🛠 Data Structures

`IAuthenData`

This interface defines the authentication data structure.

export interface IAuthenData {
  jwt: string;
  user: IUser;
  tapStatus?: ITapStatus;
}

`IUser`

This interface defines the user data structure.

export interface IUser {
  id: string;
  first_name: string;
  last_name: string;
}

`ITapStatus`

This interface defines the tap status information, including energy levels and tap counts.

export interface ITapStatus {
  totalPawsEarned: number;
  totalTapsCount: number;
  currentEnergy: number;
  currentEnergyUpdateTime: number;
  respondTime: number;
  receivedTime: number;
  totalSeasonPawsEarned: number;
}

📡 Communication Mechanism

The library uses the postMessage API to communicate between the mini-app and the Wuffi Tap host app. It listens for incoming messages and handles them appropriately based on the action type.