@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",
        "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.

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.