@ape.swap/bonds-sdk 6.2.13 → 6.2.14

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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()}`] })] }))] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../../../src/views/ProjectView/components/BondStats/LineChart.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\n\ninterface Point {\n  x: number\n  y: number\n}\n\ninterface LineChartProps {\n  labels: string[]\n  data: number[]\n  color?: string\n  valueLabel: string\n  strokeWidth?: number\n}\n\nconst VIEW_WIDTH = 1000\nconst VIEW_HEIGHT = 400\nconst PADDING_LEFT = 44\nconst PADDING_RIGHT = 12\nconst PADDING_TOP = 12\nconst PADDING_BOTTOM = 56\nconst TENSION = 0.4\nconst DEFAULT_STROKE_WIDTH = 4\n\nfunction niceNumber(value: number, round: boolean): number {\n  if (value === 0) return 0\n  const exponent = Math.floor(Math.log10(value))\n  const fraction = value / Math.pow(10, exponent)\n  let niceFraction: number\n\n  if (round) {\n    if (fraction < 1.5) niceFraction = 1\n    else if (fraction < 3) niceFraction = 2\n    else if (fraction < 7) niceFraction = 5\n    else niceFraction = 10\n  } else {\n    if (fraction <= 1) niceFraction = 1\n    else if (fraction <= 2) niceFraction = 2\n    else if (fraction <= 5) niceFraction = 5\n    else niceFraction = 10\n  }\n\n  return niceFraction * Math.pow(10, exponent)\n}\n\nfunction niceScale(max: number, maxTicks = 7) {\n  if (max <= 0) return { max: 10, step: 2 }\n  const range = niceNumber(max, false)\n  const step = niceNumber(range / (maxTicks - 1), true)\n  const niceMax = Math.ceil(max / step) * step\n  return { max: niceMax, step }\n}\n\n// Mirrors Chart.js's own `splineCurve` so the interpolated line matches the\n// previous chart.js render pixel-for-pixel in shape.\nfunction splineControlPoints(prev: Point, cur: Point, next: Point, tension: number) {\n  const d01 = Math.hypot(cur.x - prev.x, cur.y - prev.y)\n  const d12 = Math.hypot(next.x - cur.x, next.y - cur.y)\n\n  let s01 = d01 / (d01 + d12)\n  let s12 = d12 / (d01 + d12)\n  s01 = isNaN(s01) ? 0 : s01\n  s12 = isNaN(s12) ? 0 : s12\n\n  const fa = tension * s01\n  const fb = tension * s12\n\n  return {\n    previous: { x: cur.x - fa * (next.x - prev.x), y: cur.y - fa * (next.y - prev.y) },\n    next: { x: cur.x + fb * (next.x - prev.x), y: cur.y + fb * (next.y - prev.y) },\n  }\n}\n\n// Catmull-Rom control points can overshoot past the points they're smoothing between\n// (that's what gives the curve its roundness) - clamping keeps that overshoot from\n// pushing the line past the axes (e.g. below the zero baseline) while keeping it\n// visually continuous, instead of letting it run past the bounds and clipping it away.\nfunction clampPoint(point: Point, minY: number, maxY: number): Point {\n  return { x: point.x, y: Math.min(Math.max(point.y, minY), maxY) }\n}\n\nfunction buildSmoothPath(points: Point[], minY: number, maxY: number): string {\n  if (points.length === 0) return ''\n  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`\n\n  const controls = points.map((point, i) => {\n    const prev = points[i - 1] ?? point\n    const next = points[i + 1] ?? point\n    return splineControlPoints(prev, point, next, TENSION)\n  })\n\n  let path = `M ${points[0].x} ${points[0].y}`\n  for (let i = 1; i < points.length; i++) {\n    const cp1 = clampPoint(controls[i - 1].next, minY, maxY)\n    const cp2 = clampPoint(controls[i].previous, minY, maxY)\n    path += ` C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${points[i].x} ${points[i].y}`\n  }\n  return path\n}\n\nconst LineChart: React.FC<LineChartProps> = ({\n  labels,\n  data,\n  color = '#6560C5',\n  valueLabel,\n  strokeWidth = DEFAULT_STROKE_WIDTH,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null)\n  const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n\n  const { points, yTicks, plotWidth, plotHeight } = useMemo(() => {\n    const plotWidth = VIEW_WIDTH - PADDING_LEFT - PADDING_RIGHT\n    const plotHeight = VIEW_HEIGHT - PADDING_TOP - PADDING_BOTTOM\n    const maxValue = data.length ? Math.max(...data) : 0\n    const { max, step } = niceScale(maxValue)\n\n    const yTicks: number[] = []\n    for (let value = 0; value <= max; value += step) {\n      yTicks.push(value)\n    }\n\n    const points: Point[] = data.map((value, i) => {\n      const x = PADDING_LEFT + (data.length > 1 ? (i / (data.length - 1)) * plotWidth : plotWidth / 2)\n      const y = PADDING_TOP + plotHeight - (max > 0 ? (value / max) * plotHeight : 0)\n      return { x, y }\n    })\n\n    return { points, yTicks, plotWidth, plotHeight }\n  }, [data])\n\n  const linePath = useMemo(() => buildSmoothPath(points, PADDING_TOP, PADDING_TOP + plotHeight), [points, plotHeight])\n\n  const handlePointerMove = (event: React.PointerEvent<SVGSVGElement>) => {\n    if (!svgRef.current || points.length === 0) return\n    const rect = svgRef.current.getBoundingClientRect()\n    const relativeX = ((event.clientX - rect.left) / rect.width) * VIEW_WIDTH\n\n    let nearestIndex = 0\n    let nearestDistance = Infinity\n    points.forEach((point, i) => {\n      const distance = Math.abs(point.x - relativeX)\n      if (distance < nearestDistance) {\n        nearestDistance = distance\n        nearestIndex = i\n      }\n    })\n    setHoverIndex(nearestIndex)\n  }\n\n  const hoverPoint = hoverIndex !== null ? points[hoverIndex] : null\n\n  return (\n    <Flex className=\"ape:w-full ape:h-full ape:relative\">\n      <svg\n        ref={svgRef}\n        viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`}\n        width=\"100%\"\n        height=\"100%\"\n        preserveAspectRatio=\"none\"\n        onPointerMove={handlePointerMove}\n        onPointerLeave={() => setHoverIndex(null)}\n        style={{ overflow: 'visible' }}\n      >\n        {/* Horizontal grid + y-axis labels */}\n        {yTicks.map((tick) => {\n          const y =\n            PADDING_TOP +\n            plotHeight -\n            (yTicks[yTicks.length - 1] > 0 ? (tick / yTicks[yTicks.length - 1]) * plotHeight : 0)\n          return (\n            <g key={`y-${tick}`}>\n              <line\n                x1={PADDING_LEFT}\n                x2={PADDING_LEFT + plotWidth}\n                y1={y}\n                y2={y}\n                stroke=\"rgba(250, 250, 250, 0.1)\"\n                strokeWidth={1}\n              />\n              <text\n                x={PADDING_LEFT - 10}\n                y={y}\n                textAnchor=\"end\"\n                dominantBaseline=\"middle\"\n                fontSize={13}\n                fontWeight={400}\n                fill=\"rgba(250, 250, 250, 0.5)\"\n              >\n                {tick.toLocaleString()}\n              </text>\n            </g>\n          )\n        })}\n\n        {/* Vertical grid + x-axis labels */}\n        {points.map((point, i) => (\n          <g key={`x-${labels[i]}`}>\n            <line\n              x1={point.x}\n              x2={point.x}\n              y1={PADDING_TOP}\n              y2={PADDING_TOP + plotHeight}\n              stroke=\"rgba(250, 250, 250, 0.1)\"\n              strokeWidth={1}\n            />\n            <text\n              x={point.x}\n              y={PADDING_TOP + plotHeight + 16}\n              textAnchor=\"end\"\n              fontSize={13}\n              fontWeight={400}\n              fill=\"rgba(250, 250, 250, 0.5)\"\n              transform={`rotate(-40 ${point.x} ${PADDING_TOP + plotHeight + 16})`}\n            >\n              {labels[i]}\n            </text>\n          </g>\n        ))}\n\n        <path\n          d={linePath}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n\n        {hoverPoint && (\n          <g>\n            <line\n              x1={hoverPoint.x}\n              x2={hoverPoint.x}\n              y1={PADDING_TOP}\n              y2={PADDING_TOP + plotHeight}\n              stroke=\"rgba(250, 250, 250, 0.35)\"\n              strokeWidth={1}\n            />\n            <circle cx={hoverPoint.x} cy={hoverPoint.y} r={5} fill={color} stroke=\"#16161d\" strokeWidth={2} />\n          </g>\n        )}\n      </svg>\n\n      {hoverPoint && hoverIndex !== null && (\n        <Flex\n          className=\"ape:absolute ape:flex-col ape:rounded-[6px] ape:p-[8px_10px] ape:pointer-events-none ape:whitespace-nowrap\"\n          style={{\n            top: `${(hoverPoint.y / VIEW_HEIGHT) * 100}%`,\n            left: `${(hoverPoint.x / VIEW_WIDTH) * 100}%`,\n            transform: hoverPoint.y < VIEW_HEIGHT / 3 ? 'translate(-50%, 12px)' : 'translate(-50%, calc(-100% - 12px))',\n            background: '#0d0d13',\n            border: '1px solid rgba(250, 250, 250, 0.1)',\n          }}\n        >\n          <Flex className=\"ape:text-[11px]\" style={{ color: 'rgba(250, 250, 250, 0.5)' }}>\n            {labels[hoverIndex]}\n          </Flex>\n          <Flex className=\"ape:text-[13px] ape:font-semibold ape:items-center\" style={{ color: '#f6f6f6' }}>\n            <Flex as=\"span\" className=\"ape:w-[8px] ape:h-[2px] ape:mr-[6px]\" style={{ background: color }} />\n            {valueLabel.endsWith('$')\n              ? `${valueLabel}${data[hoverIndex]?.toLocaleString()}`\n              : `${valueLabel}: ${data[hoverIndex]?.toLocaleString()}`}\n          </Flex>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default LineChart\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"LineChart.js","sources":["../../../../../src/views/ProjectView/components/BondStats/LineChart.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\n\ninterface Point {\n  x: number\n  y: number\n}\n\ninterface LineChartProps {\n  labels: string[]\n  data: number[]\n  color?: string\n  valueLabel: string\n  strokeWidth?: number\n}\n\nconst VIEW_WIDTH = 1000\nconst VIEW_HEIGHT = 400\nconst PADDING_LEFT = 44\nconst PADDING_RIGHT = 12\nconst PADDING_TOP = 12\nconst PADDING_BOTTOM = 56\nconst TENSION = 0.4\nconst DEFAULT_STROKE_WIDTH = 4\n\nfunction niceNumber(value: number, round: boolean): number {\n  if (value === 0) return 0\n  const exponent = Math.floor(Math.log10(value))\n  const fraction = value / Math.pow(10, exponent)\n  let niceFraction: number\n\n  if (round) {\n    if (fraction < 1.5) niceFraction = 1\n    else if (fraction < 3) niceFraction = 2\n    else if (fraction < 7) niceFraction = 5\n    else niceFraction = 10\n  } else {\n    if (fraction <= 1) niceFraction = 1\n    else if (fraction <= 2) niceFraction = 2\n    else if (fraction <= 5) niceFraction = 5\n    else niceFraction = 10\n  }\n\n  return niceFraction * Math.pow(10, exponent)\n}\n\nfunction niceScale(max: number, maxTicks = 7) {\n  if (max <= 0) return { max: 10, step: 2 }\n  const range = niceNumber(max, false)\n  const step = niceNumber(range / (maxTicks - 1), true)\n  const niceMax = Math.ceil(max / step) * step\n  return { max: niceMax, step }\n}\n\n// Mirrors Chart.js's own `splineCurve` so the interpolated line matches the\n// previous chart.js render pixel-for-pixel in shape.\nfunction splineControlPoints(prev: Point, cur: Point, next: Point, tension: number) {\n  const d01 = Math.hypot(cur.x - prev.x, cur.y - prev.y)\n  const d12 = Math.hypot(next.x - cur.x, next.y - cur.y)\n\n  let s01 = d01 / (d01 + d12)\n  let s12 = d12 / (d01 + d12)\n  s01 = isNaN(s01) ? 0 : s01\n  s12 = isNaN(s12) ? 0 : s12\n\n  const fa = tension * s01\n  const fb = tension * s12\n\n  return {\n    previous: { x: cur.x - fa * (next.x - prev.x), y: cur.y - fa * (next.y - prev.y) },\n    next: { x: cur.x + fb * (next.x - prev.x), y: cur.y + fb * (next.y - prev.y) },\n  }\n}\n\n// Catmull-Rom control points can overshoot past the points they're smoothing between\n// (that's what gives the curve its roundness) - clamping keeps that overshoot from\n// pushing the line past the axes (e.g. below the zero baseline) while keeping it\n// visually continuous, instead of letting it run past the bounds and clipping it away.\nfunction clampPoint(point: Point, minY: number, maxY: number): Point {\n  return { x: point.x, y: Math.min(Math.max(point.y, minY), maxY) }\n}\n\nfunction buildSmoothPath(points: Point[], minY: number, maxY: number): string {\n  if (points.length === 0) return ''\n  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`\n\n  const controls = points.map((point, i) => {\n    const prev = points[i - 1] ?? point\n    const next = points[i + 1] ?? point\n    return splineControlPoints(prev, point, next, TENSION)\n  })\n\n  let path = `M ${points[0].x} ${points[0].y}`\n  for (let i = 1; i < points.length; i++) {\n    const cp1 = clampPoint(controls[i - 1].next, minY, maxY)\n    const cp2 = clampPoint(controls[i].previous, minY, maxY)\n    path += ` C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${points[i].x} ${points[i].y}`\n  }\n  return path\n}\n\nconst LineChart: React.FC<LineChartProps> = ({\n  labels,\n  data,\n  color = '#6560C5',\n  valueLabel,\n  strokeWidth = DEFAULT_STROKE_WIDTH,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null)\n  const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n\n  const { points, yTicks, plotWidth, plotHeight } = useMemo(() => {\n    const plotWidth = VIEW_WIDTH - PADDING_LEFT - PADDING_RIGHT\n    const plotHeight = VIEW_HEIGHT - PADDING_TOP - PADDING_BOTTOM\n    const maxValue = data.length ? Math.max(...data) : 0\n    const { max, step } = niceScale(maxValue)\n\n    const yTicks: number[] = []\n    for (let value = 0; value <= max; value += step) {\n      yTicks.push(value)\n    }\n\n    const points: Point[] = data.map((value, i) => {\n      const x = PADDING_LEFT + (data.length > 1 ? (i / (data.length - 1)) * plotWidth : plotWidth / 2)\n      const y = PADDING_TOP + plotHeight - (max > 0 ? (value / max) * plotHeight : 0)\n      return { x, y }\n    })\n\n    return { points, yTicks, plotWidth, plotHeight }\n  }, [data])\n\n  const linePath = useMemo(() => buildSmoothPath(points, PADDING_TOP, PADDING_TOP + plotHeight), [points, plotHeight])\n\n  const handlePointerMove = (event: React.PointerEvent<SVGSVGElement>) => {\n    if (!svgRef.current || points.length === 0) return\n    const rect = svgRef.current.getBoundingClientRect()\n    const relativeX = ((event.clientX - rect.left) / rect.width) * VIEW_WIDTH\n\n    let nearestIndex = 0\n    let nearestDistance = Infinity\n    points.forEach((point, i) => {\n      const distance = Math.abs(point.x - relativeX)\n      if (distance < nearestDistance) {\n        nearestDistance = distance\n        nearestIndex = i\n      }\n    })\n    setHoverIndex(nearestIndex)\n  }\n\n  const hoverPoint = hoverIndex !== null ? points[hoverIndex] : null\n\n  return (\n    <Flex sx={{ width: '100%', height: '100%', position: 'relative' }}>\n      <svg\n        ref={svgRef}\n        viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`}\n        width=\"100%\"\n        height=\"100%\"\n        preserveAspectRatio=\"none\"\n        onPointerMove={handlePointerMove}\n        onPointerLeave={() => setHoverIndex(null)}\n        style={{ overflow: 'visible' }}\n      >\n        {/* Horizontal grid + y-axis labels */}\n        {yTicks.map((tick) => {\n          const y =\n            PADDING_TOP +\n            plotHeight -\n            (yTicks[yTicks.length - 1] > 0 ? (tick / yTicks[yTicks.length - 1]) * plotHeight : 0)\n          return (\n            <g key={`y-${tick}`}>\n              <line\n                x1={PADDING_LEFT}\n                x2={PADDING_LEFT + plotWidth}\n                y1={y}\n                y2={y}\n                stroke=\"rgba(250, 250, 250, 0.1)\"\n                strokeWidth={1}\n              />\n              <text\n                x={PADDING_LEFT - 10}\n                y={y}\n                textAnchor=\"end\"\n                dominantBaseline=\"middle\"\n                fontSize={13}\n                fontWeight={400}\n                fill=\"rgba(250, 250, 250, 0.5)\"\n              >\n                {tick.toLocaleString()}\n              </text>\n            </g>\n          )\n        })}\n\n        {/* Vertical grid + x-axis labels */}\n        {points.map((point, i) => (\n          <g key={`x-${labels[i]}`}>\n            <line\n              x1={point.x}\n              x2={point.x}\n              y1={PADDING_TOP}\n              y2={PADDING_TOP + plotHeight}\n              stroke=\"rgba(250, 250, 250, 0.1)\"\n              strokeWidth={1}\n            />\n            <text\n              x={point.x}\n              y={PADDING_TOP + plotHeight + 16}\n              textAnchor=\"end\"\n              fontSize={13}\n              fontWeight={400}\n              fill=\"rgba(250, 250, 250, 0.5)\"\n              transform={`rotate(-40 ${point.x} ${PADDING_TOP + plotHeight + 16})`}\n            >\n              {labels[i]}\n            </text>\n          </g>\n        ))}\n\n        <path\n          d={linePath}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n\n        {hoverPoint && (\n          <g>\n            <line\n              x1={hoverPoint.x}\n              x2={hoverPoint.x}\n              y1={PADDING_TOP}\n              y2={PADDING_TOP + plotHeight}\n              stroke=\"rgba(250, 250, 250, 0.35)\"\n              strokeWidth={1}\n            />\n            <circle cx={hoverPoint.x} cy={hoverPoint.y} r={5} fill={color} stroke=\"#16161d\" strokeWidth={2} />\n          </g>\n        )}\n      </svg>\n\n      {hoverPoint && hoverIndex !== null && (\n        <Flex\n          sx={{\n            position: 'absolute',\n            top: `${(hoverPoint.y / VIEW_HEIGHT) * 100}%`,\n            left: `${(hoverPoint.x / VIEW_WIDTH) * 100}%`,\n            transform: hoverPoint.y < VIEW_HEIGHT / 3 ? 'translate(-50%, 12px)' : 'translate(-50%, calc(-100% - 12px))',\n            flexDirection: 'column',\n            background: '#0d0d13',\n            border: '1px solid rgba(250, 250, 250, 0.1)',\n            borderRadius: '6px',\n            p: '8px 10px',\n            pointerEvents: 'none',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          <Flex sx={{ fontSize: '11px', color: 'rgba(250, 250, 250, 0.5)' }}>{labels[hoverIndex]}</Flex>\n          <Flex sx={{ fontSize: '13px', fontWeight: 600, color: '#f6f6f6', alignItems: 'center' }}>\n            <Flex as=\"span\" sx={{ width: '8px', height: '2px', background: color, mr: '6px' }} />\n            {valueLabel.endsWith('$')\n              ? `${valueLabel}${data[hoverIndex]?.toLocaleString()}`\n              : `${valueLabel}: ${data[hoverIndex]?.toLocaleString()}`}\n          </Flex>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default LineChart\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/ProjectView/components/BondStats/index.d.ts

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

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

@@ -1,12 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { stripDate } from './utils.js';
 import { chartOptions } from './types.js';
 import CircularProgress from '../../../../components/CircularProgress/index.js';
 import LineChart from './LineChart.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';
+import { Link } from 'theme-ui';
 import MenuSelect from '../../../../components/MenuSelect/MenuSelect.js';
 
 const BondStats = ({ selectedBond }) => {
@@ -52,7 +54,7 @@ const BondStats = ({ selectedBond }) => {
             }));
         }
     }, [bondStats]);
-    return (jsxs(Flex, { className: "ape:w-full ape:flex-col ape:p-[20px] ape:rounded-normal ape:bg-white2", children: [jsxs(Flex, { className: "ape:w-full ape:justify-between ape:mb-[15px]", children: [jsx(Flex, { className: "ape:text-[22px]", children: "Bond Stats" }), jsxs("a", { href: `https://dashboard.ape.bond/bond/${selectedBond?.contractAddress?.[selectedBond?.chainId]}`, className: "ape:no-underline ape:leading-[33px] ape:text-[14px] ape:font-normal", style: { color: 'var(--ape-color-primary-button)' }, target: "_blank", rel: "noopener noreferrer", children: ["View More ", '>'] })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:flex-col ape:md:flex-row", children: [jsxs(Flex, { className: "ape:w-full ape:md:w-[calc(100%-300px)] ape:mr-[20px] ape:p-[10px] ape:md:p-[20px] ape:bg-white3 ape:rounded-normal ape:flex-col ape:items-end", children: [jsx(Flex, { className: "ape:w-[155px]", children: jsx(MenuSelect, { selectedOption: chartOption, setOption: setChartOption, options: chartOptions }) }), jsx(Flex, { className: "ape:w-full ape:h-full ape:min-h-[225px]", children: chartOption === 'amount' ? (jsx(LineChart, { labels: salesAmountChartData.labels, data: salesAmountChartData.data, valueLabel: salesAmountChartData.label })) : (jsx(LineChart, { labels: salesCountChartData.labels, data: salesCountChartData.data, valueLabel: salesCountChartData.label })) })] }), bondStats?.percentageSold && (jsxs(Flex, { className: "ape:w-full ape:md:w-[300px] ape:p-[20px] ape:rounded-normal ape:bg-white3 ape:justify-center ape:items-center ape:flex-col ape:text-[22px] ape:mt-[15px] ape:md:mt-0", children: [jsxs(Flex, { className: "ape:mb-[10px]", children: [selectedBond.earnToken.symbol, " Sold"] }), jsx(CircularProgress, { value: bondStats?.percentageSold, size: 176, valueTemplate: `${bondStats?.percentageSold?.toFixed()}%`, valueColor: "#6560C5", rangeColor: "rgba(250, 250, 250, 0.05)", textColor: "#f6f6f6" }), jsxs(Flex, { className: "ape:text-[14px] ape:font-medium ape:mt-[15px]", style: { color: 'var(--ape-color-text-disabled-button)' }, children: [soldTokens, " / ", maxTotalPayout?.toLocaleString(), " ", selectedBond.earnToken.symbol] })] }))] })] }));
+    return (jsxs(Flex, { sx: styles.bondStatsContainer, children: [jsxs(Flex, { sx: styles.titleContainer, children: [jsx(Flex, { sx: { fontSize: '22px' }, children: "Bond Stats" }), jsxs(Link, { href: `https://dashboard.ape.bond/bond/${selectedBond?.contractAddress?.[selectedBond?.chainId]}`, sx: styles.link, target: "_blank", rel: "noopener noreferrer", children: ["View More ", '>'] })] }), jsxs(Flex, { sx: styles.chartsContainer, children: [jsxs(Flex, { sx: styles.salesChart, children: [jsx(Flex, { sx: { width: '155px' }, children: jsx(MenuSelect, { selectedOption: chartOption, setOption: setChartOption, options: chartOptions }) }), jsx(Flex, { sx: { width: '100%', height: '100%', minHeight: '225px' }, children: chartOption === 'amount' ? (jsx(LineChart, { labels: salesAmountChartData.labels, data: salesAmountChartData.data, valueLabel: salesAmountChartData.label })) : (jsx(LineChart, { labels: salesCountChartData.labels, data: salesCountChartData.data, valueLabel: salesCountChartData.label })) })] }), bondStats?.percentageSold && (jsxs(Flex, { sx: styles.percentageSoldChart, children: [jsxs(Flex, { sx: { mb: '10px' }, children: [selectedBond.earnToken.symbol, " Sold"] }), jsx(CircularProgress, { value: bondStats?.percentageSold, size: 176, valueTemplate: `${bondStats?.percentageSold?.toFixed()}%`, valueColor: "#6560C5", rangeColor: "rgba(250, 250, 250, 0.05)", textColor: "#f6f6f6" }), jsxs(Flex, { sx: { fontSize: '14px', fontWeight: 500, color: 'textDisabledButton', mt: '15px' }, children: [soldTokens, " / ", maxTotalPayout?.toLocaleString(), " ", selectedBond.earnToken.symbol] })] }))] })] }));
 };
 
 export { BondStats as default };

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 } from './types'\nimport CircularProgress from '../../../../components/CircularProgress'\nimport LineChart from './LineChart'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { BondsData } from '../../../../types/bonds'\nimport useGetBondApiStats from '../../../../state/bondApiStats/useGetBondApiStats'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport MenuSelect from '../../../../components/MenuSelect/MenuSelect'\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    label: 'Sales Count',\n    labels: [],\n    data: [],\n  })\n  const [salesAmountChartData, setSalesAmountChartData] = useState<ChartData>({\n    label: 'Sales Amount $',\n    labels: [],\n    data: [],\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((prev) => ({\n        ...prev,\n        labels,\n        data: salesByDate.map((sale) => sale?.salesNum),\n      }))\n      setSalesAmountChartData((prev) => ({\n        ...prev,\n        labels,\n        data: salesByDate.map((sale) => sale?.salesAmount),\n      }))\n    }\n  }, [bondStats])\n\n  return (\n    <Flex className=\"ape:w-full ape:flex-col ape:p-[20px] ape:rounded-normal ape:bg-white2\">\n      <Flex className=\"ape:w-full ape:justify-between ape:mb-[15px]\">\n        <Flex className=\"ape:text-[22px]\">Bond Stats</Flex>\n        <a\n          href={`https://dashboard.ape.bond/bond/${selectedBond?.contractAddress?.[selectedBond?.chainId]}`}\n          className=\"ape:no-underline ape:leading-[33px] ape:text-[14px] ape:font-normal\"\n          style={{ color: 'var(--ape-color-primary-button)' }}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          View More {'>'}\n        </a>\n      </Flex>\n      <Flex className=\"ape:w-full ape:justify-between ape:flex-col ape:md:flex-row\">\n        <Flex className=\"ape:w-full ape:md:w-[calc(100%-300px)] ape:mr-[20px] ape:p-[10px] ape:md:p-[20px] ape:bg-white3 ape:rounded-normal ape:flex-col ape:items-end\">\n          <Flex className=\"ape:w-[155px]\">\n            <MenuSelect selectedOption={chartOption} setOption={setChartOption} options={chartOptions} />\n          </Flex>\n          <Flex className=\"ape:w-full ape:h-full ape:min-h-[225px]\">\n            {chartOption === 'amount' ? (\n              <LineChart\n                labels={salesAmountChartData.labels}\n                data={salesAmountChartData.data}\n                valueLabel={salesAmountChartData.label}\n              />\n            ) : (\n              <LineChart\n                labels={salesCountChartData.labels}\n                data={salesCountChartData.data}\n                valueLabel={salesCountChartData.label}\n              />\n            )}\n          </Flex>\n        </Flex>\n        {bondStats?.percentageSold && (\n          <Flex className=\"ape:w-full ape:md:w-[300px] ape:p-[20px] ape:rounded-normal ape:bg-white3 ape:justify-center ape:items-center ape:flex-col ape:text-[22px] ape:mt-[15px] ape:md:mt-0\">\n            <Flex className=\"ape: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\n              className=\"ape:text-[14px] ape:font-medium ape:mt-[15px]\"\n              style={{ color: 'var(--ape-color-text-disabled-button)' }}\n            >\n              {soldTokens} / {maxTotalPayout?.toLocaleString()} {selectedBond.earnToken.symbol}\n            </Flex>\n          </Flex>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default BondStats\n"],"names":["_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 } from './types'\nimport CircularProgress from '../../../../components/CircularProgress'\nimport LineChart from './LineChart'\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\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    label: 'Sales Count',\n    labels: [],\n    data: [],\n  })\n  const [salesAmountChartData, setSalesAmountChartData] = useState<ChartData>({\n    label: 'Sales Amount $',\n    labels: [],\n    data: [],\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((prev) => ({\n        ...prev,\n        labels,\n        data: salesByDate.map((sale) => sale?.salesNum),\n      }))\n      setSalesAmountChartData((prev) => ({\n        ...prev,\n        labels,\n        data: salesByDate.map((sale) => sale?.salesAmount),\n      }))\n    }\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              <LineChart\n                labels={salesAmountChartData.labels}\n                data={salesAmountChartData.data}\n                valueLabel={salesAmountChartData.label}\n              />\n            ) : (\n              <LineChart\n                labels={salesCountChartData.labels}\n                data={salesCountChartData.data}\n                valueLabel={salesCountChartData.label}\n              />\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', mt: '15px' }}>\n              {soldTokens} / {maxTotalPayout?.toLocaleString()} {selectedBond.earnToken.symbol}\n            </Flex>\n          </Flex>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default BondStats\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/ProjectView/components/BondStats/styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'bondStatsContainer' | 'titleContainer' | 'link' | 'chartsContainer' | 'salesChart' | 'percentageSoldChart', ThemeUIStyleObject>;

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

@@ -0,0 +1,49 @@
+const styles = {
+    bondStatsContainer: {
+        width: '100%',
+        flexDirection: 'column',
+        p: '20px',
+        borderRadius: 'normal',
+        background: 'white2',
+    },
+    titleContainer: {
+        width: '100%',
+        justifyContent: 'space-between',
+        mb: '15px',
+    },
+    link: {
+        color: 'primaryButton',
+        textDecoration: 'none',
+        lineHeight: '33px',
+        fontSize: '14px',
+        fontWeight: 400,
+    },
+    chartsContainer: {
+        width: '100%',
+        justifyContent: 'space-between',
+        flexDirection: ['column', 'column', 'column', 'row'],
+    },
+    salesChart: {
+        width: ['100%', '100%', '100%', 'calc(100% - 300px)'],
+        mr: '20px',
+        p: ['10px', '10px', '10px', '20px'],
+        background: 'white3',
+        borderRadius: 'normal',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+    },
+    percentageSoldChart: {
+        width: ['100%', '100%', '100%', '300px'],
+        p: '20px',
+        borderRadius: 'normal',
+        background: 'white3',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        fontSize: '22px',
+        mt: ['15px', '15px', '15px', '0px'],
+    },
+};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/views/ProjectView/components/BondStats/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<\n  'bondStatsContainer' | 'titleContainer' | 'link' | 'chartsContainer' | 'salesChart' | 'percentageSoldChart',\n  ThemeUIStyleObject\n> = {\n  bondStatsContainer: {\n    width: '100%',\n    flexDirection: 'column',\n    p: '20px',\n    borderRadius: 'normal',\n    background: 'white2',\n  },\n  titleContainer: {\n    width: '100%',\n    justifyContent: 'space-between',\n    mb: '15px',\n  },\n  link: {\n    color: 'primaryButton',\n    textDecoration: 'none',\n    lineHeight: '33px',\n    fontSize: '14px',\n    fontWeight: 400,\n  },\n  chartsContainer: {\n    width: '100%',\n    justifyContent: 'space-between',\n    flexDirection: ['column', 'column', 'column', 'row'],\n  },\n  salesChart: {\n    width: ['100%', '100%', '100%', 'calc(100% - 300px)'],\n    mr: '20px',\n    p: ['10px', '10px', '10px', '20px'],\n    background: 'white3',\n    borderRadius: 'normal',\n    flexDirection: 'column',\n    alignItems: 'flex-end',\n  },\n  percentageSoldChart: {\n    width: ['100%', '100%', '100%', '300px'],\n    p: '20px',\n    borderRadius: 'normal',\n    background: 'white3',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'column',\n    fontSize: '22px',\n    mt: ['15px', '15px', '15px', '0px'],\n  },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAGf;AACF,IAAA,kBAAkB,EAAE;AAClB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,CAAC,EAAE,MAAM;AACT,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,UAAU,EAAE,MAAM;AAClB,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,cAAc,EAAE,eAAe;QAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC;AACrD,KAAA;AACD,IAAA,UAAU,EAAE;QACV,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,oBAAoB,CAAC;AACrD,QAAA,EAAE,EAAE,MAAM;QACV,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AACnC,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;AACD,IAAA,mBAAmB,EAAE;QACnB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AACxC,QAAA,CAAC,EAAE,MAAM;AACT,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,QAAQ,EAAE,MAAM;QAChB,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;AACpC,KAAA;;;;;"}

package/dist/views/ProjectView/components/NavPanel/index.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 declare const NavPanel: ({ contractAddress }: {
     contractAddress?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default NavPanel;

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

@@ -1,9 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Insight from '../../../../components/uikit-sdk/Svg/Icons/Insight.js';
 
 const NavPanel = ({ contractAddress }) => {
-    return (jsxs(Flex, { className: "ape:w-full ape:text-white ape:text-[10px] ape:font-light ape:justify-between ape:items-center ape:mb-[15px] ape:md:mb-0", children: [jsxs(Flex, { onClick: () => window.open(`${window.location.origin}/bonds`, '_self'), className: "ape:cursor-pointer", children: ['< ', jsx(Flex, { className: "ape:ml-[4px]", children: "All Bonds" })] }), jsx(Flex, { children: jsxs(Flex, { className: "ape:p-[5px_10px] ape:bg-white3 ape:rounded-small ape:cursor-pointer", onClick: () => window.open(`https://dashboard.ape.bond/bond/${contractAddress}`, '_blank', 'noreferrer'), children: ["View insights", jsx(Flex, { className: "ape:ml-[3px]", children: jsx(Insight, {}) })] }) })] }));
+    return (jsxs(Flex, { sx: {
+            width: '100%',
+            color: '#fff',
+            fontSize: '10px',
+            fontWeight: 300,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: ['15px', '15px', '15px', '0px'],
+        }, children: [jsxs(Flex, { onClick: () => window.open(`${window.location.origin}/bonds`, '_self'), sx: { cursor: 'pointer' }, children: ['< ', jsx(Flex, { sx: { ml: '4px' }, children: "All Bonds" })] }), jsx(Flex, { children: jsxs(Flex, { sx: { p: '5px 10px', background: 'white3', borderRadius: 'small', cursor: 'pointer' }, onClick: () => window.open(`https://dashboard.ape.bond/bond/${contractAddress}`, '_blank', 'noreferrer'), children: ["View insights", jsx(Flex, { sx: { ml: '3px' }, children: jsx(Insight, {}) })] }) })] }));
 };
 
 export { NavPanel as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/NavPanel/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Insight from '../../../../components/uikit-sdk/Svg/Icons/Insight'\n\nconst NavPanel = ({ contractAddress }: { contractAddress?: string }) => {\n  return (\n    <Flex className=\"ape:w-full ape:text-white ape:text-[10px] ape:font-light ape:justify-between ape:items-center ape:mb-[15px] ape:md:mb-0\">\n      <Flex onClick={() => window.open(`${window.location.origin}/bonds`, '_self')} className=\"ape:cursor-pointer\">\n        {'< '}\n        <Flex className=\"ape:ml-[4px]\">All Bonds</Flex>\n      </Flex>\n      <Flex>\n        <Flex\n          className=\"ape:p-[5px_10px] ape:bg-white3 ape:rounded-small ape:cursor-pointer\"\n          onClick={() => window.open(`https://dashboard.ape.bond/bond/${contractAddress}`, '_blank', 'noreferrer')}\n        >\n          View insights\n          <Flex className=\"ape:ml-[3px]\">\n            <Insight />\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default NavPanel\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,QAAQ,GAAG,CAAC,EAAE,eAAe,EAAgC,KAAI;AACrE,IAAA,QACEA,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,yHAAyH,EAAA,QAAA,EAAA,CACvIA,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,QAAQ,EAAE,OAAO,CAAC,EAAE,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CACzG,IAAI,EACLC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,CAAiB,CAAA,EAAA,CAC1C,EACPA,IAAC,IAAI,EAAA,EAAA,QAAA,EACHD,KAAC,IAAI,EAAA,EACH,SAAS,EAAC,qEAAqE,EAC/E,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,CAAA,gCAAA,EAAmC,eAAe,EAAE,EAAE,QAAQ,EAAE,YAAY,CAAC,8BAGxGC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BA,GAAA,CAAC,OAAO,EAAA,EAAA,CAAG,EAAA,CACN,IACF,EAAA,CACF,CAAA,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/NavPanel/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Insight from '../../../../components/uikit-sdk/Svg/Icons/Insight'\n\nconst NavPanel = ({ contractAddress }: { contractAddress?: string }) => {\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        color: '#fff',\n        fontSize: '10px',\n        fontWeight: 300,\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        mb: ['15px', '15px', '15px', '0px'],\n      }}\n    >\n      <Flex onClick={() => window.open(`${window.location.origin}/bonds`, '_self')} sx={{ cursor: 'pointer' }}>\n        {'< '}\n        <Flex sx={{ ml: '4px' }}>All Bonds</Flex>\n      </Flex>\n      <Flex>\n        <Flex\n          sx={{ p: '5px 10px', background: 'white3', borderRadius: 'small', cursor: 'pointer' }}\n          onClick={() => window.open(`https://dashboard.ape.bond/bond/${contractAddress}`, '_blank', 'noreferrer')}\n        >\n          View insights\n          <Flex sx={{ ml: '3px' }}>\n            <Insight />\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default NavPanel\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,QAAQ,GAAG,CAAC,EAAE,eAAe,EAAgC,KAAI;AACrE,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,UAAU,EAAE,QAAQ;YACpB,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;SACpC,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAA,MAAA,CAAQ,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAA,QAAA,EAAA,CACpG,IAAI,EACLC,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,WAAA,EAAA,CAAkB,CAAA,EAAA,CACpC,EACPA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHD,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,EACrF,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,CAAA,gCAAA,EAAmC,eAAe,CAAA,CAAE,EAAE,QAAQ,EAAE,YAAY,CAAC,8BAGxGC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EACrBA,GAAA,CAAC,OAAO,EAAA,EAAA,CAAG,EAAA,CACN,CAAA,EAAA,CACF,EAAA,CACF,CAAA,EAAA,CACF;AAEX;;;;"}