@ape.swap/bonds-sdk 2.0.7-test.4 → 2.0.8-seedify

package/dist/main.js

@@ -4,6 +4,7 @@ import { useWaitForTransactionReceipt, useChainId, useAccount, useSwitchChain, u
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
 import { ConnectButton as ConnectButton$1 } from '@rainbow-me/rainbowkit';
+import domtoimage from 'dom-to-image';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -6294,7 +6295,7 @@ const Text$1 = /*#__PURE__*/React__default.forwardRef(function Text(props, ref)
  * Image style variants can be defined in the theme.images object.
  * @see https://theme-ui.com/components/image/
  */
-const Image$1 = /*#__PURE__*/React__default.forwardRef(function Image(props, ref) {
+const Image = /*#__PURE__*/React__default.forwardRef(function Image(props, ref) {
   const __outerCss = props.__css;
   return jsx$2(Box$1, {
     ref: ref,
@@ -7447,7 +7448,7 @@ const pulse = keyframes$1({
     '50%': { opacity: 0.4 },
     '100%': { opacity: 1 },
 });
-const styles$h = {
+const styles$g = {
     waves: {
         position: 'relative',
         overflow: 'hidden',
@@ -7479,7 +7480,7 @@ const styles$h = {
 
 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$h.waves : styles$h.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$g.waves : styles$g.pulse)), { height: props.height, width: props.width, borderRadius: variant$1 === variant.RECT ? '10px' : '50%' }) })));
 };
 
 var placements;
@@ -7517,7 +7518,7 @@ const container = (hide) => ({
         display: hide ? 'none' : 'block',
     },
 });
-const styles$g = {
+const styles$f = {
     default: Object.assign({ color: 'text', fontSize: 0, lineHeight: '18px', fontWeight: 'normal' }, baseStyle$1),
     bottomRight: {
         '&::before': Object.assign(Object.assign({ position: 'absolute' }, bottomArrow), { right: '3%', borderBottomColor: 'white2' }),
@@ -7576,7 +7577,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$g.default), styles$g[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$f.default), styles$f[placement]), backgroundColorStyle), { width, transform: transformTip }) }, props, { children: body })) }), children] }));
 };
 
 const warned = new Set();
@@ -17532,7 +17533,7 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
         }) }));
 };
 
-const styles$f = {
+const styles$e = {
     container: {
         padding: '20px',
         background: 'white2',
@@ -17708,7 +17709,7 @@ const defaultStyle = {
         transform: 'scale(0.9)',
     },
 };
-const styles$e = {
+const styles$d = {
     primary: Object.assign({}, defaultStyle),
     transparent: Object.assign(Object.assign({}, defaultStyle), { backgroundColor: 'transparent', backgroundRepeat: 'no-repeat', padding: '0px', border: 'none', cursor: 'pointer', svg: {
             background: 'transparent',
@@ -17717,12 +17718,12 @@ const styles$e = {
 
 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$e.primary : {})), (variant === iconButtonVariants.TRANSPARENT ? styles$e.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$d.primary : {})), (variant === iconButtonVariants.TRANSPARENT ? styles$d.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$f.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$e.modalHead, children: [children, onDismiss && jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: onDismiss })] })), !hideDivider && jsx$2(Divider, {})] }));
 };
 
 const Modal = (_a) => {
@@ -17738,10 +17739,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$f.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$f.backdrop), backdrop), onClick: onClose })] }));
+                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' } }, props, { sx: Object.assign(Object.assign({}, styles$e.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$e.backdrop), backdrop), onClick: onClose })] }));
 };
 
-const styles$d = {
+const styles$c = {
     container: {
         display: 'flex',
         borderRadius: '10px',
@@ -43601,7 +43602,7 @@ function offset() {
   return null;
 }
 
-function styles$c() {
+function styles$b() {
   const window = getWindow();
   if (this[0]) return window.getComputedStyle(this[0], null);
   return {};
@@ -43980,7 +43981,7 @@ const Methods = {
   transitionEnd: transitionEnd$1,
   outerWidth,
   outerHeight,
-  styles: styles$c,
+  styles: styles$b,
   offset,
   css,
   each: each$1,
@@ -48581,7 +48582,7 @@ const getDotPos = (index, carouselLength) => {
             : index - carouselLength;
 };
 
-const styles$b = {
+const styles$a = {
     mainComponent: {
         width: '100%',
         flexDirection: 'column',
@@ -48654,7 +48655,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$b.bubbleContainer, children: [...Array(recommendations === null || recommendations === void 0 ? void 0 : recommendations.length)].map((_, i) => {
+                }) }), jsx$2(Flex, { sx: styles$a.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);
                 }) })] }));
 };
@@ -70802,954 +70803,6 @@ const remove0xPrefix = (str) => {
     return str;
 };
 
-const styles$a = {
-    linkShareButton: {
-        background: 'migration',
-        width: '36px',
-        height: '26px',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: '8px',
-        cursor: 'pointer',
-    },
-    containerLinksShare: {
-        position: 'absolute',
-        height: '28px',
-        right: '8.5px',
-        top: '9px',
-        justifyContent: 'center',
-        alignItems: 'center',
-        gap: '10px',
-        zIndex: 3,
-    },
-};
-
-var domToImage = {exports: {}};
-
-(function (module) {
-	(function (global) {
-
-	    var util = newUtil();
-	    var inliner = newInliner();
-	    var fontFaces = newFontFaces();
-	    var images = newImages();
-
-	    // Default impl options
-	    var defaultOptions = {
-	        // Default is to fail on error, no placeholder
-	        imagePlaceholder: undefined,
-	        // Default cache bust is false, it will use the cache
-	        cacheBust: false
-	    };
-
-	    var domtoimage = {
-	        toSvg: toSvg,
-	        toPng: toPng,
-	        toJpeg: toJpeg,
-	        toBlob: toBlob,
-	        toPixelData: toPixelData,
-	        impl: {
-	            fontFaces: fontFaces,
-	            images: images,
-	            util: util,
-	            inliner: inliner,
-	            options: {}
-	        }
-	    };
-
-	    module.exports = domtoimage;
-
-
-	    /**
-	     * @param {Node} node - The DOM Node object to render
-	     * @param {Object} options - Rendering options
-	     * @param {Function} options.filter - Should return true if passed node should be included in the output
-	     *          (excluding node means excluding it's children as well). Not called on the root node.
-	     * @param {String} options.bgcolor - color for the background, any valid CSS color value.
-	     * @param {Number} options.width - width to be applied to node before rendering.
-	     * @param {Number} options.height - height to be applied to node before rendering.
-	     * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
-	     * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
-	                defaults to 1.0.
-	     * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
-	     * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
-	     * @return {Promise} - A promise that is fulfilled with a SVG image data URL
-	     * */
-	    function toSvg(node, options) {
-	        options = options || {};
-	        copyOptions(options);
-	        return Promise.resolve(node)
-	            .then(function (node) {
-	                return cloneNode(node, options.filter, true);
-	            })
-	            .then(embedFonts)
-	            .then(inlineImages)
-	            .then(applyOptions)
-	            .then(function (clone) {
-	                return makeSvgDataUri(clone,
-	                    options.width || util.width(node),
-	                    options.height || util.height(node)
-	                );
-	            });
-
-	        function applyOptions(clone) {
-	            if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
-
-	            if (options.width) clone.style.width = options.width + 'px';
-	            if (options.height) clone.style.height = options.height + 'px';
-
-	            if (options.style)
-	                Object.keys(options.style).forEach(function (property) {
-	                    clone.style[property] = options.style[property];
-	                });
-
-	            return clone;
-	        }
-	    }
-
-	    /**
-	     * @param {Node} node - The DOM Node object to render
-	     * @param {Object} options - Rendering options, @see {@link toSvg}
-	     * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
-	     * */
-	    function toPixelData(node, options) {
-	        return draw(node, options || {})
-	            .then(function (canvas) {
-	                return canvas.getContext('2d').getImageData(
-	                    0,
-	                    0,
-	                    util.width(node),
-	                    util.height(node)
-	                ).data;
-	            });
-	    }
-
-	    /**
-	     * @param {Node} node - The DOM Node object to render
-	     * @param {Object} options - Rendering options, @see {@link toSvg}
-	     * @return {Promise} - A promise that is fulfilled with a PNG image data URL
-	     * */
-	    function toPng(node, options) {
-	        return draw(node, options || {})
-	            .then(function (canvas) {
-	                return canvas.toDataURL();
-	            });
-	    }
-
-	    /**
-	     * @param {Node} node - The DOM Node object to render
-	     * @param {Object} options - Rendering options, @see {@link toSvg}
-	     * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
-	     * */
-	    function toJpeg(node, options) {
-	        options = options || {};
-	        return draw(node, options)
-	            .then(function (canvas) {
-	                return canvas.toDataURL('image/jpeg', options.quality || 1.0);
-	            });
-	    }
-
-	    /**
-	     * @param {Node} node - The DOM Node object to render
-	     * @param {Object} options - Rendering options, @see {@link toSvg}
-	     * @return {Promise} - A promise that is fulfilled with a PNG image blob
-	     * */
-	    function toBlob(node, options) {
-	        return draw(node, options || {})
-	            .then(util.canvasToBlob);
-	    }
-
-	    function copyOptions(options) {
-	        // Copy options to impl options for use in impl
-	        if(typeof(options.imagePlaceholder) === 'undefined') {
-	            domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
-	        } else {
-	            domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
-	        }
-
-	        if(typeof(options.cacheBust) === 'undefined') {
-	            domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
-	        } else {
-	            domtoimage.impl.options.cacheBust = options.cacheBust;
-	        }
-	    }
-
-	    function draw(domNode, options) {
-	        return toSvg(domNode, options)
-	            .then(util.makeImage)
-	            .then(util.delay(100))
-	            .then(function (image) {
-	                var canvas = newCanvas(domNode);
-	                canvas.getContext('2d').drawImage(image, 0, 0);
-	                return canvas;
-	            });
-
-	        function newCanvas(domNode) {
-	            var canvas = document.createElement('canvas');
-	            canvas.width = options.width || util.width(domNode);
-	            canvas.height = options.height || util.height(domNode);
-
-	            if (options.bgcolor) {
-	                var ctx = canvas.getContext('2d');
-	                ctx.fillStyle = options.bgcolor;
-	                ctx.fillRect(0, 0, canvas.width, canvas.height);
-	            }
-
-	            return canvas;
-	        }
-	    }
-
-	    function cloneNode(node, filter, root) {
-	        if (!root && filter && !filter(node)) return Promise.resolve();
-
-	        return Promise.resolve(node)
-	            .then(makeNodeCopy)
-	            .then(function (clone) {
-	                return cloneChildren(node, clone, filter);
-	            })
-	            .then(function (clone) {
-	                return processClone(node, clone);
-	            });
-
-	        function makeNodeCopy(node) {
-	            if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
-	            return node.cloneNode(false);
-	        }
-
-	        function cloneChildren(original, clone, filter) {
-	            var children = original.childNodes;
-	            if (children.length === 0) return Promise.resolve(clone);
-
-	            return cloneChildrenInOrder(clone, util.asArray(children), filter)
-	                .then(function () {
-	                    return clone;
-	                });
-
-	            function cloneChildrenInOrder(parent, children, filter) {
-	                var done = Promise.resolve();
-	                children.forEach(function (child) {
-	                    done = done
-	                        .then(function () {
-	                            return cloneNode(child, filter);
-	                        })
-	                        .then(function (childClone) {
-	                            if (childClone) parent.appendChild(childClone);
-	                        });
-	                });
-	                return done;
-	            }
-	        }
-
-	        function processClone(original, clone) {
-	            if (!(clone instanceof Element)) return clone;
-
-	            return Promise.resolve()
-	                .then(cloneStyle)
-	                .then(clonePseudoElements)
-	                .then(copyUserInput)
-	                .then(fixSvg)
-	                .then(function () {
-	                    return clone;
-	                });
-
-	            function cloneStyle() {
-	                copyStyle(window.getComputedStyle(original), clone.style);
-
-	                function copyStyle(source, target) {
-	                    if (source.cssText) target.cssText = source.cssText;
-	                    else copyProperties(source, target);
-
-	                    function copyProperties(source, target) {
-	                        util.asArray(source).forEach(function (name) {
-	                            target.setProperty(
-	                                name,
-	                                source.getPropertyValue(name),
-	                                source.getPropertyPriority(name)
-	                            );
-	                        });
-	                    }
-	                }
-	            }
-
-	            function clonePseudoElements() {
-	                [':before', ':after'].forEach(function (element) {
-	                    clonePseudoElement(element);
-	                });
-
-	                function clonePseudoElement(element) {
-	                    var style = window.getComputedStyle(original, element);
-	                    var content = style.getPropertyValue('content');
-
-	                    if (content === '' || content === 'none') return;
-
-	                    var className = util.uid();
-	                    clone.className = clone.className + ' ' + className;
-	                    var styleElement = document.createElement('style');
-	                    styleElement.appendChild(formatPseudoElementStyle(className, element, style));
-	                    clone.appendChild(styleElement);
-
-	                    function formatPseudoElementStyle(className, element, style) {
-	                        var selector = '.' + className + ':' + element;
-	                        var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
-	                        return document.createTextNode(selector + '{' + cssText + '}');
-
-	                        function formatCssText(style) {
-	                            var content = style.getPropertyValue('content');
-	                            return style.cssText + ' content: ' + content + ';';
-	                        }
-
-	                        function formatCssProperties(style) {
-
-	                            return util.asArray(style)
-	                                .map(formatProperty)
-	                                .join('; ') + ';';
-
-	                            function formatProperty(name) {
-	                                return name + ': ' +
-	                                    style.getPropertyValue(name) +
-	                                    (style.getPropertyPriority(name) ? ' !important' : '');
-	                            }
-	                        }
-	                    }
-	                }
-	            }
-
-	            function copyUserInput() {
-	                if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
-	                if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
-	            }
-
-	            function fixSvg() {
-	                if (!(clone instanceof SVGElement)) return;
-	                clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-
-	                if (!(clone instanceof SVGRectElement)) return;
-	                ['width', 'height'].forEach(function (attribute) {
-	                    var value = clone.getAttribute(attribute);
-	                    if (!value) return;
-
-	                    clone.style.setProperty(attribute, value);
-	                });
-	            }
-	        }
-	    }
-
-	    function embedFonts(node) {
-	        return fontFaces.resolveAll()
-	            .then(function (cssText) {
-	                var styleNode = document.createElement('style');
-	                node.appendChild(styleNode);
-	                styleNode.appendChild(document.createTextNode(cssText));
-	                return node;
-	            });
-	    }
-
-	    function inlineImages(node) {
-	        return images.inlineAll(node)
-	            .then(function () {
-	                return node;
-	            });
-	    }
-
-	    function makeSvgDataUri(node, width, height) {
-	        return Promise.resolve(node)
-	            .then(function (node) {
-	                node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
-	                return new XMLSerializer().serializeToString(node);
-	            })
-	            .then(util.escapeXhtml)
-	            .then(function (xhtml) {
-	                return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
-	            })
-	            .then(function (foreignObject) {
-	                return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
-	                    foreignObject + '</svg>';
-	            })
-	            .then(function (svg) {
-	                return 'data:image/svg+xml;charset=utf-8,' + svg;
-	            });
-	    }
-
-	    function newUtil() {
-	        return {
-	            escape: escape,
-	            parseExtension: parseExtension,
-	            mimeType: mimeType,
-	            dataAsUrl: dataAsUrl,
-	            isDataUrl: isDataUrl,
-	            canvasToBlob: canvasToBlob,
-	            resolveUrl: resolveUrl,
-	            getAndEncode: getAndEncode,
-	            uid: uid(),
-	            delay: delay,
-	            asArray: asArray,
-	            escapeXhtml: escapeXhtml,
-	            makeImage: makeImage,
-	            width: width,
-	            height: height
-	        };
-
-	        function mimes() {
-	            /*
-	             * Only WOFF and EOT mime types for fonts are 'real'
-	             * see http://www.iana.org/assignments/media-types/media-types.xhtml
-	             */
-	            var WOFF = 'application/font-woff';
-	            var JPEG = 'image/jpeg';
-
-	            return {
-	                'woff': WOFF,
-	                'woff2': WOFF,
-	                'ttf': 'application/font-truetype',
-	                'eot': 'application/vnd.ms-fontobject',
-	                'png': 'image/png',
-	                'jpg': JPEG,
-	                'jpeg': JPEG,
-	                'gif': 'image/gif',
-	                'tiff': 'image/tiff',
-	                'svg': 'image/svg+xml'
-	            };
-	        }
-
-	        function parseExtension(url) {
-	            var match = /\.([^\.\/]*?)$/g.exec(url);
-	            if (match) return match[1];
-	            else return '';
-	        }
-
-	        function mimeType(url) {
-	            var extension = parseExtension(url).toLowerCase();
-	            return mimes()[extension] || '';
-	        }
-
-	        function isDataUrl(url) {
-	            return url.search(/^(data:)/) !== -1;
-	        }
-
-	        function toBlob(canvas) {
-	            return new Promise(function (resolve) {
-	                var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
-	                var length = binaryString.length;
-	                var binaryArray = new Uint8Array(length);
-
-	                for (var i = 0; i < length; i++)
-	                    binaryArray[i] = binaryString.charCodeAt(i);
-
-	                resolve(new Blob([binaryArray], {
-	                    type: 'image/png'
-	                }));
-	            });
-	        }
-
-	        function canvasToBlob(canvas) {
-	            if (canvas.toBlob)
-	                return new Promise(function (resolve) {
-	                    canvas.toBlob(resolve);
-	                });
-
-	            return toBlob(canvas);
-	        }
-
-	        function resolveUrl(url, baseUrl) {
-	            var doc = document.implementation.createHTMLDocument();
-	            var base = doc.createElement('base');
-	            doc.head.appendChild(base);
-	            var a = doc.createElement('a');
-	            doc.body.appendChild(a);
-	            base.href = baseUrl;
-	            a.href = url;
-	            return a.href;
-	        }
-
-	        function uid() {
-	            var index = 0;
-
-	            return function () {
-	                return 'u' + fourRandomChars() + index++;
-
-	                function fourRandomChars() {
-	                    /* see http://stackoverflow.com/a/6248722/2519373 */
-	                    return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
-	                }
-	            };
-	        }
-
-	        function makeImage(uri) {
-	            return new Promise(function (resolve, reject) {
-	                var image = new Image();
-	                image.onload = function () {
-	                    resolve(image);
-	                };
-	                image.onerror = reject;
-	                image.src = uri;
-	            });
-	        }
-
-	        function getAndEncode(url) {
-	            var TIMEOUT = 30000;
-	            if(domtoimage.impl.options.cacheBust) {
-	                // Cache bypass so we dont have CORS issues with cached images
-	                // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
-	                url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
-	            }
-
-	            return new Promise(function (resolve) {
-	                var request = new XMLHttpRequest();
-
-	                request.onreadystatechange = done;
-	                request.ontimeout = timeout;
-	                request.responseType = 'blob';
-	                request.timeout = TIMEOUT;
-	                request.open('GET', url, true);
-	                request.send();
-
-	                var placeholder;
-	                if(domtoimage.impl.options.imagePlaceholder) {
-	                    var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
-	                    if(split && split[1]) {
-	                        placeholder = split[1];
-	                    }
-	                }
-
-	                function done() {
-	                    if (request.readyState !== 4) return;
-
-	                    if (request.status !== 200) {
-	                        if(placeholder) {
-	                            resolve(placeholder);
-	                        } else {
-	                            fail('cannot fetch resource: ' + url + ', status: ' + request.status);
-	                        }
-
-	                        return;
-	                    }
-
-	                    var encoder = new FileReader();
-	                    encoder.onloadend = function () {
-	                        var content = encoder.result.split(/,/)[1];
-	                        resolve(content);
-	                    };
-	                    encoder.readAsDataURL(request.response);
-	                }
-
-	                function timeout() {
-	                    if(placeholder) {
-	                        resolve(placeholder);
-	                    } else {
-	                        fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);
-	                    }
-	                }
-
-	                function fail(message) {
-	                    console.error(message);
-	                    resolve('');
-	                }
-	            });
-	        }
-
-	        function dataAsUrl(content, type) {
-	            return 'data:' + type + ';base64,' + content;
-	        }
-
-	        function escape(string) {
-	            return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
-	        }
-
-	        function delay(ms) {
-	            return function (arg) {
-	                return new Promise(function (resolve) {
-	                    setTimeout(function () {
-	                        resolve(arg);
-	                    }, ms);
-	                });
-	            };
-	        }
-
-	        function asArray(arrayLike) {
-	            var array = [];
-	            var length = arrayLike.length;
-	            for (var i = 0; i < length; i++) array.push(arrayLike[i]);
-	            return array;
-	        }
-
-	        function escapeXhtml(string) {
-	            return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
-	        }
-
-	        function width(node) {
-	            var leftBorder = px(node, 'border-left-width');
-	            var rightBorder = px(node, 'border-right-width');
-	            return node.scrollWidth + leftBorder + rightBorder;
-	        }
-
-	        function height(node) {
-	            var topBorder = px(node, 'border-top-width');
-	            var bottomBorder = px(node, 'border-bottom-width');
-	            return node.scrollHeight + topBorder + bottomBorder;
-	        }
-
-	        function px(node, styleProperty) {
-	            var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
-	            return parseFloat(value.replace('px', ''));
-	        }
-	    }
-
-	    function newInliner() {
-	        var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
-
-	        return {
-	            inlineAll: inlineAll,
-	            shouldProcess: shouldProcess,
-	            impl: {
-	                readUrls: readUrls,
-	                inline: inline
-	            }
-	        };
-
-	        function shouldProcess(string) {
-	            return string.search(URL_REGEX) !== -1;
-	        }
-
-	        function readUrls(string) {
-	            var result = [];
-	            var match;
-	            while ((match = URL_REGEX.exec(string)) !== null) {
-	                result.push(match[1]);
-	            }
-	            return result.filter(function (url) {
-	                return !util.isDataUrl(url);
-	            });
-	        }
-
-	        function inline(string, url, baseUrl, get) {
-	            return Promise.resolve(url)
-	                .then(function (url) {
-	                    return baseUrl ? util.resolveUrl(url, baseUrl) : url;
-	                })
-	                .then(get || util.getAndEncode)
-	                .then(function (data) {
-	                    return util.dataAsUrl(data, util.mimeType(url));
-	                })
-	                .then(function (dataUrl) {
-	                    return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
-	                });
-
-	            function urlAsRegex(url) {
-	                return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
-	            }
-	        }
-
-	        function inlineAll(string, baseUrl, get) {
-	            if (nothingToInline()) return Promise.resolve(string);
-
-	            return Promise.resolve(string)
-	                .then(readUrls)
-	                .then(function (urls) {
-	                    var done = Promise.resolve(string);
-	                    urls.forEach(function (url) {
-	                        done = done.then(function (string) {
-	                            return inline(string, url, baseUrl, get);
-	                        });
-	                    });
-	                    return done;
-	                });
-
-	            function nothingToInline() {
-	                return !shouldProcess(string);
-	            }
-	        }
-	    }
-
-	    function newFontFaces() {
-	        return {
-	            resolveAll: resolveAll,
-	            impl: {
-	                readAll: readAll
-	            }
-	        };
-
-	        function resolveAll() {
-	            return readAll()
-	                .then(function (webFonts) {
-	                    return Promise.all(
-	                        webFonts.map(function (webFont) {
-	                            return webFont.resolve();
-	                        })
-	                    );
-	                })
-	                .then(function (cssStrings) {
-	                    return cssStrings.join('\n');
-	                });
-	        }
-
-	        function readAll() {
-	            return Promise.resolve(util.asArray(document.styleSheets))
-	                .then(getCssRules)
-	                .then(selectWebFontRules)
-	                .then(function (rules) {
-	                    return rules.map(newWebFont);
-	                });
-
-	            function selectWebFontRules(cssRules) {
-	                return cssRules
-	                    .filter(function (rule) {
-	                        return rule.type === CSSRule.FONT_FACE_RULE;
-	                    })
-	                    .filter(function (rule) {
-	                        return inliner.shouldProcess(rule.style.getPropertyValue('src'));
-	                    });
-	            }
-
-	            function getCssRules(styleSheets) {
-	                var cssRules = [];
-	                styleSheets.forEach(function (sheet) {
-	                    try {
-	                        util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
-	                    } catch (e) {
-	                        console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
-	                    }
-	                });
-	                return cssRules;
-	            }
-
-	            function newWebFont(webFontRule) {
-	                return {
-	                    resolve: function resolve() {
-	                        var baseUrl = (webFontRule.parentStyleSheet || {}).href;
-	                        return inliner.inlineAll(webFontRule.cssText, baseUrl);
-	                    },
-	                    src: function () {
-	                        return webFontRule.style.getPropertyValue('src');
-	                    }
-	                };
-	            }
-	        }
-	    }
-
-	    function newImages() {
-	        return {
-	            inlineAll: inlineAll,
-	            impl: {
-	                newImage: newImage
-	            }
-	        };
-
-	        function newImage(element) {
-	            return {
-	                inline: inline
-	            };
-
-	            function inline(get) {
-	                if (util.isDataUrl(element.src)) return Promise.resolve();
-
-	                return Promise.resolve(element.src)
-	                    .then(get || util.getAndEncode)
-	                    .then(function (data) {
-	                        return util.dataAsUrl(data, util.mimeType(element.src));
-	                    })
-	                    .then(function (dataUrl) {
-	                        return new Promise(function (resolve, reject) {
-	                            element.onload = resolve;
-	                            element.onerror = reject;
-	                            element.src = dataUrl;
-	                        });
-	                    });
-	            }
-	        }
-
-	        function inlineAll(node) {
-	            if (!(node instanceof Element)) return Promise.resolve(node);
-
-	            return inlineBackground(node)
-	                .then(function () {
-	                    if (node instanceof HTMLImageElement)
-	                        return newImage(node).inline();
-	                    else
-	                        return Promise.all(
-	                            util.asArray(node.childNodes).map(function (child) {
-	                                return inlineAll(child);
-	                            })
-	                        );
-	                });
-
-	            function inlineBackground(node) {
-	                var background = node.style.getPropertyValue('background');
-
-	                if (!background) return Promise.resolve(node);
-
-	                return inliner.inlineAll(background)
-	                    .then(function (inlined) {
-	                        node.style.setProperty(
-	                            'background',
-	                            inlined,
-	                            node.style.getPropertyPriority('background')
-	                        );
-	                    })
-	                    .then(function () {
-	                        return node;
-	                    });
-	            }
-	        }
-	    }
-	})(); 
-} (domToImage));
-
-var domToImageExports = domToImage.exports;
-var domtoimage = /*@__PURE__*/getDefaultExportFromCjs(domToImageExports);
-
-function getTemplateHTML(data) {
-    var _a, _b, _c;
-    const isProfit = data.data.payout * +data.data.payoutTokenPrice - data.data.dollarValue > 0;
-    const getTokenImage = (symbol) => {
-        return `${APESWAP_LIST_REPO}/assets/${symbol.toUpperCase()}.png`;
-    };
-    const getPrincipalToken = () => {
-        var _a, _b, _c, _d;
-        if (((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.address.toLowerCase()) !== ((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.token0.address.toLowerCase()))
-            return (_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.token0.symbol;
-        return (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.token1.symbol;
-    };
-    const getCalculateOff = () => {
-        if (!data || !data.data)
-            return 0;
-        return 100 - (data.data.dollarValue / (data.data.payout * +data.data.payoutTokenPrice)) * 100;
-    };
-    const getCalculatePriceDiscount = () => {
-        if (!data || !data.data)
-            return 0;
-        return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100;
-    };
-    return `
-  <div id="template-card" class="sharebondimage-card">
-    <img src="/images/bills/title.png" alt="title" style="width: 169px; height: 52px;" />
-    <div class="sharebondimage-nft">
-      <div style="position: relative">
-        <div class="sharebondimage-nft-id">
-          <span>#${data.tokenId}</span>
-        </div>
-        <img src="${data.image}" alt="bill-nft" />
-      </div>
-    </div>
-    <div class="sharebondimage-container-info">
-      <div class="sharebondimage-container-discount">
-        <img src="${getTokenImage((_a = data.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.symbol)}" alt="payout-token-symbol" style="width: 59px; height: 59px;" />
-        <div class="sharebondimage-container-discount-price">
-          <div class="sharebondimage-container-discount-token">
-            <span>${(_b = data.data) === null || _b === void 0 ? void 0 : _b.payoutTokenData.symbol}</span>
-            <span style="text-decoration: line-through">
-              $${formatTransactionAmount(+data.data.payoutTokenPrice)}
-            </span>
-          </div>
-          <span class="sharebondimage-container-discount-price-discount">
-            $${formatTransactionAmount(getCalculatePriceDiscount())}
-          </span>
-        </div>
-        <div class="sharebondimage-container-off">
-          <span>
-            ${formatNumber$3(getCalculateOff())}% OFF
-          </span>
-        </div>
-      </div>
-      <div class="sharebondimage-container-tokens">
-        <div class="sharebondimage-container-token">
-          <img src="${getTokenImage(getPrincipalToken())}" alt="principal-symbol" />
-          <div class="sharebondimage-amount-deposit">
-            ${formatTransactionAmount(data.data.deposit)}
-          </div>
-          <div class="sharebondimage-dollarvalue">
-            $${formatNumber$3(data.data.dollarValue)}
-          </div>
-        </div>
-        <div class="sharebondimage-container-token">
-          <img src="${getTokenImage((_c = data.data) === null || _c === void 0 ? void 0 : _c.payoutTokenData.symbol)}" alt="payout-token2-symbol" />
-          <div class="sharebondimage-container-earntoken">
-            <div class="sharebondimage-amount-earntoken">
-              <div class="sharebondimage-amount-payout">
-                ${formatNumber$3(data.data.payout)}
-              </div>
-              <div class="sharebondimage-amount-dollarvalue">
-                $${formatNumber$3(data.data.payout * +data.data.payoutTokenPrice)}
-              </div>
-            </div>
-            <div class="sharebondimage-profit" style="${!isProfit ? 'display: none' : ''}">
-              <span>
-                +${formatNumber$3(data.data.payout * +data.data.payoutTokenPrice - data.data.dollarValue)}
-                profit!
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  `;
-}
-
-function generateImageFromTemplate(bondNFTData, link, apiUrl) {
-    return __awaiter$9(this, void 0, void 0, function* () {
-        var _a;
-        if (bondNFTData) {
-            const container = document.createElement('div');
-            container.style.position = 'absolute';
-            container.style.top = '-9999px';
-            container.innerHTML = getTemplateHTML(bondNFTData);
-            document.body.appendChild(container);
-            const templateElement = container.querySelector('#template-card');
-            if (!templateElement)
-                return;
-            const fileName = `bond_share_${(_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data.billNftAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.tokenId}`;
-            const existingImage = yield checkImageExists(fileName);
-            if (existingImage) {
-                share(link);
-            }
-            else {
-                domtoimage
-                    .toJpeg(templateElement)
-                    .then((dataUrl) => __awaiter$9(this, void 0, void 0, function* () {
-                    const response = yield fetch(dataUrl);
-                    const blob = yield response.blob();
-                    let formData = new FormData();
-                    formData.append('file', blob, fileName);
-                    yield axios.post(`${apiUrl}/cloudinary/uploadFile`, formData, {
-                        headers: { 'Content-Type': 'multipart/form-data' },
-                    });
-                    share(link);
-                }))
-                    .catch((error) => {
-                    console.error('Error converting image:', error);
-                });
-            }
-        }
-    });
-}
-function share(link) {
-    const linkElement = document.createElement('a');
-    linkElement.href = link;
-    linkElement.target = '_blank';
-    linkElement.click();
-}
-function checkImageExists(fileName) {
-    return __awaiter$9(this, void 0, void 0, function* () {
-        let existImg = true;
-        try {
-            yield axios.get(`https://res.cloudinary.com/dtlafxop8/image/upload/v1/bond_share/${fileName}.jpg`);
-        }
-        catch (e) {
-            existImg = false;
-        }
-        return existImg;
-    });
-}
-
-const LinkShare = ({ bondNFTData, userBill, }) => {
-    var _a;
-    const mainUrl = useURLByEnvironment('mainUrl');
-    const apiUrl = useURLByEnvironment('apiV2');
-    const shareUrl = `${mainUrl}/bond-nft?bondAddress=${(_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data.billNftAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()}%26bondChain=${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}%26tokenId=${userBill === null || userBill === void 0 ? void 0 : userBill.id}`;
-    const text = `I've filled my bags with $${userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken.symbol} at a discount, thanks to Bonds-only on @apebond! Check it out: `;
-    return (jsxs(Flex$1, { sx: styles$a.containerLinksShare, children: [jsx$2(Flex$1, { sx: styles$a.linkShareButton, onClick: () => generateImageFromTemplate(bondNFTData, `https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, apiUrl), children: jsx$2(Svg, { icon: "twitter", width: 16 }) }), jsx$2(Flex$1, { sx: styles$a.linkShareButton, onClick: () => generateImageFromTemplate(bondNFTData, `https://warpcast.com/~/compose?text=${text}&embeds[]=${shareUrl}`, apiUrl), children: jsx$2(Svg, { icon: "Farcaster", width: 16 }) })] }));
-};
-
 const YourBondsModal = ({ onDismiss, userBill }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
     // Hooks
@@ -71819,7 +70872,7 @@ const YourBondsModal = ({ onDismiss, userBill }) => {
                                         justifyContent: 'center',
                                         alignItems: 'center',
                                         zIndex: 1,
-                                    }, children: jsx$2(Spinner, { width: 100 }) })), jsx$2(LinkShare, { bondNFTData: bondNFTData, userBill: userBill })] }), jsxs(Flex$1, { className: "yourbondsmodal yourbondinfo", children: [jsxs(Flex$1, { className: "yourbondinfo title-container", children: [jsx$2(Flex$1, { className: "title-container bondicon", children: userBill && (jsx$2(TokenImage, { symbol: (_h = (_g = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName) !== null && _h !== void 0 ? _h : (_k = (_j = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _j === void 0 ? void 0 : _j.earnToken) === null || _k === void 0 ? void 0 : _k.symbol, size: 40, chain: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: (_m = (_l = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _l === void 0 ? void 0 : _l.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken.symbol }), jsx$2(Flex$1, { className: "title-container tokentags", children: (_p = (_o = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _o === void 0 ? void 0 : _o.tags) === null || _p === void 0 ? void 0 : _p.slice(0, 1).map((tag) => {
+                                    }, 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: userBill && (jsx$2(TokenImage, { symbol: (_h = (_g = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName) !== null && _h !== void 0 ? _h : (_k = (_j = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _j === void 0 ? void 0 : _j.earnToken) === null || _k === void 0 ? void 0 : _k.symbol, size: 40, chain: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: (_m = (_l = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _l === void 0 ? void 0 : _l.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken.symbol }), jsx$2(Flex$1, { className: "title-container tokentags", children: (_p = (_o = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _o === void 0 ? void 0 : _o.tags) === null || _p === void 0 ? void 0 : _p.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 === null || userBill === void 0 ? void 0 : 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'}`,
@@ -72142,10 +71195,12 @@ function useUserBonds() {
 }
 const getUserBonds = (account, bondList) => __awaiter$9(void 0, void 0, void 0, function* () {
     try {
-        // console.log('User Bonds: Started')
-        const results = yield Promise.all(MAINNET_CHAINS.map((chain) => fetchUserOwnedBillsDataAsync(chain, account, bondList)));
-        // console.log('User Bonds: Finished')
-        return results.flat().flatMap((results) => results.userOwnedBills);
+        const results = yield Promise.allSettled(MAINNET_CHAINS.map((chain) => fetchUserOwnedBillsDataAsync(chain, account, bondList)));
+        // Filter out only fulfilled promises
+        const fulfilledResults = results
+            .filter((result) => result.status === 'fulfilled')
+            .map((result) => result.value);
+        return fulfilledResults.flat().flatMap((result) => result.userOwnedBills);
     }
     catch (_a) {
         return [];
@@ -72542,8 +71597,8 @@ const remainingPercentage = (bond) => {
 };
 const getDiscountColor = (discount) => {
     if (!discount)
-        return 'white';
-    return discount < 0 ? '#DF4141' : '#38A611';
+        return '';
+    return discount < 0 ? 'discount-negative' : 'discount-positive';
 };
 const calculateARR = (bond) => {
     const discount2 = 'discount' in bond ? bond.discount : undefined;
@@ -73821,15 +72876,11 @@ const ZapModal = ({ onDismiss, outputToken, account, chainId }) => {
                                         : 'BUY' })) }), jsx$2(Flex, { sx: { marginTop: '10px', justifyContent: 'center' }, children: jsx$2(Link, { href: "https://docs.ape.bond/apebond/products-and-features/zap", target: "_blank", rel: "noopener noreferrer", sx: { textDecoration: 'none' }, children: jsxs(Text, { style: { fontSize: '12px', lineHeight: '18px', fontWeight: 400, borderBottom: '1px solid' }, children: ["Learn more", '>'] }) }) })] })] }));
 };
 
-const AccordionText = ({ title, body, isVisible = false }) => {
-    const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
-    const toggleDropdown = () => {
-        setIsDropdownExpanded(!isDropdownExpanded);
-    };
+const AccordionText = ({ isVisible = false }) => {
     if (!isVisible) {
         return null;
     }
-    return (jsxs(Fragment$1, { children: [jsxs(Flex, { className: "accordion-header", onClick: toggleDropdown, children: [jsx$2(Flex, { className: "accordion-title", children: title }), jsx$2(Flex, { className: "accordion-icon", children: jsx$2(Svg, { icon: "caret", direction: isDropdownExpanded ? 'down' : 'up' }) })] }), jsx$2(AnimatePresence, { children: isDropdownExpanded && (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, { className: "accordion-body", children: body }) })) })] }));
+    return (jsxs(Fragment$1, { children: [jsx$2(Flex, { className: "accordion-title", children: "Bonds at Seedify are an exciting new product!" }), jsx$2(AnimatePresence, { children: 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: jsxs(Flex, { className: "accordion-body", sx: { flexDirection: 'column' }, children: [jsx$2("p", { children: "Are you a strong believer in a project? Do you want to buy project tokens at a discount compared to the market? If so, you've arrived at the right place!" }), jsx$2("p", { children: "Bonds allow you to purchase project tokens at a discounted price with a short-term linear vesting. Its a perfect solution for projects you're planning to buy and hold tokens of!" }), jsx$2("p", { children: "When you buy a Bond, you essentially are given an NFT (which you can transfer across your wallets). Whichever wallet owns the NFT will be able to Claim tokens of that project post-purchase until vesting period ends. Bonds at Seedify can range their vesting from 7 Days to 90 Days, with 30 Days being the standard." })] }) }) })] }));
 };
 
 const useSoulZapBondQuote = (typedValue, inputCurrency, bond, account) => {
@@ -74060,13 +73111,25 @@ const ProjectDescription = ({ description }) => {
                         }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(SafeHTMLComponent, { html: description !== null && description !== void 0 ? description : '' }) })] }));
 };
 
+const BondModalHeaderAlt = ({ bondData, onDismiss, showProjectInfoButton, }) => {
+    const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
+    const handleClose = () => {
+        if (typeof window !== 'undefined') {
+            window.history.pushState({}, '', `/bonds`);
+        }
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    return (jsx$2(Flex, { className: "modaltable-container title-container", children: jsx$2(Flex, { className: "slipagge-close-icons", sx: { flexDirection: 'row' }, children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mb: '-5px', pr: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose })] })) : (jsx$2(Flex, { sx: {}, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) }) }));
+};
+
 const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, 
 // ??
-accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = false, }) => {
+accordionTitle = 'What are Bonds?', accordionBody = 'Body', }) => {
     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);
+    const [accordionVisible, setAccordionVisible] = useState(false);
     // Hooks
     const userChainId = useChainId();
     const { address: account } = useAccount();
@@ -74264,15 +73327,15 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                 !account ||
                                                 !inputValue ||
-                                                parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] }), 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: [typeof window !== 'undefined' && 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) => {
+                                                parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] })] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content font-small gpt", children: [typeof window !== 'undefined' && 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: "bondmodal-header-alt", sx: { mb: '20px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) }), 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, { className: "modal-youreceive-row", sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { className: "modal-youreceive-textbox", children: ["You will receive:", jsx$2(Flex, { className: "modal-youreceive-tokenimage", sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : bondData.earnToken.symbol, size: 20 }) }), jsxs("span", { className: "modal-receive-text", children: [(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 });
-                                                            }, children: `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsxs(Button, { className: "action-button", load: load, disabled: load || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account || !inputValue || parseFloat(inputValue) === 0, onClick: handleBothPurchases, children: ["buy ", isZap ? 'zap' : 'normal'] })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
+                                                            }, children: `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsxs(Button, { className: "action-button", load: load, disabled: load || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account || !inputValue || parseFloat(inputValue) === 0, onClick: handleBothPurchases, children: ["buy", ' ', isZap ? (jsx$2("span", { style: { marginLeft: '8px' }, children: jsx$2(Svg, { icon: "ZapIcon" }) })) : ('')] })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
                                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                                 !account ||
                                                                 !inputValue ||
-                                                                parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] }), 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 }) }))] })) })) }));
+                                                                parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] }), 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" }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, onClick: () => setAccordionVisible(!accordionVisible), children: ["What are bonds? \u00A0 ", jsx$2(Svg, { icon: "caret", direction: accordionVisible ? 'up' : 'down' })] })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { isVisible: accordionVisible }) }))] })) })) }));
 };
 
 /*
@@ -74462,7 +73525,11 @@ var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
 
 const BondRow = ({ bond }) => {
     var _a, _b, _c, _d, _e, _f, _g;
-    const billAddress = 'billAddress' in bond ? bond.billAddress : undefined;
+    const billAddress = 'billAddress' in bond
+        ? bond.billAddress
+        : 'contractAddress' in bond
+            ? bond.contractAddress[bond.chainId]
+            : undefined;
     const discount = 'discount' in bond ? bond.discount : undefined;
     // Modal
     const [openBuyModal] = useModal(jsx$2(ModalHandler, { bondAddress: billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${billAddress}-${bond.chainId}`);
@@ -74501,7 +73568,7 @@ const BondRow = ({ bond }) => {
         const tokens = new BigNumber$1(tokensRemaining);
         return tokens.times(payoutTokenPrice);
     };
-    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container", children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: "discount-column", style: { color: getDiscountColor(discount) }, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' }), jsx$2("div", { className: "arr-column", children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' }), jsx$2("div", { className: "terms-column", children: ((_a = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _a === void 0 ? void 0 : _a.days) ? `${(_b = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _b === void 0 ? void 0 : _b.days} D` : '-' }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
+    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container", children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: `discount-column ${getDiscountColor(discount)}`, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' }), jsx$2("div", { className: "arr-column", children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' }), jsx$2("div", { className: "terms-column", children: ((_a = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _a === void 0 ? void 0 : _a.days) ? `${(_b = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _b === void 0 ? void 0 : _b.days} D` : '-' }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
@@ -74529,7 +73596,7 @@ const HotBondCard = ({ bond }) => {
             },
         });
     };
-    return (jsx$2(Flex, { sx: styles$b.desktopCard, onClick: handleOpenModal, 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(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), 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: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
+    return (jsx$2(Flex, { sx: styles$a.desktopCard, onClick: handleOpenModal, 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(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), 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: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
 };
 
 function useHotBondContracts() {
@@ -74580,7 +73647,7 @@ const HotBondCards = () => {
         setActiveSlide(index);
         swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
     };
-    return (jsxs(Flex, { sx: styles$b.mainComponent, children: [jsx$2(Flex, { sx: styles$b.hotBondTitle, children: "HOT BONDS" }), jsx$2(Flex, { sx: styles$b.desktopCards, children: filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.slice(0, 3).map((bond, index) => {
+    return (jsxs(Flex, { sx: styles$a.mainComponent, children: [jsx$2(Flex, { sx: styles$a.hotBondTitle, children: "HOT BONDS" }), jsx$2(Flex, { sx: styles$a.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',
@@ -74599,7 +73666,7 @@ const HotBondCards = () => {
                                     display: 'flex',
                                     justifyContent: 'center',
                                 }, children: jsx$2(HotBondCard, { bond: bond }, `${bond.billAddress}-${index}`) }, index));
-                        }) }), jsx$2(Flex, { sx: styles$b.bubbleContainer, children: [...Array(hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.length)].map((_, i) => {
+                        }) }), jsx$2(Flex, { sx: styles$a.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);
                         }) })] })] }));
 };
@@ -74760,7 +73827,7 @@ const RecommendationCards$1 = () => {
                                     color: 'grey',
                                     fontSize: ['11px'],
                                     fontWeight: 500,
-                                }, children: "BONDS MARKETS:" }), jsx$2(RecommendationSelector, { options: options, activeOption: activeOption, setActiveOption: setActiveOption })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(Image$1, { width: 190, height: 20, alt: "poweredBy", src: "/images/bills/powered.png", sx: {
+                                }, children: "BONDS MARKETS:" }), jsx$2(RecommendationSelector, { options: options, activeOption: activeOption, setActiveOption: setActiveOption })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(Image, { width: 190, height: 20, alt: "poweredBy", src: "/images/bills/powered.png", sx: {
                                 width: '190px',
                                 height: '20px',
                                 cursor: 'pointer',
@@ -74833,6 +73900,9 @@ const Bonds = () => {
         if (filterOption !== 'SOLD OUT') {
             billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bond) => !isBondSoldOut(bond));
         }
+        if (filterOption === 'SOLD OUT') {
+            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bond) => !bond.soldOut);
+        }
         if (filterOption === 'FAVORITES') {
             billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => { var _a, _b; return favTokens.includes((_b = (_a = bill === null || bill === void 0 ? void 0 : bill.earnToken) === null || _a === void 0 ? void 0 : _a.symbol) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
         }
@@ -74890,8 +73960,8 @@ const FullBondsView = () => {
 };
 
 const Toggle = ({ options, activeOption, handleToggle, claimableBillsAmount, }) => {
-    return (jsx$2(Flex, { sx: styles$d.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$d.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$c.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$c.switch), { background: option === activeOption ? 'primaryButton' : 'white2' }), onClick: () => handleToggle(option), children: jsxs(Text, { sx: { fontSize: '14px' }, children: [option, option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''] }) }) }, option));
             }) }) }));
 };
 
@@ -91453,4 +90523,148 @@ const ProjectViewWithProviders = (props) => {
     return (jsx$2(Providers, { children: jsx$2(ProjectView, Object.assign({}, props)) }));
 };
 
+function getTemplateHTML(data) {
+    var _a, _b, _c;
+    const isProfit = data.data.payout * +data.data.payoutTokenPrice - data.data.dollarValue > 0;
+    const getTokenImage = (symbol) => {
+        return `${APESWAP_LIST_REPO}/assets/${symbol.toUpperCase()}.png`;
+    };
+    const getPrincipalToken = () => {
+        var _a, _b, _c, _d;
+        if (((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.address.toLowerCase()) !== ((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.token0.address.toLowerCase()))
+            return (_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.token0.symbol;
+        return (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.token1.symbol;
+    };
+    const getCalculateOff = () => {
+        if (!data || !data.data)
+            return 0;
+        return 100 - (data.data.dollarValue / (data.data.payout * +data.data.payoutTokenPrice)) * 100;
+    };
+    const getCalculatePriceDiscount = () => {
+        if (!data || !data.data)
+            return 0;
+        return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100;
+    };
+    return `
+  <div id="template-card" class="sharebondimage-card">
+    <img src="/images/bills/title.png" alt="title" style="width: 169px; height: 52px;" />
+    <div class="sharebondimage-nft">
+      <div style="position: relative">
+        <div class="sharebondimage-nft-id">
+          <span>#${data.tokenId}</span>
+        </div>
+        <img src="${data.image}" alt="bill-nft" />
+      </div>
+    </div>
+    <div class="sharebondimage-container-info">
+      <div class="sharebondimage-container-discount">
+        <img src="${getTokenImage((_a = data.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.symbol)}" alt="payout-token-symbol" style="width: 59px; height: 59px;" />
+        <div class="sharebondimage-container-discount-price">
+          <div class="sharebondimage-container-discount-token">
+            <span>${(_b = data.data) === null || _b === void 0 ? void 0 : _b.payoutTokenData.symbol}</span>
+            <span style="text-decoration: line-through">
+              $${formatTransactionAmount(+data.data.payoutTokenPrice)}
+            </span>
+          </div>
+          <span class="sharebondimage-container-discount-price-discount">
+            $${formatTransactionAmount(getCalculatePriceDiscount())}
+          </span>
+        </div>
+        <div class="sharebondimage-container-off">
+          <span>
+            ${formatNumber$3(getCalculateOff())}% OFF
+          </span>
+        </div>
+      </div>
+      <div class="sharebondimage-container-tokens">
+        <div class="sharebondimage-container-token">
+          <img src="${getTokenImage(getPrincipalToken())}" alt="principal-symbol" />
+          <div class="sharebondimage-amount-deposit">
+            ${formatTransactionAmount(data.data.deposit)}
+          </div>
+          <div class="sharebondimage-dollarvalue">
+            $${formatNumber$3(data.data.dollarValue)}
+          </div>
+        </div>
+        <div class="sharebondimage-container-token">
+          <img src="${getTokenImage((_c = data.data) === null || _c === void 0 ? void 0 : _c.payoutTokenData.symbol)}" alt="payout-token2-symbol" />
+          <div class="sharebondimage-container-earntoken">
+            <div class="sharebondimage-amount-earntoken">
+              <div class="sharebondimage-amount-payout">
+                ${formatNumber$3(data.data.payout)}
+              </div>
+              <div class="sharebondimage-amount-dollarvalue">
+                $${formatNumber$3(data.data.payout * +data.data.payoutTokenPrice)}
+              </div>
+            </div>
+            <div class="sharebondimage-profit" style="${!isProfit ? 'display: none' : ''}">
+              <span>
+                +${formatNumber$3(data.data.payout * +data.data.payoutTokenPrice - data.data.dollarValue)}
+                profit!
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `;
+}
+
+function generateImageFromTemplate(bondNFTData, link, apiUrl) {
+    return __awaiter$9(this, void 0, void 0, function* () {
+        var _a;
+        if (bondNFTData) {
+            const container = document.createElement('div');
+            container.style.position = 'absolute';
+            container.style.top = '-9999px';
+            container.innerHTML = getTemplateHTML(bondNFTData);
+            document.body.appendChild(container);
+            const templateElement = container.querySelector('#template-card');
+            if (!templateElement)
+                return;
+            const fileName = `bond_share_${(_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data.billNftAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.tokenId}`;
+            const existingImage = yield checkImageExists(fileName);
+            if (existingImage) {
+                share(link);
+            }
+            else {
+                domtoimage
+                    .toJpeg(templateElement)
+                    .then((dataUrl) => __awaiter$9(this, void 0, void 0, function* () {
+                    const response = yield fetch(dataUrl);
+                    const blob = yield response.blob();
+                    let formData = new FormData();
+                    formData.append('file', blob, fileName);
+                    yield axios.post(`${apiUrl}/cloudinary/uploadFile`, formData, {
+                        headers: { 'Content-Type': 'multipart/form-data' },
+                    });
+                    share(link);
+                }))
+                    .catch((error) => {
+                    console.error('Error converting image:', error);
+                });
+            }
+        }
+    });
+}
+function share(link) {
+    const linkElement = document.createElement('a');
+    linkElement.href = link;
+    linkElement.target = '_blank';
+    linkElement.click();
+}
+function checkImageExists(fileName) {
+    return __awaiter$9(this, void 0, void 0, function* () {
+        let existImg = true;
+        try {
+            yield axios.get(`https://res.cloudinary.com/dtlafxop8/image/upload/v1/bond_share/${fileName}.jpg`);
+        }
+        catch (e) {
+            existImg = false;
+        }
+        return existImg;
+    });
+}
+
 export { BondModalWithProviders as BondModal, BondsWithProviders as Bonds, FullBondsViewWithProviders as FullBondsView, ProjectViewWithProviders as ProjectView, YourBondsWithProviders as YourBonds, generateImageFromTemplate };