@ape.swap/bonds-sdk 4.1.1-test.6 → 4.1.1-test.8

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
@@ -20719,6 +20719,8 @@ const localeFormat = (number, precision = 2) => {
20719
20719
  return number.toLocaleString('en-US', options);
20720
20720
  };
20721
20721
  const formatNumberSI = (num, digits = 2) => {
20722
+ if (!num)
20723
+ return '0';
20722
20724
  const number = typeof num === 'string' ? parseFloat(num) : num;
20723
20725
  const suffixes = [
20724
20726
  { value: 1e12, symbol: 'T' },
@@ -69345,18 +69347,30 @@ const useIsMobile = () => {
69345
69347
  return isMobile;
69346
69348
  };
69347
69349
 
69350
+ const RecSkeleton = () => {
69351
+ return (jsxs(Flex, { sx: { width: '100%', gap: ['10px', '10px', '10px', '15px'], height: '84px' }, children: [jsx$2(Skeleton, { animation: "waves", sx: {
69352
+ width: '100%',
69353
+ height: '70px',
69354
+ borderRadius: 'normal',
69355
+ mb: '5px',
69356
+ } }, `rec-skeleton-1`), jsx$2(Skeleton, { animation: "waves", sx: {
69357
+ width: '100%',
69358
+ height: '70px',
69359
+ borderRadius: 'normal',
69360
+ mb: '5px',
69361
+ } }, `rec-skeleton-2`)] }));
69362
+ };
69363
+
69348
69364
  const Recommendations = ({ billAddress }) => {
69349
69365
  const { address } = useEVMAccount();
69350
69366
  const isMobile = useIsMobile();
69351
- const { data } = useGetBondRecommendations(address, billAddress, '2');
69367
+ const { data = [] } = useGetBondRecommendations(address, billAddress, '2');
69352
69368
  const recommendations = isMobile ? data === null || data === void 0 ? void 0 : data.slice(0, 1) : data;
69353
- return (billAddress &&
69354
- recommendations &&
69355
- (recommendations === null || recommendations === void 0 ? void 0 : recommendations.length) > 0 && (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: {
69369
+ return (jsxs(Fragment$1, { children: [jsx$2(Flex, { sx: {
69356
69370
  justifyContent: 'space-between',
69357
69371
  flexDirection: ['column', 'column', 'column', 'row'],
69358
69372
  alignItems: ['flex-start', 'flex-start', 'flex-start', 'center'],
69359
- }, children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx$2(Text, { sx: { fontSize: '13px', fontWeight: 600 }, children: "You might also be interested in: " }), jsx$2(Text, { sx: { fontSize: '11px', fontWeight: 400, color: '#BEBEBE', lineHeight: '18px' }, children: "Based on yours and others users purchases." })] }) }), jsx$2(Flex, { sx: { width: '100%', gap: '20px' }, children: recommendations === null || recommendations === void 0 ? void 0 : recommendations.map((bond, index) => (jsx$2(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => {
69373
+ }, children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx$2(Text, { sx: { fontSize: '13px', fontWeight: 600 }, children: "You might also be interested in: " }), jsx$2(Text, { sx: { fontSize: '11px', fontWeight: 400, color: '#BEBEBE', lineHeight: '18px' }, children: "Based on yours and others users purchases." })] }) }), jsx$2(Flex, { sx: { width: '100%', gap: ['10px', '10px', '10px', '15px'] }, children: (recommendations === null || recommendations === void 0 ? void 0 : recommendations.length) > 0 ? (recommendations.map((bond, index) => (jsx$2(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => {
69360
69374
  window.open(`https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`, '_blank', 'noreferrer');
69361
69375
  track({
69362
69376
  event: 'recClick',
@@ -69366,7 +69380,7 @@ const Recommendations = ({ billAddress }) => {
69366
69380
  position: index,
69367
69381
  },
69368
69382
  });
69369
- } }, `${bond.billAddress}-${index}`))) })] })));
69383
+ } }, `${bond.billAddress}-${index}`)))) : (jsx$2(RecSkeleton, {})) })] }));
69370
69384
  };
69371
69385
 
69372
69386
  const remove0xPrefix = (str) => {
@@ -69403,25 +69417,27 @@ const SafeHTMLComponent = ({ html }) => {
69403
69417
  return jsx$2("div", { dangerouslySetInnerHTML: { __html: sanitizedHTML } });
69404
69418
  };
69405
69419
 
69406
- const ProgressiveImage = ({ src, alt = '', blurSrc }) => {
69420
+ const ProgressiveImage = ({ src, alt = 'bluredImg', blurSrc }) => {
69407
69421
  const [loaded, setLoaded] = useState(false);
69408
- return (jsxs(Fragment$1, { children: [jsx$2(Image$1, { src: blurSrc, alt: 'bluredImg', sx: {
69422
+ return (jsxs(Fragment$1, { children: [jsx$2(Flex, { src: blurSrc, alt: alt, sx: {
69409
69423
  position: 'absolute',
69410
69424
  width: '100%',
69411
- zIndex: 120,
69412
- // height: '100%',
69425
+ height: '100%',
69426
+ backgroundSize: 'cover',
69427
+ zIndex: 0,
69413
69428
  objectFit: 'cover',
69414
- transition: 'opacity 0.5s ease',
69429
+ transition: 'opacity 1.5s ease',
69415
69430
  borderRadius: 'normal',
69416
- // filter: 'blur(20px)',
69431
+ backgroundImage: `url(${blurSrc})`,
69432
+ filter: 'blur(1px)',
69417
69433
  opacity: loaded ? 0 : 1,
69418
- } }), jsx$2(Image$1, { src: src, alt: 'fullimg', onLoad: () => setLoaded(true), sx: {
69419
- // width: '100%',
69420
- // height: '100%',
69434
+ } }), jsx$2(Image$1, { src: src, alt: `${alt}-${blurSrc}`, onLoad: () => setLoaded(true), sx: {
69435
+ width: '100%',
69436
+ height: '100%',
69421
69437
  objectFit: 'cover',
69422
69438
  transition: 'opacity 0.5s ease',
69423
- opacity: loaded ? 1 : 0,
69424
69439
  borderRadius: 'normal',
69440
+ opacity: loaded ? 1 : 0,
69425
69441
  } })] }));
69426
69442
  };
69427
69443
 
@@ -70373,7 +70389,7 @@ const LinkShare = ({ userBill }) => {
70373
70389
  setIsLoading([false, false]);
70374
70390
  });
70375
70391
  return (jsxs(Flex, { sx: {
70376
- background: 'white4',
70392
+ background: ['white3', 'white3', 'white3', 'white4'],
70377
70393
  borderRadius: 'normal',
70378
70394
  justifyContent: 'center',
70379
70395
  alignItems: 'center',
@@ -75988,10 +76004,9 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
75988
76004
  };
75989
76005
  const closeAnimation = () => {
75990
76006
  controls.start({
75991
- scale: isMobile ? [2, 1] : [3, 1],
75992
- top: '-75px',
76007
+ scale: isMobile ? [2, 1] : [2, 1],
75993
76008
  zIndex: -1,
75994
- transition: { duration: 0.2 },
76009
+ transition: { duration: 0.3 },
75995
76010
  });
75996
76011
  setHide(false);
75997
76012
  setIsOpenTraits(false);
@@ -75999,19 +76014,19 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
75999
76014
  return (jsx$2(Modal, { sx: {
76000
76015
  width: '480px',
76001
76016
  overflowY: 'unset !important',
76002
- background: 'white2',
76017
+ background: hide ? 'transparent !important' : 'white2',
76003
76018
  p: '0px',
76004
- top: ['55%', '55%', '55%', '50%'],
76019
+ top: '56%',
76005
76020
  }, children: jsxs(Flex, { sx: {
76006
76021
  flexDirection: 'column',
76007
76022
  borderRadius: 'normal',
76008
76023
  position: 'relative',
76009
- background: 'white2',
76010
- p: ['15px', '15px', '15px', '20px'],
76024
+ background: hide ? 'transparent !important' : 'white2',
76025
+ p: '20px',
76011
76026
  }, children: [jsx$2(AnimatePresence, { children: hide && (jsx$2(motion.div, { animate: { opacity: 1 }, transition: { duration: 1, delay: 0.3 }, sx: {
76012
76027
  position: 'absolute',
76013
76028
  display: ['flex'],
76014
- top: ['-170px', '-170px', '-170px', '-224px'],
76029
+ top: ['-180px', '-180px', '-240px'],
76015
76030
  right: ['50%', '50%', '50%', '-13%'],
76016
76031
  transform: ['translateX(50%)', 'translateX(50%)', 'translateX(50%)', 'unset'],
76017
76032
  opacity: 0,
@@ -76029,9 +76044,10 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
76029
76044
  display: 'flex',
76030
76045
  zIndex: -1,
76031
76046
  position: hide ? 'fixed' : 'absolute',
76032
- top: '-75px',
76047
+ bottom: 'calc(100% - 10px)',
76033
76048
  left: '25%',
76034
76049
  width: '50%',
76050
+ aspectRatio: '1 / 0.56',
76035
76051
  cursor: 'pointer',
76036
76052
  borderRadius: 'normal',
76037
76053
  flexDirection: 'column',
@@ -76065,7 +76081,12 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
76065
76081
  borderRadius: '50%',
76066
76082
  alignItems: 'center',
76067
76083
  justifyContent: 'center',
76068
- }, children: jsx$2(Flex, { sx: { width: '6px' }, children: jsx$2(Svg, { icon: "close" }) }) })), jsx$2(ProgressiveImage, { src: `${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), hide && (jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: jsxs(Flex, { sx: {
76084
+ }, children: jsx$2(Flex, { sx: { width: '6px' }, children: jsx$2(Svg, { icon: "close" }) }) })), jsx$2(ProgressiveImage, { src: `${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), hide && (jsx$2(Flex, { sx: {
76085
+ position: 'absolute',
76086
+ bottom: ['calc(-35% + 1px)', 'calc(-35% + 1px)', 'calc(-26% + 1px)'],
76087
+ width: '100%',
76088
+ justifyContent: 'center',
76089
+ }, children: jsxs(Flex, { sx: {
76069
76090
  flexDirection: 'column',
76070
76091
  width: '100%',
76071
76092
  minWidth: '250px',
@@ -76100,7 +76121,7 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
76100
76121
  ? attributes.map((a) => (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)))
76101
76122
  : BILL_ATTRIBUTES.map((attrib) => {
76102
76123
  return (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), jsx$2(Skeleton, { width: "150px" })] }, attrib));
76103
- }) }) })) })] }) }))] })) }), !hide && (jsxs(Fragment$1, { children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '7px' }, children: [userBill && (jsx$2(TokenImage, { symbol: (_r = (_q = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _q === void 0 ? void 0 : _q.showcaseTokenName) !== null && _r !== void 0 ? _r : (_t = (_s = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _s === void 0 ? void 0 : _s.earnToken) === null || _t === void 0 ? void 0 : _t.symbol, size: 30, chain: (_u = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _u === void 0 ? void 0 : _u.chainId })), jsx$2(Box$1, { sx: {
76124
+ }) }) })) })] }) }))] })) }), !hide && (jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '7px' }, children: [userBill && (jsx$2(TokenImage, { symbol: (_r = (_q = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _q === void 0 ? void 0 : _q.showcaseTokenName) !== null && _r !== void 0 ? _r : (_t = (_s = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _s === void 0 ? void 0 : _s.earnToken) === null || _t === void 0 ? void 0 : _t.symbol, size: 30, chain: (_u = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _u === void 0 ? void 0 : _u.chainId })), jsx$2(Box$1, { sx: {
76104
76125
  fontSize: ['16px', '16px', '16px', '18px'],
76105
76126
  fontWeight: 700,
76106
76127
  opacity: 0.7,
@@ -76128,7 +76149,7 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
76128
76149
  width: '50%',
76129
76150
  alignItems: 'center',
76130
76151
  fontSize: '14px',
76131
- }, children: [jsx$2(Flex, { children: "Deposit" }), jsxs(Flex, { children: ["$", formatNumberSI(payoutUSD)] })] }), jsx$2(Flex, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translateY(-50%) translateX(-50%)' }, children: jsx$2(Svg, { icon: "arrow", direction: "right", width: '5px' }) }), jsxs(Flex, { sx: {
76152
+ }, children: [jsx$2(Flex, { children: "Deposit" }), jsxs(Flex, { children: ["$", formatNumberSI(depositUSD)] })] }), jsx$2(Flex, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translateY(-50%) translateX(-50%)' }, children: jsx$2(Svg, { icon: "arrow", direction: "right", width: '5px' }) }), jsxs(Flex, { sx: {
76132
76153
  background: 'white3',
76133
76154
  borderRadius: 'normal',
76134
76155
  justifyContent: 'space-between',
@@ -76195,27 +76216,27 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
76195
76216
  background: '#DE62F366',
76196
76217
  justifyContent: 'center',
76197
76218
  borderRadius: 'normal',
76198
- }, children: jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, p: '2px 10px' }, children: jsx$2(SafeHTMLComponent, { html: (_z = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _z === void 0 ? void 0 : _z.warningCard }) }) })), jsxs(Flex, { sx: {
76219
+ }, children: jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, p: '4px 10px', lineHeight: '16px' }, children: jsx$2(SafeHTMLComponent, { html: (_z = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _z === void 0 ? void 0 : _z.warningCard }) }) })), jsxs(Flex, { sx: {
76199
76220
  width: '100%',
76200
76221
  justifyContent: 'space-between',
76201
- gap: ['10px', '10px', '10px', '20px'],
76222
+ gap: ['10px', '10px', '10px', '15px'],
76202
76223
  height: '40px',
76203
- }, children: [jsx$2(Flex, { sx: { width: '100%' }, children: jsx$2(Button, { variant: "secondary", disabled: claimable(userBill) === 0 || load || !userBill || isPendingCliff, load: load, onClick: (event) => {
76204
- var _a, _b;
76205
- event.stopPropagation();
76206
- if (chainId !== ((_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId)) {
76207
- switchChainAsync({ chainId: (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId })
76208
- .then(() => {
76209
- handleClaim(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.address);
76210
- })
76211
- .catch();
76212
- }
76213
- else {
76224
+ }, children: [jsx$2(Button, { variant: "secondary", disabled: claimable(userBill) === 0 || load || !userBill || isPendingCliff, load: load, onClick: (event) => {
76225
+ var _a, _b;
76226
+ event.stopPropagation();
76227
+ if (chainId !== ((_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId)) {
76228
+ switchChainAsync({ chainId: (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId })
76229
+ .then(() => {
76214
76230
  handleClaim(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.address);
76215
- }
76216
- }, sx: { fontSize: '14px', width: '100%' }, children: isPendingCliff
76217
- ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`
76218
- : 'Claim' }) }), jsx$2(Button, { sx: { width: '100%', fontSize: '14px' }, onClick: () => canPurchaseAgain
76231
+ })
76232
+ .catch();
76233
+ }
76234
+ else {
76235
+ handleClaim(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.address);
76236
+ }
76237
+ }, sx: { fontSize: '14px', width: '100%' }, children: isPendingCliff
76238
+ ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`
76239
+ : 'Claim' }), jsx$2(Button, { sx: { width: '100%', fontSize: '14px' }, onClick: () => canPurchaseAgain
76219
76240
  ? (window.location.href = `https://ape.bond/bonds?bondAddress=${similarLiveBond.contractAddress[similarLiveBond.chainId]}&bondChain=${similarLiveBond.chainId}`)
76220
76241
  : null, disabled: !canPurchaseAgain, children: canPurchaseAgain ? 'Buy again' : 'sold out' })] }), jsx$2(Recommendations, { billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] })] }))] }) }));
76221
76242
  };
@@ -77123,7 +77144,7 @@ const YourBonds = ({ showOnly }) => {
77123
77144
  const hasBonds = useMemo(() => {
77124
77145
  return (bondsToRender && bondsToRender.length > 0) || !!(preTGEBondsToRender === null || preTGEBondsToRender === void 0 ? void 0 : preTGEBondsToRender.length);
77125
77146
  }, [bondsToRender, preTGEBondsToRender]);
77126
- return (jsxs(Flex$1, { className: "yourbonds table-container", children: [!showOnly && (jsx$2(YourBondsMenu, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleFilterOption, setInputValue: setInputValue, inputValue: inputValue, handleSort: handleSort })), !account && !solanaAccount ? (jsx$2(Flex$1, { className: "placeholder-monkey-wrapper", children: jsx$2(PlaceholderMonkey, { text: 'You are not connected.' }) })) : hasBonds && hasFetched ? (jsxs(Fragment$1, { children: [preTGEBondsToRender === null || preTGEBondsToRender === void 0 ? void 0 : preTGEBondsToRender.map((userBond, index) => jsx$2(UserBondRowPreTGE, { userBond: userBond }, index)), bondsToRender.map((bond) => {
77147
+ return (jsxs(Flex$1, { className: "yourbonds table-container", children: [!showOnly && (jsx$2(YourBondsMenu, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleFilterOption, setInputValue: setInputValue, inputValue: inputValue, handleSort: handleSort })), !account && !solanaAccount ? (jsx$2(Flex$1, { className: "placeholder-monkey-wrapper", children: jsx$2(PlaceholderMonkey, { text: 'You are not connected.' }) })) : hasBonds && hasFetched ? (jsxs(Fragment$1, { children: [preTGEBondsToRender === null || preTGEBondsToRender === void 0 ? void 0 : preTGEBondsToRender.map((userBond, index) => (jsx$2(UserBondRowPreTGE, { userBond: userBond }, index))), bondsToRender.map((bond) => {
77127
77148
  var _a;
77128
77149
  if (((_a = bond.bond) === null || _a === void 0 ? void 0 : _a.chainId) === types$1.ChainId.SOL)
77129
77150
  return jsx$2(UserBondRowSolana, { bill: bond }, `${bond.billNftAddress}-${bond.id}`);
@@ -1,3 +1,3 @@
1
1
  export declare const localeFormat: (number: number, precision?: number) => string;
2
- export declare const formatNumberSI: (num: number | string, digits?: number) => string;
2
+ export declare const formatNumberSI: (num?: number | string, digits?: number) => string;
3
3
  export declare const formatUSDNumber: (input: string | number) => string;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const RecSkeleton: () => React.JSX.Element;
3
+ export default RecSkeleton;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  declare const Recommendations: ({ billAddress }: {
3
3
  billAddress?: string;
4
- }) => false | "" | React.JSX.Element | undefined;
4
+ }) => React.JSX.Element;
5
5
  export default Recommendations;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Ape Bond SDK",
4
4
  "author": "Ape Bond",
5
5
  "license": "MIT",
6
- "version": "4.1.1-test.6",
6
+ "version": "4.1.1-test.8",
7
7
  "module": "dist/main.js",
8
8
  "type": "module",
9
9
  "types": "dist/main.d.ts",