npm - @ape.swap/bonds-sdk - Versions diffs - 6.2.13-test.3 → 6.2.14 - Mend

@ape.swap/bonds-sdk 6.2.13-test.3 → 6.2.14

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProjectView.js","sources":["../../../src/views/ProjectView/ProjectView.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport RecommendationCards from './components/RecommendationCards'\nimport NavPanel from './components/NavPanel'\nimport BondCards from '../BuyBond/components/BondCards/BondCards'\nimport ProjectInfo from './components/ProjectInfo'\nimport BondStats from './components/BondStats'\nimport BondLeaderboard from './components/BondLeaderboard'\nimport PriceChart from './components/PriceChart'\nimport BuyBond from '../BuyBond/BuyComponent'\nimport useTokenPrices from '../../state/tokenPrices/useTokenPrices'\nimport useHistoricalPrice from '../../state/historicalPrice/useHistoricalPrice'\n\nexport interface HistoricalPrices {\n timestamp: string\n open: number\n close: number\n}\n\nexport interface ProjectViewProps {\n bondAddress: string\n bondChain: string\n}\n\nconst ProjectView: React.FC<ProjectViewProps> = ({ bondAddress, bondChain }) => {\n // Hooks\n const { data: bonds, refetch } = useBondsData()\n const { data: tokenPrices } = useTokenPrices()\n const bondData = bonds?.find(\n (bond) =>\n bond?.contractAddress?.[bond.chainId]?.toLowerCase() === (bondAddress as string)?.toLowerCase() &&\n (bondChain as string) === bond.chainId.toString(),\n )\n\n const { data: historicalPrices } = useHistoricalPrice(bondData?.cgId)\n\n useEffect(() => {\n if ((bonds?.length ?? 0) > 0 && !bondData) {\n window.location.href = '/bonds'\n }\n })\n\n useEffect(() => {\n if (Object.keys(tokenPrices ?? {})?.length > 0 && bonds?.length === 0) {\n console.log('Found prices and no bonds, realtimeapi failed. Refetching bonds')\n refetch()\n }\n /* eslint-disable react-hooks/exhaustive-deps */\n }, [Object.keys(tokenPrices ?? {})?.length, bonds?.length, refetch])\n\n return (\n <Flex ~~className=\"ape:w-full ape:flex-col ape:mt-[15px] ape:max-w-[1150px]\"~~>\n <RecommendationCards />\n <NavPanel contractAddress={bondData?.contractAddress?.[bondData.chainId]} />\n {bondData && (\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~mt-~~[~~10px]~~ ~~ape:hidden~~ ~~ape:md:~~block ~~ape:[&>~~div>div]:~~bg-~~white2\">\n <BondCards bondData={bondData} />\n </Flex>\n )}\n {bondData ? (\n <>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~flex-col~~ ~~ape~~:~~mt-[~~10px~~]\"~~>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~flex-col~~ ~~ape:md:flex-~~row ~~ape~~:~~items-~~stretch\">\n <Flex ~~className=\"ape~~:~~bg-white2~~ ~~ape:rounded-~~normal ~~ape~~:~~w-full~~ ~~ape~~:~~md:w-1/2~~ ~~ape:mt-[~~5px]\">\n <BuyBond\n bondAddress={bondData?.contractAddress?.[bondData.chainId]}\n bondChain={bondData.chainId}\n isProjectView\n />\n </Flex>\n <PriceChart selectedBond={bondData} historicalPrices={historicalPrices} />\n </Flex>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~mt-[~~10px~~]\"~~>\n <ProjectInfo selectedBond={bondData} />\n </Flex>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~mt-[~~10px~~]\"~~>\n <BondStats selectedBond={bondData} />\n </Flex>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~mt-[~~10px] ~~ape~~:~~mb-[~~50px~~]\"~~>\n <BondLeaderboard selectedBond={bondData} />\n </Flex>\n </Flex>\n </>\n ) : (\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~justify-~~center ~~ape~~:~~text-[~~12px] ~~ape~~:~~font-medium\"~~>Loading...</Flex>\n )}\n </Flex>\n )\n}\n\nexport default ProjectView\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"~~;;;;;;;;;;;;;;;AAyBA~~,MAAM,WAAW,GAA+B,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,KAAI;;IAE7E,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE;IAC/C,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE;IAC9C,MAAM,QAAQ,GAAG,KAAK,EAAE,IAAI,CAC1B,CAAC,IAAI,KACH,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,WAAW,EAAE,KAAM,WAAsB,EAAE,WAAW,EAAE;QAC9F,SAAoB,KAAK,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CACpD;AAED,IAAA,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,CAAC,QAAQ,EAAE,IAAI,CAAC;IAErE,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACzC,YAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,QAAQ;QACjC;AACF,IAAA,CAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,IAAI,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE;AACrE,YAAA,OAAO,CAAC,GAAG,CAAC,iEAAiE,CAAC;AAC9E,YAAA,OAAO,EAAE;QACX;;IAEF,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAEpE,IAAA,QACEA,IAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~0DAA0D~~,EAAA,QAAA,EAAA,~~CACxEC~~,~~GAAA~~,~~CAAC,~~mBAAmB,EAAA,EAAA,CAAG,EACvBA,GAAA,CAAC,QAAQ,~~IAAC~~,eAAe,EAAE,QAAQ,EAAE,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,EAAA,CAAI,EAC3E,QAAQ,KACPA,IAAC,IAAI,EAAA,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~4EAA4E~~,~~YAC1FA~~,GAAA,CAAC,SAAS,~~IAAC~~,QAAQ,EAAE,QAAQ,EAAA,CAAI,~~GAC5B~~,CACR,EACA,QAAQ,IACPA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACEF,IAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~uCAAuC~~,EAAA,QAAA,EAAA,~~CACrDA~~,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,~~EAAC~~,~~2DAA2D~~,~~aACzEC~~,GAAA,CAAC,IAAI,~~IAAC~~,~~SAAS~~,~~EAAC~~,~~uEAAuE~~,EAAA,QAAA,~~EACrFA~~,GAAA,CAAC,OAAO,EAAA,EACN,WAAW,EAAE,QAAQ,EAAE,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,EAC1D,SAAS,EAAE,QAAQ,CAAC,OAAO,EAC3B,aAAa,~~EAAA~~,~~IAAA,~~EAAA,~~CACb,EAAA,~~CACG,EACPA,GAAA,CAAC,UAAU,~~EAAA~~,~~EAAC,~~YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAA,CAAI,CAAA,EAAA,CACrE,EACPA,GAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~0BAA0B~~,EAAA,QAAA,~~EACxCA~~,GAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,QAAQ,EAAA,CAAI,GAClC,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~0BAA0B~~,~~YACxCA~~,GAAA,CAAC,SAAS,IAAC,YAAY,EAAE,QAAQ,EAAA,CAAI,EAAA,CAChC,EACPA,GAAA,CAAC,IAAI,IAAC,~~SAAS~~,~~EAAC~~,~~wCAAwC~~,EAAA,QAAA,~~EACtDA~~,GAAA,CAAC,eAAe,~~EAAA~~,~~EAAC,~~YAAY,EAAE,QAAQ,~~GAAI~~,EAAA,CACtC,CAAA,EAAA,CACF,~~GACN~~,KAEHA,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC,+DAA+D~~,~~2BAAkB~~,~~CAClG~~,CAAA,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"ProjectView.js","sources":["../../../src/views/ProjectView/ProjectView.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport { styles } from './styles'\nimport RecommendationCards from './components/RecommendationCards'\nimport NavPanel from './components/NavPanel'\nimport BondCards from '../BuyBond/components/BondCards/BondCards'\nimport ProjectInfo from './components/ProjectInfo'\nimport BondStats from './components/BondStats'\nimport BondLeaderboard from './components/BondLeaderboard'\nimport PriceChart from './components/PriceChart'\nimport BuyBond from '../BuyBond/BuyComponent'\nimport useTokenPrices from '../../state/tokenPrices/useTokenPrices'\nimport useHistoricalPrice from '../../state/historicalPrice/useHistoricalPrice'\n\nexport interface HistoricalPrices {\n timestamp: string\n open: number\n close: number\n}\n\nexport interface ProjectViewProps {\n bondAddress: string\n bondChain: string\n}\n\nconst ProjectView: React.FC<ProjectViewProps> = ({ bondAddress, bondChain }) => {\n // Hooks\n const { data: bonds, refetch } = useBondsData()\n const { data: tokenPrices } = useTokenPrices()\n const bondData = bonds?.find(\n (bond) =>\n bond?.contractAddress?.[bond.chainId]?.toLowerCase() === (bondAddress as string)?.toLowerCase() &&\n (bondChain as string) === bond.chainId.toString(),\n )\n\n const { data: historicalPrices } = useHistoricalPrice(bondData?.cgId)\n\n useEffect(() => {\n if ((bonds?.length ?? 0) > 0 && !bondData) {\n window.location.href = '/bonds'\n }\n })\n\n useEffect(() => {\n if (Object.keys(tokenPrices ?? {})?.length > 0 && bonds?.length === 0) {\n console.log('Found prices and no bonds, realtimeapi failed. Refetching bonds')\n refetch()\n }\n /* eslint-disable react-hooks/exhaustive-deps */\n }, [Object.keys(tokenPrices ?? {})?.length, bonds?.length, refetch])\n\n return (\n <Flex sx={styles.mainViewContainer}>\n <RecommendationCards />\n <NavPanel contractAddress={bondData?.contractAddress?.[bondData.chainId]} />\n {bondData && (\n <Flex\n sx={{\n width: '100%',\n mt: '10px',\n display: ['none', 'none', 'none', 'block'],\n '&& > div > div': {\n background: 'white2',\n },\n }}\n >\n <BondCards bondData={bondData} />\n </Flex>\n )}\n {bondData ? (\n <>\n <Flex sx={{ width: '100%', flexDirection: 'column', mt: '10px' }}>\n <Flex sx={{ width: '100%', flexDirection: ['column', 'column', 'column', 'row'], alignItems: 'stretch' }}>\n <Flex\n sx={{\n background: 'white2',\n borderRadius: 'normal',\n width: ['100%', '100%', '100%', '50%'],\n mt: '5px',\n }}\n >\n <BuyBond\n bondAddress={bondData?.contractAddress?.[bondData.chainId]}\n bondChain={bondData.chainId}\n isProjectView\n />\n </Flex>\n <PriceChart selectedBond={bondData} historicalPrices={historicalPrices} />\n </Flex>\n <Flex sx={{ width: '100%', mt: '10px' }}>\n <ProjectInfo selectedBond={bondData} />\n </Flex>\n <Flex sx={{ width: '100%', mt: '10px' }}>\n <BondStats selectedBond={bondData} />\n </Flex>\n <Flex sx={{ width: '100%', mt: '10px', mb: '50px' }}>\n <BondLeaderboard selectedBond={bondData} />\n </Flex>\n </Flex>\n </>\n ) : (\n <Flex sx={{ width: '100%', justifyContent: 'center', fontSize: '12px', fontWeight: 500 }}>Loading...</Flex>\n )}\n </Flex>\n )\n}\n\nexport default ProjectView\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/views/ProjectView/components/BondLeaderboard/components/SalesTable.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
+import React from 'react';
 import { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats';
 declare const SalesTable: ({ allSales }: {
     allSales: Sales[] | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default SalesTable;

package/dist/views/ProjectView/components/BondLeaderboard/components/SalesTable.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { styles } from './styles.js';
 import Flex from '../../../../../components/uikit-sdk/Flex/index.js';
 import TokenImage from '../../../../../components/uikit-sdk/TokenImage/index.js';
 import { formatUTCDate } from '../../../../../utils/dates/formatDate.js';
@@ -6,7 +7,15 @@ import useEVMAccount from '../../../../../hooks/accounts/useEVMAccount.js';
 const SalesTable = ({ allSales }) => {
     const { address: account } = useEVMAccount();
-    return (jsxs(Flex, { className: "ape:w-full ape:min-w-[700px] ape:flex-col ape:mt-[20px]", children: [jsxs(Flex, { className: "ape:w-full ape:mx-[2px] ape:justify-between ape:text-[12px] ape:font-normal ape:mb-[5px]", style: { color: 'var(--ape-color-text-disabled-button)' }, children: [jsxs(Flex, { className: "ape:w-[170px]", children: [jsx(Flex, { className: "ape:w-[30px] ape:justify-center", children: "#" }), jsx(Flex, { children: "Bond" })] }), jsx(Flex, { className: "ape:w-[120px] ape:justify-center", children: "Purchase Date" }), jsx(Flex, { className: "ape:w-[160px] ape:justify-center", children: "Buyer" }), jsx(Flex, { className: "ape:w-[110px] ape:justify-center", children: "Deposit Amount" }), jsx(Flex, { className: "ape:w-[110px] ape:justify-center", children: "Payout Amount" }), jsx(Flex, { className: "ape:w-[85px] ape:justify-center", children: "Bonus" })] }), jsx(Flex, { className: "ape:w-full ape:flex-col", children: allSales &&
+    return (jsxs(Flex, { sx: { width: '100%', minWidth: '700px', flexDirection: 'column', mt: '20px' }, children: [jsxs(Flex, { sx: {
+                    width: '100%',
+                    mx: '2px',
+                    justifyContent: 'space-between',
+                    color: 'textDisabledButton',
+                    fontSize: '12px',
+                    fontWeight: 400,
+                    mb: '5px',
+                }, children: [jsxs(Flex, { sx: { width: '170px' }, children: [jsx(Flex, { sx: { width: '30px', justifyContent: 'center' }, children: "#" }), jsx(Flex, { children: "Bond" })] }), jsx(Flex, { sx: { width: '120px', justifyContent: 'center' }, children: "Purchase Date" }), jsx(Flex, { sx: { width: '160px', justifyContent: 'center' }, children: "Buyer" }), jsx(Flex, { sx: { width: '110px', justifyContent: 'center' }, children: "Deposit Amount" }), jsx(Flex, { sx: { width: '110px', justifyContent: 'center' }, children: "Payout Amount" }), jsx(Flex, { sx: { width: '85px', justifyContent: 'center' }, children: "Bonus" })] }), jsx(Flex, { sx: { width: '100%', flexDirection: 'column' }, children: allSales &&
                     allSales.length > 0 &&
                     allSales.map((sale, index) => {
                         const buyer = sale.createdAddressOwner;
@@ -14,7 +23,17 @@ const SalesTable = ({ allSales }) => {
                         const discount = 100 - (sale.dollarValue * 100) / receivedUsdAmount;
                         const isUserTheBuyer = buyer?.toLowerCase() === account?.toLowerCase();
                         const payoutToken = sale.payoutToken === 'LL.e' ? 'LL' : sale.payoutToken;
-                        return (jsxs(Flex, { className: "ape:w-full ape:bg-white3 ape:border ape:h-[49px] ape:mb-[5px] ape:rounded-normal ape:items-center ape:justify-between ape:text-[12px]", style: { borderColor: 'var(--ape-color-text-disabled-button)' }, children: [jsxs(Flex, { className: "ape:w-[170px] ape:items-center", children: [jsx(Flex, { className: "ape:w-[30px] ape:justify-center", children: index + 4 }), jsx(TokenImage, { symbol: payoutToken, chain: sale.chainId, size: 28 }), jsx(Flex, { className: "ape:ml-[10px]", children: sale.payoutToken })] }), jsx(Flex, { className: "ape:w-[120px] ape:justify-center", children: formatUTCDate(new Date(sale.createdAt * 1000)) }), jsx(Flex, { className: "ape:w-[160px] ape:justify-center ape:relative", children: jsxs(Flex, { className: "ape:relative", children: [buyer?.slice(0, 4), "...", buyer?.slice(buyer?.length - 4, buyer?.length), isUserTheBuyer && (jsx(Flex, { className: "ape-you-card ape:bg-primary-button ape:rounded-[0px_10px_10px_0px] ape:p-[2.5px_5px] ape:text-[12px] ape:font-normal", style: { lineHeight: '12px' }, children: "You" }))] }) }), jsxs(Flex, { className: "ape:w-[110px] ape:justify-center", children: ["$", sale.dollarValue.toFixed(2)] }), jsxs(Flex, { className: "ape:w-[110px] ape:justify-center", children: ["$", receivedUsdAmount?.toFixed(2)] }), jsxs(Flex, { className: "ape:w-[85px] ape:justify-center", style: { color: discount > 0 ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }, children: [discount.toFixed(2), "%"] })] }, sale.transactionHash));
+                        return (jsxs(Flex, { sx: {
+                                width: '100%',
+                                background: 'white3',
+                                border: '2px solid var(--theme-ui-colors-textDisabledButton)',
+                                height: '49px',
+                                mb: '5px',
+                                borderRadius: 'normal',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                fontSize: '12px',
+                            }, children: [jsxs(Flex, { sx: { width: '170px', alignItems: 'center' }, children: [jsx(Flex, { sx: { width: '30px', justifyContent: 'center' }, children: index + 4 }), jsx(TokenImage, { symbol: payoutToken, chain: sale.chainId, size: 28 }), jsx(Flex, { sx: { ml: '10px' }, children: sale.payoutToken })] }), jsx(Flex, { sx: { width: '120px', justifyContent: 'center' }, children: formatUTCDate(new Date(sale.createdAt * 1000)) }), jsx(Flex, { sx: { width: '160px', justifyContent: 'center', position: 'relative' }, children: jsxs(Flex, { sx: { position: 'relative' }, children: [buyer?.slice(0, 4), "...", buyer?.slice(buyer?.length - 4, buyer?.length), isUserTheBuyer && jsx(Flex, { sx: styles.youCard, children: "You" })] }) }), jsxs(Flex, { sx: { width: '110px', justifyContent: 'center' }, children: ["$", sale.dollarValue.toFixed(2)] }), jsxs(Flex, { sx: { width: '110px', justifyContent: 'center' }, children: ["$", receivedUsdAmount?.toFixed(2)] }), jsxs(Flex, { sx: { width: '85px', justifyContent: 'center', color: discount > 0 ? 'success' : 'error' }, children: [discount.toFixed(2), "%"] })] }, sale.transactionHash));
                     }) })] }));
 };

package/dist/views/ProjectView/components/BondLeaderboard/components/SalesTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SalesTable.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/SalesTable.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../../components/uikit-sdk/Flex'\nimport TokenImage from '../../../../../components/uikit-sdk/TokenImage'\nimport { formatUTCDate } from '../../../../../utils/dates/formatDate'\nimport { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats'\nimport useEVMAccount from '../../../../../hooks/accounts/useEVMAccount'\n\nconst SalesTable = ({ allSales }: { allSales: Sales[] \| undefined }) => {\n const { address: account } = useEVMAccount()\n\n return (\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~min-w-[~~700px] ~~ape~~:~~flex-col~~ ~~ape~~:~~mt-[~~20px~~]\"~~>\n <Flex\n ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~mx-[~~2px] ~~ape:justify~~-between ~~ape~~:~~text-[~~12px~~] ape~~:~~font-normal~~ ~~ape:~~mb~~-[5px]\"\n style={{ color~~: '~~var(--ape-color-text-disabled-button)~~' }}\n >\n <Flex ~~className=\"ape~~:~~w-[~~170px~~]\"~~>\n <Flex ~~className=\"ape~~:~~w-[~~30px] ~~ape~~:~~justify-~~center\">#</Flex>\n <Flex>Bond</Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~w-[~~120px] ~~ape~~:~~justify-~~center\">Purchase Date</Flex>\n <Flex ~~className=\"ape~~:~~w-[~~160px] ~~ape~~:~~justify-~~center\">Buyer</Flex>\n <Flex ~~className=\"ape~~:~~w-[~~110px] ~~ape~~:~~justify-~~center\">Deposit Amount</Flex>\n <Flex ~~className=\"ape~~:~~w-[~~110px] ~~ape~~:~~justify-~~center\">Payout Amount</Flex>\n <Flex ~~className=\"ape~~:~~w-[~~85px] ~~ape~~:~~justify-~~center\">Bonus</Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~flex-col\"~~>\n {allSales &&\n allSales.length > 0 &&\n allSales.map((sale, index) => {\n const buyer = sale.createdAddressOwner\n const receivedUsdAmount = (sale?.payout ?? 0) * sale?.payoutTokenPrice\n const discount = 100 - (sale.dollarValue * 100) / receivedUsdAmount\n const isUserTheBuyer = buyer?.toLowerCase() === account?.toLowerCase()\n const payoutToken = sale.payoutToken === 'LL.e' ? 'LL' : sale.payoutToken\n\n return (\n <Flex\n ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~bg-~~white3 ~~ape~~:~~border~~ ~~ape~~:~~h-[49px]~~ ~~ape~~:~~mb-[5px]~~ ~~ape~~:~~rounded-normal~~ ~~ape~~:~~items-center~~ ~~ape:justify~~-between ~~ape:text-[12px]\"\~~n ~~style={{ borderColor~~: '~~var(--ape-color-text-disabled-button)~~' }}\n key={sale.transactionHash}\n >\n <Flex ~~className=\"ape~~:~~w-[~~170px] ~~ape~~:~~items-~~center\">\n <Flex ~~className=\"ape~~:~~w-[~~30px] ~~ape~~:~~justify-~~center\">{index + 4}</Flex>\n <TokenImage symbol={payoutToken} chain={sale.chainId} size={28} />\n <Flex ~~className=\"ape~~:~~ml-[~~10px~~]\"~~>{sale.payoutToken}</Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~w-[~~120px] ~~ape~~:~~justify-~~center\">\n {formatUTCDate(new Date(sale.createdAt * 1000))}\n </Flex>\n <Flex ~~className=\"ape~~:~~w-[~~160px] ~~ape~~:~~justify-~~center ~~ape~~:relative\">\n <Flex ~~className=\"ape~~:relative\">\n {buyer?.slice(0, 4)}...\n {buyer?.slice(buyer?.length - 4, buyer?.length)}\n {isUserTheBuyer && ~~(\n~~ <Flex~~\n className=\"ape-you-card~~ ~~ape:bg-primary-button ape:rounded-[0px_10px_10px_0px] ape:p-[2.5px_5px] ape:text-[12px] ape:font-normal\"\n style~~={~~{ lineHeight: '12px'~~ }~~}\n >\n~~ You\n </Flex~~>\n )~~}\n </Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~w-[~~110px] ~~ape~~:~~justify-~~center\">${sale.dollarValue.toFixed(2)}</Flex>\n <Flex ~~className=\"ape~~:~~w-[~~110px] ~~ape~~:~~justify-~~center\">${receivedUsdAmount?.toFixed(2)}</Flex>\n <Flex~~\n className=\"ape~~:~~w-[~~85px] ~~ape~~:~~justify-~~center~~\"\n style={{~~ color: discount > 0 ? '~~var(--ape-color-~~success)' : '~~var(--ape-color-~~error)' }}\n >\n {discount.toFixed(2)}%\n </Flex>\n </Flex>\n )\n })}\n </Flex>\n </Flex>\n )\n}\n\nexport default SalesTable\n"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;AAOA~~,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAqC,KAAI;IACrE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;AAE5C,IAAA,QACEA,IAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~yDAAyD~~,EAAA,QAAA,EAAA,~~CACvEA~~,IAAA,CAAC,IAAI,EAAA,EACH,~~SAAS~~,~~EAAC~~,~~0FAA0F~~,~~EACpG,~~KAAK,EAAE,EAAE,KAAK,EAAE,~~uCAAuC~~,EAAE,EAAA,QAAA,EAAA,~~CAEzDA~~,IAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~eAAe~~,EAAA,QAAA,EAAA,~~CAC7BC~~,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~iCAAiC~~,~~kBAAS~~,~~EAC1DA~~,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAY,CAAA,EAAA,CACZ,EACPA,GAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~kCAAkC~~,EAAA,QAAA,EAAA,eAAA,EAAA,~~CAAqB~~,~~EACvEA~~,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~kCAAkC~~,~~sBAAa~~,~~EAC/DA~~,GAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~kCAAkC~~,EAAA,QAAA,EAAA,gBAAA,EAAA,~~CAAsB~~,~~EACxEA~~,GAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~kCAAkC~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~eAAA~~,~~EAAA~~,~~CAAqB~~,~~EACvEA~~,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~iCAAiC~~,~~sBAAa~~,CAAA,EAAA,~~CACzD~~,EACPA,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~yBAAyB~~,~~YACtC~~,QAAQ;oBACP,QAAQ,CAAC,MAAM,GAAG,CAAC;oBACnB,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC3B,wBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB;AACtC,wBAAA,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC,IAAI,IAAI,EAAE,gBAAgB;AACtE,wBAAA,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,iBAAiB;wBACnE,MAAM,cAAc,GAAG,KAAK,EAAE,WAAW,EAAE,KAAK,OAAO,EAAE,WAAW,EAAE;AACtE,wBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW;~~wBAEzE~~,QACED,~~KAAC~~,IAAI,EAAA,EACH,~~SAAS~~,~~EAAC~~,~~uIAAuI~~,~~EACjJ~~,KAAK,EAAE,EAAE,~~WAAW~~,EAAE,~~uCAAuC~~,EAAE,EAAA,QAAA,EAAA,~~CAG/DA~~,IAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~gCAAgC~~,EAAA,QAAA,EAAA,~~CAC9CC~~,GAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~iCAAiC~~,EAAA,QAAA,~~EAAE~~,KAAK,GAAG,CAAC,EAAA,CAAQ,~~EACpEA~~,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,EAClEA,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~eAAe~~,~~YAAE~~,IAAI,CAAC,WAAW,EAAA,CAAQ,CAAA,EAAA,~~CACpD~~,EACPA,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~kCAAkC~~,EAAA,QAAA,~~EAC/C~~,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,EAAA,CAC1C,EACPA,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC,+CAA+C~~,EAAA,QAAA,~~EAC7DD~~,~~KAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~cAAc~~,EAAA,QAAA,EAAA,~~CAC3B~~,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAA,KAAA,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,EAC9C,cAAc,~~KACbC~~,~~IAAC~~,IAAI,EAAA,~~EACH,SAAS,~~EAAC,~~sHAAsH~~,~~EAChI~~,~~KAAK~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~oBAGxB~~,~~CACR~~,CAAA,EAAA,~~CACI~~,EAAA,CACF,EACPD,IAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~kCAAkC~~,EAAA,QAAA,EAAA,CAAA,GAAA,~~EAAG~~,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,~~CAAA~~,~~EAAA~~,~~CAAQ,EACxFA,~~IAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~kCAAkC~~,~~kBAAG~~,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC,~~IAAQ~~,~~EAC1FA~~,IAAA,CAAC,IAAI,EAAA,~~EACH~~,~~SAAS~~,~~EAAC~~,~~iCAAiC~~,~~EAC3C,~~KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,GAAG,~~0BAA0B~~,GAAG,~~wBAAwB~~,EAAE,EAAA,QAAA,EAAA,~~CAErF~~,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,EAAA,CACf,CAAA,EAAA,~~EA/BF~~,IAAI,CAAC,eAAe,~~CAgCpB~~;AAEX,oBAAA,CAAC,CAAC,EAAA,CACC,CAAA,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"SalesTable.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/SalesTable.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport Flex from '../../../../../components/uikit-sdk/Flex'\nimport TokenImage from '../../../../../components/uikit-sdk/TokenImage'\nimport { formatUTCDate } from '../../../../../utils/dates/formatDate'\nimport { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats'\nimport useEVMAccount from '../../../../../hooks/accounts/useEVMAccount'\n\nconst SalesTable = ({ allSales }: { allSales: Sales[] \| undefined }) => {\n const { address: account } = useEVMAccount()\n\n return (\n <Flex sx={{ width: '100%', minWidth: '700px', flexDirection: 'column', mt: '20px' }}>\n <Flex\n sx={{\n width: '100%',\n mx: '2px',\n justifyContent: 'space-between',\n color: 'textDisabledButton',\n fontSize: '12px',\n fontWeight: 400,\n mb: '5px',\n }}\n >\n <Flex sx={{ width: '170px' }}>\n <Flex sx={{ width: '30px', justifyContent: 'center' }}>#</Flex>\n <Flex>Bond</Flex>\n </Flex>\n <Flex sx={{ width: '120px', justifyContent: 'center' }}>Purchase Date</Flex>\n <Flex sx={{ width: '160px', justifyContent: 'center' }}>Buyer</Flex>\n <Flex sx={{ width: '110px', justifyContent: 'center' }}>Deposit Amount</Flex>\n <Flex sx={{ width: '110px', justifyContent: 'center' }}>Payout Amount</Flex>\n <Flex sx={{ width: '85px', justifyContent: 'center' }}>Bonus</Flex>\n </Flex>\n <Flex sx={{ width: '100%', flexDirection: 'column' }}>\n {allSales &&\n allSales.length > 0 &&\n allSales.map((sale, index) => {\n const buyer = sale.createdAddressOwner\n const receivedUsdAmount = (sale?.payout ?? 0) * sale?.payoutTokenPrice\n const discount = 100 - (sale.dollarValue * 100) / receivedUsdAmount\n const isUserTheBuyer = buyer?.toLowerCase() === account?.toLowerCase()\n const payoutToken = sale.payoutToken === 'LL.e' ? 'LL' : sale.payoutToken\n\n return (\n <Flex\n sx={{\n width: '100%',\n background: 'white3',\n border: '2px solid var(--theme-ui-colors-textDisabledButton)',\n height: '49px',\n mb: '5px',\n borderRadius: 'normal',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '12px',\n }}\n key={sale.transactionHash}\n >\n <Flex sx={{ width: '170px', alignItems: 'center' }}>\n <Flex sx={{ width: '30px', justifyContent: 'center' }}>{index + 4}</Flex>\n <TokenImage symbol={payoutToken} chain={sale.chainId} size={28} />\n <Flex sx={{ ml: '10px' }}>{sale.payoutToken}</Flex>\n </Flex>\n <Flex sx={{ width: '120px', justifyContent: 'center' }}>\n {formatUTCDate(new Date(sale.createdAt * 1000))}\n </Flex>\n <Flex sx={{ width: '160px', justifyContent: 'center', position: 'relative' }}>\n <Flex sx={{ position: 'relative' }}>\n {buyer?.slice(0, 4)}...\n {buyer?.slice(buyer?.length - 4, buyer?.length)}\n {isUserTheBuyer && <Flex sx={styles.youCard}>You</Flex>}\n </Flex>\n </Flex>\n <Flex sx={{ width: '110px', justifyContent: 'center' }}>${sale.dollarValue.toFixed(2)}</Flex>\n <Flex sx={{ width: '110px', justifyContent: 'center' }}>${receivedUsdAmount?.toFixed(2)}</Flex>\n <Flex sx={{ width: '85px', justifyContent: 'center', color: discount > 0 ? 'success' : 'error' }}>\n {discount.toFixed(2)}%\n </Flex>\n </Flex>\n )\n })}\n </Flex>\n </Flex>\n )\n}\n\nexport default SalesTable\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/ProjectView/components/BondLeaderboard/components/TopSaleCard.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats';
 declare const TopSaleCard: ({ sale, position }: {
     sale?: Sales;
     position: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TopSaleCard;

package/dist/views/ProjectView/components/BondLeaderboard/components/TopSaleCard.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { styles } from './styles.js';
 import Flex from '../../../../../components/uikit-sdk/Flex/index.js';
 import { formatUTCDate } from '../../../../../utils/dates/formatDate.js';
 import useEVMAccount from '../../../../../hooks/accounts/useEVMAccount.js';
@@ -11,12 +11,24 @@ const TopSaleCard = ({ sale, position }) => {
     const receivedUsdAmount = (sale?.payout ?? 0) * (sale?.payoutTokenPrice ?? 0);
     const discount = 100 - ((sale?.dollarValue ?? 0) * 100) / receivedUsdAmount;
     const borderColor = ['2px solid #E6C7B180', '2px solid #D5CDE480', '2px solid #D2B0BA80'];
-    const sizeClasses = [
-        'ape:w-[60px] ape:h-[60px] ape:md:w-[225px] ape:md:h-[225px]',
-        'ape:w-[60px] ape:h-[60px] ape:md:w-[200px] ape:md:h-[200px]',
-        'ape:w-[60px] ape:h-[60px] ape:md:w-[200px] ape:md:h-[200px]',
+    const size = [
+        ['60px', '60px', '60px', '225px'],
+        ['60px', '60px', '60px', '200px'],
+        ['60px', '60px', '60px', '200px'],
     ];
-    return (jsxs(Flex, { className: "ape:w-full ape:p-[20px] ape:rounded-normal ape:relative ape:overflow-hidden", style: { border: borderColor[position - 1], backgroundImage: 'url(/images/singleBondPage/background.png)' }, children: [jsxs(Flex, { className: "ape:w-full ape:md:w-[180px] ape:flex-col", children: [jsxs(Flex, { children: [jsx(Flex, { className: "ape:w-[30px] ape:h-[30px] ape:justify-center ape:items-center ape:rounded-[50px]", style: { background: 'linear-gradient(90deg, #AA80F9 0%, #6165D7 100%)' }, children: position }), jsxs(Flex, { className: "ape:flex-col ape:ml-[10px]", children: [jsx(Flex, { className: "ape:text-[10px]", style: { color: 'var(--ape-color-text-disabled-button)' }, children: "Buyer" }), jsxs(Flex, { className: "ape:text-[12px] ape:relative", style: { lineHeight: '13px' }, children: [buyer?.slice(0, 4), "...", buyer?.slice(buyer?.length - 4, buyer?.length), isUserTheBuyer && (jsx(Flex, { className: "ape-you-card ape:bg-primary-button ape:rounded-[0px_10px_10px_0px] ape:p-[2.5px_5px] ape:text-[12px] ape:font-normal", style: { lineHeight: '12px' }, children: "You" }))] })] })] }), jsxs(Flex, { className: "ape:mt-[20px] ape:w-full ape:text-[12px] ape:font-normal ape:flex-col", children: [jsxs(Flex, { className: "ape:w-full ape:justify-between", children: [jsx(Flex, { children: "Deposit Amount:" }), jsxs(Flex, { children: ["$", sale?.dollarValue.toFixed(2)] })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between", children: [jsx(Flex, { children: "Payout Amount:" }), jsxs(Flex, { children: ["$", receivedUsdAmount?.toFixed(2)] })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between", children: [jsx(Flex, { children: "Bonus:" }), jsxs(Flex, { style: { color: discount > 0 ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }, children: [discount?.toFixed(2), "%"] })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between", children: [jsx(Flex, { children: "Date:" }), jsx(Flex, { children: formatUTCDate(new Date((sale?.createdAt ?? 0) * 1000)) })] })] })] }), jsx("img", { src: `https://ape.bond/images/singleBondPage/${position}.png`, alt: "ads", className: clsx('ape:object-contain ape:absolute ape:bottom-[unset] ape:md:bottom-[-15px] ape:right-[10px] ape:md:right-[-50px] ape:top-0 ape:md:top-[unset]', sizeClasses[position - 1]) }), jsx(Flex, { className: "ape:absolute ape:w-1/2 ape:right-0 ape:h-full ape:opacity-20", style: { background: '#BF5AC7', filter: 'blur(92px)' } })] }));
+    return (jsxs(Flex, { sx: { ...styles.topSaleCardContainer, border: borderColor[position - 1] }, children: [jsxs(Flex, { sx: { width: ['100%', '100%', '100%', '180px'], flexDirection: 'column' }, children: [jsxs(Flex, { children: [jsx(Flex, { sx: styles.positionNumber, children: position }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '10px' }, children: [jsx(Flex, { sx: { fontSize: '10px', color: 'textDisabledButton' }, children: "Buyer" }), jsxs(Flex, { sx: { fontSize: '12px', lineHeight: '13px', position: 'relative' }, children: [buyer?.slice(0, 4), "...", buyer?.slice(buyer?.length - 4, buyer?.length), isUserTheBuyer && jsx(Flex, { sx: styles.youCard, children: "You" })] })] })] }), jsxs(Flex, { sx: { mt: '20px', width: '100%', fontSize: '12px', fontWeight: 400, flexDirection: 'column' }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx(Flex, { children: "Deposit Amount:" }), jsxs(Flex, { children: ["$", sale?.dollarValue.toFixed(2)] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx(Flex, { children: "Payout Amount:" }), jsxs(Flex, { children: ["$", receivedUsdAmount?.toFixed(2)] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx(Flex, { children: "Bonus:" }), jsxs(Flex, { sx: { color: discount > 0 ? 'success' : 'error' }, children: [discount?.toFixed(2), "%"] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx(Flex, { children: "Date:" }), jsx(Flex, { children: formatUTCDate(new Date((sale?.createdAt ?? 0) * 1000)) })] })] })] }), jsx("img", { src: `https://ape.bond/images/singleBondPage/${position}.png`, alt: "ads", sx: {
+                    width: size[position - 1],
+                    height: size[position - 1],
+                    ...styles.medals,
+                } }), jsx(Flex, { sx: {
+                    position: 'absolute',
+                    width: '50%',
+                    right: '0px',
+                    height: '100%',
+                    background: '#BF5AC7',
+                    opacity: 0.2,
+                    filter: 'blur(92px)',
+                } })] }));
 };
 export { TopSaleCard as default };

package/dist/views/ProjectView/components/BondLeaderboard/components/TopSaleCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TopSaleCard.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/TopSaleCard.tsx"],"sourcesContent":["import React from 'react'\nimport ~~clsx~~ from '~~clsx~~'\nimport Flex from '../../../../../components/uikit-sdk/Flex'\nimport { formatUTCDate } from '../../../../../utils/dates/formatDate'\nimport { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats'\nimport useEVMAccount from '../../../../../hooks/accounts/useEVMAccount'\n\nconst TopSaleCard = ({ sale, position }: { sale?: Sales; position: number }) => {\n const { address: account } = useEVMAccount()\n const buyer = sale?.createdAddressOwner\n const isUserTheBuyer = buyer?.toLowerCase() === account?.toLowerCase()\n const receivedUsdAmount = (sale?.payout ?? 0) * (sale?.payoutTokenPrice ?? 0)\n const discount = 100 - ((sale?.dollarValue ?? 0) * 100) / receivedUsdAmount\n\n const borderColor = ['2px solid #E6C7B180', '2px solid #D5CDE480', '2px solid #D2B0BA80']\n const ~~sizeClasses~~ = [\n '~~ape:w-[~~60px] ~~ape:h-[~~60px] ~~ape:md:w-[225px]~~ ~~ape:md:h-[~~225px]',\n '~~ape:w-[~~60px] ~~ape:h-[~~60px] ~~ape:md:w-[200px]~~ ~~ape:md:h-[~~200px]',\n '~~ape:w-[~~60px] ~~ape:h-[~~60px] ~~ape:md:w-[200px]~~ ~~ape:md:h-[~~200px]',\n ]\n\n return (\n <Flex~~\n className=\"ape:w-full~~ ~~ape:p-[20px] ape:rounded-normal ape:relative ape:overflow-hidden\"\n style~~={{ border: borderColor[position - 1], ~~backgroundImage: 'url(/images/singleBondPage/background.png)'~~ }}\n >\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape:md:w-~~[180px] ~~ape~~:~~flex-col\"~~>\n <Flex>\n <Flex ~~className=\"ape:w-[30px] ape:h-[30px] ape:justify-center ape:items-center ape:rounded-[50px]\" style~~={~~{ background: 'linear-gradient(90deg, #AA80F9 0%, #6165D7 100%)'~~ }~~}>\n~~ {position}\n </Flex>\n <Flex ~~className=\"ape~~:~~flex-col~~ ~~ape~~:~~ml-[~~10px~~]\"~~>\n <Flex ~~className=\"ape:text-[10px]\" style~~={{ ~~color~~: '~~var(--ape-~~color~~-text-disabled-button)~~' }}~~>\n~~ Buyer\n </Flex>\n <Flex ~~className=\"ape:text-[12px] ape:relative\" style~~={{ lineHeight: '13px' }}>\n {buyer?.slice(0, 4)}...\n {buyer?.slice(buyer?.length - 4, buyer?.length)}\n {isUserTheBuyer && ~~(\n~~ <Flex~~\n className=\"ape-you-card~~ ~~ape:bg-primary-button ape:rounded-[0px_10px_10px_0px] ape:p-[2.5px_5px] ape:text-[12px] ape:font-normal\"\n style~~={~~{ lineHeight: '12px'~~ }~~}\n >\n~~ You\n </Flex~~>\n )~~}\n </Flex>\n </Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~mt-[~~20px] ~~ape~~:~~w-full~~ ~~ape~~:~~text-[~~12px] ~~ape~~:~~font-normal~~ ~~ape~~:~~flex-col\"~~>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~justify~~-between\">\n <Flex>Deposit Amount:</Flex>\n <Flex>${sale?.dollarValue.toFixed(2)}</Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~justify~~-between\">\n <Flex>Payout Amount:</Flex>\n <Flex>${receivedUsdAmount?.toFixed(2)}</Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~justify~~-between\">\n <Flex>Bonus:</Flex>\n <Flex ~~style~~={{ color: discount > 0 ? '~~var(--ape-color-~~success)' : '~~var(--ape-color-~~error)' }}~~>\n~~ {discount?.toFixed(2)}~~%\n </~~Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~justify~~-between\">\n <Flex>Date:</Flex>\n <Flex>{formatUTCDate(new Date((sale?.createdAt ?? 0) * 1000))}</Flex>\n </Flex>\n </Flex>\n </Flex>\n <img\n src={`https://ape.bond/images/singleBondPage/${position}.png`}\n alt=\"ads\"\n ~~className~~={~~clsx(~~\n ~~'ape~~:~~object-contain~~ ~~ape:absolute ape:bottom-~~[~~unset]~~ ~~ape:md:bottom~~-~~[-15px]~~ ~~ape:right-[10px~~] ~~ape:md:right-[-50px] ape:top-0 ape:md:top-[unset]'~~,\n ~~sizeClasses~~[position - 1],\n )}\n />\n <Flex\n ~~className=\"ape~~:absolute ~~ape~~:~~w-1/2~~ ~~ape~~:~~right-0~~ ~~ape~~:~~h-full~~ ~~ape:opacity-20\"\~~n ~~style={{~~ background: '#BF5AC7', filter: 'blur(92px)' }}\n />\n </Flex>\n )\n}\n\nexport default TopSaleCard\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAOA,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAsC,KAAI;IAC7E,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;AAC5C,IAAA,MAAM,KAAK,GAAG,IAAI,EAAE,mBAAmB;IACvC,MAAM,cAAc,GAAG,KAAK,EAAE,WAAW,EAAE,KAAK,OAAO,EAAE,WAAW,EAAE;AACtE,IAAA,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,EAAE,gBAAgB,IAAI,CAAC,CAAC;AAC7E,IAAA,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC,IAAI,EAAE,WAAW,IAAI,CAAC,IAAI,GAAG,IAAI,iBAAiB;IAE3E,MAAM,WAAW,GAAG,CAAC,qBAAqB,EAAE,qBAAqB,EAAE,qBAAqB,CAAC;AACzF,IAAA,MAAM,~~WAAW~~,GAAG;~~QAClB~~,~~6DAA6D~~;~~QAC7D~~,~~6DAA6D~~;~~QAC7D~~,~~6DAA6D~~;~~KAC9D~~;AAED,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,~~EACH~~,~~SAAS~~,~~EAAC~~,~~6EAA6E~~,~~EACvF~~,~~KAAK~~,~~EAAE~~,EAAE,MAAM,EAAE,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,~~eAAe~~,EAAE,~~4CAA4C~~,EAAE,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~CAE3GA~~,~~KAAC~~,~~IAAI~~,~~EAAA~~,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~0CAA0C~~,EAAA,QAAA,EAAA,~~CACxDA~~,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~kFAAkF~~,~~EAAC~~,~~KAAK~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~kDAAkD~~,~~EAAE~~,EAAA,~~QAAA~~,~~EACzK~~,~~QAAQ~~,~~EAAA~~,~~CACJ~~,~~EACPD~~,~~IAAA~~,~~CAAC~~,~~IAAI~~,~~IAAC~~,~~SAAS~~,~~EAAC~~,~~4BAA4B,~~EAAA,QAAA,EAAA,~~CAC1CC~~,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~iBAAiB~~,~~EAAC~~,~~KAAK,~~EAAE,EAAE,KAAK,EAAE,~~uCAAuC~~,EAAE,EAAA,QAAA,EAAA,OAAA,EAAA,~~CAEpF~~,~~EACPD~~,IAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~8BAA8B~~,~~EAAC~~,~~KAAK,~~EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,~~aACzE~~,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAA,KAAA,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,EAC9C,cAAc,~~KACbC~~,~~GAAA~~,~~CAAC,~~IAAI,~~IACH~~,~~SAAS,~~EAAC,~~sHAAsH,EAChI,KAAK,~~EAAE,EAAE,~~UAAU~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,EAAA,~~QAAA~~,EAAA,~~KAAA~~,~~EAAA~~,~~CAGxB~~,~~CACR~~,~~CAAA~~,EAAA,~~CACI~~,~~IACF~~,~~CAAA~~,~~EAAA~~,~~CACF~~,~~EACPD~~,~~IAAA~~,~~CAAC~~,~~IAAI~~,~~IAAC~~,~~SAAS~~,~~EAAC~~,~~uEAAuE~~,EAAA,QAAA,EAAA,~~CACrFA~~,~~KAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~gCAAgC~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~CAC9CC~~,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,CAAuB,EAC5BD,~~IAAA~~,~~CAAC,~~IAAI,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,~~CAAA~~,~~EAAA,CAAQ,~~CAAA,EAAA,CACvC,EACPA,KAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~gCAAgC~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~CAC9CC~~,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,CAAsB,EAC3BD,~~IAAA~~,~~CAAC,~~IAAI,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC,~~IAAQ~~,CAAA,EAAA,CACxC,EACPA,IAAA,CAAC,IAAI,IAAC,~~SAAS~~,~~EAAC~~,~~gCAAgC~~,EAAA,QAAA,EAAA,~~CAC9CC~~,~~IAAC~~,IAAI,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EACnBD,IAAA,CAAC,IAAI,~~EAAA~~,~~EAAC~~,~~KAAK,~~EAAE,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,GAAG,~~0BAA0B~~,GAAG,~~wBAAwB~~,EAAE,EAAA,QAAA,EAAA,~~CACzF~~,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,EAAA,~~CAChB~~,CAAA,EAAA,~~CACF~~,EACPA,IAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~gCAAgC~~,~~aAC9CC~~,~~GAAA~~,~~CAAC~~,IAAI,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,EAClBA,~~IAAC~~,IAAI,~~EAAA~~,~~EAAA,QAAA,EAAE,~~aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,EAAA,CAAQ,~~IAChE,~~CAAA,EAAA,~~CACF~~,CAAA,EAAA,CACF,EACPA,~~GAAA~~,~~CAAA,KAAA,EAAA,EACE,~~GAAG,EAAE,CAAA,uCAAA,EAA0C,QAAQ,~~CAAA~~,~~IAAA,CAAM,~~EAC7D,GAAG,EAAC,KAAK,EACT,~~SAAS~~,EAAE,IAAI,~~CACb~~,~~6IAA6I~~,~~EAC7I~~,~~WAAW~~,CAAC,QAAQ,GAAG,CAAC,CAAC,~~CAC1B~~,EAAA,CACD,EACFA,~~IAAC~~,IAAI,EAAA,EACH,~~SAAS~~,~~EAAC~~,~~8DAA8D~~,~~EACxE~~,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,~~EAAE,~~EAAA,~~CACtD~~,CAAA,EAAA,CACG;AAEX;;;;"}
1	+ {"version":3,"file":"TopSaleCard.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/TopSaleCard.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport Flex from '../../../../../components/uikit-sdk/Flex'\nimport { formatUTCDate } from '../../../../../utils/dates/formatDate'\nimport { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats'\nimport useEVMAccount from '../../../../../hooks/accounts/useEVMAccount'\n\nconst TopSaleCard = ({ sale, position }: { sale?: Sales; position: number }) => {\n const { address: account } = useEVMAccount()\n const buyer = sale?.createdAddressOwner\n const isUserTheBuyer = buyer?.toLowerCase() === account?.toLowerCase()\n const receivedUsdAmount = (sale?.payout ?? 0) * (sale?.payoutTokenPrice ?? 0)\n const discount = 100 - ((sale?.dollarValue ?? 0) * 100) / receivedUsdAmount\n\n const borderColor = ['2px solid #E6C7B180', '2px solid #D5CDE480', '2px solid #D2B0BA80']\n const size = [\n ['60px', '60px', '60px', '225px'],\n ['60px', '60px', '60px', '200px'],\n ['60px', '60px', '60px', '200px'],\n ]\n\n return (\n <Flex sx={{ ...styles.topSaleCardContainer, border: borderColor[position - 1] }}>\n <Flex sx={{ width: ['100%', '100%', '100%', '180px'], flexDirection: 'column' }}>\n <Flex>\n <Flex sx={styles.positionNumber}>{position}</Flex>\n <Flex sx={{ flexDirection: 'column', ml: '10px' }}>\n <Flex sx={{ fontSize: '10px', color: 'textDisabledButton' }}>Buyer</Flex>\n <Flex sx={{ fontSize: '12px', lineHeight: '13px', position: 'relative' }}>\n {buyer?.slice(0, 4)}...\n {buyer?.slice(buyer?.length - 4, buyer?.length)}\n {isUserTheBuyer && <Flex sx={styles.youCard}>You</Flex>}\n </Flex>\n </Flex>\n </Flex>\n <Flex sx={{ mt: '20px', width: '100%', fontSize: '12px', fontWeight: 400, flexDirection: 'column' }}>\n <Flex sx={{ width: '100%', justifyContent: 'space-between' }}>\n <Flex>Deposit Amount:</Flex>\n <Flex>${sale?.dollarValue.toFixed(2)}</Flex>\n </Flex>\n <Flex sx={{ width: '100%', justifyContent: 'space-between' }}>\n <Flex>Payout Amount:</Flex>\n <Flex>${receivedUsdAmount?.toFixed(2)}</Flex>\n </Flex>\n <Flex sx={{ width: '100%', justifyContent: 'space-between' }}>\n <Flex>Bonus:</Flex>\n <Flex sx={{ color: discount > 0 ? 'success' : 'error' }}>{discount?.toFixed(2)}%</Flex>\n </Flex>\n <Flex sx={{ width: '100%', justifyContent: 'space-between' }}>\n <Flex>Date:</Flex>\n <Flex>{formatUTCDate(new Date((sale?.createdAt ?? 0) * 1000))}</Flex>\n </Flex>\n </Flex>\n </Flex>\n <img\n src={`https://ape.bond/images/singleBondPage/${position}.png`}\n alt=\"ads\"\n sx={{\n width: size[position - 1],\n height: size[position - 1],\n ...styles.medals,\n }}\n />\n <Flex\n sx={{\n position: 'absolute',\n width: '50%',\n right: '0px',\n height: '100%',\n background: '#BF5AC7',\n opacity: 0.2,\n filter: 'blur(92px)',\n }}\n />\n </Flex>\n )\n}\n\nexport default TopSaleCard\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/ProjectView/components/BondLeaderboard/components/TopThreeSalesCards.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
+import React from 'react';
 import { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats';
 declare const TopThreeSalesCards: ({ topThreeSales }: {
     topThreeSales?: Sales[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TopThreeSalesCards;

package/dist/views/ProjectView/components/BondLeaderboard/components/TopThreeSalesCards.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import TopSaleCard from './TopSaleCard.js';
 import Flex from '../../../../../components/uikit-sdk/Flex/index.js';
 const TopThreeSalesCards = ({ topThreeSales }) => {
-    return (jsx(Flex, { className: "ape:w-full ape:mt-[15px] ape:justify-between", children: jsx(Flex, { className: "ape:w-full", children: topThreeSales && topThreeSales.length > 0 && (jsxs(Fragment, { children: [jsxs(Flex, { className: "ape:w-full ape:hidden ape:md:flex", children: [jsx(Flex, { className: "ape:w-[32%] ape:mt-[15px]", children: topThreeSales[1] && jsx(TopSaleCard, { sale: topThreeSales[1], position: 2 }) }), jsx(Flex, { className: "ape:w-[36%] ape:mx-[20px]", children: topThreeSales[0] && jsx(TopSaleCard, { sale: topThreeSales[0], position: 1 }) }), jsx(Flex, { className: "ape:w-[32%] ape:mt-[15px]", children: topThreeSales[2] && jsx(TopSaleCard, { sale: topThreeSales[2], position: 3 }) })] }), jsxs(Flex, { className: "ape:w-full ape:flex-col ape:flex ape:md:hidden", children: [topThreeSales[0] && jsx(TopSaleCard, { sale: topThreeSales[0], position: 1 }), jsx(Flex, { className: "ape:mt-[10px]", children: topThreeSales[1] && jsx(TopSaleCard, { sale: topThreeSales[1], position: 2 }) }), jsx(Flex, { className: "ape:mt-[10px]", children: topThreeSales[2] && jsx(TopSaleCard, { sale: topThreeSales[2], position: 3 }) })] })] })) }) }));
+    return (jsx(Flex, { sx: { width: '100%', mt: '15px', justifyContent: 'space-between' }, children: jsx(Flex, { sx: { width: '100%' }, children: topThreeSales && topThreeSales.length > 0 && (jsxs(Fragment, { children: [jsxs(Flex, { sx: { width: '100%', display: ['none', 'none', 'none', 'flex'] }, children: [jsx(Flex, { sx: { width: ['32%'], mt: '15px' }, children: topThreeSales[1] && jsx(TopSaleCard, { sale: topThreeSales[1], position: 2 }) }), jsx(Flex, { sx: { width: ['36%'], mx: '20px' }, children: topThreeSales[0] && jsx(TopSaleCard, { sale: topThreeSales[0], position: 1 }) }), jsx(Flex, { sx: { width: ['32%'], mt: '15px' }, children: topThreeSales[2] && jsx(TopSaleCard, { sale: topThreeSales[2], position: 3 }) })] }), jsxs(Flex, { sx: { width: '100%', flexDirection: 'column', display: ['flex', 'flex', 'flex', 'none'] }, children: [topThreeSales[0] && jsx(TopSaleCard, { sale: topThreeSales[0], position: 1 }), jsx(Flex, { sx: { mt: '10px' }, children: topThreeSales[1] && jsx(TopSaleCard, { sale: topThreeSales[1], position: 2 }) }), jsx(Flex, { sx: { mt: '10px' }, children: topThreeSales[2] && jsx(TopSaleCard, { sale: topThreeSales[2], position: 3 }) })] })] })) }) }));
 };
 export { TopThreeSalesCards as default };

package/dist/views/ProjectView/components/BondLeaderboard/components/TopThreeSalesCards.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TopThreeSalesCards.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/TopThreeSalesCards.tsx"],"sourcesContent":["import React from 'react'\nimport TopSaleCard from './TopSaleCard'\nimport Flex from '../../../../../components/uikit-sdk/Flex'\nimport { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats'\n\nconst TopThreeSalesCards = ({ topThreeSales }: { topThreeSales?: Sales[] }) => {\n return (\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~mt-[~~15px] ~~ape~~:~~justify~~-between\">\n <Flex ~~className=\"ape~~:~~w-full\"~~>\n {topThreeSales && topThreeSales.length > 0 && (\n <>\n {/* DESKTOP /}\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~hidden~~ ~~ape:md:~~flex\">\n <Flex ~~className=\"ape~~:w-[32%] ~~ape~~:~~mt-[~~15px~~]\"~~>\n {topThreeSales[1] && <TopSaleCard sale={topThreeSales[1]} position={2} />}\n </Flex>\n <Flex ~~className=\"ape~~:w-[36%] ~~ape~~:~~mx-[~~20px~~]\"~~>\n {topThreeSales[0] && <TopSaleCard sale={topThreeSales[0]} position={1} />}\n </Flex>\n <Flex ~~className=\"ape~~:w-[32%] ~~ape~~:~~mt-[~~15px~~]\"~~>\n {topThreeSales[2] && <TopSaleCard sale={topThreeSales[2]} position={3} />}\n </Flex>\n </Flex>\n {/ MOBILE */}\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~flex-col~~ ~~ape~~:flex ~~ape:md:hidden\"~~>\n {topThreeSales[0] && <TopSaleCard sale={topThreeSales[0]} position={1} />}\n <Flex ~~className=\"ape~~:~~mt-[~~10px~~]\"~~>\n {topThreeSales[1] && <TopSaleCard sale={topThreeSales[1]} position={2} />}\n </Flex>\n <Flex ~~className=\"ape~~:~~mt-[~~10px~~]\"~~>\n {topThreeSales[2] && <TopSaleCard sale={topThreeSales[2]} position={3} />}\n </Flex>\n </Flex>\n </>\n )}\n </Flex>\n </Flex>\n )\n}\n\nexport default TopThreeSalesCards\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAKA,MAAM,kBAAkB,GAAG,CAAC,EAAE,aAAa,EAA+B,KAAI;~~IAC5E~~,QACEA,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~8CAA8C~~,EAAA,QAAA,~~EAC5DA~~,GAAA,CAAC,IAAI,~~EAAA~~,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~YAAY~~,~~YACzB~~,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,KACxCC,~~4BAEEA,~~IAAA,~~CAAC~~,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~mCAAmC~~,EAAA,QAAA,EAAA,~~CACjDD~~,~~GAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~2BAA2B~~,EAAA,QAAA,~~EACxC~~,aAAa,CAAC,CAAC,CAAC,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EAAA,CACpE,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~2BAA2B~~,~~YACxC~~,aAAa,CAAC,CAAC,CAAC,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EAAA,CACpE,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~2BAA2B~~,EAAA,QAAA,~~EACxC~~,aAAa,CAAC,CAAC,CAAC,IAAIA,~~GAAA~~,~~CAAC,~~WAAW,~~IAAC~~,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EAAA,~~CACpE~~,~~IACF,~~EAEPC,IAAA,CAAC,IAAI,~~EAAA~~,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~gDAAgD~~,EAAA,QAAA,EAAA,~~CAC7D~~,aAAa,CAAC,CAAC,CAAC,IAAID,GAAA,CAAC,WAAW,~~IAAC~~,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EACzEA,~~IAAC~~,IAAI,~~EAAA~~,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~eAAe~~,EAAA,QAAA,~~EAC5B~~,aAAa,CAAC,CAAC,CAAC,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,GACpE,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~eAAe~~,EAAA,QAAA,~~EAC5B~~,aAAa,CAAC,CAAC,CAAC,IAAIA,GAAA,CAAC,WAAW,~~IAAC~~,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EAAA,CACpE,CAAA,EAAA,~~CACF~~,~~IACN,~~CACJ,EAAA,CACI,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"TopThreeSalesCards.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/TopThreeSalesCards.tsx"],"sourcesContent":["import React from 'react'\nimport TopSaleCard from './TopSaleCard'\nimport Flex from '../../../../../components/uikit-sdk/Flex'\nimport { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats'\n\nconst TopThreeSalesCards = ({ topThreeSales }: { topThreeSales?: Sales[] }) => {\n return (\n <Flex sx={{ width: '100%', mt: '15px', justifyContent: 'space-between' }}>\n <Flex sx={{ width: '100%' }}>\n {topThreeSales && topThreeSales.length > 0 && (\n <>\n {/* DESKTOP /}\n <Flex sx={{ width: '100%', display: ['none', 'none', 'none', 'flex'] }}>\n <Flex sx={{ width: ['32%'], mt: '15px' }}>\n {topThreeSales[1] && <TopSaleCard sale={topThreeSales[1]} position={2} />}\n </Flex>\n <Flex sx={{ width: ['36%'], mx: '20px' }}>\n {topThreeSales[0] && <TopSaleCard sale={topThreeSales[0]} position={1} />}\n </Flex>\n <Flex sx={{ width: ['32%'], mt: '15px' }}>\n {topThreeSales[2] && <TopSaleCard sale={topThreeSales[2]} position={3} />}\n </Flex>\n </Flex>\n {/ MOBILE */}\n <Flex sx={{ width: '100%', flexDirection: 'column', display: ['flex', 'flex', 'flex', 'none'] }}>\n {topThreeSales[0] && <TopSaleCard sale={topThreeSales[0]} position={1} />}\n <Flex sx={{ mt: '10px' }}>\n {topThreeSales[1] && <TopSaleCard sale={topThreeSales[1]} position={2} />}\n </Flex>\n <Flex sx={{ mt: '10px' }}>\n {topThreeSales[2] && <TopSaleCard sale={topThreeSales[2]} position={3} />}\n </Flex>\n </Flex>\n </>\n )}\n </Flex>\n </Flex>\n )\n}\n\nexport default TopThreeSalesCards\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;AAKA,MAAM,kBAAkB,GAAG,CAAC,EAAE,aAAa,EAA+B,KAAI;AAC5E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,EAAA,QAAA,EACtEA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EACxB,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,KACxCC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAEED,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CACpED,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACrC,aAAa,CAAC,CAAC,CAAC,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EAAA,CACpE,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACrC,aAAa,CAAC,CAAC,CAAC,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EAAA,CACpE,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACrC,aAAa,CAAC,CAAC,CAAC,IAAIA,IAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,GACpE,CAAA,EAAA,CACF,EAEPC,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CAC5F,aAAa,CAAC,CAAC,CAAC,IAAID,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EACzEA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACrB,aAAa,CAAC,CAAC,CAAC,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,GACpE,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACrB,aAAa,CAAC,CAAC,CAAC,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAA,CAAI,EAAA,CACpE,IACF,CAAA,EAAA,CACN,CACJ,EAAA,CACI,EAAA,CACF;AAEX;;;;"}

package/dist/views/ProjectView/components/BondLeaderboard/components/styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ThemeUIStyleObject } from 'theme-ui';
2	+ export declare const styles: Record<'topSaleCardContainer' \| 'positionNumber' \| 'youCard' \| 'medals', ThemeUIStyleObject>;

package/dist/views/ProjectView/components/BondLeaderboard/components/styles.js ADDED Viewed

@@ -0,0 +1,51 @@
+const styles = {
+    topSaleCardContainer: {
+        width: '100%',
+        p: '20px',
+        borderRadius: 'normal',
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundImage: 'url(/images/singleBondPage/background.png)',
+    },
+    positionNumber: {
+        width: '30px',
+        height: '30px',
+        background: 'linear-gradient(90deg, #AA80F9 0%, #6165D7 100%)',
+        borderRadius: '50px',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    youCard: {
+        background: 'primaryButton',
+        borderRadius: '0px 10px 10px 0px',
+        p: '2.5px 5px',
+        position: 'absolute',
+        right: '-45px',
+        top: '0px',
+        fontSize: '12px',
+        fontWeight: 400,
+        lineHeight: '12px',
+        '&:before': {
+            content: '""',
+            display: 'block',
+            height: 0,
+            width: 0,
+            position: 'absolute',
+            top: '50%',
+            right: 'calc(100% - 0px)',
+            border: '9px solid transparent',
+            borderRightColor: 'primaryButton',
+            transform: 'translateY(-50%)',
+        },
+    },
+    medals: {
+        objectFit: 'contain',
+        position: 'absolute',
+        bottom: ['unset', 'unset', 'unset', '-15px'],
+        right: ['10px', '10px', '10px', '-50px'],
+        top: ['0px', '0px', '0px', 'unset'],
+    },
+};
+export { styles };
+//# sourceMappingURL=styles.js.map

package/dist/views/ProjectView/components/BondLeaderboard/components/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<'topSaleCardContainer' | 'positionNumber' | 'youCard' | 'medals', ThemeUIStyleObject> = {\n topSaleCardContainer: {\n width: '100%',\n p: '20px',\n borderRadius: 'normal',\n position: 'relative',\n overflow: 'hidden',\n backgroundImage: 'url(/images/singleBondPage/background.png)',\n },\n positionNumber: {\n width: '30px',\n height: '30px',\n background: 'linear-gradient(90deg, #AA80F9 0%, #6165D7 100%)',\n borderRadius: '50px',\n justifyContent: 'center',\n alignItems: 'center',\n },\n youCard: {\n background: 'primaryButton',\n borderRadius: '0px 10px 10px 0px',\n p: '2.5px 5px',\n position: 'absolute',\n right: '-45px',\n top: '0px',\n fontSize: '12px',\n fontWeight: 400,\n lineHeight: '12px',\n '&:before': {\n content: '\"\"',\n display: 'block',\n height: 0,\n width: 0,\n position: 'absolute',\n top: '50%',\n right: 'calc(100% - 0px)',\n border: '9px solid transparent',\n borderRightColor: 'primaryButton',\n transform: 'translateY(-50%)',\n },\n },\n medals: {\n objectFit: 'contain',\n position: 'absolute',\n bottom: ['unset', 'unset', 'unset', '-15px'],\n right: ['10px', '10px', '10px', '-50px'],\n top: ['0px', '0px', '0px', 'unset'],\n },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAAiG;AAClH,IAAA,oBAAoB,EAAE;AACpB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,CAAC,EAAE,MAAM;AACT,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,eAAe,EAAE,4CAA4C;AAC9D,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,UAAU,EAAE,kDAAkD;AAC9D,QAAA,YAAY,EAAE,MAAM;AACpB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,UAAU,EAAE,eAAe;AAC3B,QAAA,YAAY,EAAE,mBAAmB;AACjC,QAAA,CAAC,EAAE,WAAW;AACd,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,UAAU,EAAE,MAAM;AAClB,QAAA,UAAU,EAAE;AACV,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,MAAM,EAAE,uBAAuB;AAC/B,YAAA,gBAAgB,EAAE,eAAe;AACjC,YAAA,SAAS,EAAE,kBAAkB;AAC9B,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;QAC5C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;QACxC,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC;AACpC,KAAA;;;;;"}

package/dist/views/ProjectView/components/BondLeaderboard/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
+import React from 'react';
 import { BondsData } from '../../../../types/bonds';
 declare const BondLeaderboard: ({ selectedBond }: {
     selectedBond?: BondsData;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default BondLeaderboard;

package/dist/views/ProjectView/components/BondLeaderboard/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import TopThreeSalesCards from './components/TopThreeSalesCards.js';
 import SalesTable from './components/SalesTable.js';
 import useGetBondApiStats from '../../../../state/bondApiStats/useGetBondApiStats.js';
@@ -11,7 +11,19 @@ const BondLeaderboard = ({ selectedBond }) => {
     const sortedSales = filteredSales?.sort((a, b) => b.dollarValue - a.dollarValue);
     const topThreeSales = sortedSales?.slice(0, 3);
     const allSales = sortedSales?.slice(3, 15);
-    return (jsx(Flex, { className: "ape:w-full ape:flex-col ape:p-[20px] ape:rounded-normal ape:bg-white2", children: filteredSales && filteredSales.length > 0 ? (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:text-[22px]", children: "Bond Leaderboard" }), jsx(TopThreeSalesCards, { topThreeSales: topThreeSales }), jsx(Flex, { className: "ape:overflow-x-auto ape:md:overflow-x-[unset] ape:[&::-webkit-scrollbar]:h-[5px]", children: allSales && allSales?.length > 0 && jsx(SalesTable, { allSales: allSales }) })] })) : (jsxs(Flex, { className: "ape:w-full ape:h-[300px] ape:justify-center ape:items-center ape:flex-col", children: [jsx(PlaceholderMonkey, {}), jsx(Flex, { className: "ape:mt-[15px]", children: "No sales yet" })] })) }));
+    return (jsx(Flex, { sx: {
+            width: '100%',
+            flexDirection: 'column',
+            p: '20px',
+            borderRadius: 'normal',
+            background: 'white2',
+        }, children: filteredSales && filteredSales.length > 0 ? (jsxs(Fragment, { children: [jsx(Flex, { sx: { fontSize: '22px' }, children: "Bond Leaderboard" }), jsx(TopThreeSalesCards, { topThreeSales: topThreeSales }), jsx(Flex, { sx: { overflowX: ['auto', 'auto', 'auto', 'unset'], '&::-webkit-scrollbar': { height: '5px' } }, children: allSales && allSales?.length > 0 && jsx(SalesTable, { allSales: allSales }) })] })) : (jsxs(Flex, { sx: {
+                width: '100%',
+                height: '300px',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flexDirection: 'column',
+            }, children: [jsx(PlaceholderMonkey, {}), jsx(Flex, { sx: { mt: '15px' }, children: "No sales yet" })] })) }));
 };
 export { BondLeaderboard as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/BondLeaderboard/index.tsx"],"sourcesContent":["import React from 'react'\nimport TopThreeSalesCards from './components/TopThreeSalesCards'\nimport SalesTable from './components/SalesTable'\nimport { BondsData } from '../../../../types/bonds'\nimport useGetBondApiStats from '../../../../state/bondApiStats/useGetBondApiStats'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport PlaceholderMonkey from '../../../../components/uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst BondLeaderboard = ({ selectedBond }: { selectedBond?: BondsData }) => {\n const { data: bondStats } = useGetBondApiStats(selectedBond?.contractAddress?.[selectedBond?.chainId])\n const filteredSales = bondStats?.Sales?.filter((sale) => sale.dollarValue > 1)\n const sortedSales = filteredSales?.sort((a, b) => b.dollarValue - a.dollarValue)\n\n const topThreeSales = sortedSales?.slice(0, 3)\n\n const allSales = sortedSales?.slice(3, 15)\n\n return (\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~flex-col~~ ~~ape~~:~~p-[20px]~~ ~~ape~~:~~rounded-normal~~ ~~ape:bg-~~white2\">\n {filteredSales && filteredSales.length > 0 ? (\n <>\n <Flex ~~className=\"ape~~:~~text-[~~22px~~]\"~~>Bond Leaderboard</Flex>\n <TopThreeSalesCards topThreeSales={topThreeSales} />\n <Flex ~~className=\"ape~~:~~overflow-x-~~auto ~~ape:md:overflow-x-[~~unset] ~~ape:[~~&::-webkit-scrollbar]:~~h-[~~5px~~]\"~~>\n {allSales && allSales?.length > 0 && <SalesTable allSales={allSales} />}\n </Flex>\n </>\n ) : (\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~h-[300px]~~ ~~ape~~:~~justify-~~center ~~ape~~:~~items-center~~ ~~ape:flex-col~~\">\n <PlaceholderMonkey />\n <Flex ~~className=\"ape~~:~~mt-[~~15px~~]\"~~>No sales yet</Flex>\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default BondLeaderboard\n"],"names":["_jsx","_jsxs"~~,"_Fragment"~~],"mappings":";;;;;;;AAQA,MAAM,eAAe,GAAG,CAAC,EAAE,YAAY,EAAgC,KAAI;AACzE,IAAA,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,kBAAkB,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,EAAE,OAAO,CAAC,CAAC;AACtG,IAAA,MAAM,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IAC9E,MAAM,WAAW,GAAG,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,WAAW,CAAC;IAEhF,MAAM,aAAa,GAAG,WAAW,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAE9C,MAAM,QAAQ,GAAG,WAAW,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;AAE1C,IAAA,QACEA,GAAA,CAAC,IAAI,~~IAAC~~,~~SAAS~~,~~EAAC~~,~~uEAAuE~~,~~EAAA~~,~~QAAA~~,~~EACpF~~,~~aAAa~~,~~IAAI~~,aAAa,CAAC,MAAM,~~GAAG~~,~~CAAC~~,~~IACxCC~~,~~IAAA~~,~~CAAAC~~,~~QAAA~~,~~EAAA~~,EAAA,QAAA,~~EAAA~~,~~CACEF~~,GAAA,CAAC,IAAI,IAAC,~~SAAS~~,~~EAAC~~,~~iBAAiB~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~kBAAA~~,~~EAAA~~,~~CAAwB~~,~~EACzDA~~,~~IAAC~~,kBAAkB,EAAA,EAAC,aAAa,EAAE,aAAa,~~GAAI~~,EACpDA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,~~EAAC~~,~~kFAAkF~~,~~EAAA~~,~~QAAA~~,~~EAC/F~~,QAAQ,IAAI,QAAQ,EAAE,MAAM,GAAG,CAAC,IAAIA,~~IAAC~~,UAAU,~~EAAA~~,~~EAAC,~~QAAQ,EAAE,QAAQ,~~GAAI~~,EAAA,CAClE,~~CAAA~~,EAAA,~~CACN~~,~~KAEHC~~,~~IAAA~~,~~CAAC~~,~~IAAI~~,~~EAAA~~,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~2EAA2E~~,~~aACzFD~~,~~GAAA~~,~~CAAC~~,iBAAiB,~~KAAG~~,EACrBA,GAAA,CAAC,IAAI,~~EAAA~~,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~eAAe~~,EAAA,QAAA,EAAA,cAAA,EAAA,~~CAAoB~~,~~IAC9C~~,CACR,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/BondLeaderboard/index.tsx"],"sourcesContent":["import React from 'react'\nimport TopThreeSalesCards from './components/TopThreeSalesCards'\nimport SalesTable from './components/SalesTable'\nimport { BondsData } from '../../../../types/bonds'\nimport useGetBondApiStats from '../../../../state/bondApiStats/useGetBondApiStats'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport PlaceholderMonkey from '../../../../components/uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst BondLeaderboard = ({ selectedBond }: { selectedBond?: BondsData }) => {\n const { data: bondStats } = useGetBondApiStats(selectedBond?.contractAddress?.[selectedBond?.chainId])\n const filteredSales = bondStats?.Sales?.filter((sale) => sale.dollarValue > 1)\n const sortedSales = filteredSales?.sort((a, b) => b.dollarValue - a.dollarValue)\n\n const topThreeSales = sortedSales?.slice(0, 3)\n\n const allSales = sortedSales?.slice(3, 15)\n\n return (\n <Flex\n sx={{\n width: '100%',\n flexDirection: 'column',\n p: '20px',\n borderRadius: 'normal',\n background: 'white2',\n }}\n >\n {filteredSales && filteredSales.length > 0 ? (\n <>\n <Flex sx={{ fontSize: '22px' }}>Bond Leaderboard</Flex>\n <TopThreeSalesCards topThreeSales={topThreeSales} />\n <Flex sx={{ overflowX: ['auto', 'auto', 'auto', 'unset'], '&::-webkit-scrollbar': { height: '5px' } }}>\n {allSales && allSales?.length > 0 && <SalesTable allSales={allSales} />}\n </Flex>\n </>\n ) : (\n <Flex\n sx={{\n width: '100%',\n height: '300px',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n }}\n >\n <PlaceholderMonkey />\n <Flex sx={{ mt: '15px' }}>No sales yet</Flex>\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default BondLeaderboard\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;AAQA,MAAM,eAAe,GAAG,CAAC,EAAE,YAAY,EAAgC,KAAI;AACzE,IAAA,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,kBAAkB,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,EAAE,OAAO,CAAC,CAAC;AACtG,IAAA,MAAM,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IAC9E,MAAM,WAAW,GAAG,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,WAAW,CAAC;IAEhF,MAAM,aAAa,GAAG,WAAW,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAE9C,MAAM,QAAQ,GAAG,WAAW,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;AAE1C,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,CAAC,EAAE,MAAM;AACT,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,UAAU,EAAE,QAAQ;AACrB,SAAA,EAAA,QAAA,EAEA,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,IACxCC,4BACED,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,iCAAyB,EACvDA,GAAA,CAAC,kBAAkB,EAAA,EAAC,aAAa,EAAE,aAAa,EAAA,CAAI,EACpDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,sBAAsB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,YAClG,QAAQ,IAAI,QAAQ,EAAE,MAAM,GAAG,CAAC,IAAIA,GAAA,CAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAA,CAAI,EAAA,CAClE,IACN,KAEHC,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,MAAM,EAAE,OAAO;AACf,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,aAAa,EAAE,QAAQ;AACxB,aAAA,EAAA,QAAA,EAAA,CAEDD,IAAC,iBAAiB,EAAA,EAAA,CAAG,EACrBA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,cAAA,EAAA,CAAqB,IACxC,CACR,EAAA,CACI;AAEX;;;;"}

package/dist/views/ProjectView/components/BondStats/LineChart.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useRef, useState, useMemo } from 'react';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
@@ -124,18 +124,24 @@ const LineChart = ({ labels, data, color = '#6560C5', valueLabel, strokeWidth =
         setHoverIndex(nearestIndex);
     };
     const hoverPoint = hoverIndex !== null ? points[hoverIndex] : null;
-    return (jsxs(Flex, { className: "ape:w-full ape:h-full ape:relative", children: [jsxs("svg", { ref: svgRef, viewBox: `0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`, width: "100%", height: "100%", preserveAspectRatio: "none", onPointerMove: handlePointerMove, onPointerLeave: () => setHoverIndex(null), style: { overflow: 'visible' }, children: [yTicks.map((tick) => {
+    return (jsxs(Flex, { sx: { width: '100%', height: '100%', position: 'relative' }, children: [jsxs("svg", { ref: svgRef, viewBox: `0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`, width: "100%", height: "100%", preserveAspectRatio: "none", onPointerMove: handlePointerMove, onPointerLeave: () => setHoverIndex(null), style: { overflow: 'visible' }, children: [yTicks.map((tick) => {
                         const y = PADDING_TOP +
                             plotHeight -
                             (yTicks[yTicks.length - 1] > 0 ? (tick / yTicks[yTicks.length - 1]) * plotHeight : 0);
                         return (jsxs("g", { children: [jsx("line", { x1: PADDING_LEFT, x2: PADDING_LEFT + plotWidth, y1: y, y2: y, stroke: "rgba(250, 250, 250, 0.1)", strokeWidth: 1 }), jsx("text", { x: PADDING_LEFT - 10, y: y, textAnchor: "end", dominantBaseline: "middle", fontSize: 13, fontWeight: 400, fill: "rgba(250, 250, 250, 0.5)", children: tick.toLocaleString() })] }, `y-${tick}`));
-                    }), points.map((point, i) => (jsxs("g", { children: [jsx("line", { x1: point.x, x2: point.x, y1: PADDING_TOP, y2: PADDING_TOP + plotHeight, stroke: "rgba(250, 250, 250, 0.1)", strokeWidth: 1 }), jsx("text", { x: point.x, y: PADDING_TOP + plotHeight + 16, textAnchor: "end", fontSize: 13, fontWeight: 400, fill: "rgba(250, 250, 250, 0.5)", transform: `rotate(-40 ${point.x} ${PADDING_TOP + plotHeight + 16})`, children: labels[i] })] }, `x-${labels[i]}`))), jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }), hoverPoint && (jsxs("g", { children: [jsx("line", { x1: hoverPoint.x, x2: hoverPoint.x, y1: PADDING_TOP, y2: PADDING_TOP + plotHeight, stroke: "rgba(250, 250, 250, 0.35)", strokeWidth: 1 }), jsx("circle", { cx: hoverPoint.x, cy: hoverPoint.y, r: 5, fill: color, stroke: "#16161d", strokeWidth: 2 })] }))] }), hoverPoint && hoverIndex !== null && (jsxs(Flex, { className: "ape:absolute ape:flex-col ape:rounded-[6px] ape:p-[8px_10px] ape:pointer-events-none ape:whitespace-nowrap", style: {
+                    }), points.map((point, i) => (jsxs("g", { children: [jsx("line", { x1: point.x, x2: point.x, y1: PADDING_TOP, y2: PADDING_TOP + plotHeight, stroke: "rgba(250, 250, 250, 0.1)", strokeWidth: 1 }), jsx("text", { x: point.x, y: PADDING_TOP + plotHeight + 16, textAnchor: "end", fontSize: 13, fontWeight: 400, fill: "rgba(250, 250, 250, 0.5)", transform: `rotate(-40 ${point.x} ${PADDING_TOP + plotHeight + 16})`, children: labels[i] })] }, `x-${labels[i]}`))), jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }), hoverPoint && (jsxs("g", { children: [jsx("line", { x1: hoverPoint.x, x2: hoverPoint.x, y1: PADDING_TOP, y2: PADDING_TOP + plotHeight, stroke: "rgba(250, 250, 250, 0.35)", strokeWidth: 1 }), jsx("circle", { cx: hoverPoint.x, cy: hoverPoint.y, r: 5, fill: color, stroke: "#16161d", strokeWidth: 2 })] }))] }), hoverPoint && hoverIndex !== null && (jsxs(Flex, { sx: {
+                    position: 'absolute',
                     top: `${(hoverPoint.y / VIEW_HEIGHT) * 100}%`,
                     left: `${(hoverPoint.x / VIEW_WIDTH) * 100}%`,
                     transform: hoverPoint.y < VIEW_HEIGHT / 3 ? 'translate(-50%, 12px)' : 'translate(-50%, calc(-100% - 12px))',
+                    flexDirection: 'column',
                     background: '#0d0d13',
                     border: '1px solid rgba(250, 250, 250, 0.1)',
-                }, children: [jsx(Flex, { className: "ape:text-[11px]", style: { color: 'rgba(250, 250, 250, 0.5)' }, children: labels[hoverIndex] }), jsxs(Flex, { className: "ape:text-[13px] ape:font-semibold ape:items-center", style: { color: '#f6f6f6' }, children: [jsx(Flex, { as: "span", className: "ape:w-[8px] ape:h-[2px] ape:mr-[6px]", style: { background: color } }), valueLabel.endsWith('$')
+                    borderRadius: '6px',
+                    p: '8px 10px',
+                    pointerEvents: 'none',
+                    whiteSpace: 'nowrap',
+                }, children: [jsx(Flex, { sx: { fontSize: '11px', color: 'rgba(250, 250, 250, 0.5)' }, children: labels[hoverIndex] }), jsxs(Flex, { sx: { fontSize: '13px', fontWeight: 600, color: '#f6f6f6', alignItems: 'center' }, children: [jsx(Flex, { as: "span", sx: { width: '8px', height: '2px', background: color, mr: '6px' } }), valueLabel.endsWith('$')
                                 ? `${valueLabel}${data[hoverIndex]?.toLocaleString()}`
                                 : `${valueLabel}: ${data[hoverIndex]?.toLocaleString()}`] })] }))] }));
 };