@ape.swap/bonds-sdk 5.1.2 → 5.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,22 +18,38 @@ The `@ape.swap/bonds-sdk` package provides an embeddable set of tools and UI com
|
|
|
18
18
|
|
|
19
19
|
To install the package via npm or yarn, run the following command:
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
npm install @ape.swap/bonds-sdk
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
npm:
|
|
22
|
+
```bash
|
|
23
|
+
npm install "@ape.swap/bonds-sdk@solana" @bigmi/react@^0.6.5 @lifi/widget@^3.40.6 @mysten/dapp-kit@^0.19.11 @solana/kit@2.3.0 @solana/spl-token@^0.4.14 @solana/wallet-adapter-react@^0.15.39 @solana/wallet-adapter-react-ui@^0.9.39 @solana/web3.js@^1.98.4 @tanstack/react-query@^5.90.2 axios@^1.8.2 wagmi@^2.14.16 swiper ethers@^5.8.0
|
|
24
|
+
```
|
|
25
|
+
yarn:
|
|
26
|
+
```bash
|
|
27
|
+
yarn add "@ape.swap/bonds-sdk@solana" @bigmi/react@^0.6.5 @lifi/widget@^3.40.6 @mysten/dapp-kit@^0.19.11 @solana/kit@2.3.0 @solana/spl-token@^0.4.14 @solana/wallet-adapter-react@^0.15.39 @solana/wallet-adapter-react-ui@^0.9.39 @solana/web3.js@^1.98.4 @tanstack/react-query@^5.90.2 axios@^1.8.2 wagmi@^2.14.16 swiper ethers@^5.8.0
|
|
27
28
|
```
|
|
28
29
|
|
|
29
30
|
---
|
|
30
31
|
|
|
31
|
-
##
|
|
32
|
+
## Peer Dependencies
|
|
32
33
|
|
|
33
34
|
The following are some key dependencies you must have for the SDK to work properly:
|
|
34
35
|
|
|
35
|
-
- **React
|
|
36
|
-
- **
|
|
36
|
+
- **React** (>=17 <19): Required to build the UI. Ensure your project uses React v17 or later.
|
|
37
|
+
- **React DOM** (>=17 <19): Required for rendering React components to the DOM.
|
|
38
|
+
- **Wagmi** (^2.14.16): Used for handling EVM wallet connections and blockchain interactions.
|
|
39
|
+
- **@bigmi/react** (^0.6.5): Multi-chain wallet connection library supporting EVM and non-EVM chains.
|
|
40
|
+
- **@lifi/widget** (^3.40.6): Cross-chain bridge and swap widget integration.
|
|
41
|
+
- **@mysten/dapp-kit** (^0.19.11): Sui blockchain dApp development kit for wallet connections and interactions.
|
|
42
|
+
- **@solana/kit** (2.3.0): Comprehensive toolkit for Solana blockchain development.
|
|
43
|
+
- **@solana/spl-token** (^0.4.14): Library for interacting with Solana SPL tokens.
|
|
44
|
+
- **@solana/wallet-adapter-react** (^0.15.39): React hooks for Solana wallet connections.
|
|
45
|
+
- **@solana/wallet-adapter-react-ui** (^0.9.39): Pre-built UI components for Solana wallet connections.
|
|
46
|
+
- **@solana/web3.js** (^1.98.4): Core library for interacting with the Solana blockchain.
|
|
47
|
+
- **@tanstack/react-query** (^5.90.2): Powerful data synchronization and caching library for React applications.
|
|
48
|
+
- **Axios** (^1.8.2): Promise-based HTTP client for making API requests.
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
Optional:
|
|
52
|
+
- **@rainbow-me/rainbowkit** (^2.1.7 - optional): Wallet connection UI library for EVM chains with beautiful pre-built components.
|
|
37
53
|
|
|
38
54
|
---
|
|
39
55
|
|
|
@@ -43,9 +59,10 @@ Here's an example of how to integrate the `@ape.swap/bonds-sdk` package into you
|
|
|
43
59
|
|
|
44
60
|
```textmate
|
|
45
61
|
import React from 'react'
|
|
46
|
-
import
|
|
47
|
-
import '@ape.swap/
|
|
48
|
-
import '
|
|
62
|
+
import FullBondsView from '@ape.swap/bonds-sdk/views/FullBondsView'
|
|
63
|
+
import { ChainId } from '@ape.swap/apeswap-lists'
|
|
64
|
+
import '@ape.swap/bonds-sdk/styles.css'
|
|
65
|
+
import 'swiper/css' // only if useHotBonds: true
|
|
49
66
|
|
|
50
67
|
const MyBondsComponent = () => {
|
|
51
68
|
return (
|
|
@@ -62,23 +79,25 @@ const MyBondsComponent = () => {
|
|
|
62
79
|
ChainId.GRAPHLINQ,
|
|
63
80
|
ChainId.IOTA,
|
|
64
81
|
ChainId.CROSSFI,
|
|
65
|
-
|
|
82
|
+
]}
|
|
66
83
|
connector={'rainbowkit'}
|
|
84
|
+
hotBondChains={[ChainId.BSC]}
|
|
85
|
+
useTiers={true}
|
|
67
86
|
useHotBonds={true}
|
|
68
87
|
theme={{
|
|
69
|
-
|
|
88
|
+
radii: '10px',
|
|
70
89
|
customFont: 'Poppins',
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
90
|
+
colors: {
|
|
91
|
+
primaryButton: '#6560C5',
|
|
92
|
+
white1: '#0E0D16',
|
|
93
|
+
white2: '#161420',
|
|
94
|
+
white3: '#1F1D29',
|
|
95
|
+
white4: '#282632',
|
|
96
|
+
white5: '#312F3A',
|
|
97
|
+
text: '#FAFAFA',
|
|
98
|
+
primaryBright: '#FFF',
|
|
99
|
+
},
|
|
100
|
+
}}
|
|
82
101
|
/>
|
|
83
102
|
)
|
|
84
103
|
}
|
|
@@ -92,23 +111,24 @@ export default MyBondsComponent
|
|
|
92
111
|
|
|
93
112
|
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:
|
|
94
113
|
|
|
95
|
-
| Property
|
|
96
|
-
|
|
97
|
-
| `referenceId`
|
|
98
|
-
| `chains`
|
|
99
|
-
| `connector`
|
|
100
|
-
| `useHotBonds`
|
|
101
|
-
| `theme`
|
|
102
|
-
| `
|
|
114
|
+
| Property | Type | Description |
|
|
115
|
+
|------------------|-----------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
116
|
+
| `referenceId` | `string` | A unique identifier for the bonds, shall be provided by ApeBond team. |
|
|
117
|
+
| `chains` | `number[]` | An array of supported chain IDs (e.g., `56`, `1`, `137`, etc). It also determines the order of the chains on the bond list. |
|
|
118
|
+
| `connector` | `'rainbowkit' 'appkit' 'default'` | Determines your preferred wallet-connector. If your connector is not listed here get in contact with the dev team to request the integration. |
|
|
119
|
+
| `useHotBonds` | `boolean` | Whether to show the "hot bonds" component. |
|
|
120
|
+
| `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. |
|
|
121
|
+
| `hotBondsChains` | `number[]` | Determines the position of the hotbonds section. The component will be placed bellow the indicated chains. |
|
|
122
|
+
| `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. |
|
|
103
123
|
|
|
104
124
|
### Chain Support
|
|
105
125
|
|
|
106
126
|
The SDK currently supports the following chains:
|
|
107
127
|
|
|
108
128
|
EVM:
|
|
109
|
-
-
|
|
110
|
-
-
|
|
111
|
-
- Polygon
|
|
129
|
+
- Ethereum
|
|
130
|
+
- BNB Chain (BSC)
|
|
131
|
+
- Polygon
|
|
112
132
|
- Arbitrum
|
|
113
133
|
- Base
|
|
114
134
|
- Lightlink
|
|
@@ -121,6 +141,8 @@ EVM:
|
|
|
121
141
|
- Sonic
|
|
122
142
|
- Katana
|
|
123
143
|
- Monad Testnet
|
|
144
|
+
- Hyper EVM
|
|
145
|
+
- Avalanche
|
|
124
146
|
|
|
125
147
|
Non-EVM:
|
|
126
148
|
- SOLANA
|
|
@@ -135,7 +157,7 @@ The package comes with prebuilt styles that you must import in your project. Mak
|
|
|
135
157
|
|
|
136
158
|
```javascript
|
|
137
159
|
import '@ape.swap/bonds-sdk/dist/styles.css'
|
|
138
|
-
import 'swiper/
|
|
160
|
+
import 'swiper/css' // only if useHotBonds is true
|
|
139
161
|
```
|
|
140
162
|
|
|
141
163
|
These styles ensure that the components render correctly and include all necessary design details. You can customize or override styles using your own branding.
|