npm - @ape.swap/bonds-sdk - Versions diffs - 6.3.0-test.69 → 7.0.0-test.0 - Mend

@ape.swap/bonds-sdk 6.3.0-test.69 → 7.0.0-test.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.

Files changed (995) hide show

package/dist/views/YourBondsModal/YourBondsModal.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
+import clsx from 'clsx';
 import TokenImage from '../../components/uikit-sdk/TokenImage/index.js';
 import { formatNumberSI } from '../../utils/formatNumber.js';
 import { UserBillTooltipText } from '../../config/constants/tooltips.js';
@@ -11,11 +12,8 @@ import ProgressBar from '../../components/ProgressBar/ProgressBar.js';
 import ProgressBarWrapper from '../../components/ProgressBar/ProgressBarWrapper.js';
 import NftImage from './components/NFTImage/NFTImage.js';
 import YourBondModalHeader from './components/YourBondModalHeader/YourBondModalHeader.js';
-import Actions from './components/Actions/Actions.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
-import ActionsSolana from './components/Actions/ActionsSolana.js';
-import ActionsAptos from './components/Actions/ActionsAptos.js';
-import ActionsSui from './components/Actions/ActionsSui.js';
+import { getAdapterForChain } from '../../adapters/registry.js';
 import Modal from '../../components/uikit-sdk/Modal/index.js';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
 import Button from '../../components/uikit-sdk/Button/Button.js';
@@ -37,111 +35,21 @@ const YourBondsModal = ({ userBill, lostProfit, onDismiss, }) => {
     const payoutUSD = payout && payoutTokenPrice ? payout * payoutTokenPrice : 0;
     const payoutSymbol = userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken.symbol;
     const payoutTokenSymbol = payoutSymbol === 'AIX' && userBill?.bond?.chainId === ChainId.SOL ? 'SOLAIX' : payoutSymbol;
+    const bondAdapter = userBill?.bond?.chainId ? getAdapterForChain(userBill.bond.chainId) : undefined;
     // Cliff display info:
     const vestingCliff = Number(userBill?.bond?.vestingCliff);
     const currentTime = Math.round(new Date().getTime() / 1000);
     const vestingStartTimestamp = parseInt(userBill?.vestingStartTimestamp ?? '0');
     const isPendingCliff = vestingCliff ? currentTime - vestingStartTimestamp < vestingCliff : false;
     const cliffCountdown = getTimePeriods(vestingStartTimestamp + (vestingCliff ?? 0) - currentTime, true);
-    return (jsx(Modal, { sx: {
-            width: '480px',
-            overflowY: 'unset !important',
-            background: showNFTImg ? 'transparent !important' : 'white2',
-            p: '0px',
-            top: '56%',
-        }, children: jsxs(Flex, { sx: {
-                flexDirection: 'column',
-                borderRadius: 'normal',
-                position: 'relative',
-                background: showNFTImg ? 'transparent !important' : 'white2',
-                p: '20px',
-            }, children: [jsx(NftImage, { userBill: userBill, showNFTImg: showNFTImg, setShowNFTImg: setShowNFTImg }), !showNFTImg && (jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(YourBondModalHeader, { userBill: userBill, onDismiss: onDismiss }), jsxs(Flex, { sx: { mt: '10px', flexDirection: 'column', gap: '10px' }, children: [jsxs(Flex, { sx: { width: '100%', gap: '15px', position: 'relative' }, children: [jsxs(Flex, { sx: {
-                                                background: 'white3',
-                                                borderRadius: 'normal',
-                                                justifyContent: 'space-between',
-                                                p: '10px',
-                                                width: '50%',
-                                                alignItems: 'center',
-                                                fontSize: '14px',
-                                            }, children: [jsx(Flex, { children: "Deposit" }), jsxs(Flex, { children: ["$", formatNumberSI(depositUSD)] })] }), jsx(Flex, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translateY(-50%) translateX(-50%)' }, children: jsx(Arrow, { direction: "right", width: '5px' }) }), jsxs(Flex, { sx: {
-                                                background: 'white3',
-                                                borderRadius: 'normal',
-                                                justifyContent: 'space-between',
-                                                p: '10px',
-                                                width: '50%',
-                                                alignItems: 'center',
-                                                fontSize: '14px',
-                                            }, children: [jsx(Flex, { children: "Bond Value" }), jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 22 }), jsxs(Flex, { sx: { flexDirection: 'column', fontSize: '14px', lineHeight: '16px' }, children: [jsx(Flex, { sx: { justifyContent: 'center' }, children: formatNumberSI(payout ?? '0') }), jsxs(Flex, { sx: { fontSize: '10px', fontWeight: 400, opacity: 0.6, justifyContent: 'center' }, children: ["($", formatNumberSI(payoutUSD), ")"] })] })] })] })] }), lostProfit && (jsxs(Flex, { sx: {
-                                        background: 'white3',
-                                        borderRadius: 'normal',
-                                        width: '100%',
-                                        p: '10px',
-                                        justifyContent: 'space-between',
-                                    }, children: [jsx(Flex, { sx: { width: '20%' }, children: jsx("img", { src: `https://ape.bond/images/launch/mythical.png`, alt: "mythical", style: { width: '90px', height: '90px' } }) }), jsxs(Flex, { sx: { width: '75%', flexDirection: 'column', gap: '3px' }, children: [jsxs(Flex, { children: ["You missed a ", jsxs(Flex, { sx: { color: 'success', px: '3px' }, children: ["$", lostProfit] }), " bonus"] }), jsx(Flex, { sx: { fontSize: '12px', lineHeight: '16px', fontWeight: 400 }, children: "Holding an Ape Tier would\u2019ve gotten you an extra 5% bonus on this purchase and all future ones." }), jsx(Button, { variant: "secondary", sx: { width: '100%', fontSize: '14px', height: '30px', fontWeight: 600 }, onClick: () => window.open('https://ape.bond/true-yield', '_blank'), children: "Upgrade Your Tier" })] })] })), jsxs(Flex, { sx: {
-                                        flexDirection: 'column',
-                                        fontSize: '12px',
-                                        fontWeight: 400,
-                                    }, children: [jsxs(Flex, { sx: {
-                                                width: '100%',
-                                                justifyContent: 'space-between',
-                                                alignItems: 'center',
-                                                p: '4px 10px',
-                                                background: 'white3',
-                                                borderRadius: '10px 10px 0px 0px',
-                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Vesting Progress" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsx(Flex, { sx: { alignItems: 'center' }, children: isPendingCliff ? (jsxs(Fragment, { children: ["Claiming starts in", ' ', `${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`] })) : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: getPercentageVested(userBill) }), style: {
-                                                            width: '100px',
+    return (jsx(Modal, { className: clsx('ape:w-[480px] ape:[overflow-y:unset]! ape:p-0! ape:top-[56%] ape:overflow-x-visible', showNFTImg ? 'ape:bg-transparent!' : 'ape:bg-white2'), children: jsxs(Flex, { className: clsx('ape:flex-col ape:rounded-normal ape:relative ape:p-[20px]', showNFTImg ? 'ape:bg-transparent!' : 'ape:bg-white2'), children: [jsx(NftImage, { userBill: userBill, showNFTImg: showNFTImg, setShowNFTImg: setShowNFTImg }), !showNFTImg && (jsxs(Flex, { className: "ape:flex-col", children: [jsx(YourBondModalHeader, { userBill: userBill, onDismiss: onDismiss }), jsxs(Flex, { className: "ape:mt-[10px] ape:flex-col ape:gap-[10px]", children: [jsxs(Flex, { className: "ape:w-full ape:gap-[15px] ape:relative", children: [jsxs(Flex, { className: "ape:bg-white3 ape:rounded-normal ape:justify-between ape:p-[10px] ape:w-1/2 ape:items-center ape:text-[14px]", children: [jsx(Flex, { children: "Deposit" }), jsxs(Flex, { children: ["$", formatNumberSI(depositUSD)] })] }), jsx(Flex, { className: "ape:absolute ape:top-1/2 ape:left-1/2 ape:-translate-y-1/2 ape:-translate-x-1/2", children: jsx(Arrow, { direction: "right", width: '5px' }) }), jsxs(Flex, { className: "ape:bg-white3 ape:rounded-normal ape:justify-between ape:p-[10px] ape:w-1/2 ape:items-center ape:text-[14px]", children: [jsx(Flex, { children: "Bond Value" }), jsxs(Flex, { className: "ape:items-center ape:gap-[5px]", children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 22 }), jsxs(Flex, { className: "ape:flex-col ape:text-[14px]", style: { lineHeight: '16px' }, children: [jsx(Flex, { className: "ape:justify-center", children: formatNumberSI(payout ?? '0') }), jsxs(Flex, { className: "ape:text-[10px] ape:font-normal ape:opacity-60 ape:justify-center", children: ["($", formatNumberSI(payoutUSD), ")"] })] })] })] })] }), lostProfit && (jsxs(Flex, { className: "ape:bg-white3 ape:rounded-normal ape:w-full ape:p-[10px] ape:justify-between", children: [jsx(Flex, { className: "ape:w-1/5", children: jsx("img", { src: `https://ape.bond/images/launch/mythical.png`, alt: "mythical", style: { width: '90px', height: '90px' } }) }), jsxs(Flex, { className: "ape:w-[75%] ape:flex-col ape:gap-[3px]", children: [jsxs(Flex, { children: ["You missed a", ' ', jsxs(Flex, { className: "ape:px-[3px]", style: { color: 'var(--ape-color-success)' }, children: ["$", lostProfit] }), ' ', "bonus"] }), jsx(Flex, { className: "ape:text-[12px] ape:font-normal", style: { lineHeight: '16px' }, children: "Holding an Ape Tier would\u2019ve gotten you an extra 5% bonus on this purchase and all future ones." }), jsx(Button, { variant: "secondary", className: "ape:w-full ape:text-[14px]! ape:h-[30px] ape:font-semibold", onClick: () => window.open('https://ape.bond/true-yield', '_blank'), children: "Upgrade Your Tier" })] })] })), jsxs(Flex, { className: "ape:flex-col ape:text-[12px] ape:font-normal", children: [jsxs(Flex, { className: "ape:w-full ape:justify-between ape:items-center ape:p-[4px_10px] ape:bg-white3 ape:rounded-[10px_10px_0px_0px]", children: [jsxs(Flex, { className: "ape:items-center ape:gap-[5px]", children: [jsx(Flex, { className: "ape:opacity-60", children: "Vesting Progress" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon ape:text-white ape:font-normal ape:text-[12px]", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsx(Flex, { className: "ape:items-center", children: isPendingCliff ? (jsxs(Fragment, { children: ["Claiming starts in", ' ', `${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`] })) : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: getPercentageVested(userBill) }), style: {
+                                                            width: '127px',
+                                                            height: '25px',
                                                             flexDirection: 'column',
-                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
                                                         }, showTooltip: true, toolTip: getTimeLeftForFullyVested(userBill) > 0
                                                             ? `Fully vested in ${getPendingVestingString(userBill)}.`
-                                                            : `Fully Vested.` })) })] }), jsxs(Flex, { sx: {
-                                                width: '100%',
-                                                justifyContent: 'space-between',
-                                                alignItems: 'center',
-                                                p: '4px 10px',
-                                                background: 'white4',
-                                                height: '26px',
-                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Pending" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(pending(userBill), 4) }), jsxs(Text, { sx: {
-                                                                fontSize: ['10px', '10px', '10px', '12px'],
-                                                                fontWeight: 400,
-                                                                ml: '10px',
-                                                                opacity: 0.6,
-                                                            }, children: ["($", formatNumberSI(pendingUSD(userBill)), ")"] })] })] }), jsxs(Flex, { sx: {
-                                                width: '100%',
-                                                justifyContent: 'space-between',
-                                                alignItems: 'center',
-                                                p: '4px 10px',
-                                                background: 'white3',
-                                                height: '26px',
-                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Claimable" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(claimable(userBill), 4) }), jsxs(Text, { sx: {
-                                                                fontSize: ['10px', '10px', '10px', '12px'],
-                                                                fontWeight: 400,
-                                                                ml: '10px',
-                                                                opacity: 0.6,
-                                                            }, children: ["($", formatNumberSI(claimableUSD(userBill)), ")"] })] })] }), jsxs(Flex, { sx: {
-                                                width: '100%',
-                                                justifyContent: 'space-between',
-                                                alignItems: 'center',
-                                                p: '4px 10px',
-                                                background: 'white4',
-                                                height: '26px',
-                                                borderRadius: '0px 0px 10px 10px',
-                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Claimed" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Claimed }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(claimed(userBill), 4) }), jsxs(Text, { sx: {
-                                                                fontSize: ['10px', '10px', '10px', '12px'],
-                                                                fontWeight: 400,
-                                                                ml: '10px',
-                                                                opacity: 0.6,
-                                                            }, children: ["($", formatNumberSI(claimedUSD(userBill)), ")"] })] })] })] }), userBill?.bond?.warningCard && (jsx(Flex, { sx: {
-                                        width: '100%',
-                                        background: '#DE62F366',
-                                        justifyContent: 'center',
-                                        borderRadius: 'normal',
-                                    }, children: jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, p: '4px 10px', lineHeight: '16px' }, children: jsx(SafeHTMLComponent, { html: userBill?.bond?.warningCard }) }) })), jsx(Flex, { sx: {
-                                        width: '100%',
-                                        justifyContent: 'space-between',
-                                        gap: ['10px', '10px', '10px', '15px'],
-                                        height: '40px',
-                                    }, children: userBill?.bond?.chainId === ChainId.SOL ? (jsx(ActionsSolana, { userBill: userBill })) : userBill?.bond?.chainId === ChainId.APTOS ? (jsx(ActionsAptos, { userBill: userBill })) : userBill?.bond?.chainId === ChainId.SUI ? (jsx(ActionsSui, { userBill: userBill })) : (jsx(Actions, { userBill: userBill })) }), !lostProfit && !SDKConfig.chains.includes(ChainId.BITTENSOR_TESTNET) && (jsx(Recommendations, { billAddress: userBill?.address }))] })] }))] }) }));
+                                                            : `Fully Vested.` })) })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:items-center ape:p-[4px_10px] ape:bg-white4 ape:h-[26px]", children: [jsxs(Flex, { className: "ape:items-center ape:gap-[5px]", children: [jsx(Flex, { className: "ape:opacity-60", children: "Pending" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon ape:text-white ape:font-normal ape:text-[12px]", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { className: "ape:items-center", children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { weight: 700, className: "ape:ml-[10px]", size: "12px", children: formatNumberSI(pending(userBill), 4) }), jsxs(Text, { weight: 400, className: "ape:ml-[10px] ape:opacity-60 ape:text-[10px]! ape:md:text-[12px]!", children: ["($", formatNumberSI(pendingUSD(userBill)), ")"] })] })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:items-center ape:p-[4px_10px] ape:bg-white3 ape:h-[26px]", children: [jsxs(Flex, { className: "ape:items-center ape:gap-[5px]", children: [jsx(Flex, { className: "ape:opacity-60", children: "Claimable" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon ape:text-white ape:font-normal ape:text-[12px]", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { className: "ape:items-center", children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { weight: 700, className: "ape:ml-[10px]", size: "12px", children: formatNumberSI(claimable(userBill), 4) }), jsxs(Text, { weight: 400, className: "ape:ml-[10px] ape:opacity-60 ape:text-[10px]! ape:md:text-[12px]!", children: ["($", formatNumberSI(claimableUSD(userBill)), ")"] })] })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:items-center ape:p-[4px_10px] ape:bg-white4 ape:h-[26px] ape:rounded-[0px_0px_10px_10px]", children: [jsxs(Flex, { className: "ape:items-center ape:gap-[5px]", children: [jsx(Flex, { className: "ape:opacity-60", children: "Claimed" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Claimed }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon ape:text-white ape:font-normal ape:text-[12px]", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { className: "ape:items-center", children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { weight: 700, className: "ape:ml-[10px]", size: "12px", children: formatNumberSI(claimed(userBill), 4) }), jsxs(Text, { weight: 400, className: "ape:ml-[10px] ape:opacity-60 ape:text-[10px]! ape:md:text-[12px]!", children: ["($", formatNumberSI(claimedUSD(userBill)), ")"] })] })] })] }), userBill?.bond?.warningCard && (jsx(Flex, { className: "ape:w-full ape:justify-center ape:rounded-normal ape:bg-[#DE62F366]", children: jsx(Text, { as: "div", weight: 400, size: "12px", className: "ape:p-[4px_10px]", style: { lineHeight: '16px' }, children: jsx(SafeHTMLComponent, { html: userBill?.bond?.warningCard }) }) })), jsx(Flex, { className: "ape:w-full ape:justify-between ape:gap-[10px] ape:md:gap-[15px] ape:h-[40px]", children: bondAdapter && jsx(bondAdapter.BondActions, { userBill: userBill }) }), !lostProfit && !SDKConfig.chains.includes(ChainId.BITTENSOR_TESTNET) && (jsx(Recommendations, { billAddress: userBill?.address }))] })] }))] }) }));
 };
 export { YourBondsModal as default };

package/dist/views/YourBondsModal/YourBondsModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"YourBondsModal.js","sources":["../../../src/views/YourBondsModal/YourBondsModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { UserBill } from '../../types/yourbonds'\nimport TokenImage from '../../components/uikit-sdk/TokenImage'\nimport { formatNumberSI } from '../../utils/formatNumber'\nimport { UserBillTooltipText } from '../../config/constants/tooltips'\nimport Recommendations from './components/Recommendations/Recommendations'\nimport {\n claimable,\n claimableUSD,\n claimed,\n claimedUSD,\n getPendingVestingString,\n getPercentageVested,\n getTimeLeftForFullyVested,\n pending,\n pendingUSD,\n} from '../../utils/displayHelpers'\nimport { getTimePeriods } from '../../utils/getTimePeriods'\nimport SafeHTMLComponent from '../../components/SafeHTMLComponent'\nimport ProgressBar from '../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../components/ProgressBar/ProgressBarWrapper'\nimport NFTImage from './components/NFTImage/NFTImage'\nimport YourBondModalHeader from './components/YourBondModalHeader/YourBondModalHeader'\nimport Actions from './components/Actions/Actions'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport ActionsSolana from './components/Actions/ActionsSolana'\nimport ActionsAptos from './components/Actions/ActionsAptos'\nimport ActionsSui from './components/Actions/ActionsSui'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport TooltipBubble from '../../components/uikit-sdk/TooltipBubble'\nimport Text from '../../components/uikit-sdk/Text'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport Arrow from '../../components/uikit-sdk/Svg/Icons/Arrow'\nimport QuestionCircle from '../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst YourBondsModal = ({\n userBill,\n lostProfit,\n onDismiss,\n}: {\n userBill?: UserBill\n lostProfit?: string\n onDismiss?: () => void\n}) => {\n // Hooks\n const SDKConfig = useSDKConfig()\n\n // State\n const [showNFTImg, setShowNFTImg] = useState(false)\n\n // Static Data\n const depositUSD = userBill?.nftData?.data?.dollarValue\n const payout = userBill?.nftData?.data?.payout\n const payoutTokenPrice = parseFloat(userBill?.bond?.payoutTokenPrice ?? '0')\n const payoutUSD = payout && payoutTokenPrice ? payout * payoutTokenPrice : 0\n const payoutSymbol = userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken.symbol\n const payoutTokenSymbol = payoutSymbol === 'AIX' && userBill?.bond?.chainId === ChainId.SOL ? 'SOLAIX' : payoutSymbol\n\n // Cliff display info:\n const vestingCliff = Number(userBill?.bond?.vestingCliff)\n const currentTime = Math.round(new Date().getTime() / 1000)\n const vestingStartTimestamp = parseInt(userBill?.vestingStartTimestamp ?? '0')\n const isPendingCliff = vestingCliff ? currentTime - vestingStartTimestamp < vestingCliff : false\n const cliffCountdown = getTimePeriods(vestingStartTimestamp + (vestingCliff ?? 0) - currentTime, true)\n\n return (\n <Modal\n sx={{\n width: '480px',\n overflowY: 'unset !important',\n background: showNFTImg ? 'transparent !important' : 'white2',\n p: '0px',\n top: '56%',\n }}\n >\n <Flex\n sx={{\n flexDirection: 'column',\n borderRadius: 'normal',\n position: 'relative',\n background: showNFTImg ? 'transparent !important' : 'white2',\n p: '20px',\n }}\n >\n <NFTImage userBill={userBill} showNFTImg={showNFTImg} setShowNFTImg={setShowNFTImg} />\n\n {/* Modal Content */}\n\n {!showNFTImg && (\n <Flex sx={{ flexDirection: 'column' }}>\n <YourBondModalHeader userBill={userBill} onDismiss={onDismiss} />\n <Flex sx={{ mt: '10px', flexDirection: 'column', gap: '10px' }}>\n <Flex sx={{ width: '100%', gap: '15px', position: 'relative' }}>\n <Flex\n sx={{\n background: 'white3',\n borderRadius: 'normal',\n justifyContent: 'space-between',\n p: '10px',\n width: '50%',\n alignItems: 'center',\n fontSize: '14px',\n }}\n >\n <Flex>Deposit</Flex>\n <Flex>${formatNumberSI(depositUSD)}</Flex>\n </Flex>\n <Flex\n sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translateY(-50%) translateX(-50%)' }}\n >\n <Arrow direction=\"right\" width={'5px'} />\n </Flex>\n <Flex\n sx={{\n background: 'white3',\n borderRadius: 'normal',\n justifyContent: 'space-between',\n p: '10px',\n width: '50%',\n alignItems: 'center',\n fontSize: '14px',\n }}\n >\n <Flex>Bond Value</Flex>\n <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n <TokenImage symbol={payoutTokenSymbol} size={22} />\n <Flex sx={{ flexDirection: 'column', fontSize: '14px', lineHeight: '16px' }}>\n <Flex sx={{ justifyContent: 'center' }}>{formatNumberSI(payout ?? '0')}</Flex>\n <Flex sx={{ fontSize: '10px', fontWeight: 400, opacity: 0.6, justifyContent: 'center' }}>\n (${formatNumberSI(payoutUSD)})\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n {lostProfit && (\n <Flex\n sx={{\n background: 'white3',\n borderRadius: 'normal',\n width: '100%',\n p: '10px',\n justifyContent: 'space-between',\n }}\n >\n <Flex sx={{ width: '20%' }}>\n <img\n src={`https://ape.bond/images/launch/mythical.png`}\n alt=\"mythical\"\n style={{ width: '90px', height: '90px' }}\n />\n </Flex>\n <Flex sx={{ width: '75%', flexDirection: 'column', gap: '3px' }}>\n <Flex>\n You missed a <Flex sx={{ color: 'success', px: '3px' }}>${lostProfit}</Flex> bonus\n </Flex>\n <Flex sx={{ fontSize: '12px', lineHeight: '16px', fontWeight: 400 }}>\n Holding an Ape Tier would’ve gotten you an extra 5% bonus on this purchase and all future ones.\n </Flex>\n <Button\n variant=\"secondary\"\n sx={{ width: '100%', fontSize: '14px', height: '30px', fontWeight: 600 }}\n onClick={() => window.open('https://ape.bond/true-yield', '_blank')}\n >\n Upgrade Your Tier\n </Button>\n </Flex>\n </Flex>\n )}\n <Flex\n sx={{\n flexDirection: 'column',\n fontSize: '12px',\n fontWeight: 400,\n }}\n >\n <Flex\n sx={{\n width: '100%',\n justifyContent: 'space-between',\n alignItems: 'center',\n p: '4px 10px',\n background: 'white3',\n borderRadius: '10px 10px 0px 0px',\n }}\n >\n <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n <Flex sx={{ opacity: 0.6 }}>Vesting Progress</Flex>\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{UserBillTooltipText.FullyVested}</Flex>}\n width=\"230px\"\n placement=\"bottomLeft\"\n transformTip=\"translate(-5%, 0%)\"\n >\n <Flex className=\"block-header icon\">\n <QuestionCircle width=\"12px\" />\n </Flex>\n </TooltipBubble>\n </Flex>\n <Flex sx={{ alignItems: 'center' }}>\n {isPendingCliff ? (\n <>\n Claiming starts in{' '}\n {`${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`}\n </>\n ) : (\n <ProgressBarWrapper\n title={''}\n value={<ProgressBar value={getPercentageVested(userBill)} />}\n style={{\n width: '100px',\n flexDirection: 'column',\n alignItems: 'center',\n }}\n showTooltip={true}\n toolTip={\n getTimeLeftForFullyVested(userBill) > 0\n ? `Fully vested in ${getPendingVestingString(userBill)}.`\n : `Fully Vested.`\n }\n />\n )}\n </Flex>\n </Flex>\n <Flex\n sx={{\n width: '100%',\n justifyContent: 'space-between',\n alignItems: 'center',\n p: '4px 10px',\n background: 'white4',\n height: '26px',\n }}\n >\n <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n <Flex sx={{ opacity: 0.6 }}>Pending</Flex>\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{UserBillTooltipText.Pending}</Flex>}\n width=\"230px\"\n placement=\"bottomLeft\"\n transformTip=\"translate(-5%, 0%)\"\n >\n <Flex className=\"block-header icon\">\n <QuestionCircle width=\"12px\" />\n </Flex>\n </TooltipBubble>\n </Flex>\n <Flex sx={{ alignItems: 'center' }}>\n <TokenImage symbol={payoutTokenSymbol} size={18} />\n <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n {formatNumberSI(pending(userBill), 4)}\n </Text>\n <Text\n sx={{\n fontSize: ['10px', '10px', '10px', '12px'],\n fontWeight: 400,\n ml: '10px',\n opacity: 0.6,\n }}\n >\n (${formatNumberSI(pendingUSD(userBill))})\n </Text>\n </Flex>\n </Flex>\n <Flex\n sx={{\n width: '100%',\n justifyContent: 'space-between',\n alignItems: 'center',\n p: '4px 10px',\n background: 'white3',\n height: '26px',\n }}\n >\n <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n <Flex sx={{ opacity: 0.6 }}>Claimable</Flex>\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{UserBillTooltipText.Claimable}</Flex>}\n width=\"230px\"\n placement=\"bottomLeft\"\n transformTip=\"translate(-5%, 0%)\"\n >\n <Flex className=\"block-header icon\">\n <QuestionCircle width=\"12px\" />\n </Flex>\n </TooltipBubble>\n </Flex>\n <Flex sx={{ alignItems: 'center' }}>\n <TokenImage symbol={payoutTokenSymbol} size={18} />\n <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n {formatNumberSI(claimable(userBill), 4)}\n </Text>\n <Text\n sx={{\n fontSize: ['10px', '10px', '10px', '12px'],\n fontWeight: 400,\n ml: '10px',\n opacity: 0.6,\n }}\n >\n (${formatNumberSI(claimableUSD(userBill))})\n </Text>\n </Flex>\n </Flex>\n <Flex\n sx={{\n width: '100%',\n justifyContent: 'space-between',\n alignItems: 'center',\n p: '4px 10px',\n background: 'white4',\n height: '26px',\n borderRadius: '0px 0px 10px 10px',\n }}\n >\n <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n <Flex sx={{ opacity: 0.6 }}>Claimed</Flex>\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{UserBillTooltipText.Claimed}</Flex>}\n width=\"230px\"\n placement=\"bottomLeft\"\n transformTip=\"translate(-5%, 0%)\"\n >\n <Flex className=\"block-header icon\">\n <QuestionCircle width=\"12px\" />\n </Flex>\n </TooltipBubble>\n </Flex>\n <Flex sx={{ alignItems: 'center' }}>\n <TokenImage symbol={payoutTokenSymbol} size={18} />\n <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n {formatNumberSI(claimed(userBill), 4)}\n </Text>\n <Text\n sx={{\n fontSize: ['10px', '10px', '10px', '12px'],\n fontWeight: 400,\n ml: '10px',\n opacity: 0.6,\n }}\n >\n (${formatNumberSI(claimedUSD(userBill))})\n </Text>\n </Flex>\n </Flex>\n </Flex>\n {userBill?.bond?.warningCard && (\n <Flex\n sx={{\n width: '100%',\n background: '#DE62F366',\n justifyContent: 'center',\n borderRadius: 'normal',\n }}\n >\n <Text sx={{ fontSize: '12px', fontWeight: 400, p: '4px 10px', lineHeight: '16px' }}>\n <SafeHTMLComponent html={userBill?.bond?.warningCard} />\n </Text>\n </Flex>\n )}\n <Flex\n sx={{\n width: '100%',\n justifyContent: 'space-between',\n gap: ['10px', '10px', '10px', '15px'],\n height: '40px',\n }}\n >\n {userBill?.bond?.chainId === ChainId.SOL ? (\n <ActionsSolana userBill={userBill} />\n ) : userBill?.bond?.chainId === ChainId.APTOS ? (\n <ActionsAptos userBill={userBill} />\n ) : userBill?.bond?.chainId === ChainId.SUI ? (\n <ActionsSui userBill={userBill} />\n ) : (\n <Actions userBill={userBill} />\n )}\n </Flex>\n {!lostProfit && !SDKConfig.chains.includes(ChainId.BITTENSOR_TESTNET) && (\n <Recommendations billAddress={userBill?.address} />\n )}\n </Flex>\n </Flex>\n )}\n </Flex>\n </Modal>\n )\n}\n\nexport default YourBondsModal\n"],"names":["_jsx","_jsxs","NFTImage","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"YourBondsModal.js","sources":["../../../src/views/YourBondsModal/YourBondsModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { UserBill } from '../../types/yourbonds'\nimport TokenImage from '../../components/uikit-sdk/TokenImage'\nimport { formatNumberSI } from '../../utils/formatNumber'\nimport { UserBillTooltipText } from '../../config/constants/tooltips'\nimport Recommendations from './components/Recommendations/Recommendations'\nimport {\n claimable,\n claimableUSD,\n claimed,\n claimedUSD,\n getPendingVestingString,\n getPercentageVested,\n getTimeLeftForFullyVested,\n pending,\n pendingUSD,\n} from '../../utils/displayHelpers'\nimport { getTimePeriods } from '../../utils/getTimePeriods'\nimport SafeHTMLComponent from '../../components/SafeHTMLComponent'\nimport ProgressBar from '../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../components/ProgressBar/ProgressBarWrapper'\nimport NFTImage from './components/NFTImage/NFTImage'\nimport YourBondModalHeader from './components/YourBondModalHeader/YourBondModalHeader'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { getAdapterForChain } from '../../adapters/registry'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport TooltipBubble from '../../components/uikit-sdk/TooltipBubble'\nimport Text from '../../components/uikit-sdk/Text'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport Arrow from '../../components/uikit-sdk/Svg/Icons/Arrow'\nimport QuestionCircle from '../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst YourBondsModal = ({\n userBill,\n lostProfit,\n onDismiss,\n}: {\n userBill?: UserBill\n lostProfit?: string\n onDismiss?: () => void\n}) => {\n // Hooks\n const SDKConfig = useSDKConfig()\n\n // State\n const [showNFTImg, setShowNFTImg] = useState(false)\n\n // Static Data\n const depositUSD = userBill?.nftData?.data?.dollarValue\n const payout = userBill?.nftData?.data?.payout\n const payoutTokenPrice = parseFloat(userBill?.bond?.payoutTokenPrice ?? '0')\n const payoutUSD = payout && payoutTokenPrice ? payout * payoutTokenPrice : 0\n const payoutSymbol = userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken.symbol\n const payoutTokenSymbol = payoutSymbol === 'AIX' && userBill?.bond?.chainId === ChainId.SOL ? 'SOLAIX' : payoutSymbol\n const bondAdapter = userBill?.bond?.chainId ? getAdapterForChain(userBill.bond.chainId) : undefined\n\n // Cliff display info:\n const vestingCliff = Number(userBill?.bond?.vestingCliff)\n const currentTime = Math.round(new Date().getTime() / 1000)\n const vestingStartTimestamp = parseInt(userBill?.vestingStartTimestamp ?? '0')\n const isPendingCliff = vestingCliff ? currentTime - vestingStartTimestamp < vestingCliff : false\n const cliffCountdown = getTimePeriods(vestingStartTimestamp + (vestingCliff ?? 0) - currentTime, true)\n\n return (\n <Modal\n className={clsx(\n 'ape:w-[480px] ape:[overflow-y:unset]! ape:p-0! ape:top-[56%] ape:overflow-x-visible',\n showNFTImg ? 'ape:bg-transparent!' : 'ape:bg-white2',\n )}\n >\n <Flex\n className={clsx(\n 'ape:flex-col ape:rounded-normal ape:relative ape:p-[20px]',\n showNFTImg ? 'ape:bg-transparent!' : 'ape:bg-white2',\n )}\n >\n <NFTImage userBill={userBill} showNFTImg={showNFTImg} setShowNFTImg={setShowNFTImg} />\n\n {/* Modal Content */}\n\n {!showNFTImg && (\n <Flex className=\"ape:flex-col\">\n <YourBondModalHeader userBill={userBill} onDismiss={onDismiss} />\n <Flex className=\"ape:mt-[10px] ape:flex-col ape:gap-[10px]\">\n <Flex className=\"ape:w-full ape:gap-[15px] ape:relative\">\n <Flex className=\"ape:bg-white3 ape:rounded-normal ape:justify-between ape:p-[10px] ape:w-1/2 ape:items-center ape:text-[14px]\">\n <Flex>Deposit</Flex>\n <Flex>${formatNumberSI(depositUSD)}</Flex>\n </Flex>\n <Flex className=\"ape:absolute ape:top-1/2 ape:left-1/2 ape:-translate-y-1/2 ape:-translate-x-1/2\">\n <Arrow direction=\"right\" width={'5px'} />\n </Flex>\n <Flex className=\"ape:bg-white3 ape:rounded-normal ape:justify-between ape:p-[10px] ape:w-1/2 ape:items-center ape:text-[14px]\">\n <Flex>Bond Value</Flex>\n <Flex className=\"ape:items-center ape:gap-[5px]\">\n <TokenImage symbol={payoutTokenSymbol} size={22} />\n <Flex className=\"ape:flex-col ape:text-[14px]\" style={{ lineHeight: '16px' }}>\n <Flex className=\"ape:justify-center\">{formatNumberSI(payout ?? '0')}</Flex>\n <Flex className=\"ape:text-[10px] ape:font-normal ape:opacity-60 ape:justify-center\">\n (${formatNumberSI(payoutUSD)})\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n {lostProfit && (\n <Flex className=\"ape:bg-white3 ape:rounded-normal ape:w-full ape:p-[10px] ape:justify-between\">\n <Flex className=\"ape:w-1/5\">\n <img\n src={`https://ape.bond/images/launch/mythical.png`}\n alt=\"mythical\"\n style={{ width: '90px', height: '90px' }}\n />\n </Flex>\n <Flex className=\"ape:w-[75%] ape:flex-col ape:gap-[3px]\">\n <Flex>\n You missed a{' '}\n <Flex className=\"ape:px-[3px]\" style={{ color: 'var(--ape-color-success)' }}>\n ${lostProfit}\n </Flex>{' '}\n bonus\n </Flex>\n <Flex className=\"ape:text-[12px] ape:font-normal\" style={{ lineHeight: '16px' }}>\n Holding an Ape Tier would’ve gotten you an extra 5% bonus on this purchase and all future ones.\n </Flex>\n <Button\n variant=\"secondary\"\n className=\"ape:w-full ape:text-[14px]! ape:h-[30px] ape:font-semibold\"\n onClick={() => window.open('https://ape.bond/true-yield', '_blank')}\n >\n Upgrade Your Tier\n </Button>\n </Flex>\n </Flex>\n )}\n <Flex className=\"ape:flex-col ape:text-[12px] ape:font-normal\">\n <Flex className=\"ape:w-full ape:justify-between ape:items-center ape:p-[4px_10px] ape:bg-white3 ape:rounded-[10px_10px_0px_0px]\">\n <Flex className=\"ape:items-center ape:gap-[5px]\">\n <Flex className=\"ape:opacity-60\">Vesting Progress</Flex>\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{UserBillTooltipText.FullyVested}</Flex>}\n width=\"230px\"\n placement=\"bottomLeft\"\n transformTip=\"translate(-5%, 0%)\"\n >\n <Flex className=\"block-header icon ape:text-white ape:font-normal ape:text-[12px]\">\n <QuestionCircle width=\"12px\" />\n </Flex>\n </TooltipBubble>\n </Flex>\n <Flex className=\"ape:items-center\">\n {isPendingCliff ? (\n <>\n Claiming starts in{' '}\n {`${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`}\n </>\n ) : (\n <ProgressBarWrapper\n title={''}\n value={<ProgressBar value={getPercentageVested(userBill)} />}\n style={{\n width: '127px',\n height: '25px',\n flexDirection: 'column',\n justifyContent: 'center',\n }}\n showTooltip={true}\n toolTip={\n getTimeLeftForFullyVested(userBill) > 0\n ? `Fully vested in ${getPendingVestingString(userBill)}.`\n : `Fully Vested.`\n }\n />\n )}\n </Flex>\n </Flex>\n <Flex className=\"ape:w-full ape:justify-between ape:items-center ape:p-[4px_10px] ape:bg-white4 ape:h-[26px]\">\n <Flex className=\"ape:items-center ape:gap-[5px]\">\n <Flex className=\"ape:opacity-60\">Pending</Flex>\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{UserBillTooltipText.Pending}</Flex>}\n width=\"230px\"\n placement=\"bottomLeft\"\n transformTip=\"translate(-5%, 0%)\"\n >\n <Flex className=\"block-header icon ape:text-white ape:font-normal ape:text-[12px]\">\n <QuestionCircle width=\"12px\" />\n </Flex>\n </TooltipBubble>\n </Flex>\n <Flex className=\"ape:items-center\">\n <TokenImage symbol={payoutTokenSymbol} size={18} />\n <Text weight={700} className=\"ape:ml-[10px]\" size=\"12px\">\n {formatNumberSI(pending(userBill), 4)}\n </Text>\n <Text weight={400} className=\"ape:ml-[10px] ape:opacity-60 ape:text-[10px]! ape:md:text-[12px]!\">\n (${formatNumberSI(pendingUSD(userBill))})\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:w-full ape:justify-between ape:items-center ape:p-[4px_10px] ape:bg-white3 ape:h-[26px]\">\n <Flex className=\"ape:items-center ape:gap-[5px]\">\n <Flex className=\"ape:opacity-60\">Claimable</Flex>\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{UserBillTooltipText.Claimable}</Flex>}\n width=\"230px\"\n placement=\"bottomLeft\"\n transformTip=\"translate(-5%, 0%)\"\n >\n <Flex className=\"block-header icon ape:text-white ape:font-normal ape:text-[12px]\">\n <QuestionCircle width=\"12px\" />\n </Flex>\n </TooltipBubble>\n </Flex>\n <Flex className=\"ape:items-center\">\n <TokenImage symbol={payoutTokenSymbol} size={18} />\n <Text weight={700} className=\"ape:ml-[10px]\" size=\"12px\">\n {formatNumberSI(claimable(userBill), 4)}\n </Text>\n <Text weight={400} className=\"ape:ml-[10px] ape:opacity-60 ape:text-[10px]! ape:md:text-[12px]!\">\n (${formatNumberSI(claimableUSD(userBill))})\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:w-full ape:justify-between ape:items-center ape:p-[4px_10px] ape:bg-white4 ape:h-[26px] ape:rounded-[0px_0px_10px_10px]\">\n <Flex className=\"ape:items-center ape:gap-[5px]\">\n <Flex className=\"ape:opacity-60\">Claimed</Flex>\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{UserBillTooltipText.Claimed}</Flex>}\n width=\"230px\"\n placement=\"bottomLeft\"\n transformTip=\"translate(-5%, 0%)\"\n >\n <Flex className=\"block-header icon ape:text-white ape:font-normal ape:text-[12px]\">\n <QuestionCircle width=\"12px\" />\n </Flex>\n </TooltipBubble>\n </Flex>\n <Flex className=\"ape:items-center\">\n <TokenImage symbol={payoutTokenSymbol} size={18} />\n <Text weight={700} className=\"ape:ml-[10px]\" size=\"12px\">\n {formatNumberSI(claimed(userBill), 4)}\n </Text>\n <Text weight={400} className=\"ape:ml-[10px] ape:opacity-60 ape:text-[10px]! ape:md:text-[12px]!\">\n (${formatNumberSI(claimedUSD(userBill))})\n </Text>\n </Flex>\n </Flex>\n </Flex>\n {userBill?.bond?.warningCard && (\n <Flex className=\"ape:w-full ape:justify-center ape:rounded-normal ape:bg-[#DE62F366]\">\n <Text as=\"div\" weight={400} size=\"12px\" className=\"ape:p-[4px_10px]\" style={{ lineHeight: '16px' }}>\n <SafeHTMLComponent html={userBill?.bond?.warningCard} />\n </Text>\n </Flex>\n )}\n <Flex className=\"ape:w-full ape:justify-between ape:gap-[10px] ape:md:gap-[15px] ape:h-[40px]\">\n {bondAdapter && <bondAdapter.BondActions userBill={userBill} />}\n </Flex>\n {!lostProfit && !SDKConfig.chains.includes(ChainId.BITTENSOR_TESTNET) && (\n <Recommendations billAddress={userBill?.address} />\n )}\n </Flex>\n </Flex>\n )}\n </Flex>\n </Modal>\n )\n}\n\nexport default YourBondsModal\n"],"names":["_jsx","_jsxs","NFTImage","_Fragment"],"mappings":"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"}

package/dist/views/YourBondsModal/components/LinkShare/LinkShare.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { UserBill } from '../../../../types/yourbonds';
 declare const LinkShare: ({ userBill }: {
     userBill: UserBill | undefined;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LinkShare;

package/dist/views/YourBondsModal/components/LinkShare/LinkShare.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { Spinner } from 'theme-ui';
+import Spinner from '../../../../components/uikit-sdk/Spinner/index.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import { useURLByEnvironment } from '../../../../state/useSDKConfig.js';
 import { generateImageFromTemplate } from './utils.js';
@@ -37,20 +37,7 @@ const LinkShare = ({ userBill }) => {
         await generateImageFromTemplate(bondNFTData, url, apiUrl);
         setIsLoading([false, false]);
     };
-    return (jsxs(Flex, { sx: {
-            background: ['white3', 'white3', 'white3', 'white4'],
-            borderRadius: 'normal',
-            justifyContent: 'center',
-            alignItems: 'center',
-            p: '2px 10px 2px 5px',
-            fontWeight: 600,
-            fontSize: '12px',
-            height: '22px',
-            cursor: 'pointer',
-            '&:hover': {
-                background: 'white5',
-            },
-        }, onClick: () => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x'), children: [jsx(Flex, { children: isLoading[0] ? jsx(Spinner, { size: 16 }) : jsx(Twitter, { width: 20 }) }), jsx(Flex, { children: "SHARE" })] }));
+    return (jsxs(Flex, { className: "ape:bg-white3 ape:lg:bg-white4 ape:rounded-normal ape:justify-center ape:items-center ape:p-[2px_10px_2px_5px] ape:font-semibold ape:text-[12px] ape:h-[22px] ape:cursor-pointer ape:hover:bg-white5", onClick: () => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x'), children: [jsx(Flex, { children: isLoading[0] ? jsx(Spinner, { size: 16 }) : jsx(Twitter, { width: 20 }) }), jsx(Flex, { children: "SHARE" })] }));
 };
 export { LinkShare as default };

package/dist/views/YourBondsModal/components/LinkShare/LinkShare.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LinkShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/LinkShare.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { Spinner } from '~~theme~~-ui'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { useURLByEnvironment } from '../../../../state/useSDKConfig'\nimport { UserBill, UserBillNftData } from '../../../../types/yourbonds'\nimport { generateImageFromTemplate } from './utils'\nimport track from '../../../../utils/track'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Twitter from '../../../../components/uikit-sdk/Svg/Icons/Twitter'\n\nconst LinkShare = ({ userBill }: { userBill: UserBill \| undefined }) => {\n // State\n const [isLoading, setIsLoading] = useState<boolean[]>([false, false])\n\n // Static data\n const bondNFTData: UserBillNftData \| undefined = userBill?.nftData\n const chainId = userBill?.bond?.chainId\n // Hooks\n const mainUrl = useURLByEnvironment('mainUrl')\n const apiUrl = useURLByEnvironment('apiV2') ?? ''\n const bondAddress =\n userBill?.bond?.chainId === ChainId.SOL ? bondNFTData?.contractAddress : bondNFTData?.data?.billNftAddress\n const shareUrl = `${mainUrl}/bond-nft?bondAddress=${bondAddress}%26bondChain=${bondNFTData?.chainId}%26tokenId=${userBill?.id}%26af=${bondNFTData?.data?.createdAddressOwner}`\n const text = `I've filled my bags with $${userBill?.bond?.earnToken.symbol} at a discount, thanks to Bonds-only on @apebond! Check it out: `\n const handleShare = async (url: string, social: string) => {\n if (isLoading[0] \|\| isLoading[1]) {\n console.log('something is off')\n return\n }\n track({\n event: 'referral',\n chain: chainId,\n data: {\n cat: `${social.toUpperCase()} Share Bond`,\n bond: bondNFTData?.data?.payoutTokenData.symbol,\n },\n })\n setIsLoading(social === 'x' ? [true, false] : [false, true])\n await generateImageFromTemplate(bondNFTData, url, apiUrl)\n setIsLoading([false, false])\n }\n\n return (\n <Flex\n ~~sx={{\n background~~: ['white3', ~~'white3',~~ ~~'white3',~~ ~~'white4'],\n borderRadius~~: ~~'normal',\n justifyContent~~: ~~'center',\n alignItems~~: ~~'center',\n p~~: ~~'2px 10px 2px 5px',\n fontWeight~~: ~~600,\n fontSize~~: ~~'12px',\n height~~: ~~'22px',\n cursor~~: ~~'pointer',\n '&:~~hover': ~~{\n background: '~~white5~~',\n },\n }}~~\n onClick={() => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x')}\n >\n <Flex>{isLoading[0] ? <Spinner size={16} /> : <Twitter width={20} />}</Flex>\n <Flex>SHARE</Flex>\n </Flex>\n )\n}\n\nexport default LinkShare\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsC,KAAI;;AAErE,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;AAGrE,IAAA,MAAM,WAAW,GAAgC,QAAQ,EAAE,OAAO;AAClE,IAAA,MAAM,OAAO,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO;;AAEvC,IAAA,MAAM,OAAO,GAAG,mBAAmB,CAAC,SAAS,CAAC;IAC9C,MAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,CAAC,IAAI,EAAE;IACjD,MAAM,WAAW,GACf,QAAQ,EAAE,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,GAAG,WAAW,EAAE,eAAe,GAAG,WAAW,EAAE,IAAI,EAAE,cAAc;IAC5G,MAAM,QAAQ,GAAG,CAAA,EAAG,OAAO,yBAAyB,WAAW,CAAA,aAAA,EAAgB,WAAW,EAAE,OAAO,cAAc,QAAQ,EAAE,EAAE,CAAA,MAAA,EAAS,WAAW,EAAE,IAAI,EAAE,mBAAmB,CAAA,CAAE;IAC9K,MAAM,IAAI,GAAG,CAAA,0BAAA,EAA6B,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAA,gEAAA,CAAkE;IAC5I,MAAM,WAAW,GAAG,OAAO,GAAW,EAAE,MAAc,KAAI;QACxD,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;AAChC,YAAA,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;YAC/B;QACF;AACA,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE;AACJ,gBAAA,GAAG,EAAE,CAAA,EAAG,MAAM,CAAC,WAAW,EAAE,CAAA,WAAA,CAAa;AACzC,gBAAA,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM;AAChD,aAAA;AACF,SAAA,CAAC;QACF,YAAY,CAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAgB,CAAC;QAC5D,MAAM,yBAAyB,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC;AACzD,QAAA,YAAY,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC9B,IAAA,CAAC;~~AAED~~,~~IAAA,~~QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;YACF,UAAU,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;AACpD,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,CAAC,EAAE,kBAAkB;AACrB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,MAAM,EAAE,SAAS~~;AACjB~~,~~YAAA~~,~~SAAS~~,~~EAAE;AACT~~,~~gBAAA,UAAU,EAAE,QAAQ;AACrB,aAAA;SACF,EACD,~~OAAO,EAAE,MAAM,WAAW,CAAC,CAAA,sCAAA,EAAyC,IAAI,CAAA,KAAA,EAAQ,QAAQ,~~EAAE~~,EAAE,GAAG,CAAC,EAAA,QAAA,EAAA,CAEhGC,GAAA,CAAC,IAAI,~~cAAE~~,SAAS,CAAC,CAAC,CAAC,GAAGA,GAAA,CAAC,OAAO,~~IAAC~~,IAAI,EAAE,EAAE,EAAA,CAAI,GAAGA,GAAA,CAAC,OAAO,~~IAAC~~,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CAAQ,EAC5EA,~~IAAC~~,IAAI,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAAA,EAAA,CACb;AAEX;;;;"}
1	+ {"version":3,"file":"LinkShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/LinkShare.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Spinner from '../../../../components/uikit-sdk/Spinner'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { useURLByEnvironment } from '../../../../state/useSDKConfig'\nimport { UserBill, UserBillNftData } from '../../../../types/yourbonds'\nimport { generateImageFromTemplate } from './utils'\nimport track from '../../../../utils/track'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Twitter from '../../../../components/uikit-sdk/Svg/Icons/Twitter'\n\nconst LinkShare = ({ userBill }: { userBill: UserBill \| undefined }) => {\n // State\n const [isLoading, setIsLoading] = useState<boolean[]>([false, false])\n\n // Static data\n const bondNFTData: UserBillNftData \| undefined = userBill?.nftData\n const chainId = userBill?.bond?.chainId\n // Hooks\n const mainUrl = useURLByEnvironment('mainUrl')\n const apiUrl = useURLByEnvironment('apiV2') ?? ''\n const bondAddress =\n userBill?.bond?.chainId === ChainId.SOL ? bondNFTData?.contractAddress : bondNFTData?.data?.billNftAddress\n const shareUrl = `${mainUrl}/bond-nft?bondAddress=${bondAddress}%26bondChain=${bondNFTData?.chainId}%26tokenId=${userBill?.id}%26af=${bondNFTData?.data?.createdAddressOwner}`\n const text = `I've filled my bags with $${userBill?.bond?.earnToken.symbol} at a discount, thanks to Bonds-only on @apebond! Check it out: `\n const handleShare = async (url: string, social: string) => {\n if (isLoading[0] \|\| isLoading[1]) {\n console.log('something is off')\n return\n }\n track({\n event: 'referral',\n chain: chainId,\n data: {\n cat: `${social.toUpperCase()} Share Bond`,\n bond: bondNFTData?.data?.payoutTokenData.symbol,\n },\n })\n setIsLoading(social === 'x' ? [true, false] : [false, true])\n await generateImageFromTemplate(bondNFTData, url, apiUrl)\n setIsLoading([false, false])\n }\n\n return (\n <Flex\n className=\"ape:bg-white3 ape:lg:bg-white4 ape:rounded-normal ape:justify-center ape:items-center ape:p-[2px_10px_2px_5px] ape:font-semibold ape:text-[12px] ape:h-[22px] ape:cursor-pointer ape:hover:bg-white5\"\n onClick={() => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x')}\n >\n <Flex>{isLoading[0] ? <Spinner size={16} /> : <Twitter width={20} />}</Flex>\n <Flex>SHARE</Flex>\n </Flex>\n )\n}\n\nexport default LinkShare\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsC,KAAI;;AAErE,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;AAGrE,IAAA,MAAM,WAAW,GAAgC,QAAQ,EAAE,OAAO;AAClE,IAAA,MAAM,OAAO,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO;;AAEvC,IAAA,MAAM,OAAO,GAAG,mBAAmB,CAAC,SAAS,CAAC;IAC9C,MAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,CAAC,IAAI,EAAE;IACjD,MAAM,WAAW,GACf,QAAQ,EAAE,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,GAAG,WAAW,EAAE,eAAe,GAAG,WAAW,EAAE,IAAI,EAAE,cAAc;IAC5G,MAAM,QAAQ,GAAG,CAAA,EAAG,OAAO,yBAAyB,WAAW,CAAA,aAAA,EAAgB,WAAW,EAAE,OAAO,cAAc,QAAQ,EAAE,EAAE,CAAA,MAAA,EAAS,WAAW,EAAE,IAAI,EAAE,mBAAmB,CAAA,CAAE;IAC9K,MAAM,IAAI,GAAG,CAAA,0BAAA,EAA6B,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAA,gEAAA,CAAkE;IAC5I,MAAM,WAAW,GAAG,OAAO,GAAW,EAAE,MAAc,KAAI;QACxD,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;AAChC,YAAA,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;YAC/B;QACF;AACA,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE;AACJ,gBAAA,GAAG,EAAE,CAAA,EAAG,MAAM,CAAC,WAAW,EAAE,CAAA,WAAA,CAAa;AACzC,gBAAA,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM;AAChD,aAAA;AACF,SAAA,CAAC;QACF,YAAY,CAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAgB,CAAC;QAC5D,MAAM,yBAAyB,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC;AACzD,QAAA,YAAY,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC9B,IAAA,CAAC;IAED,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,sMAAsM,EAChN,OAAO,EAAE,MAAM,WAAW,CAAC,CAAA,sCAAA,EAAyC,IAAI,CAAA,KAAA,EAAQ,QAAQ,CAAA,CAAE,EAAE,GAAG,CAAC,EAAA,QAAA,EAAA,CAEhGC,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAE,SAAS,CAAC,CAAC,CAAC,GAAGA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,GAAGA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CAAQ,EAC5EA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAAA,EAAA,CACb;AAEX;;;;"}

package/dist/views/YourBondsModal/components/LinkShare/templateImageShare.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { formatNumberSI, localeFormat } from '../../../../utils/formatNumber.js';
-// Mirrors src/scss/ShareBondImage.scss - duplicated here (rather than imported) so this
-// stays a plain, self-contained string with no build-tooling dependency, since it's
+// Plain, self-contained CSS string with no build-tooling dependency, since it's
 // embedded directly into the rendered image rather than applied via the page's stylesheet.
 function getTemplateCss(backgroundImage) {
     return `

package/dist/views/YourBondsModal/components/LinkShare/templateImageShare.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"templateImageShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/templateImageShare.ts"],"sourcesContent":["import { UserBillNftData } from '../../../../types/yourbonds'\nimport { formatNumberSI, localeFormat } from '../../../../utils/formatNumber'\n\nexport interface TemplateImages {\n title: string\n background: string\n nft: string\n payoutToken: string\n principalToken: string\n}\n\n// Mirrors src/scss/ShareBondImage.scss - duplicated here (rather than imported) so this\n// stays a plain, self-contained string with no build-tooling dependency, since it's\n// embedded directly into the rendered image rather than applied via the page's stylesheet.\nfunction getTemplateCss(backgroundImage: string) {\n return `\n .sharebondimage-card {\n flex-direction: column;\n width: 768px;\n height: 768px;\n align-items: center;\n background-image: url(${backgroundImage});\n background-size: cover;\n background-position: bottom center;\n background-repeat: no-repeat;\n justify-content: center;\n display: flex;\n }\n .sharebondimage-nft {\n margin-top: 10px;\n flex-direction: column;\n align-items: center;\n }\n .sharebondimage-nft-id {\n display: flex;\n position: absolute;\n top: 15px;\n right: -61px;\n min-width: 60px;\n height: 28px;\n border-radius: 0px 6px 6px 0px;\n justify-content: center;\n align-items: center;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(34px);\n }\n .sharebondimage-nft-id span {\n font-size: 14px;\n color: text;\n line-height: 8px\n }\n .sharebondimage-nft img {\n width: 319px;\n height: 180px;\n border-radius: 10px 10px 0px 0px;\n }\n .sharebondimage-container-info {\n display: flex;\n width: 381px;\n height: 147px;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(34px);\n border-radius: 10px;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: column;\n padding: 10px 8px 10px 8px;\n margin-top: -3px\n }\n .sharebondimage-container-discount {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n background-color: rgba(255, 255, 255, 0.05);\n border-radius: 7px;\n padding: 10px;\n }\n .sharebondimage-container-off {\n display: flex;\n margin-left: 30px;\n width: 125px;\n height: 27px;\n border-radius: 5px;\n border: 1px solid #38A61133;\n justify-content: center;\n align-items: center;\n background-color: #38A6110D;\n }\n .sharebondimage-container-off span {\n color: #38A611;\n font-size: 16px;\n font-weight: 700;\n }\n .sharebondimage-container-discount-price {\n flex-direction: column;\n margin-left: 13px\n }\n .sharebondimage-container-discount-token {\n display: flex;\n gap: 4px;\n color: rgba(255, 255, 255, 0.5)\n }\n .sharebondimage-container-discount-token span {\n font-size: 14px;\n font-weight: 400;\n }\n .sharebondimage-container-discount-price-discount {\n color: #49B423;\n font-size: 22px;\n font-weight: 700;\n }\n .sharebondimage-container-tokens {\n display: flex;\n width: 100%;\n padding-top: 6px;\n gap: 5px;\n justify-content: center;\n align-items: center;\n }\n .sharebondimage-container-token {\n display: flex;\n gap: 5px;\n justify-content: center;\n align-items: center;\n width: 100%;\n background-color: rgba(255, 255, 255, 0.05);\n border-radius: 7px;\n padding: 10px;\n }\n .sharebondimage-container-token img {\n width: 26px;\n height: 26px;\n }\n .sharebondimage-amount-deposit {\n color: #FAFAFA;\n font-size: 14px;\n font-weight: 700;\n }\n .sharebondimage-dollarvalue {\n color: rgba(255, 255, 255, 0.5);\n font-size: 12px;\n font-weight: 400;\n }\n .sharebondimage-container-earntoken {\n display: flex;\n flex-direction: column;\n }\n .sharebondimage-amount-earntoken {\n display: flex;\n gap: 5px;\n justify-content: center;\n align-items: center;\n }\n .sharebondimage-profit {\n justify-content: center;\n align-items: center\n }\n .sharebondimage-profit span {\n color: #38A611;\n font-size: 10px;\n font-weight: 400;\n line-height: 4px\n }\n .sharebondimage-amount-payout {\n color: #38A611;\n font-size: 14px;\n font-weight: 700\n }\n .sharebondimage-amount-dollarvalue {\n color: #38A611;\n font-size: 12px;\n font-weight: 400\n }\n `\n}\n\nexport function getTemplateHTML(data: UserBillNftData, images: TemplateImages) {\n //@ts-ignore\n const isProfit = +data?.data?.payout * +data?.data?.payoutTokenPrice - data?.data?.dollarValue > 0\n const getCalculateOff = () => {\n if (!data \|\| !data.data) return 0\n return 100 - (data.data.dollarValue / (data.data.payout * +data.data.payoutTokenPrice)) * 100\n }\n const getCalculatePriceDiscount = () => {\n if (!data \|\| !data.data) return 0\n return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100\n }\n return `\n <style>${getTemplateCss(images.background)}</style>\n <div id=\"template-card\" class=\"sharebondimage-card\">\n <img src=\"${images.title}\" alt=\"title\" style=\"width: 169px; height: 52px;\" />\n <div class=\"sharebondimage-nft\">\n <div style=\"position: relative\">\n <div class=\"sharebondimage-nft-id\">\n <span>#${data.tokenId}</span>\n </div>\n <img src=\"${images.nft}\" alt=\"bill-nft\" />\n </div>\n </div>\n <div class=\"sharebondimage-container-info\">\n <div class=\"sharebondimage-container-discount\">\n <img src=\"${images.payoutToken}\" alt=\"payout-token-symbol\" style=\"width: 59px; height: 59px;\" />\n <div class=\"sharebondimage-container-discount-price\">\n <div class=\"sharebondimage-container-discount-token\">\n <span>${data.data?.payoutTokenData.symbol}</span>\n <span style=\"text-decoration: line-through\">\n $${formatNumberSI(+data?.data?.payoutTokenPrice!)}\n </span>\n </div>\n <span class=\"sharebondimage-container-discount-price-discount\">\n $${formatNumberSI(getCalculatePriceDiscount())}\n </span>\n </div>\n <div class=\"sharebondimage-container-off\">\n <span>\n ${localeFormat(getCalculateOff())}% OFF\n </span>\n </div>\n </div>\n <div class=\"sharebondimage-container-tokens\">\n <div class=\"sharebondimage-container-token\">\n <img src=\"${images.principalToken}\" alt=\"principal-symbol\" />\n <div class=\"sharebondimage-amount-deposit\">\n ${formatNumberSI(data?.data?.deposit)}\n </div>\n <div class=\"sharebondimage-dollarvalue\">\n $${localeFormat(data?.data?.dollarValue!)}\n </div>\n </div>\n <div class=\"sharebondimage-container-token\">\n <img src=\"${images.payoutToken}\" alt=\"payout-token2-symbol\" />\n <div class=\"sharebondimage-container-earntoken\">\n <div class=\"sharebondimage-amount-earntoken\">\n <div class=\"sharebondimage-amount-payout\">\n ${localeFormat(data?.data?.payout!)}\n </div>\n <div class=\"sharebondimage-amount-dollarvalue\">\n $${localeFormat(data?.data?.payout! * +data?.data?.payoutTokenPrice!)}\n </div>\n </div>\n <div class=\"sharebondimage-profit\" style=\"${!isProfit ? 'display: none' : ''}\">\n <span>\n +${localeFormat(data?.data?.payout! * +data?.data?.payoutTokenPrice! - data?.data?.dollarValue!)}\n profit!\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `\n}\n"],"names":[],"mappings":";;AAWA;AACA;AACA;AACA,SAAS,cAAc,CAAC,eAAuB,EAAA;IAC7C,OAAO;;;;;;8BAMqB,eAAe,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyJ1C;AACH;AAEM,SAAU,eAAe,CAAC,IAAqB,EAAE,MAAsB,EAAA;;IAE3E,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC;IAClG,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG;AAC/F,IAAA,CAAC;IACD,MAAM,yBAAyB,GAAG,MAAK;AACrC,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,EAAE,IAAI,GAAG;AAC9F,IAAA,CAAC;IACD,OAAO;AACE,SAAA,EAAA,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;;AAE5B,cAAA,EAAA,MAAM,CAAC,KAAK,CAAA;;;;AAIT,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAEX,kBAAA,EAAA,MAAM,CAAC,GAAG,CAAA;;;;;AAKV,kBAAA,EAAA,MAAM,CAAC,WAAW,CAAA;;;AAGlB,kBAAA,EAAA,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAA;;AAEpC,eAAA,EAAA,cAAc,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,CAAC;;;;eAIhD,cAAc,CAAC,yBAAyB,EAAE,CAAC;;;;;cAK5C,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;;;;;;AAMvB,oBAAA,EAAA,MAAM,CAAC,cAAc,CAAA;;AAE7B,YAAA,EAAA,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC;;;AAGlC,aAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;AAI/B,oBAAA,EAAA,MAAM,CAAC,WAAW,CAAA;;;;AAItB,gBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,CAAC;;;AAGhC,iBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,CAAC;;;wDAG7B,CAAC,QAAQ,GAAG,eAAe,GAAG,EAAE,CAAA;;AAErE,iBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;;;;;;GAS7G;AACH;;;;"}
1	+ {"version":3,"file":"templateImageShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/templateImageShare.ts"],"sourcesContent":["import { UserBillNftData } from '../../../../types/yourbonds'\nimport { formatNumberSI, localeFormat } from '../../../../utils/formatNumber'\n\nexport interface TemplateImages {\n title: string\n background: string\n nft: string\n payoutToken: string\n principalToken: string\n}\n\n// Plain, self-contained CSS string with no build-tooling dependency, since it's\n// embedded directly into the rendered image rather than applied via the page's stylesheet.\nfunction getTemplateCss(backgroundImage: string) {\n return `\n .sharebondimage-card {\n flex-direction: column;\n width: 768px;\n height: 768px;\n align-items: center;\n background-image: url(${backgroundImage});\n background-size: cover;\n background-position: bottom center;\n background-repeat: no-repeat;\n justify-content: center;\n display: flex;\n }\n .sharebondimage-nft {\n margin-top: 10px;\n flex-direction: column;\n align-items: center;\n }\n .sharebondimage-nft-id {\n display: flex;\n position: absolute;\n top: 15px;\n right: -61px;\n min-width: 60px;\n height: 28px;\n border-radius: 0px 6px 6px 0px;\n justify-content: center;\n align-items: center;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(34px);\n }\n .sharebondimage-nft-id span {\n font-size: 14px;\n color: text;\n line-height: 8px\n }\n .sharebondimage-nft img {\n width: 319px;\n height: 180px;\n border-radius: 10px 10px 0px 0px;\n }\n .sharebondimage-container-info {\n display: flex;\n width: 381px;\n height: 147px;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(34px);\n border-radius: 10px;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: column;\n padding: 10px 8px 10px 8px;\n margin-top: -3px\n }\n .sharebondimage-container-discount {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n background-color: rgba(255, 255, 255, 0.05);\n border-radius: 7px;\n padding: 10px;\n }\n .sharebondimage-container-off {\n display: flex;\n margin-left: 30px;\n width: 125px;\n height: 27px;\n border-radius: 5px;\n border: 1px solid #38A61133;\n justify-content: center;\n align-items: center;\n background-color: #38A6110D;\n }\n .sharebondimage-container-off span {\n color: #38A611;\n font-size: 16px;\n font-weight: 700;\n }\n .sharebondimage-container-discount-price {\n flex-direction: column;\n margin-left: 13px\n }\n .sharebondimage-container-discount-token {\n display: flex;\n gap: 4px;\n color: rgba(255, 255, 255, 0.5)\n }\n .sharebondimage-container-discount-token span {\n font-size: 14px;\n font-weight: 400;\n }\n .sharebondimage-container-discount-price-discount {\n color: #49B423;\n font-size: 22px;\n font-weight: 700;\n }\n .sharebondimage-container-tokens {\n display: flex;\n width: 100%;\n padding-top: 6px;\n gap: 5px;\n justify-content: center;\n align-items: center;\n }\n .sharebondimage-container-token {\n display: flex;\n gap: 5px;\n justify-content: center;\n align-items: center;\n width: 100%;\n background-color: rgba(255, 255, 255, 0.05);\n border-radius: 7px;\n padding: 10px;\n }\n .sharebondimage-container-token img {\n width: 26px;\n height: 26px;\n }\n .sharebondimage-amount-deposit {\n color: #FAFAFA;\n font-size: 14px;\n font-weight: 700;\n }\n .sharebondimage-dollarvalue {\n color: rgba(255, 255, 255, 0.5);\n font-size: 12px;\n font-weight: 400;\n }\n .sharebondimage-container-earntoken {\n display: flex;\n flex-direction: column;\n }\n .sharebondimage-amount-earntoken {\n display: flex;\n gap: 5px;\n justify-content: center;\n align-items: center;\n }\n .sharebondimage-profit {\n justify-content: center;\n align-items: center\n }\n .sharebondimage-profit span {\n color: #38A611;\n font-size: 10px;\n font-weight: 400;\n line-height: 4px\n }\n .sharebondimage-amount-payout {\n color: #38A611;\n font-size: 14px;\n font-weight: 700\n }\n .sharebondimage-amount-dollarvalue {\n color: #38A611;\n font-size: 12px;\n font-weight: 400\n }\n `\n}\n\nexport function getTemplateHTML(data: UserBillNftData, images: TemplateImages) {\n //@ts-ignore\n const isProfit = +data?.data?.payout * +data?.data?.payoutTokenPrice - data?.data?.dollarValue > 0\n const getCalculateOff = () => {\n if (!data \|\| !data.data) return 0\n return 100 - (data.data.dollarValue / (data.data.payout * +data.data.payoutTokenPrice)) * 100\n }\n const getCalculatePriceDiscount = () => {\n if (!data \|\| !data.data) return 0\n return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100\n }\n return `\n <style>${getTemplateCss(images.background)}</style>\n <div id=\"template-card\" class=\"sharebondimage-card\">\n <img src=\"${images.title}\" alt=\"title\" style=\"width: 169px; height: 52px;\" />\n <div class=\"sharebondimage-nft\">\n <div style=\"position: relative\">\n <div class=\"sharebondimage-nft-id\">\n <span>#${data.tokenId}</span>\n </div>\n <img src=\"${images.nft}\" alt=\"bill-nft\" />\n </div>\n </div>\n <div class=\"sharebondimage-container-info\">\n <div class=\"sharebondimage-container-discount\">\n <img src=\"${images.payoutToken}\" alt=\"payout-token-symbol\" style=\"width: 59px; height: 59px;\" />\n <div class=\"sharebondimage-container-discount-price\">\n <div class=\"sharebondimage-container-discount-token\">\n <span>${data.data?.payoutTokenData.symbol}</span>\n <span style=\"text-decoration: line-through\">\n $${formatNumberSI(+data?.data?.payoutTokenPrice!)}\n </span>\n </div>\n <span class=\"sharebondimage-container-discount-price-discount\">\n $${formatNumberSI(getCalculatePriceDiscount())}\n </span>\n </div>\n <div class=\"sharebondimage-container-off\">\n <span>\n ${localeFormat(getCalculateOff())}% OFF\n </span>\n </div>\n </div>\n <div class=\"sharebondimage-container-tokens\">\n <div class=\"sharebondimage-container-token\">\n <img src=\"${images.principalToken}\" alt=\"principal-symbol\" />\n <div class=\"sharebondimage-amount-deposit\">\n ${formatNumberSI(data?.data?.deposit)}\n </div>\n <div class=\"sharebondimage-dollarvalue\">\n $${localeFormat(data?.data?.dollarValue!)}\n </div>\n </div>\n <div class=\"sharebondimage-container-token\">\n <img src=\"${images.payoutToken}\" alt=\"payout-token2-symbol\" />\n <div class=\"sharebondimage-container-earntoken\">\n <div class=\"sharebondimage-amount-earntoken\">\n <div class=\"sharebondimage-amount-payout\">\n ${localeFormat(data?.data?.payout!)}\n </div>\n <div class=\"sharebondimage-amount-dollarvalue\">\n $${localeFormat(data?.data?.payout! * +data?.data?.payoutTokenPrice!)}\n </div>\n </div>\n <div class=\"sharebondimage-profit\" style=\"${!isProfit ? 'display: none' : ''}\">\n <span>\n +${localeFormat(data?.data?.payout! * +data?.data?.payoutTokenPrice! - data?.data?.dollarValue!)}\n profit!\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `\n}\n"],"names":[],"mappings":";;AAWA;AACA;AACA,SAAS,cAAc,CAAC,eAAuB,EAAA;IAC7C,OAAO;;;;;;8BAMqB,eAAe,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyJ1C;AACH;AAEM,SAAU,eAAe,CAAC,IAAqB,EAAE,MAAsB,EAAA;;IAE3E,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC;IAClG,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG;AAC/F,IAAA,CAAC;IACD,MAAM,yBAAyB,GAAG,MAAK;AACrC,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,EAAE,IAAI,GAAG;AAC9F,IAAA,CAAC;IACD,OAAO;AACE,SAAA,EAAA,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;;AAE5B,cAAA,EAAA,MAAM,CAAC,KAAK,CAAA;;;;AAIT,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAEX,kBAAA,EAAA,MAAM,CAAC,GAAG,CAAA;;;;;AAKV,kBAAA,EAAA,MAAM,CAAC,WAAW,CAAA;;;AAGlB,kBAAA,EAAA,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAA;;AAEpC,eAAA,EAAA,cAAc,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,CAAC;;;;eAIhD,cAAc,CAAC,yBAAyB,EAAE,CAAC;;;;;cAK5C,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;;;;;;AAMvB,oBAAA,EAAA,MAAM,CAAC,cAAc,CAAA;;AAE7B,YAAA,EAAA,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC;;;AAGlC,aAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;AAI/B,oBAAA,EAAA,MAAM,CAAC,WAAW,CAAA;;;;AAItB,gBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,CAAC;;;AAGhC,iBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,CAAC;;;wDAG7B,CAAC,QAAQ,GAAG,eAAe,GAAG,EAAE,CAAA;;AAErE,iBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;;;;;;GAS7G;AACH;;;;"}

package/dist/views/YourBondsModal/components/LinkShare/utils.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import axios from 'axios';
 import { APEBOND } from '../../../../config/constants/variables.js';
 import { getTemplateHTML } from './templateImageShare.js';
 import { imageUrlToDataUri, renderHtmlToJpeg } from './htmlToJpeg.js';
@@ -33,9 +32,12 @@ async function generateImageFromTemplate(bondNFTData, link, apiUrl) {
                 const blob = await response.blob();
                 const formData = new FormData();
                 formData.append('file', blob, fileName);
-                await axios.post(`${apiUrl}/cloudinary/uploadFile`, formData, {
-                    headers: { 'Content-Type': 'multipart/form-data' },
+                const uploadResponse = await fetch(`${apiUrl}/cloudinary/uploadFile`, {
+                    method: 'POST',
+                    body: formData,
                 });
+                if (!uploadResponse.ok)
+                    throw new Error(`Upload failed with status ${uploadResponse.status}`);
             }
             catch (error) {
                 console.error('Error upload file to cloudinary', error);
@@ -51,14 +53,13 @@ function share(link) {
     linkElement.click();
 }
 async function checkImageExists(fileName) {
-    let existImg = true;
     try {
-        await axios.get(`https://res.cloudinary.com/dswmrqgwy/image/upload/v1/bond_share/${fileName}.jpg`);
+        const response = await fetch(`https://res.cloudinary.com/dswmrqgwy/image/upload/v1/bond_share/${fileName}.jpg`);
+        return response.ok;
     }
     catch {
-        existImg = false;
+        return false;
     }
-    return existImg;
 }
 export { generateImageFromTemplate };

package/dist/views/YourBondsModal/components/LinkShare/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/utils.ts"],"sourcesContent":["import ~~axios from 'axios'\nimport~~ { APEBOND } from '../../../../config/constants/variables'\nimport { UserBillNftData } from '../../../../types/yourbonds'\nimport { getTemplateHTML } from './templateImageShare'\nimport { imageUrlToDataUri, renderHtmlToJpeg } from './htmlToJpeg'\n\nfunction getTokenImageUrl(symbol: string) {\n return `${APEBOND}/tokenImages/${symbol.toUpperCase()}.png`\n}\n\nfunction getPrincipalTokenSymbol(bondNFTData: UserBillNftData) {\n if (bondNFTData.data?.payoutTokenData.address.toLowerCase() !== bondNFTData.data?.token0.address.toLowerCase())\n return bondNFTData.data?.token0.symbol\n return bondNFTData.data?.token1.symbol\n}\n\nexport async function generateImageFromTemplate(\n bondNFTData: UserBillNftData \| undefined,\n link: string,\n apiUrl: string,\n) {\n if (bondNFTData && bondNFTData.data) {\n const fileName = `bond_share_${bondNFTData?.data.billNftAddress?.toLowerCase()}_${bondNFTData?.chainId}_${bondNFTData?.tokenId}`\n const existingImage = await checkImageExists(fileName)\n if (existingImage) {\n share(link)\n } else {\n try {\n const [title, background, nft, payoutToken, principalToken] = await Promise.all([\n imageUrlToDataUri('/images/bills/title.png'),\n imageUrlToDataUri('/images/bills/bg.png'),\n imageUrlToDataUri(bondNFTData.image),\n imageUrlToDataUri(getTokenImageUrl(bondNFTData.data.payoutTokenData.symbol)),\n imageUrlToDataUri(getTokenImageUrl(getPrincipalTokenSymbol(bondNFTData) ?? '')),\n ])\n\n const html = getTemplateHTML(bondNFTData, { title, background, nft, payoutToken, principalToken })\n const dataImage = await renderHtmlToJpeg(html, 768, 768, 0.85)\n const response = await fetch(dataImage)\n const blob = await response.blob()\n const formData = new FormData()\n formData.append('file', blob, fileName)\n await ~~axios.post~~(`${apiUrl}/cloudinary/uploadFile`, ~~formData,~~ {\n ~~headers~~: { '~~Content-Type~~': ~~'multipart/form-data' }~~,\n })\n } catch (error) {\n console.error('Error upload file to cloudinary', error)\n }\n share(link)\n }\n }\n}\n\nfunction share(link: string) {\n const linkElement = document.createElement('a')\n linkElement.href = link\n linkElement.target = '_blank'\n linkElement.click()\n}\n\nasync function checkImageExists(fileName: string) {\n ~~let existImg = true\n~~ try {\n await ~~axios.get~~(`https://res.cloudinary.com/dswmrqgwy/image/upload/v1/bond_share/${fileName}.jpg`)\n } catch {\n ~~existImg~~ = false\n }\n~~\n return existImg\n~~}\n"],"names":[],"mappings":"~~;;;;;AAMA~~,SAAS,gBAAgB,CAAC,MAAc,EAAA;IACtC,OAAO,CAAA,EAAG,OAAO,CAAA,aAAA,EAAgB,MAAM,CAAC,WAAW,EAAE,MAAM;AAC7D;AAEA,SAAS,uBAAuB,CAAC,WAA4B,EAAA;IAC3D,IAAI,WAAW,CAAC,IAAI,EAAE,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE;AAC5G,QAAA,OAAO,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM;AACxC,IAAA,OAAO,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM;AACxC;AAEO,eAAe,yBAAyB,CAC7C,WAAwC,EACxC,IAAY,EACZ,MAAc,EAAA;AAEd,IAAA,IAAI,WAAW,IAAI,WAAW,CAAC,IAAI,EAAE;QACnC,MAAM,QAAQ,GAAG,CAAA,WAAA,EAAc,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,EAAE,CAAA,CAAA,EAAI,WAAW,EAAE,OAAO,CAAA,CAAA,EAAI,WAAW,EAAE,OAAO,EAAE;AAChI,QAAA,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC,QAAQ,CAAC;QACtD,IAAI,aAAa,EAAE;YACjB,KAAK,CAAC,IAAI,CAAC;QACb;aAAO;AACL,YAAA,IAAI;AACF,gBAAA,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,EAAE,cAAc,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;oBAC9E,iBAAiB,CAAC,yBAAyB,CAAC;oBAC5C,iBAAiB,CAAC,sBAAsB,CAAC;AACzC,oBAAA,iBAAiB,CAAC,WAAW,CAAC,KAAK,CAAC;oBACpC,iBAAiB,CAAC,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;oBAC5E,iBAAiB,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;AAChF,iBAAA,CAAC;AAEF,gBAAA,MAAM,IAAI,GAAG,eAAe,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAClG,gBAAA,MAAM,SAAS,GAAG,MAAM,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;AAC9D,gBAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC;AACvC,gBAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AAClC,gBAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE;gBAC/B,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC;gBACvC,MAAM,KAAK,CAAC,~~IAAI~~,~~CAAC~~,~~GAAG~~,MAAM,~~CAAA~~,~~sBAAA~~,~~CAAwB~~,EAAE,QAAQ,~~EAAE~~;~~AAC5D~~,~~oBAAA~~,~~OAAO~~,~~EAAE~~,EAAE,cAAc,~~EAAE~~,~~qBAAqB~~,~~EAAE;AACnD~~,~~iBAAA~~,CAAC;~~YACJ~~;YAAE,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,iCAAiC,EAAE,KAAK,CAAC;YACzD;YACA,KAAK,CAAC,IAAI,CAAC;QACb;IACF;AACF;AAEA,SAAS,KAAK,CAAC,IAAY,EAAA;IACzB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;AAC/C,IAAA,WAAW,CAAC,IAAI,GAAG,IAAI;AACvB,IAAA,WAAW,CAAC,MAAM,GAAG,QAAQ;IAC7B,WAAW,CAAC,KAAK,EAAE;AACrB;AAEA,eAAe,gBAAgB,CAAC,QAAgB,EAAA;~~IAC9C~~,~~IAAI,QAAQ,GAAG,IAAI;AACnB,~~IAAA,IAAI;QACF,MAAM,KAAK,CAAC,~~GAAG~~,~~CAAC~~,~~mEAAmE~~,QAAQ,CAAA,IAAA,CAAM,CAAC;~~IACpG~~;AAAE,IAAA,MAAM;~~QACN~~,~~QAAQ~~,~~GAAG~~,KAAK;~~IAClB~~;~~AAEA,IAAA,OAAO,QAAQ;AACjB~~;;;;"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/utils.ts"],"sourcesContent":["import { APEBOND } from '../../../../config/constants/variables'\nimport { UserBillNftData } from '../../../../types/yourbonds'\nimport { getTemplateHTML } from './templateImageShare'\nimport { imageUrlToDataUri, renderHtmlToJpeg } from './htmlToJpeg'\n\nfunction getTokenImageUrl(symbol: string) {\n return `${APEBOND}/tokenImages/${symbol.toUpperCase()}.png`\n}\n\nfunction getPrincipalTokenSymbol(bondNFTData: UserBillNftData) {\n if (bondNFTData.data?.payoutTokenData.address.toLowerCase() !== bondNFTData.data?.token0.address.toLowerCase())\n return bondNFTData.data?.token0.symbol\n return bondNFTData.data?.token1.symbol\n}\n\nexport async function generateImageFromTemplate(\n bondNFTData: UserBillNftData \| undefined,\n link: string,\n apiUrl: string,\n) {\n if (bondNFTData && bondNFTData.data) {\n const fileName = `bond_share_${bondNFTData?.data.billNftAddress?.toLowerCase()}_${bondNFTData?.chainId}_${bondNFTData?.tokenId}`\n const existingImage = await checkImageExists(fileName)\n if (existingImage) {\n share(link)\n } else {\n try {\n const [title, background, nft, payoutToken, principalToken] = await Promise.all([\n imageUrlToDataUri('/images/bills/title.png'),\n imageUrlToDataUri('/images/bills/bg.png'),\n imageUrlToDataUri(bondNFTData.image),\n imageUrlToDataUri(getTokenImageUrl(bondNFTData.data.payoutTokenData.symbol)),\n imageUrlToDataUri(getTokenImageUrl(getPrincipalTokenSymbol(bondNFTData) ?? '')),\n ])\n\n const html = getTemplateHTML(bondNFTData, { title, background, nft, payoutToken, principalToken })\n const dataImage = await renderHtmlToJpeg(html, 768, 768, 0.85)\n const response = await fetch(dataImage)\n const blob = await response.blob()\n const formData = new FormData()\n formData.append('file', blob, fileName)\n const uploadResponse = await fetch(`${apiUrl}/cloudinary/uploadFile`, {\n method: 'POST',\n body: formData,\n })\n if (!uploadResponse.ok) throw new Error(`Upload failed with status ${uploadResponse.status}`)\n } catch (error) {\n console.error('Error upload file to cloudinary', error)\n }\n share(link)\n }\n }\n}\n\nfunction share(link: string) {\n const linkElement = document.createElement('a')\n linkElement.href = link\n linkElement.target = '_blank'\n linkElement.click()\n}\n\nasync function checkImageExists(fileName: string) {\n try {\n const response = await fetch(`https://res.cloudinary.com/dswmrqgwy/image/upload/v1/bond_share/${fileName}.jpg`)\n return response.ok\n } catch {\n return false\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/views/YourBondsModal/components/NFTImage/NFTImage.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-import React from 'react';
 import { UserBill } from '../../../../types/yourbonds';
 declare const NftImage: ({ userBill, showNFTImg, setShowNFTImg, }: {
     userBill?: UserBill;
     showNFTImg: boolean;
     setShowNFTImg: (value: boolean) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default NftImage;