@ape.swap/bonds-sdk 3.0.33 → 3.0.35

package/dist/main.js

@@ -58384,11 +58384,13 @@ const getVestingTermsTooltipString = (bond) => {
     const vestingCliffString = getTimePeriods(vestingCliff);
     return `${vestingCliffString.days} days cliff + ${vestingTime.days} days linear vesting.`;
 };
-const discountEarnTokenPrice = (bond) => {
-    var _a, _b;
-    const earnTokenPrice = parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
-    const trueBondPrice = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], bond);
-    return getFirstNonZeroDigits(earnTokenPrice - earnTokenPrice * (((_b = trueBondPrice === null || trueBondPrice === void 0 ? void 0 : trueBondPrice.bonusWithFee) !== null && _b !== void 0 ? _b : 0) / 100));
+const discountEarnTokenPrice = (bond, useTiers) => {
+    var _a, _b, _c;
+    const fee = (_a = bond === null || bond === void 0 ? void 0 : bond.feeInPayout) !== null && _a !== void 0 ? _a : 0;
+    const principalTokenPrice = parseFloat((_b = bond.principalTokenPrice) !== null && _b !== void 0 ? _b : '0');
+    const trueBondPrice = (_c = findHighestTrueBondPrice(useTiers ? TIERS_WEIGHT[types.LaunchBondTiers.Legend] : '0', bond)) === null || _c === void 0 ? void 0 : _c.trueBondPrice;
+    const trueBondPriceWithFee = getBalanceNumber(new BigNumber$1(trueBondPrice).times((100 + fee) / 100));
+    return getFirstNonZeroDigits(principalTokenPrice * trueBondPriceWithFee);
 };
 const maxBuy = (bond) => {
     var _a, _b, _c, _d, _e, _f;
@@ -70868,7 +70870,7 @@ const ButtonsRow = ({ projectLink, twitter, bubble, audit, chain }) => {
 };
 
 const ExpandedViewButton = ({ handleNavigation, rightPos }) => {
-    return (jsx$2(Flex, { sx: { justifyContent: 'flex-end', position: 'absolute', top: '6px', right: rightPos !== null && rightPos !== void 0 ? rightPos : '10px', width: '122px' }, children: jsxs(Flex, { sx: {
+    return (jsx$2(Flex, { sx: { justifyContent: 'flex-end', position: 'absolute', top: '6px', right: rightPos !== null && rightPos !== void 0 ? rightPos : '35px', width: '122px' }, children: jsxs(Flex, { sx: {
                 fontSize: '12px',
                 fontWeight: 500,
                 mr: '15px',
@@ -71525,18 +71527,19 @@ const ClaimAll = () => {
     const { address: account } = useAccount();
     const [onOpenModal] = useModal(jsx$2(ClaimAllModal, {}));
     return (jsx$2(Button, { onClick: onOpenModal, disabled: !account, sx: {
-            height: ['36px', '36px', '36px', '26px'],
+            height: '30px',
             lineHeight: '12px',
             fontSize: '14px',
             fontWeight: 600,
             width: '100%',
             opacity: 1,
+            ml: ['10px', '10px', '10px', '0'],
         }, children: "Claim All" }));
 };
 
 const YourBondsMenu = ({ chainFilterOption, setChainFilterOption, filterOptions, filterOption, setFilterOption, setInputValue, inputValue, handleSort, }) => {
     const SDKConfig = useSDKConfig();
-    return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { className: "search-input", value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container", children: SDKConfig.referenceId === 'apebond' && jsx$2(ClaimAll, {}) })] })] })] }));
+    return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { className: "search-input", value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", sx: { pr: ['0', '0', '0', '20px'] }, children: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container", children: SDKConfig.referenceId === 'apebond' && jsx$2(ClaimAll, {}) })] })] })] }));
 };
 
 const YourBonds = ({ showOnly }) => {
@@ -76246,13 +76249,14 @@ const BondModalMinTierHeader = ({ minTier }) => {
                 width: ['100%', '100%', '100%', 'auto', 'auto'],
             }, children: Object.values(TIERS_NAMES).map((tier, index) => {
                 if (index >= minTier) {
-                    return (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: tier }), width: "100px", placement: "bottomLeft", transformTip: "translate(1%, -5%)", children: jsx$2("img", { src: `/images/launch/${tier.toLowerCase()}.png`, alt: "minTier", style: { width: '30px', height: '30px', marginLeft: '3px', zIndex: 1 } }, `tier-logo-${index}`) }, tier));
+                    return (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: tier }), width: "100px", placement: "bottomLeft", transformTip: "translate(1%, -5%)", children: jsx$2("img", { src: `/images/launch/${tier.toLowerCase()}.png`, alt: "minTier", style: { width: '25px', height: '25px', marginLeft: '3px', zIndex: 1 } }, `tier-logo-${index}`) }, tier));
                 }
             }) })) }));
 };
 
 const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
     var _a, _b;
+    const SDKConfig = useSDKConfig();
     const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
     const minTier = bondData.minTier !== undefined ? bondData.minTier : null;
     const handleClose = () => {
@@ -76273,7 +76277,32 @@ const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
             },
         });
     };
-    return (jsxs(Flex, { className: "modaltable-container title-container", sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'start' }, children: [jsxs(Flex, { className: "slipagge-close-icon", sx: { width: '100%', height: '30px', mb: ['10px', '10px', '10px', '0px'] }, children: [jsx$2(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none', 'none'] }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) }), jsx$2(Flex, { sx: { flexDirection: 'column', position: 'absolute', right: '0px' }, children: onDismiss ? (jsxs(Fragment$1, { children: [showProjectInfoButton && jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose }), jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] })) : (jsx$2(Flex, { sx: { py: '3px', mt: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }), jsxs(Flex, { sx: { width: '100%' }, children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, jsx$2(ListTag, { text: (_b = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _b === void 0 ? void 0 : _b[0] })] }), jsxs(Flex, { className: "title-container price-container", sx: { flexDirection: 'column', paddingLeft: '20px' }, children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex', 'flex'], ml: '10px' }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) })] })] }));
+    return (jsxs(Flex, { className: "modaltable-container title-container", sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'start' }, children: [jsxs(Flex, { sx: {
+                    width: '100%',
+                    height: '30px',
+                    mb: ['10px', '10px', '10px', '0px'],
+                    justifyContent: ['space-between', 'space-between', 'space-between', 'flex-end'],
+                }, children: [jsx$2(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'] }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) }), jsx$2(Flex, { sx: { cursor: 'pointer' }, children: onDismiss ? (jsxs(Fragment$1, { children: [showProjectInfoButton && jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx$2(Flex, { sx: { mx: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) }), jsx$2(Flex, { onClick: handleClose, children: jsx$2(Svg, { icon: "close", color: "text" }) })] })) : (jsx$2(Flex, { sx: { py: '3px', mt: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }), jsxs(Flex, { sx: { width: '100%' }, children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, jsx$2(ListTag, { text: (_b = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _b === void 0 ? void 0 : _b[0] })] }), jsxs(Flex, { className: "title-container price-container", sx: { flexDirection: 'column', pl: '20px' }, children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), SDKConfig.useTiers ? (jsxs(Flex, { sx: {
+                                    p: '3px 6px',
+                                    border: '1px solid var(--theme-ui-colors-primaryButton)',
+                                    borderRadius: 'normal',
+                                    background: 'transparent',
+                                    position: 'relative',
+                                    overflow: 'hidden',
+                                }, children: [jsx$2(Flex, { sx: {
+                                            position: 'absolute',
+                                            width: '100%',
+                                            height: '100%',
+                                            top: 0,
+                                            left: 0,
+                                            zIndex: 1,
+                                            background: 'primaryButton',
+                                            opacity: 0.3,
+                                        } }), jsxs(Flex, { sx: { width: '100%', zIndex: 2, alignItems: 'center' }, children: [jsx$2("img", { src: `/images/launch/legend.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }), jsx$2(Flex, { sx: { fontSize: '14px', mr: '3px' }, children: "Up to" }), jsxs(Flex, { sx: {
+                                                    color: findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], bondData).bonusWithFee > 0
+                                                        ? 'success'
+                                                        : 'error',
+                                                }, children: ["$", discountEarnTokenPrice(bondData, true)] })] })] })) : (jsxs(Flex, { sx: { fontSize: '24px', fontWeight: 700 }, children: ["$", discountEarnTokenPrice(bondData)] }))] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], ml: '10px' }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) })] })] }));
 };
 
 const YouTooltip = () => {
@@ -77724,7 +77753,7 @@ const SelectItem = (_a) => {
 };
 
 const ListTag = ({ text = '' }) => {
-    return (jsx$2(Flex, { className: "list-tag", sx: {
+    return (jsx$2(Flex, { sx: {
             background: '#3C6AB530',
             color: '#3b78d3',
             fontSize: '10px',
@@ -77733,6 +77762,7 @@ const ListTag = ({ text = '' }) => {
             p: '2px 6px',
             borderRadius: '5px',
             ml: '5px',
+            width: 'fit-content',
         }, children: text }));
 };
 

package/dist/styles.css

@@ -169,14 +169,6 @@
   flex-direction: column;
 }
 
-.modaltable-container.title-container {
-  width: 100%;
-  font-weight: bold;
-  font-size: 1.5rem;
-  display: flex;
-  align-items: center;
-}
-
 .title-container.bondicon {
   display: flex;
   flex-direction: row;
@@ -219,8 +211,9 @@
 .title-container.bondname {
   display: flex;
   flex-direction: column;
-  align-items: center;
   padding-left: 20px;
+  font-size: 24px;
+  font-weight: 700;
 }
 
 .title-container.bondname-small {
@@ -234,11 +227,7 @@
   font-size: 14px;
   text-decoration: line-through;
   opacity: 0.5;
-  font-weight: 600;
-}
-
-.price-container.discounted {
-  display: flex;
+  font-weight: 400;
 }
 
 .title-container.tokentags {
@@ -713,10 +702,6 @@ span.flex-inline {
 .bond-row.gold-rush {
   background: linear-gradient(90deg, rgba(227, 164, 85, 0.6) 7%, rgba(103, 61, 34, 0.6) 18%, rgba(246, 219, 166, 0.6) 36%, rgba(255, 235, 195, 0.6) 43%, rgba(240, 190, 121, 0.6) 53%, rgba(238, 188, 112, 0.6) 77%, rgba(63, 31, 15, 0.6) 92%), linear-gradient(0deg, #FFAE00 0%, #FFAE00 100%), var(--Neutral-Elevation-1, #161420);
 }
-.bond-row.gold-rush .list-tag {
-  color: white;
-  background: linear-gradient(99.09deg, #A16552 0%, #FFB300 106.96%);
-}
 .bond-row.gold-rush .gold-ribbon {
   display: block;
 }
@@ -813,9 +798,14 @@ span.flex-inline {
 .bonds-menu .table-header-container {
   display: flex;
   width: 100%;
-  padding: 20px 0 10px 0;
   justify-content: space-between;
   overflow: hidden;
+  padding: 10px 0;
+}
+@media screen and (min-width: 1000px) {
+  .bonds-menu .table-header-container {
+    padding: 20px 0 10px 0;
+  }
 }
 .bonds-menu .search-container {
   display: flex;

package/dist/utils/displayHelpers.d.ts

@@ -19,7 +19,7 @@ export declare const vestingTimeRemainingString: (userBill?: UserBill) => string
 export declare const getPendingVestingString: (bond?: UserBill) => string;
 export declare const getVestingTermsString: (bond?: BondsData | BillsConfig) => string;
 export declare const getVestingTermsTooltipString: (bond?: BondsData | BillsConfig) => string;
-export declare const discountEarnTokenPrice: (bond: BondsData) => string;
+export declare const discountEarnTokenPrice: (bond: BondsData, useTiers?: boolean) => string;
 export declare const maxBuy: (bond: BondsData) => BigNumber;
 export declare function formatNumber(input: string): string;
 export declare function formatUSDNumber(input: string): string;

package/package.json

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