@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: , & .
- 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
`

---

Basic Usage

Here's an example of how to integrate the @ape.swap/bonds-sdk package into your project:

`textmate
import React from 'react'
import { FullBondsView, ChainId } from '@ape.swap/bonds-sdk'
import '@ape.swap/bonds-sdk/dist/styles.css'
import 'swiper/css'

const MyBondsComponent = () => {
return (
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",
customFont: 'Poppins',
"colors": {
"primaryButton": "#6560C5",
"white1": "#0E0D16",
"white2": "#161420",
"white3": "#1F1D29",
"white4": "#282632",
"white5": "#312F3A",
"text": "#FAFAFA",
"primaryBright": "#FFF"
}
}}
/>
)
}

export default MyBondsComponent
`

---

Configuration

The core of the SDK lies in its config object params, passed as a prop to its components. Below is a breakdown of key options:

| 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. |
| tokenSymbol | string[] | This parameter is specific to the component. It defines the token(s) to display in the UI. Currently, only a single token (one element in the array) is supported. |

$3

The SDK currently supports the following chains:

- Binance Smart Chain (BSC)
- Ethereum (MAINNET)
- Polygon (MATIC)
- Arbitrum
- Base
- Lightlink
- Linea
- Graphlinq
- IOTA
- CrossFi

The list get updated constantly, so make sure to use latest version of the SDK.

---

Customizing Styles

The package comes with prebuilt styles that you must import in your project. Make sure to include the following CSS files:

`javascript
import '@ape.swap/bonds-sdk/dist/styles.css'
import 'swiper/css'
`

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 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.

To use a custom font in the theme, include the customFont property with the name of your desired font family. Please note that you will need to manually download the font and embed it in your project using a