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

package/dist/main.js

@@ -71314,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));
         }) })));
 };
 
@@ -71392,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('');
@@ -72275,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(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" })] }))] })] })] }))] }));
+                            : '' }), 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;
@@ -73102,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'],
@@ -73138,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 }) => {
@@ -73176,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 }) => {
@@ -73643,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',

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;
@@ -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.36",
+  "version": "2.0.4-testseed.37",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",