@ape.swap/bonds-sdk 2.0.9-seedify → 2.1.0

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.
package/dist/main.js CHANGED
@@ -4,7 +4,6 @@ import { useWaitForTransactionReceipt, useChainId, useAccount, useSwitchChain, u
4
4
  import { useQuery, useQueryClient } from '@tanstack/react-query';
5
5
  import axios from 'axios';
6
6
  import { ConnectButton as ConnectButton$1 } from '@rainbow-me/rainbowkit';
7
- import domtoimage from 'dom-to-image';
8
7
 
9
8
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
10
9
 
@@ -6295,7 +6294,7 @@ const Text$1 = /*#__PURE__*/React__default.forwardRef(function Text(props, ref)
6295
6294
  * Image style variants can be defined in the theme.images object.
6296
6295
  * @see https://theme-ui.com/components/image/
6297
6296
  */
6298
- const Image = /*#__PURE__*/React__default.forwardRef(function Image(props, ref) {
6297
+ const Image$1 = /*#__PURE__*/React__default.forwardRef(function Image(props, ref) {
6299
6298
  const __outerCss = props.__css;
6300
6299
  return jsx$2(Box$1, {
6301
6300
  ref: ref,
@@ -18688,6 +18687,25 @@ const AddFavToken = ({ tokenSymbol, hotBond }) => {
18688
18687
  }, children: jsx$2(AnimatePresence, { mode: "wait", children: jsx$2(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex' }, children: isFavToken ? (jsx$2(Svg, { icon: "StarFilled", width: 22, height: 22 })) : (jsx$2(Svg, { icon: hotBond ? 'FirePink' : 'Star', width: hotBond ? 25 : 20, height: hotBond ? 25 : 20 })) }, isFavToken ? 'StarFilled' : 'Star') }) }));
18689
18688
  };
18690
18689
 
18690
+ const defaultUrls = {
18691
+ apiV2: 'https://api.ape.bond',
18692
+ realTimeApi: 'https://realtime-api.ape.bond/bonds',
18693
+ apeswapLists: 'https://raw.githubusercontent.com/ApeSwapFinance/apeswap-lists/main',
18694
+ mainUrl: 'https://ape.bond',
18695
+ };
18696
+ const useSDKConfig = (config) => {
18697
+ var _a;
18698
+ const { data } = useQuery({
18699
+ queryKey: [QUERY_KEYS.SDK_CONFIG],
18700
+ initialData: Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.config), { urls: Object.assign(Object.assign({}, defaultUrls), (_a = config === null || config === void 0 ? void 0 : config.config) === null || _a === void 0 ? void 0 : _a.urls) }),
18701
+ });
18702
+ return data;
18703
+ };
18704
+ const useURLByEnvironment = (key) => {
18705
+ const config = useSDKConfig();
18706
+ return config === null || config === void 0 ? void 0 : config.urls[key];
18707
+ };
18708
+
18691
18709
  const NETWORK_COLORS = {
18692
18710
  [types.ChainId.BSC]: '#F3BA2F',
18693
18711
  [types.ChainId.MAINNET]: '#627eea',
@@ -18701,15 +18719,21 @@ const NETWORK_COLORS = {
18701
18719
  [types.ChainId.AVAX]: '#e74344',
18702
18720
  };
18703
18721
  const TokenInfoAndName = ({ bill, vestEnds, isHotBond, }) => {
18704
- var _a, _b, _c, _d;
18722
+ var _a, _b, _c, _d, _e;
18723
+ const SDKConfig = useSDKConfig();
18705
18724
  const tokenName = 'showcaseTokenName' in bill ? bill.showcaseTokenName : bill.earnToken.symbol;
18706
- return (jsxs(Flex, { className: "tokeninfoname container", children: [jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _a !== void 0 ? _a : 'question' }) }), jsx$2(Flex, { className: "tokeninfoname gradient", sx: {
18707
- background: isHotBond || vestEnds ? 'transparent' : NETWORK_COLORS[bill.chainId],
18708
- } }), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: { marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0 }, children: [jsx$2(TokenImage, { symbol: tokenName, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [tokenName, vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond }) })] }), jsx$2(Flex, { sx: {
18725
+ return (jsxs(Flex, { className: "tokeninfoname container", children: [SDKConfig.referenceId === 'seedify' ? (jsx$2(Flex, { sx: {
18726
+ p: '10px',
18727
+ opacity: 0.2,
18728
+ position: 'absolute',
18729
+ left: '-20px',
18730
+ }, children: jsx$2(Flex, { sx: { borderRadius: '56px', overflow: 'hidden' }, children: jsx$2(Svg, { width: 100, height: 100, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _a !== void 0 ? _a : 'question' }) }) })) : (jsxs(Fragment$1, { children: [jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) }), jsx$2(Flex, { className: "tokeninfoname gradient", sx: {
18731
+ background: isHotBond || vestEnds ? 'transparent' : NETWORK_COLORS[bill.chainId],
18732
+ } })] })), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: { marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0 }, children: [jsx$2(TokenImage, { symbol: tokenName, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [tokenName, vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { className: "tokeninfofav", sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond }) })] }), jsx$2(Flex, { sx: {
18709
18733
  display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'],
18710
18734
  justifyContent: isHotBond ? 'center' : 'flex-start',
18711
18735
  width: '100%',
18712
- }, children: ((_b = bill.tags) === null || _b === void 0 ? void 0 : _b[0]) && jsx$2(ListTag, { text: (_d = (_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase() }) })] }));
18736
+ }, children: ((_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) && jsx$2(ListTag, { text: (_e = (_d = bill.tags) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.toUpperCase() }) })] }));
18713
18737
  };
18714
18738
 
18715
18739
  const MINUTE_IN_SECONDS = 60;
@@ -41467,25 +41491,6 @@ const getBillNftBatchData = (apiV2URL, billNftIds, billNftAddress, chainId) => _
41467
41491
  }
41468
41492
  });
41469
41493
 
41470
- const defaultUrls = {
41471
- apiV2: 'https://api.ape.bond',
41472
- realTimeApi: 'https://realtime-api.ape.bond/bonds',
41473
- apeswapLists: 'https://raw.githubusercontent.com/ApeSwapFinance/apeswap-lists/main',
41474
- mainUrl: 'https://ape.bond',
41475
- };
41476
- const useSDKConfig = (config) => {
41477
- var _a;
41478
- const { data } = useQuery({
41479
- queryKey: [QUERY_KEYS.SDK_CONFIG],
41480
- initialData: Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.config), { urls: Object.assign(Object.assign({}, defaultUrls), (_a = config === null || config === void 0 ? void 0 : config.config) === null || _a === void 0 ? void 0 : _a.urls) }),
41481
- });
41482
- return data;
41483
- };
41484
- const useURLByEnvironment = (key) => {
41485
- const config = useSDKConfig();
41486
- return config === null || config === void 0 ? void 0 : config.urls[key];
41487
- };
41488
-
41489
41494
  function useBondNFTData(id, billNftAddress, chainId) {
41490
41495
  const apiV2URL = useURLByEnvironment('apiV2');
41491
41496
  return useQuery({
@@ -71309,8 +71314,9 @@ const MenuSelect = (_a) => {
71309
71314
  display: 'flex',
71310
71315
  width: '100%',
71311
71316
  paddingRight: '4px',
71312
- } }, props, { children: options === null || options === void 0 ? void 0 : options.map((option) => {
71313
- return (jsx$2(SelectItem, { size: "xsm", value: option.value, children: jsx$2(Text, { sx: { fontWeight: 400, pl: '10px' }, children: option.label }) }, option.label));
71317
+ background: 'white2',
71318
+ } }, props, { className: "dropdown", children: options === null || options === void 0 ? void 0 : options.map((option) => {
71319
+ return (jsx$2(SelectItem, { size: "xsm", value: option.value, children: jsx$2(Text, { sx: { fontWeight: 400, pl: '10px' }, className: "menu-selector", children: option.label }) }, option.label));
71314
71320
  }) })));
71315
71321
  };
71316
71322
 
@@ -71353,7 +71359,7 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
71353
71359
  alignItems: 'center',
71354
71360
  width: '100%',
71355
71361
  justifyContent: 'space-between',
71356
- }, onClick: () => setIsOpen(!isOpen), children: [jsx$2(Text, { sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})` }), jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (jsx$2(Flex, { sx: {
71362
+ }, 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: {
71357
71363
  flexDirection: ['column', 'column', 'column'],
71358
71364
  position: 'absolute',
71359
71365
  top: '45px',
@@ -71387,7 +71393,7 @@ const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, f
71387
71393
  setChainFilterOption(['All Chains']);
71388
71394
  setFilterOption(newOption);
71389
71395
  }, [setChainFilterOption, setFilterOption]);
71390
- return (jsxs("div", { className: "bonds-filters", children: [jsx$2("div", { className: "desktop-rec-container", children: jsx$2(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), jsx$2("div", { className: "mobile-rec-container", children: jsx$2(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) }), jsx$2("div", { className: "network-filter", children: jsx$2(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), jsxs("div", { className: "clear-all-button", onClick: () => {
71396
+ return (jsxs("div", { className: "bonds-filters", children: [jsx$2("div", { className: "desktop-rec-container", children: jsx$2(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), jsx$2("div", { className: "mobile-rec-container", children: jsx$2(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters }) }), jsx$2("div", { className: "network-filter", children: jsx$2(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), jsxs("div", { className: "clear-all-button", onClick: () => {
71391
71397
  setChainFilterOption(['All Chains']);
71392
71398
  setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
71393
71399
  onHandleQueryChange('');
@@ -71395,7 +71401,7 @@ const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, f
71395
71401
  };
71396
71402
 
71397
71403
  const YourBondsMenu = ({ chainFilterOption, setChainFilterOption, filterOptions, filterOption, setFilterOption, setInputValue, inputValue, handleSort, }) => {
71398
- return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container" })] })] })] }));
71404
+ 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" })] })] })] }));
71399
71405
  };
71400
71406
 
71401
71407
  const YourBonds = () => {
@@ -72231,7 +72237,7 @@ const TokenSelectorModal = ({ bondPrincipalToken, bondEarnToken, handleCurrencyS
72231
72237
  const checksummedInput = isAddress(input);
72232
72238
  setSearchQuery(checksummedInput || input);
72233
72239
  }, [setSearchQuery]);
72234
- return (jsx$2(Modal, { onDismiss: onDismiss, title: "Tokens", children: jsx$2(Flex, { sx: {
72240
+ return (jsx$2(Modal, { onDismiss: onDismiss, title: "Tokens", className: "token-selector-modal", children: jsx$2(Flex, { sx: {
72235
72241
  flexDirection: 'column',
72236
72242
  maxHeight: 'none',
72237
72243
  height: 'auto',
@@ -72248,7 +72254,7 @@ const TokenSelectorModal = ({ bondPrincipalToken, bondEarnToken, handleCurrencyS
72248
72254
  }) })] }) }) }));
72249
72255
  };
72250
72256
 
72251
- const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId, handleMaxBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, bondEarnToken, }) => {
72257
+ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, bondEarnToken, modalVariant, }) => {
72252
72258
  var _a, _b;
72253
72259
  const tokenBalanceString = tokenBalance ? new BigNumber$1(tokenBalance).toPrecision(5) : 'loading';
72254
72260
  const splited = typeof selectedToken !== 'string' ? (_a = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.symbol) === null || _a === void 0 ? void 0 : _a.split('-') : undefined;
@@ -72256,7 +72262,7 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId,
72256
72262
  setTypedValue(event.target.value);
72257
72263
  };
72258
72264
  const [onTokenSelectorModal] = useModal(jsx$2(TokenSelectorModal, { bondPrincipalToken: bondPrincipalToken, bondEarnToken: bondEarnToken, handleCurrencySelect: handleCurrencySelect, chainId: chainId }), true, false, `tokenSelectorOnLiquidityModal${(_b = bondPrincipalToken === null || bondPrincipalToken === void 0 ? void 0 : bondPrincipalToken.address) === null || _b === void 0 ? void 0 : _b[chainId]}-${bondPrincipalToken === null || bondPrincipalToken === void 0 ? void 0 : bondPrincipalToken.symbol}`);
72259
- return (jsxs(Flex$1, { className: "modaltable-container buy-container", children: [jsxs(Flex$1, { className: "input-container inputrow", children: [jsx$2(Flex$1, { className: "input-container input", children: jsx$2(Input$1, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
72265
+ return (jsxs(Flex$1, { className: "token-selector-panel", children: [jsxs(Flex$1, { className: "input-container inputrow", children: [jsx$2(Flex$1, { className: "input-container input", children: jsx$2(Input$1, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
72260
72266
  if (v.currentTarget.value.includes(',')) {
72261
72267
  v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
72262
72268
  }
@@ -72270,7 +72276,9 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId,
72270
72276
  !!v.currentTarget.value && isNumber$1(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
72271
72277
  ? v.currentTarget.value
72272
72278
  : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
72273
- } }) }), jsxs(Flex$1, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: { cursor: enableZap ? 'pointer' : 'default' }, children: [jsxs(Flex$1, { children: [jsx$2(Flex$1, { className: "input-container bondicon", children: lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx$2(TokenImage, { symbol: getSymbol(selectedToken, chainId), size: 28, chain: chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: getSymbol(selectedToken, chainId) })] }), enableZap && (jsx$2(Flex$1, { sx: { mr: '8px' }, children: jsx$2(Svg, { icon: "caret" }) }))] })] }), tokenBalance && (jsxs(Flex$1, { className: "input-container balancerow", children: [jsx$2(Flex$1, { children: selectedTokenPrice && typedValue ? `$${(selectedTokenPrice * parseFloat(typedValue)).toFixed(2)}` : '' }), jsxs(Flex$1, { children: [jsxs(Flex$1, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsx$2(Flex$1, { className: "balancerow max", children: tokenBalance !== '0' && handleMaxBtn && (jsx$2(Button, { className: "max-button", onClick: handleMaxBtn, children: "Max" })) })] })] }))] }));
72279
+ } }) }), jsxs(Flex$1, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: { cursor: enableZap ? 'pointer' : 'default' }, children: [jsxs(Flex$1, { children: [jsx$2(Flex$1, { className: "input-container bondicon", children: lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx$2(TokenImage, { symbol: getSymbol(selectedToken, chainId), size: 28, chain: chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: getSymbol(selectedToken, chainId) })] }), enableZap && (jsx$2(Flex$1, { sx: { mr: '8px' }, children: jsx$2(Svg, { icon: "caret" }) }))] })] }), jsxs(Flex$1, { className: "input-container balancerow", children: [jsx$2(Flex$1, { children: selectedTokenPrice && typedValue
72280
+ ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`
72281
+ : '' }), jsxs(Flex$1, { children: [jsxs(Flex$1, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsxs(Flex$1, { className: "balancerow max", children: [tokenBalance && tokenBalance !== '0' && handleValueBtn && modalVariant !== 'alt' && (jsx$2(Fragment$1, { children: jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" }) })), tokenBalance && tokenBalance !== '0' && handleValueBtn && modalVariant === 'alt' && (jsxs(Flex$1, { children: [jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) / 4).toString()), children: "25%" }), jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) / 2).toString()), children: "50%" }), jsx$2(Button, { className: "max-button", onClick: () => handleValueBtn((parseFloat(tokenBalance) * 0.75).toString()), children: "75%" }), jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" })] }))] })] })] })] }));
72274
72282
  };
72275
72283
 
72276
72284
  var NetworkNames;
@@ -72864,7 +72872,7 @@ const ZapModal = ({ onDismiss, outputToken, account, chainId }) => {
72864
72872
  });
72865
72873
  });
72866
72874
  };
72867
- return (jsxs(Modal, { children: [jsx$2(ModalHeader, { onDismiss: onDismiss, children: jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '30px' }, children: ["Zap ", jsx$2(Svg, { icon: "ZapIcon" })] }), jsx$2(Flex, { onClick: onOpenSlippageModal, sx: { mr: '15px' }, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', pt: '10px', gap: '10px' }, children: [jsx$2(Flex, { sx: { position: 'relative' }, children: jsx$2(Text, { children: "From:" }) }), jsx$2(Flex, { sx: { width: '100%', height: 'auto', justifyContent: 'space-between' }, children: jsx$2(TokenSelectorPanel, { typedValue: typedValue, setTypedValue: setTypedValue, selectedToken: inputToken, handleMaxBtn: handleMaxInput, handleCurrencySelect: handleCurrencySelect, chainId: chainId, enableZap: true, tokenBalance: inputTokenBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, bondEarnToken: outputToken }) }), jsxs(Flex, { sx: { position: 'relative', mt: '10px' }, children: [jsx$2(Text, { children: "To:" }), jsx$2(Box$1, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsx$2(Svg, { icon: "ZapArrow" }) })] }), jsx$2(TokenSelectorPanel, { typedValue: isWrap ? typedValue : outputValue === 0 ? '' : outputValue.toFixed(18), setTypedValue: () => null, selectedToken: outputToken, handleCurrencySelect: () => null, chainId: chainId, enableZap: false, tokenBalance: outputTokenBalanceString, selectedTokenPrice: outputTokenPrice === null || outputTokenPrice === void 0 ? void 0 : outputTokenPrice.price }), jsx$2(Flex, { className: "button-container zap", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== chainId ? (jsxs(Button, { className: "switch-button zap", onClick: (event) => {
72875
+ return (jsxs(Modal, { children: [jsx$2(ModalHeader, { onDismiss: onDismiss, children: jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '30px' }, children: ["Zap ", jsx$2(Svg, { icon: "ZapIcon" })] }), jsx$2(Flex, { onClick: onOpenSlippageModal, sx: { mr: '15px' }, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', pt: '10px', gap: '10px' }, children: [jsx$2(Flex, { sx: { position: 'relative' }, children: jsx$2(Text, { children: "From:" }) }), jsx$2(Flex, { sx: { width: '100%', height: 'auto', justifyContent: 'space-between' }, children: jsx$2(TokenSelectorPanel, { typedValue: typedValue, setTypedValue: setTypedValue, selectedToken: inputToken, handleValueBtn: handleMaxInput, handleCurrencySelect: handleCurrencySelect, chainId: chainId, enableZap: true, tokenBalance: inputTokenBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, bondEarnToken: outputToken }) }), jsxs(Flex, { sx: { position: 'relative', mt: '10px' }, children: [jsx$2(Text, { children: "To:" }), jsx$2(Box$1, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsx$2(Svg, { icon: "ZapArrow" }) })] }), jsx$2(TokenSelectorPanel, { typedValue: isWrap ? typedValue : outputValue === 0 ? '' : outputValue.toFixed(18), setTypedValue: () => null, selectedToken: outputToken, handleCurrencySelect: () => null, chainId: chainId, enableZap: false, tokenBalance: outputTokenBalanceString, selectedTokenPrice: outputTokenPrice === null || outputTokenPrice === void 0 ? void 0 : outputTokenPrice.price }), jsx$2(Flex, { className: "button-container zap", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== chainId ? (jsxs(Button, { className: "switch-button zap", onClick: (event) => {
72868
72876
  event.stopPropagation();
72869
72877
  switchChain({ chainId: chainId });
72870
72878
  }, children: ["Switch to ", NETWORK_LABEL[chainId]] })) : approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING ? (jsx$2(Button, { onClick: handleApprove, fullWidth: true, load: approvalState === ApprovalState.PENDING, disable: approvalState === ApprovalState.PENDING, children: pendingTx || approvalState === ApprovalState.PENDING ? 'ENABLING' : 'ENABLE' })) : (jsx$2(Button, { onClick: soulZapCallback, fullWidth: true, load: pendingTx || fetchingQuote || isConfirming, disabled: pendingTx || fetchingQuote || !zapData || !hasEnoughBalance || isConfirming || zapError, children: zapError
@@ -72880,7 +72888,7 @@ const AccordionText = ({ isVisible = false }) => {
72880
72888
  if (!isVisible) {
72881
72889
  return null;
72882
72890
  }
72883
- 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("p", { 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("p", { 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("p", { 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." })] }) }) })] }));
72891
+ 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." })] }) }) })] }));
72884
72892
  };
72885
72893
 
72886
72894
  const useSoulZapBondQuote = (typedValue, inputCurrency, bond, account) => {
@@ -73095,7 +73103,7 @@ const SafeHTMLComponent = ({ html }) => {
73095
73103
 
73096
73104
  const ProjectDescription = ({ description }) => {
73097
73105
  const [isOpen, setIsOpen] = useState(false);
73098
- return (jsxs(Flex, { className: "modaltable-container description-container", children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx$2(Text, { sx: {
73106
+ return (jsxs(Flex, { className: "description-container", children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx$2(Text, { sx: {
73099
73107
  fontSize: ['12px', '12px', '12px', '14px'],
73100
73108
  mt: '10px',
73101
73109
  lineHeight: ['18px', '18px', '18px', '21px'],
@@ -73119,12 +73127,60 @@ const BondModalHeaderAlt = ({ bondData, onDismiss, showProjectInfoButton, }) =>
73119
73127
  }
73120
73128
  onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
73121
73129
  };
73122
- return (jsx$2(Flex, { className: "modaltable-container title-container", children: jsx$2(Flex, { className: "slipagge-close-icons", sx: { flexDirection: 'row' }, children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { mb: '-5px', pr: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose })] })) : (jsx$2(Flex, { sx: {}, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) }) }));
73130
+ // const handleProjectViewNavigation = () => {
73131
+ // window.open(`${window.location.origin}/bonds/${bondData.billAddress}/${bondData.chainId}`, '_self')
73132
+ // track({
73133
+ // event: 'projectInfoClick',
73134
+ // chain: bondData.chainId,
73135
+ // data: {
73136
+ // cat: 'Modal',
73137
+ // bond: bondData.earnToken.symbol,
73138
+ // bondChain: bondData.chainId,
73139
+ // },
73140
+ // })
73141
+ // }
73142
+ return (jsx$2(Flex, { className: "modaltable-container title-container", children: jsx$2(Flex, { className: "slipagge-close-icons", sx: { flexDirection: 'row' }, children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: { pr: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose })] })) : (jsx$2(Flex, { sx: {}, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) }) }));
73123
73143
  };
73124
73144
 
73125
- const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
73126
- // ??
73127
- accordionTitle = 'What are Bonds?', accordionBody = 'Body', }) => {
73145
+ const ImageAndShortDescription = ({ bondData, onDismiss }) => {
73146
+ var _a;
73147
+ const SDKConfig = useSDKConfig();
73148
+ // Swiper logic for the alt view
73149
+ const [activeSlide, setActiveSlide] = useState(0);
73150
+ const { swiper, setSwiper } = useSwiper();
73151
+ const imagesLength = 3;
73152
+ const handleSlide = (event) => {
73153
+ const slideNumber = getDotPos(event.activeIndex, imagesLength);
73154
+ setActiveSlide(slideNumber);
73155
+ };
73156
+ const slideTo = (index) => {
73157
+ setActiveSlide(index);
73158
+ swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
73159
+ };
73160
+ return (jsxs(Flex, { sx: { maxWidth: ['unset', 'unset', 'unset', '500px'], flexDirection: 'column', alignItems: 'center' }, children: [jsxs(Flex, { sx: {
73161
+ flexDirection: 'column',
73162
+ width: '100%',
73163
+ alignItems: 'center',
73164
+ overflow: 'hidden',
73165
+ position: 'relative',
73166
+ }, 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: {
73167
+ width: '100%',
73168
+ display: 'flex',
73169
+ justifyContent: 'center',
73170
+ }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 0), jsx$2(SwiperSlide, { style: {
73171
+ width: '100%',
73172
+ display: 'flex',
73173
+ justifyContent: 'center',
73174
+ }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 1), jsx$2(SwiperSlide, { style: {
73175
+ width: '100%',
73176
+ display: 'flex',
73177
+ justifyContent: 'center',
73178
+ }, 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) => {
73179
+ return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
73180
+ }) })] }), 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 }) })] }));
73181
+ };
73182
+
73183
+ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) => {
73128
73184
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
73129
73185
  const SDKConfig = useSDKConfig();
73130
73186
  // State
@@ -73314,7 +73370,7 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', }) => {
73314
73370
  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');
73315
73371
  }
73316
73372
  };
73317
- return (jsx$2(Modal, { className: "modal", onDismiss: onDismiss, children: modalVariant === 'standard' ? (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content", children: [typeof window !== 'undefined' && window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white', fontSize: '14px', mb: '10px' }, children: ["Dev mode - Current view: \"standard\"", jsx$2(Text, { onClick: () => setModalVariant('alt'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(BondCards, { bondData: bondData }), jsx$2(Estimations, { bondData: bondData, inputValue: inputValue, inputToken: inputToken, estimatedOutput: estimatedOutput, inputTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { className: "modaltable-container button-container", children: [jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? handleOpenZapModal() : openExternal(), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) }), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
73373
+ return (jsx$2(Modal, { className: "modal", onDismiss: onDismiss, children: modalVariant === 'standard' ? (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content", children: [typeof window !== 'undefined' && window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white', fontSize: '14px', mb: '10px' }, children: ["Dev mode - Current view: \"standard\"", jsx$2(Text, { onClick: () => setModalVariant('alt'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(BondCards, { bondData: bondData }), jsx$2(Estimations, { bondData: bondData, inputValue: inputValue, inputToken: inputToken, estimatedOutput: estimatedOutput, inputTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { className: "modaltable-container button-container", children: [jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? handleOpenZapModal() : openExternal(), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) }), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
73318
73374
  event.stopPropagation();
73319
73375
  switchChain({ chainId: bondData.chainId });
73320
73376
  }, 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 ||
@@ -73327,15 +73383,35 @@ accordionTitle = 'What are Bonds?', accordionBody = 'Body', }) => {
73327
73383
  (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
73328
73384
  !account ||
73329
73385
  !inputValue ||
73330
- parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] })] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content font-small gpt", children: [typeof window !== 'undefined' && window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"alt\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '20px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _k !== void 0 ? _k : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_l = bondData.showcaseTokenName) !== null && _l !== void 0 ? _l : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { className: "modal-youreceive-row", sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { className: "modal-youreceive-textbox", children: ["You will receive:", jsx$2(Flex, { className: "modal-youreceive-tokenimage", sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : bondData.earnToken.symbol, size: 20 }) }), jsxs("span", { className: "modal-receive-text", children: [(lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, " + \u00A0", (youGet(bondData, inputValue) -
73331
- lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0)] }), jsx$2("span", { className: "text-highlight", children: "\u00A0additional" })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button button-narrow", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
73332
- event.stopPropagation();
73333
- switchChain({ chainId: bondData.chainId });
73334
- }, children: `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsxs(Button, { className: "action-button", load: load, disabled: load || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account || !inputValue || parseFloat(inputValue) === 0, onClick: handleBothPurchases, children: ["buy", ' ', isZap ? (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 ||
73335
- (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
73336
- !account ||
73337
- !inputValue ||
73338
- parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue).toFixed(0), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date())] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_o = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _o !== void 0 ? _o : 0).days * 86400000))] }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, onClick: () => setAccordionVisible(!accordionVisible), 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 }) }))] })) })) }));
73386
+ parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] })] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Fragment$1, { children: [jsxs(Flex, { className: "modal-content font-small", children: [typeof window !== 'undefined' && window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"alt\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: ['0px', '0px', '0px', '20px'] }, children: [jsx$2(ImageAndShortDescription, { bondData: bondData, onDismiss: onDismiss }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center', display: ['none', 'none', 'none', 'flex'] }, children: [jsx$2(Flex, { sx: { width: ['50%', '50%', '50%', '50%'], ml: ['0px', '0px', '0px', '10px'] }, children: jsxs(Flex, { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [jsx$2(Flex, { sx: { fontSize: '26px', fontWeight: 700, mr: '4px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), jsx$2(Svg, { width: 20, height: 20, icon: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _k !== void 0 ? _k : 'question' })] }) }), jsxs(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: (_l = bondData.showcaseTokenName) !== null && _l !== void 0 ? _l : bondData.earnToken.symbol, size: 30 }), jsx$2("span", { className: "modal-marketprice-token", children: bondData.earnToken.symbol }), jsx$2("hr", { className: "fading-hr rotate-hr" }), jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }), jsx$2("hr", { className: "fading-hr rotate-hr" })] }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px', mx: '10px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: (value) => setInputValue(value), handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, modalVariant: modalVariant }), jsxs(Flex, { className: "modal-youreceive-row", sx: { justifyContent: 'space-between', alignItems: 'center', fontSize: '14px' }, children: [jsxs(Flex, { className: "modal-youreceive-textbox", children: [jsx$2(Flex, { sx: { opacity: 0.8 }, children: "You will receive:" }), jsxs(Flex, { children: [jsx$2(Flex, { className: "modal-youreceive-tokenimage", sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : bondData.earnToken.symbol, size: 20 }) }), jsxs(Flex, { className: "modal-receive-text", sx: { opacity: 0.8 }, children: [formatNumber$2((lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0)), ' ', bondData.earnToken.symbol, " + \u00A0", formatNumber$2((youGet(bondData, inputValue) -
73387
+ lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0))] }), jsx$2("span", { className: "text-highlight", children: "\u00A0Additional" })] })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button button-narrow", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
73388
+ event.stopPropagation();
73389
+ switchChain({ chainId: bondData.chainId });
73390
+ }, 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 ||
73391
+ (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
73392
+ !account ||
73393
+ !inputValue ||
73394
+ parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] }), jsx$2(Flex, { sx: { width: '100%', margin: ['0', '0', '0', '10px 0'] }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%', fontSize: '14px', display: ['none', 'none', 'none', 'flex'] }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column', opacity: 0.8 }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column', opacity: 0.8 }, children: ["If purchased from market:", ' ', formatNumber$2((lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0)), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', formatNumber$2(youGet(bondData, inputValue).toFixed(0)), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] }), jsxs(Flex, { sx: {
73395
+ width: '100%',
73396
+ fontSize: '14px',
73397
+ display: ['flex', 'flex', 'flex', 'none'],
73398
+ flexDirection: 'column',
73399
+ }, children: [jsxs(Flex, { sx: { opacity: 0.8 }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString())] }), jsxs(Flex, { sx: { opacity: 0.8 }, children: ["If purchased from market:", ' ', formatNumber$2((lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0)), ' ', bondData.earnToken.symbol] }), jsxs(Flex, { sx: { mt: '10px' }, children: [jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsxs(Flex, { sx: { mt: '10px' }, children: [jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', formatNumber$2(youGet(bondData, inputValue).toFixed(0)), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '100%', flexDirection: 'row', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: {
73400
+ width: '100%',
73401
+ justifyContent: 'center',
73402
+ flexDirection: ['column', 'column', 'column', 'row'],
73403
+ }, 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: {
73404
+ width: '100%',
73405
+ justifyContent: 'center',
73406
+ flexDirection: ['column', 'column', 'column', 'row'],
73407
+ }, children: [jsx$2(Flex, { className: "modal-footer-header", sx: { justifyContent: ['flex-end', 'flex-end', 'flex-end', 'flex-start'] }, children: "Vesting end Date:\u00A0" }), jsxs(Flex, { sx: { justifyContent: ['flex-end', 'flex-end', 'flex-end', 'flex-start'] }, children: [' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_o = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _o !== void 0 ? _o : 0).days * 86400000))] })] })] }), jsx$2("hr", { className: "fading-hr hide-mobile" }), jsxs(Flex, { sx: {
73408
+ width: '100%',
73409
+ justifyContent: ['space-between', 'space-between', 'space-between', 'space-around'],
73410
+ }, 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: {
73411
+ justifyContent: 'center',
73412
+ cursor: 'pointer',
73413
+ alignItems: 'center',
73414
+ }, 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 }) }))] })) })) }));
73339
73415
  };
73340
73416
 
73341
73417
  /*
@@ -73568,7 +73644,7 @@ const BondRow = ({ bond }) => {
73568
73644
  const tokens = new BigNumber$1(tokensRemaining);
73569
73645
  return tokens.times(payoutTokenPrice);
73570
73646
  };
73571
- return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container", children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: `discount-column ${getDiscountColor(discount)}`, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' }), jsx$2("div", { className: "arr-column", children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' }), jsx$2("div", { className: "terms-column", children: ((_a = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _a === void 0 ? void 0 : _a.days) ? `${(_b = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _b === void 0 ? void 0 : _b.days} D` : '-' }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
73647
+ return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container bond-market", children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: `discount-column ${getDiscountColor(discount)}`, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' }), jsx$2("div", { className: "arr-column", children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' }), jsx$2("div", { className: "terms-column", children: ((_a = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _a === void 0 ? void 0 : _a.days) ? `${(_b = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _b === void 0 ? void 0 : _b.days} D` : '-' }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
73572
73648
  width: '127px',
73573
73649
  height: '25px',
73574
73650
  flexDirection: 'column',
@@ -73577,7 +73653,7 @@ const BondRow = ({ bond }) => {
73577
73653
  }, showTooltip: true, toolTip: `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} (${formatDollar({
73578
73654
  num: remainingTokensUsd(bond).toNumber(),
73579
73655
  isPrice: true,
73580
- })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_e = (_d = (_c = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _e !== void 0 ? _e : '', earnTokenSymbol: (_g = (_f = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _f === void 0 ? void 0 : _f.symbol) !== null && _g !== void 0 ? _g : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
73656
+ })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_e = (_d = (_c = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _e !== void 0 ? _e : '', earnTokenSymbol: (_g = (_f = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _f === void 0 ? void 0 : _f.symbol) !== null && _g !== void 0 ? _g : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
73581
73657
  };
73582
73658
 
73583
73659
  const HotBondCard = ({ bond }) => {
@@ -73596,7 +73672,7 @@ const HotBondCard = ({ bond }) => {
73596
73672
  },
73597
73673
  });
73598
73674
  };
73599
- return (jsx$2(Flex, { sx: styles$a.desktopCard, onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Discount" }), jsx$2(Flex, { className: `${getDiscountColor(discount)}`, sx: { width: '100%', justifyContent: 'center' }, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
73675
+ return (jsx$2(Flex, { sx: styles$a.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Discount" }), jsx$2(Flex, { className: `${getDiscountColor(discount)}`, sx: { width: '100%', justifyContent: 'center' }, children: discount !== undefined ? `${discount === null || discount === void 0 ? void 0 : discount.toFixed(2)}%` : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
73600
73676
  };
73601
73677
 
73602
73678
  function useHotBondContracts() {
@@ -73693,7 +73769,7 @@ const BondRowsByChain = ({ bonds, hideTitles }) => {
73693
73769
  const SDKConfig = useSDKConfig();
73694
73770
  const validatedChains = (_a = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _a === void 0 ? void 0 : _a.filter((chain) => MAINNET_CHAINS.includes(chain));
73695
73771
  return (jsx$2(Flex$1, { className: "bondrowsbychain", children: validatedChains === null || validatedChains === void 0 ? void 0 : validatedChains.map((chain) => {
73696
- return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hideTitles: hideTitles, showHotBonds: chain === types.ChainId.BASE || chain === types.ChainId.MAINNET }, chain));
73772
+ return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hideTitles: hideTitles, showHotBonds: SDKConfig.useHotBonds ? chain === types.ChainId.BASE || chain === types.ChainId.MAINNET : false }, chain));
73697
73773
  }) }));
73698
73774
  };
73699
73775
 
@@ -73741,7 +73817,7 @@ const BuyAgainRow = () => {
73741
73817
  background: 'linear-gradient(0deg, rgba(170, 128, 249, 0.20) 0%, rgba(170, 128, 249, 0.20) 100%), var(--Neutral-Elevation-2, #1F1D29)',
73742
73818
  borderRadius: 'normal',
73743
73819
  flexDirection: 'column',
73744
- }, children: [jsx$2(Flex, { sx: {
73820
+ }, children: [jsx$2(Flex, { className: "buy-again-header", sx: {
73745
73821
  width: '100%',
73746
73822
  fontSize: '12px',
73747
73823
  fontWeight: 500,
@@ -73784,7 +73860,7 @@ const styles$7 = {
73784
73860
  const SmallRecommendationCard = ({ recommendation }) => {
73785
73861
  var _a;
73786
73862
  const vestingTime = getTimePeriods((_a = recommendation.vestingTerm) !== null && _a !== void 0 ? _a : 0, true);
73787
- return (jsxs(Flex, { sx: styles$7.smallCardContainer, onClick: () => window.open(`${window.location.origin}/bonds/${recommendation.contractAddress}/${recommendation.chainId}`, '_self'), children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx$2(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles$7.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: styles$7.subTitle, children: "Discount" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.discount > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.discount.toFixed(2), "%"] })] })] }));
73863
+ return (jsxs(Flex, { sx: styles$7.smallCardContainer, onClick: () => window.open(`${window.location.origin}/bonds?bondAddress=${recommendation.contractAddress}&bondChain=${recommendation.chainId}`, '_self'), children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx$2(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles$7.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: styles$7.subTitle, children: "Discount" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.discount > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.discount.toFixed(2), "%"] })] })] }));
73788
73864
  };
73789
73865
 
73790
73866
  const RecommendationCards$1 = () => {
@@ -73827,7 +73903,7 @@ const RecommendationCards$1 = () => {
73827
73903
  color: 'grey',
73828
73904
  fontSize: ['11px'],
73829
73905
  fontWeight: 500,
73830
- }, children: "BONDS MARKETS:" }), jsx$2(RecommendationSelector, { options: options, activeOption: activeOption, setActiveOption: setActiveOption })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(Image, { width: 190, height: 20, alt: "poweredBy", src: "/images/bills/powered.png", sx: {
73906
+ }, children: "BONDS MARKETS:" }), jsx$2(RecommendationSelector, { options: options, activeOption: activeOption, setActiveOption: setActiveOption })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(Image$1, { width: 190, height: 20, alt: "poweredBy", src: "/images/bills/powered.png", sx: {
73831
73907
  width: '190px',
73832
73908
  height: '20px',
73833
73909
  cursor: 'pointer',
@@ -73846,7 +73922,7 @@ const FavIcon = ({ filterOption, setFilterOption, }) => {
73846
73922
  const handleFilterOption = (newOption) => {
73847
73923
  setFilterOption(newOption);
73848
73924
  };
73849
- return (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }, onClick: () => {
73925
+ return (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }, className: "search-fav-icon", onClick: () => {
73850
73926
  handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL');
73851
73927
  }, children: jsx$2(AnimatePresence, { mode: "wait", children: jsx$2(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex', alignItems: 'center' }, children: filterOption === 'FAVORITES' ? (jsx$2(Svg, { icon: "StarFilled", width: 22, height: 22 })) : (jsx$2(Svg, { icon: "Star", width: 20, height: 20 })) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
73852
73928
  };
@@ -73869,6 +73945,7 @@ const Bonds = () => {
73869
73945
  const { data: allBonds } = useBondsList();
73870
73946
  const { data: chainFilterOption, setChainFilterOption } = useChainFilterOption();
73871
73947
  const { data: tokenPrices } = useTokenPrices();
73948
+ const SDKConfig = useSDKConfig();
73872
73949
  useEffect(() => {
73873
73950
  //@ts-ignore
73874
73951
  if ((bondData === null || bondData === void 0 ? void 0 : bondData.length) === 0 && (tokenPrices === null || tokenPrices === void 0 ? void 0 : tokenPrices.length) > 0 && (allBonds === null || allBonds === void 0 ? void 0 : allBonds.length) > 0) {
@@ -73882,7 +73959,7 @@ const Bonds = () => {
73882
73959
  const [filterOption, setFilterOption] = useState('ALL');
73883
73960
  const sortedBonds = sortBonds(sortConfig, bondData);
73884
73961
  const topTags = useTopTags(sortedBonds);
73885
- const filterOptions = ['ALL', 'FAVORITES', ...topTags, 'SOLD OUT'];
73962
+ const filterOptions = SDKConfig.referenceId !== 'seedify' ? ['ALL', 'FAVORITES', ...topTags, 'SOLD OUT'] : ['ALL', ...topTags, 'SOLD OUT'];
73886
73963
  const billsToRender = useMemo(() => {
73887
73964
  let billsToReturn = filterOption === 'SOLD OUT' ? (allBonds !== null && allBonds !== void 0 ? allBonds : []) : (sortedBonds !== null && sortedBonds !== void 0 ? sortedBonds : []);
73888
73965
  if (searchQuery) {
@@ -90502,7 +90579,7 @@ const ProjectView = ({ bondAddress, bondChain, historicalPrices }) => {
90502
90579
  p: '20px',
90503
90580
  borderRadius: '10px',
90504
90581
  mt: '5px',
90505
- }, children: [jsx$2(BondModalHeader, { bondData: bondData }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(Estimations, { bondData: bondData, inputValue: inputValue, inputToken: inputToken, estimatedOutput: estimatedOutput, inputTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { className: "modaltable-container button-container", children: [jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? handleOpenZapModal() : openExternal(), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) }), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
90582
+ }, children: [jsx$2(BondModalHeader, { bondData: bondData }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(Estimations, { bondData: bondData, inputValue: inputValue, inputToken: inputToken, estimatedOutput: estimatedOutput, inputTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { className: "modaltable-container button-container", children: [jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? handleOpenZapModal() : openExternal(), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) }), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
90506
90583
  event.stopPropagation();
90507
90584
  switchChain({ chainId: bondData.chainId });
90508
90585
  }, 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 ||
@@ -90523,6 +90600,779 @@ const ProjectViewWithProviders = (props) => {
90523
90600
  return (jsx$2(Providers, { children: jsx$2(ProjectView, Object.assign({}, props)) }));
90524
90601
  };
90525
90602
 
90603
+ var domToImage = {exports: {}};
90604
+
90605
+ (function (module) {
90606
+ (function (global) {
90607
+
90608
+ var util = newUtil();
90609
+ var inliner = newInliner();
90610
+ var fontFaces = newFontFaces();
90611
+ var images = newImages();
90612
+
90613
+ // Default impl options
90614
+ var defaultOptions = {
90615
+ // Default is to fail on error, no placeholder
90616
+ imagePlaceholder: undefined,
90617
+ // Default cache bust is false, it will use the cache
90618
+ cacheBust: false
90619
+ };
90620
+
90621
+ var domtoimage = {
90622
+ toSvg: toSvg,
90623
+ toPng: toPng,
90624
+ toJpeg: toJpeg,
90625
+ toBlob: toBlob,
90626
+ toPixelData: toPixelData,
90627
+ impl: {
90628
+ fontFaces: fontFaces,
90629
+ images: images,
90630
+ util: util,
90631
+ inliner: inliner,
90632
+ options: {}
90633
+ }
90634
+ };
90635
+
90636
+ module.exports = domtoimage;
90637
+
90638
+
90639
+ /**
90640
+ * @param {Node} node - The DOM Node object to render
90641
+ * @param {Object} options - Rendering options
90642
+ * @param {Function} options.filter - Should return true if passed node should be included in the output
90643
+ * (excluding node means excluding it's children as well). Not called on the root node.
90644
+ * @param {String} options.bgcolor - color for the background, any valid CSS color value.
90645
+ * @param {Number} options.width - width to be applied to node before rendering.
90646
+ * @param {Number} options.height - height to be applied to node before rendering.
90647
+ * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
90648
+ * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
90649
+ defaults to 1.0.
90650
+ * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
90651
+ * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
90652
+ * @return {Promise} - A promise that is fulfilled with a SVG image data URL
90653
+ * */
90654
+ function toSvg(node, options) {
90655
+ options = options || {};
90656
+ copyOptions(options);
90657
+ return Promise.resolve(node)
90658
+ .then(function (node) {
90659
+ return cloneNode(node, options.filter, true);
90660
+ })
90661
+ .then(embedFonts)
90662
+ .then(inlineImages)
90663
+ .then(applyOptions)
90664
+ .then(function (clone) {
90665
+ return makeSvgDataUri(clone,
90666
+ options.width || util.width(node),
90667
+ options.height || util.height(node)
90668
+ );
90669
+ });
90670
+
90671
+ function applyOptions(clone) {
90672
+ if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
90673
+
90674
+ if (options.width) clone.style.width = options.width + 'px';
90675
+ if (options.height) clone.style.height = options.height + 'px';
90676
+
90677
+ if (options.style)
90678
+ Object.keys(options.style).forEach(function (property) {
90679
+ clone.style[property] = options.style[property];
90680
+ });
90681
+
90682
+ return clone;
90683
+ }
90684
+ }
90685
+
90686
+ /**
90687
+ * @param {Node} node - The DOM Node object to render
90688
+ * @param {Object} options - Rendering options, @see {@link toSvg}
90689
+ * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
90690
+ * */
90691
+ function toPixelData(node, options) {
90692
+ return draw(node, options || {})
90693
+ .then(function (canvas) {
90694
+ return canvas.getContext('2d').getImageData(
90695
+ 0,
90696
+ 0,
90697
+ util.width(node),
90698
+ util.height(node)
90699
+ ).data;
90700
+ });
90701
+ }
90702
+
90703
+ /**
90704
+ * @param {Node} node - The DOM Node object to render
90705
+ * @param {Object} options - Rendering options, @see {@link toSvg}
90706
+ * @return {Promise} - A promise that is fulfilled with a PNG image data URL
90707
+ * */
90708
+ function toPng(node, options) {
90709
+ return draw(node, options || {})
90710
+ .then(function (canvas) {
90711
+ return canvas.toDataURL();
90712
+ });
90713
+ }
90714
+
90715
+ /**
90716
+ * @param {Node} node - The DOM Node object to render
90717
+ * @param {Object} options - Rendering options, @see {@link toSvg}
90718
+ * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
90719
+ * */
90720
+ function toJpeg(node, options) {
90721
+ options = options || {};
90722
+ return draw(node, options)
90723
+ .then(function (canvas) {
90724
+ return canvas.toDataURL('image/jpeg', options.quality || 1.0);
90725
+ });
90726
+ }
90727
+
90728
+ /**
90729
+ * @param {Node} node - The DOM Node object to render
90730
+ * @param {Object} options - Rendering options, @see {@link toSvg}
90731
+ * @return {Promise} - A promise that is fulfilled with a PNG image blob
90732
+ * */
90733
+ function toBlob(node, options) {
90734
+ return draw(node, options || {})
90735
+ .then(util.canvasToBlob);
90736
+ }
90737
+
90738
+ function copyOptions(options) {
90739
+ // Copy options to impl options for use in impl
90740
+ if(typeof(options.imagePlaceholder) === 'undefined') {
90741
+ domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
90742
+ } else {
90743
+ domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
90744
+ }
90745
+
90746
+ if(typeof(options.cacheBust) === 'undefined') {
90747
+ domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
90748
+ } else {
90749
+ domtoimage.impl.options.cacheBust = options.cacheBust;
90750
+ }
90751
+ }
90752
+
90753
+ function draw(domNode, options) {
90754
+ return toSvg(domNode, options)
90755
+ .then(util.makeImage)
90756
+ .then(util.delay(100))
90757
+ .then(function (image) {
90758
+ var canvas = newCanvas(domNode);
90759
+ canvas.getContext('2d').drawImage(image, 0, 0);
90760
+ return canvas;
90761
+ });
90762
+
90763
+ function newCanvas(domNode) {
90764
+ var canvas = document.createElement('canvas');
90765
+ canvas.width = options.width || util.width(domNode);
90766
+ canvas.height = options.height || util.height(domNode);
90767
+
90768
+ if (options.bgcolor) {
90769
+ var ctx = canvas.getContext('2d');
90770
+ ctx.fillStyle = options.bgcolor;
90771
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
90772
+ }
90773
+
90774
+ return canvas;
90775
+ }
90776
+ }
90777
+
90778
+ function cloneNode(node, filter, root) {
90779
+ if (!root && filter && !filter(node)) return Promise.resolve();
90780
+
90781
+ return Promise.resolve(node)
90782
+ .then(makeNodeCopy)
90783
+ .then(function (clone) {
90784
+ return cloneChildren(node, clone, filter);
90785
+ })
90786
+ .then(function (clone) {
90787
+ return processClone(node, clone);
90788
+ });
90789
+
90790
+ function makeNodeCopy(node) {
90791
+ if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
90792
+ return node.cloneNode(false);
90793
+ }
90794
+
90795
+ function cloneChildren(original, clone, filter) {
90796
+ var children = original.childNodes;
90797
+ if (children.length === 0) return Promise.resolve(clone);
90798
+
90799
+ return cloneChildrenInOrder(clone, util.asArray(children), filter)
90800
+ .then(function () {
90801
+ return clone;
90802
+ });
90803
+
90804
+ function cloneChildrenInOrder(parent, children, filter) {
90805
+ var done = Promise.resolve();
90806
+ children.forEach(function (child) {
90807
+ done = done
90808
+ .then(function () {
90809
+ return cloneNode(child, filter);
90810
+ })
90811
+ .then(function (childClone) {
90812
+ if (childClone) parent.appendChild(childClone);
90813
+ });
90814
+ });
90815
+ return done;
90816
+ }
90817
+ }
90818
+
90819
+ function processClone(original, clone) {
90820
+ if (!(clone instanceof Element)) return clone;
90821
+
90822
+ return Promise.resolve()
90823
+ .then(cloneStyle)
90824
+ .then(clonePseudoElements)
90825
+ .then(copyUserInput)
90826
+ .then(fixSvg)
90827
+ .then(function () {
90828
+ return clone;
90829
+ });
90830
+
90831
+ function cloneStyle() {
90832
+ copyStyle(window.getComputedStyle(original), clone.style);
90833
+
90834
+ function copyStyle(source, target) {
90835
+ if (source.cssText) target.cssText = source.cssText;
90836
+ else copyProperties(source, target);
90837
+
90838
+ function copyProperties(source, target) {
90839
+ util.asArray(source).forEach(function (name) {
90840
+ target.setProperty(
90841
+ name,
90842
+ source.getPropertyValue(name),
90843
+ source.getPropertyPriority(name)
90844
+ );
90845
+ });
90846
+ }
90847
+ }
90848
+ }
90849
+
90850
+ function clonePseudoElements() {
90851
+ [':before', ':after'].forEach(function (element) {
90852
+ clonePseudoElement(element);
90853
+ });
90854
+
90855
+ function clonePseudoElement(element) {
90856
+ var style = window.getComputedStyle(original, element);
90857
+ var content = style.getPropertyValue('content');
90858
+
90859
+ if (content === '' || content === 'none') return;
90860
+
90861
+ var className = util.uid();
90862
+ clone.className = clone.className + ' ' + className;
90863
+ var styleElement = document.createElement('style');
90864
+ styleElement.appendChild(formatPseudoElementStyle(className, element, style));
90865
+ clone.appendChild(styleElement);
90866
+
90867
+ function formatPseudoElementStyle(className, element, style) {
90868
+ var selector = '.' + className + ':' + element;
90869
+ var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
90870
+ return document.createTextNode(selector + '{' + cssText + '}');
90871
+
90872
+ function formatCssText(style) {
90873
+ var content = style.getPropertyValue('content');
90874
+ return style.cssText + ' content: ' + content + ';';
90875
+ }
90876
+
90877
+ function formatCssProperties(style) {
90878
+
90879
+ return util.asArray(style)
90880
+ .map(formatProperty)
90881
+ .join('; ') + ';';
90882
+
90883
+ function formatProperty(name) {
90884
+ return name + ': ' +
90885
+ style.getPropertyValue(name) +
90886
+ (style.getPropertyPriority(name) ? ' !important' : '');
90887
+ }
90888
+ }
90889
+ }
90890
+ }
90891
+ }
90892
+
90893
+ function copyUserInput() {
90894
+ if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
90895
+ if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
90896
+ }
90897
+
90898
+ function fixSvg() {
90899
+ if (!(clone instanceof SVGElement)) return;
90900
+ clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
90901
+
90902
+ if (!(clone instanceof SVGRectElement)) return;
90903
+ ['width', 'height'].forEach(function (attribute) {
90904
+ var value = clone.getAttribute(attribute);
90905
+ if (!value) return;
90906
+
90907
+ clone.style.setProperty(attribute, value);
90908
+ });
90909
+ }
90910
+ }
90911
+ }
90912
+
90913
+ function embedFonts(node) {
90914
+ return fontFaces.resolveAll()
90915
+ .then(function (cssText) {
90916
+ var styleNode = document.createElement('style');
90917
+ node.appendChild(styleNode);
90918
+ styleNode.appendChild(document.createTextNode(cssText));
90919
+ return node;
90920
+ });
90921
+ }
90922
+
90923
+ function inlineImages(node) {
90924
+ return images.inlineAll(node)
90925
+ .then(function () {
90926
+ return node;
90927
+ });
90928
+ }
90929
+
90930
+ function makeSvgDataUri(node, width, height) {
90931
+ return Promise.resolve(node)
90932
+ .then(function (node) {
90933
+ node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
90934
+ return new XMLSerializer().serializeToString(node);
90935
+ })
90936
+ .then(util.escapeXhtml)
90937
+ .then(function (xhtml) {
90938
+ return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
90939
+ })
90940
+ .then(function (foreignObject) {
90941
+ return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
90942
+ foreignObject + '</svg>';
90943
+ })
90944
+ .then(function (svg) {
90945
+ return 'data:image/svg+xml;charset=utf-8,' + svg;
90946
+ });
90947
+ }
90948
+
90949
+ function newUtil() {
90950
+ return {
90951
+ escape: escape,
90952
+ parseExtension: parseExtension,
90953
+ mimeType: mimeType,
90954
+ dataAsUrl: dataAsUrl,
90955
+ isDataUrl: isDataUrl,
90956
+ canvasToBlob: canvasToBlob,
90957
+ resolveUrl: resolveUrl,
90958
+ getAndEncode: getAndEncode,
90959
+ uid: uid(),
90960
+ delay: delay,
90961
+ asArray: asArray,
90962
+ escapeXhtml: escapeXhtml,
90963
+ makeImage: makeImage,
90964
+ width: width,
90965
+ height: height
90966
+ };
90967
+
90968
+ function mimes() {
90969
+ /*
90970
+ * Only WOFF and EOT mime types for fonts are 'real'
90971
+ * see http://www.iana.org/assignments/media-types/media-types.xhtml
90972
+ */
90973
+ var WOFF = 'application/font-woff';
90974
+ var JPEG = 'image/jpeg';
90975
+
90976
+ return {
90977
+ 'woff': WOFF,
90978
+ 'woff2': WOFF,
90979
+ 'ttf': 'application/font-truetype',
90980
+ 'eot': 'application/vnd.ms-fontobject',
90981
+ 'png': 'image/png',
90982
+ 'jpg': JPEG,
90983
+ 'jpeg': JPEG,
90984
+ 'gif': 'image/gif',
90985
+ 'tiff': 'image/tiff',
90986
+ 'svg': 'image/svg+xml'
90987
+ };
90988
+ }
90989
+
90990
+ function parseExtension(url) {
90991
+ var match = /\.([^\.\/]*?)$/g.exec(url);
90992
+ if (match) return match[1];
90993
+ else return '';
90994
+ }
90995
+
90996
+ function mimeType(url) {
90997
+ var extension = parseExtension(url).toLowerCase();
90998
+ return mimes()[extension] || '';
90999
+ }
91000
+
91001
+ function isDataUrl(url) {
91002
+ return url.search(/^(data:)/) !== -1;
91003
+ }
91004
+
91005
+ function toBlob(canvas) {
91006
+ return new Promise(function (resolve) {
91007
+ var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
91008
+ var length = binaryString.length;
91009
+ var binaryArray = new Uint8Array(length);
91010
+
91011
+ for (var i = 0; i < length; i++)
91012
+ binaryArray[i] = binaryString.charCodeAt(i);
91013
+
91014
+ resolve(new Blob([binaryArray], {
91015
+ type: 'image/png'
91016
+ }));
91017
+ });
91018
+ }
91019
+
91020
+ function canvasToBlob(canvas) {
91021
+ if (canvas.toBlob)
91022
+ return new Promise(function (resolve) {
91023
+ canvas.toBlob(resolve);
91024
+ });
91025
+
91026
+ return toBlob(canvas);
91027
+ }
91028
+
91029
+ function resolveUrl(url, baseUrl) {
91030
+ var doc = document.implementation.createHTMLDocument();
91031
+ var base = doc.createElement('base');
91032
+ doc.head.appendChild(base);
91033
+ var a = doc.createElement('a');
91034
+ doc.body.appendChild(a);
91035
+ base.href = baseUrl;
91036
+ a.href = url;
91037
+ return a.href;
91038
+ }
91039
+
91040
+ function uid() {
91041
+ var index = 0;
91042
+
91043
+ return function () {
91044
+ return 'u' + fourRandomChars() + index++;
91045
+
91046
+ function fourRandomChars() {
91047
+ /* see http://stackoverflow.com/a/6248722/2519373 */
91048
+ return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
91049
+ }
91050
+ };
91051
+ }
91052
+
91053
+ function makeImage(uri) {
91054
+ return new Promise(function (resolve, reject) {
91055
+ var image = new Image();
91056
+ image.onload = function () {
91057
+ resolve(image);
91058
+ };
91059
+ image.onerror = reject;
91060
+ image.src = uri;
91061
+ });
91062
+ }
91063
+
91064
+ function getAndEncode(url) {
91065
+ var TIMEOUT = 30000;
91066
+ if(domtoimage.impl.options.cacheBust) {
91067
+ // Cache bypass so we dont have CORS issues with cached images
91068
+ // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
91069
+ url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
91070
+ }
91071
+
91072
+ return new Promise(function (resolve) {
91073
+ var request = new XMLHttpRequest();
91074
+
91075
+ request.onreadystatechange = done;
91076
+ request.ontimeout = timeout;
91077
+ request.responseType = 'blob';
91078
+ request.timeout = TIMEOUT;
91079
+ request.open('GET', url, true);
91080
+ request.send();
91081
+
91082
+ var placeholder;
91083
+ if(domtoimage.impl.options.imagePlaceholder) {
91084
+ var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
91085
+ if(split && split[1]) {
91086
+ placeholder = split[1];
91087
+ }
91088
+ }
91089
+
91090
+ function done() {
91091
+ if (request.readyState !== 4) return;
91092
+
91093
+ if (request.status !== 200) {
91094
+ if(placeholder) {
91095
+ resolve(placeholder);
91096
+ } else {
91097
+ fail('cannot fetch resource: ' + url + ', status: ' + request.status);
91098
+ }
91099
+
91100
+ return;
91101
+ }
91102
+
91103
+ var encoder = new FileReader();
91104
+ encoder.onloadend = function () {
91105
+ var content = encoder.result.split(/,/)[1];
91106
+ resolve(content);
91107
+ };
91108
+ encoder.readAsDataURL(request.response);
91109
+ }
91110
+
91111
+ function timeout() {
91112
+ if(placeholder) {
91113
+ resolve(placeholder);
91114
+ } else {
91115
+ fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);
91116
+ }
91117
+ }
91118
+
91119
+ function fail(message) {
91120
+ console.error(message);
91121
+ resolve('');
91122
+ }
91123
+ });
91124
+ }
91125
+
91126
+ function dataAsUrl(content, type) {
91127
+ return 'data:' + type + ';base64,' + content;
91128
+ }
91129
+
91130
+ function escape(string) {
91131
+ return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
91132
+ }
91133
+
91134
+ function delay(ms) {
91135
+ return function (arg) {
91136
+ return new Promise(function (resolve) {
91137
+ setTimeout(function () {
91138
+ resolve(arg);
91139
+ }, ms);
91140
+ });
91141
+ };
91142
+ }
91143
+
91144
+ function asArray(arrayLike) {
91145
+ var array = [];
91146
+ var length = arrayLike.length;
91147
+ for (var i = 0; i < length; i++) array.push(arrayLike[i]);
91148
+ return array;
91149
+ }
91150
+
91151
+ function escapeXhtml(string) {
91152
+ return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
91153
+ }
91154
+
91155
+ function width(node) {
91156
+ var leftBorder = px(node, 'border-left-width');
91157
+ var rightBorder = px(node, 'border-right-width');
91158
+ return node.scrollWidth + leftBorder + rightBorder;
91159
+ }
91160
+
91161
+ function height(node) {
91162
+ var topBorder = px(node, 'border-top-width');
91163
+ var bottomBorder = px(node, 'border-bottom-width');
91164
+ return node.scrollHeight + topBorder + bottomBorder;
91165
+ }
91166
+
91167
+ function px(node, styleProperty) {
91168
+ var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
91169
+ return parseFloat(value.replace('px', ''));
91170
+ }
91171
+ }
91172
+
91173
+ function newInliner() {
91174
+ var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
91175
+
91176
+ return {
91177
+ inlineAll: inlineAll,
91178
+ shouldProcess: shouldProcess,
91179
+ impl: {
91180
+ readUrls: readUrls,
91181
+ inline: inline
91182
+ }
91183
+ };
91184
+
91185
+ function shouldProcess(string) {
91186
+ return string.search(URL_REGEX) !== -1;
91187
+ }
91188
+
91189
+ function readUrls(string) {
91190
+ var result = [];
91191
+ var match;
91192
+ while ((match = URL_REGEX.exec(string)) !== null) {
91193
+ result.push(match[1]);
91194
+ }
91195
+ return result.filter(function (url) {
91196
+ return !util.isDataUrl(url);
91197
+ });
91198
+ }
91199
+
91200
+ function inline(string, url, baseUrl, get) {
91201
+ return Promise.resolve(url)
91202
+ .then(function (url) {
91203
+ return baseUrl ? util.resolveUrl(url, baseUrl) : url;
91204
+ })
91205
+ .then(get || util.getAndEncode)
91206
+ .then(function (data) {
91207
+ return util.dataAsUrl(data, util.mimeType(url));
91208
+ })
91209
+ .then(function (dataUrl) {
91210
+ return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
91211
+ });
91212
+
91213
+ function urlAsRegex(url) {
91214
+ return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
91215
+ }
91216
+ }
91217
+
91218
+ function inlineAll(string, baseUrl, get) {
91219
+ if (nothingToInline()) return Promise.resolve(string);
91220
+
91221
+ return Promise.resolve(string)
91222
+ .then(readUrls)
91223
+ .then(function (urls) {
91224
+ var done = Promise.resolve(string);
91225
+ urls.forEach(function (url) {
91226
+ done = done.then(function (string) {
91227
+ return inline(string, url, baseUrl, get);
91228
+ });
91229
+ });
91230
+ return done;
91231
+ });
91232
+
91233
+ function nothingToInline() {
91234
+ return !shouldProcess(string);
91235
+ }
91236
+ }
91237
+ }
91238
+
91239
+ function newFontFaces() {
91240
+ return {
91241
+ resolveAll: resolveAll,
91242
+ impl: {
91243
+ readAll: readAll
91244
+ }
91245
+ };
91246
+
91247
+ function resolveAll() {
91248
+ return readAll()
91249
+ .then(function (webFonts) {
91250
+ return Promise.all(
91251
+ webFonts.map(function (webFont) {
91252
+ return webFont.resolve();
91253
+ })
91254
+ );
91255
+ })
91256
+ .then(function (cssStrings) {
91257
+ return cssStrings.join('\n');
91258
+ });
91259
+ }
91260
+
91261
+ function readAll() {
91262
+ return Promise.resolve(util.asArray(document.styleSheets))
91263
+ .then(getCssRules)
91264
+ .then(selectWebFontRules)
91265
+ .then(function (rules) {
91266
+ return rules.map(newWebFont);
91267
+ });
91268
+
91269
+ function selectWebFontRules(cssRules) {
91270
+ return cssRules
91271
+ .filter(function (rule) {
91272
+ return rule.type === CSSRule.FONT_FACE_RULE;
91273
+ })
91274
+ .filter(function (rule) {
91275
+ return inliner.shouldProcess(rule.style.getPropertyValue('src'));
91276
+ });
91277
+ }
91278
+
91279
+ function getCssRules(styleSheets) {
91280
+ var cssRules = [];
91281
+ styleSheets.forEach(function (sheet) {
91282
+ try {
91283
+ util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
91284
+ } catch (e) {
91285
+ console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
91286
+ }
91287
+ });
91288
+ return cssRules;
91289
+ }
91290
+
91291
+ function newWebFont(webFontRule) {
91292
+ return {
91293
+ resolve: function resolve() {
91294
+ var baseUrl = (webFontRule.parentStyleSheet || {}).href;
91295
+ return inliner.inlineAll(webFontRule.cssText, baseUrl);
91296
+ },
91297
+ src: function () {
91298
+ return webFontRule.style.getPropertyValue('src');
91299
+ }
91300
+ };
91301
+ }
91302
+ }
91303
+ }
91304
+
91305
+ function newImages() {
91306
+ return {
91307
+ inlineAll: inlineAll,
91308
+ impl: {
91309
+ newImage: newImage
91310
+ }
91311
+ };
91312
+
91313
+ function newImage(element) {
91314
+ return {
91315
+ inline: inline
91316
+ };
91317
+
91318
+ function inline(get) {
91319
+ if (util.isDataUrl(element.src)) return Promise.resolve();
91320
+
91321
+ return Promise.resolve(element.src)
91322
+ .then(get || util.getAndEncode)
91323
+ .then(function (data) {
91324
+ return util.dataAsUrl(data, util.mimeType(element.src));
91325
+ })
91326
+ .then(function (dataUrl) {
91327
+ return new Promise(function (resolve, reject) {
91328
+ element.onload = resolve;
91329
+ element.onerror = reject;
91330
+ element.src = dataUrl;
91331
+ });
91332
+ });
91333
+ }
91334
+ }
91335
+
91336
+ function inlineAll(node) {
91337
+ if (!(node instanceof Element)) return Promise.resolve(node);
91338
+
91339
+ return inlineBackground(node)
91340
+ .then(function () {
91341
+ if (node instanceof HTMLImageElement)
91342
+ return newImage(node).inline();
91343
+ else
91344
+ return Promise.all(
91345
+ util.asArray(node.childNodes).map(function (child) {
91346
+ return inlineAll(child);
91347
+ })
91348
+ );
91349
+ });
91350
+
91351
+ function inlineBackground(node) {
91352
+ var background = node.style.getPropertyValue('background');
91353
+
91354
+ if (!background) return Promise.resolve(node);
91355
+
91356
+ return inliner.inlineAll(background)
91357
+ .then(function (inlined) {
91358
+ node.style.setProperty(
91359
+ 'background',
91360
+ inlined,
91361
+ node.style.getPropertyPriority('background')
91362
+ );
91363
+ })
91364
+ .then(function () {
91365
+ return node;
91366
+ });
91367
+ }
91368
+ }
91369
+ }
91370
+ })();
91371
+ } (domToImage));
91372
+
91373
+ var domToImageExports = domToImage.exports;
91374
+ var domtoimage = /*@__PURE__*/getDefaultExportFromCjs(domToImageExports);
91375
+
90526
91376
  function getTemplateHTML(data) {
90527
91377
  var _a, _b, _c;
90528
91378
  const isProfit = data.data.payout * +data.data.payoutTokenPrice - data.data.dollarValue > 0;