@ape.swap/bonds-sdk 2.0.8 → 2.1.0

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

@@ -1,7 +1,5 @@
 import React from 'react';
 interface AccordionTextProps {
-    title?: string;
-    body?: string;
     isVisible?: boolean;
 }
 declare const AccordionText: React.FC<AccordionTextProps>;

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import { ChainId, Token } from '@ape.swap/apeswap-lists';
-declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, chainId, handleMaxBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, bondEarnToken, }: {
+declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, chainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, bondEarnToken, modalVariant, }: {
     typedValue: string;
     setTypedValue: (value: React.SetStateAction<string>) => void;
     selectedToken?: "NATIVE" | Token;
     chainId: ChainId;
-    handleMaxBtn?: () => void;
+    handleValueBtn?: (value: string) => void;
     handleCurrencySelect: (value: string) => void;
     enableZap?: boolean;
     tokenBalance?: string;
     selectedTokenPrice?: number;
     bondPrincipalToken?: Token;
     bondEarnToken?: Token;
+    modalVariant?: "alt" | "standard";
 }) => React.JSX.Element;
 export default TokenSelectorPanel;

package/dist/main.js

@@ -18687,6 +18687,25 @@ const AddFavToken = ({ tokenSymbol, hotBond }) => {
         }, children: jsx$2(AnimatePresence, { mode: "wait", children: jsx$2(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex' }, children: isFavToken ? (jsx$2(Svg, { icon: "StarFilled", width: 22, height: 22 })) : (jsx$2(Svg, { icon: hotBond ? 'FirePink' : 'Star', width: hotBond ? 25 : 20, height: hotBond ? 25 : 20 })) }, isFavToken ? 'StarFilled' : 'Star') }) }));
 };
 
+const defaultUrls = {
+    apiV2: 'https://api.ape.bond',
+    realTimeApi: 'https://realtime-api.ape.bond/bonds',
+    apeswapLists: 'https://raw.githubusercontent.com/ApeSwapFinance/apeswap-lists/main',
+    mainUrl: 'https://ape.bond',
+};
+const useSDKConfig = (config) => {
+    var _a;
+    const { data } = useQuery({
+        queryKey: [QUERY_KEYS.SDK_CONFIG],
+        initialData: Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.config), { urls: Object.assign(Object.assign({}, defaultUrls), (_a = config === null || config === void 0 ? void 0 : config.config) === null || _a === void 0 ? void 0 : _a.urls) }),
+    });
+    return data;
+};
+const useURLByEnvironment = (key) => {
+    const config = useSDKConfig();
+    return config === null || config === void 0 ? void 0 : config.urls[key];
+};
+
 const NETWORK_COLORS = {
     [types.ChainId.BSC]: '#F3BA2F',
     [types.ChainId.MAINNET]: '#627eea',
@@ -18700,15 +18719,21 @@ const NETWORK_COLORS = {
     [types.ChainId.AVAX]: '#e74344',
 };
 const TokenInfoAndName = ({ bill, vestEnds, isHotBond, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
+    const SDKConfig = useSDKConfig();
     const tokenName = 'showcaseTokenName' in bill ? bill.showcaseTokenName : bill.earnToken.symbol;
-    return (jsxs(Flex, { className: "tokeninfoname container", children: [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 || vestEnds ? 'transparent' : NETWORK_COLORS[bill.chainId],
-                } }), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: { marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0 }, 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: {
+    return (jsxs(Flex, { className: "tokeninfoname container", children: [SDKConfig.referenceId === 'seedify' ? (jsx$2(Flex, { sx: {
+                    p: '10px',
+                    opacity: 0.2,
+                    position: 'absolute',
+                    left: '-20px',
+                }, children: jsx$2(Flex, { sx: { borderRadius: '56px', overflow: 'hidden' }, children: jsx$2(Svg, { width: 100, height: 100, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _a !== void 0 ? _a : 'question' }) }) })) : (jsxs(Fragment$1, { children: [jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) }), jsx$2(Flex, { className: "tokeninfoname gradient", sx: {
+                            background: isHotBond || vestEnds ? 'transparent' : NETWORK_COLORS[bill.chainId],
+                        } })] })), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: { marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0 }, children: [jsx$2(TokenImage, { symbol: tokenName, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [tokenName, vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { className: "tokeninfofav", sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond }) })] }), jsx$2(Flex, { sx: {
                     display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'],
                     justifyContent: isHotBond ? 'center' : 'flex-start',
                     width: '100%',
-                }, children: ((_b = bill.tags) === null || _b === void 0 ? void 0 : _b[0]) && jsx$2(ListTag, { text: (_d = (_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase() }) })] }));
+                }, children: ((_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) && jsx$2(ListTag, { text: (_e = (_d = bill.tags) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.toUpperCase() }) })] }));
 };
 
 const MINUTE_IN_SECONDS = 60;
@@ -41466,25 +41491,6 @@ const getBillNftBatchData = (apiV2URL, billNftIds, billNftAddress, chainId) => _
     }
 });
 
-const defaultUrls = {
-    apiV2: 'https://api.ape.bond',
-    realTimeApi: 'https://realtime-api.ape.bond/bonds',
-    apeswapLists: 'https://raw.githubusercontent.com/ApeSwapFinance/apeswap-lists/main',
-    mainUrl: 'https://ape.bond',
-};
-const useSDKConfig = (config) => {
-    var _a;
-    const { data } = useQuery({
-        queryKey: [QUERY_KEYS.SDK_CONFIG],
-        initialData: Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.config), { urls: Object.assign(Object.assign({}, defaultUrls), (_a = config === null || config === void 0 ? void 0 : config.config) === null || _a === void 0 ? void 0 : _a.urls) }),
-    });
-    return data;
-};
-const useURLByEnvironment = (key) => {
-    const config = useSDKConfig();
-    return config === null || config === void 0 ? void 0 : config.urls[key];
-};
-
 function useBondNFTData(id, billNftAddress, chainId) {
     const apiV2URL = useURLByEnvironment('apiV2');
     return useQuery({
@@ -71308,8 +71314,9 @@ const MenuSelect = (_a) => {
             display: 'flex',
             width: '100%',
             paddingRight: '4px',
-        } }, props, { children: options === null || options === void 0 ? void 0 : options.map((option) => {
-            return (jsx$2(SelectItem, { size: "xsm", value: option.value, children: jsx$2(Text, { sx: { fontWeight: 400, pl: '10px' }, children: option.label }) }, option.label));
+            background: 'white2',
+        } }, props, { className: "dropdown", children: options === null || options === void 0 ? void 0 : options.map((option) => {
+            return (jsx$2(SelectItem, { size: "xsm", value: option.value, children: jsx$2(Text, { sx: { fontWeight: 400, pl: '10px' }, className: "menu-selector", children: option.label }) }, option.label));
         }) })));
 };
 
@@ -71352,7 +71359,7 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
                     alignItems: 'center',
                     width: '100%',
                     justifyContent: 'space-between',
-                }, onClick: () => setIsOpen(!isOpen), children: [jsx$2(Text, { sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})` }), jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (jsx$2(Flex, { sx: {
+                }, onClick: () => setIsOpen(!isOpen), className: "dropdown", children: [jsx$2(Text, { sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})` }), jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (jsx$2(Flex, { sx: {
                     flexDirection: ['column', 'column', 'column'],
                     position: 'absolute',
                     top: '45px',
@@ -71386,7 +71393,7 @@ const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, f
         setChainFilterOption(['All Chains']);
         setFilterOption(newOption);
     }, [setChainFilterOption, setFilterOption]);
-    return (jsxs("div", { className: "bonds-filters", children: [jsx$2("div", { className: "desktop-rec-container", children: jsx$2(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), jsx$2("div", { className: "mobile-rec-container", children: jsx$2(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) }), jsx$2("div", { className: "network-filter", children: jsx$2(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), jsxs("div", { className: "clear-all-button", onClick: () => {
+    return (jsxs("div", { className: "bonds-filters", children: [jsx$2("div", { className: "desktop-rec-container", children: jsx$2(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), jsx$2("div", { className: "mobile-rec-container", children: jsx$2(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters }) }), jsx$2("div", { className: "network-filter", children: jsx$2(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), jsxs("div", { className: "clear-all-button", onClick: () => {
                     setChainFilterOption(['All Chains']);
                     setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
                     onHandleQueryChange('');
@@ -71394,7 +71401,7 @@ const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, f
 };
 
 const YourBondsMenu = ({ chainFilterOption, setChainFilterOption, filterOptions, filterOption, setFilterOption, setInputValue, inputValue, handleSort, }) => {
-    return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container" })] })] })] }));
+    return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { className: "search-input", value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container" })] })] })] }));
 };
 
 const YourBonds = () => {
@@ -71596,8 +71603,8 @@ const remainingPercentage = (bond) => {
 };
 const getDiscountColor = (discount) => {
     if (!discount)
-        return 'white';
-    return discount < 0 ? '#DF4141' : '#38A611';
+        return '';
+    return discount < 0 ? 'discount-negative' : 'discount-positive';
 };
 const calculateARR = (bond) => {
     const discount2 = 'discount' in bond ? bond.discount : undefined;
@@ -72230,7 +72237,7 @@ const TokenSelectorModal = ({ bondPrincipalToken, bondEarnToken, handleCurrencyS
         const checksummedInput = isAddress(input);
         setSearchQuery(checksummedInput || input);
     }, [setSearchQuery]);
-    return (jsx$2(Modal, { onDismiss: onDismiss, title: "Tokens", children: jsx$2(Flex, { sx: {
+    return (jsx$2(Modal, { onDismiss: onDismiss, title: "Tokens", className: "token-selector-modal", children: jsx$2(Flex, { sx: {
                 flexDirection: 'column',
                 maxHeight: 'none',
                 height: 'auto',
@@ -72247,7 +72254,7 @@ const TokenSelectorModal = ({ bondPrincipalToken, bondEarnToken, handleCurrencyS
                         }) })] }) }) }));
 };
 
-const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId, handleMaxBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, bondEarnToken, }) => {
+const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, bondEarnToken, modalVariant, }) => {
     var _a, _b;
     const tokenBalanceString = tokenBalance ? new BigNumber$1(tokenBalance).toPrecision(5) : 'loading';
     const splited = typeof selectedToken !== 'string' ? (_a = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.symbol) === null || _a === void 0 ? void 0 : _a.split('-') : undefined;
@@ -72255,7 +72262,7 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId,
         setTypedValue(event.target.value);
     };
     const [onTokenSelectorModal] = useModal(jsx$2(TokenSelectorModal, { bondPrincipalToken: bondPrincipalToken, bondEarnToken: bondEarnToken, handleCurrencySelect: handleCurrencySelect, chainId: chainId }), true, false, `tokenSelectorOnLiquidityModal${(_b = bondPrincipalToken === null || bondPrincipalToken === void 0 ? void 0 : bondPrincipalToken.address) === null || _b === void 0 ? void 0 : _b[chainId]}-${bondPrincipalToken === null || bondPrincipalToken === void 0 ? void 0 : bondPrincipalToken.symbol}`);
-    return (jsxs(Flex$1, { className: "modaltable-container buy-container", children: [jsxs(Flex$1, { className: "input-container inputrow", children: [jsx$2(Flex$1, { className: "input-container input", children: jsx$2(Input$1, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
+    return (jsxs(Flex$1, { className: "token-selector-panel", children: [jsxs(Flex$1, { className: "input-container inputrow", children: [jsx$2(Flex$1, { className: "input-container input", children: jsx$2(Input$1, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
                                 if (v.currentTarget.value.includes(',')) {
                                     v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                 }
@@ -72269,7 +72276,9 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId,
                                     !!v.currentTarget.value && isNumber$1(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
                                         ? v.currentTarget.value
                                         : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
-                            } }) }), jsxs(Flex$1, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: { cursor: enableZap ? 'pointer' : 'default' }, children: [jsxs(Flex$1, { children: [jsx$2(Flex$1, { className: "input-container bondicon", children: lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx$2(TokenImage, { symbol: getSymbol(selectedToken, chainId), size: 28, chain: chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: getSymbol(selectedToken, chainId) })] }), enableZap && (jsx$2(Flex$1, { sx: { mr: '8px' }, children: jsx$2(Svg, { icon: "caret" }) }))] })] }), tokenBalance && (jsxs(Flex$1, { className: "input-container balancerow", children: [jsx$2(Flex$1, { children: selectedTokenPrice && typedValue ? `$${(selectedTokenPrice * parseFloat(typedValue)).toFixed(2)}` : '' }), jsxs(Flex$1, { children: [jsxs(Flex$1, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsx$2(Flex$1, { className: "balancerow max", children: tokenBalance !== '0' && handleMaxBtn && (jsx$2(Button, { className: "max-button", onClick: handleMaxBtn, children: "Max" })) })] })] }))] }));
+                            } }) }), jsxs(Flex$1, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: { cursor: enableZap ? 'pointer' : 'default' }, children: [jsxs(Flex$1, { children: [jsx$2(Flex$1, { className: "input-container bondicon", children: lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx$2(TokenImage, { symbol: getSymbol(selectedToken, chainId), size: 28, chain: chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: getSymbol(selectedToken, chainId) })] }), enableZap && (jsx$2(Flex$1, { sx: { mr: '8px' }, children: jsx$2(Svg, { icon: "caret" }) }))] })] }), jsxs(Flex$1, { className: "input-container balancerow", children: [jsx$2(Flex$1, { children: selectedTokenPrice && typedValue
+                            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`
+                            : '' }), jsxs(Flex$1, { children: [jsxs(Flex$1, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsxs(Flex$1, { className: "balancerow max", children: [tokenBalance && tokenBalance !== '0' && handleValueBtn && modalVariant !== 'alt' && (jsx$2(Fragment$1, { children: jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" }) })), tokenBalance && tokenBalance !== '0' && handleValueBtn && modalVariant === 'alt' && (jsxs(Flex$1, { children: [jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) / 4).toString()), children: "25%" }), jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) / 2).toString()), children: "50%" }), jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) * 0.75).toString()), children: "75%" }), jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" })] }))] })] })] })] }));
 };
 
 var NetworkNames;
@@ -72863,7 +72872,7 @@ const ZapModal = ({ onDismiss, outputToken, account, chainId }) => {
             });
         });
     };
-    return (jsxs(Modal, { children: [jsx$2(ModalHeader, { onDismiss: onDismiss, children: jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '30px' }, children: ["Zap ", jsx$2(Svg, { icon: "ZapIcon" })] }), jsx$2(Flex, { onClick: onOpenSlippageModal, sx: { mr: '15px' }, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', pt: '10px', gap: '10px' }, children: [jsx$2(Flex, { sx: { position: 'relative' }, children: jsx$2(Text, { children: "From:" }) }), jsx$2(Flex, { sx: { width: '100%', height: 'auto', justifyContent: 'space-between' }, children: jsx$2(TokenSelectorPanel, { typedValue: typedValue, setTypedValue: setTypedValue, selectedToken: inputToken, handleMaxBtn: handleMaxInput, handleCurrencySelect: handleCurrencySelect, chainId: chainId, enableZap: true, tokenBalance: inputTokenBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, bondEarnToken: outputToken }) }), jsxs(Flex, { sx: { position: 'relative', mt: '10px' }, children: [jsx$2(Text, { children: "To:" }), jsx$2(Box$1, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsx$2(Svg, { icon: "ZapArrow" }) })] }), jsx$2(TokenSelectorPanel, { typedValue: isWrap ? typedValue : outputValue === 0 ? '' : outputValue.toFixed(18), setTypedValue: () => null, selectedToken: outputToken, handleCurrencySelect: () => null, chainId: chainId, enableZap: false, tokenBalance: outputTokenBalanceString, selectedTokenPrice: outputTokenPrice === null || outputTokenPrice === void 0 ? void 0 : outputTokenPrice.price }), jsx$2(Flex, { className: "button-container zap", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== chainId ? (jsxs(Button, { className: "switch-button zap", onClick: (event) => {
+    return (jsxs(Modal, { children: [jsx$2(ModalHeader, { onDismiss: onDismiss, children: jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '30px' }, children: ["Zap ", jsx$2(Svg, { icon: "ZapIcon" })] }), jsx$2(Flex, { onClick: onOpenSlippageModal, sx: { mr: '15px' }, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', pt: '10px', gap: '10px' }, children: [jsx$2(Flex, { sx: { position: 'relative' }, children: jsx$2(Text, { children: "From:" }) }), jsx$2(Flex, { sx: { width: '100%', height: 'auto', justifyContent: 'space-between' }, children: jsx$2(TokenSelectorPanel, { typedValue: typedValue, setTypedValue: setTypedValue, selectedToken: inputToken, handleValueBtn: handleMaxInput, handleCurrencySelect: handleCurrencySelect, chainId: chainId, enableZap: true, tokenBalance: inputTokenBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, bondEarnToken: outputToken }) }), jsxs(Flex, { sx: { position: 'relative', mt: '10px' }, children: [jsx$2(Text, { children: "To:" }), jsx$2(Box$1, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsx$2(Svg, { icon: "ZapArrow" }) })] }), jsx$2(TokenSelectorPanel, { typedValue: isWrap ? typedValue : outputValue === 0 ? '' : outputValue.toFixed(18), setTypedValue: () => null, selectedToken: outputToken, handleCurrencySelect: () => null, chainId: chainId, enableZap: false, tokenBalance: outputTokenBalanceString, selectedTokenPrice: outputTokenPrice === null || outputTokenPrice === void 0 ? void 0 : outputTokenPrice.price }), jsx$2(Flex, { className: "button-container zap", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== chainId ? (jsxs(Button, { className: "switch-button zap", onClick: (event) => {
                                 event.stopPropagation();
                                 switchChain({ chainId: chainId });
                             }, children: ["Switch to ", NETWORK_LABEL[chainId]] })) : approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING ? (jsx$2(Button, { onClick: handleApprove, fullWidth: true, load: approvalState === ApprovalState.PENDING, disable: approvalState === ApprovalState.PENDING, children: pendingTx || approvalState === ApprovalState.PENDING ? 'ENABLING' : 'ENABLE' })) : (jsx$2(Button, { onClick: soulZapCallback, fullWidth: true, load: pendingTx || fetchingQuote || isConfirming, disabled: pendingTx || fetchingQuote || !zapData || !hasEnoughBalance || isConfirming || zapError, children: zapError
@@ -72875,15 +72884,11 @@ const ZapModal = ({ onDismiss, outputToken, account, chainId }) => {
                                         : 'BUY' })) }), jsx$2(Flex, { sx: { marginTop: '10px', justifyContent: 'center' }, children: jsx$2(Link, { href: "https://docs.ape.bond/apebond/products-and-features/zap", target: "_blank", rel: "noopener noreferrer", sx: { textDecoration: 'none' }, children: jsxs(Text, { style: { fontSize: '12px', lineHeight: '18px', fontWeight: 400, borderBottom: '1px solid' }, children: ["Learn more", '>'] }) }) })] })] }));
 };
 
-const AccordionText = ({ title, body, isVisible = false }) => {
-    const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
-    const toggleDropdown = () => {
-        setIsDropdownExpanded(!isDropdownExpanded);
-    };
+const AccordionText = ({ isVisible = false }) => {
     if (!isVisible) {
         return null;
     }
-    return (jsxs(Fragment$1, { children: [jsxs(Flex, { className: "accordion-header", onClick: toggleDropdown, children: [jsx$2(Flex, { className: "accordion-title", children: title }), jsx$2(Flex, { className: "accordion-icon", children: jsx$2(Svg, { icon: "caret", direction: isDropdownExpanded ? 'down' : 'up' }) })] }), jsx$2(AnimatePresence, { children: isDropdownExpanded && (jsx$2(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: jsx$2(Flex, { className: "accordion-body", children: body }) })) })] }));
+    return (jsxs(Fragment$1, { children: [jsx$2(Flex, { className: "accordion-title", children: "Bonds at Seedify are an exciting new product!" }), jsx$2(AnimatePresence, { children: jsx$2(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: jsxs(Flex, { className: "accordion-body", sx: { flexDirection: 'column' }, children: [jsx$2(Flex, { sx: { mt: '10px' }, children: "Are you a strong believer in a project? Do you want to buy project tokens at a discount compared to the market? If so, you've arrived at the right place!" }), jsx$2(Flex, { sx: { mt: '10px' }, children: "Bonds allow you to purchase project tokens at a discounted price with a short-term linear vesting. Its a perfect solution for projects you're planning to buy and hold tokens of!" }), jsx$2(Flex, { sx: { mt: '10px' }, children: "When you buy a Bond, you essentially are given an NFT (which you can transfer across your wallets). Whichever wallet owns the NFT will be able to Claim tokens of that project post-purchase until vesting period ends. Bonds at Seedify can range their vesting from 7 Days to 90 Days, with 30 Days being the standard." })] }) }) })] }));
 };
 
 const useSoulZapBondQuote = (typedValue, inputCurrency, bond, account) => {
@@ -73098,7 +73103,7 @@ const SafeHTMLComponent = ({ html }) => {
 
 const ProjectDescription = ({ description }) => {
     const [isOpen, setIsOpen] = useState(false);
-    return (jsxs(Flex, { className: "modaltable-container description-container", children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx$2(Text, { sx: {
+    return (jsxs(Flex, { className: "description-container", children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx$2(Text, { sx: {
                             fontSize: ['12px', '12px', '12px', '14px'],
                             mt: '10px',
                             lineHeight: ['18px', '18px', '18px', '21px'],
@@ -73122,16 +73127,65 @@ const BondModalHeaderAlt = ({ bondData, onDismiss, showProjectInfoButton, }) =>
         }
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     };
-    return (jsx$2(Flex, { className: "modaltable-container title-container", children: jsx$2(Flex, { className: "slipagge-close-icons", sx: { flexDirection: 'row' }, children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mb: '-5px', pr: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose })] })) : (jsx$2(Flex, { sx: {}, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) }) }));
+    // const handleProjectViewNavigation = () => {
+    //   window.open(`${window.location.origin}/bonds/${bondData.billAddress}/${bondData.chainId}`, '_self')
+    //   track({
+    //     event: 'projectInfoClick',
+    //     chain: bondData.chainId,
+    //     data: {
+    //       cat: 'Modal',
+    //       bond: bondData.earnToken.symbol,
+    //       bondChain: bondData.chainId,
+    //     },
+    //   })
+    // }
+    return (jsx$2(Flex, { className: "modaltable-container title-container", children: jsx$2(Flex, { className: "slipagge-close-icons", sx: { flexDirection: 'row' }, children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { pr: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose })] })) : (jsx$2(Flex, { sx: {}, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) }) }));
+};
+
+const ImageAndShortDescription = ({ bondData, onDismiss }) => {
+    var _a;
+    const SDKConfig = useSDKConfig();
+    // Swiper logic for the alt view
+    const [activeSlide, setActiveSlide] = useState(0);
+    const { swiper, setSwiper } = useSwiper();
+    const imagesLength = 3;
+    const handleSlide = (event) => {
+        const slideNumber = getDotPos(event.activeIndex, imagesLength);
+        setActiveSlide(slideNumber);
+    };
+    const slideTo = (index) => {
+        setActiveSlide(index);
+        swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
+    };
+    return (jsxs(Flex, { sx: { maxWidth: ['unset', 'unset', 'unset', '500px'], flexDirection: 'column', alignItems: 'center' }, children: [jsxs(Flex, { sx: {
+                    flexDirection: 'column',
+                    width: '100%',
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                    position: 'relative',
+                }, children: [jsxs(Swiper, { id: "hotbondsSweper", onSwiper: setSwiper, slidesPerView: "auto", centeredSlides: true, lazy: true, preloadImages: false, onSlideChange: handleSlide, style: { width: '100%', overflow: 'visible' }, children: [jsx$2(SwiperSlide, { style: {
+                                    width: '100%',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 0), jsx$2(SwiperSlide, { style: {
+                                    width: '100%',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 1), jsx$2(SwiperSlide, { style: {
+                                    width: '100%',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 2)] }), jsx$2(Flex, { sx: { position: 'absolute', bottom: ['15px', '15px', '15px', '20px'], left: 'calc(50% - 28,5px)', zIndex: 2 }, children: [...Array(imagesLength)].map((_, i) => {
+                            return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
+                        }) })] }), jsxs(Flex, { sx: { alignItems: 'center', display: ['flex', 'flex', 'flex', 'none'], p: '10px', width: '100%' }, children: [jsxs(Flex, { sx: { width: ['50%', '50%', '50%', '100%'], alignItems: 'center' }, children: [jsx$2(Flex, { sx: { mr: '5px' }, children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 30, chain: bondData.chainId }) }), jsxs("h2", { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' '] })] }), jsx$2(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'flex-end', alignItems: 'center' }, children: jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }) }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsx$2(Flex, { className: "description-container paragraph-spaced", sx: { px: '10px', opacity: 0.7, mt: ['0', '0', '0', '10px'] }, children: jsx$2(ProjectDescription, { description: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription }) })] }));
 };
 
-const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, 
-// ??
-accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = false, }) => {
+const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const SDKConfig = useSDKConfig();
     // State
     const [modalVariant, setModalVariant] = useState(SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.modalVariant);
+    const [accordionVisible, setAccordionVisible] = useState(false);
     // Hooks
     const userChainId = useChainId();
     const { address: account } = useAccount();
@@ -73316,7 +73370,7 @@ 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", onDismiss: onDismiss, children: modalVariant === 'standard' ? (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content", children: [typeof window !== 'undefined' && 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, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), 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) ? handleOpenZapModal() : 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", onDismiss: onDismiss, children: modalVariant === 'standard' ? (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content", children: [typeof window !== 'undefined' && 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, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), 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, handleValueBtn: () => { 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) ? handleOpenZapModal() : 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 });
                                             }, 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 ||
@@ -73329,15 +73383,35 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = f
                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                 !account ||
                                                 !inputValue ||
-                                                parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] }), 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: [typeof window !== 'undefined' && 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: "bondmodal-header-alt", sx: { mb: '20px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) }), 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: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _k !== void 0 ? _k : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_l = bondData.showcaseTokenName) !== null && _l !== void 0 ? _l : 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: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : 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 });
-                                                            }, children: `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsxs(Button, { className: "action-button", load: load, disabled: load || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account || !inputValue || parseFloat(inputValue) === 0, onClick: handleBothPurchases, children: ["buy ", isZap ? 'zap' : 'normal'] })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
-                                                                (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
-                                                                !account ||
-                                                                !inputValue ||
-                                                                parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] }), 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((_o = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _o !== void 0 ? _o : 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: handleApprove, children: "enable" })) })] })] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Fragment$1, { children: [jsxs(Flex, { className: "modal-content font-small", children: [typeof window !== 'undefined' && 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" })] })), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: ['0px', '0px', '0px', '20px'] }, children: [jsx$2(ImageAndShortDescription, { bondData: bondData, onDismiss: onDismiss }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center', display: ['none', 'none', 'none', 'flex'] }, children: [jsx$2(Flex, { sx: { width: ['50%', '50%', '50%', '50%'], ml: ['0px', '0px', '0px', '10px'] }, children: jsxs(Flex, { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [jsx$2(Flex, { sx: { fontSize: '26px', fontWeight: 700, mr: '4px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), jsx$2(Svg, { width: 20, height: 20, icon: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _k !== void 0 ? _k : 'question' })] }) }), jsxs(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: (_l = bondData.showcaseTokenName) !== null && _l !== void 0 ? _l : bondData.earnToken.symbol, size: 30 }), jsx$2("span", { className: "modal-marketprice-token", children: bondData.earnToken.symbol }), jsx$2("hr", { className: "fading-hr rotate-hr" }), jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }), jsx$2("hr", { className: "fading-hr rotate-hr" })] }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px', mx: '10px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: (value) => setInputValue(value), 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, modalVariant: modalVariant }), jsxs(Flex, { className: "modal-youreceive-row", sx: { justifyContent: 'space-between', alignItems: 'center', fontSize: '14px' }, children: [jsxs(Flex, { className: "modal-youreceive-textbox", children: [jsx$2(Flex, { sx: { opacity: 0.8 }, children: "You will receive:" }), jsxs(Flex, { children: [jsx$2(Flex, { className: "modal-youreceive-tokenimage", sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : bondData.earnToken.symbol, size: 20 }) }), jsxs(Flex, { className: "modal-receive-text", sx: { opacity: 0.8 }, children: [formatNumber$2((lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0)), ' ', bondData.earnToken.symbol, " + \u00A0", formatNumber$2((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 });
+                                                                    }, children: `Switch Chain` })) : approvalState === ApprovalState.APPROVED ? (jsxs(Button, { className: "action-button", load: load, disabled: load || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account || !inputValue || parseFloat(inputValue) === 0, onClick: handleBothPurchases, children: ["buy", ' ', isZap ? (jsx$2("span", { style: { marginLeft: '8px' }, children: jsx$2(Svg, { icon: "ZapIcon" }) })) : ('')] })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
+                                                                        (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
+                                                                        !account ||
+                                                                        !inputValue ||
+                                                                        parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] }), jsx$2(Flex, { sx: { width: '100%', margin: ['0', '0', '0', '10px 0'] }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%', fontSize: '14px', display: ['none', 'none', 'none', 'flex'] }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column', opacity: 0.8 }, 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', opacity: 0.8 }, children: ["If purchased from market:", ' ', formatNumber$2((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:" }), ' ', formatNumber$2(youGet(bondData, inputValue).toFixed(0)), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] }), jsxs(Flex, { sx: {
+                                                            width: '100%',
+                                                            fontSize: '14px',
+                                                            display: ['flex', 'flex', 'flex', 'none'],
+                                                            flexDirection: 'column',
+                                                        }, children: [jsxs(Flex, { sx: { opacity: 0.8 }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString())] }), jsxs(Flex, { sx: { opacity: 0.8 }, children: ["If purchased from market:", ' ', formatNumber$2((lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0)), ' ', bondData.earnToken.symbol] }), jsxs(Flex, { sx: { mt: '10px' }, children: [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), "%)"] })] }), jsxs(Flex, { sx: { mt: '10px' }, children: [jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', formatNumber$2(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: '100%', flexDirection: 'row', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: {
+                                                    width: '100%',
+                                                    justifyContent: 'center',
+                                                    flexDirection: ['column', 'column', 'column', 'row'],
+                                                }, children: [jsx$2(Flex, { className: "modal-footer-header", children: "Vesting start Date:\u00A0" }), jsxs(Flex, { children: [' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date())] })] }), jsxs(Flex, { sx: {
+                                                    width: '100%',
+                                                    justifyContent: 'center',
+                                                    flexDirection: ['column', 'column', 'column', 'row'],
+                                                }, children: [jsx$2(Flex, { className: "modal-footer-header", sx: { justifyContent: ['flex-end', 'flex-end', 'flex-end', 'flex-start'] }, children: "Vesting end Date:\u00A0" }), jsxs(Flex, { sx: { justifyContent: ['flex-end', 'flex-end', 'flex-end', 'flex-start'] }, children: [' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_o = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _o !== void 0 ? _o : 0).days * 86400000))] })] })] }), jsx$2("hr", { className: "fading-hr hide-mobile" }), jsxs(Flex, { sx: {
+                                            width: '100%',
+                                            justifyContent: ['space-between', 'space-between', 'space-between', 'space-around'],
+                                        }, children: [jsxs(Flex, { sx: { justifyContent: 'center', flexDirection: ['column', 'column', 'column', 'row'] }, children: [jsx$2(Flex, { className: "modal-footer-header", children: "Vesting type:\u00A0" }), " ", jsx$2(Flex, { children: " Linear" })] }), jsxs(Flex, { sx: {
+                                                    justifyContent: 'center',
+                                                    cursor: 'pointer',
+                                                    alignItems: 'center',
+                                                }, onClick: () => setAccordionVisible(!accordionVisible), className: "modal-expander", children: ["What are bonds? \u00A0 ", jsx$2(Svg, { icon: "caret", direction: accordionVisible ? 'up' : 'down' })] })] })] })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { isVisible: accordionVisible }) }))] })) })) }));
 };
 
 /*
@@ -73570,7 +73644,7 @@ const BondRow = ({ bond }) => {
         const tokens = new BigNumber$1(tokensRemaining);
         return tokens.times(payoutTokenPrice);
     };
-    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container", children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: "discount-column", 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: {
+    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container bond-market", children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: `discount-column ${getDiscountColor(discount)}`, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' }), jsx$2("div", { className: "arr-column", children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' }), jsx$2("div", { className: "terms-column", children: ((_a = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _a === void 0 ? void 0 : _a.days) ? `${(_b = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _b === void 0 ? void 0 : _b.days} D` : '-' }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
@@ -73579,7 +73653,7 @@ const BondRow = ({ bond }) => {
                             }, showTooltip: true, toolTip: `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} (${formatDollar({
                                 num: remainingTokensUsd(bond).toNumber(),
                                 isPrice: true,
-                            })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_e = (_d = (_c = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _e !== void 0 ? _e : '', earnTokenSymbol: (_g = (_f = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _f === void 0 ? void 0 : _f.symbol) !== null && _g !== void 0 ? _g : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
+                            })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_e = (_d = (_c = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _e !== void 0 ? _e : '', earnTokenSymbol: (_g = (_f = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _f === void 0 ? void 0 : _f.symbol) !== null && _g !== void 0 ? _g : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
 };
 
 const HotBondCard = ({ bond }) => {
@@ -73598,7 +73672,7 @@ const HotBondCard = ({ bond }) => {
             },
         });
     };
-    return (jsx$2(Flex, { sx: styles$a.desktopCard, onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Discount" }), jsx$2(Flex, { className: `${getDiscountColor(discount)}`, sx: { width: '100%', justifyContent: 'center' }, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
+    return (jsx$2(Flex, { sx: styles$a.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Discount" }), jsx$2(Flex, { className: `${getDiscountColor(discount)}`, sx: { width: '100%', justifyContent: 'center' }, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
 };
 
 function useHotBondContracts() {
@@ -73695,7 +73769,7 @@ const BondRowsByChain = ({ bonds, hideTitles }) => {
     const SDKConfig = useSDKConfig();
     const validatedChains = (_a = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _a === void 0 ? void 0 : _a.filter((chain) => MAINNET_CHAINS.includes(chain));
     return (jsx$2(Flex$1, { className: "bondrowsbychain", children: validatedChains === null || validatedChains === void 0 ? void 0 : validatedChains.map((chain) => {
-            return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hideTitles: hideTitles, showHotBonds: chain === types.ChainId.BASE || chain === types.ChainId.MAINNET }, chain));
+            return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hideTitles: hideTitles, showHotBonds: SDKConfig.useHotBonds ? chain === types.ChainId.BASE || chain === types.ChainId.MAINNET : false }, chain));
         }) }));
 };
 
@@ -73743,7 +73817,7 @@ const BuyAgainRow = () => {
                     background: 'linear-gradient(0deg, rgba(170, 128, 249, 0.20) 0%, rgba(170, 128, 249, 0.20) 100%), var(--Neutral-Elevation-2, #1F1D29)',
                     borderRadius: 'normal',
                     flexDirection: 'column',
-                }, children: [jsx$2(Flex, { sx: {
+                }, children: [jsx$2(Flex, { className: "buy-again-header", sx: {
                             width: '100%',
                             fontSize: '12px',
                             fontWeight: 500,
@@ -73786,7 +73860,7 @@ const styles$7 = {
 const SmallRecommendationCard = ({ recommendation }) => {
     var _a;
     const vestingTime = getTimePeriods((_a = recommendation.vestingTerm) !== null && _a !== void 0 ? _a : 0, true);
-    return (jsxs(Flex, { sx: styles$7.smallCardContainer, onClick: () => window.open(`${window.location.origin}/bonds/${recommendation.contractAddress}/${recommendation.chainId}`, '_self'), children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx$2(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles$7.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: styles$7.subTitle, children: "Discount" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.discount > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.discount.toFixed(2), "%"] })] })] }));
+    return (jsxs(Flex, { sx: styles$7.smallCardContainer, onClick: () => window.open(`${window.location.origin}/bonds?bondAddress=${recommendation.contractAddress}&bondChain=${recommendation.chainId}`, '_self'), children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx$2(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles$7.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: styles$7.subTitle, children: "Discount" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.discount > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.discount.toFixed(2), "%"] })] })] }));
 };
 
 const RecommendationCards$1 = () => {
@@ -73848,7 +73922,7 @@ const FavIcon = ({ filterOption, setFilterOption, }) => {
     const handleFilterOption = (newOption) => {
         setFilterOption(newOption);
     };
-    return (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }, onClick: () => {
+    return (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }, className: "search-fav-icon", onClick: () => {
             handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL');
         }, children: jsx$2(AnimatePresence, { mode: "wait", children: jsx$2(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex', alignItems: 'center' }, children: filterOption === 'FAVORITES' ? (jsx$2(Svg, { icon: "StarFilled", width: 22, height: 22 })) : (jsx$2(Svg, { icon: "Star", width: 20, height: 20 })) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
 };
@@ -73871,6 +73945,7 @@ const Bonds = () => {
     const { data: allBonds } = useBondsList();
     const { data: chainFilterOption, setChainFilterOption } = useChainFilterOption();
     const { data: tokenPrices } = useTokenPrices();
+    const SDKConfig = useSDKConfig();
     useEffect(() => {
         //@ts-ignore
         if ((bondData === null || bondData === void 0 ? void 0 : bondData.length) === 0 && (tokenPrices === null || tokenPrices === void 0 ? void 0 : tokenPrices.length) > 0 && (allBonds === null || allBonds === void 0 ? void 0 : allBonds.length) > 0) {
@@ -73884,7 +73959,7 @@ const Bonds = () => {
     const [filterOption, setFilterOption] = useState('ALL');
     const sortedBonds = sortBonds(sortConfig, bondData);
     const topTags = useTopTags(sortedBonds);
-    const filterOptions = ['ALL', 'FAVORITES', ...topTags, 'SOLD OUT'];
+    const filterOptions = SDKConfig.referenceId !== 'seedify' ? ['ALL', 'FAVORITES', ...topTags, 'SOLD OUT'] : ['ALL', ...topTags, 'SOLD OUT'];
     const billsToRender = useMemo(() => {
         let billsToReturn = filterOption === 'SOLD OUT' ? (allBonds !== null && allBonds !== void 0 ? allBonds : []) : (sortedBonds !== null && sortedBonds !== void 0 ? sortedBonds : []);
         if (searchQuery) {
@@ -90504,7 +90579,7 @@ const ProjectView = ({ bondAddress, bondChain, historicalPrices }) => {
                                         p: '20px',
                                         borderRadius: '10px',
                                         mt: '5px',
-                                    }, children: [jsx$2(BondModalHeader, { bondData: bondData }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), 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) ? handleOpenZapModal() : 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) => {
+                                    }, children: [jsx$2(BondModalHeader, { bondData: bondData }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), 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, handleValueBtn: () => { 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) ? handleOpenZapModal() : 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 });
                                                         }, 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 ||

package/dist/state/useSDKConfig.d.ts

@@ -3,6 +3,7 @@ export interface SDKProps {
         referenceId: string;
         chains: number[];
         useRainbowKit: boolean;
+        useHotBonds: boolean;
         modalVariant: 'alt' | 'standard';
         urls?: Partial<Record<URLKeys, string>>;
     };
@@ -17,6 +18,7 @@ export declare const useSDKConfig: (config?: SDKProps) => {
     referenceId?: string | undefined;
     chains?: number[] | undefined;
     useRainbowKit?: boolean | undefined;
+    useHotBonds?: boolean | undefined;
     modalVariant?: "alt" | "standard" | undefined;
 };
 export type URLKeys = 'apiV2' | 'realTimeApi' | 'apeswapLists' | 'mainUrl';

package/dist/styles.css

@@ -133,6 +133,17 @@
 
 .modal {
   width: fit-content !important;
+  max-width: 95%;
+}
+
+.project-image {
+  border-radius: 6px;
+  width: 100%;
+}
+@media (min-width: 1100px) {
+  .project-image {
+    width: 475px;
+  }
 }
 
 .modal-content {
@@ -147,10 +158,6 @@
   min-width: 700px;
 }
 
-.gpt {
-  max-width: 1100px;
-}
-
 .modaltable-container {
   width: 100%;
   display: flex;
@@ -251,11 +258,10 @@
 .modaltable-container.description-container {
   display: flex;
   align-items: flex-start;
-  padding-top: 10px;
-  padding-bottom: 10px;
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
+  padding: 10px 0;
 }
 
 .modaltable-container.blocks-container {
@@ -389,7 +395,7 @@
   flex-direction: column;
   background: var(--theme-ui-colors-white3);
   border-radius: 10px;
-  min-height: 92px;
+  min-height: 96px;
   padding: 10px;
 }
 
@@ -438,7 +444,7 @@
   border-radius: 10px;
   border: medium;
   padding-right: 10px;
-  width: 80%;
+  width: 100%;
   height: 50px;
   font-size: 22px;
 }
@@ -463,6 +469,10 @@
   justify-content: space-between;
 }
 
+.input-container.bondicon {
+  margin-left: 5px;
+}
+
 .modaltable-container.button-container {
   width: 100%;
   padding-top: 10px;
@@ -498,8 +508,18 @@
 
 .modaltable-container.accordion-container {
   display: flex;
+  position: absolute;
+  padding: 30px 50px;
+  background: #12131A;
   width: 100%;
-  padding-top: 10px;
+  border-radius: 0 0 10px 10px;
+  gap: 10px !important;
+}
+@media (min-width: 1100px) {
+  .modaltable-container.accordion-container {
+    width: 90%;
+    left: 5%;
+  }
 }
 
 .toast {
@@ -575,18 +595,14 @@
   margin: 20px 0; /* Adjust margin for spacing */
 }
 
-span.flex-inline {
-  display: contents;
+.rotate-hr {
+  rotate: 90deg;
+  margin: 0px !important;
+  width: 20px !important;
 }
 
-.footer-details {
-  margin-left: -20px !important;
-  margin-right: -20px !important;
-  margin-bottom: -20px !important;
-  margin-top: 20px !important;
-  height: 50px;
-  align-items: center;
-  border-top: 1px solid #FFFFFF;
+span.flex-inline {
+  display: contents;
 }
 
 .expand-icon {
@@ -594,6 +610,24 @@ span.flex-inline {
   fill: #38A611;
 }
 
+.modal-receive-text {
+  padding-left: 5px;
+  font-size: 14px;
+}
+
+.bondmodal-header-alt {
+  padding-left: 50px;
+  margin: 0px 0px 10px 0px !important;
+}
+
+.token-selector-panel {
+  flex-direction: column;
+  border-radius: 10px;
+  background: var(--theme-ui-colors-white3);
+  padding: 10px;
+  min-height: 92px;
+}
+
 .bond-row {
   display: flex;
   flex-direction: row;
@@ -1286,7 +1320,6 @@ span.flex-inline {
   flex-direction: column;
   border-radius: 10px;
   background-color: var(--theme-ui-colors-white2);
-  border-radius: 10px;
   z-index: 1001;
   max-width: 1200px;
   min-width: 1000px;

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

@@ -4,9 +4,6 @@ export interface BondModalProps {
     bondAddress?: string;
     bondChain?: number;
     handlePurchasedBond?: (hash: string) => void;
-    accordionTitle?: string;
-    accordionBody?: string;
-    accordionVisible?: boolean;
 }
 declare const BondModal: React.FC<BondModalProps>;
 export default BondModal;

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

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

package/package.json

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