@ape.swap/bonds-sdk 2.0.4-testseed.34 → 2.0.4-testseed.37

package/dist/main.js

@@ -4,7 +4,6 @@ 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 : {};
 
@@ -6295,7 +6294,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 = /*#__PURE__*/React__default.forwardRef(function Image(props, ref) {
+const Image$1 = /*#__PURE__*/React__default.forwardRef(function Image(props, ref) {
   const __outerCss = props.__css;
   return jsx$2(Box$1, {
     ref: ref,
@@ -71315,8 +71314,9 @@ const MenuSelect = (_a) => {
             display: 'flex',
             width: '100%',
             paddingRight: '4px',
+            background: 'white2',
         } }, props, { className: "dropdown", children: options === null || options === void 0 ? void 0 : options.map((option) => {
-            return (jsx$2(SelectItem, { size: "xsm", value: option.value, children: jsx$2(Text, { sx: { fontWeight: 400, pl: '10px' }, children: option.label }) }, option.label));
+            return (jsx$2(SelectItem, { size: "xsm", value: option.value, children: jsx$2(Text, { sx: { fontWeight: 400, pl: '10px' }, className: "menu-selector", children: option.label }) }, option.label));
         }) })));
 };
 
@@ -71393,7 +71393,7 @@ const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, f
         setChainFilterOption(['All Chains']);
         setFilterOption(newOption);
     }, [setChainFilterOption, setFilterOption]);
-    return (jsxs("div", { className: "bonds-filters", children: [jsx$2("div", { className: "desktop-rec-container", children: jsx$2(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), jsx$2("div", { className: "mobile-rec-container", children: jsx$2(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) }), jsx$2("div", { className: "network-filter", children: jsx$2(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), jsxs("div", { className: "clear-all-button", onClick: () => {
+    return (jsxs("div", { className: "bonds-filters", children: [jsx$2("div", { className: "desktop-rec-container", children: jsx$2(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), jsx$2("div", { className: "mobile-rec-container", children: jsx$2(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters }) }), jsx$2("div", { className: "network-filter", children: jsx$2(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), jsxs("div", { className: "clear-all-button", onClick: () => {
                     setChainFilterOption(['All Chains']);
                     setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
                     onHandleQueryChange('');
@@ -72276,9 +72276,9 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId,
                                     !!v.currentTarget.value && isNumber$1(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
                                         ? v.currentTarget.value
                                         : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
-                            } }) }), jsxs(Flex$1, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: { cursor: enableZap ? 'pointer' : 'default' }, children: [jsxs(Flex$1, { children: [jsx$2(Flex$1, { className: "input-container bondicon", children: lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx$2(TokenImage, { symbol: getSymbol(selectedToken, chainId), size: 28, chain: chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: getSymbol(selectedToken, chainId) })] }), enableZap && (jsx$2(Flex$1, { sx: { mr: '8px' }, children: jsx$2(Svg, { icon: "caret" }) }))] })] }), tokenBalance && (jsxs(Flex$1, { className: "input-container balancerow", children: [jsx$2(Flex$1, { children: selectedTokenPrice && typedValue
+                            } }) }), jsxs(Flex$1, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: { cursor: enableZap ? 'pointer' : 'default' }, children: [jsxs(Flex$1, { children: [jsx$2(Flex$1, { className: "input-container bondicon", children: lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx$2(TokenImage, { symbol: getSymbol(selectedToken, chainId), size: 28, chain: chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: getSymbol(selectedToken, chainId) })] }), enableZap && (jsx$2(Flex$1, { sx: { mr: '8px' }, children: jsx$2(Svg, { icon: "caret" }) }))] })] }), jsxs(Flex$1, { className: "input-container balancerow", children: [jsx$2(Flex$1, { children: selectedTokenPrice && typedValue
                             ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`
-                            : '' }), jsxs(Flex$1, { children: [jsxs(Flex$1, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsxs(Flex$1, { className: "balancerow max", children: [tokenBalance !== '0' && handleValueBtn && modalVariant !== 'alt' && (jsx$2(Fragment$1, { children: jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" }) })), tokenBalance !== '0' && handleValueBtn && modalVariant === 'alt' && (jsxs(Fragment$1, { children: [jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) / 4).toString()), children: "25%" }), jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) / 2).toString()), children: "50%" }), jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) * 0.75).toString()), children: "75%" }), jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" })] }))] })] })] }))] }));
+                            : '' }), jsxs(Flex$1, { children: [jsxs(Flex$1, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsxs(Flex$1, { className: "balancerow max", children: [tokenBalance && tokenBalance !== '0' && handleValueBtn && modalVariant !== 'alt' && (jsx$2(Fragment$1, { children: jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" }) })), tokenBalance && tokenBalance !== '0' && handleValueBtn && modalVariant === 'alt' && (jsxs(Flex$1, { children: [jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) / 4).toString()), children: "25%" }), jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) / 2).toString()), children: "50%" }), jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) * 0.75).toString()), children: "75%" }), jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" })] }))] })] })] })] }));
 };
 
 var NetworkNames;
@@ -73103,7 +73103,7 @@ const SafeHTMLComponent = ({ html }) => {
 
 const ProjectDescription = ({ description }) => {
     const [isOpen, setIsOpen] = useState(false);
-    return (jsxs(Flex, { className: "modaltable-container description-container", children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx$2(Text, { sx: {
+    return (jsxs(Flex, { className: "description-container", children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx$2(Text, { sx: {
                             fontSize: ['12px', '12px', '12px', '14px'],
                             mt: '10px',
                             lineHeight: ['18px', '18px', '18px', '21px'],
@@ -73139,7 +73139,7 @@ const BondModalHeaderAlt = ({ bondData, onDismiss, showProjectInfoButton, }) =>
     //     },
     //   })
     // }
-    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" }) })) }) }));
+    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: { 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 ImageAndShortDescription = ({ bondData, onDismiss }) => {
@@ -73177,7 +73177,7 @@ const ImageAndShortDescription = ({ bondData, onDismiss }) => {
                                     justifyContent: 'center',
                                 }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 2)] }), jsx$2(Flex, { sx: { position: 'absolute', bottom: ['15px', '15px', '15px', '20px'], left: 'calc(50% - 28,5px)', zIndex: 2 }, children: [...Array(imagesLength)].map((_, i) => {
                             return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
-                        }) })] }), jsxs(Flex, { sx: { alignItems: 'center', display: ['flex', 'flex', 'flex', 'none'], p: '10px', width: '100%' }, children: [jsxs(Flex, { sx: { width: ['50%', '50%', '50%', '100%'], alignItems: 'center' }, children: [jsx$2(Flex, { sx: { mr: '5px' }, children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 30, chain: bondData.chainId }) }), jsxs("h2", { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' '] })] }), jsx$2(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'flex-end', width: '100%', alignItems: 'center' }, children: jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }) }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { px: '10px', opacity: 0.7, mt: ['0', '0', '0', '10px'] }, children: jsx$2(ProjectDescription, { description: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription }) })] }));
+                        }) })] }), jsxs(Flex, { sx: { alignItems: 'center', display: ['flex', 'flex', 'flex', 'none'], p: '10px', width: '100%' }, children: [jsxs(Flex, { sx: { width: ['50%', '50%', '50%', '100%'], alignItems: 'center' }, children: [jsx$2(Flex, { sx: { mr: '5px' }, children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 30, chain: bondData.chainId }) }), jsxs("h2", { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' '] })] }), jsx$2(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'flex-end', alignItems: 'center' }, children: jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }) }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsx$2(Flex, { className: "description-container paragraph-spaced", sx: { px: '10px', opacity: 0.7, mt: ['0', '0', '0', '10px'] }, children: jsx$2(ProjectDescription, { description: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription }) })] }));
 };
 
 const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) => {
@@ -73644,7 +73644,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 ${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 bond-market", 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',
@@ -73903,7 +73903,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, { 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$1, { width: 190, height: 20, alt: "poweredBy", src: "/images/bills/powered.png", sx: {
                                 width: '190px',
                                 height: '20px',
                                 cursor: 'pointer',
@@ -90600,6 +90600,779 @@ const ProjectViewWithProviders = (props) => {
     return (jsx$2(Providers, { children: jsx$2(ProjectView, Object.assign({}, props)) }));
 };
 
+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;

package/dist/styles.css

@@ -154,7 +154,7 @@
   border-radius: 10px;
   z-index: 1001;
   width: 100%;
-  max-width: 1100px;
+  max-width: 700px;
   min-width: 700px;
 }
 
@@ -261,6 +261,7 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
+  padding: 10px 0;
 }
 
 .modaltable-container.blocks-container {
@@ -443,7 +444,7 @@
   border-radius: 10px;
   border: medium;
   padding-right: 10px;
-  width: 80%;
+  width: 100%;
   height: 50px;
   font-size: 22px;
 }
@@ -468,6 +469,10 @@
   justify-content: space-between;
 }
 
+.input-container.bondicon {
+  margin-left: 5px;
+}
+
 .modaltable-container.button-container {
   width: 100%;
   padding-top: 10px;
@@ -504,7 +509,7 @@
 .modaltable-container.accordion-container {
   display: flex;
   position: absolute;
-  padding: 10px 20px;
+  padding: 30px 50px;
   background: #12131A;
   width: 100%;
   border-radius: 0 0 10px 10px;
@@ -618,10 +623,9 @@ span.flex-inline {
 .token-selector-panel {
   flex-direction: column;
   border-radius: 10px;
-  background: var(--theme-ui-colors-white1);
+  background: var(--theme-ui-colors-white3);
   padding: 10px;
-  margin-bottom: 20px !important;
-  border: 1px solid rgba(129, 126, 126, 0.64);
+  min-height: 92px;
 }
 
 .bond-row {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "2.0.4-testseed.34",
+  "version": "2.0.4-testseed.37",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",