@neoswap/packs-widget
v0.0.14
Published
Packs Widget for Solana
Downloads
65
Readme
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-widgetUsage
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/[email protected]/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.