@ape.swap/bonds-sdk 3.0.23 → 3.0.24

package/dist/config/constants/chains.d.ts

@@ -1,6 +1,7 @@
 import { icons } from '../../components/uikit-sdk/Svg/types';
 import { ChainId } from '@ape.swap/apeswap-lists';
 export declare const MAINNET_CHAINS: ChainId[];
+export declare const TESTNET_CHAINS: ChainId[];
 export declare const NETWORK_ICONS: Partial<Record<number, icons>>;
 export declare const NETWORK_LABEL: Record<number, string>;
 export declare const BLOCK_EXPLORER: Record<number, string>;

package/dist/main.js

@@ -18659,9 +18659,10 @@ const MAINNET_CHAINS = [
     types.ChainId.AVAX,
     types.ChainId.BLAST,
     types.ChainId.CROSSFI,
-    types.ChainId.MONAD_TESTNET,
     types.ChainId.SONIC,
+    types.ChainId.MONAD_TESTNET,
 ];
+const TESTNET_CHAINS = [types.ChainId.MONAD_TESTNET];
 // Network Icons
 const NETWORK_ICONS = {
     [types.ChainId.BSC]: icons.BNB_TOKEN,
@@ -71536,15 +71537,30 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
     // Hooks
     const SDKConfig = useSDKConfig();
     const chains = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains;
+    const mainnetChains = chains.filter((item) => !TESTNET_CHAINS.includes(item));
+    const testnetChains = chains.filter((item) => TESTNET_CHAINS.includes(item));
     // State
     const [isOpen, setIsOpen] = useState(false);
     // Handlers
     const handleCheckbox = (newChain) => {
-        const prevChainFilterOptions = chainFilterOption;
+        const prevChainFilterOptions = chainFilterOption.map(String);
         let newChainFilterOption;
         if (newChain === 'All Chains') {
             newChainFilterOption = ['All Chains'];
         }
+        else if (newChain === 'All Testnet') {
+            if (prevChainFilterOptions.includes('All Testnet')) {
+                newChainFilterOption = prevChainFilterOptions.filter((option) => ![...testnetChains.map((t) => t.toString()), 'All Testnet'].includes(option));
+            }
+            else {
+                newChainFilterOption = [
+                    ...prevChainFilterOptions.filter((option) => option !== 'All Chains'),
+                    ...testnetChains.map((t) => t.toString()),
+                    'All Testnet',
+                ];
+            }
+            newChainFilterOption = newChainFilterOption.length === 0 ? ['All Chains'] : newChainFilterOption;
+        }
         else {
             if (prevChainFilterOptions.includes(newChain)) {
                 const filteredChains = prevChainFilterOptions.filter((option) => option !== newChain);
@@ -71552,8 +71568,8 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
             }
             else {
                 const newArray = [...prevChainFilterOptions.filter((option) => option !== 'All Chains'), newChain];
-                const allChainsArePresent = MAINNET_CHAINS.every((chain) => newArray.includes(chain.toString()));
-                newChainFilterOption = allChainsArePresent ? ['All Chains'] : newArray;
+                const allMainnetsSelected = MAINNET_CHAINS.every((chain) => newArray.includes(chain.toString()));
+                newChainFilterOption = allMainnetsSelected ? ['All Chains'] : newArray;
             }
         }
         setChainFilterOption(newChainFilterOption);
@@ -71576,7 +71592,7 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
                     alignItems: 'center',
                     width: '100%',
                     justifyContent: 'space-between',
-                }, 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: {
+                }, 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 && (jsxs(Flex, { sx: {
                     flexDirection: ['column', 'column', 'column'],
                     position: 'absolute',
                     top: '45px',
@@ -71587,15 +71603,25 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
                     borderRadius: 'normal',
                     background: 'white2',
                     zIndex: 1001,
-                }, children: ['All Chains', ...chains].map((chainId) => {
-                    return (jsx$2(Flex, { sx: {
-                            borderRadius: 'normal',
-                            p: '5px 15px',
-                            minHeight: '40px',
-                            cursor: 'pointer',
-                            '&:hover': { bg: 'white3' },
-                        }, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [jsx$2(Checkbox, { checked: chainFilterOption.includes(chainId.toString()) }), chainId === 'All Chains' ? (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mx: '8px' }, children: jsx$2(Svg, { icon: "AllChains", width: "22px" }) }), jsx$2(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Chains" })] })) : (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: jsx$2(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) }), jsx$2(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
-                }) }))] }));
+                }, children: [['All Chains', ...mainnetChains].map((chainId) => {
+                        return (jsx$2(Flex, { sx: {
+                                borderRadius: 'normal',
+                                p: '5px 15px',
+                                minHeight: '40px',
+                                cursor: 'pointer',
+                                '&:hover': { bg: 'white3' },
+                            }, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [jsx$2(Checkbox, { checked: chainFilterOption.includes(chainId.toString()) }), chainId === 'All Chains' ? (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mx: '8px' }, children: jsx$2(Svg, { icon: "AllChains", width: "22px" }) }), jsx$2(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Chains" })] })) : (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: jsx$2(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) }), jsx$2(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
+                    }), testnetChains.length > 0 &&
+                        ['All Testnet', ...testnetChains].map((chainId) => {
+                            return (jsx$2(Flex, { sx: {
+                                    borderRadius: 'normal',
+                                    p: '5px 15px',
+                                    minHeight: '40px',
+                                    cursor: 'pointer',
+                                    '&:hover': { bg: 'white3' },
+                                    pl: chainId !== 'All Testnet' ? '35px' : '15px',
+                                }, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [jsx$2(Checkbox, { checked: chainFilterOption.includes(chainId.toString()) }), chainId === 'All Testnet' ? (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mx: '8px' }, children: jsx$2(Svg, { icon: "AllChains", width: "22px" }) }), jsx$2(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Testnet" })] })) : (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: jsx$2(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) }), jsx$2(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
+                        })] }))] }));
 };
 
 const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, filterOption, setFilterOption, onHandleQueryChange, }) => {
@@ -76728,7 +76754,7 @@ const GetUpToComponent = ({ bond, depositAmount }) => {
 };
 
 const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isProjectView }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const SDKConfig = useSDKConfig();
     const { data: geoData } = useGeoFencing();
     // Hooks
@@ -76759,6 +76785,7 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
     const inputToken = useTokenFromZapList(inputTokenString, bondData === null || bondData === void 0 ? void 0 : bondData.chainId, bondData === null || bondData === void 0 ? void 0 : bondData.lpToken);
     const isZap = (inputTokenString === null || inputTokenString === void 0 ? void 0 : inputTokenString.toLowerCase()) !== ((_e = (_d = (_c = bondData === null || bondData === void 0 ? void 0 : bondData.lpToken) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) === null || _e === void 0 ? void 0 : _e.toLowerCase());
     const [fetchingZapQuote, zapData, zapDepositAmount, zapError, zapTrueBondPrice] = useSoulZapBondQuote(inputValue, inputToken, bondData, account, tierProofSig);
+    const rateChanged = parseFloat(zapTrueBondPrice !== null && zapTrueBondPrice !== void 0 ? zapTrueBondPrice : '0') > parseFloat(trueBondPrice !== null && trueBondPrice !== void 0 ? trueBondPrice : '0');
     const inputTokenPrice = useCurrencyPrice(inputToken !== null && inputToken !== void 0 ? inputToken : null, bondChain);
     const { data: inputCurrencyBalance } = useCurrencyBalance(inputToken !== null && inputToken !== void 0 ? inputToken : null, account !== null && account !== void 0 ? account : null, (_f = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _f !== void 0 ? _f : null);
     // Estimations
@@ -76775,8 +76802,6 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
         setInputValue('');
         setInputTokenString(newInputToken);
     }, []);
-    // Modals
-    const [onOpenZapModal] = useModal(jsx$2(ZapModal, { outputToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, account: account, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId }), true, true, 'zapModal');
     const handleOpenZapModal = () => {
         var _a;
         onOpenZapModal();
@@ -76803,6 +76828,7 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
             });
         });
     };
+    // This is the regular buy bond interaction (a.k.a. write method called "deposit" in smartcontract)
     const handleBuyCallback = () => __awaiter$9(void 0, void 0, void 0, function* () {
         var _a, _b, _c, _d, _e, _f, _g;
         const billAddress = bondData === null || bondData === void 0 ? void 0 : bondData.billAddress;
@@ -76817,7 +76843,7 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
             },
         });
         try {
-            const maxPrice = new BigNumber$1(trueBondPrice !== null && trueBondPrice !== void 0 ? trueBondPrice : '0').times(102).div(100).toFixed(0);
+            const maxPrice = new BigNumber$1(trueBondPrice !== null && trueBondPrice !== void 0 ? trueBondPrice : '0').times(102).div(100).toFixed(0); // multiply it by 1.02
             const rawAmount = adjustDecimals(inputValue);
             const amount = new BigNumber$1(rawAmount).times(new BigNumber$1(10).pow(decimals !== null && decimals !== void 0 ? decimals : 18)).toString();
             const shouldUseSig = (bondData === null || bondData === void 0 ? void 0 : bondData.billVersion) === types.BillVersion.V4 && SDKConfig.useTiers;
@@ -76854,6 +76880,7 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
             addToastError(error.shortMessage);
         }
     });
+    // ignore this for SOL migration
     const handleZapCallback = () => __awaiter$9(void 0, void 0, void 0, function* () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (zapData && ((_a = zapData === null || zapData === void 0 ? void 0 : zapData.txData) === null || _a === void 0 ? void 0 : _a.to) && ((_b = zapData === null || zapData === void 0 ? void 0 : zapData.txData) === null || _b === void 0 ? void 0 : _b.data)) {
@@ -76911,23 +76938,15 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
             }
         }
     });
-    const [openGeofencingModal] = useModal(jsx$2(RestrictedRegionModal, {}));
-    const blockedBondsForAE = [
-        '0x0719CCaF2f07f59b23DB7d80E3d2791A0836bdfD'.toLowerCase(),
-        '0xBc48794a04777E7170bD5633E8b728f8a0945971'.toLowerCase(),
-        '0x94A283756B70c2A77bc58Ae0E2615Caf14310186'.toLowerCase(),
-        '0x6639D4acAe77967c253C75cBfEd7C612682E2704'.toLowerCase(),
-    ];
-    const rateChanged = parseFloat(zapTrueBondPrice !== null && zapTrueBondPrice !== void 0 ? zapTrueBondPrice : '0') > parseFloat(trueBondPrice !== null && trueBondPrice !== void 0 ? trueBondPrice : '0');
-    const [openNewRateModal] = useModal(jsx$2(NewRateModal, { bond: bondData, zapTrueBondPrice: zapTrueBondPrice, depositAmount: depositAmount, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError, handleZap: () => handleZapCallback().finally(() => setLoadingTx(false)) }), true, false);
     const handleBothPurchases = () => {
         var _a, _b;
         if ((geoData === null || geoData === void 0 ? void 0 : geoData.countryCode) === 'AE' && blockedBondsForAE.includes((_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '')) {
-            openGeofencingModal();
+            openGeofencingModal(); // ignore this for SOL migration
         }
         else {
             setLoadingTx(true);
             if (isZap) {
+                // ignore this for SOL migration
                 if (rateChanged) {
                     openNewRateModal();
                 }
@@ -76940,7 +76959,6 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
             }
         }
     };
-    const [openNoBonusModal] = useModal(jsx$2(NoBonusModal, { onAcknowledge: handleBothPurchases, showcaseTokenName: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), true, true, 'NoBonusModal');
     const handleOpenModal = () => {
         var _a;
         const bonus = (_a = trueBondPriceData === null || trueBondPriceData === void 0 ? void 0 : trueBondPriceData.bonusWithFee) !== null && _a !== void 0 ? _a : 0;
@@ -76952,16 +76970,25 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
         }
     };
     const openExternal = () => {
-        if ((bondData === null || bondData === void 0 ? void 0 : bondData.chainId) === types.ChainId.LIGHTLINK) {
-            window.open('https://app.elektrik.network/#/swap', '_blank');
-        }
-        if ((bondData === null || bondData === void 0 ? void 0 : bondData.chainId) === types.ChainId.GRAPHLINQ) {
-            window.open('https://hub.graphlinq.io/swap', '_blank');
+        var _a, _b;
+        if ((_a = bondData.lpToken.getLpUrl) === null || _a === void 0 ? void 0 : _a[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) {
+            window.open((_b = bondData.lpToken.getLpUrl) === null || _b === void 0 ? void 0 : _b[bondData === null || bondData === void 0 ? void 0 : bondData.chainId], '_blank');
         }
         else {
             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');
         }
     };
+    // Modals
+    const [onOpenZapModal] = useModal(jsx$2(ZapModal, { outputToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, account: account, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId }), true, true, 'zapModal');
+    const [openNewRateModal] = useModal(jsx$2(NewRateModal, { bond: bondData, zapTrueBondPrice: zapTrueBondPrice, depositAmount: depositAmount, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError, handleZap: () => handleZapCallback().finally(() => setLoadingTx(false)) }), true, false);
+    const [openNoBonusModal] = useModal(jsx$2(NoBonusModal, { onAcknowledge: handleBothPurchases, showcaseTokenName: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), true, true, 'NoBonusModal');
+    const [openGeofencingModal] = useModal(jsx$2(RestrictedRegionModal, {}));
+    const blockedBondsForAE = [
+        '0x0719CCaF2f07f59b23DB7d80E3d2791A0836bdfD'.toLowerCase(),
+        '0xBc48794a04777E7170bD5633E8b728f8a0945971'.toLowerCase(),
+        '0x94A283756B70c2A77bc58Ae0E2615Caf14310186'.toLowerCase(),
+        '0x6639D4acAe77967c253C75cBfEd7C612682E2704'.toLowerCase(),
+    ];
     // Effects
     const [hasChecked, setHasChecked] = useState(false);
     useEffect(() => {
@@ -76977,7 +77004,13 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
             console.log('change to native');
         }
     }, [inputCurrencyBalance]);
-    return bondData ? (jsxs(Flex, { className: `modal-content ${isGoldRush ? 'gold-rush' : ''}`, children: [jsx$2("div", { className: "gold-ribbon" }), 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, isProjectView: true }), jsx$2(Flex, { sx: { width: '100%', display: isProjectView ? ['flex', 'flex', 'flex', 'none'] : 'flex' }, children: jsx$2(BondCards, { bondData: bondData }) }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: bondData, youSpendString: youSpendString, 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, inputDisabled: isUserRestricted }), SDKConfig.useTiers && jsx$2(GetUpToComponent, { bond: bondData, depositAmount: depositAmount }), jsxs(Flex, { className: "modaltable-container button-container", children: [account && (jsx$2(Flex, { className: "button-container get", children: jsx$2(Button, { className: "action-button", onClick: () => bondData.billVersion === types.BillVersion.V4 && SDKConfig.useTiers
+    return bondData ? (jsxs(Flex, { className: `modal-content ${isGoldRush ? 'gold-rush' : ''}`, children: [jsx$2("div", { className: "gold-ribbon" }), 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, isProjectView: true }), jsx$2(Flex, { sx: { width: '100%', display: isProjectView ? ['flex', 'flex', 'flex', 'none'] : 'flex' }, children: jsx$2(BondCards, { bondData: bondData }) }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: bondData, youSpendString: youSpendString, 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, inputDisabled: isUserRestricted }), SDKConfig.useTiers && jsx$2(GetUpToComponent, { bond: bondData, depositAmount: depositAmount }), ((_k = NETWORK_LABEL[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) === null || _k === void 0 ? void 0 : _k.toLowerCase().includes('testnet')) && (jsx$2(Flex, { sx: {
+                            width: '100%',
+                            background: '#DE62F366',
+                            justifyContent: 'center',
+                            mt: '15px',
+                            borderRadius: 'normal',
+                        }, children: jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, p: '2px 10px' }, children: "Testnet Bonds use fake tokens for testing purposes only." }) })), jsxs(Flex, { className: "modaltable-container button-container", children: [account && (jsx$2(Flex, { className: "button-container get", children: jsx$2(Button, { className: "action-button", onClick: () => bondData.billVersion === types.BillVersion.V4 && SDKConfig.useTiers
                                         ? window.open('http://ape.bond/tier-staking', '_blank')
                                         : supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId)
                                             ? handleOpenZapModal()
@@ -77081,6 +77114,8 @@ const CheckUrl = () => {
 };
 
 const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
+    var _a;
+    const isMobile = useIsMobile();
     return (jsxs(Flex, { className: "chaintitle", sx: {
             pt,
             pb: '10px',
@@ -77092,7 +77127,7 @@ const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
             display: hideTitles ? 'none' : 'flex',
             width: '300px',
             alignItems: 'center',
-        }, children: [NETWORK_LABEL[chain], " Bonds", jsx$2(Flex, { sx: { ml: '7px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }), NETWORK_LABEL[chain].includes('Testnet') && (jsxs(Flex, { sx: { ml: '15px' }, children: [jsx$2(Text, { sx: { fontSize: '12px', color: '#DE62F3', fontWeight: 700, mr: '7px' }, children: "TESTNET" }), jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Text, { sx: { textTransform: 'none' }, children: "Bear in mind this is a testnet and funds are not real" }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Svg, { icon: "questionCircle", width: 14, color: "textDisabledButton" }) })] }))] }));
+        }, children: [NETWORK_LABEL[chain], " Bonds", jsx$2(Flex, { sx: { ml: '7px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }), ((_a = NETWORK_LABEL[chain]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('testnet')) && (jsxs(Flex, { sx: { ml: '15px' }, children: [jsx$2(Text, { sx: { fontSize: '12px', color: '#DE62F3', fontWeight: 700, mr: '7px' }, children: "TESTNET" }), jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Text, { sx: { textTransform: 'none' }, children: "Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development." }), width: isMobile ? '272px' : '280px', placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)', children: jsx$2(Svg, { icon: "questionCircle", width: 14, color: "textDisabledButton" }) })] }))] }));
 };
 
 const ProgressBar = ({ value, color = 'text' }) => {
@@ -77295,6 +77330,31 @@ const HotBondCards = () => {
                         }) })] })] }));
 };
 
+const BANNER_INFO = {
+    [types.ChainId.MONAD_TESTNET]: {
+        title: 'Test and Play on Monad Testnet',
+        subtitle: 'Explore Monad for free, earn points and qualify for potential airdrops.',
+        buttons: [
+            { label: 'GET MON TOKENS', href: 'https://testnet.monad.xyz' },
+        ],
+        background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner_jpkg38.png',
+        backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner-mobile_y6xveu.png',
+        logo: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1743089809/logos/monad-logo_lkstid.png',
+    },
+};
+const BannerTestnet = ({ chainId }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return (jsxs("div", { className: "banner-container", sx: {
+            backgroundImage: [
+                `url(${(_a = BANNER_INFO[chainId]) === null || _a === void 0 ? void 0 : _a.backgroundMobile})`,
+                `url(${(_b = BANNER_INFO[chainId]) === null || _b === void 0 ? void 0 : _b.backgroundMobile})`,
+                `url(${(_c = BANNER_INFO[chainId]) === null || _c === void 0 ? void 0 : _c.backgroundMobile})`,
+                `url(${(_d = BANNER_INFO[chainId]) === null || _d === void 0 ? void 0 : _d.background})`,
+                `url(${(_e = BANNER_INFO[chainId]) === null || _e === void 0 ? void 0 : _e.background})`,
+            ],
+        }, children: [jsxs("div", { className: "banner-logos", children: [jsx$2("img", { src: "https://res.cloudinary.com/dswmrqgwy/image/upload/v1743089809/logos/apebond-logo_vzt4dl.png", alt: "apebond-white-logo", style: { width: '100px' } }), jsx$2("img", { src: "https://res.cloudinary.com/dswmrqgwy/image/upload/v1743089809/logos/x-icono_va7sdu.png", alt: "x-white-logo" }), jsx$2("img", { src: `${(_f = BANNER_INFO[chainId]) === null || _f === void 0 ? void 0 : _f.logo}`, alt: "partner-logo" })] }), jsx$2("div", { className: "banner-title", children: (_g = BANNER_INFO[chainId]) === null || _g === void 0 ? void 0 : _g.title }), jsx$2("div", { className: "banner-subtitle", children: (_h = BANNER_INFO[chainId]) === null || _h === void 0 ? void 0 : _h.subtitle }), jsx$2("div", { className: "banner-actions", children: (_j = BANNER_INFO[chainId]) === null || _j === void 0 ? void 0 : _j.buttons.map((button, index) => (jsx$2(Button, { className: "action-button", onClick: () => window.open(button.href, '_blank'), children: button.label }, `banner-button-${index}`))) })] }, `banner-container-${chainId}`));
+};
+
 const BondRowsWithTitle = ({ chain, bonds, hideTitles, showHotBonds }) => {
     const billsFilteredByChain = bonds.filter((bill) => bill.chainId === chain);
     const key = chain;
@@ -77304,7 +77364,7 @@ const BondRowsWithTitle = ({ chain, bonds, hideTitles, showHotBonds }) => {
                         overflow: 'hidden',
                         width: '100%',
                         marginTop: '0px',
-                    }, className: "bonds-card-container", children: [billsFilteredByChain === null || billsFilteredByChain === void 0 ? void 0 : billsFilteredByChain.map((bond, index) => {
+                    }, className: "bonds-card-container", children: [TESTNET_CHAINS.includes(chain) && jsx$2(BannerTestnet, { chainId: chain }), billsFilteredByChain === null || billsFilteredByChain === void 0 ? void 0 : billsFilteredByChain.map((bond, index) => {
                             var _a, _b;
                             return (jsx$2(BondRow
                             //@ts-ignore

package/dist/styles.css

@@ -1906,3 +1906,78 @@ span.flex-inline {
   font-size: 12px;
   font-weight: 400;
 }
+
+.banner-container {
+  width: 100%;
+  min-height: 160px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  gap: 5px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  padding: 20px;
+}
+.banner-container .banner-logos {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+.banner-container .banner-title {
+  font-weight: 700;
+  font-size: 25.26px;
+  line-height: 30.26px;
+  letter-spacing: 0%;
+  text-align: center;
+  vertical-align: middle;
+  background: linear-gradient(180deg, #FFFFFF 50%, #666666 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.banner-container .banner-subtitle {
+  font-weight: 400;
+  font-size: 14.26px;
+  line-height: 30.26px;
+  letter-spacing: 0%;
+  text-align: center;
+  vertical-align: middle;
+  background: linear-gradient(180deg, #FFFFFF 50%, #666666 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.banner-container .banner-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+.banner-container .banner-actions .action-button {
+  height: 35px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+@media (max-width: 575px) {
+  .banner-container .banner-title {
+    width: 50%;
+    font-size: 18px;
+    line-height: 21px;
+  }
+  .banner-container .banner-subtitle {
+    width: 55%;
+    font-size: 12px;
+    line-height: 14px;
+    margin-bottom: 10px;
+  }
+}
+@media (min-width: 800px) and (max-width: 1000px) {
+  .banner-container {
+    background-position: bottom center;
+  }
+}

package/dist/views/Bonds/components/BannerTestnet/BannerTestnet.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface BannerTestnetProps {
+    chainId: number;
+}
+declare const BannerTestnet: React.FC<BannerTestnetProps>;
+export default BannerTestnet;

package/package.json

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