0.0.15 • Published 8 months ago

@neoswap/packs-widget v0.0.15

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

Neoswap Packs Widget

This package allows you to easily integrate Neoswap packs into your web application. It can be used directly in an HTML file or within a React application.

Installation

First, install the package via npm:

npm install @neoswap/packs-widget

Usage

Method 1: Directly in an HTML File

You can include the widget directly in an HTML file using a script tag. Here's an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Packs Widget Example</title>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  </head>
  <body>
    <div id="packs-widget-container"></div>
    <script src="https://unpkg.com/@neoswap/packs-widget@0.0.12/dist/packs-widget.js"></script>
    <script>
      PacksWidget.default.renderPacksWidget('packs-widget-container', 'YOUR_PARTNER_TOKEN')
    </script>
  </body>
</html>

Replace 'YOUR_PARTNER_TOKEN' with your actual partner token.

Method 2: Using in a React Application

You can also use the widget in a React application. Below is an example of how to integrate it into a React component.

Using renderPacksWidget

Create a React component to render the widget:

import React, { useEffect, useRef } from 'react';

import { renderPacksWidget } from '@neoswap/packs-widget';



const PacksWidgetContainer: React.FC = () => {

const widgetContainerRef = useRef<HTMLDivElement  |  null>(null);

const partnerToken = process.env.YOUR_PARTNER_TOKEN!;



useEffect(() => {

if (widgetContainerRef.current) {

renderPacksWidget(widgetContainerRef.current.id, partnerToken);

}

}, [partnerToken]);



return <div  id="packs-widget-container"  ref={widgetContainerRef}></div>;

};



export default PacksWidgetContainer;

Add this component to your application's routing or render it directly in your main application component.

Using usePackData

Here's how you can use the usePackData hook to fetch and display pack data:

import React, { useEffect } from 'react';
import packsWidget from '@neoswap/packs-widget';

const PacksPage: React.FC = () => {

const partnerToken = process.env.YOUR_PARTNER_TOKEN!;

const {
  packGroups,
  packDetails,
  transactions,
  balances,
  fetchBalances,
  fetchPackDetails,
  fetchPackDetailsPost,
  fetchTransactions,
  fetchPackGroups,
  isLoadingPackGroups,
  errorPackGroups
} = packsWidget.usePackData(partnerToken);

useEffect(() => {
  fetchPackGroups();
}, [fetchBalances, fetchPackGroups, fetchTransactions]);



if (isLoadingPackGroups) {
  return <div>Loading...</div>;
}



if (errorPackGroups) {
  return <div>Error loading data</div>;
}



return (
<div>
<h1>Packs Information</h1>
<h2>Pack Groups</h2>
<button  onClick={fetchPackGroups}>Refresh Pack Groups</button>
<ul>
{packGroups.map(group => (
<li  key={group.id}>{group.name}</li>
))}
</ul>
</div>
);
};

export default PacksPage;

Environment Variables

For the React example, ensure you have a .env file with the following content:

YOUR_PARTNER_TOKEN=your_partner_token

Replace 'your_partner_token' with your actual partner token.

0.0.15

8 months ago

0.0.14

11 months ago

0.0.13

11 months ago

0.0.12

12 months ago

0.0.11

12 months ago

0.0.10

12 months ago

0.0.9

12 months ago

0.0.8

12 months ago

0.0.7

12 months ago

0.0.6

12 months ago

0.0.5

12 months ago

0.0.4

12 months ago

0.0.3

12 months ago

0.0.2

12 months ago

0.0.1

12 months ago