@ape.swap/bonds-sdk 1.1.0-test.84 → 1.1.0-test.88

package/dist/main.js

@@ -1379,7 +1379,7 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-var isDevelopment$3 = false;
+var isDevelopment$2 = false;
 
 /*
 
@@ -1461,7 +1461,7 @@ var StyleSheet = /*#__PURE__*/function () {
       _this.tags.push(tag);
     };
 
-    this.isSpeedy = options.speedy === undefined ? !isDevelopment$3 : options.speedy;
+    this.isSpeedy = options.speedy === undefined ? !isDevelopment$2 : options.speedy;
     this.tags = [];
     this.ctr = 0;
     this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
@@ -2139,7 +2139,7 @@ function memoize$2(fn) {
   };
 }
 
-var isBrowser$5 = typeof document !== 'undefined';
+var isBrowser$4 = typeof document !== 'undefined';
 
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
   var previous = 0;
@@ -2492,7 +2492,7 @@ export type Options = {
 }
 */
 
-var getServerStylisCache = isBrowser$5 ? undefined : weakMemoize(function () {
+var getServerStylisCache = isBrowser$4 ? undefined : weakMemoize(function () {
   return memoize$2(function () {
     var cache = {};
     return function (name) {
@@ -2509,7 +2509,7 @@ createCache(options
 ) {
   var key = options.key;
 
-  if (isBrowser$5 && key === 'css') {
+  if (isBrowser$4 && key === 'css') {
     var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
     // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
     // note this very very intentionally targets all style elements regardless of the key to ensure
@@ -2543,7 +2543,7 @@ createCache(options
 
   var nodesToHydrate = [];
 
-  if (isBrowser$5) {
+  if (isBrowser$4) {
     container = options.container || document.head;
     Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
     // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
@@ -2571,7 +2571,7 @@ createCache(options
 
   var omnipresentPlugins = [compat, removeLabel];
 
-  if (isBrowser$5) {
+  if (isBrowser$4) {
     var currentSheet;
     var finalizingPlugins = [stringify, rulesheet(function (rule) {
       currentSheet.insert(rule);
@@ -2689,16 +2689,6 @@ createCache(options
   return cache;
 };
 
-function _extends$2() {
-  return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$2.apply(null, arguments);
-}
-
 var reactIs$1 = {exports: {}};
 
 var reactIs_production_min = {};
@@ -2943,7 +2933,7 @@ var TYPE_STATICS = {};
 TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
 TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
 
-var isBrowser$4 = typeof document !== 'undefined';
+var isBrowser$3 = typeof document !== 'undefined';
 
 function getRegisteredStyles(registered, registeredStyles, classNames) {
   var rawClassName = '';
@@ -2968,7 +2958,7 @@ var registerStyles = function registerStyles(cache, serialized, isStringTag) {
   // in node since emotion-server relies on whether a style is in
   // the registered cache to know whether a style is global or not
   // also, note that this check will be dead code eliminated in the browser
-  isBrowser$4 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+  isBrowser$3 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
   }
 };
@@ -2983,14 +2973,14 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
     do {
       var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
 
-      if (!isBrowser$4 && maybeStyles !== undefined) {
+      if (!isBrowser$3 && maybeStyles !== undefined) {
         stylesForSSR += maybeStyles;
       }
 
       current = current.next;
     } while (current !== undefined);
 
-    if (!isBrowser$4 && stylesForSSR.length !== 0) {
+    if (!isBrowser$3 && stylesForSSR.length !== 0) {
       return stylesForSSR;
     }
   }
@@ -3101,7 +3091,7 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
-var isDevelopment$2 = false;
+var isDevelopment$1 = false;
 
 var hyphenateRegex = /[A-Z]|^ms/g;
 var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
@@ -3218,12 +3208,9 @@ function handleInterpolation(mergedProps, registered, interpolation) {
 
   var asString = interpolation;
 
-  if (registered == null) {
+  {
     return asString;
   }
-
-  var cached = registered[asString];
-  return cached !== undefined ? cached : asString;
 }
 
 function createStringFromObject(mergedProps, registered, obj) {
@@ -3240,17 +3227,15 @@ function createStringFromObject(mergedProps, registered, obj) {
       if (typeof value !== 'object') {
         var asString = value;
 
-        if (registered != null && registered[asString] !== undefined) {
-          string += key + "{" + registered[asString] + "}";
-        } else if (isProcessableValue(asString)) {
+        if (isProcessableValue(asString)) {
           string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
         }
       } else {
-        if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment$2) {
+        if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment$1) {
           throw new Error(noComponentSelectorMessage);
         }
 
-        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
+        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null)) {
           for (var _i = 0; _i < value.length; _i++) {
             if (isProcessableValue(value[_i])) {
               string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
@@ -3334,19 +3319,19 @@ function serializeStyles(args, registered, mergedProps) {
   };
 }
 
-var isBrowser$3 = typeof document !== 'undefined';
+var isBrowser$2 = typeof document !== 'undefined';
 
 var syncFallback = function syncFallback(create) {
   return create();
 };
 
 var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
-var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$3 ? syncFallback : useInsertionEffect || syncFallback;
+var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$2 ? syncFallback : useInsertionEffect || syncFallback;
 var useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;
 
-var isDevelopment$1 = false;
+var isDevelopment = false;
 
-var isBrowser$2 = typeof document !== 'undefined';
+var isBrowser$1 = typeof document !== 'undefined';
 
 /* import { type EmotionCache } from '@emotion/utils' */
 var EmotionCacheContext
@@ -3381,7 +3366,7 @@ var withEmotionCache = function withEmotionCache
   });
 };
 
-if (!isBrowser$2) {
+if (!isBrowser$1) {
   withEmotionCache = function withEmotionCache
   /* <Props> */
   (func
@@ -3443,7 +3428,7 @@ var createEmotionProps = function createEmotionProps(type
   return newProps;
 };
 
-var Insertion$1 = function Insertion(_ref) {
+var Insertion = function Insertion(_ref) {
   var cache = _ref.cache,
       serialized = _ref.serialized,
       isStringTag = _ref.isStringTag;
@@ -3452,7 +3437,7 @@ var Insertion$1 = function Insertion(_ref) {
     return insertStyles(cache, serialized, isStringTag);
   });
 
-  if (!isBrowser$2 && rules !== undefined) {
+  if (!isBrowser$1 && rules !== undefined) {
     var _ref2;
 
     var serializedNames = serialized.name;
@@ -3498,7 +3483,7 @@ function (props, cache, ref) {
   var newProps = {};
 
   for (var key in props) {
-    if (hasOwn.call(props, key) && key !== 'css' && key !== typePropName && (!isDevelopment$1 )) {
+    if (hasOwn.call(props, key) && key !== 'css' && key !== typePropName && (!isDevelopment )) {
       newProps[key] = props[key];
     }
   }
@@ -3509,7 +3494,7 @@ function (props, cache, ref) {
     newProps.ref = ref;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {
     cache: cache,
     serialized: serialized,
     isStringTag: typeof WrappedComponent === 'string'
@@ -5088,7 +5073,7 @@ GlobalProps
   var styles = props.styles;
   var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));
 
-  if (!isBrowser$2) {
+  if (!isBrowser$1) {
     var _ref;
 
     var serializedNames = serialized.name;
@@ -7448,7 +7433,7 @@ const pulse = keyframes$1({
     '50%': { opacity: 0.4 },
     '100%': { opacity: 1 },
 });
-const styles$c = {
+const styles$b = {
     waves: {
         position: 'relative',
         overflow: 'hidden',
@@ -7480,7 +7465,7 @@ const styles$c = {
 
 const Skeleton = (_a) => {
     var { variant: variant$1 = variant.RECT, animation: animation$1 = animation.PULSE } = _a, props = __rest(_a, ["variant", "animation"]);
-    return (jsx$2(Box$1, Object.assign({}, props, { sx: Object.assign(Object.assign({}, (animation$1 === animation.WAVES ? styles$c.waves : styles$c.pulse)), { height: props.height, width: props.width, borderRadius: variant$1 === variant.RECT ? '10px' : '50%' }) })));
+    return (jsx$2(Box$1, Object.assign({}, props, { sx: Object.assign(Object.assign({}, (animation$1 === animation.WAVES ? styles$b.waves : styles$b.pulse)), { height: props.height, width: props.width, borderRadius: variant$1 === variant.RECT ? '10px' : '50%' }) })));
 };
 
 var placements;
@@ -7518,7 +7503,7 @@ const container = (hide) => ({
         display: hide ? 'none' : 'block',
     },
 });
-const styles$b = {
+const styles$a = {
     default: Object.assign({ color: 'text', fontSize: 0, lineHeight: '18px', fontWeight: 'normal' }, baseStyle),
     bottomRight: {
         '&::before': Object.assign(Object.assign({ position: 'absolute' }, bottomArrow), { right: '3%', borderBottomColor: 'white2' }),
@@ -7577,7 +7562,7 @@ const TooltipBubble = (_a) => {
     const handleClick = (event) => {
         event.stopPropagation();
     };
-    return (jsxs(Box$1, { sx: container(hideTooltip), onClick: handleClick, children: [jsx$2(Box$1, { sx: Object.assign({ position: 'absolute' }, (placementStyles[placement] || {})), children: jsx$2(Box$1, Object.assign({ sx: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative' }, styles$b.default), styles$b[placement]), backgroundColorStyle), { width, transform: transformTip }) }, props, { children: body })) }), children] }));
+    return (jsxs(Box$1, { sx: container(hideTooltip), onClick: handleClick, children: [jsx$2(Box$1, { sx: Object.assign({ position: 'absolute' }, (placementStyles[placement] || {})), children: jsx$2(Box$1, Object.assign({ sx: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative' }, styles$a.default), styles$a[placement]), backgroundColorStyle), { width, transform: transformTip }) }, props, { children: body })) }), children] }));
 };
 
 const warned = new Set();
@@ -10889,7 +10874,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.11.9";
+        this.version = "11.11.10";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -11209,8 +11194,6 @@ function isWillChangeMotionValue(value) {
 }
 
 function addValueToWillChange(visualElement, key) {
-    if (!visualElement.applyWillChange)
-        return;
     const willChange = visualElement.getValue("willChange");
     /**
      * It could be that a user has set willChange to a regular MotionValue,
@@ -15578,9 +15561,9 @@ const MotionConfigContext = createContext({
 
 const MotionContext = createContext({});
 
-const isBrowser$1 = typeof window !== "undefined";
+const isBrowser = typeof window !== "undefined";
 
-const useIsomorphicLayoutEffect$1 = isBrowser$1 ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$1 = isBrowser ? useLayoutEffect : useEffect;
 
 const LazyContext = createContext({ strict: false });
 
@@ -15822,7 +15805,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
         const { isStatic } = configAndProps;
         const context = useCreateMotionContext(props);
         const visualState = useVisualState(props, isStatic);
-        if (!isStatic && isBrowser$1) {
+        if (!isStatic && isBrowser) {
             useStrictMode(configAndProps, preloadedFeatures);
             const layoutProjection = getProjectionFunctionality(configAndProps);
             MeasureLayout = layoutProjection.MeasureLayout;
@@ -16001,13 +15984,6 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
             newValues[key] = style[key];
         }
     }
-    /**
-     * If the willChange style has been manually set as a string, set
-     * applyWillChange to false to prevent it from automatically being applied.
-     */
-    if (visualElement && style && typeof style.willChange === "string") {
-        visualElement.applyWillChange = false;
-    }
     return newValues;
 }
 
@@ -16040,18 +16016,9 @@ function useConstant(init) {
     return ref.current;
 }
 
-function getWillChangeName(name) {
-    if (transformProps.has(name)) {
-        return "transform";
-    }
-    else if (acceleratedValues.has(name)) {
-        return camelToDash(name);
-    }
-}
-
-function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext, isStatic) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
     const state = {
-        latestValues: makeLatestValues(props, context, presenceContext, isStatic ? false : applyWillChange, scrapeMotionValuesFromProps),
+        latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
     if (onMount) {
@@ -16062,24 +16029,11 @@ function makeState({ applyWillChange = false, scrapeMotionValuesFromProps, creat
 const makeUseVisualState = (config) => (props, isStatic) => {
     const context = useContext(MotionContext);
     const presenceContext = useContext(PresenceContext);
-    const make = () => makeState(config, props, context, presenceContext, isStatic);
+    const make = () => makeState(config, props, context, presenceContext);
     return isStatic ? make() : useConstant(make);
 };
-function forEachDefinition(props, definition, callback) {
-    const list = Array.isArray(definition) ? definition : [definition];
-    for (let i = 0; i < list.length; i++) {
-        const resolved = resolveVariantFromProps(props, list[i]);
-        if (resolved) {
-            const { transitionEnd, transition, ...target } = resolved;
-            callback(target, transitionEnd);
-        }
-    }
-}
-function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
-    var _a;
+function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     const values = {};
-    const willChange = new Set();
-    const applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
     const motionValues = scrapeMotionValues(props, {});
     for (const key in motionValues) {
         values[key] = resolveMotionValue(motionValues[key]);
@@ -16104,42 +16058,31 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
     if (variantToSet &&
         typeof variantToSet !== "boolean" &&
         !isAnimationControls(variantToSet)) {
-        forEachDefinition(props, variantToSet, (target, transitionEnd) => {
-            for (const key in target) {
-                let valueTarget = target[key];
-                if (Array.isArray(valueTarget)) {
-                    /**
-                     * Take final keyframe if the initial animation is blocked because
-                     * we want to initialise at the end of that blocked animation.
-                     */
-                    const index = isInitialAnimationBlocked
-                        ? valueTarget.length - 1
-                        : 0;
-                    valueTarget = valueTarget[index];
+        const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+        for (let i = 0; i < list.length; i++) {
+            const resolved = resolveVariantFromProps(props, list[i]);
+            if (resolved) {
+                const { transitionEnd, transition, ...target } = resolved;
+                for (const key in target) {
+                    let valueTarget = target[key];
+                    if (Array.isArray(valueTarget)) {
+                        /**
+                         * Take final keyframe if the initial animation is blocked because
+                         * we want to initialise at the end of that blocked animation.
+                         */
+                        const index = isInitialAnimationBlocked
+                            ? valueTarget.length - 1
+                            : 0;
+                        valueTarget = valueTarget[index];
+                    }
+                    if (valueTarget !== null) {
+                        values[key] = valueTarget;
+                    }
                 }
-                if (valueTarget !== null) {
-                    values[key] = valueTarget;
+                for (const key in transitionEnd) {
+                    values[key] = transitionEnd[key];
                 }
             }
-            for (const key in transitionEnd) {
-                values[key] = transitionEnd[key];
-            }
-        });
-    }
-    // Add animating values to will-change
-    if (applyWillChange) {
-        if (animate && initial !== false && !isAnimationControls(animate)) {
-            forEachDefinition(props, animate, (target) => {
-                for (const name in target) {
-                    const memberName = getWillChangeName(name);
-                    if (memberName) {
-                        willChange.add(memberName);
-                    }
-                }
-            });
-        }
-        if (willChange.size) {
-            values.willChange = Array.from(willChange).join(",");
         }
     }
     return values;
@@ -16407,7 +16350,6 @@ const svgMotionConfig = {
 
 const htmlMotionConfig = {
     useVisualState: makeUseVisualState({
-        applyWillChange: true,
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
         createRenderState: createHtmlRenderState,
     }),
@@ -16639,7 +16581,7 @@ const hasReducedMotionListener = { current: false };
 
 function initPrefersReducedMotion() {
     hasReducedMotionListener.current = true;
-    if (!isBrowser$1)
+    if (!isBrowser)
         return;
     if (window.matchMedia) {
         const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
@@ -16667,7 +16609,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.9 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.10 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -16742,11 +16684,6 @@ class VisualElement {
         return {};
     }
     constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) {
-        /**
-         * If true, will-change will be applied to the element. Only HTMLVisualElements
-         * currently support this.
-         */
-        this.applyWillChange = false;
         /**
          * A reference to the current underlying Instance, e.g. a HTMLElement
          * or Three.Mesh etc.
@@ -17207,7 +17144,6 @@ class HTMLVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "html";
-        this.applyWillChange = true;
         this.renderInstance = renderHTML;
     }
     readValueFromInstance(instance, key) {
@@ -17582,7 +17518,7 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
         }) }));
 };
 
-const styles$a = {
+const styles$9 = {
     container: {
         padding: '20px',
         background: 'white2',
@@ -17758,7 +17694,7 @@ const defaultStyle = {
         transform: 'scale(0.9)',
     },
 };
-const styles$9 = {
+const styles$8 = {
     primary: Object.assign({}, defaultStyle),
     transparent: Object.assign(Object.assign({}, defaultStyle), { backgroundColor: 'transparent', backgroundRepeat: 'no-repeat', padding: '0px', border: 'none', cursor: 'pointer', svg: {
             background: 'transparent',
@@ -17767,12 +17703,12 @@ const styles$9 = {
 
 const IconButton = (_a) => {
     var { icon = icons.DISCORD, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children } = _a, props = __rest(_a, ["icon", "color", "background", "variant", "iconWidth", "children"]);
-    return (jsx$2(Button$1, Object.assign({}, props, { variant: variant, sx: Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', variant: `buttons.${variant}`, color: 'primaryBright', background }, (variant === iconButtonVariants.PRIMARY ? styles$9.primary : {})), (variant === iconButtonVariants.TRANSPARENT ? styles$9.transparent : {})), children: children || (jsx$2("span", { sx: { height: iconWidth, width: iconWidth }, children: jsx$2(Svg, Object.assign({ color: color, icon: icon }, props, { width: iconWidth })) })) })));
+    return (jsx$2(Button$1, Object.assign({}, props, { variant: variant, sx: Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', variant: `buttons.${variant}`, color: 'primaryBright', background }, (variant === iconButtonVariants.PRIMARY ? styles$8.primary : {})), (variant === iconButtonVariants.TRANSPARENT ? styles$8.transparent : {})), children: children || (jsx$2("span", { sx: { height: iconWidth, width: iconWidth }, children: jsx$2(Svg, Object.assign({ color: color, icon: icon }, props, { width: iconWidth })) })) })));
 };
 
 const ModalHeader = (_a) => {
     var { children, onDismiss, hideDivider } = _a, props = __rest(_a, ["children", "onDismiss", "hideDivider"]);
-    return (jsxs(Fragment$1, { children: [jsxs(Flex$1, Object.assign({}, props, { sx: styles$a.modalHead, children: [children, onDismiss && jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: onDismiss })] })), !hideDivider && jsx$2(Divider, {})] }));
+    return (jsxs(Fragment$1, { children: [jsxs(Flex$1, Object.assign({}, props, { sx: styles$9.modalHead, children: [children, onDismiss && jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: onDismiss })] })), !hideDivider && jsx$2(Divider, {})] }));
 };
 
 const Modal = (_a) => {
@@ -17788,10 +17724,10 @@ const Modal = (_a) => {
                     }, transition: {
                         opacity: { duration: 0.2 },
                         transform: { duration: 0.2 },
-                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' } }, props, { sx: Object.assign(Object.assign({}, styles$a.container), { zIndex }), onAnimationComplete: onAnimationComplete, children: [title && (jsx$2(ModalHeader, { onDismiss: onClose, children: jsx$2(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] }))) }), open && jsx$2(Box$1, { sx: Object.assign(Object.assign({}, styles$a.backdrop), backdrop), onClick: onClose })] }));
+                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' } }, props, { sx: Object.assign(Object.assign({}, styles$9.container), { zIndex }), onAnimationComplete: onAnimationComplete, children: [title && (jsx$2(ModalHeader, { onDismiss: onClose, children: jsx$2(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] }))) }), open && jsx$2(Box$1, { sx: Object.assign(Object.assign({}, styles$9.backdrop), backdrop), onClick: onClose })] }));
 };
 
-const styles$8 = {
+const styles$7 = {
     container: {
         display: 'flex',
         borderRadius: '10px',
@@ -18731,24 +18667,24 @@ const QUERY_KEYS = {
     AB_TEST_VALUE: 'ABTestValue',
     USE_CURRENCY_NEW: 'useCurrencyNew',
     // used values on SDK
-    SDK_CONFIG: 'sdkConfig',
-    BOND_RECOMMENDATIONS: 'bondRecommendations',
-    USER_STATS: 'userStats',
-    BONDS_DATA: 'bondsData',
-    BONDS_LIST: 'bondsList',
-    USER_BONDS: 'userBonds',
-    BOND_NFT_DATA: 'bondNFTData',
-    TOKEN_PRICES: 'tokenPrices',
-    HOT_BONDS: 'hotBonds',
-    HOT_BONDS_CONTRACTS: 'hotBondsContracts',
-    CURRENCY_BALANCE: 'currencyBalance',
-    ALLOWANCE: 'allowance',
-    SLIPPAGE: 'slippage',
-    ZAP_TOKEN_QUOTE: 'zapTokenQuote',
-    ZAP_BOND_QUOTE: 'zapBondQuote',
-    CHAIN_FILTER_OPTION: 'chainFilterOption',
-    FAVORITE_TOKENS: 'favoriteTokens',
-    POP_UPS: 'popUps',
+    SDK_CONFIG: 'ApeBond-SDK-sdkConfig',
+    BOND_RECOMMENDATIONS: 'ApeBond-SDK-bondRecommendations',
+    USER_STATS: 'ApeBond-SDK-userStats',
+    BONDS_DATA: 'ApeBond-SDK-bondsData',
+    BONDS_LIST: 'ApeBond-SDK-bondsList',
+    USER_BONDS: 'ApeBond-SDK-userBonds',
+    BOND_NFT_DATA: 'ApeBond-SDK-bondNFTData',
+    TOKEN_PRICES: 'ApeBond-SDK-tokenPrices',
+    HOT_BONDS: 'ApeBond-SDK-hotBonds',
+    HOT_BONDS_CONTRACTS: 'ApeBond-SDK-hotBondsContracts',
+    CURRENCY_BALANCE: 'ApeBond-SDK-currencyBalance',
+    ALLOWANCE: 'ApeBond-SDK-allowance',
+    SLIPPAGE: 'ApeBond-SDK-slippage',
+    ZAP_TOKEN_QUOTE: 'ApeBond-SDK-zapTokenQuote',
+    ZAP_BOND_QUOTE: 'ApeBond-SDK-zapBondQuote',
+    CHAIN_FILTER_OPTION: 'ApeBond-SDK-chainFilterOption',
+    FAVORITE_TOKENS: 'ApeBond-SDK-favoriteTokens',
+    POP_UPS: 'ApeBond-SDK-popUps',
 };
 
 function useCookie(key, defaultValue) {
@@ -18826,15 +18762,16 @@ const NETWORK_COLORS = {
     [types.ChainId.IOTA]: '#fff',
 };
 const TokenInfoAndName = ({ bill, vestEnds, isHotBond, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const tokenName = 'showcaseTokenName' in bill ? bill.showcaseTokenName : bill.earnToken.symbol;
+    console.log(tokenName);
     return (jsxs(Flex, { className: "tokeninfoname container", children: [jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _a !== void 0 ? _a : 'question' }) }), jsx$2(Flex, { className: "tokeninfoname gradient", sx: {
                     background: isHotBond || vestEnds ? 'transparent' : NETWORK_COLORS[bill.chainId],
                 } }), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: { marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0 }, children: [jsx$2(TokenImage, { symbol: tokenName, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [tokenName, vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond }) })] }), jsx$2(Flex, { sx: {
                     display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'],
                     justifyContent: isHotBond ? 'center' : 'flex-start',
                     width: '100%',
-                }, children: ((_b = bill.tags) === null || _b === void 0 ? void 0 : _b[0]) && (jsx$2(ListTag, { variant: ((_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: (_e = (_d = bill.tags) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.toUpperCase() })) })] }));
+                }, children: ((_b = bill.tags) === null || _b === void 0 ? void 0 : _b[0]) && jsx$2(ListTag, { text: (_d = (_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase() }) })] }));
 };
 
 const MINUTE_IN_SECONDS = 60;
@@ -18881,18 +18818,6 @@ const getTimePeriods = (seconds, days) => {
     return timeLeft;
 };
 
-const useCurrentTime = () => {
-    const [currentMillis, setCurrentMillis] = useState(new Date().getTime());
-    useEffect(() => {
-        const tick = () => {
-            setCurrentMillis((prevMillis) => prevMillis + 1000);
-        };
-        const timerID = setInterval(() => tick(), 1000);
-        return () => clearInterval(timerID);
-    }, []);
-    return currentMillis;
-};
-
 const getPendingVesting = (lastBlockTimestamp, vesting) => {
     const currentTime = new Date().getTime() / 1000;
     const vestingTime = getTimePeriods(parseInt(lastBlockTimestamp) + parseInt(vesting) - currentTime, true);
@@ -39076,7 +39001,7 @@ const totalPending = (userBill) => {
     return getBalanceNumber(new BigNumber$1((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 18);
 };
 const vestingTimeRemaining = (userBill) => {
-    const currentTime = useCurrentTime() / 1000;
+    const currentTime = new Date().getTime() / 1000;
     return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - currentTime, true);
 };
 const discountEarnTokenPrice = (bond) => {
@@ -41546,301 +41471,6 @@ const useModal = (modal, closeOnOverlayClick = true, updateOnPropsChange = false
     return [onPresentCallback, handleClose];
 };
 
-// eslint-disable-next-line no-undef
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
-
-var isPropValid = /* #__PURE__ */memoize$2(function (prop) {
-  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
-  /* o */
-  && prop.charCodeAt(1) === 110
-  /* n */
-  && prop.charCodeAt(2) < 91;
-}
-/* Z+1 */
-);
-
-/* import type {
-  ElementType,
-  StatelessFunctionalComponent,
-  AbstractComponent
-} from 'react' */
-/*
-export type Interpolations = Array<any>
-
-export type StyledElementType<Props> =
-  | string
-  | AbstractComponent<{ ...Props, className: string }, mixed>
-
-export type StyledOptions = {
-  label?: string,
-  shouldForwardProp?: string => boolean,
-  target?: string
-}
-
-export type StyledComponent<Props> = StatelessFunctionalComponent<Props> & {
-  defaultProps: any,
-  toString: () => string,
-  withComponent: (
-    nextTag: StyledElementType<Props>,
-    nextOptions?: StyledOptions
-  ) => StyledComponent<Props>
-}
-
-export type PrivateStyledComponent<Props> = StyledComponent<Props> & {
-  __emotion_real: StyledComponent<Props>,
-  __emotion_base: any,
-  __emotion_styles: any,
-  __emotion_forwardProp: any
-}
-*/
-
-var testOmitPropsOnStringTag = isPropValid;
-
-var testOmitPropsOnComponent = function testOmitPropsOnComponent(key
-/*: string */
-) {
-  return key !== 'theme';
-};
-
-var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag
-/*: ElementType */
-) {
-  return typeof tag === 'string' && // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
-};
-var composeShouldForwardProps = function composeShouldForwardProps(tag
-/*: PrivateStyledComponent<any> */
-, options
-/*: StyledOptions | void */
-, isReal
-/*: boolean */
-) {
-  var shouldForwardProp;
-
-  if (options) {
-    var optionsShouldForwardProp = options.shouldForwardProp;
-    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName
-    /*: string */
-    ) {
-      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
-    } : optionsShouldForwardProp;
-  }
-
-  if (typeof shouldForwardProp !== 'function' && isReal) {
-    shouldForwardProp = tag.__emotion_forwardProp;
-  }
-
-  return shouldForwardProp;
-};
-/*
-export type CreateStyledComponent = <Props>(
-  ...args: Interpolations
-) => StyledComponent<Props>
-
-export type CreateStyled = {
-  <Props>(
-    tag: StyledElementType<Props>,
-    options?: StyledOptions
-  ): (...args: Interpolations) => StyledComponent<Props>,
-  [key: string]: CreateStyledComponent,
-  bind: () => CreateStyled
-}
-*/
-
-var isDevelopment = false;
-
-var isBrowser = typeof document !== 'undefined';
-
-var Insertion = function Insertion(_ref) {
-  var cache = _ref.cache,
-      serialized = _ref.serialized,
-      isStringTag = _ref.isStringTag;
-  registerStyles(cache, serialized, isStringTag);
-  var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
-    return insertStyles(cache, serialized, isStringTag);
-  });
-
-  if (!isBrowser && rules !== undefined) {
-    var _ref2;
-
-    var serializedNames = serialized.name;
-    var next = serialized.next;
-
-    while (next !== undefined) {
-      serializedNames += ' ' + next.name;
-      next = next.next;
-    }
-
-    return /*#__PURE__*/React.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref2.nonce = cache.sheet.nonce, _ref2));
-  }
-
-  return null;
-};
-
-var createStyled
-/*: CreateStyled */
-= function createStyled
-/*: CreateStyled */
-(tag
-/*: any */
-, options
-/* ?: StyledOptions */
-) {
-
-  var isReal = tag.__emotion_real === tag;
-  var baseTag = isReal && tag.__emotion_base || tag;
-  var identifierName;
-  var targetClassName;
-
-  if (options !== undefined) {
-    identifierName = options.label;
-    targetClassName = options.target;
-  }
-
-  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
-  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
-  var shouldUseAs = !defaultShouldForwardProp('as');
-  /* return function<Props>(): PrivateStyledComponent<Props> { */
-
-  return function () {
-    var args = arguments;
-    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
-
-    if (identifierName !== undefined) {
-      styles.push("label:" + identifierName + ";");
-    }
-
-    if (args[0] == null || args[0].raw === undefined) {
-      styles.push.apply(styles, args);
-    } else {
-
-      styles.push(args[0][0]);
-      var len = args.length;
-      var i = 1;
-
-      for (; i < len; i++) {
-
-        styles.push(args[i], args[0][i]);
-      }
-    }
-
-    var Styled
-    /*: PrivateStyledComponent<Props> */
-    = withEmotionCache(function (props, cache, ref) {
-      var FinalTag = shouldUseAs && props.as || baseTag;
-      var className = '';
-      var classInterpolations = [];
-      var mergedProps = props;
-
-      if (props.theme == null) {
-        mergedProps = {};
-
-        for (var key in props) {
-          mergedProps[key] = props[key];
-        }
-
-        mergedProps.theme = React.useContext(ThemeContext);
-      }
-
-      if (typeof props.className === 'string') {
-        className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
-      } else if (props.className != null) {
-        className = props.className + " ";
-      }
-
-      var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
-      className += cache.key + "-" + serialized.name;
-
-      if (targetClassName !== undefined) {
-        className += " " + targetClassName;
-      }
-
-      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
-      var newProps = {};
-
-      for (var _key in props) {
-        if (shouldUseAs && _key === 'as') continue;
-
-        if (finalShouldForwardProp(_key)) {
-          newProps[_key] = props[_key];
-        }
-      }
-
-      newProps.className = className;
-
-      if (ref) {
-        newProps.ref = ref;
-      }
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {
-        cache: cache,
-        serialized: serialized,
-        isStringTag: typeof FinalTag === 'string'
-      }), /*#__PURE__*/React.createElement(FinalTag, newProps));
-    });
-    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
-    Styled.defaultProps = tag.defaultProps;
-    Styled.__emotion_real = Styled;
-    Styled.__emotion_base = baseTag;
-    Styled.__emotion_styles = styles;
-    Styled.__emotion_forwardProp = shouldForwardProp;
-    Object.defineProperty(Styled, 'toString', {
-      value: function value() {
-        if (targetClassName === undefined && isDevelopment) {
-          return 'NO_COMPONENT_SELECTOR';
-        }
-
-        return "." + targetClassName;
-      }
-    });
-
-    Styled.withComponent = function (nextTag
-    /*: StyledElementType<Props> */
-    , nextOptions
-    /* ?: StyledOptions */
-    ) {
-      return createStyled(nextTag, _extends$2({}, options, nextOptions, {
-        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
-      })).apply(void 0, styles);
-    };
-
-    return Styled;
-  };
-};
-
-var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
-'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
-
-var newStyled = createStyled.bind();
-tags.forEach(function (tagName) {
-  newStyled[tagName] = newStyled(tagName);
-});
-
-const StyledHeadingText = newStyled(Text) `
-  font-size: 12px;
-  align-self: center;
-  @media screen and (min-width: 1180px) {
-    font-size: 22px;
-  }
-`;
-const TraitsContentContainer = newStyled(Flex) `
-  justify-content: space-between;
-  background: ${({ theme }) => theme.colors.white4};
-  padding: 0px 15px;
-  &:last-child {
-    border-radius: 0px 0px 6px 6px;
-  }
-  @media screen and (max-width: 667px) {
-    :first-of-type {
-      border-radius: 6px 6px 0px 0px;
-    }
-  }
-`;
-
 const TooltipText = {
     Discount: "This is the percentage discount relative to the token's current market price.",
     ARR: 'This is the Annualized Rate of Return you would receive considering the current discount, adjusted for APR.',
@@ -42158,31 +41788,6 @@ const Input = (_a) => {
     }
 };
 
-newStyled(Flex) `
-  align-items: center;
-  background: ${({ theme }) => theme.colors.white4};
-  border-radius: 10px;
-  height: 72px;
-  padding: 0px 16px;
-`;
-newStyled(Input) `
-  width: 100%;
-  background: none;
-  border: 0;
-  color: ${({ theme }) => (theme.isDark ? theme.colors.primaryBright : theme.colors.primary)};
-  flex: 1;
-  height: 56px;
-  margin: 0;
-  padding: 0;
-  outline: none;
-  font-weight: 800;
-  font-size: 22px;
-
-  &::placeholder {
-    color: ${({ theme }) => !theme.isDark && theme.colors.gray};
-  }
-`;
-
 var BOND_NFT_ABI = [
 	{
 		anonymous: false,
@@ -43386,7 +42991,7 @@ const CardRecommendation = ({ cardIndex, bond, handleBuyBondClick, }) => {
                     height: ['160px', '160px', 'auto', 'auto'],
                     gap: '10px',
                 }, children: [jsxs(Flex, { sx: { alignItems: 'center', justifyContent: 'space-between', gap: '10px' }, children: [jsxs(Flex, { sx: { gap: '5px', justifyContent: 'center', alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: bond.payoutTokenName, chain: bond.chainId, size: 25 }), jsx$2(Text, { children: bond.payoutTokenName }), (_a = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _a === void 0 ? void 0 : _a.slice(0, 1).map((tag) => {
-                                        return (jsx$2(Flex, { sx: { marginRight: '10px' }, children: jsx$2(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
+                                        return (jsx$2(Flex, { sx: { marginRight: '10px' }, children: jsx$2(ListTag, { text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
                                     })] }), jsxs(Flex, { sx: { flexDirection: 'column', gap: '1px', alignItems: 'end' }, children: [jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6', textDecoration: 'line-through' }, children: formatDollar({ num: bond.earnTokenPrice }) }), jsx$2(Text, { sx: { fontSize: '19px' }, children: formatDollar({ num: bond.priceUsd }) })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '100%', gap: '1px' }, children: [jsxs(Flex, { sx: {
                                     background: 'white4',
                                     justifyContent: 'space-between',
@@ -43971,7 +43576,7 @@ function offset() {
   return null;
 }
 
-function styles$7() {
+function styles$6() {
   const window = getWindow();
   if (this[0]) return window.getComputedStyle(this[0], null);
   return {};
@@ -44350,7 +43955,7 @@ const Methods = {
   transitionEnd: transitionEnd$1,
   outerWidth,
   outerHeight,
-  styles: styles$7,
+  styles: styles$6,
   offset,
   css,
   each,
@@ -48951,7 +48556,7 @@ const getDotPos = (index, carouselLength) => {
             : index - carouselLength;
 };
 
-const styles$6 = {
+const styles$5 = {
     mainComponent: {
         width: '100%',
         flexDirection: 'column',
@@ -49024,7 +48629,7 @@ const CardRecommendationsMobile = ({ recommendations }) => {
                             display: 'flex',
                             justifyContent: 'center',
                         }, children: jsx$2(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => window.open(`https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`, '_blank', 'noreferrer') }, `${bond.billAddress}-${index}`) }, index));
-                }) }), jsx$2(Flex, { sx: styles$6.bubbleContainer, children: [...Array(recommendations === null || recommendations === void 0 ? void 0 : recommendations.length)].map((_, i) => {
+                }) }), jsx$2(Flex, { sx: styles$5.bubbleContainer, children: [...Array(recommendations === null || recommendations === void 0 ? void 0 : recommendations.length)].map((_, i) => {
                     return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
                 }) })] }));
 };
@@ -49042,98 +48647,11 @@ const Recommendations = ({ onDismiss, billAddress }) => {
                         },
                     }, children: [jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: ['14px', '14px', '14px', '22px'], fontWeight: 600 }, children: ["You might also be interested in:", ' '] }), jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '16px'], fontWeight: 400, color: '#BEBEBE' }, children: "Based on yours and others users purchases." })] }), jsx$2(SwiperProvider, { children: jsx$2(CardRecommendationsMobile, { recommendations: recommendations }) }), jsx$2(Flex, { sx: { alignItems: 'center', marginBottom: '0px', cursor: 'pointer' }, onClick: () => {
                                 window.open(`https://ape.bond/apebond-ai`, '_blank', 'noreferrer');
-                                onDismiss && onDismiss();
+                                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
                             }, children: jsx$2("img", { width: 256, height: 27, alt: "poweredBy", src: "https://ape.bond/images/bills/powered.png" }) })] }), jsx$2(Flex, { sx: { mt: '20px', width: '100%', gap: '20px', display: ['none', 'none', 'none', 'flex'] }, children: recommendations &&
                         (recommendations === null || recommendations === void 0 ? void 0 : recommendations.map((bond, index) => (jsx$2(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => window.open(`https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`, '_blank', 'noreferrer') }, `${bond.billAddress}-${index}`)))) })] })) }));
 };
 
-const YourBondsModal = ({ onDismiss, userBill }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    // Hooks
-    const chainId = useChainId();
-    const { switchChain } = useSwitchChain();
-    const { data: bondNFTData } = useBondNFTData(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.billNftAddress, (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId);
-    const { writeContractAsync } = useWriteContract();
-    // State
-    const [imgLoaded, setImgLoaded] = useState(false);
-    const [isOpenTraits, setIsOpenTraits] = useState(false);
-    const [claimTxHash, setClaimTxHash] = useState(null);
-    const [loadingTx, setLoadingTx] = useState(false);
-    const { isLoading, isSuccess: isConfirmed } = useMonitorTxHash(claimTxHash, (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId);
-    const { addToastError } = usePopups();
-    const load = loadingTx || (isLoading && !isConfirmed);
-    const handleClaim = (billId, billAddress) => __awaiter$9(void 0, void 0, void 0, function* () {
-        const address = billAddress;
-        try {
-            setLoadingTx(true);
-            const tx = yield writeContractAsync({
-                address: address,
-                abi: BOND_ABI,
-                functionName: 'redeem',
-                args: [billId],
-            }).catch();
-            if (tx) {
-                setClaimTxHash(tx);
-            }
-            setLoadingTx(false);
-        }
-        catch (error) {
-            console.error('Claim Failed:', error);
-            setLoadingTx(false);
-            addToastError(error.message);
-        }
-    });
-    // Functions to calculate display values for modal
-    const totalPending = (userBill) => {
-        var _a, _b, _c, _d;
-        return getBalanceNumber(new BigNumber$1((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 18);
-    };
-    const claimable = (userBill) => {
-        var _a, _b, _c;
-        return getBalanceNumber(new BigNumber$1(userBill.pendingRewards), (_c = (_b = (_a = userBill.bond.earnToken) === null || _a === void 0 ? void 0 : _a.decimals) === null || _b === void 0 ? void 0 : _b[userBill.bond.chainId]) !== null && _c !== void 0 ? _c : 18);
-    };
-    const earnTokenPrice = (bond) => {
-        var _a;
-        return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
-    };
-    const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
-    const attributes = (_c = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.attributes) === null || _c === void 0 ? void 0 : _c.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type));
-    const handleImageLoad = () => {
-        setImgLoaded(true);
-    };
-    const [onTransferBondModal] = useModal(jsx$2(TransferBondModal, { userBill: userBill }), true, true, `transferModal${userBill === null || userBill === void 0 ? void 0 : userBill.id}}`);
-    return (jsx$2(Modal, { className: "modal", children: jsxs(Flex$1, { className: "yourbondsmodal-content", children: [jsx$2(Flex$1, { className: "yourbondsmodal-header", children: jsx$2(Flex$1, { className: "svg-close", onClick: onDismiss, children: jsx$2(Svg, { icon: "close" }) }) }), jsxs(Flex$1, { className: "yourbondsmodal table-container", children: [jsxs(Flex$1, { className: "yourbondsmodal bondimage", children: [(bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image) && (jsx$2("img", { src: `${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image}?img-width=720`, onLoad: handleImageLoad, style: { zIndex: 2 } })), !imgLoaded && (jsx$2(Flex$1, { sx: {
-                                        position: 'absolute',
-                                        top: 'calc(50% - 24px)',
-                                        right: 'calc(50% - 50px)',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                        zIndex: 1,
-                                    }, children: jsx$2(Spinner, { width: 100 }) }))] }), jsxs(Flex$1, { className: "yourbondsmodal yourbondinfo", children: [jsxs(Flex$1, { className: "yourbondinfo title-container", children: [jsx$2(Flex$1, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_d = userBill.bond.showcaseTokenName) !== null && _d !== void 0 ? _d : userBill.bond.earnToken.symbol, size: 40, chain: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId }) }), jsx$2(Flex$1, { className: "title-container tokenname", children: jsx$2(StyledHeadingText, { children: (_e = userBill.bond) === null || _e === void 0 ? void 0 : _e.showcaseTokenName }) }), jsx$2(Flex$1, { className: "title-container tokentags", children: (_f = userBill.bond.tags) === null || _f === void 0 ? void 0 : _f.slice(0, 1).map((tag) => {
-                                                return (jsx$2(Flex$1, { sx: { marginRight: '10px' }, children: jsx$2(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
-                                            }) }), jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), jsxs(Flex$1, { className: "yourbondinfo blocks-container", children: [jsxs(Flex$1, { className: "attributes-container", children: [jsxs(Flex$1, { className: "attributes-header", sx: {
-                                                        borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,
-                                                    }, onClick: () => setIsOpenTraits(!isOpenTraits), children: [jsxs(Flex$1, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx$2(Svg, { icon: "tag", direction: "down" }), jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx$2(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), jsx$2(AnimatePresence, { children: isOpenTraits && (jsx$2(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: jsx$2(Flex$1, { sx: { flexDirection: 'column', gap: '1px' }, children: attributes
-                                                                ? attributes.map((a) => (jsxs(TraitsContentContainer, { children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)))
-                                                                : BILL_ATTRIBUTES.map((attrib) => {
-                                                                    return (jsxs(TraitsContentContainer, { children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), jsx$2(Skeleton, { width: "150px" })] }, attrib));
-                                                                }) }) })) })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-vested", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon" }), jsx$2(Flex$1, { className: "block-info text", children: jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_g = userBill.lastBlockTimestamp) !== null && _g !== void 0 ? _g : '', (_h = userBill.vesting) !== null && _h !== void 0 ? _h : '') }) })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-pending", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Pending" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: jsx$2(TokenImage, { symbol: (_j = userBill.bond.showcaseTokenName) !== null && _j !== void 0 ? _j : userBill.bond.earnToken.symbol, size: 25, chain: (_k = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _k === void 0 ? void 0 : _k.chainId }) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), jsx$2(Text, { sx: {
-                                                                        fontSize: ['10px', '10px', '10px', '12px'],
-                                                                        fontWeight: [500, 500, 500, 400],
-                                                                        paddingLeft: '10px',
-                                                                    }, children: `($${(totalPending(userBill) * ((_l = parseFloat(earnTokenPrice(userBill.bond))) !== null && _l !== void 0 ? _l : 0)).toFixed(2)})` })] })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-claimable", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Claimable" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: jsx$2(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.earnToken.symbol, size: 25, chain: (_o = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _o === void 0 ? void 0 : _o.chainId }) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), jsx$2(Text, { sx: {
-                                                                        fontSize: ['10px', '10px', '10px', '12px'],
-                                                                        fontWeight: [500, 500, 500, 400],
-                                                                        paddingLeft: '10px',
-                                                                    }, children: `($${(claimable(userBill) * ((_p = parseFloat(earnTokenPrice(userBill.bond))) !== null && _p !== void 0 ? _p : 0)).toFixed(2)})` })] })] })] })] }), jsxs(Flex$1, { className: "yourbondinfo button-container", children: [jsx$2(Flex$1, { className: "button-container claim", children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ? (jsxs(Button, { className: "switch-button", disabled: claimable(userBill) === 0 || load, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    switchChain({ chainId: userBill.bond.chainId });
-                                                }, children: ["Switch to ", NETWORK_LABEL[userBill.bond.chainId]] })) : (jsx$2(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || load, load: load, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    handleClaim(userBill.id, userBill.address);
-                                                }, children: "Claim" })) }), jsx$2(Flex$1, { className: "button-container transfer", children: jsx$2(Button, { className: "transfer-button", variant: "secondary", onClick: onTransferBondModal, children: "TRANSFER" }) })] })] })] }), jsx$2(Recommendations, { onDismiss: onDismiss, billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] }) }));
-};
-
 const WNATIVE = {
     [types.ChainId.MAINNET]: {
         symbol: 'wETH',
@@ -71207,7 +70725,91 @@ function useCurrencyPrice(currency, chainId) {
     }), [tokenPrices === null || tokenPrices === void 0 ? void 0 : tokenPrices.length, token, chainId]);
 }
 
-const styles$5 = {
+const YourBondsModal = ({ onDismiss, userBill }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    // Hooks
+    const chainId = useChainId();
+    const { switchChain } = useSwitchChain();
+    const { data: bondNFTData } = useBondNFTData(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.billNftAddress, (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId);
+    const { writeContractAsync } = useWriteContract();
+    // State
+    const [imgLoaded, setImgLoaded] = useState(false);
+    const [isOpenTraits, setIsOpenTraits] = useState(false);
+    const [claimTxHash, setClaimTxHash] = useState(null);
+    const [loadingTx, setLoadingTx] = useState(false);
+    const { isLoading, isSuccess: isConfirmed } = useMonitorTxHash(claimTxHash, (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId);
+    const { addToastError } = usePopups();
+    const load = loadingTx || (isLoading && !isConfirmed);
+    const handleClaim = (billId, billAddress) => __awaiter$9(void 0, void 0, void 0, function* () {
+        const address = billAddress;
+        try {
+            setLoadingTx(true);
+            const tx = yield writeContractAsync({
+                address: address,
+                abi: BOND_ABI,
+                functionName: 'redeem',
+                args: [billId],
+            }).catch();
+            if (tx) {
+                setClaimTxHash(tx);
+            }
+            setLoadingTx(false);
+        }
+        catch (error) {
+            console.error('Claim Failed:', error);
+            setLoadingTx(false);
+            addToastError(error.message);
+        }
+    });
+    // Functions to calculate display values for modal
+    const totalPending = (userBill) => {
+        var _a, _b, _c, _d;
+        return getBalanceNumber(new BigNumber$1((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 18);
+    };
+    const claimable = (userBill) => {
+        var _a, _b, _c;
+        return getBalanceNumber(new BigNumber$1(userBill.pendingRewards), (_c = (_b = (_a = userBill.bond.earnToken) === null || _a === void 0 ? void 0 : _a.decimals) === null || _b === void 0 ? void 0 : _b[userBill.bond.chainId]) !== null && _c !== void 0 ? _c : 18);
+    };
+    const earnTokenPrice = useCurrencyPrice((_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken) !== null && _c !== void 0 ? _c : null, (_e = (_d = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _d === void 0 ? void 0 : _d.chainId) !== null && _e !== void 0 ? _e : null);
+    const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
+    const attributes = (_f = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.attributes) === null || _f === void 0 ? void 0 : _f.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type));
+    const handleImageLoad = () => {
+        setImgLoaded(true);
+    };
+    const [onTransferBondModal] = useModal(jsx$2(TransferBondModal, { userBill: userBill }), true, true, `transferModal${userBill === null || userBill === void 0 ? void 0 : userBill.id}}`);
+    return (jsx$2(Modal, { className: "modal", children: jsxs(Flex$1, { className: "yourbondsmodal-content", children: [jsx$2(Flex$1, { className: "yourbondsmodal-header", children: jsx$2(Flex$1, { className: "svg-close", onClick: onDismiss, children: jsx$2(Svg, { icon: "close" }) }) }), jsxs(Flex$1, { className: "yourbondsmodal table-container", children: [jsxs(Flex$1, { className: "yourbondsmodal bondimage", children: [(bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image) && (jsx$2("img", { src: `${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image}?img-width=720`, onLoad: handleImageLoad, style: { zIndex: 2 } })), !imgLoaded && (jsx$2(Flex$1, { sx: {
+                                        position: 'absolute',
+                                        top: 'calc(50% - 24px)',
+                                        right: 'calc(50% - 50px)',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        zIndex: 1,
+                                    }, children: jsx$2(Spinner, { width: 100 }) }))] }), jsxs(Flex$1, { className: "yourbondsmodal yourbondinfo", children: [jsxs(Flex$1, { className: "yourbondinfo title-container", children: [jsx$2(Flex$1, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_g = userBill.bond.showcaseTokenName) !== null && _g !== void 0 ? _g : userBill.bond.earnToken.symbol, size: 40, chain: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId }) }), jsx$2(Flex$1, { className: "title-container tokenname", children: (_j = (_h = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _h === void 0 ? void 0 : _h.showcaseTokenName) !== null && _j !== void 0 ? _j : userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken.symbol }), jsx$2(Flex$1, { className: "title-container tokentags", children: (_k = userBill.bond.tags) === null || _k === void 0 ? void 0 : _k.slice(0, 1).map((tag) => {
+                                                return (jsx$2(Flex$1, { sx: { marginRight: '10px' }, children: jsx$2(ListTag, { text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
+                                            }) }), jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), jsxs(Flex$1, { className: "yourbondinfo blocks-container", children: [jsxs(Flex$1, { className: "attributes-container", children: [jsxs(Flex$1, { className: "attributes-header", sx: {
+                                                        borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,
+                                                    }, onClick: () => setIsOpenTraits(!isOpenTraits), children: [jsxs(Flex$1, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx$2(Svg, { icon: "tag", direction: "down" }), jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx$2(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), jsx$2(AnimatePresence, { children: isOpenTraits && (jsx$2(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: jsx$2(Flex$1, { sx: { flexDirection: 'column', gap: '1px' }, children: attributes
+                                                                ? attributes.map((a) => (jsxs(Flex$1, { sx: { background: 'white4', width: '100%', padding: '2px 8px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)))
+                                                                : BILL_ATTRIBUTES.map((attrib) => {
+                                                                    return (jsxs(Flex$1, { sx: { background: 'white4', width: '100%', padding: '2px 8px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), jsx$2(Skeleton, { width: "150px" })] }, attrib));
+                                                                }) }) })) })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-vested", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon" }), jsx$2(Flex$1, { className: "block-info text", children: jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_l = userBill.lastBlockTimestamp) !== null && _l !== void 0 ? _l : '', (_m = userBill.vesting) !== null && _m !== void 0 ? _m : '') }) })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-pending", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Pending" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: jsx$2(TokenImage, { symbol: (_o = userBill.bond.showcaseTokenName) !== null && _o !== void 0 ? _o : userBill.bond.earnToken.symbol, size: 25, chain: (_p = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _p === void 0 ? void 0 : _p.chainId }) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), jsx$2(Text, { sx: {
+                                                                        fontSize: ['10px', '10px', '10px', '12px'],
+                                                                        fontWeight: [500, 500, 500, 400],
+                                                                        paddingLeft: '10px',
+                                                                    }, children: `($${(totalPending(userBill) * ((_q = earnTokenPrice === null || earnTokenPrice === void 0 ? void 0 : earnTokenPrice.price) !== null && _q !== void 0 ? _q : 0)).toFixed(2)})` })] })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-claimable", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Claimable" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: jsx$2(TokenImage, { symbol: (_r = userBill.bond.showcaseTokenName) !== null && _r !== void 0 ? _r : userBill.bond.earnToken.symbol, size: 25, chain: (_s = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _s === void 0 ? void 0 : _s.chainId }) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), jsx$2(Text, { sx: {
+                                                                        fontSize: ['10px', '10px', '10px', '12px'],
+                                                                        fontWeight: [500, 500, 500, 400],
+                                                                        paddingLeft: '10px',
+                                                                    }, children: `($${(claimable(userBill) * ((_t = earnTokenPrice === null || earnTokenPrice === void 0 ? void 0 : earnTokenPrice.price) !== null && _t !== void 0 ? _t : 0)).toFixed(2)})` })] })] })] })] }), jsxs(Flex$1, { className: "yourbondinfo button-container", children: [jsx$2(Flex$1, { className: "button-container claim", children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ? (jsxs(Button, { className: "switch-button", disabled: claimable(userBill) === 0 || load, onClick: (event) => {
+                                                    event.stopPropagation();
+                                                    switchChain({ chainId: userBill.bond.chainId });
+                                                }, children: ["Switch to ", NETWORK_LABEL[userBill.bond.chainId]] })) : (jsx$2(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || load, load: load, onClick: (event) => {
+                                                    event.stopPropagation();
+                                                    handleClaim(userBill.id, userBill.address);
+                                                }, children: "Claim" })) }), jsx$2(Flex$1, { className: "button-container transfer", children: jsx$2(Button, { className: "transfer-button", variant: "secondary", onClick: onTransferBondModal, children: "TRANSFER" }) })] })] })] }), jsx$2(Recommendations, { onDismiss: onDismiss, billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] }) }));
+};
+
+const styles$4 = {
     infoRow: {
         justifyContent: 'space-between',
         width: '100%',
@@ -71254,13 +70856,13 @@ const styles$5 = {
 
 const ButtonsRow = ({ projectLink, twitter, bubble, audit, }) => {
     const bubbleURL = `https://app.bubblemaps.io/bsc/token/${bubble}`;
-    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx$2(Flex, { sx: styles$5.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx$2(Svg, { icon: "URL", width: 18 }) }), jsx$2(Flex, { sx: styles$5.iconButton, as: Link, href: twitter, target: "_blank", children: jsx$2(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && (jsx$2(Flex, { sx: styles$5.iconButton, as: Link, href: bubbleURL, target: "_blank", children: jsx$2(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$5.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank", children: [jsx$2(Svg, { icon: "audit", width: 18, color: "text" }), jsx$2(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
+    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx$2(Flex, { sx: styles$4.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx$2(Svg, { icon: "URL", width: 18 }) }), jsx$2(Flex, { sx: styles$4.iconButton, as: Link, href: twitter, target: "_blank", children: jsx$2(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && (jsx$2(Flex, { sx: styles$4.iconButton, as: Link, href: bubbleURL, target: "_blank", children: jsx$2(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$4.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank", children: [jsx$2(Svg, { icon: "audit", width: 18, color: "text" }), jsx$2(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
 };
 
 const Tooltip = ({ valueTitle, valueContent, value2Title, value2Content, tokenContract, secondURL, secondURLTitle, projectLink, twitter, audit, thirdURL, thirdURLTitle, chain, }) => {
     const explorerLink = BLOCK_EXPLORER[chain];
     const tokenLink = `${explorerLink}/address/${tokenContract}`;
-    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [projectLink && twitter && (jsx$2(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: tokenContract, audit: audit })), valueTitle && (jsxs(Flex, { sx: styles$5.infoRow, children: [jsxs(Text, { sx: styles$5.titleText, children: [valueTitle, ": "] }), jsx$2(Text, { sx: styles$5.contentText, children: valueContent })] })), value2Title && (jsxs(Flex, { sx: styles$5.infoRow, children: [jsxs(Text, { sx: styles$5.titleText, children: [value2Title, ": "] }), jsx$2(Text, { sx: styles$5.contentText, children: value2Content })] })), jsx$2(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx$2(Flex, { sx: styles$5.linkRow, children: jsxs(Link, { href: tokenLink, sx: styles$5.link, target: "_blank", children: ['View Token Contract', jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] }) }), secondURL && (jsx$2(Flex, { sx: styles$5.linkRow, children: jsxs(Link, { href: secondURL, sx: styles$5.link, target: "_blank", children: [secondURLTitle, jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] }) })), thirdURL && (jsx$2(Flex, { sx: styles$5.linkRow, children: jsx$2(Link, { href: thirdURL, sx: styles$5.link, target: "_blank", children: thirdURLTitle }) }))] }) })] }));
+    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [projectLink && twitter && (jsx$2(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: tokenContract, audit: audit })), valueTitle && (jsxs(Flex, { sx: styles$4.infoRow, children: [jsxs(Text, { sx: styles$4.titleText, children: [valueTitle, ": "] }), jsx$2(Text, { sx: styles$4.contentText, children: valueContent })] })), value2Title && (jsxs(Flex, { sx: styles$4.infoRow, children: [jsxs(Text, { sx: styles$4.titleText, children: [value2Title, ": "] }), jsx$2(Text, { sx: styles$4.contentText, children: value2Content })] })), jsx$2(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx$2(Flex, { sx: styles$4.linkRow, children: jsxs(Link, { href: tokenLink, sx: styles$4.link, target: "_blank", children: ['View Token Contract', jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] }) }), secondURL && (jsx$2(Flex, { sx: styles$4.linkRow, children: jsxs(Link, { href: secondURL, sx: styles$4.link, target: "_blank", children: [secondURLTitle, jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] }) })), thirdURL && (jsx$2(Flex, { sx: styles$4.linkRow, children: jsx$2(Link, { href: thirdURL, sx: styles$4.link, target: "_blank", children: thirdURLTitle }) }))] }) })] }));
 };
 
 const isBondSoldOut = (bill) => {
@@ -72733,7 +72335,7 @@ const useApproval = (amount, currency, spender, account, chainId) => {
     return [approvalState !== null && approvalState !== void 0 ? approvalState : ApprovalState.NOT_APPROVED, handleApprove];
 };
 
-const version = '2.21.33';
+const version = '2.21.35';
 
 let errorConfig = {
     getDocsUrl: ({ docsBaseUrl, docsPath = '', docsSlug, }) => docsPath
@@ -73014,14 +72616,10 @@ const ZapModal = ({ onDismiss, outputToken, account, chainId }) => {
     }), [zapData, (_f = zapData === null || zapData === void 0 ? void 0 : zapData.txData) === null || _f === void 0 ? void 0 : _f.to, (_g = zapData === null || zapData === void 0 ? void 0 : zapData.txData) === null || _g === void 0 ? void 0 : _g.data]);
     // Approve hook
     const [approvalState, approveCallback] = useApproval(typedValue, inputToken !== null && inputToken !== void 0 ? inputToken : null, (_h = SoulZapTokenManager[chainId]) !== null && _h !== void 0 ? _h : null, account !== null && account !== void 0 ? account : null, chainId);
-    const handleApprove = useCallback(() => __awaiter$9(void 0, void 0, void 0, function* () {
-        setPendingTx(true);
-        yield approveCallback().finally(() => setPendingTx(false));
-    }), []);
     return (jsxs(Modal, { children: [jsx$2(ModalHeader, { onDismiss: onDismiss, children: jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '30px' }, children: ["Zap ", jsx$2(Svg, { icon: "ZapIcon" })] }), jsx$2(Flex, { onClick: onOpenSlippageModal, sx: { mr: '15px' }, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', pt: '10px', gap: '10px' }, children: [jsx$2(Flex, { sx: { position: 'relative' }, children: jsx$2(Text, { children: "From:" }) }), jsx$2(Flex, { sx: { width: '100%', height: 'auto', justifyContent: 'space-between' }, children: jsx$2(TokenSelectorPanel, { typedValue: typedValue, setTypedValue: setTypedValue, selectedToken: inputToken, handleMaxBtn: handleMaxInput, handleCurrencySelect: handleCurrencySelect, chainId: chainId, enableZap: true, tokenBalance: inputTokenBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, bondEarnToken: outputToken }) }), jsxs(Flex, { sx: { position: 'relative', mt: '10px' }, children: [jsx$2(Text, { children: "To:" }), jsx$2(Box$1, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsx$2(Svg, { icon: "ZapArrow" }) })] }), jsx$2(TokenSelectorPanel, { typedValue: isWrap ? typedValue : outputValue === 0 ? '' : outputValue.toFixed(18), setTypedValue: () => null, selectedToken: outputToken, handleCurrencySelect: () => null, chainId: chainId, enableZap: false, tokenBalance: outputTokenBalanceString, selectedTokenPrice: outputTokenPrice === null || outputTokenPrice === void 0 ? void 0 : outputTokenPrice.price }), jsx$2(Flex, { className: "button-container zap", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== chainId ? (jsxs(Button, { className: "switch-button zap", onClick: (event) => {
                                 event.stopPropagation();
                                 switchChain({ chainId: chainId });
-                            }, children: ["Switch to ", NETWORK_LABEL[chainId]] })) : approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING ? (jsx$2(Button, { onClick: handleApprove, fullWidth: true, load: approvalState === ApprovalState.PENDING || pendingTx, disable: approvalState === ApprovalState.PENDING || pendingTx, children: pendingTx || approvalState === ApprovalState.PENDING ? 'ENABLING' : 'ENABLE' })) : (jsx$2(Button, { onClick: soulZapCallback, fullWidth: true, load: pendingTx || fetchingQuote || isConfirming, disabled: pendingTx || fetchingQuote || !zapData || !hasEnoughBalance || isConfirming || zapError, children: zapError
+                            }, children: ["Switch to ", NETWORK_LABEL[chainId]] })) : approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING ? (jsx$2(Button, { onClick: approveCallback, fullWidth: true, load: approvalState === ApprovalState.PENDING, disable: approvalState === ApprovalState.PENDING, children: pendingTx || approvalState === ApprovalState.PENDING ? 'ENABLING' : 'ENABLE' })) : (jsx$2(Button, { onClick: soulZapCallback, fullWidth: true, load: pendingTx || fetchingQuote || isConfirming, disabled: pendingTx || fetchingQuote || !zapData || !hasEnoughBalance || isConfirming || zapError, children: zapError
                                 ? 'something went wrong'
                                 : fetchingQuote
                                     ? 'Loading'
@@ -73185,7 +72783,7 @@ const useSendReferenceId = () => {
 };
 
 const BondModalHeader = ({ bondData, onDismiss }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
     const handleClose = () => {
         if (typeof window !== 'undefined') {
@@ -73193,7 +72791,7 @@ const BondModalHeader = ({ bondData, onDismiss }) => {
         }
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     };
-    return (jsxs(Flex, { className: "modaltable-container title-container", children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, jsx$2(ListTag, { text: (_b = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' })] }), jsxs(Flex, { className: "title-container price-container", children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { className: "slipagge-close-icons", children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose }), jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] })) : (jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }));
+    return (jsxs(Flex, { className: "modaltable-container title-container", children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, jsx$2(ListTag, { text: (_b = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _b === void 0 ? void 0 : _b[0] })] }), jsxs(Flex, { className: "title-container price-container", children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { className: "slipagge-close-icons", children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose }), jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] })) : (jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }));
 };
 
 const BondCards = ({ bondData }) => {
@@ -73218,7 +72816,7 @@ function sanitizeHTML(html) {
     const attrWhitelist = ['target', 'rel', 'style', 'href']; // Allowed attributes
     const doc = new DOMParser().parseFromString(html, 'text/html');
     const elements = doc.body.querySelectorAll('*');
-    for (let el of elements) {
+    for (const el of elements) {
         // Remove elements that are not in the whitelist
         if (!tagWhitelist.includes(el.tagName.toLowerCase())) {
             (_a = el === null || el === void 0 ? void 0 : el.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(el);
@@ -73259,7 +72857,7 @@ const ProjectDescription = ({ description }) => {
 const BondModal = ({ onDismiss, bondAddress, bondChain, 
 // ??
 accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const SDKConfig = useSDKConfig();
     // State
     const [modalVariant, setModalVariant] = useState(SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.modalVariant);
@@ -73285,10 +72883,6 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
     // Estimations
     const normalEstimatedOutput = youGet(bondData, inputValue);
     const estimatedOutput = isZap ? zapEstimatedOutput : normalEstimatedOutput;
-    const estimatedOutputUSD = estimatedOutput * parseFloat((_h = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _h !== void 0 ? _h : '0');
-    const estimatedInputUSD = parseFloat(inputValue) * ((_j = inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price) !== null && _j !== void 0 ? _j : 0);
-    const normalPremium = premium(bondData, inputValue);
-    isZap ? formatUSDNumber((estimatedOutputUSD - estimatedInputUSD).toString()) : normalPremium;
     // Loading State
     const [loadingTx, setLoadingTx] = useState(false);
     const { addToastError } = usePopups();
@@ -73302,7 +72896,7 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
     // Modals
     const [onOpenZapModal] = useModal(jsx$2(ZapModal, { outputToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, account: account, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId }), true, true, 'zapModal');
     // Approve & Purchase Functions
-    const [approvalState, approveCallback] = useApproval(inputValue, inputToken !== null && inputToken !== void 0 ? inputToken : null, (_k = (isZap ? SoulZapTokenManager === null || SoulZapTokenManager === void 0 ? void 0 : SoulZapTokenManager[bondData === null || bondData === void 0 ? void 0 : bondData.chainId] : bondData === null || bondData === void 0 ? void 0 : bondData.billAddress)) !== null && _k !== void 0 ? _k : null, account !== null && account !== void 0 ? account : null, (_l = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _l !== void 0 ? _l : null);
+    const [approvalState, approveCallback] = useApproval(inputValue, inputToken !== null && inputToken !== void 0 ? inputToken : null, (_h = (isZap ? SoulZapTokenManager === null || SoulZapTokenManager === void 0 ? void 0 : SoulZapTokenManager[bondData === null || bondData === void 0 ? void 0 : bondData.chainId] : bondData === null || bondData === void 0 ? void 0 : bondData.billAddress)) !== null && _h !== void 0 ? _h : null, account !== null && account !== void 0 ? account : null, (_j = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _j !== void 0 ? _j : null);
     const handleBuyCallback = () => __awaiter$9(void 0, void 0, void 0, function* () {
         var _a, _b, _c;
         const billAddress = bondData === null || bondData === void 0 ? void 0 : bondData.billAddress;
@@ -73381,7 +72975,7 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                 !account ||
                                                 !inputValue ||
-                                                parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content font-small gpt", children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"alt\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsx$2(Flex, { className: "modal-header" }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _m !== void 0 ? _m : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_o = bondData.showcaseTokenName) !== null && _o !== void 0 ? _o : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { children: ["You will receive:", jsx$2(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_p = bondData.showcaseTokenName) !== null && _p !== void 0 ? _p : bondData.earnToken.symbol, size: 20 }) }), (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, " + \u00A0", (youGet(bondData, inputValue) -
+                                                parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content font-small gpt", children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"alt\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsx$2(Flex, { className: "modal-header" }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _k !== void 0 ? _k : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_l = bondData.showcaseTokenName) !== null && _l !== void 0 ? _l : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { children: ["You will receive:", jsx$2(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : bondData.earnToken.symbol, size: 20 }) }), (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, " + \u00A0", (youGet(bondData, inputValue) -
                                                                 lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), jsx$2("span", { className: "text-highlight", children: "\u00A0additional" })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button button-narrow", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
                                                                 event.stopPropagation();
                                                                 switchChain({ chainId: bondData.chainId });
@@ -73389,7 +72983,7 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
                                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                                 !account ||
                                                                 !inputValue ||
-                                                                parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue).toFixed(0), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date())] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_q = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _q !== void 0 ? _q : 0).days * 86400000))] }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "What are bonds?" })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })) })) }));
+                                                                parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue).toFixed(0), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date())] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_o = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _o !== void 0 ? _o : 0).days * 86400000))] }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "What are bonds?" })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })) })) }));
 };
 
 /** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
@@ -73445,7 +73039,7 @@ const ProgressBar = ({ value, color = 'text' }) => {
                 } }) }) }));
 };
 
-const styles$4 = {
+const styles$3 = {
     listCardContainer: {
         borderRadius: 0,
         flexDirection: ['column', 'column', 'column', 'row'],
@@ -73529,7 +73123,7 @@ const styles$4 = {
 };
 
 const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
-    return (jsxs(Flex, { sx: style, children: [jsx$2(Flex, { sx: { alignItems: 'center' }, children: jsx$2(Text, { sx: styles$4.titleText, children: `${title}` }) }), showTooltip ? (jsx$2(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx$2(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx$2(Skeleton, { sx: styles$4.skeleton }) }) }) })) : (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx$2(Skeleton, { sx: styles$4.skeleton }) }))] }));
+    return (jsxs(Flex, { sx: style, children: [jsx$2(Flex, { sx: { alignItems: 'center' }, children: jsx$2(Text, { sx: styles$3.titleText, children: `${title}` }) }), showTooltip ? (jsx$2(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx$2(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx$2(Skeleton, { sx: styles$3.skeleton }) }) }) })) : (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx$2(Skeleton, { sx: styles$3.skeleton }) }))] }));
 };
 var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
 
@@ -73582,7 +73176,7 @@ const HotBondCard = ({ bond }) => {
     const { discount } = bond;
     // Modal
     const [openBuyModal] = useModal(jsx$2(BondModal, { bondAddress: bond.billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${bond.billAddress}-${bond.chainId}`);
-    return (jsx$2(Flex, { sx: styles$6.desktopCard, onClick: openBuyModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.earnToken.address[bond.chainId]) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: `https://dashboard.ape.bond/bond/${(_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`, thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_b = bond.chainId) !== null && _b !== void 0 ? _b : types.ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Discount" }), jsx$2(Flex, { className: `${getDiscountColor(discount)}`, sx: { width: '100%', justifyContent: 'center' }, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_c = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _c === void 0 ? void 0 : _c.days) ? `${(_d = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _d === void 0 ? void 0 : _d.days} D` : '-' })] })] })] }) }));
+    return (jsx$2(Flex, { sx: styles$5.desktopCard, onClick: openBuyModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.earnToken.address[bond.chainId]) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: `https://dashboard.ape.bond/bond/${(_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`, thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_b = bond.chainId) !== null && _b !== void 0 ? _b : types.ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Discount" }), jsx$2(Flex, { className: `${getDiscountColor(discount)}`, sx: { width: '100%', justifyContent: 'center' }, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_c = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _c === void 0 ? void 0 : _c.days) ? `${(_d = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _d === void 0 ? void 0 : _d.days} D` : '-' })] })] })] }) }));
 };
 
 function useHotBondContracts() {
@@ -73633,7 +73227,7 @@ const HotBondCards = () => {
         setActiveSlide(index);
         swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
     };
-    return (jsxs(Flex, { sx: styles$6.mainComponent, children: [jsx$2(Flex, { sx: styles$6.hotBondTitle, children: "HOT BONDS" }), jsx$2(Flex, { sx: styles$6.desktopCards, children: filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.slice(0, 3).map((bond, index) => {
+    return (jsxs(Flex, { sx: styles$5.mainComponent, children: [jsx$2(Flex, { sx: styles$5.hotBondTitle, children: "HOT BONDS" }), jsx$2(Flex, { sx: styles$5.desktopCards, children: filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.slice(0, 3).map((bond, index) => {
                     return jsx$2(HotBondCard, { bond: bond }, `${bond.billAddress}-${index}`);
                 }) }), jsxs(Flex, { sx: {
                     flexDirection: 'column',
@@ -73652,7 +73246,7 @@ const HotBondCards = () => {
                                     display: 'flex',
                                     justifyContent: 'center',
                                 }, children: jsx$2(HotBondCard, { bond: bond }, `${bond.billAddress}-${index}`) }, index));
-                        }) }), jsx$2(Flex, { sx: styles$6.bubbleContainer, children: [...Array(hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.length)].map((_, i) => {
+                        }) }), jsx$2(Flex, { sx: styles$5.bubbleContainer, children: [...Array(hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.length)].map((_, i) => {
                             return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
                         }) })] })] }));
 };
@@ -73735,7 +73329,7 @@ const BuyAgainRow = () => {
                         }, children: "BUY AGAIN" }), jsx$2(BondRow, { bond: buyAgainBond })] }) }) })) : null;
 };
 
-const styles$3 = {
+const styles$2 = {
     smallCardContainer: {
         width: '100%',
         p: '6px 12px',
@@ -73760,7 +73354,7 @@ const styles$3 = {
 const SmallRecommendationCard = ({ recommendation }) => {
     var _a;
     const vestingTime = getTimePeriods((_a = recommendation.vestingTerm) !== null && _a !== void 0 ? _a : 0, true);
-    return (jsxs(Flex, { sx: styles$3.smallCardContainer, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx$2(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles$3.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: styles$3.subTitle, children: "Discount" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.discount > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.discount.toFixed(2), "%"] })] })] }));
+    return (jsxs(Flex, { sx: styles$2.smallCardContainer, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx$2(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles$2.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: styles$2.subTitle, children: "Discount" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.discount > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.discount.toFixed(2), "%"] })] })] }));
 };
 
 const RecommendationCards = () => {
@@ -73902,8 +73496,8 @@ const FullBondsView = () => {
 };
 
 const Toggle = ({ options, activeOption, handleToggle, claimableBillsAmount, }) => {
-    return (jsx$2(Flex, { sx: styles$8.container, children: jsx$2(AnimatePresence, { initial: false, children: options.map((option) => {
-                return (jsx$2(motion.div, { animate: { opacity: option === activeOption ? 1 : 0.6, scale: option === activeOption ? 1 : 0.9 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2, type: 'spring', stiffness: 50 }, sx: { overflow: 'hidden', width: '100%' }, children: jsx$2(Flex, { sx: Object.assign(Object.assign({}, styles$8.switch), { background: option === activeOption ? 'primaryButton' : 'white2' }), onClick: () => handleToggle(option), children: jsxs(Text, { sx: { fontSize: '14px' }, children: [option, option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''] }) }) }, option));
+    return (jsx$2(Flex, { sx: styles$7.container, children: jsx$2(AnimatePresence, { initial: false, children: options.map((option) => {
+                return (jsx$2(motion.div, { animate: { opacity: option === activeOption ? 1 : 0.6, scale: option === activeOption ? 1 : 0.9 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2, type: 'spring', stiffness: 50 }, sx: { overflow: 'hidden', width: '100%' }, children: jsx$2(Flex, { sx: Object.assign(Object.assign({}, styles$7.switch), { background: option === activeOption ? 'primaryButton' : 'white2' }), onClick: () => handleToggle(option), children: jsxs(Text, { sx: { fontSize: '14px' }, children: [option, option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''] }) }) }, option));
             }) }) }));
 };
 
@@ -73978,7 +73572,7 @@ const selectItemPadding = {
     [sizes.LARGE]: 8,
 };
 
-const styles$2 = {
+const styles$1 = {
     container: {
         background: 'white3',
         borderRadius: '10px',
@@ -74037,7 +73631,7 @@ const Select = (_a) => {
             input.dispatchEvent(new Event('change', { bubbles: true }));
         }
     };
-    return (jsxs(Fragment$1, { children: [jsxs(Box$1, { sx: Object.assign(Object.assign({}, styles$2.container), { width }), onClick: handleClick, className: className, children: [jsxs(Flex$1, { sx: {
+    return (jsxs(Fragment$1, { children: [jsxs(Box$1, { sx: Object.assign(Object.assign({}, styles$1.container), { width }), onClick: handleClick, className: className, children: [jsxs(Flex$1, { sx: {
                             padding: selectedExtraPadding[size],
                             pr: selectPadding[size],
                             columnGap: '10px',
@@ -74051,9 +73645,9 @@ const Select = (_a) => {
                                     return null;
                                 }
                                 return React__default.cloneElement(child, Object.assign(Object.assign({}, child === null || child === void 0 ? void 0 : child.props), { active: true }));
-                            })), jsx$2(Flex$1, { sx: { minWidth: '10px' }, children: jsx$2(Svg, { icon: "caret", direction: open ? 'up' : 'down' }) })] }), jsx$2(AnimatePresence, { children: open && (jsx$2(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, sx: Object.assign(Object.assign({}, styles$2.ul), { zIndex: 10, top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined, bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined }), children: React__default.Children.map(children, (child) => {
+                            })), jsx$2(Flex$1, { sx: { minWidth: '10px' }, children: jsx$2(Svg, { icon: "caret", direction: open ? 'up' : 'down' }) })] }), jsx$2(AnimatePresence, { children: open && (jsx$2(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, sx: Object.assign(Object.assign({}, styles$1.ul), { zIndex: 10, top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined, bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined }), children: React__default.Children.map(children, (child) => {
                                 return React__default.cloneElement(child, Object.assign(Object.assign({}, child === null || child === void 0 ? void 0 : child.props), { active: false, onClick: () => { var _a; return setNativeInput((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value); } }));
-                            }) })) }), jsx$2("input", Object.assign({ ref: inputRef, value: active || '', "aria-hidden": "true", tabIndex: -1 }, props, { sx: styles$2.input }))] }), open && jsx$2("div", { "aria-hidden": "true", onClick: () => setOpen(false), sx: styles$2.backdrop })] }));
+                            }) })) }), jsx$2("input", Object.assign({ ref: inputRef, value: active || '', "aria-hidden": "true", tabIndex: -1 }, props, { sx: styles$1.input }))] }), open && jsx$2("div", { "aria-hidden": "true", onClick: () => setOpen(false), sx: styles$1.backdrop })] }));
 };
 
 const SelectItem = (_a) => {
@@ -74070,73 +73664,17 @@ const SelectItem = (_a) => {
         }, children: jsx$2(Flex, { sx: style, children: children }) })));
 };
 
-const getThemeTextColor = ({ outline, variant = 'primary' }) => (outline ? variant : '#ffffff');
-newStyled.div `
-  align-items: center;
-  background-color: ${({ outline, variant = 'primary' }) => (outline ? 'transparent' : variant)};
-  border: 2px solid ${({ variant = 'primary' }) => variant};
-  border-radius: 16px;
-  color: ${getThemeTextColor};
-  display: inline-flex;
-  font-size: 14px;
-  font-weight: 300;
-  height: 28px;
-  line-height: 1.5;
-  padding: 0 8px;
-  white-space: nowrap;
-
-  svg {
-    fill: ${getThemeTextColor};
-  }
-`;
-const styles$1 = {
-    listTagCont: ({ variant = 'ape' }) => ({
-        alignItems: 'center',
-        background: (theme) => { var _a, _b, _c, _d, _e; return (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.listTagBg) === null || _b === void 0 ? void 0 : _b[variant]) !== null && _c !== void 0 ? _c : (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.listTagBg) === null || _e === void 0 ? void 0 : _e.default; },
-        borderRadius: '3px',
-        display: 'inline-flex',
-        height: '15px',
-        padding: '0 5px',
-    }),
-    tagText: ({ variant = 'ape' }) => ({
-        color: (theme) => {
-            var _a, _b, _c, _d, _e;
-            return ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.listTagTextColor) === null || _b === void 0 ? void 0 : _b[variant])
-                ? (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.listTagTextColor) === null || _d === void 0 ? void 0 : _d[variant]
-                : (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.primaryBright;
-        },
-        fontSize: '10px',
-        fontWeight: 600,
-        lineHeight: '15px',
-        width: '100%',
-    }),
-};
-
-({
-    APE: 'ape',
-    UNI: 'uni',
-    ARK: 'ark',
-    NEW: 'new',
-    HOT: 'hot',
-    AUTO: 'auto',
-    MAX: 'max',
-    yield: 'yield',
-    BETA: 'beta',
-    LIQUIDITY: 'liquidity',
-    RESERVE: 'reserve',
-    LAUNCH: 'launch',
-    bondLp: 'bondLp',
-    migration: 'migration',
-    CEX_FUND: 'cex_fund',
-    [types.LiquidityDex.QuickswapV2]: 'QuickSwap v2',
-    [types.LiquidityDex.PancakeSwapV2]: 'PancakeSwap v2',
-    expired: 'expired',
-    permalock: 'permalock',
-});
-const lpTags = ['ape', 'uni', 'ark'];
-
-const ListTag = ({ variant, text = '', styleCustom }) => {
-    return (jsx$2(Flex, { variant: variant, sx: Object.assign(Object.assign({}, styles$1.listTagCont({ variant })), styleCustom), children: text ? (jsx$2(Flex, { sx: styles$1.tagText({ variant }), children: text })) : (jsxs(Flex, { sx: styles$1.tagText({ variant }), children: [variant.toUpperCase().replace('_', ' '), " ", lpTags.includes(variant) && 'LP'] })) }));
+const ListTag = ({ text = '' }) => {
+    return (jsx$2(Flex, { className: "list-tag", sx: {
+            background: '#3C6AB530',
+            color: '#3b78d3',
+            fontSize: '10px',
+            fontWeight: 600,
+            lineHeight: '15px',
+            p: '2px 6px',
+            borderRadius: '5px',
+            ml: '5px',
+        }, children: text }));
 };
 
 const Context = createContext({