@ape.swap/bonds-sdk 3.0.38 → 3.0.39

package/dist/components/TokenInfoAndName/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BondsData } from '../../types/bonds';
 import { BillsConfig } from '@ape.swap/apeswap-lists';
-export declare const NETWORK_COLORS: Partial<Record<number, string>>;
 declare const TokenInfoAndName: ({ bill, vestEnds, isHotBond, isGoldBond, }: {
     bill: BondsData | BillsConfig;
     vestEnds?: string;

package/dist/main.js

@@ -18808,6 +18808,7 @@ const TokenImage = ({ symbol, symbol2, size, chain, }) => {
 
 const QUERY_KEYS = {
     TIERS: 'tiers',
+    AB_TEST_VALUE: 'ABTestValue',
     // used values on SDK
     BOND_API_STATS: 'ApeBond-SDK-bondApiStats',
     SDK_CONFIG: 'ApeBond-SDK-sdkConfig',
@@ -18945,75 +18946,6 @@ const useURLByEnvironment = (key) => {
     return config === null || config === void 0 ? void 0 : config.urls[key];
 };
 
-const NETWORK_COLORS = {
-    [types.ChainId.BSC]: '#F3BA2F',
-    [types.ChainId.MAINNET]: '#627eea',
-    [types.ChainId.MATIC]: '#8247e5',
-    [types.ChainId.LIGHTLINK]: '#6087ff',
-    [types.ChainId.BASE]: '#0052ff',
-    [types.ChainId.ARBITRUM]: '#289fef',
-    [types.ChainId.LINEA]: '#fff',
-    [types.ChainId.IOTA]: '#fff',
-    [types.ChainId.GRAPHLINQ]: '#ded2ff',
-    [types.ChainId.AVAX]: '#e74344',
-    [types.ChainId.BLAST]: '#fcfc03',
-    [types.ChainId.CROSSFI]: '#7c8084',
-    [types.ChainId.MONAD_TESTNET]: '#836EF9',
-    [types.ChainId.SONIC]: '#fb9a4c',
-};
-const TokenInfoAndName = ({ bill, vestEnds, isHotBond, isGoldBond, }) => {
-    var _a, _b, _c, _d, _e;
-    const SDKConfig = useSDKConfig();
-    const tokenName = 'showcaseTokenName' in bill ? bill.showcaseTokenName : bill.earnToken.symbol;
-    return (jsxs(Flex, { className: "tokeninfoname container", children: [SDKConfig.referenceId === 'seedify' ? (jsx$2(Flex, { sx: {
-                    p: '10px',
-                    opacity: 0.2,
-                    position: 'absolute',
-                    left: '-20px',
-                }, children: jsx$2(Flex, { sx: { borderRadius: 'normal', overflow: 'hidden' }, children: jsx$2(Svg, { width: 100, height: 100, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _a !== void 0 ? _a : 'question' }) }) })) : (jsxs(Fragment$1, { children: [jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) }), jsx$2(Flex, { className: "tokeninfoname gradient", sx: {
-                            background: isHotBond || vestEnds ? 'transparent' : NETWORK_COLORS[bill.chainId],
-                        } })] })), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: {
-                    marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0,
-                    maxWidth: ['140px', '140px', '140px', '190px', '190px'],
-                }, children: [jsx$2(TokenImage, { symbol: tokenName, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [tokenName, vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { className: "tokeninfofav", sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond, isGoldBond: isGoldBond }) })] }), jsx$2(Flex, { sx: {
-                    justifyContent: isHotBond ? 'center' : 'flex-start',
-                    alignItems: 'center',
-                }, children: jsx$2(Flex, { sx: { display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }, children: ((_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) && jsx$2(ListTag, { text: (_e = (_d = bill.tags) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.toUpperCase() }) }) }), jsx$2(Flex, { className: vestEnds ? '' : 'short-description-basepad', sx: { display: 'none' }, children: bill.shortDescription })] }));
-};
-
-const formatNumber$3 = (number, minPrecision = 2, maxPrecision = 2) => {
-    const options = {
-        minimumFractionDigits: minPrecision,
-        maximumFractionDigits: maxPrecision,
-    };
-    return number.toLocaleString('en-US', options);
-};
-// Formats a number with SI (International System of Units) sufixes
-const formatNumberSI = (num, digits = 2) => {
-    const number = typeof num === 'string' ? parseFloat(num) : num;
-    const lookupSI = [
-        { value: 1, symbol: '' },
-        { value: 1e6, symbol: 'M' },
-        { value: 1e9, symbol: 'B' },
-        { value: 1e12, symbol: 'T' },
-    ];
-    const regEx = /\.0+$|(\.[0-9]*[1-9])0+$/;
-    let formatted;
-    if (number >= 1e18) {
-        formatted = '∞';
-    }
-    else {
-        let i;
-        for (i = lookupSI.length - 1; i > 0; i--) {
-            if (number >= lookupSI[i].value) {
-                break;
-            }
-        }
-        formatted = formatNumber$3(number / lookupSI[i].value, digits, digits).replace(regEx, '$1') + lookupSI[i].symbol;
-    }
-    return formatted;
-};
-
 /*
  *      bignumber.js v9.1.2
  *      A JavaScript library for arbitrary-precision arithmetic.
@@ -21920,71 +21852,6 @@ function toFixedPoint(str, e, z) {
 
 var BigNumber$1 = clone$2();
 
-const getBalanceNumber = (balance, decimals = 18) => {
-    // use with caution. JS can only safely represent up to 15-17 digits of precision
-    // so you will lose precision in decimals and really big numbers, for those cases use getBNWithDecimals
-    const displayBalance = new BigNumber$1(balance).dividedBy(new BigNumber$1(10).pow(decimals));
-    return displayBalance.toNumber();
-};
-
-/**
- * Rounds a number to precision amount of signifant numbers
- * @param n the number
- * @param precision how many significant numbers to show
- * @returns @number
- */
-const getFirstNonZeroDigits = (numberToParse, precision = 3) => {
-    const n = parseFloat(numberToParse.toFixed(18));
-    let amountToShow = precision - 1;
-    if (n !== 0)
-        amountToShow -= Math.floor(Math.log(n) / Math.log(10));
-    return n.toFixed(amountToShow < 0 ? 0 : amountToShow);
-};
-
-const MINUTE_IN_SECONDS = 60;
-const HOUR_IN_SECONDS = 3600;
-const DAY_IN_SECONDS = 86400;
-const MONTH_IN_SECONDS = 2629800;
-const YEAR_IN_SECONDS = 31557600;
-/**
- * Format number of seconds into year, month, day, hour, minute, seconds
- *
- * @param seconds
- */
-const getTimePeriods = (seconds, days) => {
-    let delta = seconds;
-    const timeLeft = {
-        years: 0,
-        months: 0,
-        days: 0,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-    };
-    if (delta >= YEAR_IN_SECONDS && false) {
-        timeLeft.years = Math.floor(delta / YEAR_IN_SECONDS);
-        delta -= timeLeft.years * YEAR_IN_SECONDS;
-    }
-    if (delta >= MONTH_IN_SECONDS && false) {
-        timeLeft.months = Math.floor(delta / MONTH_IN_SECONDS);
-        delta -= timeLeft.months * MONTH_IN_SECONDS;
-    }
-    if (delta >= DAY_IN_SECONDS) {
-        timeLeft.days = Math.floor(delta / DAY_IN_SECONDS);
-        delta -= timeLeft.days * DAY_IN_SECONDS;
-    }
-    if (delta >= HOUR_IN_SECONDS) {
-        timeLeft.hours = Math.floor(delta / HOUR_IN_SECONDS);
-        delta -= timeLeft.hours * HOUR_IN_SECONDS;
-    }
-    if (delta >= MINUTE_IN_SECONDS) {
-        timeLeft.minutes = Math.floor(delta / MINUTE_IN_SECONDS);
-        delta -= timeLeft.minutes * MINUTE_IN_SECONDS;
-    }
-    timeLeft.seconds = delta;
-    return timeLeft;
-};
-
 /**
  * Finds the highest TrueBondPrices element where userPoints is higher than points in the array.
  * @param userPoints - The user's points as a string representing a BigNumber.
@@ -35719,7 +35586,7 @@ function computeAddress(key) {
 function recoverAddress(digest, signature) {
     return computeAddress(recoverPublicKey(arrayify(digest), signature));
 }
-function formatNumber$2(value, name) {
+function formatNumber$3(value, name) {
     const result = stripZeros(BigNumber.from(value).toHexString());
     if (result.length > 32) {
         logger$7.throwArgumentError("invalid length for " + name, ("transaction:" + name), value);
@@ -35776,19 +35643,19 @@ function _serializeEip1559(transaction, signature) {
         }
     }
     const fields = [
-        formatNumber$2(transaction.chainId || 0, "chainId"),
-        formatNumber$2(transaction.nonce || 0, "nonce"),
-        formatNumber$2(transaction.maxPriorityFeePerGas || 0, "maxPriorityFeePerGas"),
-        formatNumber$2(transaction.maxFeePerGas || 0, "maxFeePerGas"),
-        formatNumber$2(transaction.gasLimit || 0, "gasLimit"),
+        formatNumber$3(transaction.chainId || 0, "chainId"),
+        formatNumber$3(transaction.nonce || 0, "nonce"),
+        formatNumber$3(transaction.maxPriorityFeePerGas || 0, "maxPriorityFeePerGas"),
+        formatNumber$3(transaction.maxFeePerGas || 0, "maxFeePerGas"),
+        formatNumber$3(transaction.gasLimit || 0, "gasLimit"),
         ((transaction.to != null) ? getAddress(transaction.to) : "0x"),
-        formatNumber$2(transaction.value || 0, "value"),
+        formatNumber$3(transaction.value || 0, "value"),
         (transaction.data || "0x"),
         (formatAccessList(transaction.accessList || []))
     ];
     if (signature) {
         const sig = splitSignature(signature);
-        fields.push(formatNumber$2(sig.recoveryParam, "recoveryParam"));
+        fields.push(formatNumber$3(sig.recoveryParam, "recoveryParam"));
         fields.push(stripZeros(sig.r));
         fields.push(stripZeros(sig.s));
     }
@@ -35796,18 +35663,18 @@ function _serializeEip1559(transaction, signature) {
 }
 function _serializeEip2930(transaction, signature) {
     const fields = [
-        formatNumber$2(transaction.chainId || 0, "chainId"),
-        formatNumber$2(transaction.nonce || 0, "nonce"),
-        formatNumber$2(transaction.gasPrice || 0, "gasPrice"),
-        formatNumber$2(transaction.gasLimit || 0, "gasLimit"),
+        formatNumber$3(transaction.chainId || 0, "chainId"),
+        formatNumber$3(transaction.nonce || 0, "nonce"),
+        formatNumber$3(transaction.gasPrice || 0, "gasPrice"),
+        formatNumber$3(transaction.gasLimit || 0, "gasLimit"),
         ((transaction.to != null) ? getAddress(transaction.to) : "0x"),
-        formatNumber$2(transaction.value || 0, "value"),
+        formatNumber$3(transaction.value || 0, "value"),
         (transaction.data || "0x"),
         (formatAccessList(transaction.accessList || []))
     ];
     if (signature) {
         const sig = splitSignature(signature);
-        fields.push(formatNumber$2(sig.recoveryParam, "recoveryParam"));
+        fields.push(formatNumber$3(sig.recoveryParam, "recoveryParam"));
         fields.push(stripZeros(sig.r));
         fields.push(stripZeros(sig.s));
     }
@@ -58310,6 +58177,368 @@ function useTierPoints() {
     });
 }
 
+const YouTooltip = () => {
+    return (jsx$2(Flex, { sx: { position: 'relative', ml: '10px' }, children: jsx$2(Flex, { sx: {
+                background: 'primaryButton',
+                height: '18px',
+                justifyContent: 'center',
+                borderRadius: '4px',
+                px: '5px',
+                fontWeight: 400,
+                fontSize: '12px',
+                position: 'absolute',
+                left: 0,
+                top: '50%', // Start 50% down the parent
+                transform: 'translateY(-50%)', // Adjust by the element's own height
+                '::after': {
+                    content: '""',
+                    position: 'absolute',
+                    top: '50%', // Vertically center
+                    left: '-11px', // Position outside the tooltip box
+                    transform: 'translateY(-50%)', // Center arrow vertically
+                    borderWidth: '6px', // Arrow size
+                    borderStyle: 'solid',
+                    borderColor: 'transparent var(--theme-ui-colors-primaryButton) transparent transparent', // Arrow now points left
+                },
+            }, children: "You" }) }));
+};
+
+const BonusTable = ({ bond, hideTitle }) => {
+    const { data: userPoints } = useTierPoints();
+    const usersTrueBondPrices = findHighestTrueBondPrice(userPoints, bond);
+    const minTier = (bond === null || bond === void 0 ? void 0 : bond.minTier) !== undefined ? bond.minTier : null;
+    return (jsxs(Flex, { sx: { width: '100%', flexDirection: 'column' }, children: [!hideTitle && jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '10px' }, children: "Ape Tier Bonuses" }), bond.trueBondPrices
+                .sort((a, b) => new BigNumber$1(b.points).minus(new BigNumber$1(a.points)).toNumber())
+                .map((tier, i) => {
+                var _a, _b;
+                const tierToUse = getUserTier(tier.points);
+                const tierName = `${TIERS_NAMES[tierToUse]}`;
+                const you = tier.points === (usersTrueBondPrices === null || usersTrueBondPrices === void 0 ? void 0 : usersTrueBondPrices.points);
+                const isUnavailable = minTier > tierToUse || (minTier === 0 && tier.points === '0');
+                return (jsxs(Flex, { sx: {
+                        width: '100%',
+                        justifyContent: 'space-between',
+                        height: '30px',
+                        background: (_a = TIERS_COLORS[tierToUse]) !== null && _a !== void 0 ? _a : 'white3',
+                        borderRadius: 'normal',
+                        alignItems: 'center',
+                        px: '8px',
+                        mb: '1px',
+                    }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [tier.points !== '0' && (jsx$2("img", { src: `/images/launch/${(_b = TIERS_NAMES[tierToUse]) === null || _b === void 0 ? void 0 : _b.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } })), jsx$2(Flex, { children: tier.points === '0' ? 'No Tier' : tierName }), you && jsx$2(YouTooltip, {})] }), isUnavailable ? (jsx$2(Flex, { sx: { fontWeight: 600, opacity: 0.8 }, children: "UNAVAILABLE" })) : (jsxs(Flex, { sx: { color: tier.bonusWithFee > 0 ? 'success' : 'text', fontWeight: 700, alignItems: 'center' }, children: [tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0', "%", tier.points !== '0' && (jsx$2(Flex, { sx: {
+                                        borderRadius: 'normal',
+                                        border: '1px solid var(--theme-ui-colors-success)',
+                                        px: '4px',
+                                        ml: '3px',
+                                        color: 'success',
+                                    }, children: boostMap[tierToUse] }))] }))] }, tier.points));
+            }), !hideTitle && (jsx$2(Button, { variant: "secondary", sx: { width: '100%', mt: '10px' }, onClick: () => window.open('https://ape.bond/tier-staking', '_blank'), children: "get tier" }))] }));
+};
+
+const MINUTE_IN_SECONDS = 60;
+const HOUR_IN_SECONDS = 3600;
+const DAY_IN_SECONDS = 86400;
+const MONTH_IN_SECONDS = 2629800;
+const YEAR_IN_SECONDS = 31557600;
+/**
+ * Format number of seconds into year, month, day, hour, minute, seconds
+ *
+ * @param seconds
+ */
+const getTimePeriods = (seconds, days) => {
+    let delta = seconds;
+    const timeLeft = {
+        years: 0,
+        months: 0,
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+    };
+    if (delta >= YEAR_IN_SECONDS && false) {
+        timeLeft.years = Math.floor(delta / YEAR_IN_SECONDS);
+        delta -= timeLeft.years * YEAR_IN_SECONDS;
+    }
+    if (delta >= MONTH_IN_SECONDS && false) {
+        timeLeft.months = Math.floor(delta / MONTH_IN_SECONDS);
+        delta -= timeLeft.months * MONTH_IN_SECONDS;
+    }
+    if (delta >= DAY_IN_SECONDS) {
+        timeLeft.days = Math.floor(delta / DAY_IN_SECONDS);
+        delta -= timeLeft.days * DAY_IN_SECONDS;
+    }
+    if (delta >= HOUR_IN_SECONDS) {
+        timeLeft.hours = Math.floor(delta / HOUR_IN_SECONDS);
+        delta -= timeLeft.hours * HOUR_IN_SECONDS;
+    }
+    if (delta >= MINUTE_IN_SECONDS) {
+        timeLeft.minutes = Math.floor(delta / MINUTE_IN_SECONDS);
+        delta -= timeLeft.minutes * MINUTE_IN_SECONDS;
+    }
+    timeLeft.seconds = delta;
+    return timeLeft;
+};
+
+const isBondSoldOut = (bill) => {
+    var _a;
+    if (bill.soldOut)
+        return true;
+    if (bill.inactive)
+        return true;
+    const { tokensRemaining, payoutTokenPrice } = bill;
+    if (!tokensRemaining)
+        return false;
+    const thresholdToHide = new BigNumber$1(100).div(payoutTokenPrice !== null && payoutTokenPrice !== void 0 ? payoutTokenPrice : 0);
+    if ((_a = new BigNumber$1(tokensRemaining)) === null || _a === void 0 ? void 0 : _a.lte(thresholdToHide)) {
+        // If there's less than 100 usd bond will be hidden
+        return true;
+    }
+    else
+        return false;
+};
+const sortBonds = (sortConfig, bonds) => {
+    const bondsToSort = bonds !== null && bonds !== void 0 ? bonds : [];
+    if (!sortConfig) {
+        return bondsToSort;
+    }
+    return [...bondsToSort].sort((a, b) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        let aValue;
+        let bValue;
+        if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === 'arr') {
+            aValue = (_b = (_a = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], a)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0;
+            bValue = (_d = (_c = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], b)) === null || _c === void 0 ? void 0 : _c.bonusWithFee) !== null && _d !== void 0 ? _d : 0;
+        }
+        else if (sortConfig.key === 'tokensRemaining') {
+            aValue = remainingPercentage(a);
+            bValue = remainingPercentage(b);
+        }
+        else if (sortConfig.key === 'terms') {
+            aValue = vestingTime(a.vestingTerm).days;
+            bValue = vestingTime(b.vestingTerm).days;
+        }
+        else {
+            aValue = (_f = (_e = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], a)) === null || _e === void 0 ? void 0 : _e.bonusWithFee) !== null && _f !== void 0 ? _f : 0;
+            bValue = (_h = (_g = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], b)) === null || _g === void 0 ? void 0 : _g.bonusWithFee) !== null && _h !== void 0 ? _h : 0;
+        }
+        if (aValue < bValue) {
+            return sortConfig.direction === 'asc' ? -1 : 1;
+        }
+        if (aValue > bValue) {
+            return sortConfig.direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+    });
+};
+const vestingTime = (vestingTerm) => {
+    return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0);
+};
+const remainingPercentage = (bond) => {
+    var _a, _b, _c, _d;
+    const totalMaxPayout = new BigNumber$1((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber$1(10).pow((_c = (_b = bond.earnToken.decimals) === null || _b === void 0 ? void 0 : _b[bond.chainId]) !== null && _c !== void 0 ? _c : 18));
+    const remainingTokens = new BigNumber$1((_d = bond.tokensRemaining) !== null && _d !== void 0 ? _d : '0');
+    return remainingTokens.div(totalMaxPayout).times(100).toNumber();
+};
+const getDiscountColor = (discount) => {
+    if (!discount)
+        return '';
+    return discount < 0 ? 'discount-negative' : 'discount-positive';
+};
+const calculateARR = (bond, useTiers) => {
+    var _a;
+    if (!('trueBondPrices' in bond))
+        return '-';
+    const bonus = (_a = findHighestTrueBondPrice(useTiers ? TIERS_WEIGHT[types.LaunchBondTiers.Legend] : '0', bond)) === null || _a === void 0 ? void 0 : _a.bonusWithFee;
+    const vestingTerm = 'vestingTerm' in bond ? bond === null || bond === void 0 ? void 0 : bond.vestingTerm : undefined;
+    if (!bonus)
+        return '-';
+    const discount = bonus !== null && bonus !== void 0 ? bonus : 0;
+    if (discount < 0)
+        return '-';
+    const vestingDays = vestingTime(vestingTerm).days;
+    return `${((discount * 365) / vestingDays).toFixed(2)}%`;
+};
+const isBondSupported = (SDKVersion, bondVersion) => {
+    var _a, _b;
+    // Split the versions into major, minor, and patch parts
+    const [major1, minor1, patch1] = (_a = SDKVersion.split('.').map(Number)) !== null && _a !== void 0 ? _a : [];
+    const [major2, minor2, patch2] = (_b = bondVersion === null || bondVersion === void 0 ? void 0 : bondVersion.split('.').map(Number)) !== null && _b !== void 0 ? _b : [];
+    // Compare major versions
+    if (major1 > major2)
+        return true;
+    if (major1 < major2)
+        return false;
+    // Compare minor versions
+    if (minor1 > minor2)
+        return true;
+    if (minor1 < minor2)
+        return false;
+    // Compare patch versions
+    if (patch1 >= patch2)
+        return true;
+    // If none of the above conditions are met, version1 is less
+    return false;
+};
+
+const BonusComponent = ({ bond, tooltipPosition, }) => {
+    var _a, _b, _c, _d;
+    const SDKConfig = useSDKConfig();
+    const highestPointsElement = (_a = bond === null || bond === void 0 ? void 0 : bond.trueBondPrices) === null || _a === void 0 ? void 0 : _a.reduce((max, current) => {
+        return new BigNumber$1(current.points).isGreaterThan(new BigNumber$1(max.points)) ? current : max;
+    }, bond === null || bond === void 0 ? void 0 : bond.trueBondPrices[0]);
+    const baseTrueBondPrice = findHighestTrueBondPrice('0', bond);
+    return (jsx$2(Flex, { children: (bond === null || bond === void 0 ? void 0 : bond.trueBondPrices) && ((_b = bond === null || bond === void 0 ? void 0 : bond.trueBondPrices) === null || _b === void 0 ? void 0 : _b.length) > 1 && SDKConfig.useTiers ? (jsx$2(Flex, { sx: { alignItems: 'center' }, children: (highestPointsElement === null || highestPointsElement === void 0 ? void 0 : highestPointsElement.bonusWithFee) > 0 ? (jsx$2(TooltipBubble, { width: "280px", placement: tooltipPosition, transformTip: tooltipPosition === 'bottomLeft' ? 'translate(0%, 0%)' : 'translate(0%, 0%)', body: jsx$2(BonusTable, { bond: bond }), children: jsxs(Flex, { sx: {
+                        p: '3px 6px',
+                        border: '1px solid var(--theme-ui-colors-primaryButton)',
+                        borderRadius: 'normal',
+                        background: 'transparent',
+                        position: 'relative',
+                        overflow: 'hidden',
+                        cursor: 'pointer',
+                        width: ['130px', '130px', '150px', '150px'],
+                    }, 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', justifyContent: '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: ['12px', '12px', '14px', '14px'], mr: '3px' }, children: "Up to" }), jsxs(Flex, { sx: {
+                                        color: (highestPointsElement === null || highestPointsElement === void 0 ? void 0 : highestPointsElement.bonusWithFee) > 0 ? 'success' : 'error',
+                                        fontSize: ['14px', '14px', '16px', '16px'],
+                                    }, children: [(_c = highestPointsElement === null || highestPointsElement === void 0 ? void 0 : highestPointsElement.bonusWithFee) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%"] })] })] }) })) : (jsx$2(Flex, { sx: { height: '20px', width: '20px' }, children: jsx$2(TooltipBubble, { body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) }) })) })) : (jsx$2(Flex, { sx: { alignItems: 'center' }, className: `${getDiscountColor(+(baseTrueBondPrice === null || baseTrueBondPrice === void 0 ? void 0 : baseTrueBondPrice.bonusWithFee))}`, children: (baseTrueBondPrice === null || baseTrueBondPrice === void 0 ? void 0 : baseTrueBondPrice.bonusWithFee) > 0 ? (`${(_d = baseTrueBondPrice === null || baseTrueBondPrice === void 0 ? void 0 : baseTrueBondPrice.bonusWithFee) === null || _d === void 0 ? void 0 : _d.toFixed(2)}%`) : (jsx$2(Flex, { sx: { height: '20px', width: '20px' }, children: jsx$2(TooltipBubble, { body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) }) })) })) }));
+};
+
+const useIsMobile = () => {
+    const [isMobile, setIsMobile] = useState(window.innerWidth < 852);
+    // Hardcoded toggle for debounce
+    const useDebounce = false;
+    useEffect(() => {
+        const resizeHandler = () => {
+            {
+                setIsMobile(window.innerWidth < 852);
+            }
+        };
+        window.addEventListener('resize', resizeHandler);
+        return () => {
+            window.removeEventListener('resize', resizeHandler);
+        };
+    }, [useDebounce]);
+    return isMobile;
+};
+
+const BonusContainer = ({ bond, tooltipPosition = 'bottomRight', }) => {
+    var _a, _b;
+    const SDKConfig = useSDKConfig();
+    const isMobile = useIsMobile();
+    return (jsx$2("div", { className: `discount-column`, children: 'trueBondPrices' in bond ? (((_b = (_a = findHighestTrueBondPrice((SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.useTiers) ? TIERS_WEIGHT[types.LaunchBondTiers.Legend] : '0', bond)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0) > 0 ? (jsx$2(BonusComponent, { bond: bond, tooltipPosition: isMobile ? tooltipPosition : 'bottomLeft' })) : (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) }))) : ('-') }));
+};
+
+var ABTestKeys;
+(function (ABTestKeys) {
+    ABTestKeys["BOND_DESCRIPTION"] = "bondDescription";
+    ABTestKeys["BOND_BUY_BUTTON"] = "bondBuyButton";
+})(ABTestKeys || (ABTestKeys = {}));
+function useABTesting({ key, defaultValue = (Math.random() < 0.5).toString(), }) {
+    const { cookie, updateCookie } = useCookie(QUERY_KEYS.AB_TEST_VALUE, null);
+    let abTestValue = '';
+    let parseCookie = null;
+    if (cookie === null || cookie === undefined || cookie[key] === undefined) {
+        parseCookie = Object.assign(Object.assign({}, cookie), { [key]: defaultValue.toString() });
+        abTestValue = defaultValue.toString();
+        updateCookie(parseCookie);
+    }
+    if (cookie) {
+        parseCookie = cookie;
+        if (parseCookie && parseCookie[key]) {
+            abTestValue = parseCookie[key].toString();
+        }
+    }
+    return { abTestValue };
+}
+
+const TokenInfoAndName = ({ bill, vestEnds, isHotBond, isGoldBond, }) => {
+    var _a, _b, _c, _d, _e;
+    const SDKConfig = useSDKConfig();
+    const tokenName = 'showcaseTokenName' in bill ? bill.showcaseTokenName : bill.earnToken.symbol;
+    const { abTestValue } = useABTesting({ key: ABTestKeys.BOND_BUY_BUTTON });
+    return (jsxs(Flex, { className: "tokeninfoname container", children: [SDKConfig.referenceId === 'seedify' ? (jsx$2(Flex, { sx: {
+                    p: '10px',
+                    opacity: 0.2,
+                    position: 'absolute',
+                    left: '-20px',
+                }, children: jsx$2(Flex, { sx: { borderRadius: 'normal', overflow: 'hidden' }, children: jsx$2(Svg, { width: 100, height: 100, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _a !== void 0 ? _a : 'question' }) }) })) : (jsx$2(Fragment$1, { children: jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) }) })), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: {
+                    marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0,
+                    maxWidth: ['175px', '175px', '140px', '190px', '190px'],
+                }, children: [jsx$2(TokenImage, { symbol: tokenName, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [jsxs(Flex, { sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '14px', '16px'] }, children: tokenName }), jsx$2(Flex, { className: "tokeninfofav", sx: {
+                                            minWidth: '25px',
+                                            p: '5px',
+                                            display: abTestValue === 'true' ? ['flex', 'flex', 'none', 'none'] : 'none',
+                                        }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond, isGoldBond: isGoldBond }) })] }), jsx$2("div", { sx: { display: abTestValue === 'true' ? ['flex', 'flex', 'none', 'none'] : 'none' }, children: jsx$2(BonusContainer, { bond: bill, tooltipPosition: "bottomLeft" }) }), vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { className: "tokeninfofav", sx: {
+                            minWidth: '25px',
+                            p: '5px',
+                            display: abTestValue === 'true' ? ['none', 'none', 'flex', 'flex'] : 'flex',
+                        }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond, isGoldBond: isGoldBond }) })] }), jsx$2(Flex, { sx: {
+                    justifyContent: isHotBond ? 'center' : 'flex-start',
+                    alignItems: 'center',
+                }, children: jsx$2(Flex, { sx: { display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }, children: ((_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) && jsx$2(ListTag, { text: (_e = (_d = bill.tags) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.toUpperCase() }) }) }), jsx$2(Flex, { className: vestEnds ? '' : 'short-description-basepad', sx: { display: 'none' }, children: bill.shortDescription })] }));
+};
+
+const formatNumber$2 = (number, minPrecision = 2, maxPrecision = 2) => {
+    const options = {
+        minimumFractionDigits: minPrecision,
+        maximumFractionDigits: maxPrecision,
+    };
+    return number.toLocaleString('en-US', options);
+};
+// Formats a number with SI (International System of Units) sufixes
+const formatNumberSI = (num, digits = 2) => {
+    const number = typeof num === 'string' ? parseFloat(num) : num;
+    const lookupSI = [
+        { value: 1, symbol: '' },
+        { value: 1e6, symbol: 'M' },
+        { value: 1e9, symbol: 'B' },
+        { value: 1e12, symbol: 'T' },
+    ];
+    const regEx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+    let formatted;
+    if (number >= 1e18) {
+        formatted = '∞';
+    }
+    else {
+        let i;
+        for (i = lookupSI.length - 1; i > 0; i--) {
+            if (number >= lookupSI[i].value) {
+                break;
+            }
+        }
+        formatted = formatNumber$2(number / lookupSI[i].value, digits, digits).replace(regEx, '$1') + lookupSI[i].symbol;
+    }
+    return formatted;
+};
+
+const getBalanceNumber = (balance, decimals = 18) => {
+    // use with caution. JS can only safely represent up to 15-17 digits of precision
+    // so you will lose precision in decimals and really big numbers, for those cases use getBNWithDecimals
+    const displayBalance = new BigNumber$1(balance).dividedBy(new BigNumber$1(10).pow(decimals));
+    return displayBalance.toNumber();
+};
+
+/**
+ * Rounds a number to precision amount of signifant numbers
+ * @param n the number
+ * @param precision how many significant numbers to show
+ * @returns @number
+ */
+const getFirstNonZeroDigits = (numberToParse, precision = 3) => {
+    const n = parseFloat(numberToParse.toFixed(18));
+    let amountToShow = precision - 1;
+    if (n !== 0)
+        amountToShow -= Math.floor(Math.log(n) / Math.log(10));
+    return n.toFixed(amountToShow < 0 ? 0 : amountToShow);
+};
+
 const claimable = (userBill) => {
     var _a, _b, _c;
     return getBalanceNumber(new BigNumber$1(userBill.pendingRewards), (_c = (_b = (_a = userBill.bond.earnToken) === null || _a === void 0 ? void 0 : _a.decimals) === null || _b === void 0 ? void 0 : _b[userBill.bond.chainId]) !== null && _c !== void 0 ? _c : 18);
@@ -70550,7 +70779,7 @@ function getTemplateHTML(data) {
         </div>
         <div class="sharebondimage-container-off">
           <span>
-            ${formatNumber$3(getCalculateOff())}% OFF
+            ${formatNumber$2(getCalculateOff())}% OFF
           </span>
         </div>
       </div>
@@ -70561,7 +70790,7 @@ function getTemplateHTML(data) {
             ${formatTransactionAmount(data.data.deposit)}
           </div>
           <div class="sharebondimage-dollarvalue">
-            $${formatNumber$3(data.data.dollarValue)}
+            $${formatNumber$2(data.data.dollarValue)}
           </div>
         </div>
         <div class="sharebondimage-container-token">
@@ -70569,15 +70798,15 @@ function getTemplateHTML(data) {
           <div class="sharebondimage-container-earntoken">
             <div class="sharebondimage-amount-earntoken">
               <div class="sharebondimage-amount-payout">
-                ${formatNumber$3(data.data.payout)}
+                ${formatNumber$2(data.data.payout)}
               </div>
               <div class="sharebondimage-amount-dollarvalue">
-                $${formatNumber$3(data.data.payout * +data.data.payoutTokenPrice)}
+                $${formatNumber$2(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)}
+                +${formatNumber$2(data.data.payout * +data.data.payoutTokenPrice - data.data.dollarValue)}
                 profit!
               </span>
             </div>
@@ -71685,107 +71914,6 @@ const useTopTags = (initialBondList) => {
     return sortedTagsArray.slice(0, 2).map((tagCountArray) => tagCountArray[0]);
 };
 
-const isBondSoldOut = (bill) => {
-    var _a;
-    if (bill.soldOut)
-        return true;
-    if (bill.inactive)
-        return true;
-    const { tokensRemaining, payoutTokenPrice } = bill;
-    if (!tokensRemaining)
-        return false;
-    const thresholdToHide = new BigNumber$1(100).div(payoutTokenPrice !== null && payoutTokenPrice !== void 0 ? payoutTokenPrice : 0);
-    if ((_a = new BigNumber$1(tokensRemaining)) === null || _a === void 0 ? void 0 : _a.lte(thresholdToHide)) {
-        // If there's less than 100 usd bond will be hidden
-        return true;
-    }
-    else
-        return false;
-};
-const sortBonds = (sortConfig, bonds) => {
-    const bondsToSort = bonds !== null && bonds !== void 0 ? bonds : [];
-    if (!sortConfig) {
-        return bondsToSort;
-    }
-    return [...bondsToSort].sort((a, b) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        let aValue;
-        let bValue;
-        if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === 'arr') {
-            aValue = (_b = (_a = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], a)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0;
-            bValue = (_d = (_c = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], b)) === null || _c === void 0 ? void 0 : _c.bonusWithFee) !== null && _d !== void 0 ? _d : 0;
-        }
-        else if (sortConfig.key === 'tokensRemaining') {
-            aValue = remainingPercentage(a);
-            bValue = remainingPercentage(b);
-        }
-        else if (sortConfig.key === 'terms') {
-            aValue = vestingTime(a.vestingTerm).days;
-            bValue = vestingTime(b.vestingTerm).days;
-        }
-        else {
-            aValue = (_f = (_e = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], a)) === null || _e === void 0 ? void 0 : _e.bonusWithFee) !== null && _f !== void 0 ? _f : 0;
-            bValue = (_h = (_g = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], b)) === null || _g === void 0 ? void 0 : _g.bonusWithFee) !== null && _h !== void 0 ? _h : 0;
-        }
-        if (aValue < bValue) {
-            return sortConfig.direction === 'asc' ? -1 : 1;
-        }
-        if (aValue > bValue) {
-            return sortConfig.direction === 'asc' ? 1 : -1;
-        }
-        return 0;
-    });
-};
-const vestingTime = (vestingTerm) => {
-    return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0);
-};
-const remainingPercentage = (bond) => {
-    var _a, _b, _c, _d;
-    const totalMaxPayout = new BigNumber$1((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber$1(10).pow((_c = (_b = bond.earnToken.decimals) === null || _b === void 0 ? void 0 : _b[bond.chainId]) !== null && _c !== void 0 ? _c : 18));
-    const remainingTokens = new BigNumber$1((_d = bond.tokensRemaining) !== null && _d !== void 0 ? _d : '0');
-    return remainingTokens.div(totalMaxPayout).times(100).toNumber();
-};
-const getDiscountColor = (discount) => {
-    if (!discount)
-        return '';
-    return discount < 0 ? 'discount-negative' : 'discount-positive';
-};
-const calculateARR = (bond, useTiers) => {
-    var _a;
-    if (!('trueBondPrices' in bond))
-        return '-';
-    const bonus = (_a = findHighestTrueBondPrice(useTiers ? TIERS_WEIGHT[types.LaunchBondTiers.Legend] : '0', bond)) === null || _a === void 0 ? void 0 : _a.bonusWithFee;
-    const vestingTerm = 'vestingTerm' in bond ? bond === null || bond === void 0 ? void 0 : bond.vestingTerm : undefined;
-    if (!bonus)
-        return '-';
-    const discount = bonus !== null && bonus !== void 0 ? bonus : 0;
-    if (discount < 0)
-        return '-';
-    const vestingDays = vestingTime(vestingTerm).days;
-    return `${((discount * 365) / vestingDays).toFixed(2)}%`;
-};
-const isBondSupported = (SDKVersion, bondVersion) => {
-    var _a, _b;
-    // Split the versions into major, minor, and patch parts
-    const [major1, minor1, patch1] = (_a = SDKVersion.split('.').map(Number)) !== null && _a !== void 0 ? _a : [];
-    const [major2, minor2, patch2] = (_b = bondVersion === null || bondVersion === void 0 ? void 0 : bondVersion.split('.').map(Number)) !== null && _b !== void 0 ? _b : [];
-    // Compare major versions
-    if (major1 > major2)
-        return true;
-    if (major1 < major2)
-        return false;
-    // Compare minor versions
-    if (minor1 > minor2)
-        return true;
-    if (minor1 < minor2)
-        return false;
-    // Compare patch versions
-    if (patch1 >= patch2)
-        return true;
-    // If none of the above conditions are met, version1 is less
-    return false;
-};
-
 var BOND_2_4_0 = [
 	{
 		inputs: [
@@ -75780,7 +75908,7 @@ const useApproval = (amount, currency, spender, account, chainId) => {
     return [approvalState !== null && approvalState !== void 0 ? approvalState : ApprovalState.NOT_APPROVED, handleApprove];
 };
 
-const version$1 = '2.24.3';
+const version$1 = '2.23.6';
 
 let errorConfig = {
     getDocsUrl: ({ docsBaseUrl, docsPath = '', docsSlug, }) => docsPath
@@ -76318,108 +76446,6 @@ const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
                                                 }, 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 = () => {
-    return (jsx$2(Flex, { sx: { position: 'relative', ml: '10px' }, children: jsx$2(Flex, { sx: {
-                background: 'primaryButton',
-                height: '18px',
-                justifyContent: 'center',
-                borderRadius: '4px',
-                px: '5px',
-                fontWeight: 400,
-                fontSize: '12px',
-                position: 'absolute',
-                left: 0,
-                top: '50%', // Start 50% down the parent
-                transform: 'translateY(-50%)', // Adjust by the element's own height
-                '::after': {
-                    content: '""',
-                    position: 'absolute',
-                    top: '50%', // Vertically center
-                    left: '-11px', // Position outside the tooltip box
-                    transform: 'translateY(-50%)', // Center arrow vertically
-                    borderWidth: '6px', // Arrow size
-                    borderStyle: 'solid',
-                    borderColor: 'transparent var(--theme-ui-colors-primaryButton) transparent transparent', // Arrow now points left
-                },
-            }, children: "You" }) }));
-};
-
-const BonusTable = ({ bond, hideTitle }) => {
-    const { data: userPoints } = useTierPoints();
-    const usersTrueBondPrices = findHighestTrueBondPrice(userPoints, bond);
-    const minTier = (bond === null || bond === void 0 ? void 0 : bond.minTier) !== undefined ? bond.minTier : null;
-    return (jsxs(Flex, { sx: { width: '100%', flexDirection: 'column' }, children: [!hideTitle && jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '10px' }, children: "Ape Tier Bonuses" }), bond.trueBondPrices
-                .sort((a, b) => new BigNumber$1(b.points).minus(new BigNumber$1(a.points)).toNumber())
-                .map((tier, i) => {
-                var _a, _b;
-                const tierToUse = getUserTier(tier.points);
-                const tierName = `${TIERS_NAMES[tierToUse]}`;
-                const you = tier.points === (usersTrueBondPrices === null || usersTrueBondPrices === void 0 ? void 0 : usersTrueBondPrices.points);
-                const isUnavailable = minTier > tierToUse || (minTier === 0 && tier.points === '0');
-                return (jsxs(Flex, { sx: {
-                        width: '100%',
-                        justifyContent: 'space-between',
-                        height: '30px',
-                        background: (_a = TIERS_COLORS[tierToUse]) !== null && _a !== void 0 ? _a : 'white3',
-                        borderRadius: 'normal',
-                        alignItems: 'center',
-                        px: '8px',
-                        mb: '1px',
-                    }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [tier.points !== '0' && (jsx$2("img", { src: `/images/launch/${(_b = TIERS_NAMES[tierToUse]) === null || _b === void 0 ? void 0 : _b.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } })), jsx$2(Flex, { children: tier.points === '0' ? 'No Tier' : tierName }), you && jsx$2(YouTooltip, {})] }), isUnavailable ? (jsx$2(Flex, { sx: { fontWeight: 600, opacity: 0.8 }, children: "UNAVAILABLE" })) : (jsxs(Flex, { sx: { color: tier.bonusWithFee > 0 ? 'success' : 'text', fontWeight: 700, alignItems: 'center' }, children: [tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0', "%", tier.points !== '0' && (jsx$2(Flex, { sx: {
-                                        borderRadius: 'normal',
-                                        border: '1px solid var(--theme-ui-colors-success)',
-                                        px: '4px',
-                                        ml: '3px',
-                                        color: 'success',
-                                    }, children: boostMap[tierToUse] }))] }))] }, tier.points));
-            }), !hideTitle && (jsx$2(Button, { variant: "secondary", sx: { width: '100%', mt: '10px' }, onClick: () => window.open('https://ape.bond/tier-staking', '_blank'), children: "get tier" }))] }));
-};
-
-const BonusComponent = ({ bond, tooltipPosition, }) => {
-    var _a, _b, _c, _d;
-    const SDKConfig = useSDKConfig();
-    const highestPointsElement = (_a = bond === null || bond === void 0 ? void 0 : bond.trueBondPrices) === null || _a === void 0 ? void 0 : _a.reduce((max, current) => {
-        return new BigNumber$1(current.points).isGreaterThan(new BigNumber$1(max.points)) ? current : max;
-    }, bond === null || bond === void 0 ? void 0 : bond.trueBondPrices[0]);
-    const baseTrueBondPrice = findHighestTrueBondPrice('0', bond);
-    return (jsx$2(Flex, { children: (bond === null || bond === void 0 ? void 0 : bond.trueBondPrices) && ((_b = bond === null || bond === void 0 ? void 0 : bond.trueBondPrices) === null || _b === void 0 ? void 0 : _b.length) > 1 && SDKConfig.useTiers ? (jsx$2(Flex, { sx: { alignItems: 'center' }, children: (highestPointsElement === null || highestPointsElement === void 0 ? void 0 : highestPointsElement.bonusWithFee) > 0 ? (jsx$2(TooltipBubble, { width: "280px", placement: tooltipPosition, transformTip: tooltipPosition === 'bottomLeft' ? 'translate(0%, 0%)' : 'translate(0%, 0%)', body: jsx$2(BonusTable, { bond: bond }), children: jsxs(Flex, { sx: {
-                        p: '3px 6px',
-                        border: '1px solid var(--theme-ui-colors-primaryButton)',
-                        borderRadius: 'normal',
-                        background: 'transparent',
-                        position: 'relative',
-                        overflow: 'hidden',
-                        cursor: 'pointer',
-                    }, 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: (highestPointsElement === null || highestPointsElement === void 0 ? void 0 : highestPointsElement.bonusWithFee) > 0 ? 'success' : 'error' }, children: [(_c = highestPointsElement === null || highestPointsElement === void 0 ? void 0 : highestPointsElement.bonusWithFee) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%"] })] })] }) })) : (jsx$2(Flex, { sx: { height: '20px', width: '20px' }, children: jsx$2(TooltipBubble, { body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) }) })) })) : (jsx$2(Flex, { sx: { alignItems: 'center' }, children: (baseTrueBondPrice === null || baseTrueBondPrice === void 0 ? void 0 : baseTrueBondPrice.bonusWithFee) > 0 ? (`${(_d = baseTrueBondPrice === null || baseTrueBondPrice === void 0 ? void 0 : baseTrueBondPrice.bonusWithFee) === null || _d === void 0 ? void 0 : _d.toFixed(2)}%`) : (jsx$2(Flex, { sx: { height: '20px', width: '20px' }, children: jsx$2(TooltipBubble, { body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) }) })) })) }));
-};
-
-const useIsMobile = () => {
-    const [isMobile, setIsMobile] = useState(window.innerWidth < 852);
-    // Hardcoded toggle for debounce
-    const useDebounce = false;
-    useEffect(() => {
-        const resizeHandler = () => {
-            {
-                setIsMobile(window.innerWidth < 852);
-            }
-        };
-        window.addEventListener('resize', resizeHandler);
-        return () => {
-            window.removeEventListener('resize', resizeHandler);
-        };
-    }, [useDebounce]);
-    return isMobile;
-};
-
 const BondCards = ({ bondData }) => {
     var _a, _b, _c;
     const isMobile = useIsMobile();
@@ -76692,6 +76718,14 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
     const { data: userPoints } = useTierPoints();
     const bondData = bonds === null || bonds === void 0 ? void 0 : bonds.find((bond) => { var _a; return ((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
     const isMobile = useIsMobile();
+    const { abTestValue } = useABTesting({ key: ABTestKeys.BOND_BUY_BUTTON });
+    let reason = '';
+    if (isMobile) {
+        reason = abTestValue === 'true' ? 'bondBuyButtonMobile' : 'noBondBuyButtonMobile';
+    }
+    else {
+        reason = abTestValue === 'true' ? 'bondBuyButtonDesktop' : 'noBondBuyButtonDesktop';
+    }
     // Tier Gating
     const userTier = getUserTier(userPoints !== null && userPoints !== void 0 ? userPoints : '0');
     const minTier = (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) !== undefined ? bondData.minTier : null;
@@ -76785,7 +76819,7 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
             });
             if (hash) {
                 setBuyTxHash(hash);
-                yield sendReferenceId(billAddress, userChainId, hash);
+                yield sendReferenceId(billAddress, userChainId, hash, reason);
                 handlePurchasedBond === null || handlePurchasedBond === void 0 ? void 0 : handlePurchasedBond(hash);
                 track({
                     event: 'bond',
@@ -76832,7 +76866,7 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
                 });
                 if (hash) {
                     setBuyTxHash(hash);
-                    yield sendReferenceId((_d = bondData === null || bondData === void 0 ? void 0 : bondData.billAddress) !== null && _d !== void 0 ? _d : '', userChainId, hash);
+                    yield sendReferenceId((_d = bondData === null || bondData === void 0 ? void 0 : bondData.billAddress) !== null && _d !== void 0 ? _d : '', userChainId, hash, reason);
                     handlePurchasedBond === null || handlePurchasedBond === void 0 ? void 0 : handlePurchasedBond(hash);
                     track({
                         event: 'zap',
@@ -77089,17 +77123,34 @@ const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement
 };
 var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
 
+const NETWORK_COLORS = {
+    [types.ChainId.BSC]: '#F3BA2F4d',
+    [types.ChainId.MAINNET]: '#627eea4d',
+    [types.ChainId.MATIC]: '#8247e54d',
+    [types.ChainId.LIGHTLINK]: '#6087ff4d',
+    [types.ChainId.BASE]: '#0052ff4d',
+    [types.ChainId.ARBITRUM]: '#289fef4d',
+    [types.ChainId.LINEA]: '#ffffff4d',
+    [types.ChainId.IOTA]: '#ffffff4d',
+    [types.ChainId.GRAPHLINQ]: '#ded2ff4d',
+    [types.ChainId.AVAX]: '#e743444d',
+    [types.ChainId.BLAST]: '#fcfc034d',
+    [types.ChainId.CROSSFI]: '#7c80844d',
+    [types.ChainId.MONAD_TESTNET]: '#836EF94d',
+    [types.ChainId.SONIC]: '#fb9a4c4d',
+};
 const BondRow = ({ bond }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const isMobile = useIsMobile();
-    const SDKConfig = useSDKConfig();
+    var _a, _b, _c, _d, _e;
     const locationPath = window.location.pathname.replace('/', '');
+    const isMobile = useIsMobile();
+    const rangeColorNetworkRow = isMobile ? { from: '0%', to: '20%' } : { from: '3%', to: '8%' };
     const billAddress = 'billAddress' in bond
         ? bond.billAddress
         : 'contractAddress' in bond
             ? bond.contractAddress[bond.chainId]
             : undefined;
     const isGoldRush = 'billArt' in bond ? bond.billArt.collection === types.BillArtCollection.GoldenTicket_Collection1 : false;
+    const { abTestValue } = useABTesting({ key: ABTestKeys.BOND_BUY_BUTTON });
     // Modal
     const [openBuyModal] = useModal(jsx$2(ModalHandler, { bondAddress: billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${billAddress}-${bond.chainId}`);
     const handleOpenModal = () => {
@@ -77137,7 +77188,12 @@ const BondRow = ({ bond }) => {
         const tokens = new BigNumber$1(tokensRemaining);
         return tokens.times(payoutTokenPrice);
     };
-    return (jsxs("div", { className: `bond-row ${isGoldRush ? 'gold-rush' : ''}`, onClick: handleOpenModal, sx: { borderRadius: 'normal' }, children: [jsx$2("div", { className: "gold-ribbon" }), jsx$2("div", { className: "token-info-container", sx: { width: ['45%', '45%', '45%', '30%'] }, children: jsx$2(TokenInfoAndName, { bill: bond, isGoldBond: isGoldRush }) }), jsxs("div", { className: "bond-info-columns", sx: { width: '55%' }, children: [jsx$2("div", { className: `discount-column`, children: 'trueBondPrices' in bond ? (((_b = (_a = findHighestTrueBondPrice((SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.useTiers) ? TIERS_WEIGHT[types.LaunchBondTiers.Legend] : '0', bond)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0) > 0 ? (jsx$2(BonusComponent, { bond: bond, tooltipPosition: isMobile ? 'bottomRight' : 'bottomLeft' })) : (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) }))) : ('-') }), jsxs("div", { className: "terms-column", children: [getVestingTermsString(bond), bond.vestingCliff && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: getVestingTermsTooltipString(bond) }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }), 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 ${isGoldRush ? 'gold-rush' : ''}`, onClick: handleOpenModal, sx: {
+            borderRadius: 'normal',
+            background: NETWORK_COLORS[bond.chainId]
+                ? `linear-gradient(90deg, ${NETWORK_COLORS[bond.chainId]} ${rangeColorNetworkRow.from}, rgba(21,20,32,1) ${rangeColorNetworkRow.to})`
+                : 'linear-gradient(90deg, rgba(21,20,32,0.3) 3%, rgba(21,20,32,1) 8%)',
+        }, children: [jsx$2("div", { className: "gold-ribbon" }), jsx$2("div", { className: "token-info-container", sx: { width: ['70%', '70%', '65%', '30%'] }, children: jsx$2(TokenInfoAndName, { bill: bond, isGoldBond: isGoldRush }) }), jsxs("div", { className: "bond-info-columns", sx: { width: '55%' }, children: [jsx$2("div", { sx: { display: abTestValue === 'true' ? ['none', 'none', 'flex', 'flex'] : 'flex' }, children: jsx$2(BonusContainer, { bond: bond }) }), jsxs("div", { className: "terms-column", children: [getVestingTermsString(bond), bond.vestingCliff && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: getVestingTermsTooltipString(bond) }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }), 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',
@@ -77146,7 +77202,20 @@ const BondRow = ({ bond }) => {
                             }, showTooltip: true, toolTip: `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} (${formatDollar({
                                 num: remainingTokensUsd(bond).toNumber(),
                                 isPrice: true,
-                            })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_e = (_d = (_c = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _e !== void 0 ? _e : '', earnTokenSymbol: (_g = (_f = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _f === void 0 ? void 0 : _f.symbol) !== null && _g !== void 0 ? _g : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', 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(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
+                            })})` }) }), abTestValue === 'true' && (jsx$2("div", { sx: { width: ['70px', '70px', '120px', '120px', '70px'] }, children: jsx$2(Button, { sx: {
+                                width: '100%',
+                                height: '40px',
+                                fontSize: '14px',
+                            }, className: "action-button", onClick: () => {
+                                var _a;
+                                return track({
+                                    event: 'newBuyButton',
+                                    chain: bond === null || bond === void 0 ? void 0 : bond.chainId,
+                                    data: {
+                                        cat: (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.symbol,
+                                    },
+                                });
+                            }, children: "BUY" }) })), jsx$2("div", { className: "tooltip-column", 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: billAddress !== null && billAddress !== void 0 ? billAddress : '', 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(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
 };
 
 const HotBondCard = ({ bond }) => {
@@ -77467,6 +77536,7 @@ const FavIcon = ({ filterOption, setFilterOption, }) => {
 };
 
 const BondsMenu = ({ searchQuery, setSearchQuery, setChainFilterOption, chainFilterOption, filterOptions, filterOption, setFilterOption, onSort, }) => {
+    const { abTestValue } = useABTesting({ key: ABTestKeys.BOND_BUY_BUTTON });
     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: () => setSearchQuery('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsxs(Flex$1, { sx: { width: '100%', maxWidth: '340px' }, children: [jsx$2(Input, { value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), variant: "search", width: '100%', sx: {
                                         fontWeight: 600,
                                         background: 'white2',
@@ -77474,7 +77544,7 @@ const BondsMenu = ({ searchQuery, setSearchQuery, setChainFilterOption, chainFil
                                         fontSize: '14px',
                                         color: 'white',
                                         width: ['calc(50vw - 25px)'],
-                                    }, placeholder: 'Search...' }), jsx$2(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "discount-header", onClick: () => onSort('bonus'), children: ["BONUS", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: 10, color: "textDisabledButton" }) })] }), jsxs("div", { className: "terms-header", onClick: () => onSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "tokens-remaining-header", onClick: () => onSort('tokensRemaining'), children: ["TOKENS REMAINING", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2("div", { className: "tooltip-header" })] })] })] }));
+                                    }, placeholder: 'Search...' }), jsx$2(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "discount-header", onClick: () => onSort('bonus'), children: ["BONUS", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: 10, color: "textDisabledButton" }) })] }), jsxs("div", { className: "terms-header", onClick: () => onSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "tokens-remaining-header", onClick: () => onSort('tokensRemaining'), children: ["TOKENS REMAINING", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2("div", { className: "tooltip-header" }), abTestValue === 'true' && jsx$2("div", { className: "tooltip-header" })] })] })] }));
 };
 
 const Bonds = () => {

package/dist/state/abtesting/useABTesting.d.ts

@@ -1,5 +1,6 @@
 export declare enum ABTestKeys {
-    BOND_DESCRIPTION = "bondDescription"
+    BOND_DESCRIPTION = "bondDescription",
+    BOND_BUY_BUTTON = "bondBuyButton"
 }
 export default function useABTesting({ key, defaultValue, }: {
     key: ABTestKeys;

package/dist/styles.css

@@ -635,6 +635,7 @@ span.flex-inline {
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
+  gap: 15px;
 }
 @media screen and (min-width: 1000px) {
   .bond-row .bond-info-columns {
@@ -957,7 +958,6 @@ span.flex-inline {
   height: 100%;
   align-items: center;
   padding-left: 20px;
-  overflow: hidden;
   border-radius: 10px;
 }
 
@@ -987,7 +987,6 @@ span.flex-inline {
 
 .tokeninfoname.tokentext {
   margin-left: 10px;
-  font-size: 16px;
   font-weight: 700;
   width: 100%;
   flex-direction: column;

package/dist/views/Bonds/components/BondRows/BondRow.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BondsData } from '../../../../types/bonds';
 import { BillsConfig } from '@ape.swap/apeswap-lists';
+export declare const NETWORK_COLORS: Partial<Record<number, string>>;
 interface BondRowProps {
     key?: string;
     bond: BondsData | BillsConfig;

package/dist/views/Bonds/components/BonusComponents/BonusContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BillsConfig } from '@ape.swap/apeswap-lists';
+import { BondsData } from '../../../../types/bonds';
+declare const BonusContainer: ({ bond, tooltipPosition, }: {
+    bond: BondsData | BillsConfig;
+    tooltipPosition?: "bottomRight" | "bottomLeft";
+}) => React.JSX.Element;
+export default BonusContainer;

package/package.json

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