@ape.swap/bonds-sdk 1.1.0-test.78 → 1.1.0-test.80

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const SafeHTMLComponent: ({ html }: {
+    html: string;
+}) => React.JSX.Element;
+export default SafeHTMLComponent;

package/dist/main.js

@@ -17598,7 +17598,7 @@ const styles$a = {
         transform: 'translate(-50%, -50%)',
         width: '380px',
         minWidth: ['95%', 'min(360px, 90%)', '320px'],
-        overflowY: 'auto',
+        overflowY: ['auto', 'auto', 'auto', 'unset'],
         maxHeight: 'calc(100% - 30px)',
         maxWidth: '95vw',
     },
@@ -19382,11 +19382,10 @@ const TokenInfoAndName = ({ bill, vestEnds, isHotBond, }) => {
     const tokenName = 'showcaseTokenName' in bill ? bill.showcaseTokenName : bill.earnToken.symbol;
     return (jsxs(Flex, { className: "tokeninfoname container", children: [jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, 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(Flex, { className: "tokeninfoname gradient", sx: {
                     background: isHotBond ? 'transparent' : NETWORK_COLORS[bill.chainId],
-                } }), jsxs(Flex, { className: "tokeninfoname tokencontainer", 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, { sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: false }) })] }), jsx$2(Flex, { sx: {
+                } }), jsxs(Flex, { className: "tokeninfoname tokencontainer", 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, { sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond }) })] }), jsx$2(Flex, { sx: {
                     display: isHotBond ? 'flex' : ['none', 'none', 'none', 'flex'],
                     justifyContent: isHotBond ? 'center' : 'flex-start',
                     width: '100%',
-                    ml: '10px',
                 }, children: ((_b = bill.tags) === null || _b === void 0 ? void 0 : _b[0]) && (jsx$2(ListTag, { variant: ((_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: (_e = (_d = bill.tags) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.toUpperCase() })) })] }));
 };
 
@@ -65986,7 +65985,7 @@ const getBillContractURL = (bond) => {
 const getDiscountColor = (discount) => {
     if (!discount)
         return 'white';
-    return discount < 0 ? 'discount-negative' : 'discount-positive';
+    return discount < 0 ? '#DF4141' : '#38A611';
 };
 const calculateARR = (bond) => {
     const discount2 = 'discount' in bond ? bond.discount : undefined;
@@ -67313,10 +67312,85 @@ const useSendReferenceId = () => {
     }), [config === null || config === void 0 ? void 0 : config.referenceId]);
 };
 
+const BondModalHeader = ({ bondData, onDismiss }) => {
+    var _a, _b, _c;
+    const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
+    const handleClose = () => {
+        if (typeof window !== 'undefined') {
+            window.history.pushState({}, '', `/bonds`);
+        }
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    return (jsxs(Flex, { className: "modaltable-container title-container", 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], variant: ((_c = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' })] }), jsxs(Flex, { className: "title-container price-container", children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { className: "slipagge-close-icons", children: onDismiss ? (jsxs(Fragment$1, { children: [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' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }));
+};
+
+const BondCards = ({ bondData }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (jsxs("div", { className: "bonds-cards", children: [jsxs("div", { className: "bond-card-block", style: { color: getDiscountColor(bondData === null || bondData === void 0 ? void 0 : bondData.discount) }, children: [jsxs("div", { className: "bond-card-title", children: ["Discount", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2("div", { className: "bond-card-content", children: `${(_a = bondData === null || bondData === void 0 ? void 0 : bondData.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2)}%` })] }), jsxs("div", { className: "bond-card-block hide-mobile", children: [jsxs("div", { className: "bond-card-title", children: ["ARR", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2("div", { className: "bond-card-content", children: `${((((_b = bondData === null || bondData === void 0 ? void 0 : bondData.discount) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime((_c = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _c !== void 0 ? _c : 0).days).toFixed(2)}%` })] }), jsxs("div", { className: "bond-card-block", children: [jsxs("div", { className: "bond-card-title", children: ["Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2("div", { className: "bond-card-content", children: vestingTime((_d = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _d !== void 0 ? _d : 0).days ? `${vestingTime((_e = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _e !== void 0 ? _e : 0).days} D` : '-' })] }), jsxs("div", { className: "bond-card-block", children: [jsxs("div", { className: "bond-card-title", children: ["Max Buy", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.MaxBuy((_f = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _f === void 0 ? void 0 : _f.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs("div", { className: "bond-card-content", children: [jsx$2("div", { style: { paddingRight: '3px' }, children: jsx$2(TokenImage, { symbol: (_g = bondData.showcaseTokenName) !== null && _g !== void 0 ? _g : bondData.earnToken.symbol, size: 20 }) }), (_h = parseFloat(maxBuy(bondData).toFixed(0))) === null || _h === void 0 ? void 0 : _h.toLocaleString('en-US')] })] })] }));
+};
+
+const Estimations = ({ bondData, inputValue, inputToken, estimatedOutput, inputTokenPrice, isZap, fetchingZapQuote, zapError, }) => {
+    var _a, _b;
+    // Estimations
+    const estimatedOutputUSD = estimatedOutput * parseFloat((_a = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
+    const estimatedInputUSD = parseFloat(inputValue) * (inputTokenPrice !== null && inputTokenPrice !== void 0 ? inputTokenPrice : 0);
+    const normalPremium = premium(bondData, inputValue);
+    const premiumString = isZap ? formatUSDNumber((estimatedOutputUSD - estimatedInputUSD).toString()) : normalPremium;
+    return (jsxs(Flex, { className: "modaltable-container text-container", children: [jsxs(Flex, { className: "text-container row", children: [jsx$2(Flex, { className: "row-container spend", children: "You spend:" }), jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", getSymbol(inputToken, bondData.chainId), " = $", ' ', formatUSDNumber(estimatedInputUSD === null || estimatedInputUSD === void 0 ? void 0 : estimatedInputUSD.toString())] })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Premium:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val ${getPremiumColor(premiumString)}`, children: ["$ ", premiumString] }))] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You get (over ", vestingTime((_b = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _b !== void 0 ? _b : 0).days, " days):"] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", children: [formatNumber$1(estimatedOutput.toString()), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(estimatedOutputUSD.toString())] }))] })] }));
+};
+
+// Custom HTML sanitizer
+function sanitizeHTML(html) {
+    var _a;
+    const tagWhitelist = ['a', 'br', 'span']; // Allowed tags
+    const attrWhitelist = ['target', 'rel', 'style', 'href']; // Allowed attributes
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const elements = doc.body.querySelectorAll('*');
+    for (let el of elements) {
+        // Remove elements that are not in the whitelist
+        if (!tagWhitelist.includes(el.tagName.toLowerCase())) {
+            (_a = el === null || el === void 0 ? void 0 : el.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(el);
+            continue;
+        }
+        // Loop through the element's attributes and remove those that are not in the whitelist
+        Array.from(el.attributes).forEach((attr) => {
+            if (!attrWhitelist.includes(attr.name.toLowerCase())) {
+                el.removeAttribute(attr.name);
+            }
+        });
+    }
+    return doc.body.innerHTML;
+}
+const SafeHTMLComponent = ({ html }) => {
+    const sanitizedHTML = sanitizeHTML(html);
+    return jsx$2("div", { dangerouslySetInnerHTML: { __html: sanitizedHTML } });
+};
+
+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: {
+                            fontSize: ['12px', '12px', '12px', '14px'],
+                            mt: '10px',
+                            lineHeight: ['18px', '18px', '18px', '21px'],
+                            fontWeight: 400,
+                            overflow: 'hidden',
+                            maxHeight: isOpen ? 'unset' : '54px',
+                        }, children: description && jsx$2(SafeHTMLComponent, { html: description }) }), !isOpen && (jsxs(Text, { sx: {
+                            color: 'primaryButton',
+                            fontSize: '12px',
+                            lineHeight: '18px',
+                            fontWeight: 400,
+                            cursor: 'pointer',
+                        }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(SafeHTMLComponent, { html: description !== null && description !== void 0 ? description : '' }) })] }));
+};
+
 const BondModal = ({ onDismiss, bondAddress, bondChain, 
 // ??
 accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = false, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const SDKConfig = useSDKConfig();
+    // State
+    const [modalVariant, setModalVariant] = useState(SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.modalVariant);
     // Hooks
     const userChainId = useChainId();
     const { address: account } = useAccount();
@@ -67324,10 +67398,8 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
     const { writeContractAsync } = useWriteContract();
     const { sendTransactionAsync } = useSendTransaction();
     const { data: bonds } = useBondsData();
-    const SDKConfig = useSDKConfig();
     const sendReferenceId = useSendReferenceId();
     // State
-    const [modalVariant, setModalVariant] = useState(SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.modalVariant);
     const bondData = useMemo(() => 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()); }), [bondAddress]);
     const [buyTxHash, setBuyTxHash] = useState();
     const [inputValue, setInputValue] = useState('');
@@ -67344,7 +67416,7 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
     const estimatedOutputUSD = estimatedOutput * parseFloat((_h = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _h !== void 0 ? _h : '0');
     const estimatedInputUSD = parseFloat(inputValue) * ((_j = inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price) !== null && _j !== void 0 ? _j : 0);
     const normalPremium = premium(bondData, inputValue);
-    const premiumString = isZap ? formatUSDNumber((estimatedOutputUSD - estimatedInputUSD).toString()) : normalPremium;
+    isZap ? formatUSDNumber((estimatedOutputUSD - estimatedInputUSD).toString()) : normalPremium;
     // Loading State
     const [loadingTx, setLoadingTx] = useState(false);
     const { addToastError } = usePopups();
@@ -67355,15 +67427,8 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
         setInputValue('');
         setInputTokenString(newInputToken);
     }, []);
-    const handleClose = () => {
-        if (typeof window !== 'undefined') {
-            window.history.pushState({}, '', `/bonds`);
-        }
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    };
     // Modals
     const [onOpenZapModal] = useModal(jsx$2(ZapModal, { outputToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, account: account, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId }), true, true, 'zapModal');
-    const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
     // Approve & Purchase Functions
     const [approvalState, approveCallback] = useApproval(inputValue, inputToken !== null && inputToken !== void 0 ? inputToken : null, (_k = (isZap ? SoulZapTokenManager === null || SoulZapTokenManager === void 0 ? void 0 : SoulZapTokenManager[bondData === null || bondData === void 0 ? void 0 : bondData.chainId] : bondData === null || bondData === void 0 ? void 0 : bondData.billAddress)) !== null && _k !== void 0 ? _k : null, account !== null && account !== void 0 ? account : null, (_l = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _l !== void 0 ? _l : null);
     const handleBuyCallback = () => __awaiter$9(void 0, void 0, void 0, function* () {
@@ -67431,12 +67496,10 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
             window.open(`https://ape.bond/swap?outputcurrency=${bondData === null || bondData === void 0 ? void 0 : bondData.lpToken.address[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]}&outputChain=${bondData === null || bondData === void 0 ? void 0 : bondData.chainId}`, '_blank');
         }
     };
-    return (jsx$2(Modal, { className: "modal", children: bondData && (jsx$2(Fragment$1, { children: modalVariant === 'standard' ? (jsxs(Flex, { className: "modal-content", children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white', fontSize: '14px', mb: '10px' }, children: ["Dev mode - Current view: \"", modalVariant, "\"", jsx$2(Text, { onClick: () => setModalVariant('alt'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", children: [jsxs(Flex, { className: "modaltable-container title-container", children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsx$2(Flex, { className: "title-container bondname", children: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), jsxs(Flex, { className: "title-container price-container", children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { className: "title-container tokentags", children: jsx$2(ListTag, { text: (_o = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _o === void 0 ? void 0 : _o[0], variant: ((_p = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _p === void 0 ? void 0 : _p[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }), jsx$2(Flex, { className: "slipagge-close-icons", children: onDismiss ? (jsxs(Fragment$1, { children: [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' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }), jsx$2(Flex, { className: "modaltable-container description-container", children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription }), jsxs(Flex, { className: "modaltable-container blocks-container", children: [jsxs(Flex, { className: `modal-block block-discount ${getDiscountColor(bondData === null || bondData === void 0 ? void 0 : bondData.discount)}`, children: [jsxs(Flex, { className: "block-header", children: ["Discount", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: `${(_q = bondData === null || bondData === void 0 ? void 0 : bondData.discount) === null || _q === void 0 ? void 0 : _q.toFixed(2)}%` })] }), jsxs(Flex, { className: "modal-block block-arr", children: [jsxs(Flex, { className: "block-header", children: ["ARR", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: `${((((_r = bondData === null || bondData === void 0 ? void 0 : bondData.discount) !== null && _r !== void 0 ? _r : 0) * 365) / vestingTime((_s = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _s !== void 0 ? _s : 0).days).toFixed(2)}%` })] }), jsxs(Flex, { className: "modal-block block-term", children: [jsxs(Flex, { className: "block-header", children: ["Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: vestingTime((_t = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _t !== void 0 ? _t : 0).days
-                                                    ? `${vestingTime((_u = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _u !== void 0 ? _u : 0).days} D`
-                                                    : '-' })] }), jsxs(Flex, { className: "modal-block block-maxbuy", children: [jsxs(Flex, { className: "block-header", children: ["Max Buy", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.MaxBuy(bondData.earnToken.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { className: "block-content", children: [jsx$2(Flex, { sx: { pr: '3px' }, children: jsx$2(TokenImage, { symbol: (_v = bondData.showcaseTokenName) !== null && _v !== void 0 ? _v : bondData.earnToken.symbol, size: 20 }) }), (_w = parseFloat(maxBuy(bondData).toFixed(0))) === null || _w === void 0 ? void 0 : _w.toLocaleString('en-US')] })] })] }), jsxs(Flex, { className: "modaltable-container text-container", children: [jsxs(Flex, { className: "text-container row", children: [jsx$2(Flex, { className: "row-container spend", children: "You spend:" }), jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", getSymbol(inputToken, bondData.chainId), " = $", ' ', formatUSDNumber(estimatedInputUSD === null || estimatedInputUSD === void 0 ? void 0 : estimatedInputUSD.toString())] })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Premium:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val ${getPremiumColor(premiumString)}`, children: ["$ ", premiumString] }))] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You get (over ", vestingTime((_x = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _x !== void 0 ? _x : 0).days, " days):"] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", children: [formatNumber$1(estimatedOutput.toString()), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(estimatedOutputUSD.toString())] }))] })] }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { className: "modaltable-container button-container", children: [jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => (supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? onOpenZapModal() : openExternal()), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) }), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
+    return (jsx$2(Modal, { className: "modal", children: modalVariant === 'standard' ? (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content", children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white', fontSize: '14px', mb: '10px' }, children: ["Dev mode - Current view: \"standard\"", jsx$2(Text, { onClick: () => setModalVariant('alt'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(BondCards, { bondData: bondData }), jsx$2(Estimations, { bondData: bondData, inputValue: inputValue, inputToken: inputToken, estimatedOutput: estimatedOutput, inputTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { className: "modaltable-container button-container", children: [jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => (supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? onOpenZapModal() : openExternal()), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) }), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
                                                 event.stopPropagation();
                                                 switchChain({ chainId: bondData.chainId });
-                                            }, children: `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsx$2(Button, { className: "action-button", load: load || fetchingZapQuote, disabled: load ||
+                                            }, style: { fontSize: '14px', padding: '6px', marginLeft: '0px' }, children: `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsx$2(Button, { className: "action-button", load: load || fetchingZapQuote, disabled: load ||
                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                 !account ||
                                                 !inputValue ||
@@ -67446,15 +67509,7 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                 !account ||
                                                 !inputValue ||
-                                                parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })] })) : (
-            // </Flex>
-            //
-            //
-            // ALTERNATIVE VIEW!!
-            //
-            //
-            // <Flex className="modal-backdrop" onClick={handleClose}>
-            jsxs(Flex, { className: "modal-content font-small gpt", children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"", modalVariant, "\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsx$2(Flex, { className: "modal-header" }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_y = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _y !== void 0 ? _y : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_z = bondData.showcaseTokenName) !== null && _z !== void 0 ? _z : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { children: ["You will receive:", jsx$2(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_0 = bondData.showcaseTokenName) !== null && _0 !== void 0 ? _0 : bondData.earnToken.symbol, size: 20 }) }), (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, " + \u00A0", (youGet(bondData, inputValue) -
+                                                parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content font-small gpt", children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"alt\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsx$2(Flex, { className: "modal-header" }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _m !== void 0 ? _m : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_o = bondData.showcaseTokenName) !== null && _o !== void 0 ? _o : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { children: ["You will receive:", jsx$2(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_p = bondData.showcaseTokenName) !== null && _p !== void 0 ? _p : bondData.earnToken.symbol, size: 20 }) }), (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, " + \u00A0", (youGet(bondData, inputValue) -
                                                                 lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), jsx$2("span", { className: "text-highlight", children: "\u00A0additional" })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button button-narrow", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
                                                                 event.stopPropagation();
                                                                 switchChain({ chainId: bondData.chainId });
@@ -67462,7 +67517,7 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
                                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                                 !account ||
                                                                 !inputValue ||
-                                                                parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue).toFixed(0), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date())] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_1 = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _1 !== void 0 ? _1 : 0).days * 86400000))] }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "What are bonds?" })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })) })) }));
+                                                                parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue).toFixed(0), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date())] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_q = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _q !== void 0 ? _q : 0).days * 86400000))] }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "What are bonds?" })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })) })) }));
 };
 
 /** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
@@ -67781,7 +67836,7 @@ const BondRow = ({ bond }) => {
         const tokens = new BigNumber$1(tokensRemaining);
         return tokens.times(payoutTokenPrice);
     };
-    return (jsxs(Flex$1, { className: "bonds-container bondrow-container", onClick: handleOpenModal, children: [jsx$2(Flex$1, { className: "column column-tokens", children: jsx$2(Flex$1, { className: "column column-tokeninfoname", children: jsx$2(TokenInfoAndName, { bill: bond }) }) }), jsxs(Flex$1, { className: "column column-bondinfo", children: [jsx$2(Flex$1, { className: `column column-discount ${getDiscountColor(discount)}`, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' }), jsx$2(Flex$1, { className: "column column-arr", children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' }), jsx$2(Flex$1, { className: "column column-terms", 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(Flex$1, { className: "column column-tokensremaining", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
+    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container", children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: "discount-column", style: { color: getDiscountColor(discount) }, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' }), jsx$2("div", { className: "arr-column", children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' }), jsx$2("div", { className: "terms-column", children: ((_a = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _a === void 0 ? void 0 : _a.days) ? `${(_b = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _b === void 0 ? void 0 : _b.days} D` : '-' }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
@@ -67790,7 +67845,7 @@ const BondRow = ({ bond }) => {
                             }, showTooltip: true, toolTip: `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} (${formatDollar({
                                 num: remainingTokensUsd(bond).toNumber(),
                                 isPrice: true,
-                            })})` }) }), jsx$2(Flex$1, { className: "column tooltip-container", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.earnToken.address[bond.chainId]) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: `https://dashboard.ape.bond/bond/${billAddress === null || billAddress === void 0 ? void 0 : billAddress.toLowerCase()}`, thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_c = bond.chainId) !== null && _c !== void 0 ? _c : types.ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] })] }, billAddress));
+                            })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.earnToken.address[bond.chainId]) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: `https://dashboard.ape.bond/bond/${billAddress === null || billAddress === void 0 ? void 0 : billAddress.toLowerCase()}`, thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_c = bond.chainId) !== null && _c !== void 0 ? _c : types.ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(5%, 0%)", children: jsx$2(Svg, { icon: "more", width: "25px" }) }) })] })] }, billAddress));
 };
 
 const SwiperContext$1 = createContext({
@@ -67829,11 +67884,13 @@ const styles$5 = {
         width: '100%',
         justifyContent: 'space-between',
         flexDirection: ['column', 'column', 'column', 'row'],
-        display: ['none', 'none', 'none', 'flex'],
+        display: 'none',
+        '@media screen and (min-width: 1000px)': {
+            display: 'flex',
+        },
     },
     desktopCard: {
         width: '100%',
-        pl: '20px',
         background: 'white3',
         borderRadius: 'normal',
         cursor: 'pointer',
@@ -73458,8 +73515,11 @@ const HotBondCards = () => {
                     width: '100%',
                     alignItems: 'center',
                     mb: '15px',
-                    display: ['flex', 'flex', 'flex', 'none'],
                     overflow: 'hidden',
+                    display: 'flex',
+                    '@media screen and (min-width: 1000px)': {
+                        display: 'none',
+                    },
                 }, children: [jsx$2(Swiper, { id: "hotbondsSweper", onSwiper: setSwiper, slidesPerView: "auto", centeredSlides: true, lazy: true, preloadImages: false, onSlideChange: handleSlide, style: { width: '100%', paddingBottom: '15px', overflow: 'visible' }, children: filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.map((bond, index) => {
                             return (jsx$2(SwiperSlide, { style: {
                                     width: '100%',
@@ -73670,7 +73730,7 @@ const BondsMenu = ({ searchQuery, setSearchQuery, setChainFilterOption, chainFil
                                         height: '30px',
                                         fontSize: '14px',
                                         color: 'white',
-                                    }, placeholder: 'Search...' }), jsx$2(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "discount-header", onClick: () => onSort('discount'), children: ["DISCOUNT", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: 10, color: "textDisabledButton" }) })] }), jsxs("div", { className: "header-column", onClick: () => onSort('arr'), children: ["ARR", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "header-column", onClick: () => onSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "tokens-remaining", onClick: () => onSort('tokensRemaining'), children: ["TOKENS REMAINING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2("div", { className: "shadow-div" })] })] })] }));
+                                    }, placeholder: 'Search...' }), jsx$2(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "discount-header", onClick: () => onSort('discount'), children: ["DISCOUNT", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: 10, color: "textDisabledButton" }) })] }), jsxs("div", { className: "arr-header", onClick: () => onSort('arr'), children: ["ARR", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "terms-header", onClick: () => onSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, 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' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2("div", { className: "tooltip-header" })] })] })] }));
 };
 
 const Bonds = ({ chains = [] }) => {

package/dist/styles.css

@@ -61,17 +61,74 @@
   }
 }
 
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(66, 66, 66, 0.5);
+.bonds-cards {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+}
+@media screen and (min-width: 800px) {
+  .bonds-cards {
+    flex-direction: row;
+    gap: 5px;
+  }
+}
+.bonds-cards .bond-card-block {
+  display: flex;
+  padding: 8px 12px;
+  background: var(--theme-ui-colors-white3);
+  width: 100%;
   align-items: center;
-  z-index: 100;
+  justify-content: space-between;
+  margin-bottom: 1px;
+}
+@media screen and (min-width: 800px) {
+  .bonds-cards .bond-card-block {
+    width: 350px;
+    flex-direction: column;
+    border-radius: 10px;
+    padding: 12px;
+  }
+}
+.bonds-cards .bond-card-block .bond-card-title {
+  display: flex;
+  color: white;
+  font-weight: 400;
+  font-size: 12px;
+}
+@media screen and (min-width: 800px) {
+  .bonds-cards .bond-card-block .bond-card-title {
+    padding-bottom: 5px;
+  }
+}
+.bonds-cards .bond-card-block .bond-card-tooltip {
+  padding-left: 5px;
+  align-items: flex-start;
+  cursor: pointer;
+}
+.bonds-cards .bond-card-block .bond-card-content {
+  display: flex;
+  font-size: 12px;
+  font-weight: 700;
+}
+@media screen and (min-width: 800px) {
+  .bonds-cards .bond-card-block .bond-card-content {
+    font-size: 16px;
+  }
+}
+.bonds-cards .bond-card-block:first-child {
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+}
+.bonds-cards .bond-card-block:last-of-type {
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+.bonds-cards .hide-mobile {
+  display: none;
+}
+@media screen and (min-width: 800px) {
+  .bonds-cards .hide-mobile {
+    display: flex;
+  }
 }
 
 .modal {
@@ -115,7 +172,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding-bottom: 5px;
 }
 
 .title-container.bondicon {
@@ -158,9 +214,9 @@
 
 .title-container.bondname {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
-  padding-left: 10px;
+  padding-left: 20px;
 }
 
 .title-container.bondname-small {
@@ -173,7 +229,7 @@
 .title-container.price-container {
   display: flex;
   flex-direction: column;
-  padding-left: 10px;
+  padding-left: 20px;
 }
 
 .price-container.price {
@@ -221,7 +277,7 @@
   font-size: 16px;
   border-radius: 10px;
   height: 90%;
-  padding: 10px;
+  padding: 13px;
 }
 
 .block-header {
@@ -239,7 +295,6 @@
 
 .block-content {
   align-items: center;
-  padding-bottom: 10px;
   font-weight: 700;
 }
 
@@ -539,20 +594,80 @@ span.flex-inline {
   fill: #38A611;
 }
 
-.bonds-container.bondrow-container {
+.bond-row {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 70px;
   justify-content: space-around;
   background-color: var(--theme-ui-colors-white2);
-  margin-bottom: 5px;
   border-radius: 10px;
   cursor: pointer;
+  margin-bottom: 5px;
 }
-.bonds-container.bondrow-container:hover {
+.bond-row:hover {
   background-color: var(--theme-ui-colors-white3);
 }
+.bond-row .token-info-container {
+  display: flex;
+  width: 50%;
+}
+.bond-row .bond-info-columns {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 50%;
+  justify-content: flex-end;
+}
+@media screen and (min-width: 1000px) {
+  .bond-row .bond-info-columns {
+    justify-content: space-between;
+  }
+}
+.bond-row .bond-info-columns .discount-column {
+  display: flex;
+  width: 85px;
+  align-items: flex-end;
+  justify-content: center;
+}
+.bond-row .bond-info-columns .arr-column {
+  display: none;
+  width: 85px;
+  align-items: flex-end;
+  justify-content: center;
+}
+@media screen and (min-width: 1000px) {
+  .bond-row .bond-info-columns .arr-column {
+    display: flex;
+  }
+}
+.bond-row .bond-info-columns .terms-column {
+  display: none;
+  width: 85px;
+  align-items: flex-end;
+  justify-content: center;
+}
+@media screen and (min-width: 1000px) {
+  .bond-row .bond-info-columns .terms-column {
+    display: flex;
+  }
+}
+.bond-row .bond-info-columns .tokens-remaining-column {
+  display: none;
+  width: 135px;
+  align-items: flex-end;
+  justify-content: center;
+}
+@media screen and (min-width: 1000px) {
+  .bond-row .bond-info-columns .tokens-remaining-column {
+    display: flex;
+  }
+}
+.bond-row .bond-info-columns .tooltip-column {
+  width: 50px;
+  display: flex;
+  opacity: 0.8;
+}
 
 .column.column-tokens {
   display: flex;
@@ -656,43 +771,61 @@ span.flex-inline {
 .bonds-menu .headers-container {
   display: flex;
   width: 50%;
-  justify-content: space-between;
-  opacity: 0.8;
+  opacity: 0.6;
+  justify-content: flex-end;
+}
+@media screen and (min-width: 1000px) {
+  .bonds-menu .headers-container {
+    justify-content: space-between;
+  }
 }
 .bonds-menu .discount-header {
   display: flex;
   width: 85px;
   align-items: flex-end;
+  justify-content: center;
+  cursor: pointer;
 }
-.bonds-menu .header-column {
+.bonds-menu .arr-header {
   display: none;
   width: 85px;
   align-items: flex-end;
+  justify-content: center;
+  cursor: pointer;
 }
 @media screen and (min-width: 1000px) {
-  .bonds-menu .header-column {
+  .bonds-menu .arr-header {
     display: flex;
   }
 }
-.bonds-menu .tokens-remaining {
+.bonds-menu .terms-header {
   display: none;
-  width: 135px;
+  width: 85px;
   align-items: flex-end;
+  justify-content: center;
+  cursor: pointer;
 }
 @media screen and (min-width: 1000px) {
-  .bonds-menu .tokens-remaining {
+  .bonds-menu .terms-header {
     display: flex;
   }
 }
-.bonds-menu .shadow-div {
-  width: 50px;
+.bonds-menu .tokens-remaining-header {
   display: none;
+  width: 135px;
+  align-items: flex-end;
+  justify-content: center;
+  cursor: pointer;
 }
 @media screen and (min-width: 1000px) {
-  .bonds-menu .shadow-div {
+  .bonds-menu .tokens-remaining-header {
     display: flex;
   }
 }
+.bonds-menu .tooltip-header {
+  width: 50px;
+  display: flex;
+}
 
 .bonds-menu-header.filters {
   display: flex;
@@ -839,7 +972,6 @@ span.flex-inline {
   justify-content: space-between;
   height: 100%;
   align-items: center;
-  margin-left: -30px;
   padding-left: 20px;
   overflow: hidden;
   border-radius: 10px;

package/dist/views/BondModal/BondModal.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import React from 'react';
 export interface BondModalProps {
     onDismiss?: () => void;

package/dist/views/BondModal/components/BondCards.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BondsData } from '../../../types/bonds';
+declare const BondCards: ({ bondData }: {
+    bondData: BondsData;
+}) => React.JSX.Element;
+export default BondCards;

package/dist/views/BondModal/components/BondModalHeader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BondsData } from '../../../types/bonds';
+declare const BondModalHeader: ({ bondData, onDismiss }: {
+    bondData: BondsData;
+    onDismiss?: () => void;
+}) => React.JSX.Element;
+export default BondModalHeader;

package/dist/views/BondModal/components/Estimations.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Token } from '@ape.swap/apeswap-lists';
+import { BondsData } from '../../../types/bonds';
+declare const Estimations: ({ bondData, inputValue, inputToken, estimatedOutput, inputTokenPrice, isZap, fetchingZapQuote, zapError, }: {
+    bondData: BondsData;
+    inputValue: string;
+    inputToken: Token | "NATIVE" | undefined;
+    estimatedOutput: number;
+    inputTokenPrice?: number;
+    isZap?: boolean;
+    fetchingZapQuote?: boolean;
+    zapError?: boolean;
+}) => React.JSX.Element;
+export default Estimations;

package/dist/views/BondModal/components/ProjectDescription.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const ProjectDescription: ({ description }: {
+    description?: string;
+}) => React.JSX.Element;
+export default ProjectDescription;

package/package.json

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