@goodaofi/bonds-sdk 3.0.144 → 3.0.145

package/README.md

@@ -36,7 +36,7 @@ Here's an example of how to integrate the `@ape.swap/bonds-sdk` package into you
 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'
+import 'swiper/css'
 
 const MyBondsComponent = () => {
   return (
@@ -83,14 +83,14 @@ export default MyBondsComponent
 
 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.|      
+| 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
 
@@ -117,12 +117,11 @@ The package comes with prebuilt styles that you must import in your project. Mak
 
 ```javascript
 import '@ape.swap/bonds-sdk/dist/styles.css'
-import 'swiper/swiper.min.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/
@@ -144,13 +143,12 @@ The following are some key dependencies you must have for the SDK to work proper
 
 ---
 
-
 ## 🦍 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) .
+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.
+This package is licensed under the MIT License.

package/dist/assets/{output-2LTDuc8n.css → output-BMW02kCQ.css}

@@ -1,22 +1,36 @@
 /**
- * Swiper 8.4.7
+ * Swiper 11.2.10
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2023 Vladimir Kharlampidi
+ * Copyright 2014-2025 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: January 30, 2023
+ * Released on: June 28, 2025
  */
+/* FONT_START */
 @font-face {
-  font-family: swiper-icons;
+  font-family: "swiper-icons";
   src: url("data:application/font-woff;charset=utf-8;base64, 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");
   font-weight: 400;
   font-style: normal;
 }
+/* FONT_END */
 :root {
-  --swiper-theme-color:#007aff;
+  --swiper-theme-color: #007aff;
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  --swiper-wrapper-transition-timing-function: initial;
+  */
+}
+
+:host {
+  position: relative;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1;
 }
 
 .swiper {
@@ -26,7 +40,9 @@
   overflow: hidden;
   list-style: none;
   padding: 0;
+  /* Fix of Webkit flickering */
   z-index: 1;
+  display: block;
 }
 
 .swiper-vertical > .swiper-wrapper {
@@ -40,18 +56,21 @@
   z-index: 1;
   display: flex;
   transition-property: transform;
+  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
   box-sizing: content-box;
 }
 
-.swiper-android .swiper-slide, .swiper-wrapper {
+.swiper-android .swiper-slide,
+.swiper-ios .swiper-slide,
+.swiper-wrapper {
   transform: translate3d(0px, 0, 0);
 }
 
-.swiper-pointer-events {
+.swiper-horizontal {
   touch-action: pan-y;
 }
 
-.swiper-pointer-events.swiper-vertical {
+.swiper-vertical {
   touch-action: pan-x;
 }
 
@@ -61,13 +80,16 @@
   height: 100%;
   position: relative;
   transition-property: transform;
+  display: block;
 }
 
 .swiper-slide-invisible-blank {
   visibility: hidden;
 }
 
-.swiper-autoheight, .swiper-autoheight .swiper-slide {
+/* Auto Height */
+.swiper-autoheight,
+.swiper-autoheight .swiper-slide {
   height: auto;
 }
 
@@ -82,48 +104,31 @@
   backface-visibility: hidden;
 }
 
-.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
+/* 3D Effects */
+.swiper-3d.swiper-css-mode .swiper-wrapper {
   perspective: 1200px;
 }
 
-.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper {
+.swiper-3d .swiper-wrapper {
   transform-style: preserve-3d;
 }
 
-.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.swiper-3d .swiper-slide-shadow {
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.swiper-3d .swiper-slide-shadow-left {
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-right {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-top {
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+.swiper-3d {
+  perspective: 1200px;
 }
 
-.swiper-3d .swiper-slide-shadow-bottom {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+.swiper-3d .swiper-slide,
+.swiper-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
 }
 
+/* CSS Mode */
 .swiper-css-mode > .swiper-wrapper {
   overflow: auto;
   scrollbar-width: none;
+  /* For Firefox */
   -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
 }
 
 .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
@@ -134,41 +139,129 @@
   scroll-snap-align: start start;
 }
 
-.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
   scroll-snap-type: x mandatory;
 }
 
-.swiper-vertical.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode.swiper-vertical > .swiper-wrapper {
   scroll-snap-type: y mandatory;
 }
 
-.swiper-centered > .swiper-wrapper::before {
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
+  scroll-snap-type: none;
+}
+
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: none;
+}
+
+.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
   content: "";
   flex-shrink: 0;
   order: 9999;
 }
 
-.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: center center;
+  scroll-snap-stop: always;
+}
+
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
   margin-inline-start: var(--swiper-centered-offset-before);
 }
 
-.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
   height: 100%;
   min-height: 1px;
   width: var(--swiper-centered-offset-after);
 }
 
-.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
   margin-block-start: var(--swiper-centered-offset-before);
 }
 
-.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
   width: 100%;
   min-width: 1px;
   height: var(--swiper-centered-offset-after);
 }
 
-.swiper-centered > .swiper-wrapper > .swiper-slide {
-  scroll-snap-align: center center;
-  scroll-snap-stop: always;
-}
+/* Slide styles start */
+/* 3D Shadows */
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+
+.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
+.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
+  animation: swiper-preloader-spin 1s infinite linear;
+}
+
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+
+@keyframes swiper-preloader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* Slide styles end */

package/dist/components/uikit-sdk/Skeleton/styles.d.ts

@@ -1,5 +1,15 @@
 import { ThemeUIStyleObject } from 'theme-ui';
-export declare const waves: import("@emotion/react").Keyframes;
-export declare const pulse: import("@emotion/react").Keyframes;
+export declare const waves: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const pulse: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
 declare const styles: Record<string, ThemeUIStyleObject>;
 export default styles;