npm - @ape.swap/bonds-sdk - Versions diffs - 6.2.2 → 6.2.3 - Mend

@ape.swap/bonds-sdk 6.2.2 → 6.2.3

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 (107) hide show

package/dist/views/ProjectView/components/BondStats/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/BondStats/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { stripDate } from './utils'\nimport { ChartData, chartOptions, options } from './types'\nimport CircularProgress from '../../../../components/CircularProgress'\nimport {\n CategoryScale,\n Chart as ChartJS,\n Legend,\n LinearScale,\n LineElement,\n PointElement,\n Title,\n Tooltip,\n} from 'chart.js'\nimport { Line } from 'react-chartjs-2'\nimport ~~BigNumber~~ from '~~bignumber.js~~'\nimport { styles } from './styles'\nimport { BondsData } from '../../../../types/bonds'\nimport useGetBondApiStats from '../../../../state/bondApiStats/useGetBondApiStats'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { Link } from 'theme-ui'\nimport MenuSelect from '../../../../components/MenuSelect/MenuSelect'\n\nChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)\n\nconst BondStats = ({ selectedBond }: { selectedBond: BondsData }) => {\n const { data: bondStats } = useGetBondApiStats(selectedBond?.contractAddress?.[selectedBond?.chainId])\n const [chartOption, setChartOption] = useState<string>(chartOptions[0].value)\n const [salesCountChartData, setSalesCountChartData] = useState<ChartData>({\n labels: [],\n datasets: [\n {\n label: 'Sales Count',\n data: [],\n fill: true,\n borderColor: '#6560C5',\n backgroundColor: 'rgba(101, 96, 197, 0.9)',\n tension: 0.4,\n },\n ],\n })\n const [salesAmountChartData, setSalesAmountChartData] = useState<ChartData>({\n labels: [],\n datasets: [\n {\n label: 'Sales Amount (USD)',\n data: [],\n fill: true,\n borderColor: '#6560C5',\n backgroundColor: 'rgba(101, 96, 197, 0.9)',\n tension: 0.4,\n },\n ],\n })\n\n const maxTotalPayout = ~~new BigNumber~~(selectedBond?.maxTotalPayout ?? '0')\n ~~.div(new BigNumber(10).pow(~~selectedBond.earnToken.decimals[selectedBond.chainId] ?? 18~~))\~~n ~~?.toNumber(~~)\n const tokensRemaining = parseFloat(selectedBond?.tokensRemaining ?? '0')\n const soldTokens = Math.floor(maxTotalPayout - tokensRemaining)?.toLocaleString()\n\n useEffect(() => {\n if (bondStats) {\n const reversedData = [...bondStats.Sales].reverse()\n const countsByDate: { [key: string]: { salesNum: number; salesAmount: number } } = reversedData.reduce<{\n [dateStr: string]: { salesNum: number; salesAmount: number }\n }>((acc, item) => {\n const dateStr = stripDate(item?.createdAt)\n\n if (!acc[dateStr]) {\n acc[dateStr] = { salesNum: 0, salesAmount: 0 }\n }\n const dollarValue = item?.dollarValue \|\| 0\n acc[dateStr].salesNum += 1\n acc[dateStr].salesAmount += Math.round(dollarValue)\n\n return acc\n }, {})\n\n const salesByDate = Object.values(countsByDate)\n const labels = Object.keys(countsByDate)\n\n setSalesCountChartData({\n labels: labels,\n datasets: [\n {\n ...salesCountChartData.datasets[0],\n data: salesByDate.map((sale) => sale?.salesNum),\n },\n ],\n })\n setSalesAmountChartData({\n labels: labels,\n datasets: [\n {\n ...salesAmountChartData.datasets[0],\n data: salesByDate.map((sale) => sale?.salesAmount),\n },\n ],\n })\n }\n /* eslint-disable react-hooks/exhaustive-deps */\n }, [bondStats])\n\n return (\n <Flex sx={styles.bondStatsContainer}>\n <Flex sx={styles.titleContainer}>\n <Flex sx={{ fontSize: '22px' }}>Bond Stats</Flex>\n <Link\n href={`https://dashboard.ape.bond/bond/${selectedBond?.contractAddress?.[selectedBond?.chainId]}`}\n sx={styles.link}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n View More {'>'}\n </Link>\n </Flex>\n <Flex sx={styles.chartsContainer}>\n <Flex sx={styles.salesChart}>\n <Flex sx={{ width: '155px' }}>\n <MenuSelect selectedOption={chartOption} setOption={setChartOption} options={chartOptions} />\n </Flex>\n <Flex sx={{ width: '100%', height: '100%', minHeight: '225px' }}>\n {chartOption === 'amount' ? (\n <Line options={options} data={salesAmountChartData} />\n ) : (\n <Line options={options} data={salesCountChartData} />\n )}\n </Flex>\n </Flex>\n {bondStats?.percentageSold && (\n <Flex sx={styles.percentageSoldChart}>\n <Flex sx={{ mb: '10px' }}>{selectedBond.earnToken.symbol} Sold</Flex>\n <CircularProgress\n value={bondStats?.percentageSold}\n size={176}\n valueTemplate={`${bondStats?.percentageSold?.toFixed()}%`}\n valueColor=\"#6560C5\"\n rangeColor=\"rgba(250, 250, 250, 0.05)\"\n textColor=\"#f6f6f6\"\n />\n <Flex sx={{ fontSize: '14px', fontWeight: 500, color: 'textDisabledButton' }}>\n {soldTokens} / {maxTotalPayout?.toLocaleString()} {selectedBond.earnToken.symbol}\n </Flex>\n </Flex>\n )}\n </Flex>\n </Flex>\n )\n}\n\nexport default BondStats\n"],"names":["ChartJS","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;AAuBAA,KAAO,CAAC,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC;AAE/F,MAAM,SAAS,GAAG,CAAC,EAAE,YAAY,EAA+B,KAAI;AAClE,IAAA,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,kBAAkB,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,EAAE,OAAO,CAAC,CAAC;AACtG,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AAC7E,IAAA,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAY;AACxE,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,QAAQ,EAAE;AACR,YAAA;AACE,gBAAA,KAAK,EAAE,aAAa;AACpB,gBAAA,IAAI,EAAE,EAAE;AACR,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,eAAe,EAAE,yBAAyB;AAC1C,gBAAA,OAAO,EAAE,GAAG;AACb,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AACF,IAAA,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAY;AAC1E,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,QAAQ,EAAE;AACR,YAAA;AACE,gBAAA,KAAK,EAAE,oBAAoB;AAC3B,gBAAA,IAAI,EAAE,EAAE;AACR,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,eAAe,EAAE,yBAAyB;AAC1C,gBAAA,OAAO,EAAE,GAAG;AACb,aAAA;AACF,SAAA;AACF,KAAA,CAAC;IAEF,MAAM,cAAc,GAAG,~~IAAI~~,~~SAAS~~,~~CAAC,~~YAAY,EAAE,cAAc,IAAI,GAAG~~;SACrE~~,~~GAAG~~,~~CAAC,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,~~YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,~~CAAC~~;~~UACrF~~,~~QAAQ,EAAE;IACd,~~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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/BondStats/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { stripDate } from './utils'\nimport { ChartData, chartOptions, options } from './types'\nimport CircularProgress from '../../../../components/CircularProgress'\nimport {\n CategoryScale,\n Chart as ChartJS,\n Legend,\n LinearScale,\n LineElement,\n PointElement,\n Title,\n Tooltip,\n} from 'chart.js'\nimport { Line } from 'react-chartjs-2'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { styles } from './styles'\nimport { BondsData } from '../../../../types/bonds'\nimport useGetBondApiStats from '../../../../state/bondApiStats/useGetBondApiStats'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { Link } from 'theme-ui'\nimport MenuSelect from '../../../../components/MenuSelect/MenuSelect'\n\nChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)\n\nconst BondStats = ({ selectedBond }: { selectedBond: BondsData }) => {\n const { data: bondStats } = useGetBondApiStats(selectedBond?.contractAddress?.[selectedBond?.chainId])\n const [chartOption, setChartOption] = useState<string>(chartOptions[0].value)\n const [salesCountChartData, setSalesCountChartData] = useState<ChartData>({\n labels: [],\n datasets: [\n {\n label: 'Sales Count',\n data: [],\n fill: true,\n borderColor: '#6560C5',\n backgroundColor: 'rgba(101, 96, 197, 0.9)',\n tension: 0.4,\n },\n ],\n })\n const [salesAmountChartData, setSalesAmountChartData] = useState<ChartData>({\n labels: [],\n datasets: [\n {\n label: 'Sales Amount (USD)',\n data: [],\n fill: true,\n borderColor: '#6560C5',\n backgroundColor: 'rgba(101, 96, 197, 0.9)',\n tension: 0.4,\n },\n ],\n })\n\n const maxTotalPayout = getBalanceNumber(\n selectedBond?.maxTotalPayout ?? '0',\n selectedBond.earnToken.decimals[selectedBond.chainId] ?? 18,\n )\n const tokensRemaining = parseFloat(selectedBond?.tokensRemaining ?? '0')\n const soldTokens = Math.floor(maxTotalPayout - tokensRemaining)?.toLocaleString()\n\n useEffect(() => {\n if (bondStats) {\n const reversedData = [...bondStats.Sales].reverse()\n const countsByDate: { [key: string]: { salesNum: number; salesAmount: number } } = reversedData.reduce<{\n [dateStr: string]: { salesNum: number; salesAmount: number }\n }>((acc, item) => {\n const dateStr = stripDate(item?.createdAt)\n\n if (!acc[dateStr]) {\n acc[dateStr] = { salesNum: 0, salesAmount: 0 }\n }\n const dollarValue = item?.dollarValue \|\| 0\n acc[dateStr].salesNum += 1\n acc[dateStr].salesAmount += Math.round(dollarValue)\n\n return acc\n }, {})\n\n const salesByDate = Object.values(countsByDate)\n const labels = Object.keys(countsByDate)\n\n setSalesCountChartData({\n labels: labels,\n datasets: [\n {\n ...salesCountChartData.datasets[0],\n data: salesByDate.map((sale) => sale?.salesNum),\n },\n ],\n })\n setSalesAmountChartData({\n labels: labels,\n datasets: [\n {\n ...salesAmountChartData.datasets[0],\n data: salesByDate.map((sale) => sale?.salesAmount),\n },\n ],\n })\n }\n /* eslint-disable react-hooks/exhaustive-deps */\n }, [bondStats])\n\n return (\n <Flex sx={styles.bondStatsContainer}>\n <Flex sx={styles.titleContainer}>\n <Flex sx={{ fontSize: '22px' }}>Bond Stats</Flex>\n <Link\n href={`https://dashboard.ape.bond/bond/${selectedBond?.contractAddress?.[selectedBond?.chainId]}`}\n sx={styles.link}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n View More {'>'}\n </Link>\n </Flex>\n <Flex sx={styles.chartsContainer}>\n <Flex sx={styles.salesChart}>\n <Flex sx={{ width: '155px' }}>\n <MenuSelect selectedOption={chartOption} setOption={setChartOption} options={chartOptions} />\n </Flex>\n <Flex sx={{ width: '100%', height: '100%', minHeight: '225px' }}>\n {chartOption === 'amount' ? (\n <Line options={options} data={salesAmountChartData} />\n ) : (\n <Line options={options} data={salesCountChartData} />\n )}\n </Flex>\n </Flex>\n {bondStats?.percentageSold && (\n <Flex sx={styles.percentageSoldChart}>\n <Flex sx={{ mb: '10px' }}>{selectedBond.earnToken.symbol} Sold</Flex>\n <CircularProgress\n value={bondStats?.percentageSold}\n size={176}\n valueTemplate={`${bondStats?.percentageSold?.toFixed()}%`}\n valueColor=\"#6560C5\"\n rangeColor=\"rgba(250, 250, 250, 0.05)\"\n textColor=\"#f6f6f6\"\n />\n <Flex sx={{ fontSize: '14px', fontWeight: 500, color: 'textDisabledButton' }}>\n {soldTokens} / {maxTotalPayout?.toLocaleString()} {selectedBond.earnToken.symbol}\n </Flex>\n </Flex>\n )}\n </Flex>\n </Flex>\n )\n}\n\nexport default BondStats\n"],"names":["ChartJS","_jsxs","_jsx"],"mappings":"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"}

package/dist/views/YourBonds/components/UserBondRow/UserBondRowPreTGE.js CHANGED Viewed

@@ -5,7 +5,6 @@ import BondInfoTooltip from '../../../../components/Tooltip/Tooltip.js';
 import { Flex } from 'theme-ui';
 import PreTgeActions from './PreTGEActions.js';
 import { getBalanceNumber } from '../../../../utils/getBalanceNumber.js';
-import BigNumber from 'bignumber.js';
 import { formatTimeLeft, getTimePeriods } from '../../../../utils/getTimePeriods.js';
 import { formatNumberSI } from '../../../../utils/formatNumber.js';
 import { getPendingVestingString } from '../../../../utils/displayHelpers.js';
@@ -16,8 +15,8 @@ const UserBondRowPreTGE = ({ userBond }) => {
     const hasRedeemed = userBond?.accountInfo?.hasRedeemed;
     const isRedeemable = !hasRedeemed && saleFinalized;
     const redeemableIn = formatTimeLeft((userBond?.redeemTime ?? 0) - new Date().getTime() / 1000, true, true);
-    const depositAmount = getBalanceNumber(new BigNumber(userBond?.accountInfo?.depositAmount ?? '0'), userBond?.lpToken?.decimals?.[userBond?.chainId]);
-    const truePricePaid = getBalanceNumber(new BigNumber(userBond?.accountInfo?.truePricePaid ?? '0'), userBond?.lpToken?.decimals?.[userBond?.chainId]);
+    const depositAmount = getBalanceNumber(userBond?.accountInfo?.depositAmount ?? '0', userBond?.lpToken?.decimals?.[userBond?.chainId]);
+    const truePricePaid = getBalanceNumber(userBond?.accountInfo?.truePricePaid ?? '0', userBond?.lpToken?.decimals?.[userBond?.chainId]);
     const initialRelease = userBond?.initialRelease;
     const vestingTimePeriods = getTimePeriods(userBond.vestingTerm, false);
     const vestingString = hasRedeemed
@@ -28,9 +27,9 @@ const UserBondRowPreTGE = ({ userBond }) => {
     const userAllocation = depositAmount / (userBond?.initPrice ?? 0);
     const initialReleaseTokens = !hasRedeemed && saleFinalized && userBond?.initialRelease ? userAllocation * userBond?.initialRelease : 0;
     // pendingRewards variable follows the naming of the SC, but it actually means currently claimable tokens
-    const pendingRewards = getBalanceNumber(new BigNumber(userBond?.userOwnedBillsData?.pendingRewards ?? '0'), userBond?.earnToken?.decimals?.[userBond.chainId]);
+    const pendingRewards = getBalanceNumber(userBond?.userOwnedBillsData?.pendingRewards ?? '0', userBond?.earnToken?.decimals?.[userBond.chainId]);
     // payout variable follows the naming of the SC, but it actually means total tokens vested
-    const payout = getBalanceNumber(new BigNumber(userBond?.userOwnedBillsData?.payout ?? '0'), userBond?.earnToken?.decimals?.[userBond.chainId]);
+    const payout = getBalanceNumber(userBond?.userOwnedBillsData?.payout ?? '0', userBond?.earnToken?.decimals?.[userBond.chainId]);
     const claimableAmount = hasRedeemed ? pendingRewards : initialReleaseTokens;
     const claimableUSD = claimableAmount * (userBond.initPrice ?? 0);
     const pendingAmount = hasRedeemed ? payout : depositAmount / truePricePaid;

package/dist/views/YourBonds/components/UserBondRow/UserBondRowPreTGE.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserBondRowPreTGE.js","sources":["../../../../../src/views/YourBonds/components/UserBondRow/UserBondRowPreTGE.tsx"],"sourcesContent":["import React from 'react'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport { Flex } from 'theme-ui'\nimport PreTgeActions from './PreTGEActions'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport ~~BigNumber from 'bignumber.js'\nimport~~ { formatTimeLeft, getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { getPendingVestingString } from '../../../../utils/displayHelpers'\nimport { PreTGEUserBonds } from '../../../../state/bonds/useUserBondsPreTGE'\nimport More from '../../../../components/uikit-sdk/Svg/Icons/More'\n\nconst UserBondRowPreTGE = ({ userBond }: { userBond: PreTGEUserBonds }) => {\n const saleFinalized = userBond.finalized\n const hasRedeemed = userBond?.accountInfo?.hasRedeemed\n const isRedeemable = !hasRedeemed && saleFinalized\n\n const redeemableIn = formatTimeLeft((userBond?.redeemTime ?? 0) - new Date().getTime() / 1000, true, true)\n const depositAmount = getBalanceNumber(\n ~~new BigNumber(~~userBond?.accountInfo?.depositAmount ?? '0'),\n userBond?.lpToken?.decimals?.[userBond?.chainId]!,\n )\n const truePricePaid = getBalanceNumber(\n ~~new BigNumber(~~userBond?.accountInfo?.truePricePaid ?? '0'),\n userBond?.lpToken?.decimals?.[userBond?.chainId]!,\n )\n\n const initialRelease = userBond?.initialRelease\n const vestingTimePeriods = getTimePeriods(userBond.vestingTerm, false)\n const vestingString = hasRedeemed\n ? getPendingVestingString(userBond?.userOwnedBillsData)\n : initialRelease === 1\n ? `0 D`\n : `${vestingTimePeriods.months} Months`\n\n const userAllocation = depositAmount / (userBond?.initPrice ?? 0)\n const initialReleaseTokens =\n !hasRedeemed && saleFinalized && userBond?.initialRelease ? userAllocation * userBond?.initialRelease : 0\n\n // pendingRewards variable follows the naming of the SC, but it actually means currently claimable tokens\n const pendingRewards = getBalanceNumber(\n ~~new BigNumber(~~userBond?.userOwnedBillsData?.pendingRewards ?? '0'),\n userBond?.earnToken?.decimals?.[userBond.chainId]!,\n )\n // payout variable follows the naming of the SC, but it actually means total tokens vested\n const payout = getBalanceNumber(\n ~~new BigNumber(~~userBond?.userOwnedBillsData?.payout ?? '0'),\n userBond?.earnToken?.decimals?.[userBond.chainId]!,\n )\n\n const claimableAmount = hasRedeemed ? pendingRewards : initialReleaseTokens\n const claimableUSD = claimableAmount * (userBond.initPrice ?? 0)\n const pendingAmount = hasRedeemed ? payout : depositAmount / truePricePaid\n const pendingUSD = pendingAmount * (userBond?.earnTokenPrice ?? 0)\n\n return (\n <div className=\"your-bonds\" onClick={() => null}>\n <div className=\"token-info-container\">\n <TokenInfoAndName\n tokenSymbol={userBond.earnToken.symbol}\n chain={userBond.chainId}\n tag={userBond.tags?.[0]}\n vestEnds={\n isRedeemable ? 'Claim now!' : !hasRedeemed ? `Claim in ${redeemableIn}` : `Ends in ${vestingString}`\n }\n isHotBond\n />\n <div className=\"tooltip-column\">\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={\n <Tooltip\n earnTokenContract={userBond?.earnToken.address[userBond?.chainId] \|\| ''}\n earnTokenSymbol={userBond?.earnToken.symbol \|\| ''}\n bondContract={userBond?.contractAddress?.[userBond?.chainId] \|\| ''}\n projectLink={userBond?.projectLink}\n twitter={userBond?.twitter}\n chain={userBond?.chainId}\n />\n }\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(5%, 0%)\"\n >\n <Flex\n sx={{\n opacity: 0.8,\n }}\n >\n <More width=\"25px\" />\n </Flex>\n </TooltipBubble>\n </div>\n </div>\n <div className=\"your-bonds-columns-container\">\n <Flex sx={{ display: ['none', 'none', 'none', 'flex'], width: '125px' }} />\n <div className=\"your-bonds-content\">\n <div className=\"your-bonds-content-title\">Claimable</div>\n <div className=\"your-bonds-content-tokens-amount\">\n {formatNumberSI(claimableAmount, 3)}\n <div className=\"your-bonds-content-tokens-usd-amount\">(${formatNumberSI(claimableUSD)})</div>\n </div>\n </div>\n <div className=\"your-bonds-content\">\n <div className=\"your-bonds-content-title\">Pending</div>\n <div className=\"your-bonds-content-tokens-amount\">\n {formatNumberSI(pendingAmount, 3)}\n <div className=\"your-bonds-content-tokens-usd-amount\">(${formatNumberSI(pendingUSD)})</div>\n </div>\n </div>\n <div className=\"your-bonds-content hide-mobile\">{vestingString}</div>\n <div className=\"your-bonds-column-button\">\n <PreTgeActions userBond={userBond} />\n </div>\n </div>\n </div>\n )\n}\n\nexport default UserBondRowPreTGE\n"],"names":["_jsxs","_jsx","Tooltip"],"mappings":"~~;;;;;;;;;;;;;AAcA~~,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAiC,KAAI;AACxE,IAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,SAAS;AACxC,IAAA,MAAM,WAAW,GAAG,QAAQ,EAAE,WAAW,EAAE,WAAW;AACtD,IAAA,MAAM,YAAY,GAAG,CAAC,WAAW,IAAI,aAAa;IAElD,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,QAAQ,EAAE,UAAU,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;~~AAC1G~~,~~IAAA,~~MAAM,aAAa,GAAG,gBAAgB,CACpC,~~IAAI,SAAS,CAAC,~~QAAQ,EAAE,WAAW,EAAE,aAAa,IAAI,GAAG,~~CAAC~~,~~EAC1D,~~QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,QAAQ,EAAE,OAAO,CAAE,CAClD;~~AACD~~,~~IAAA,~~MAAM,aAAa,GAAG,gBAAgB,CACpC,~~IAAI,SAAS,CAAC,~~QAAQ,EAAE,WAAW,EAAE,aAAa,IAAI,GAAG,~~CAAC~~,~~EAC1D,~~QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,QAAQ,EAAE,OAAO,CAAE,CAClD;AAED,IAAA,MAAM,cAAc,GAAG,QAAQ,EAAE,cAAc;IAC/C,MAAM,kBAAkB,GAAG,cAAc,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC;IACtE,MAAM,aAAa,GAAG;AACpB,UAAE,uBAAuB,CAAC,QAAQ,EAAE,kBAAkB;UACpD,cAAc,KAAK;AACnB,cAAE,CAAA,GAAA;AACF,cAAE,CAAA,EAAG,kBAAkB,CAAC,MAAM,SAAS;IAE3C,MAAM,cAAc,GAAG,aAAa,IAAI,QAAQ,EAAE,SAAS,IAAI,CAAC,CAAC;IACjE,MAAM,oBAAoB,GACxB,CAAC,WAAW,IAAI,aAAa,IAAI,QAAQ,EAAE,cAAc,GAAG,cAAc,GAAG,QAAQ,EAAE,cAAc,GAAG,CAAC;;~~AAG3G~~,~~IAAA,~~MAAM,cAAc,GAAG,gBAAgB,CACrC,~~IAAI,SAAS,CAAC,~~QAAQ,EAAE,kBAAkB,EAAE,cAAc,IAAI,GAAG,~~CAAC~~,~~EAClE,~~QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAE,CACnD;;~~AAED~~,~~IAAA,~~MAAM,MAAM,GAAG,gBAAgB,CAC7B,~~IAAI,SAAS,CAAC,~~QAAQ,EAAE,kBAAkB,EAAE,MAAM,IAAI,GAAG,~~CAAC~~,~~EAC1D,~~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"}
1	+ {"version":3,"file":"UserBondRowPreTGE.js","sources":["../../../../../src/views/YourBonds/components/UserBondRow/UserBondRowPreTGE.tsx"],"sourcesContent":["import React from 'react'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport { Flex } from 'theme-ui'\nimport PreTgeActions from './PreTGEActions'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatTimeLeft, getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { getPendingVestingString } from '../../../../utils/displayHelpers'\nimport { PreTGEUserBonds } from '../../../../state/bonds/useUserBondsPreTGE'\nimport More from '../../../../components/uikit-sdk/Svg/Icons/More'\n\nconst UserBondRowPreTGE = ({ userBond }: { userBond: PreTGEUserBonds }) => {\n const saleFinalized = userBond.finalized\n const hasRedeemed = userBond?.accountInfo?.hasRedeemed\n const isRedeemable = !hasRedeemed && saleFinalized\n\n const redeemableIn = formatTimeLeft((userBond?.redeemTime ?? 0) - new Date().getTime() / 1000, true, true)\n const depositAmount = getBalanceNumber(\n userBond?.accountInfo?.depositAmount ?? '0',\n userBond?.lpToken?.decimals?.[userBond?.chainId]!,\n )\n const truePricePaid = getBalanceNumber(\n userBond?.accountInfo?.truePricePaid ?? '0',\n userBond?.lpToken?.decimals?.[userBond?.chainId]!,\n )\n\n const initialRelease = userBond?.initialRelease\n const vestingTimePeriods = getTimePeriods(userBond.vestingTerm, false)\n const vestingString = hasRedeemed\n ? getPendingVestingString(userBond?.userOwnedBillsData)\n : initialRelease === 1\n ? `0 D`\n : `${vestingTimePeriods.months} Months`\n\n const userAllocation = depositAmount / (userBond?.initPrice ?? 0)\n const initialReleaseTokens =\n !hasRedeemed && saleFinalized && userBond?.initialRelease ? userAllocation * userBond?.initialRelease : 0\n\n // pendingRewards variable follows the naming of the SC, but it actually means currently claimable tokens\n const pendingRewards = getBalanceNumber(\n userBond?.userOwnedBillsData?.pendingRewards ?? '0',\n userBond?.earnToken?.decimals?.[userBond.chainId]!,\n )\n // payout variable follows the naming of the SC, but it actually means total tokens vested\n const payout = getBalanceNumber(\n userBond?.userOwnedBillsData?.payout ?? '0',\n userBond?.earnToken?.decimals?.[userBond.chainId]!,\n )\n\n const claimableAmount = hasRedeemed ? pendingRewards : initialReleaseTokens\n const claimableUSD = claimableAmount * (userBond.initPrice ?? 0)\n const pendingAmount = hasRedeemed ? payout : depositAmount / truePricePaid\n const pendingUSD = pendingAmount * (userBond?.earnTokenPrice ?? 0)\n\n return (\n <div className=\"your-bonds\" onClick={() => null}>\n <div className=\"token-info-container\">\n <TokenInfoAndName\n tokenSymbol={userBond.earnToken.symbol}\n chain={userBond.chainId}\n tag={userBond.tags?.[0]}\n vestEnds={\n isRedeemable ? 'Claim now!' : !hasRedeemed ? `Claim in ${redeemableIn}` : `Ends in ${vestingString}`\n }\n isHotBond\n />\n <div className=\"tooltip-column\">\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={\n <Tooltip\n earnTokenContract={userBond?.earnToken.address[userBond?.chainId] \|\| ''}\n earnTokenSymbol={userBond?.earnToken.symbol \|\| ''}\n bondContract={userBond?.contractAddress?.[userBond?.chainId] \|\| ''}\n projectLink={userBond?.projectLink}\n twitter={userBond?.twitter}\n chain={userBond?.chainId}\n />\n }\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(5%, 0%)\"\n >\n <Flex\n sx={{\n opacity: 0.8,\n }}\n >\n <More width=\"25px\" />\n </Flex>\n </TooltipBubble>\n </div>\n </div>\n <div className=\"your-bonds-columns-container\">\n <Flex sx={{ display: ['none', 'none', 'none', 'flex'], width: '125px' }} />\n <div className=\"your-bonds-content\">\n <div className=\"your-bonds-content-title\">Claimable</div>\n <div className=\"your-bonds-content-tokens-amount\">\n {formatNumberSI(claimableAmount, 3)}\n <div className=\"your-bonds-content-tokens-usd-amount\">(${formatNumberSI(claimableUSD)})</div>\n </div>\n </div>\n <div className=\"your-bonds-content\">\n <div className=\"your-bonds-content-title\">Pending</div>\n <div className=\"your-bonds-content-tokens-amount\">\n {formatNumberSI(pendingAmount, 3)}\n <div className=\"your-bonds-content-tokens-usd-amount\">(${formatNumberSI(pendingUSD)})</div>\n </div>\n </div>\n <div className=\"your-bonds-content hide-mobile\">{vestingString}</div>\n <div className=\"your-bonds-column-button\">\n <PreTgeActions userBond={userBond} />\n </div>\n </div>\n </div>\n )\n}\n\nexport default UserBondRowPreTGE\n"],"names":["_jsxs","_jsx","Tooltip"],"mappings":"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"}

package/dist/views/YourBondsModal/components/LinkShare/htmlToJpeg.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * Rasterizes a self-contained HTML string (no external resources - all images/styles
+ * must already be inlined) into a JPEG data URL, by drawing it through an SVG
+ * foreignObject onto a canvas.
+ */
+export declare function renderHtmlToJpeg(html: string, width: number, height: number, quality: number): Promise<string>;
+/** Fetches a (same-origin or CORS-enabled) image and converts it to a base64 data URI. */
+export declare function imageUrlToDataUri(url: string): Promise<string>;

package/dist/views/YourBondsModal/components/LinkShare/htmlToJpeg.js ADDED Viewed

@@ -0,0 +1,43 @@
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+        image.src = src;
+    });
+}
+/**
+ * Rasterizes a self-contained HTML string (no external resources - all images/styles
+ * must already be inlined) into a JPEG data URL, by drawing it through an SVG
+ * foreignObject onto a canvas.
+ */
+async function renderHtmlToJpeg(html, width, height, quality) {
+    const svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">` +
+        `<foreignObject width="100%" height="100%">` +
+        `<div xmlns="http://www.w3.org/1999/xhtml">${html}</div>` +
+        `</foreignObject>` +
+        `</svg>`;
+    const image = await loadImage(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`);
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('Canvas 2D context is not available');
+    ctx.drawImage(image, 0, 0, width, height);
+    return canvas.toDataURL('image/jpeg', quality);
+}
+/** Fetches a (same-origin or CORS-enabled) image and converts it to a base64 data URI. */
+async function imageUrlToDataUri(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = () => reject(new Error(`Failed to read image as data URI: ${url}`));
+        reader.readAsDataURL(blob);
+    });
+}
+export { imageUrlToDataUri, renderHtmlToJpeg };
+//# sourceMappingURL=htmlToJpeg.js.map

package/dist/views/YourBondsModal/components/LinkShare/htmlToJpeg.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"htmlToJpeg.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/htmlToJpeg.ts"],"sourcesContent":["function loadImage(src: string): Promise<HTMLImageElement> {\n return new Promise((resolve, reject) => {\n const image = new Image()\n image.onload = () => resolve(image)\n image.onerror = () => reject(new Error(`Failed to load image: ${src}`))\n image.src = src\n })\n}\n\n/**\n * Rasterizes a self-contained HTML string (no external resources - all images/styles\n * must already be inlined) into a JPEG data URL, by drawing it through an SVG\n * foreignObject onto a canvas.\n */\nexport async function renderHtmlToJpeg(html: string, width: number, height: number, quality: number): Promise<string> {\n const svgMarkup =\n `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\">` +\n `<foreignObject width=\"100%\" height=\"100%\">` +\n `<div xmlns=\"http://www.w3.org/1999/xhtml\">${html}</div>` +\n `</foreignObject>` +\n `</svg>`\n\n const image = await loadImage(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`)\n\n const canvas = document.createElement('canvas')\n canvas.width = width\n canvas.height = height\n const ctx = canvas.getContext('2d')\n if (!ctx) throw new Error('Canvas 2D context is not available')\n ctx.drawImage(image, 0, 0, width, height)\n\n return canvas.toDataURL('image/jpeg', quality)\n}\n\n/** Fetches a (same-origin or CORS-enabled) image and converts it to a base64 data URI. */\nexport async function imageUrlToDataUri(url: string): Promise<string> {\n const response = await fetch(url)\n const blob = await response.blob()\n return new Promise((resolve, reject) => {\n const reader = new FileReader()\n reader.onloadend = () => resolve(reader.result as string)\n reader.onerror = () => reject(new Error(`Failed to read image as data URI: ${url}`))\n reader.readAsDataURL(blob)\n })\n}\n"],"names":[],"mappings":"AAAA,SAAS,SAAS,CAAC,GAAW,EAAA;IAC5B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,KAAI;AACrC,QAAA,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE;QACzB,KAAK,CAAC,MAAM,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC;AACnC,QAAA,KAAK,CAAC,OAAO,GAAG,MAAM,MAAM,CAAC,IAAI,KAAK,CAAC,CAAA,sBAAA,EAAyB,GAAG,CAAA,CAAE,CAAC,CAAC;AACvE,QAAA,KAAK,CAAC,GAAG,GAAG,GAAG;AACjB,IAAA,CAAC,CAAC;AACJ;AAEA;;;;AAIG;AACI,eAAe,gBAAgB,CAAC,IAAY,EAAE,KAAa,EAAE,MAAc,EAAE,OAAe,EAAA;AACjG,IAAA,MAAM,SAAS,GACb,CAAA,+CAAA,EAAkD,KAAK,CAAA,UAAA,EAAa,MAAM,CAAA,EAAA,CAAI;QAC9E,CAAA,0CAAA,CAA4C;AAC5C,QAAA,CAAA,0CAAA,EAA6C,IAAI,CAAA,MAAA,CAAQ;QACzD,CAAA,gBAAA,CAAkB;AAClB,QAAA,CAAA,MAAA,CAAQ;AAEV,IAAA,MAAM,KAAK,GAAG,MAAM,SAAS,CAAC,CAAA,iCAAA,EAAoC,kBAAkB,CAAC,SAAS,CAAC,CAAA,CAAE,CAAC;IAElG,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC/C,IAAA,MAAM,CAAC,KAAK,GAAG,KAAK;AACpB,IAAA,MAAM,CAAC,MAAM,GAAG,MAAM;IACtB,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;AACnC,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC;AAC/D,IAAA,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC;IAEzC,OAAO,MAAM,CAAC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;AAChD;AAEA;AACO,eAAe,iBAAiB,CAAC,GAAW,EAAA;AACjD,IAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC;AACjC,IAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;IAClC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,KAAI;AACrC,QAAA,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE;AAC/B,QAAA,MAAM,CAAC,SAAS,GAAG,MAAM,OAAO,CAAC,MAAM,CAAC,MAAgB,CAAC;AACzD,QAAA,MAAM,CAAC,OAAO,GAAG,MAAM,MAAM,CAAC,IAAI,KAAK,CAAC,CAAA,kCAAA,EAAqC,GAAG,CAAA,CAAE,CAAC,CAAC;AACpF,QAAA,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC;AAC5B,IAAA,CAAC,CAAC;AACJ;;;;"}

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

@@ -1,2 +1,9 @@
 import { UserBillNftData } from '../../../../types/yourbonds';
-export declare function getTemplateHTML(data: UserBillNftData): string;
+export interface TemplateImages {
+    title: string;
+    background: string;
+    nft: string;
+    payoutToken: string;
+    principalToken: string;
+}
+export declare function getTemplateHTML(data: UserBillNftData, images: TemplateImages): string;

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

@@ -1,17 +1,173 @@
-import { APEBOND } from '../../../../config/constants/variables.js';
 import { formatNumberSI, localeFormat } from '../../../../utils/formatNumber.js';
-function getTemplateHTML(data) {
+// 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
+// embedded directly into the rendered image rather than applied via the page's stylesheet.
+function getTemplateCss(backgroundImage) {
+    return `
+    .sharebondimage-card {
+      flex-direction: column;
+      width: 768px;
+      height: 768px;
+      align-items: center;
+      background-image: url(${backgroundImage});
+      background-size: cover;
+      background-position: bottom center;
+      background-repeat: no-repeat;
+      justify-content: center;
+      display: flex;
+    }
+    .sharebondimage-nft {
+      margin-top: 10px;
+      flex-direction: column;
+      align-items: center;
+    }
+    .sharebondimage-nft-id {
+      display: flex;
+      position: absolute;
+      top: 15px;
+      right: -61px;
+      min-width: 60px;
+      height: 28px;
+      border-radius: 0px 6px 6px 0px;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(34px);
+    }
+    .sharebondimage-nft-id span {
+      font-size: 14px;
+      color: text;
+      line-height: 8px
+    }
+    .sharebondimage-nft img {
+      width: 319px;
+      height: 180px;
+      border-radius: 10px 10px 0px 0px;
+    }
+    .sharebondimage-container-info {
+      display: flex;
+      width: 381px;
+      height: 147px;
+      background-color: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(34px);
+      border-radius: 10px;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 10px 8px 10px 8px;
+      margin-top: -3px
+    }
+    .sharebondimage-container-discount {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      background-color: rgba(255, 255, 255, 0.05);
+      border-radius: 7px;
+      padding: 10px;
+    }
+    .sharebondimage-container-off {
+      display: flex;
+      margin-left: 30px;
+      width: 125px;
+      height: 27px;
+      border-radius: 5px;
+      border: 1px solid #38A61133;
+      justify-content: center;
+      align-items: center;
+      background-color: #38A6110D;
+    }
+    .sharebondimage-container-off span {
+      color: #38A611;
+      font-size: 16px;
+      font-weight: 700;
+    }
+    .sharebondimage-container-discount-price {
+      flex-direction: column;
+      margin-left: 13px
+    }
+    .sharebondimage-container-discount-token {
+      display: flex;
+      gap: 4px;
+      color: rgba(255, 255, 255, 0.5)
+    }
+    .sharebondimage-container-discount-token span {
+      font-size: 14px;
+      font-weight: 400;
+    }
+    .sharebondimage-container-discount-price-discount {
+      color: #49B423;
+      font-size: 22px;
+      font-weight: 700;
+    }
+    .sharebondimage-container-tokens {
+      display: flex;
+      width: 100%;
+      padding-top: 6px;
+      gap: 5px;
+      justify-content: center;
+      align-items: center;
+    }
+    .sharebondimage-container-token {
+      display: flex;
+      gap: 5px;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      background-color: rgba(255, 255, 255, 0.05);
+      border-radius: 7px;
+      padding: 10px;
+    }
+    .sharebondimage-container-token img {
+      width: 26px;
+      height: 26px;
+    }
+    .sharebondimage-amount-deposit {
+      color: #FAFAFA;
+      font-size: 14px;
+      font-weight: 700;
+    }
+    .sharebondimage-dollarvalue {
+      color: rgba(255, 255, 255, 0.5);
+      font-size: 12px;
+      font-weight: 400;
+    }
+    .sharebondimage-container-earntoken {
+      display: flex;
+      flex-direction: column;
+    }
+    .sharebondimage-amount-earntoken {
+      display: flex;
+      gap: 5px;
+      justify-content: center;
+      align-items: center;
+    }
+    .sharebondimage-profit {
+      justify-content: center;
+      align-items: center
+    }
+    .sharebondimage-profit span {
+      color: #38A611;
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 4px
+    }
+    .sharebondimage-amount-payout {
+      color: #38A611;
+      font-size: 14px;
+      font-weight: 700
+    }
+    .sharebondimage-amount-dollarvalue {
+      color: #38A611;
+      font-size: 12px;
+      font-weight: 400
+    }
+  `;
+}
+function getTemplateHTML(data, images) {
     //@ts-ignore
     const isProfit = +data?.data?.payout * +data?.data?.payoutTokenPrice - data?.data?.dollarValue > 0;
-    const getTokenImage = (symbol) => {
-        return `${APEBOND}/assets/${symbol.toUpperCase()}.png`;
-    };
-    const getPrincipalToken = () => {
-        if (data?.data?.payoutTokenData.address.toLowerCase() !== data?.data?.token0.address.toLowerCase())
-            return data?.data?.token0.symbol;
-        return data?.data?.token1.symbol;
-    };
     const getCalculateOff = () => {
         if (!data || !data.data)
             return 0;
@@ -23,19 +179,20 @@ function getTemplateHTML(data) {
         return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100;
     };
     return `
+  <style>${getTemplateCss(images.background)}</style>
   <div id="template-card" class="sharebondimage-card">
-    <img src="/images/bills/title.png" alt="title" style="width: 169px; height: 52px;" />
+    <img src="${images.title}" alt="title" style="width: 169px; height: 52px;" />
     <div class="sharebondimage-nft">
       <div style="position: relative">
         <div class="sharebondimage-nft-id">
           <span>#${data.tokenId}</span>
         </div>
-        <img src="${data.image}" alt="bill-nft" />
+        <img src="${images.nft}" alt="bill-nft" />
       </div>
     </div>
     <div class="sharebondimage-container-info">
       <div class="sharebondimage-container-discount">
-        <img src="${getTokenImage(data?.data?.payoutTokenData?.symbol)}" alt="payout-token-symbol" style="width: 59px; height: 59px;" />
+        <img src="${images.payoutToken}" alt="payout-token-symbol" style="width: 59px; height: 59px;" />
         <div class="sharebondimage-container-discount-price">
           <div class="sharebondimage-container-discount-token">
             <span>${data.data?.payoutTokenData.symbol}</span>
@@ -55,7 +212,7 @@ function getTemplateHTML(data) {
       </div>
       <div class="sharebondimage-container-tokens">
         <div class="sharebondimage-container-token">
-          <img src="${getTokenImage(getPrincipalToken() ?? '')}" alt="principal-symbol" />
+          <img src="${images.principalToken}" alt="principal-symbol" />
           <div class="sharebondimage-amount-deposit">
             ${formatNumberSI(data?.data?.deposit)}
           </div>
@@ -64,7 +221,7 @@ function getTemplateHTML(data) {
           </div>
         </div>
         <div class="sharebondimage-container-token">
-          <img src="${getTokenImage(data?.data?.payoutTokenData?.symbol)}" alt="payout-token2-symbol" />
+          <img src="${images.payoutToken}" alt="payout-token2-symbol" />
           <div class="sharebondimage-container-earntoken">
             <div class="sharebondimage-amount-earntoken">
               <div class="sharebondimage-amount-payout">

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 { APEBOND } from '../../../../config/constants/variables'\nimport { UserBillNftData } from '../../../../types/yourbonds'\nimport { formatNumberSI, localeFormat } from '../../../../utils/formatNumber'\n\nexport function getTemplateHTML(data: UserBillNftData) {\n //@ts-ignore\n const isProfit = +data?.data?.payout * +data?.data?.payoutTokenPrice - data?.data?.dollarValue > 0\n const getTokenImage = (symbol: string) => {\n return `${APEBOND}/assets/${symbol.toUpperCase()}.png`\n }\n const getPrincipalToken = () => {\n if (data?.data?.payoutTokenData.address.toLowerCase() !== data?.data?.token0.address.toLowerCase())\n return data?.data?.token0.symbol\n return data?.data?.token1.symbol\n }\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 <div id=\"template-card\" class=\"sharebondimage-card\">\n <img src=\"/images/bills/title.png\" 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=\"${data.image}\" alt=\"bill-nft\" />\n </div>\n </div>\n <div class=\"sharebondimage-container-info\">\n <div class=\"sharebondimage-container-discount\">\n <img src=\"${getTokenImage(data?.data?.payoutTokenData?.symbol!)}\" 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=\"${getTokenImage(getPrincipalToken() ?? '')}\" 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=\"${getTokenImage(data?.data?.payoutTokenData?.symbol!)}\" 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":";;;AAIM,SAAU,eAAe,CAAC,IAAqB,EAAA;;IAEnD,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC;AAClG,IAAA,MAAM,aAAa,GAAG,CAAC,MAAc,KAAI;QACvC,OAAO,CAAA,EAAG,OAAO,CAAA,QAAA,EAAW,MAAM,CAAC,WAAW,EAAE,MAAM;AACxD,IAAA,CAAC;IACD,MAAM,iBAAiB,GAAG,MAAK;QAC7B,IAAI,IAAI,EAAE,IAAI,EAAE,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE;AAChG,YAAA,OAAO,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM;AAClC,QAAA,OAAO,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM;AAClC,IAAA,CAAC;IACD,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;;;;;;AAMU,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAEX,kBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;;;;oBAKV,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,MAAO,CAAC,CAAA;;;AAGnD,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,aAAa,CAAC,iBAAiB,EAAE,IAAI,EAAE,CAAC,CAAA;;AAEhD,YAAA,EAAA,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC;;;AAGlC,aAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;sBAI/B,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,MAAO,CAAC,CAAA;;;;AAIvD,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// 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;;;;"}

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

@@ -1,17 +1,18 @@
-import domtoimage from 'dom-to-image';
 import axios from 'axios';
+import { APEBOND } from '../../../../config/constants/variables.js';
 import { getTemplateHTML } from './templateImageShare.js';
+import { imageUrlToDataUri, renderHtmlToJpeg } from './htmlToJpeg.js';
+function getTokenImageUrl(symbol) {
+    return `${APEBOND}/tokenImages/${symbol.toUpperCase()}.png`;
+}
+function getPrincipalTokenSymbol(bondNFTData) {
+    if (bondNFTData.data?.payoutTokenData.address.toLowerCase() !== bondNFTData.data?.token0.address.toLowerCase())
+        return bondNFTData.data?.token0.symbol;
+    return bondNFTData.data?.token1.symbol;
+}
 async function generateImageFromTemplate(bondNFTData, link, apiUrl) {
     if (bondNFTData && bondNFTData.data) {
-        const container = document.createElement('div');
-        container.style.position = 'absolute';
-        container.style.top = '-9999px';
-        container.innerHTML = getTemplateHTML(bondNFTData);
-        document.body.appendChild(container);
-        const templateElement = container.querySelector('#template-card');
-        if (!templateElement)
-            return;
         const fileName = `bond_share_${bondNFTData?.data.billNftAddress?.toLowerCase()}_${bondNFTData?.chainId}_${bondNFTData?.tokenId}`;
         const existingImage = await checkImageExists(fileName);
         if (existingImage) {
@@ -19,7 +20,15 @@ async function generateImageFromTemplate(bondNFTData, link, apiUrl) {
         }
         else {
             try {
-                const dataImage = await domtoimage.toJpeg(templateElement, { quality: 0.85 });
+                const [title, background, nft, payoutToken, principalToken] = await Promise.all([
+                    imageUrlToDataUri('/images/bills/title.png'),
+                    imageUrlToDataUri('/images/bills/bg.png'),
+                    imageUrlToDataUri(bondNFTData.image),
+                    imageUrlToDataUri(getTokenImageUrl(bondNFTData.data.payoutTokenData.symbol)),
+                    imageUrlToDataUri(getTokenImageUrl(getPrincipalTokenSymbol(bondNFTData) ?? '')),
+                ]);
+                const html = getTemplateHTML(bondNFTData, { title, background, nft, payoutToken, principalToken });
+                const dataImage = await renderHtmlToJpeg(html, 768, 768, 0.85);
                 const response = await fetch(dataImage);
                 const blob = await response.blob();
                 const formData = new FormData();

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 ~~domtoimage~~ from '~~dom-to-image~~'\nimport ~~axios~~ from '~~axios~~'\nimport { UserBillNftData } from '../../../../types/yourbonds'\nimport { getTemplateHTML } from './templateImageShare'\~~n\nexport~~ ~~async~~ ~~function~~ ~~generateImageFromTemplate(~~\n ~~bondNFTData~~: ~~UserBillNftData~~ ~~\| undefined,\~~n ~~link:~~ ~~string,\~~n ~~apiUrl~~: ~~string,\n~~) {\n if (bondNFTData ~~&& bondNFTData~~.data) ~~{\n const~~ ~~container = document~~.~~createElement~~(~~'div'~~)\n ~~container.style.position~~ ~~= 'absolute'\n container~~.~~style~~.~~top = '-9999px'~~\n ~~container.innerHTML~~ ~~= getTemplateHTML(~~bondNFTData~~)\n\n document~~.~~body~~.~~appendChild(container)~~\n\n ~~const~~ ~~templateElement~~ = ~~container.querySelector~~(~~'#template-card')~~\n\n if (~~!templateElement~~) ~~return~~\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 ~~dataImage~~ = await ~~domtoimage~~.~~toJpeg~~(~~templateElement~~, { ~~quality:~~ 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":"~~;;;;AAKO~~,~~eAAe~~,~~yBAAyB~~,~~CAC7C~~,~~WAAwC~~,~~EACxC~~,~~IAAY~~,~~EACZ~~,~~MAAc~~,~~EAAA;AAEd~~,~~IAAA~~,~~IAAI~~,~~WAAW~~,~~IAAI~~,~~WAAW,~~CAAC,~~IAAI~~,EAAE~~;QACnC~~,MAAM,SAAS,~~GAAG~~,~~QAAQ,~~CAAC,~~aAAa~~,~~CAAC~~,~~KAAK~~,CAAC~~;AAC/C~~,~~QAAA~~,~~SAAS~~,CAAC,~~KAAK~~,CAAC,~~QAAQ~~,~~GAAG~~,~~UAAU;AACrC~~,~~QAAA~~,~~SAAS~~,CAAC,~~KAAK~~,CAAC,~~GAAG~~,~~GAAG,SAAS~~;~~AAC/B~~,QAAA,~~SAAS~~,CAAC,~~SAAS~~,~~GAAG~~,~~eAAe~~,CAAC,~~WAAW,CAAC~~;~~AAElD~~,~~QAAA~~,~~QAAQ~~,CAAC,IAAI,~~CAAC~~,~~WAAW~~,CAAC,~~SAAS,CAAC~~;~~QAEpC~~,~~MAAM,~~eAAe,~~GAAG~~,~~SAAS~~,~~CAAC~~,~~aAAa~~,~~CAAC~~,~~gBAAgB~~,~~CAAC~~;~~AAEjE~~,~~QAAA~~,IAAI,CAAC,~~eAAe~~;~~YAAE;QACtB~~,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,~~SAAS~~,GAAG,MAAM,~~UAAU~~,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,~~OAAO~~,EAAE,IAAI,EAAE,CAAC;~~AAC7E~~,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 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":"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"}

package/dist/views/YourBondsModal/components/TransferBondModal/index.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import React, { useState } from 'react';
-import BigNumber from 'bignumber.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Modal from '../../../../components/uikit-sdk/Modal/index.js';
 import Text from '../../../../components/uikit-sdk/Text/index.js';
@@ -23,7 +22,7 @@ const TransferModal = ({ onDismiss, userBill }) => {
     const bond = userBill?.bond;
     const chainId = bond?.chainId;
     const pending = chainId &&
-        getBalanceNumber(new BigNumber(userBill?.payout ?? 0), bond?.earnToken?.decimals?.[chainId] ?? 18)?.toFixed(4);
+        getBalanceNumber(userBill?.payout ?? 0, bond?.earnToken?.decimals?.[chainId] ?? 18)?.toFixed(4);
     return (jsxs(Modal, { onDismiss: onDismiss, title: "Transfer Bond", children: [jsx(Flex, { sx: { mt: '20px' }, children: jsx(Text, { sx: { fontWeight: 700 }, children: " Transferring: " }) }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', mt: '30px', mr: '10px' }, children: [jsxs(Text, { sx: { fontWeight: 700, fontSize: '25px' }, children: [bond?.earnToken?.symbol, " Bond - ID # ", userBill?.id] }), jsxs(Flex, { sx: { mt: '5px' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', mr: '20px' }, children: [jsx(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Vesting time" }), getTimeLeftForFullyVested(userBill) > 0 ? `Ends in ${getPendingVestingString(userBill)}` : `Fully Vested`] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '20px' }, children: [jsx(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Pending" }), jsxs(Flex, { children: [jsx(TokenImage, { symbol: userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken?.symbol, size: 20, chain: userBill?.bond?.chainId }), jsx(Text, { sx: { fontWeight: 700, ml: '5px' }, children: pending })] })] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', mt: '30px' }, children: [jsx(Text, { sx: { fontWeight: 700 }, children: "Receiving Address:" }), jsx(Input, { mt: "10px", size: "lg", placeholder: 'Paste the address here', value: toAddress, onChange: (e) => setToAddress(e.target.value), style: { width: '345px', border: 'none' } })] }), jsx(Flex, { sx: { mt: '15px' }, children: jsxs(Text, { sx: { lineHeight: '18px', fontSize: '12px', color: 'rgba(223, 65, 65, 1)' }, children: [jsx(Text, { sx: { display: 'block', width: '100%', fontWeight: 700, fontSize: '13px', color: 'rgba(223, 65, 65, 1)' }, children: "WARNING" }), "When transfering the NFT all pending rewards will also be transfered to the receiver address."] }) }), jsxs(Flex, { onClick: () => setConfirmSend(!confirmSend), sx: { mt: '20px', cursor: 'pointer', alignItems: 'center' }, children: [jsx(Checkbox, { checked: confirmSend, onChange: (event) => {
                             setConfirmSend(!confirmSend);
                             event.stopPropagation();