@ape.swap/bonds-sdk 6.2.1 → 6.2.3

package/dist/views/ProjectView/components/BondStats/index.js

@@ -5,7 +5,7 @@ import { chartOptions, options } from './types.js';
 import CircularProgress from '../../../../components/CircularProgress/index.js';
 import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
 import { Line } from 'react-chartjs-2';
-import BigNumber from 'bignumber.js';
+import { getBalanceNumber } from '../../../../utils/getBalanceNumber.js';
 import { styles } from './styles.js';
 import useGetBondApiStats from '../../../../state/bondApiStats/useGetBondApiStats.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
@@ -42,9 +42,7 @@ const BondStats = ({ selectedBond }) => {
             },
         ],
     });
-    const maxTotalPayout = new BigNumber(selectedBond?.maxTotalPayout ?? '0')
-        .div(new BigNumber(10).pow(selectedBond.earnToken.decimals[selectedBond.chainId] ?? 18))
-        ?.toNumber();
+    const maxTotalPayout = getBalanceNumber(selectedBond?.maxTotalPayout ?? '0', selectedBond.earnToken.decimals[selectedBond.chainId] ?? 18);
     const tokensRemaining = parseFloat(selectedBond?.tokensRemaining ?? '0');
     const soldTokens = Math.floor(maxTotalPayout - tokensRemaining)?.toLocaleString();
     useEffect(() => {

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

@@ -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":"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"}
+{"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/ProjectView/components/BondStats/types.d.ts

@@ -25,7 +25,7 @@ export declare const options: {
     responsive: boolean;
     maintainAspectRatio: boolean;
 };
-export interface ChartDataset {
+interface ChartDataset {
     label: string;
     data: number[];
     fill: boolean;
@@ -41,3 +41,4 @@ export declare const chartOptions: {
     label: string;
     value: string;
 }[];
+export {};

package/dist/views/ProjectView/components/BondStats/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/views/ProjectView/components/BondStats/types.ts"],"sourcesContent":["export const options = {\n  scales: {\n    y: {\n      grid: {\n        display: true,\n        color: 'rgba(250, 250, 250, 0.1)',\n        drawOnChartArea: true,\n      },\n      beginAtZero: true,\n    },\n    x: {\n      grid: {\n        display: true,\n        color: 'rgba(250, 250, 250, 0.1)',\n        drawOnChartArea: true,\n      },\n    },\n  },\n  plugins: {\n    legend: {\n      display: false,\n    },\n  },\n  pointRadius: 0,\n  responsive: true,\n  maintainAspectRatio: false,\n}\n\nexport interface ChartDataset {\n  label: string\n  data: number[]\n  fill: boolean\n  borderColor: string\n  backgroundColor: string\n  tension: number\n}\n\nexport interface ChartData {\n  labels: string[]\n  datasets: ChartDataset[]\n}\n\nexport const chartOptions = [\n  {\n    label: 'Sales Amount',\n    value: 'amount',\n  },\n  {\n    label: 'Sales Count',\n    value: 'count',\n  },\n]\n"],"names":[],"mappings":"AAAO,MAAM,OAAO,GAAG;AACrB,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,EAAE;AACD,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,KAAK,EAAE,0BAA0B;AACjC,gBAAA,eAAe,EAAE,IAAI;AACtB,aAAA;AACD,YAAA,WAAW,EAAE,IAAI;AAClB,SAAA;AACD,QAAA,CAAC,EAAE;AACD,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,KAAK,EAAE,0BAA0B;AACjC,gBAAA,eAAe,EAAE,IAAI;AACtB,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,mBAAmB,EAAE,KAAK;;AAiBrB,MAAM,YAAY,GAAG;AAC1B,IAAA;AACE,QAAA,KAAK,EAAE,cAAc;AACrB,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/views/ProjectView/components/BondStats/types.ts"],"sourcesContent":["export const options = {\n  scales: {\n    y: {\n      grid: {\n        display: true,\n        color: 'rgba(250, 250, 250, 0.1)',\n        drawOnChartArea: true,\n      },\n      beginAtZero: true,\n    },\n    x: {\n      grid: {\n        display: true,\n        color: 'rgba(250, 250, 250, 0.1)',\n        drawOnChartArea: true,\n      },\n    },\n  },\n  plugins: {\n    legend: {\n      display: false,\n    },\n  },\n  pointRadius: 0,\n  responsive: true,\n  maintainAspectRatio: false,\n}\n\ninterface ChartDataset {\n  label: string\n  data: number[]\n  fill: boolean\n  borderColor: string\n  backgroundColor: string\n  tension: number\n}\n\nexport interface ChartData {\n  labels: string[]\n  datasets: ChartDataset[]\n}\n\nexport const chartOptions = [\n  {\n    label: 'Sales Amount',\n    value: 'amount',\n  },\n  {\n    label: 'Sales Count',\n    value: 'count',\n  },\n]\n"],"names":[],"mappings":"AAAO,MAAM,OAAO,GAAG;AACrB,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,EAAE;AACD,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,KAAK,EAAE,0BAA0B;AACjC,gBAAA,eAAe,EAAE,IAAI;AACtB,aAAA;AACD,YAAA,WAAW,EAAE,IAAI;AAClB,SAAA;AACD,QAAA,CAAC,EAAE;AACD,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,KAAK,EAAE,0BAA0B;AACjC,gBAAA,eAAe,EAAE,IAAI;AACtB,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,mBAAmB,EAAE,KAAK;;AAiBrB,MAAM,YAAY,GAAG;AAC1B,IAAA;AACE,QAAA,KAAK,EAAE,cAAc;AACrB,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;;;;;"}

package/dist/views/SingleBond/SoldOutBuyBondPlaceholder.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BillsConfig } from '@ape.swap/apeswap-lists';
-export interface SoldOutProps {
+interface SoldOutProps {
     onDismiss?: () => void;
     bond: BillsConfig;
 }

package/dist/views/SingleBond/SoldOutBuyBondPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"SoldOutBuyBondPlaceholder.js","sources":["../../../src/views/SingleBond/SoldOutBuyBondPlaceholder.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport TokenSelectorPanel from '../../components/TokenSelectorPanel'\nimport useCurrencyBalance from '../../state/balance/useCurrencyBalance'\nimport useTokenFromZapList from '../../hooks/useTokenFromZapList'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport { zapSupported, ZapSupportedChainId } from '../../config/constants/variables'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport useTierPoints, { getUserTier } from '../../state/tiers/useTierPoints'\nimport BondModalHeader from '../BuyBond/components/BondModalHeader'\nimport { BondsData } from '../../types/bonds'\nimport ProjectDescription from '../BuyBond/components/ProjectDescription'\nimport BondCards from '../BuyBond/components/BondCards/BondCards'\nimport Estimations from '../BuyBond/components/Estimations'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\n\nexport interface SoldOutProps {\n  onDismiss?: () => void\n  bond: BillsConfig\n}\n\nconst SoldOutBuyBondPlaceholder: React.FC<SoldOutProps> = ({ bond }) => {\n  const SDKConfig = useSDKConfig()\n  // Hooks\n  const { address: account } = useEVMAccount()\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const userTier = getUserTier(promotionalPoints ?? '0')\n\n  // State\n  const bondData = bond\n  const minTier = bondData?.minTier !== undefined ? bondData.minTier : null\n  const [inputValue, setInputValue] = useState('')\n  const [inputTokenString] = useState(bondData?.lpToken?.address?.[bondData.chainId])\n\n  // Data\n  const inputToken = useTokenFromZapList(inputTokenString, bondData?.chainId, bondData?.lpToken)\n  const isZap = inputTokenString?.toLowerCase() !== bondData?.lpToken?.address?.[bondData?.chainId]?.toLowerCase()\n\n  const { data: inputCurrencyBalance } = useCurrencyBalance(\n    inputToken ?? null,\n    account ?? null,\n    bondData?.chainId ?? null,\n  )\n\n  return bondData ? (\n    <Flex className=\"modal-content\">\n      <Flex className=\"modaltable-container\">\n        <Flex\n          sx={{\n            position: 'absolute',\n            width: 'calc(100% + 40px)',\n            height: 'calc(100% + 20px)',\n            top: '0',\n            left: '-20px',\n            overflow: 'hidden',\n            borderRadius: 'normal',\n          }}\n        >\n          <Flex\n            sx={{\n              position: 'absolute',\n              width: '100%',\n              height: '100%',\n              zIndex: 999,\n              backgroundColor: 'rgba(255,255,255,0.1)',\n              backdropFilter: 'blur(1px)',\n              WebkitBackdropFilter: 'blur(1px)', // Ensure compatibility with Safari\n            }}\n          ></Flex>\n          <Flex\n            sx={{\n              position: 'absolute',\n              top: '50px',\n              left: '-50px',\n              backgroundColor: 'error',\n              color: 'white',\n              padding: '5px 20px',\n              fontSize: '14px',\n              fontWeight: 'bold',\n              transform: 'rotate(-45deg)',\n              zIndex: 1000, // Ensure it appears above other elements\n              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n              width: '220px',\n              justifyContent: 'center',\n            }}\n          >\n            SOLD OUT\n          </Flex>\n        </Flex>\n        <BondModalHeader\n          bondData={bondData as unknown as BondsData}\n          // onDismiss={onDismiss}\n          showProjectInfoButton={SDKConfig?.referenceId === 'apebond'}\n        />\n        <ProjectDescription description={bondData.shortDescription} />\n        {/*@ts-ignore*/}\n        <BondCards bondData={{ ...bondData, bonusWithFee: -1 }} />\n        <Estimations\n          depositAmount={'0'}\n          inputValue={'0'}\n          inputTokenPrice={0}\n          /*@ts-ignore*/\n          bondData={bondData}\n          youSpendString={'0'}\n          isZap={isZap}\n          fetchingZapQuote={false}\n          zapError={false}\n        />\n        <TokenSelectorPanel\n          typedValue={inputValue}\n          setTypedValue={setInputValue}\n          selectedToken={inputToken}\n          handleValueBtn={() => null}\n          handleCurrencySelect={() => null}\n          bondChainId={bondData?.chainId}\n          enableZap={zapSupported.includes(bondData?.chainId as ZapSupportedChainId)}\n          bondPrincipalToken={bondData?.lpToken}\n          tokenBalance={inputCurrencyBalance ?? undefined}\n          selectedTokenPrice={0}\n          inputDisabled={true}\n          isConnected={false}\n        />\n        <Flex className=\"modaltable-container button-container\">\n          {account && (minTier === null || (userTier !== null && userTier >= minTier)) && (\n            <Flex className=\"button-container get\">\n              <Button className=\"action-button\" variant=\"secondary\" fullWidth disabled>\n                Get {getSymbol(bondData?.lpToken)}\n              </Button>\n            </Flex>\n          )}\n          <Flex className=\"button-container buy\">\n            <Button className=\"action-button\" fullWidth disabled>\n              Buy\n            </Button>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  ) : (\n    <></>\n  )\n}\nexport default SoldOutBuyBondPlaceholder\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"SoldOutBuyBondPlaceholder.js","sources":["../../../src/views/SingleBond/SoldOutBuyBondPlaceholder.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport TokenSelectorPanel from '../../components/TokenSelectorPanel'\nimport useCurrencyBalance from '../../state/balance/useCurrencyBalance'\nimport useTokenFromZapList from '../../hooks/useTokenFromZapList'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport { zapSupported, ZapSupportedChainId } from '../../config/constants/variables'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport useTierPoints, { getUserTier } from '../../state/tiers/useTierPoints'\nimport BondModalHeader from '../BuyBond/components/BondModalHeader'\nimport { BondsData } from '../../types/bonds'\nimport ProjectDescription from '../BuyBond/components/ProjectDescription'\nimport BondCards from '../BuyBond/components/BondCards/BondCards'\nimport Estimations from '../BuyBond/components/Estimations'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\n\ninterface SoldOutProps {\n  onDismiss?: () => void\n  bond: BillsConfig\n}\n\nconst SoldOutBuyBondPlaceholder: React.FC<SoldOutProps> = ({ bond }) => {\n  const SDKConfig = useSDKConfig()\n  // Hooks\n  const { address: account } = useEVMAccount()\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const userTier = getUserTier(promotionalPoints ?? '0')\n\n  // State\n  const bondData = bond\n  const minTier = bondData?.minTier !== undefined ? bondData.minTier : null\n  const [inputValue, setInputValue] = useState('')\n  const [inputTokenString] = useState(bondData?.lpToken?.address?.[bondData.chainId])\n\n  // Data\n  const inputToken = useTokenFromZapList(inputTokenString, bondData?.chainId, bondData?.lpToken)\n  const isZap = inputTokenString?.toLowerCase() !== bondData?.lpToken?.address?.[bondData?.chainId]?.toLowerCase()\n\n  const { data: inputCurrencyBalance } = useCurrencyBalance(\n    inputToken ?? null,\n    account ?? null,\n    bondData?.chainId ?? null,\n  )\n\n  return bondData ? (\n    <Flex className=\"modal-content\">\n      <Flex className=\"modaltable-container\">\n        <Flex\n          sx={{\n            position: 'absolute',\n            width: 'calc(100% + 40px)',\n            height: 'calc(100% + 20px)',\n            top: '0',\n            left: '-20px',\n            overflow: 'hidden',\n            borderRadius: 'normal',\n          }}\n        >\n          <Flex\n            sx={{\n              position: 'absolute',\n              width: '100%',\n              height: '100%',\n              zIndex: 999,\n              backgroundColor: 'rgba(255,255,255,0.1)',\n              backdropFilter: 'blur(1px)',\n              WebkitBackdropFilter: 'blur(1px)', // Ensure compatibility with Safari\n            }}\n          ></Flex>\n          <Flex\n            sx={{\n              position: 'absolute',\n              top: '50px',\n              left: '-50px',\n              backgroundColor: 'error',\n              color: 'white',\n              padding: '5px 20px',\n              fontSize: '14px',\n              fontWeight: 'bold',\n              transform: 'rotate(-45deg)',\n              zIndex: 1000, // Ensure it appears above other elements\n              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n              width: '220px',\n              justifyContent: 'center',\n            }}\n          >\n            SOLD OUT\n          </Flex>\n        </Flex>\n        <BondModalHeader\n          bondData={bondData as unknown as BondsData}\n          // onDismiss={onDismiss}\n          showProjectInfoButton={SDKConfig?.referenceId === 'apebond'}\n        />\n        <ProjectDescription description={bondData.shortDescription} />\n        {/*@ts-ignore*/}\n        <BondCards bondData={{ ...bondData, bonusWithFee: -1 }} />\n        <Estimations\n          depositAmount={'0'}\n          inputValue={'0'}\n          inputTokenPrice={0}\n          /*@ts-ignore*/\n          bondData={bondData}\n          youSpendString={'0'}\n          isZap={isZap}\n          fetchingZapQuote={false}\n          zapError={false}\n        />\n        <TokenSelectorPanel\n          typedValue={inputValue}\n          setTypedValue={setInputValue}\n          selectedToken={inputToken}\n          handleValueBtn={() => null}\n          handleCurrencySelect={() => null}\n          bondChainId={bondData?.chainId}\n          enableZap={zapSupported.includes(bondData?.chainId as ZapSupportedChainId)}\n          bondPrincipalToken={bondData?.lpToken}\n          tokenBalance={inputCurrencyBalance ?? undefined}\n          selectedTokenPrice={0}\n          inputDisabled={true}\n          isConnected={false}\n        />\n        <Flex className=\"modaltable-container button-container\">\n          {account && (minTier === null || (userTier !== null && userTier >= minTier)) && (\n            <Flex className=\"button-container get\">\n              <Button className=\"action-button\" variant=\"secondary\" fullWidth disabled>\n                Get {getSymbol(bondData?.lpToken)}\n              </Button>\n            </Flex>\n          )}\n          <Flex className=\"button-container buy\">\n            <Button className=\"action-button\" fullWidth disabled>\n              Buy\n            </Button>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  ) : (\n    <></>\n  )\n}\nexport default SoldOutBuyBondPlaceholder\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

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

@@ -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

@@ -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":"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"}
+{"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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;;;;"}
+{"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;;;;"}