@ape.swap/bonds-sdk 3.0.14-test.3 → 3.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +10 -9
  2. package/dist/components/uikit-sdk/TabNav/index.d.ts +8 -0
  3. package/dist/main.d.ts +2 -2
  4. package/dist/main.js +160 -143
  5. package/dist/state/zap/getChainParam.d.ts +2 -1
  6. package/dist/styles.css +0 -2
  7. package/dist/views/{BondModal/BondModal.d.ts → BuyBond/BuyBond.d.ts} +3 -3
  8. package/dist/views/BuyBond/BuyBondModal.d.ts +4 -0
  9. package/dist/views/BuyBond/index.d.ts +7 -0
  10. package/dist/views/SingleBond/SingleBond.d.ts +4 -1
  11. package/dist/views/SingleBond/SoldOutBuyBondPlaceholder.d.ts +8 -0
  12. package/dist/views/SingleBond/index.d.ts +4 -1
  13. package/dist/views/YourBonds/YourBonds.d.ts +3 -1
  14. package/package.json +2 -2
  15. package/dist/views/BondModal/index.d.ts +0 -7
  16. /package/dist/views/{BondModal → BuyBond}/components/BondCards.d.ts +0 -0
  17. /package/dist/views/{BondModal → BuyBond}/components/BondModalHeader.d.ts +0 -0
  18. /package/dist/views/{BondModal → BuyBond}/components/BondModalHeaderAlt.d.ts +0 -0
  19. /package/dist/views/{BondModal → BuyBond}/components/BondModalMinTierHeader.d.ts +0 -0
  20. /package/dist/views/{BondModal → BuyBond}/components/Estimations.d.ts +0 -0
  21. /package/dist/views/{BondModal → BuyBond}/components/ExpandedViewButton.d.ts +0 -0
  22. /package/dist/views/{BondModal → BuyBond}/components/ImageAndShortDescription.d.ts +0 -0
  23. /package/dist/views/{BondModal → BuyBond}/components/NewRateModal/NewRateModal.d.ts +0 -0
  24. /package/dist/views/{BondModal → BuyBond}/components/NoBonusModal/NoBonusModal.d.ts +0 -0
  25. /package/dist/views/{BondModal → BuyBond}/components/ProjectDescription.d.ts +0 -0
package/README.md CHANGED
@@ -80,15 +80,16 @@ export default MyBondsComponent
80
80
 
81
81
  ## Configuration
82
82
 
83
- The core of the SDK lies in its `config` object, passed as a prop to the `<FullBondsView />` component. Below is a breakdown of key options:
84
-
85
- | Property | Type | Description |
86
- |-----------------|---------------------|-----------------------------------------------------------------------------------------------------------------------------|
87
- | `referenceId` | `string` | A unique identifier for the bonds, shall be provided by ApeBond team. |
88
- | `chains` | `Array` | An array of supported chain IDs (e.g., `56`, `1`, `137`, etc). It also determines the order of the chains on the bond list. |
89
- | `useRainbowKit` | `boolean` | Whether to enable RainbowKit for wallet connections. Might be replaced for an enum in the near future. |
90
- | `useHotBonds` | `boolean` | Whether to show the "hot bonds" component. |
91
- | `theme` | `Object (optional)` | This is how you can customize the styles of the SDK. Override styles like colors, typography, and layout settings to match your project's branding.|
83
+ The core of the SDK lies in its config object params, passed as a prop to its components. Below is a breakdown of key options:
84
+
85
+ | Property | Type | Description |
86
+ |-----------------|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
87
+ | `referenceId` | `string` | A unique identifier for the bonds, shall be provided by ApeBond team. |
88
+ | `chains` | `Array` | An array of supported chain IDs (e.g., `56`, `1`, `137`, etc). It also determines the order of the chains on the bond list. |
89
+ | `useRainbowKit` | `boolean` | Whether to enable RainbowKit for wallet connections. Might be replaced for an enum in the near future. |
90
+ | `useHotBonds` | `boolean` | Whether to show the "hot bonds" component. |
91
+ | `theme` | `Object (optional)` | This is how you can customize the styles of the SDK. Override styles like colors, typography, and layout settings to match your project's branding. |
92
+ | `tokenSymbol` | `string[]` | This parameter is specific to the `<SingleBond />` component. It defines the token(s) to display in the UI. Currently, only a single token (one element in the array) is supported.|
92
93
 
93
94
  ### Chain Support
94
95
 
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface TabNavProps {
3
+ activeTab: string;
4
+ tabOptions: string[];
5
+ onChangeActiveTab?: (tab: string) => void;
6
+ }
7
+ declare const TabNav: React.FC<TabNavProps>;
8
+ export default TabNav;
package/dist/main.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import Bonds from './views/Bonds';
2
2
  import YourBonds from './views/YourBonds';
3
- import BondModal from './views/BondModal';
3
+ import BuyBondModal from './views/BuyBond';
4
4
  import FullBondsView from './views/FullBondsView';
5
5
  import ProjectView from './views/ProjectView';
6
6
  import { generateImageFromTemplate } from './views/YourBondsModal/components/LinkShare/utils';
7
7
  import { ChainId } from '@ape.swap/apeswap-lists';
8
8
  import SingleBond from './views/SingleBond';
9
- export { Bonds, BondModal, YourBonds, FullBondsView, ProjectView, generateImageFromTemplate, ChainId, SingleBond };
9
+ export { Bonds, BuyBondModal, YourBonds, FullBondsView, ProjectView, generateImageFromTemplate, ChainId, SingleBond };
package/dist/main.js CHANGED
@@ -18084,8 +18084,9 @@ var types = {};
18084
18084
  BillArtCollection['inEVM_Collection1'] = 'inEVM_Collection1';
18085
18085
  BillArtCollection['AITECH_Collection1'] = 'AITECH_Collection1';
18086
18086
  BillArtCollection['GPT_Collection1'] = 'GPT_Collection1';
18087
+ BillArtCollection['GoldenTicket_Collection1'] = 'GoldenTicket_Collection1';
18087
18088
  })((BillArtCollection = exports.BillArtCollection || (exports.BillArtCollection = {})));
18088
- exports.defaultBillArtCollection = BillArtCollection.ApeSwap_Collection1;
18089
+ exports.defaultBillArtCollection = BillArtCollection.ApeBond_Collection1;
18089
18090
  exports.MigrationVestingTerms = {
18090
18091
  '60d': 5184000,
18091
18092
  '120d': 10368000,
@@ -18577,8 +18578,7 @@ var types = {};
18577
18578
  (_r[ChainId.MONAD_TESTNET] =
18578
18579
  ((_5 = {}),
18579
18580
  (_5[Protocols.V2] =
18580
- (_89 =
18581
- (_88 = exports.dexFactories[ChainId.MONAD_TESTNET]) === null || _88 === void 0 ? void 0 : _88.PancakeSwapV2) ===
18581
+ (_89 = (_88 = exports.dexFactories[ChainId.MONAD_TESTNET]) === null || _88 === void 0 ? void 0 : _88.LFJ) ===
18582
18582
  null || _89 === void 0
18583
18583
  ? void 0
18584
18584
  : _89.factory),
@@ -18733,6 +18733,7 @@ const supportedByLIFI = [
18733
18733
  types.ChainId.BASE,
18734
18734
  types.ChainId.AVAX,
18735
18735
  types.ChainId.BLAST,
18736
+ types.ChainId.SONIC,
18736
18737
  ];
18737
18738
  // we should be good just by using staging on this, as it is only used for token images
18738
18739
  const APESWAP_LIST_REPO = `https://raw.githubusercontent.com/ApeSwapFinance/apeswap-token-lists/staging`;
@@ -22062,15 +22063,6 @@ function formatUSDNumber(input) {
22062
22063
  const youSpendUSD = (bond, inputValue) => {
22063
22064
  return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
22064
22065
  };
22065
- // receives depositAmount and returns the payoutTokens the user will receive. IT DOES NOT SUBTRACT FEE
22066
- const getRawPayoutAmount = (bond, inputValue) => {
22067
- var _a;
22068
- if (!inputValue || !bond)
22069
- return 0;
22070
- const bigValue = new BigNumber$1(inputValue).times(new BigNumber$1(10).pow(18));
22071
- const billValue = bigValue.div(new BigNumber$1((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
22072
- return billValue.toNumber();
22073
- };
22074
22066
  // receives depositAmount and returns the payoutTokens the user will receive. IT DOES SUBTRACT FEE
22075
22067
  const getPayoutAmount = (bond, inputValue) => {
22076
22068
  var _a;
@@ -71333,7 +71325,7 @@ const YourBondsMenu = ({ chainFilterOption, setChainFilterOption, filterOptions,
71333
71325
  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", children: SDKConfig.referenceId === 'apebond' && jsx$2(ClaimAll, {}) })] })] })] }));
71334
71326
  };
71335
71327
 
71336
- const YourBonds = () => {
71328
+ const YourBonds = ({ showOnly }) => {
71337
71329
  // Hooks
71338
71330
  const { address: account } = useAccount();
71339
71331
  const { data: userBonds, isFetched: userBondsFetched } = useUserBonds();
@@ -71359,6 +71351,13 @@ const YourBonds = () => {
71359
71351
  return [];
71360
71352
  let bondsToReturn = userBonds;
71361
71353
  // Handle Filtering //
71354
+ // Filter Single Token View
71355
+ if (showOnly) {
71356
+ bondsToReturn = bondsToReturn === null || bondsToReturn === void 0 ? void 0 : bondsToReturn.filter((bond) => {
71357
+ var _a, _b, _c;
71358
+ return ((_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.bond) === null || _a === void 0 ? void 0 : _a.earnToken) === null || _b === void 0 ? void 0 : _b.symbol) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === showOnly.toLowerCase();
71359
+ });
71360
+ }
71362
71361
  // Filter by search query
71363
71362
  if (inputValue !== '') {
71364
71363
  bondsToReturn = bondsToReturn === null || bondsToReturn === void 0 ? void 0 : bondsToReturn.filter((bond) => {
@@ -71425,7 +71424,7 @@ const YourBonds = () => {
71425
71424
  const handleFilterOption = useCallback((newOption) => {
71426
71425
  setFilterOption(newOption);
71427
71426
  }, []);
71428
- return (jsxs(Flex$1, { className: "yourbonds table-container", children: [jsx$2(YourBondsMenu, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleFilterOption, setInputValue: setInputValue, inputValue: inputValue, handleSort: handleSort }), !account ? (jsx$2(PlaceholderMonkey, { text: 'You are not connected' })) : bondsToRender && (bondsToRender === null || bondsToRender === void 0 ? void 0 : bondsToRender.length) > 0 ? (bondsToRender === null || bondsToRender === void 0 ? void 0 : bondsToRender.map((bill) => jsx$2(UserBondRow, { bill: bill }, bill.id))) : inputValue !== '' || !chainFilterOption.includes('All Chains') ? (jsx$2(PlaceholderMonkey, { text: 'No results, change filters!' })) : userBondsFetched && (userBonds === null || userBonds === void 0 ? void 0 : userBonds.length) === 0 ? (jsxs(Flex$1, { sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%', mt: '30px' }, children: [jsx$2(Svg, { icon: "placeholderMonkey" }), jsx$2(Flex$1, { sx: { mt: '15px' }, children: "You do not own any Bonds." })] })) : (jsx$2(Flex$1, { className: "yourbonds-spinner", children: jsx$2(Spinner, { size: 100 }) }))] }));
71427
+ return (jsxs(Flex$1, { className: "yourbonds table-container", children: [!showOnly && (jsx$2(YourBondsMenu, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleFilterOption, setInputValue: setInputValue, inputValue: inputValue, handleSort: handleSort })), !account ? (jsx$2(PlaceholderMonkey, { text: 'You are not connected' })) : bondsToRender && (bondsToRender === null || bondsToRender === void 0 ? void 0 : bondsToRender.length) > 0 ? (bondsToRender === null || bondsToRender === void 0 ? void 0 : bondsToRender.map((bill) => jsx$2(UserBondRow, { bill: bill }, bill.id))) : inputValue !== '' || !chainFilterOption.includes('All Chains') ? (jsx$2(PlaceholderMonkey, { text: 'No results, change filters!' })) : userBondsFetched && (userBonds === null || userBonds === void 0 ? void 0 : userBonds.length) === 0 ? (jsxs(Flex$1, { sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%', mt: '30px' }, children: [jsx$2(Svg, { icon: "placeholderMonkey" }), jsx$2(Flex$1, { sx: { mt: '15px' }, children: showOnly ? `You do not own any ${showOnly.toUpperCase()} Bonds.` : 'You do not own any Bonds' })] })) : (jsx$2(Flex$1, { className: "yourbonds-spinner", children: jsx$2(Spinner, { size: 100 }) }))] }));
71429
71428
  };
71430
71429
 
71431
71430
  // This basically returns the 2 tags with the higher active bond count
@@ -71820,6 +71819,7 @@ var NetworkNames;
71820
71819
  NetworkNames["BASE"] = "bas";
71821
71820
  NetworkNames["AVAX"] = "ava";
71822
71821
  NetworkNames["BLAST"] = "bls";
71822
+ NetworkNames["SONIC"] = "son";
71823
71823
  })(NetworkNames || (NetworkNames = {}));
71824
71824
  const getChainParam = (chain) => {
71825
71825
  return chain === types.ChainId.LINEA
@@ -71838,7 +71838,9 @@ const getChainParam = (chain) => {
71838
71838
  ? NetworkNames.AVAX
71839
71839
  : chain === types.ChainId.BLAST
71840
71840
  ? NetworkNames.BLAST
71841
- : null;
71841
+ : chain === types.ChainId.SONIC
71842
+ ? NetworkNames.SONIC
71843
+ : null;
71842
71844
  };
71843
71845
  const getLpType = (protocol) => {
71844
71846
  return protocol === types.Protocols.Algebra
@@ -73126,13 +73128,6 @@ const ZapModal = ({ onDismiss, outputToken, account, chainId }) => {
73126
73128
  : '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", '>'] }) }) })] })] }));
73127
73129
  };
73128
73130
 
73129
- const AccordionText = ({ isVisible = false }) => {
73130
- if (!isVisible) {
73131
- return null;
73132
- }
73133
- 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." })] }) }) })] }));
73134
- };
73135
-
73136
73131
  const useSoulZapBondQuote = (typedValue, inputCurrency, bond, account) => {
73137
73132
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
73138
73133
  const debouncedInput = useDebounce(typedValue, 400);
@@ -73723,7 +73718,7 @@ const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
73723
73718
  },
73724
73719
  });
73725
73720
  };
73726
- return (jsxs(Flex, { className: "modaltable-container title-container", sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'start' }, children: [jsxs(Flex, { className: "slipagge-close-icon", sx: { width: '100%', height: '30px', mb: ['10px', '10px', '10px', '0px'], mt: '-10px' }, children: [jsx$2(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none', 'none'] }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) }), jsx$2(Flex, { sx: { flexDirection: 'column', position: 'absolute', right: '0px' }, children: onDismiss ? (jsxs(Fragment$1, { children: [showProjectInfoButton && jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose }), jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] })) : (jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }), jsxs(Flex, { sx: { width: '100%' }, children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, jsx$2(ListTag, { text: (_b = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _b === void 0 ? void 0 : _b[0] })] }), jsxs(Flex, { className: "title-container price-container", sx: { flexDirection: 'column', paddingLeft: '20px' }, children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex', 'flex'], ml: '10px' }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) })] })] }));
73721
+ return (jsxs(Flex, { className: "modaltable-container title-container", sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'start' }, children: [jsxs(Flex, { className: "slipagge-close-icon", sx: { width: '100%', height: '30px', mb: ['10px', '10px', '10px', '0px'] }, children: [jsx$2(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none', 'none'] }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) }), jsx$2(Flex, { sx: { flexDirection: 'column', position: 'absolute', right: '0px' }, children: onDismiss ? (jsxs(Fragment$1, { children: [showProjectInfoButton && jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose }), jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] })) : (jsx$2(Flex, { sx: { py: '3px', mt: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }), jsxs(Flex, { sx: { width: '100%' }, children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, jsx$2(ListTag, { text: (_b = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _b === void 0 ? void 0 : _b[0] })] }), jsxs(Flex, { className: "title-container price-container", sx: { flexDirection: 'column', paddingLeft: '20px' }, children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex', 'flex'], ml: '10px' }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) })] })] }));
73727
73722
  };
73728
73723
 
73729
73724
  const BondCards = ({ bondData }) => {
@@ -73781,7 +73776,7 @@ const Estimations = ({ depositAmount, bondData, youSpendString, isZap, fetchingZ
73781
73776
  const feeUSD = fee * parseFloat((_a = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
73782
73777
  const estimatedOutputAmount = getPayoutAmount(bondData, depositAmount);
73783
73778
  const estimatedOutputUSD = estimatedOutputAmount * parseFloat((_b = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _b !== void 0 ? _b : '0');
73784
- return (jsxs(Flex, { className: "modaltable-container text-container", children: [jsxs(Flex, { className: "text-container row", children: [jsx$2(Flex, { className: "row-container spend", children: "You Spend:" }), jsx$2(Flex, { className: "row-container spend-val", children: youSpendString })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Bonus:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val ${getBonusColor(bonusString)}`, children: ["$ ", formatUSDNumber(bonusString)] }))] }), bondData.feeInPayout !== undefined && bondData.feeInPayout > 0 && (jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Fee:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Fee }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { className: `row-container premium-val`, children: ["$ ", formatUSDNumber(feeUSD.toString())] })] })), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You Get (over ", vestingTime(((_c = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _c !== void 0 ? _c : 0) - ((_d = bondData.vestingCliff) !== null && _d !== void 0 ? _d : 0)).days, " days):"] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", children: [formatNumber$2(estimatedOutputAmount.toString()), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(estimatedOutputUSD.toString())] }))] })] }));
73779
+ return (jsxs(Flex, { className: "modaltable-container text-container", children: [jsxs(Flex, { className: "text-container row", children: [jsx$2(Flex, { className: "row-container spend", children: "You Spend:" }), jsx$2(Flex, { className: "row-container spend-val", children: youSpendString })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Bonus:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val ${getBonusColor(bonusString)}`, children: ["$ ", formatUSDNumber(bonusString)] }))] }), !!bondData.feeInPayout && (jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Fee:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Fee }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { className: `row-container premium-val`, children: ["$ ", formatUSDNumber(feeUSD.toString())] })] })), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You Get (over ", vestingTime(((_c = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _c !== void 0 ? _c : 0) - ((_d = bondData.vestingCliff) !== null && _d !== void 0 ? _d : 0)).days, " days):"] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", children: [formatNumber$2(estimatedOutputAmount.toString()), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(estimatedOutputUSD.toString())] }))] })] }));
73785
73780
  };
73786
73781
 
73787
73782
  // Custom HTML sanitizer
@@ -73829,68 +73824,6 @@ const ProjectDescription = ({ description }) => {
73829
73824
  }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(SafeHTMLComponent, { html: description !== null && description !== void 0 ? description : '' }) })] }));
73830
73825
  };
73831
73826
 
73832
- const BondModalHeaderAlt = ({ bondData, onDismiss, showProjectInfoButton, }) => {
73833
- var _a, _b, _c, _d, _e, _f;
73834
- const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
73835
- const handleClose = () => {
73836
- if (typeof window !== 'undefined') {
73837
- window.history.pushState({}, '', `/bonds`);
73838
- }
73839
- onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
73840
- };
73841
- // const handleProjectViewNavigation = () => {
73842
- // window.open(`${window.location.origin}/bonds/${bondData.billAddress}/${bondData.chainId}`, '_self')
73843
- // track({
73844
- // event: 'projectInfoClick',
73845
- // chain: bondData.chainId,
73846
- // data: {
73847
- // cat: 'Modal',
73848
- // bond: bondData.earnToken.symbol,
73849
- // bondChain: bondData.chainId,
73850
- // },
73851
- // })
73852
- // }
73853
- 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(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bondData.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bondData === null || bondData === void 0 ? void 0 : bondData.projectLink, twitter: bondData === null || bondData === void 0 ? void 0 : bondData.twitter, audit: bondData === null || bondData === void 0 ? void 0 : bondData.audit, chain: bondData === null || bondData === void 0 ? void 0 : bondData.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" }) }) }), 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" }) })) }) }));
73854
- };
73855
-
73856
- const ImageAndShortDescription = ({ bondData, onDismiss }) => {
73857
- var _a;
73858
- const SDKConfig = useSDKConfig();
73859
- // Swiper logic for the alt view
73860
- const [activeSlide, setActiveSlide] = useState(0);
73861
- const { swiper, setSwiper } = useSwiper();
73862
- const imagesLength = 3;
73863
- const handleSlide = (event) => {
73864
- const slideNumber = getDotPos(event.activeIndex, imagesLength);
73865
- setActiveSlide(slideNumber);
73866
- };
73867
- const slideTo = (index) => {
73868
- setActiveSlide(index);
73869
- swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
73870
- };
73871
- return (jsxs(Flex, { sx: { maxWidth: ['unset', 'unset', 'unset', '500px'], flexDirection: 'column', alignItems: 'center' }, children: [jsxs(Flex, { sx: {
73872
- flexDirection: 'column',
73873
- width: '100%',
73874
- alignItems: 'center',
73875
- overflow: 'hidden',
73876
- position: 'relative',
73877
- }, 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: {
73878
- width: '100%',
73879
- display: 'flex',
73880
- justifyContent: 'center',
73881
- }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 0), jsx$2(SwiperSlide, { style: {
73882
- width: '100%',
73883
- display: 'flex',
73884
- justifyContent: 'center',
73885
- }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 1), jsx$2(SwiperSlide, { style: {
73886
- width: '100%',
73887
- display: 'flex',
73888
- justifyContent: 'center',
73889
- }, 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) => {
73890
- return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
73891
- }) })] }), 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 }) })] }));
73892
- };
73893
-
73894
73827
  // Fetch country code to check if the region is allowed
73895
73828
  const fetchLocation = (apiv2URL) => __awaiter$9(void 0, void 0, void 0, function* () {
73896
73829
  const resp = yield axios.get(`${apiv2URL}/check`);
@@ -73973,13 +73906,10 @@ const NoBonusModal = ({ onAcknowledge, showcaseTokenName }) => {
73973
73906
  return (isOpen && (jsxs(Modal, { className: "nobonus-modal", title: "Warning", onClose: handleAcknowledge, children: [jsxs("p", { children: ["You're buying ", showcaseTokenName, " at a higher price than the market, which will result in receiving fewer tokens compared to swapping via an exchange."] }), jsx$2("p", { children: "You will not receive any bonus tokens when buying this bond." }), jsxs(Flex, { className: "nobonus-checkbox-row", sx: { flexDirection: 'row', gap: '8px', pb: '20px' }, children: [jsx$2(Flex, { className: "nobonus-checkbox", children: jsx$2(Checkbox, { onChange: handleCheckboxChange }) }), jsx$2(Flex, { className: "nobonus-checkbox-text", children: "I understand and want to proceed." })] }), jsxs(Flex, { className: "nobonus-actions", sx: { flexDirection: 'row', gap: '8px' }, children: [jsx$2(Button, { classname: "nobonus-cancel", onClick: handleCancel, sx: { width: '100%', justifyContent: 'center' }, variant: "secondary", children: "Cancel" }), jsx$2(Button, { className: "nobonus-buy", onClick: handleAcknowledge, disabled: !isChecked, sx: { width: '100%', justifyContent: 'center' }, children: "Buy" })] })] })));
73974
73907
  };
73975
73908
 
73976
- const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) => {
73977
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
73909
+ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) => {
73910
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
73978
73911
  const SDKConfig = useSDKConfig();
73979
73912
  const { data: geoData } = useGeoFencing();
73980
- // State
73981
- const [modalVariant, setModalVariant] = useState(SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.modalVariant);
73982
- const [accordionVisible, setAccordionVisible] = useState(false);
73983
73913
  // Hooks
73984
73914
  const userChainId = useChainId();
73985
73915
  const { address: account } = useAccount();
@@ -74206,54 +74136,32 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
74206
74136
  if (inputCurrencyBalance !== 'undefined' &&
74207
74137
  inputCurrencyBalance === '0' &&
74208
74138
  (inputTokenString === null || inputTokenString === void 0 ? void 0 : inputTokenString.toLowerCase()) === ((_c = (_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.lpToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) === null || _c === void 0 ? void 0 : _c.toLowerCase()) &&
74209
- !hasChecked) {
74139
+ !hasChecked &&
74140
+ bondChain &&
74141
+ supportedByLIFI.includes(bondChain)) {
74210
74142
  setHasChecked(true);
74211
74143
  setInputTokenString('NATIVE');
74212
74144
  console.log('change to native');
74213
74145
  }
74214
74146
  }, [inputCurrencyBalance]);
74215
- return (jsx$2(Modal, { className: "modal", onDismiss: onDismiss, sx: { width: '400px' }, 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, { 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: minTier !== null && (!userTier || userTier < minTier) ? true : false }), minTier !== null && jsx$2(TagMinTierBond, { userTier: userTier, minTier: minTier }), jsxs(Flex, { className: "modaltable-container button-container", children: [account && (minTier === null || (minTier !== null && userTier !== null && userTier >= minTier)) && (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", fullWidth: true, children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) })), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : minTier !== null && (!userTier || userTier < minTier) ? (jsx$2(Button, { className: "action-button", onClick: () => window.open(`https://www.ape.bond/tier-staking`, '_blank'), children: "GET YOUR TIER" })) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "action-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
74216
- event.stopPropagation();
74217
- switchChain({ chainId: bondData.chainId });
74218
- }, 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 ||
74219
- (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
74220
- !account ||
74221
- !inputValue ||
74222
- parseFloat(inputValue) === 0 ||
74223
- fetchingZapQuote ||
74224
- zapError, onClick: handleOpenModal, children: zapError ? 'something went wrong' : `buy` })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
74225
- (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
74226
- !account ||
74227
- !inputValue ||
74228
- 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: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _l !== void 0 ? _l : 'question' })] }) }), jsxs(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : 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: (_o = bondData.showcaseTokenName) !== null && _o !== void 0 ? _o : 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((getRawPayoutAmount(bondData, inputValue) -
74229
- 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: "action-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
74230
- event.stopPropagation();
74231
- switchChain({ chainId: bondData.chainId });
74232
- }, 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 ||
74233
- (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
74234
- !account ||
74235
- !inputValue ||
74236
- 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((getRawPayoutAmount(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(getRawPayoutAmount(bondData, inputValue).toFixed(0)), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] }), jsxs(Flex, { sx: {
74237
- width: '100%',
74238
- fontSize: '14px',
74239
- display: ['flex', 'flex', 'flex', 'none'],
74240
- flexDirection: 'column',
74241
- }, children: [jsxs(Flex, { sx: { opacity: 0.8 }, children: ["Market Price: $", formatUSDNumber((getRawPayoutAmount(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(getRawPayoutAmount(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: {
74242
- width: '100%',
74243
- justifyContent: 'center',
74244
- flexDirection: ['column', 'column', 'column', 'row'],
74245
- }, 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: {
74246
- width: '100%',
74247
- justifyContent: 'center',
74248
- flexDirection: ['column', 'column', 'column', 'row'],
74249
- }, 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((_p = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _p !== void 0 ? _p : 0).days * 86400000))] })] })] }), jsx$2("hr", { className: "fading-hr hide-mobile" }), jsxs(Flex, { sx: {
74250
- width: '100%',
74251
- justifyContent: ['space-between', 'space-between', 'space-between', 'space-around'],
74252
- }, 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: {
74253
- justifyContent: 'center',
74254
- cursor: 'pointer',
74255
- alignItems: 'center',
74256
- }, 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 }) }))] })) })) }));
74147
+ return bondData ? (jsx$2(Flex, { className: "modal-content", children: 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, { 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: minTier !== null && (!userTier || userTier < minTier) }), minTier !== null && jsx$2(TagMinTierBond, { userTier: userTier, minTier: minTier }), jsxs(Flex, { className: "modaltable-container button-container", children: [account && (minTier === null || (userTier !== null && userTier >= minTier)) && (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", fullWidth: true, children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) })), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : minTier !== null && (!userTier || userTier < minTier) ? (jsx$2(Button, { className: "action-button", onClick: () => window.open(`https://www.ape.bond/tier-staking`, '_blank'), children: "GET YOUR TIER" })) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "action-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
74148
+ event.stopPropagation();
74149
+ switchChain({ chainId: bondData.chainId });
74150
+ }, 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 ||
74151
+ (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
74152
+ !account ||
74153
+ !inputValue ||
74154
+ parseFloat(inputValue) === 0 ||
74155
+ fetchingZapQuote ||
74156
+ zapError, onClick: handleOpenModal, children: zapError ? 'something went wrong' : `buy` })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
74157
+ (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
74158
+ !account ||
74159
+ !inputValue ||
74160
+ parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] })] }) })) : (jsx$2(Fragment$1, {}));
74161
+ };
74162
+
74163
+ const BuyBondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) => {
74164
+ return (jsx$2(Modal, { className: "modal", onDismiss: onDismiss, sx: { width: '400px' }, children: jsx$2(Flex, { sx: { width: '100%', maxWidth: '700px', mt: '-10px' }, children: jsx$2(BuyBond, { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, handlePurchasedBond: handlePurchasedBond }) }) }));
74257
74165
  };
74258
74166
 
74259
74167
  /*
@@ -74294,7 +74202,7 @@ const ModalHandler = ({ onDismiss, bondAddress, bondChain, }) => {
74294
74202
  refetch();
74295
74203
  }
74296
74204
  }, [billId]);
74297
- return billId ? (jsx$2(YourBondsModal, { userBill: userBill, onDismiss: onDismiss })) : (jsx$2(BondModal, { bondAddress: bondAddress, bondChain: bondChain, handlePurchasedBond: setBuyTxHash, onDismiss: () => {
74205
+ return billId ? (jsx$2(YourBondsModal, { userBill: userBill, onDismiss: onDismiss })) : (jsx$2(BuyBondModal, { bondAddress: bondAddress, bondChain: bondChain, handlePurchasedBond: setBuyTxHash, onDismiss: () => {
74298
74206
  window.history.pushState({}, '', `${locationPath !== '/bonds' ? locationPath : '/bonds'}`);
74299
74207
  onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
74300
74208
  } }));
@@ -74439,7 +74347,7 @@ const HotBondCard = ({ bond }) => {
74439
74347
  var _a, _b, _c, _d, _e, _f, _g, _h;
74440
74348
  const { bonus } = bond;
74441
74349
  // Modal
74442
- const [openBuyModal] = useModal(jsx$2(BondModal, { bondAddress: bond.billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${bond.billAddress}-${bond.chainId}`);
74350
+ const [openBuyModal] = useModal(jsx$2(BuyBondModal, { bondAddress: bond.billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${bond.billAddress}-${bond.chainId}`);
74443
74351
  const handleOpenModal = () => {
74444
74352
  openBuyModal();
74445
74353
  track({
@@ -75643,9 +75551,9 @@ const YourBondsWithProviders = (props) => {
75643
75551
  return (jsx$2(Providers, { theme: props.theme, children: jsx$2(YourBonds, {}) }));
75644
75552
  };
75645
75553
 
75646
- const BondModalWithProviders = (props) => {
75554
+ const BuyBondModalWithProviders = (props) => {
75647
75555
  useSDKConfig(props);
75648
- return (jsx$2(Providers, { theme: props.theme, children: jsx$2(BondModal, Object.assign({}, props)) }));
75556
+ return (jsx$2(Providers, { theme: props.theme, children: jsx$2(BuyBondModal, Object.assign({}, props)) }));
75649
75557
  };
75650
75558
 
75651
75559
  const FullBondsViewWithProviders = (props) => {
@@ -91298,7 +91206,7 @@ const ProjectView = ({ bondAddress, bondChain, historicalPrices }) => {
91298
91206
  p: '20px',
91299
91207
  borderRadius: '10px',
91300
91208
  mt: '5px',
91301
- }, className: `project-view`, children: [jsx$2(BondModalHeader, { bondData: bondData }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), 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 }), minTier && (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) !== undefined && (jsx$2(TagMinTierBond, { userTier: userTier, minTier: bondData === null || bondData === void 0 ? void 0 : bondData.minTier })), jsxs(Flex, { className: "modaltable-container button-container", children: [account &&
91209
+ }, className: `project-view`, children: [jsx$2(Flex, { sx: { mt: '-20px' }, children: jsx$2(BondModalHeader, { bondData: bondData }) }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), 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 }), minTier && (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) !== undefined && (jsx$2(TagMinTierBond, { userTier: userTier, minTier: bondData === null || bondData === void 0 ? void 0 : bondData.minTier })), jsxs(Flex, { className: "modaltable-container button-container", children: [account &&
91302
91210
  (!minTier || (minTier && bondData.minTier && (!userTier || userTier >= bondData.minTier))) && (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, {})) : minTier && bondData.minTier && (!userTier || userTier < bondData.minTier) ? (jsx$2(Button, { className: "action-button", onClick: () => window.open(`https://www.ape.bond/tier-staking`, '_blank'), children: "GET YOUR TIER" })) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
91303
91211
  event.stopPropagation();
91304
91212
  switchChain({ chainId: bondData.chainId });
@@ -91320,14 +91228,123 @@ const ProjectViewWithProviders = (props) => {
91320
91228
  return (jsx$2(Providers, { theme: props.theme, children: jsx$2(ProjectView, Object.assign({}, props)) }));
91321
91229
  };
91322
91230
 
91323
- const SingleBond = () => {
91324
- return jsx$2(Flex, { children: "asd!" });
91231
+ const TabNav = ({ tabOptions, activeTab, onChangeActiveTab }) => {
91232
+ const translateX = activeTab === tabOptions[0] ? '0%' : '100%';
91233
+ return (jsxs(Flex, { sx: {
91234
+ flexDirection: 'row',
91235
+ width: '100%',
91236
+ marginTop: '5px',
91237
+ position: 'relative',
91238
+ justifyContent: 'space-between',
91239
+ }, children: [tabOptions.map((tab, index) => (jsx$2(Flex, { onClick: () => onChangeActiveTab && onChangeActiveTab(tab), sx: {
91240
+ flexDirection: 'column',
91241
+ justifyContent: 'center',
91242
+ alignItems: 'center',
91243
+ cursor: 'pointer',
91244
+ fontWeight: activeTab === tab ? 700 : 500,
91245
+ color: activeTab === tab ? 'text' : 'textDisabled',
91246
+ transition: 'all 0.3s ease-out',
91247
+ width: '100%',
91248
+ my: '10px',
91249
+ }, children: tab }, tab))), jsx$2(Flex, { sx: {
91250
+ position: 'absolute',
91251
+ width: '100%',
91252
+ bottom: 0,
91253
+ background: 'textDisabled',
91254
+ height: '3px',
91255
+ borderRadius: 'normal',
91256
+ } }), jsx$2(Flex, { sx: {
91257
+ position: 'absolute',
91258
+ width: '50%', // 50% width
91259
+ bottom: 0,
91260
+ background: 'text', // Line color
91261
+ height: '3px',
91262
+ borderRadius: 'normal',
91263
+ transition: 'transform 0.3s ease-out', // Add smooth transition
91264
+ transform: `translateX(${translateX})`, // Dynamically move left/right
91265
+ } })] }));
91266
+ };
91267
+
91268
+ const SoldOutBuyBondPlaceholder = ({ bond }) => {
91269
+ var _a, _b, _c, _d, _e, _f;
91270
+ const SDKConfig = useSDKConfig();
91271
+ // Hooks
91272
+ const { address: account } = useAccount();
91273
+ const { data: userEscrowWeight } = useGetUserEscrowWeight(account);
91274
+ const userTier = getUserTier(userEscrowWeight !== null && userEscrowWeight !== void 0 ? userEscrowWeight : '0');
91275
+ // State
91276
+ const bondData = bond;
91277
+ const minTier = (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) !== undefined ? bondData.minTier : null;
91278
+ const [inputValue, setInputValue] = useState('');
91279
+ const [inputTokenString, setInputTokenString] = useState((_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.lpToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bondData.chainId]);
91280
+ // Data
91281
+ const inputToken = useTokenFromZapList(inputTokenString, bondData === null || bondData === void 0 ? void 0 : bondData.chainId, bondData === null || bondData === void 0 ? void 0 : bondData.lpToken);
91282
+ 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());
91283
+ 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);
91284
+ return bondData ? (jsx$2(Flex, { className: "modal-content", children: jsxs(Flex, { className: "modaltable-container", children: [jsxs(Flex, { sx: {
91285
+ position: 'absolute',
91286
+ width: 'calc(100% + 40px)',
91287
+ height: 'calc(100% + 20px)',
91288
+ top: '0',
91289
+ left: '-20px',
91290
+ overflow: 'hidden',
91291
+ borderRadius: 'normal',
91292
+ }, children: [jsx$2(Flex, { sx: {
91293
+ position: 'absolute',
91294
+ width: '100%',
91295
+ height: '100%',
91296
+ zIndex: 999,
91297
+ backgroundColor: 'rgba(255,255,255,0.1)',
91298
+ backdropFilter: 'blur(1px)',
91299
+ WebkitBackdropFilter: 'blur(1px)', // Ensure compatibility with Safari
91300
+ } }), jsx$2(Flex, { sx: {
91301
+ position: 'absolute',
91302
+ top: '50px',
91303
+ left: '-50px',
91304
+ backgroundColor: 'error',
91305
+ color: 'white',
91306
+ padding: '5px 20px',
91307
+ fontSize: '14px',
91308
+ fontWeight: 'bold',
91309
+ transform: 'rotate(-45deg)',
91310
+ zIndex: 1000, // Ensure it appears above other elements
91311
+ boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
91312
+ width: '220px',
91313
+ justifyContent: 'center',
91314
+ }, children: "SOLD OUT" })] }), jsx$2(BondModalHeader, { bondData: bondData,
91315
+ // onDismiss={onDismiss}
91316
+ showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(BondCards, { bondData: Object.assign(Object.assign({}, bondData), { bonusWithFee: -1 }) }), jsx$2(Estimations, { depositAmount: '0',
91317
+ /*@ts-ignore*/
91318
+ bondData: bondData, youSpendString: '0', isZap: isZap, fetchingZapQuote: false, zapError: false }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => null, handleCurrencySelect: () => null, 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: 0, inputDisabled: true }), minTier !== null && jsx$2(TagMinTierBond, { userTier: userTier, minTier: minTier }), jsxs(Flex, { className: "modaltable-container button-container", children: [account && (minTier === null || (userTier !== null && userTier >= minTier)) && (jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", variant: "secondary", fullWidth: true, disabled: true, children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) })), jsx$2(Flex, { className: "button-container buy", children: jsx$2(Button, { className: "action-button", fullWidth: true, disabled: true, children: "Buy" }) })] })] }) })) : (jsx$2(Fragment$1, {}));
91319
+ };
91320
+
91321
+ const SingleBond = ({ tokenSymbol }) => {
91322
+ // Data Hooks
91323
+ const { data: bonds, isFetched } = useBondsData();
91324
+ const { data: allBonds } = useBondsList();
91325
+ // State
91326
+ const [activeTab, setActiveTab] = useState('Buy Bond');
91327
+ // Data
91328
+ const filteredBonds = bonds === null || bonds === void 0 ? void 0 : bonds.filter((bond) => tokenSymbol === null || tokenSymbol === void 0 ? void 0 : tokenSymbol.some((symbol) => { var _a; return ((_a = bond.earnToken.symbol) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === symbol.toLowerCase(); }));
91329
+ const soldOutBonds = allBonds === null || allBonds === void 0 ? void 0 : allBonds.filter((bond) => tokenSymbol === null || tokenSymbol === void 0 ? void 0 : tokenSymbol.some((symbol) => { var _a; return ((_a = bond.earnToken.symbol) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === symbol.toLowerCase(); }));
91330
+ const activeBond = filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds[0];
91331
+ const soldOutBond = soldOutBonds === null || soldOutBonds === void 0 ? void 0 : soldOutBonds[0];
91332
+ const bondAddress = activeBond === null || activeBond === void 0 ? void 0 : activeBond.billAddress;
91333
+ const bondChain = activeBond === null || activeBond === void 0 ? void 0 : activeBond.chainId;
91334
+ return (jsx$2(Flex, { sx: { flexDirection: 'column' }, children: jsxs(Flex, { sx: {
91335
+ flexDirection: 'column',
91336
+ }, children: [jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '15px' }, children: jsx$2(TabNav, { activeTab: activeTab, tabOptions: ['Buy Bond', 'Your Bonds'], onChangeActiveTab: (newValue) => setActiveTab(newValue) }) }), activeTab === 'Buy Bond' ? (jsx$2(Flex, { sx: {
91337
+ background: activeTab === 'Buy Bond' && 'white2',
91338
+ borderRadius: 'normal',
91339
+ p: '0 20px 20px 20px',
91340
+ mx: '10px',
91341
+ }, children: activeBond ? (jsx$2(BuyBond, { bondAddress: bondAddress, bondChain: bondChain })) : soldOutBond && isFetched ? (jsx$2(SoldOutBuyBondPlaceholder, { bond: soldOutBond })) : isFetched ? (jsx$2(Flex, { sx: { justifyContent: 'center', width: '100%', pt: '20px' }, children: "No bond" })) : (jsx$2(Flex, { className: "yourbonds-spinner", children: jsx$2(Spinner, { size: 100 }) })) })) : (jsx$2(YourBonds, { showOnly: tokenSymbol === null || tokenSymbol === void 0 ? void 0 : tokenSymbol[0] }))] }) }));
91325
91342
  };
91326
91343
 
91327
91344
  const SingleBondWithProviders = (props) => {
91328
91345
  useSDKConfig(props);
91329
- return (jsx$2(Providers, { theme: props.theme, children: jsx$2(SingleBond, {}) }));
91346
+ return (jsx$2(Providers, { theme: props.theme, children: jsx$2(SingleBond, Object.assign({}, props)) }));
91330
91347
  };
91331
91348
 
91332
91349
  var ChainId = types.ChainId;
91333
- export { BondModalWithProviders as BondModal, BondsWithProviders as Bonds, ChainId, FullBondsViewWithProviders as FullBondsView, ProjectViewWithProviders as ProjectView, SingleBondWithProviders as SingleBond, YourBondsWithProviders as YourBonds, generateImageFromTemplate };
91350
+ export { BondsWithProviders as Bonds, BuyBondModalWithProviders as BuyBondModal, ChainId, FullBondsViewWithProviders as FullBondsView, ProjectViewWithProviders as ProjectView, SingleBondWithProviders as SingleBond, YourBondsWithProviders as YourBonds, generateImageFromTemplate };
@@ -7,7 +7,8 @@ declare enum NetworkNames {
7
7
  LINEA = "lna",
8
8
  BASE = "bas",
9
9
  AVAX = "ava",
10
- BLAST = "bls"
10
+ BLAST = "bls",
11
+ SONIC = "son"
11
12
  }
12
13
  export declare const getChainParam: (chain?: ChainId) => NetworkNames | null;
13
14
  export declare const getLpType: (protocol?: Protocols) => "ichi" | "solidly" | "univ2" | "curve" | null;
package/dist/styles.css CHANGED
@@ -141,9 +141,7 @@
141
141
  border-radius: 10px;
142
142
  background-color: var(--theme-ui-colors-white2);
143
143
  border-radius: 10px;
144
- z-index: 1001;
145
144
  width: 100%;
146
- max-width: 700px;
147
145
  }
148
146
 
149
147
  .modaltable-container {
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
- export interface BondModalProps {
2
+ export interface BuyBondProps {
3
3
  onDismiss?: () => void;
4
4
  bondAddress?: string;
5
5
  bondChain?: number;
6
6
  handlePurchasedBond?: (hash: string) => void;
7
7
  }
8
- declare const BondModal: React.FC<BondModalProps>;
9
- export default BondModal;
8
+ declare const BuyBond: React.FC<BuyBondProps>;
9
+ export default BuyBond;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { BuyBondProps } from './BuyBond';
3
+ declare const BuyBondModal: React.FC<BuyBondProps>;
4
+ export default BuyBondModal;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { BuyBondProps } from './BuyBond';
3
+ import { SDKProps } from '../../state/useSDKConfig';
4
+ interface Props extends SDKProps, BuyBondProps {
5
+ }
6
+ declare const BuyBondModalWithProviders: React.FC<Props>;
7
+ export default BuyBondModalWithProviders;
@@ -1,3 +1,6 @@
1
1
  import React from 'react';
2
- declare const SingleBond: () => React.JSX.Element;
2
+ export interface SingleBondProps {
3
+ tokenSymbol?: string[];
4
+ }
5
+ declare const SingleBond: React.FC<SingleBondProps>;
3
6
  export default SingleBond;
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { BillsConfig } from '@ape.swap/apeswap-lists';
3
+ export interface SoldOutProps {
4
+ onDismiss?: () => void;
5
+ bond: BillsConfig;
6
+ }
7
+ declare const SoldOutBuyBondPlaceholder: React.FC<SoldOutProps>;
8
+ export default SoldOutBuyBondPlaceholder;
@@ -1,4 +1,7 @@
1
1
  import React from 'react';
2
2
  import { SDKProps } from '../../state/useSDKConfig';
3
- declare const SingleBondWithProviders: React.FC<SDKProps>;
3
+ import { SingleBondProps } from './SingleBond';
4
+ interface Props extends SDKProps, SingleBondProps {
5
+ }
6
+ declare const SingleBondWithProviders: React.FC<Props>;
4
7
  export default SingleBondWithProviders;
@@ -1,4 +1,6 @@
1
1
  import React from 'react';
2
2
  export type SortableKeys = 'claimable' | 'pending' | 'terms';
3
- declare const YourBonds: () => React.JSX.Element;
3
+ declare const YourBonds: ({ showOnly }: {
4
+ showOnly?: string;
5
+ }) => React.JSX.Element;
4
6
  export default YourBonds;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Ape Bond SDK",
4
4
  "author": "Ape Bond",
5
5
  "license": "MIT",
6
- "version": "3.0.14-test.3",
6
+ "version": "3.0.14",
7
7
  "module": "dist/main.js",
8
8
  "type": "module",
9
9
  "types": "dist/main.d.ts",
@@ -57,7 +57,7 @@
57
57
  "yalc": "^1.0.0-pre.53"
58
58
  },
59
59
  "dependencies": {
60
- "@ape.swap/apeswap-lists": "4.1.1-alpha.2",
60
+ "@ape.swap/apeswap-lists": "4.2.0",
61
61
  "@emotion/react": "11.11.4",
62
62
  "bignumber.js": "^9.1.2",
63
63
  "chart.js": "4.2.0",
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { BondModalProps } from './BondModal';
3
- import { SDKProps } from '../../state/useSDKConfig';
4
- interface Props extends SDKProps, BondModalProps {
5
- }
6
- declare const BondModalWithProviders: React.FC<Props>;
7
- export default BondModalWithProviders;