@ape.swap/bonds-sdk

@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:

# 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:

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'

const MyBondsComponent = () => {
  return (
    <FullBondsView
      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 <SingleBond /> component. It defines the token(s) to display in the UI. Currently, only a single token (one element in the array) is supported.

Chain Support

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:

import '@ape.swap/bonds-sdk/dist/styles.css'
import 'swiper/swiper.min.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 <script> or <link> tag in your HTML file.

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 or contact us on Telegram .

License

This package is licensed under the MIT License.