@ape.swap/bonds-sdk 3.0.8 → 3.0.9

package/README.md

@@ -1,46 +1,154 @@
-# Getting Started with Create React App
+# @ape.swap/bonds-sdk
+
+[![npm](https://img.shields.io/npm/v/@ape.swap/bonds-sdk.svg)](https://www.npmjs.com/package/@ape.swap/bonds-sdk)
+
+The `@ape.swap/bonds-sdk` package provides an embeddable set of tools and UI components to integrate and manage bond-related functionalities for multi-chain environments. This SDK simplifies the process of displaying, interacting with, and customizing bond-related user interfaces in your projects.
+
+## Key Features
+
+- Fully customizable bond views powered by the following components: `<FullBondsView />`, `<Bonds/>` & `<YourBonds />`.
+- Multi-chain support for a ever-growing array of Blockchains that currently include BNB Chain, Ethereum, Base, Polygon, Arbitrum, Lightlink, Linea, Graphlinq, IOTA and Crossfi.
+- Prebuilt styles and layouts optimized for embedding.
+- Compatibility with the most popular web3 development library: Wagmi.
+- Plug-and-play configuration to fit various project requirements.
+
+---
+
+## Installation
+
+To install the package via npm or yarn, run the following command:
+
+```textmate
+# With npm
+npm install @ape.swap/bonds-sdk
+
+# With yarn
+yarn add @ape.swap/bonds-sdk
+```
+
+---
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Basic Usage
 
-## Available Scripts
+Here's an example of how to integrate the `@ape.swap/bonds-sdk` package into your project:
 
-In the project directory, you can run:
+```textmate
+import React from 'react'
+import { FullBondsView, ChainId } from '@ape.swap/bonds-sdk'
+import '@ape.swap/bonds-sdk/dist/styles.css'
+import 'swiper/swiper.min.css'
 
-### `npm start`
+const MyBondsComponent = () => {
+  return (
+    <FullBondsView
+      config={{
+        referenceId: 'yourProjectId',
+        chains: [
+          ChainId.BSC,
+          ChainId.BASE,
+          ChainId.MATIC,
+          ChainId.MAINNET,
+          ChainId.ARBITRUM,
+          ChainId.LIGHTLINK,
+          ChainId.LINEA,
+          ChainId.GRAPHLINQ,
+          ChainId.IOTA,
+          ChainId.CROSSFI,
+        ],
+        useRainbowKit: true,
+        useHotBonds: true,
+        theme: {{
+            "radii": "10px",
+            "colors": {
+                "primaryButton": "#6560C5",
+                "white1": "#0E0D16",
+                "white2": "#161420",
+                "white3": "#1F1D29",
+                "white4": "#282632",
+                "white5": "#312F3A",
+                "text": "#FAFAFA",
+                "primaryBright": "#FFF"
+                }
+            }}
+      }}
+    />
+  )
+}
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+export default MyBondsComponent
+```
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+---
 
-### `npm test`
+## Configuration
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+The core of the SDK lies in its `config` object, passed as a prop to the `<FullBondsView />` component. Below is a breakdown of key options:
 
-### `npm run build`
+| Property        | Type                | Description                                                                                                                 |
+|-----------------|---------------------|-----------------------------------------------------------------------------------------------------------------------------|
+| `referenceId`   | `string`            | A unique identifier for the bonds, shall be provided by ApeBond team.                                                       |
+| `chains`        | `Array`             | An array of supported chain IDs (e.g., `56`, `1`, `137`, etc). It also determines the order of the chains on the bond list. |
+| `useRainbowKit` | `boolean`           | Whether to enable RainbowKit for wallet connections. Might be replaced for an enum in the near future.                      |
+| `useHotBonds`   | `boolean`           | Whether to show the "hot bonds" component.                                                                                  |
+| `theme`         | `Object (optional)` | This is how you can customize the styles of the SDK. Override styles like colors, typography, and layout settings to match your project's branding.|      
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Chain Support
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+The SDK currently supports the following chains:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+- Binance Smart Chain (BSC)
+- Ethereum (MAINNET)
+- Polygon (MATIC)
+- Arbitrum
+- Base
+- Lightlink
+- Linea
+- Graphlinq
+- IOTA
+- CrossFi
 
-### `npm run eject`
+The list get updated constantly, so make sure to use latest version of the SDK.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+---
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+## Customizing Styles
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+The package comes with prebuilt styles that you must import in your project. Make sure to include the following CSS files:
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+```javascript
+import '@ape.swap/bonds-sdk/dist/styles.css'
+import 'swiper/swiper.min.css'
+```
 
-## Learn More
+These styles ensure that the components render correctly and include all necessary design details. You can customize or override styles using your own branding.
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+You can test and visualize the different customization options on the SDK styling playground (beta):
+
+https://sdk.ape.bond/
+
+Once you are happy with the styles, make sure to copy the output styles object and paste it under the `theme` param on the SDK component you will be using.
+
+Bear in mind, that the components of the SDK will use the width and height provided by the parent component.
+
+---
+
+## Dependencies
+
+The following are some key dependencies you must have for the SDK to work properly:
+
+- **React**: Required to build the UI. Ensure your project uses React v18 or later.
+- **Wagmi**: Used for handling wallet connections and blockchain interactions.
+
+---
+
+
+## 🦍 Built and Maintained by ApeSwap | ApeBond
+
+For questions, issues, or contributions, reach out to [ApeBond](https://ape.bond/) or contact us on  [Telegram](https://t.me/ape_bond) .
+
+---
+
+## License
+
+This package is licensed under the MIT License.

package/dist/components/uikit-sdk/index.d.ts

@@ -9,6 +9,7 @@ export { default as Toggle } from './Toggle';
 export { default as SwiperDots } from './SwiperDots';
 export { default as LoadingDots } from './LoadingDots';
 export { default as Checkbox } from './Checkbox';
+export { default as Input } from './Input/Input';
 export { Button, IconButton } from './Button';
 export { Select, SelectItem } from './Select';
 export { ListTag } from './Tag';

package/dist/main.d.ts

@@ -4,4 +4,5 @@ import BondModal from './views/BondModal';
 import FullBondsView from './views/FullBondsView';
 import ProjectView from './views/ProjectView';
 import { generateImageFromTemplate } from './views/YourBondsModal/components/LinkShare/utils';
-export { Bonds, BondModal, YourBonds, FullBondsView, ProjectView, generateImageFromTemplate };
+import { ChainId } from '@ape.swap/apeswap-lists';
+export { Bonds, BondModal, YourBonds, FullBondsView, ProjectView, generateImageFromTemplate, ChainId };