@ape.swap/bonds-sdk 1.0.773 → 1.0.775

package/dist/components/BondMenu/BondMenu.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import { useCallback } from 'react';
 import { Flex, IconButton } from '../uikit-sdk';
@@ -18,7 +29,7 @@ var BondMenu = function (_a) {
         setChainFilterOption(['All Chains']);
         setFilterOption(newOption);
     }, [setChainFilterOption, setFilterOption]);
-    return (_jsxs(Flex, { className: "menu-container filters", children: [_jsx(Flex, { className: "filters desktop-rec", sx: { display: ['none', 'none', 'none', 'flex'], mr: '20px' }, children: _jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), _jsx(Flex, { className: "filtesr mobile-rec", sx: { display: ['flex', 'flex', 'flex', 'none'], width: '100%' }, children: _jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) }), _jsx(Flex, { className: "filters network", sx: { width: ['49%', '49%', '49%', 'unset'], minWidth: '120px' }, children: _jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), _jsxs(Flex, { className: "filters clear-all", sx: {
+    return (_jsxs(Flex, __assign({ className: "menu-container filters" }, { children: [_jsx(Flex, __assign({ className: "filters desktop-rec", sx: { display: ['none', 'none', 'none', 'flex'], mr: '20px' } }, { children: _jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) })), _jsx(Flex, __assign({ className: "filtesr mobile-rec", sx: { display: ['flex', 'flex', 'flex', 'none'], width: '100%' } }, { children: _jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) })), _jsx(Flex, __assign({ className: "filters network", sx: { width: ['49%', '49%', '49%', 'unset'], minWidth: '120px' } }, { children: _jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) })), _jsxs(Flex, __assign({ className: "filters clear-all", sx: {
                     display: ['none', 'none', 'none', 'flex'],
                     color: 'textDisabledButton',
                     fontSize: '14px',
@@ -35,6 +46,6 @@ var BondMenu = function (_a) {
                     setChainFilterOption(['All Chains']);
                     setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
                     onHandleQueryChange('');
-                }, children: ["Clear All", _jsx(Flex, { sx: { ml: '7px' }, children: _jsx(IconButton, { icon: "close", color: "textDisabledButton", variant: "transparent" }) })] })] }));
+                } }, { children: ["Clear All", _jsx(Flex, __assign({ sx: { ml: '7px' } }, { children: _jsx(IconButton, { icon: "close", color: "textDisabledButton", variant: "transparent" }) }))] }))] })));
 };
 export default BondMenu;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BondsDataResponse } from "../../types/bonds";
 import '../../scss/BondRow.scss';
 interface BondRowProps {

package/dist/components/BondRows/BondRow.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import BigNumber from "bignumber.js";
 import { ChainId } from "../../enum/apeswaplists";
@@ -67,7 +78,7 @@ var BondRow = function (_a) {
         var vestingDays = vestingTime(bond.vestingTerm).days;
         return parseFloat((((discount * 365) / vestingDays).toFixed(2)));
     };
-    return (_jsxs(Flex, { className: "bonds-container bondrow-container", onClick: function () { return rowClick(bond); }, children: [_jsxs(Flex, { className: "column column-tokens", children: [_jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bond }) }), _jsx(Flex, { className: "column column-tokenicons", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(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/".concat((_b = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _b === void 0 ? void 0 : _b.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 : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: _jsx(Svg, { icon: "more", width: "20px" }) }) })] }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsx(Flex, { className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: (bond === null || bond === void 0 ? void 0 : bond.discount) !== undefined ? "".concat(bond.discount.toFixed(2), "%") : '-' }), _jsx(Flex, { className: "column column-arr", children: calculateARR(bond) !== undefined ? "".concat(calculateARR(bond), "%") : '-' }), _jsx(Flex, { className: "column column-terms", children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' }), _jsx(Flex, { className: "column column-tokensremaining", children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
+    return (_jsxs(Flex, __assign({ className: "bonds-container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bond }) })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(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/".concat((_b = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _b === void 0 ? void 0 : _b.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 : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "more", width: "20px" }) })) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: (bond === null || bond === void 0 ? void 0 : bond.discount) !== undefined ? "".concat(bond.discount.toFixed(2), "%") : '-' })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: calculateARR(bond) !== undefined ? "".concat(calculateARR(bond), "%") : '-' })), _jsx(Flex, __assign({ className: "column column-terms" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
@@ -76,6 +87,6 @@ var BondRow = function (_a) {
                             }, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.earnToken.symbol, " (").concat(formatDollar({
                                 num: remainingTokensUsd(bond).toNumber(),
                                 isPrice: true,
-                            }), ")") }) }), _jsx(Flex, { className: "column column-hotbond", children: _jsx(Flex, { className: "column column-icon", children: (hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.includes(bond.billAddress.toLowerCase())) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) }) })] })] }, bond.billAddress));
+                            }), ")") }) })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: (hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.includes(bond.billAddress.toLowerCase())) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) })) }))] }))] }), bond.billAddress));
 };
 export default BondRow;

package/dist/components/BondRows/BondRowHeader.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import { Flex } from 'theme-ui';
 import { Input } from '../uikit-sdk/Input';
@@ -7,6 +18,6 @@ import '../../scss/BondRowHeader.scss';
 import BondMenu from '../BondMenu/BondMenu';
 var BondRowHeader = function (_a) {
     var inputValue = _a.inputValue, setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onHandleQueryChange = _a.onHandleQueryChange, onSort = _a.onSort;
-    return (_jsxs(Flex, { className: "bondrow-header", children: [_jsx(Flex, { className: "bondrow-header filters", children: _jsx(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: onHandleQueryChange }) }), _jsxs(Flex, { className: "bondrow-header rows", children: [_jsxs(Flex, { className: "column column-tokens header", children: [_jsx(Flex, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: _jsx(Input, { value: inputValue, onChange: onInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }), _jsx(Flex, { className: "column column-tokenicons header" })] }), _jsxs(Flex, { className: "column column-bondinfo header", children: [_jsxs(Flex, { className: "column column-discount header", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)", children: ["DISCOUNT", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('discount'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-arr header", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)", children: ["ARR", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('arr'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-terms header", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)", children: ["TERMS", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-tokensremaining header", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)", children: ["TOKENS REMAINING", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('tokensRemaining'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "column column-hotbond header" })] })] })] }));
+    return (_jsxs(Flex, __assign({ className: "bondrow-header" }, { children: [_jsx(Flex, __assign({ className: "bondrow-header filters" }, { children: _jsx(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: onHandleQueryChange }) })), _jsxs(Flex, __assign({ className: "bondrow-header rows" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens header" }, { children: [_jsx(Flex, __assign({ className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] } }, { children: _jsx(Input, { value: inputValue, onChange: onInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) })), _jsx(Flex, { className: "column column-tokenicons header" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo header" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount header" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["DISCOUNT", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr header" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms header" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["TERMS", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining header" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["TOKENS REMAINING", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsx(Flex, { className: "column column-hotbond header" })] }))] }))] })));
 };
 export default BondRowHeader;

package/dist/components/BondRows/BondRowsByChain.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import { BondsDataResponse } from '../../types/bonds';
 import '../../scss/BondRowsByChain.scss';
 declare const BondRowsByChain: ({ bonds, hotBonds, hideTitles, chains }: {
     bonds: BondsDataResponse[];
-    hotBonds?: string[];
+    hotBonds?: string[] | undefined;
     hideTitles: boolean;
-    chains?: number[];
+    chains?: number[] | undefined;
 }) => import("react").JSX.Element;
 export default BondRowsByChain;

package/dist/components/BondRows/BondRowsByChain.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import BondRowsWithTitle from './BondRowsWithTitle';
 import { MAINNET_CHAINS } from '../../config/constants/chains';
@@ -5,9 +16,9 @@ import '../../scss/BondRowsByChain.scss';
 import { Flex } from 'theme-ui';
 var BondRowsByChain = function (_a) {
     var bonds = _a.bonds, hotBonds = _a.hotBonds, hideTitles = _a.hideTitles, chains = _a.chains;
-    return (_jsx(Flex, { className: "bondrowsbychain", children: (MAINNET_CHAINS.map(function (chain, index) {
+    return (_jsx(Flex, __assign({ className: "bondrowsbychain" }, { children: (MAINNET_CHAINS.map(function (chain, index) {
             return ((!chains || chains.length === 0 || chains.includes(chain)) &&
                 _jsx(BondRowsWithTitle, { chain: chain, bonds: bonds, hotBonds: hotBonds, hideTitles: hideTitles }, chain));
-        })) }));
+        })) })));
 };
 export default BondRowsByChain;

package/dist/components/BondRows/BondRowsWithTitle.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import { BondsDataResponse } from "../../types/bonds";
 import '../../scss/BondRowsWithTitle.scss';
 declare const BondRowsWithTitle: ({ chain, bonds, hotBonds, hideTitles }: {
     chain: number;
     bonds: BondsDataResponse[];
-    hotBonds?: string[];
+    hotBonds?: string[] | undefined;
     hideTitles: boolean;
 }) => import("react").JSX.Element;
 export default BondRowsWithTitle;

package/dist/components/BondRows/BondRowsWithTitle.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
 import ChainTitle from "./ChainTitle";
@@ -10,11 +21,11 @@ var BondRowsWithTitle = function (_a) {
     var billsFilteredByChain = bonds.filter(function (bill) { return bill.chainId === chain; });
     var key = chain;
     var _b = useState(true), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsx(Flex, { className: "bondrowswithtitle", children: _jsxs(AnimatePresence, { initial: false, children: [_jsx(Flex, { onClick: function () { return setIsOpen(!isOpen); }, children: _jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: billsFilteredByChain.length > 0 ? false : true, isOpen: isOpen }) }), billsFilteredByChain.length > 0 && isOpen && (_jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
+    return (_jsx(Flex, __assign({ className: "bondrowswithtitle" }, { children: _jsxs(AnimatePresence, __assign({ initial: false }, { children: [_jsx(Flex, __assign({ onClick: function () { return setIsOpen(!isOpen); } }, { children: _jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: billsFilteredByChain.length > 0 ? false : true, isOpen: isOpen }) })), billsFilteredByChain.length > 0 && isOpen && (_jsx(motion.div, __assign({ initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
                         position: 'relative',
                         overflow: 'hidden',
                         width: '100%',
                         marginTop: '0px',
-                    }, children: billsFilteredByChain === null || billsFilteredByChain === void 0 ? void 0 : billsFilteredByChain.map(function (bill) { return (_jsx(BondRow, { bond: bill, hotBonds: hotBonds }, bill.billAddress)); }) }, key))] }) }, key));
+                    } }, { children: billsFilteredByChain === null || billsFilteredByChain === void 0 ? void 0 : billsFilteredByChain.map(function (bill) { return (_jsx(BondRow, { bond: bill, hotBonds: hotBonds }, bill.billAddress)); }) }), key))] })) }), key));
 };
 export default BondRowsWithTitle;

package/dist/components/BondRows/ChainTitle.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 declare const ChainTitle: ({ chain, pt, hideTitles, isOpen, }: {
     chain: number;
     pt: string;
-    hideTitles?: boolean;
+    hideTitles?: boolean | undefined;
     isOpen: boolean;
 }) => React.JSX.Element;
 export default ChainTitle;

package/dist/components/BondRows/ChainTitle.js

@@ -1,9 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import { Flex, Svg } from '../uikit-sdk';
 import { NETWORK_LABEL } from '../../config/constants/chains';
 var ChainTitle = function (_a) {
     var chain = _a.chain, pt = _a.pt, hideTitles = _a.hideTitles, isOpen = _a.isOpen;
-    return (_jsxs(Flex, { className: "chaintitle", sx: {
+    return (_jsxs(Flex, __assign({ className: "chaintitle", sx: {
             pt: pt,
             pb: '10px',
             color: 'textDisabledButton',
@@ -13,6 +24,6 @@ var ChainTitle = function (_a) {
             textTransform: 'uppercase',
             display: hideTitles ? 'none' : 'flex',
             width: '200px',
-        }, children: [NETWORK_LABEL[chain], " Bonds", _jsx(Flex, { sx: { ml: '7px' }, children: _jsx(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) })] }));
+        } }, { children: [NETWORK_LABEL[chain], " Bonds", _jsx(Flex, __assign({ sx: { ml: '7px' } }, { children: _jsx(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }))] })));
 };
 export default ChainTitle;

package/dist/components/MenuSelect/MenuSelect.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
 import { Option } from './types';
-declare const MenuSelect: ({ selectedOption, setOption, options, ...props }: {
-    selectedOption: string;
-    setOption: (option: string) => void;
-    options: Option[] | undefined;
-} | any) => React.JSX.Element;
+declare const MenuSelect: ({ selectedOption, setOption, options, ...props }: any) => React.JSX.Element;
 export default MenuSelect;

package/dist/components/MenuSelect/MenuSelect.js

@@ -30,7 +30,7 @@ var MenuSelect = function (_a) {
             width: '100%',
             paddingRight: '4px',
         } }, props, { children: options === null || options === void 0 ? void 0 : options.map(function (option) {
-            return (_jsx(SelectItem, { size: "xsm", value: option.value, children: _jsx(Text, { sx: { fontWeight: 400, pl: '10px' }, children: option.label }) }, option.label));
+            return (_jsx(SelectItem, __assign({ size: "xsm", value: option.value }, { children: _jsx(Text, __assign({ sx: { fontWeight: 400, pl: '10px' } }, { children: option.label })) }), option.label));
         }) })));
 };
 export default MenuSelect;

package/dist/components/MenuSelect/RecommendationSelector.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { Flex } from '../uikit-sdk';
 var RecommendationSelector = function (_a) {
@@ -5,7 +16,7 @@ var RecommendationSelector = function (_a) {
     var handleClick = function (option) {
         setActiveOption(option);
     };
-    return (_jsx(Flex, { sx: {
+    return (_jsx(Flex, __assign({ sx: {
             alignItems: 'center',
             color: 'grey',
             fontSize: ['11px'],
@@ -13,9 +24,9 @@ var RecommendationSelector = function (_a) {
             '& > div:last-child': {
                 marginRight: '0',
             },
-        }, children: options.map(function (option) {
+        } }, { children: options.map(function (option) {
             var isActive = option === activeOption;
-            return (_jsx(Flex, { sx: {
+            return (_jsx(Flex, __assign({ sx: {
                     background: isActive ? 'primaryShade' : 'white2',
                     color: isActive ? 'primaryButton' : 'textDisabledButton',
                     px: ['6px', '6px', '6px', '10px'],
@@ -26,7 +37,7 @@ var RecommendationSelector = function (_a) {
                     lineHeight: '11px',
                     alignItems: 'center',
                     height: '24px',
-                }, onClick: function () { return handleClick(option); }, children: option }, option));
-        }) }));
+                }, onClick: function () { return handleClick(option); } }, { children: option }), option));
+        }) })));
 };
 export default RecommendationSelector;

package/dist/components/Modals/BondModal/BondModal.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -232,9 +243,9 @@ var BondModal = function (_a) {
         var singlePurchaseLimit = new BigNumber((_c = bond === null || bond === void 0 ? void 0 : bond.maxPayout) !== null && _c !== void 0 ? _c : 0).div(new BigNumber(10).pow((_d = bond === null || bond === void 0 ? void 0 : bond.earnToken.decimals[chainId]) !== null && _d !== void 0 ? _d : 18));
         return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
     };
-    return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: bondData.map(function (bond) {
+    return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: bondData.map(function (bond) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal-backdrop", onClick: onClose, children: _jsxs(Flex, { className: "modal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "modaltable-container", children: [_jsxs(Flex, { className: "modaltable-container title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _a !== void 0 ? _a : 'question' }), _jsx(TokenImage, { symbol: (_b = bond.showcaseTokenName) !== null && _b !== void 0 ? _b : bond.earnToken.symbol, size: 50 })] }) }), _jsx(Flex, { className: "title-container bondname", children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }), _jsxs(Flex, { className: "title-container price-container", children: [_jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bond)] }), _jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bond)] })] }), _jsx(Flex, { className: "title-container tokentags", children: _jsx(ListTag, { text: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0], variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) })] }), _jsx(Flex, { className: "modaltable-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "modaltable-container blocks-container", children: [_jsxs(Flex, { className: "modal-block block-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-header", children: ["Discount", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsx(Flex, { className: "block-content", children: "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%") })] }), _jsxs(Flex, { className: "modal-block block-arr", children: [_jsxs(Flex, { className: "block-header", children: ["ARR", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsx(Flex, { className: "block-content", children: "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 0) * 365) / vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days).toFixed(2), "%") })] }), _jsxs(Flex, { className: "modal-block block-term", children: [_jsxs(Flex, { className: "block-header", children: ["Terms", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsx(Flex, { className: "block-content", children: vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days ? "".concat(vestingTime((_j = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _j !== void 0 ? _j : 0).days, " D") : '-' })] }), _jsxs(Flex, { className: "modal-block block-maxbuy", children: [_jsxs(Flex, { className: "block-header", children: ["Max Buy", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.earnToken.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsx(Flex, { className: "block-content", children: (_k = parseFloat(maxBuy(bond).toFixed(0))) === null || _k === void 0 ? void 0 : _k.toLocaleString('en-US') })] })] }), _jsxs(Flex, { className: "modaltable-container text-container", children: [_jsxs(Flex, { className: "text-container row", children: [_jsx(Flex, { className: "row-container spend", children: "You spend:" }), _jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", bond.lpToken.symbol, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container premium", children: ["Premium:", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "row-container premium-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsxs(Flex, { className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)), children: ["$ ", premium(bond, inputValue)] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container get", children: ["You get (over ", vestingTime((_l = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _l !== void 0 ? _l : 0).days, " days):"] }), _jsxs(Flex, { className: "row-container get-val", children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] })] })] }), _jsxs(Flex, { className: "modaltable-container buy-container", children: [_jsxs(Flex, { className: "input-container inputrow", children: [_jsx(Flex, { className: "input-container input", children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
+            return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal-backdrop", onClick: onClose }, { children: _jsxs(Flex, __assign({ className: "modal-content", onClick: function (event) { return event.stopPropagation(); } }, { children: [toastMessage && (_jsx(Flex, __assign({ className: "toast" }, { children: toastMessage }))), _jsx(Flex, __assign({ className: "modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modaltable-container" }, { children: [_jsxs(Flex, __assign({ className: "modaltable-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container" }, { children: [_jsx(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _a !== void 0 ? _a : 'question' }), _jsx(TokenImage, { symbol: (_b = bond.showcaseTokenName) !== null && _b !== void 0 ? _b : bond.earnToken.symbol, size: 50 })] })) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0], variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modaltable-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modaltable-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block block-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "block-content" }, { children: "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%") }))] })), _jsxs(Flex, __assign({ className: "modal-block block-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "block-content" }, { children: "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 0) * 365) / vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days).toFixed(2), "%") }))] })), _jsxs(Flex, __assign({ className: "modal-block block-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "block-content" }, { children: vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days ? "".concat(vestingTime((_j = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _j !== void 0 ? _j : 0).days, " D") : '-' }))] })), _jsxs(Flex, __assign({ className: "modal-block block-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.earnToken.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "block-content" }, { children: (_k = parseFloat(maxBuy(bond).toFixed(0))) === null || _k === void 0 ? void 0 : _k.toLocaleString('en-US') }))] }))] })), _jsxs(Flex, __assign({ className: "modaltable-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend(inputValue), " ", bond.lpToken.symbol, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)) }, { children: ["$ ", premium(bond, inputValue)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_l = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _l !== void 0 ? _l : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] }))] }))] })), _jsxs(Flex, __assign({ className: "modaltable-container buy-container" }, { children: [_jsxs(Flex, __assign({ className: "input-container inputrow" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
                                                                 if (v.currentTarget.value.includes(',')) {
                                                                     v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                                                 }
@@ -248,18 +259,18 @@ var BondModal = function (_a) {
                                                                     !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
                                                                         ? v.currentTarget.value
                                                                         : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
-                                                            } }) }), _jsxs(Flex, { className: "input-container token", children: [_jsx(Flex, { className: "input-container bondicon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.lpToken.symbol) !== null && _o !== void 0 ? _o : bond.earnToken.symbol, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol })] })] }), isActive && account && (_jsxs(Flex, { className: "input-container balancerow", children: [_jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalance] }), _jsx(Flex, { className: "balancerow max", children: _jsx(Button, { className: "max-button", onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modaltable-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { className: "action-button", onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol] }) }), _jsx(Flex, { className: "button-container buy", children: chainId !== bond.chainId
+                                                            } }) })), _jsxs(Flex, __assign({ className: "input-container token" }, { children: [_jsx(Flex, __assign({ className: "input-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container-small" }, { children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.lpToken.symbol) !== null && _o !== void 0 ? _o : bond.earnToken.symbol, size: 30 })] })) })), _jsx(Flex, __assign({ className: "title-container tokenname-small" }, { children: bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol }))] }))] })), isActive && account && (_jsxs(Flex, __assign({ className: "input-container balancerow" }, { children: [_jsxs(Flex, __assign({ className: "balancerow text" }, { children: ["Balance: ", tokenBalance] })), _jsx(Flex, __assign({ className: "balancerow max" }, { children: _jsx(Button, __assign({ className: "max-button", onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); } }, { children: "Max" })) }))] })))] })), _jsxs(Flex, __assign({ className: "modaltable-container button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container get" }, { children: _jsxs(Button, __assign({ className: "action-button", onClick: function () { window.open('https://ape.bond/swap', '_blank'); } }, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol] })) })), _jsx(Flex, __assign({ className: "button-container buy" }, { children: chainId !== bond.chainId
                                                     ?
-                                                        _jsxs(Button, { className: "switch-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: function (event) {
+                                                        _jsxs(Button, __assign({ className: "switch-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: function (event) {
                                                                 event.stopPropagation();
                                                                 // Add your claim logic here
                                                                 switchChain({ chainId: bond.chainId });
-                                                            }, children: ["Switch to ", NETWORK_LABEL[bond.chainId]] })
+                                                            } }, { children: ["Switch to ", NETWORK_LABEL[bond.chainId]] }))
                                                     :
                                                         approveTx != null && isConfirmed ?
-                                                            _jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleBuy, children: isConfirming ? 'Confirming...' : "Buy ".concat(bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName) })
+                                                            _jsx(Button, __assign({ className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleBuy }, { children: isConfirming ? 'Confirming...' : "Buy ".concat(bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName) }))
                                                             :
-                                                                _jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleApprove, children: isConfirming ? 'Confirming...' : 'Approve' }) })] })] })] }) }) }, bond.billAddress));
-        }) }));
+                                                                _jsx(Button, __assign({ className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleApprove }, { children: isConfirming ? 'Confirming...' : 'Approve' })) }))] }))] }))] })) })) }, bond.billAddress));
+        }) })));
 };
 export default BondModal;

package/dist/components/Modals/YourBondsModal/YourBondsModal.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -151,23 +162,23 @@ var YourBondsModal = function (_a) {
         }); };
         loadImage();
     }, [userBill]);
-    return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal-backdrop", onClick: onClose, children: !isImageLoaded ? (_jsxs(Flex, { className: "yourbondsmodal-spinner", children: [" ", _jsx(Spinner, { size: 100 }), " "] }))
-                    : (_jsxs(Flex, { className: "yourbondsmodal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "yourbondsmodal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "yourbondsmodal table-container", children: [_jsx(Flex, { className: "yourbondsmodal bondimage", children: _jsx("img", { src: imageSrc, style: { display: isImageLoaded ? "block" : "none" } }) }), _jsxs(Flex, { className: "yourbondsmodal yourbondinfo", children: [_jsxs(Flex, { className: "yourbondinfo title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 18, height: 18, icon: (_d = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 'question' }), _jsx(TokenImage, { symbol: (_e = userBill.bond.showcaseTokenName) !== null && _e !== void 0 ? _e : userBill.bond.earnToken.symbol, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_g = userBill.bond.tags) === null || _g === void 0 ? void 0 : _g.slice(0, 1).map(function (tag) {
-                                                            return (_jsx(Flex, { sx: { marginRight: '10px' }, children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
-                                                        }) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsxs(Flex, { className: "attributes-container", children: [_jsxs(Flex, { className: "attributes-header", sx: { borderRadius: "".concat(isOpenTraits ? '6px 6px 0px 0px' : 'normal'),
-                                                                    display: ['none', 'none', 'none', 'flex'] }, onClick: function () { return setIsOpenTraits(!isOpenTraits); }, children: [_jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [_jsx(Svg, { icon: "tag", direction: "down" }), _jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), _jsx(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), _jsx(AnimatePresence, { children: isOpenTraits && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: _jsx(Flex, { sx: { flexDirection: 'column', gap: '1px' }, children: attributes
-                                                                            ? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), _jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)); })
+    return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "yourbondsmodal-backdrop", onClick: onClose }, { children: !isImageLoaded ? (_jsxs(Flex, __assign({ className: "yourbondsmodal-spinner" }, { children: [" ", _jsx(Spinner, { size: 100 }), " "] })))
+                    : (_jsxs(Flex, __assign({ className: "yourbondsmodal-content", onClick: function (event) { return event.stopPropagation(); } }, { children: [toastMessage && (_jsx(Flex, __assign({ className: "toast" }, { children: toastMessage }))), _jsx(Flex, __assign({ className: "yourbondsmodal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "yourbondsmodal table-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal bondimage" }, { children: _jsx("img", { src: imageSrc, style: { display: isImageLoaded ? "block" : "none" } }) })), _jsxs(Flex, __assign({ className: "yourbondsmodal yourbondinfo" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container" }, { children: [_jsx(Svg, { width: 18, height: 18, icon: (_d = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 'question' }), _jsx(TokenImage, { symbol: (_e = userBill.bond.showcaseTokenName) !== null && _e !== void 0 ? _e : userBill.bond.earnToken.symbol, size: 40 })] })) })), _jsx(Flex, __assign({ className: "title-container tokenname" }, { children: _jsx(StyledHeadingText, { children: (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName }) })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: (_g = userBill.bond.tags) === null || _g === void 0 ? void 0 : _g.slice(0, 1).map(function (tag) {
+                                                            return (_jsx(Flex, __assign({ sx: { marginRight: '10px' } }, { children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }), tag));
+                                                        }) })), _jsxs(Text, __assign({ sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] } }, { children: ["#", userBill.id] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "attributes-container" }, { children: [_jsxs(Flex, __assign({ className: "attributes-header", sx: { borderRadius: "".concat(isOpenTraits ? '6px 6px 0px 0px' : 'normal'),
+                                                                    display: ['none', 'none', 'none', 'flex'] }, onClick: function () { return setIsOpenTraits(!isOpenTraits); } }, { children: [_jsxs(Flex, __assign({ sx: { gap: '10px', alignItems: 'center' } }, { children: [_jsx(Svg, { icon: "tag", direction: "down" }), _jsx(Text, __assign({ sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' } }, { children: "Traits" }))] })), _jsx(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] })), _jsx(AnimatePresence, { children: isOpenTraits && (_jsx(motion.div, __assign({ initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' } }, { children: _jsx(Flex, __assign({ sx: { flexDirection: 'column', gap: '1px' } }, { children: attributes
+                                                                            ? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: a === null || a === void 0 ? void 0 : a.trait_type })), _jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: a === null || a === void 0 ? void 0 : a.value }))] }, a.value)); })
                                                                             : BILL_ATTRIBUTES.map(function (attrib) {
-                                                                                return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
-                                                                            }) }) })) })] }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_h = userBill.lastBlockTimestamp) !== null && _h !== void 0 ? _h : '', (_j = userBill.vesting) !== null && _j !== void 0 ? _j : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _k !== void 0 ? _k : 'question' }), _jsx(TokenImage, { symbol: (_l = userBill.bond.showcaseTokenName) !== null && _l !== void 0 ? _l : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((totalPending(userBill) * ((_m = parseFloat(earnTokenPrice(userBill.bond))) !== null && _m !== void 0 ? _m : 0)).toFixed(2), ")") })] })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_o = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _o !== void 0 ? _o : 'question' }), _jsx(TokenImage, { symbol: (_p = userBill.bond.showcaseTokenName) !== null && _p !== void 0 ? _p : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((claimable(userBill) * ((_q = parseFloat(earnTokenPrice(userBill.bond))) !== null && _q !== void 0 ? _q : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ?
-                                                            _jsxs(Button, { className: "switch-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
+                                                                                return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: attrib })), _jsx(Skeleton, { width: "150px" })] }, attrib));
+                                                                            }) })) }))) })] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-vested" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block header-title" }, { children: "Fully Vested" })), _jsx(Flex, __assign({ className: "yourbondinfo-block header-tooltip" }, { children: _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, __assign({ className: "block-info text" }, { children: _jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: getPendingVesting((_h = userBill.lastBlockTimestamp) !== null && _h !== void 0 ? _h : '', (_j = userBill.vesting) !== null && _j !== void 0 ? _j : '') })) }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-pending" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block header-title" }, { children: "Pending" })), _jsx(Flex, __assign({ className: "yourbondinfo-block header-tooltip" }, { children: _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, __assign({ className: "block-info icon" }, { children: _jsxs("div", __assign({ className: "icon-container-small" }, { children: [_jsx(Svg, { width: 10, height: 10, icon: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _k !== void 0 ? _k : 'question' }), _jsx(TokenImage, { symbol: (_l = userBill.bond.showcaseTokenName) !== null && _l !== void 0 ? _l : userBill.bond.earnToken.symbol, size: 25 })] })) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [_jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) })), _jsx(Text, __assign({ sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' } }, { children: "($".concat((totalPending(userBill) * ((_m = parseFloat(earnTokenPrice(userBill.bond))) !== null && _m !== void 0 ? _m : 0)).toFixed(2), ")") }))] }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-claimable" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block header-title" }, { children: "Claimable" })), _jsx(Flex, __assign({ className: "yourbondinfo-block header-tooltip" }, { children: _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, __assign({ className: "block-info icon" }, { children: _jsxs("div", __assign({ className: "icon-container-small" }, { children: [_jsx(Svg, { width: 10, height: 10, icon: (_o = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _o !== void 0 ? _o : 'question' }), _jsx(TokenImage, { symbol: (_p = userBill.bond.showcaseTokenName) !== null && _p !== void 0 ? _p : userBill.bond.earnToken.symbol, size: 25 })] })) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [_jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) })), _jsx(Text, __assign({ sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' } }, { children: "($".concat((claimable(userBill) * ((_q = parseFloat(earnTokenPrice(userBill.bond))) !== null && _q !== void 0 ? _q : 0)).toFixed(2), ")") }))] }))] }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container claim" }, { children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ?
+                                                            _jsxs(Button, __assign({ className: "switch-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
                                                                     event.stopPropagation();
                                                                     switchChain({ chainId: userBill.bond.chainId });
-                                                                }, children: ["Switch to ", NETWORK_LABEL[userBill.bond.chainId]] })
+                                                                } }, { children: ["Switch to ", NETWORK_LABEL[userBill.bond.chainId]] }))
                                                             :
-                                                                _jsx(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
+                                                                _jsx(Button, __assign({ className: "claim-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
                                                                         event.stopPropagation();
                                                                         handleClaim(userBill.id, userBill.address);
-                                                                    }, children: "Claim" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { className: "transfer-button", variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] })] })] })) }) }, userBill.address) }));
+                                                                    } }, { children: "Claim" })) })), _jsx(Flex, __assign({ className: "button-container transfer" }, { children: _jsx(Button, __assign({ className: "transfer-button", variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); } }, { children: "TRANSFER" })) }))] }))] }))] }))] }))) })) }, userBill.address) }));
 };
 export default YourBondsModal;

package/dist/components/NetworkFilter/index.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -34,7 +45,7 @@ var NetworkFilter = function (_a) {
         }
         setChainFilterOption(newChainFilterOption);
     };
-    return (_jsxs(Flex, { sx: { width: '100%', position: 'relative' }, children: [_jsxs(Flex, { sx: {
+    return (_jsxs(Flex, __assign({ sx: { width: '100%', position: 'relative' } }, { children: [_jsxs(Flex, __assign({ sx: {
                     background: 'white2',
                     p: '6px',
                     borderRadius: 'normal',
@@ -42,7 +53,7 @@ var NetworkFilter = function (_a) {
                     alignItems: 'center',
                     width: '100%',
                     justifyContent: 'space-between',
-                }, onClick: function () { return setIsOpen(!isOpen); }, children: [_jsx(Text, { sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : "Chains (".concat(chainFilterOption.length, ")") }), _jsx(Flex, { sx: { ml: '5px' }, children: _jsx(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (_jsx(Flex, { sx: {
+                }, onClick: function () { return setIsOpen(!isOpen); } }, { children: [_jsx(Text, __assign({ sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' } }, { children: chainFilterOption.includes('All Chains') ? 'All Chains' : "Chains (".concat(chainFilterOption.length, ")") })), _jsx(Flex, __assign({ sx: { ml: '5px' } }, { children: _jsx(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down' }) }))] })), isOpen && (_jsx(Flex, __assign({ sx: {
                     flexDirection: ['column', 'column', 'column'],
                     position: 'absolute',
                     top: '45px',
@@ -53,14 +64,14 @@ var NetworkFilter = function (_a) {
                     borderRadius: 'normal',
                     background: 'white2',
                     zIndex: 555,
-                }, children: __spreadArray(['All Chains'], MAINNET_CHAINS, true).map(function (chainId) {
-                    return (_jsx(Flex, { sx: {
+                } }, { children: __spreadArray(['All Chains'], MAINNET_CHAINS, true).map(function (chainId) {
+                    return (_jsx(Flex, __assign({ sx: {
                             borderRadius: 'normal',
                             p: '5px 15px',
                             minHeight: '40px',
                             cursor: 'pointer',
                             '&:hover': { bg: 'white3' },
-                        }, onClick: function () { return handleCheckbox(chainId.toString()); }, children: _jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [_jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: function () { return null; } }), chainId === 'All Chains' ? (_jsxs(_Fragment, { children: [_jsx(Flex, { sx: { mx: '8px' }, children: _jsx(Svg, { icon: "AllChains", width: "22px" }) }), _jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Chains" })] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: _jsx(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) }), _jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
-                }) }))] }));
+                        }, onClick: function () { return handleCheckbox(chainId.toString()); } }, { children: _jsxs(Flex, __assign({ sx: { width: '100%', alignItems: 'center', fontSize: '14px' } }, { children: [_jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: function () { return null; } }), chainId === 'All Chains' ? (_jsxs(_Fragment, { children: [_jsx(Flex, __assign({ sx: { mx: '8px' } }, { children: _jsx(Svg, { icon: "AllChains", width: "22px" }) })), _jsx(Text, __assign({ sx: { lineHeight: '22px', fontWeight: 400 } }, { children: "All Chains" }))] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, __assign({ sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' } }, { children: _jsx(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) })), _jsx(Text, __assign({ sx: { lineHeight: '22px', fontWeight: 400 } }, { children: NETWORK_LABEL[chainId] }))] }))] })) }), chainId));
+                }) })))] })));
 };
 export default NetworkFilter;