@ape.swap/bonds-sdk 6.2.13 → 6.2.15

package/dist/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.js.map

@@ -1 +1 @@
-{"version":3,"file":"PointsLeftForNextTier.js","sources":["../../../../../src/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, {\n  getUserTier,\n  TIERS_COLORS,\n  // TIERS_WEIGHT,\n} from '../../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\n// import { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { useAbondPrice } from '../../../../state/tokenPrices/useAbondPrice'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { calculateOptimizationData } from '../../utils'\nimport Discount from '../../../../components/uikit-sdk/Svg/Icons/Discount'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport { toFixedString } from '../../../../utils/fixedPoint'\n\nconst UPGRADE_NOW_USD_BUFFER = 0.1\n\nconst getUpgradeNowAmountUsd = (amountUsd: number) => {\n  const roundedUp = Number(toFixedString(amountUsd, 2, 'halfUp'))\n  return Number(toFixedString(roundedUp + UPGRADE_NOW_USD_BUFFER, 2, 'ceil'))\n}\n\n// const getNextTierInfo = (userPoints: string) => {\n//   const tiers = [\n//     { tier: LaunchBondTiers.Silver, threshold: TIERS_WEIGHT[LaunchBondTiers.Silver] },\n//     { tier: LaunchBondTiers.Gold, threshold: TIERS_WEIGHT[LaunchBondTiers.Gold] },\n//     { tier: LaunchBondTiers.Diamond, threshold: TIERS_WEIGHT[LaunchBondTiers.Diamond] },\n//     { tier: LaunchBondTiers.Legend, threshold: TIERS_WEIGHT[LaunchBondTiers.Legend] },\n//     { tier: LaunchBondTiers.Mythical, threshold: TIERS_WEIGHT[LaunchBondTiers.Mythical] },\n//   ]\n//\n//   const userPointsBN = getBalanceNumber(userPoints)\n//\n//   for (const { tier, threshold } of tiers) {\n//     const thresholdNumber = getBalanceNumber(threshold)\n//     if (userPointsBN < thresholdNumber) {\n//       const pointsNeeded = thresholdNumber - userPointsBN\n//       return { nextTier: tier, pointsNeeded }\n//     }\n//   }\n//\n//   return null // User is at max tier (Mythical)\n// }\n\ninterface GetUpToComponentProps {\n  bond: BondsData\n  inputAmount: string\n  setInputValue: (value: string) => void\n  inputTokenDecimals: number\n  inputTokenPrice?: number\n}\n\n// mobile-only \"Upgrade now\" link (visible < lg, replaced by the desktop version below)\nconst upgradeNowInlineClasses =\n  'ape:ml-[5px] ape:mr-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:inline ape:lg:hidden'\n// desktop-only \"Upgrade now\" link (visible >= lg)\nconst upgradeNowFlexClasses =\n  'ape:ml-[5px] ape:mr-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:hidden ape:lg:flex'\n\nconst PointsLeftForNextTier: React.FC<GetUpToComponentProps> = ({\n  bond,\n  inputAmount,\n  setInputValue,\n  inputTokenDecimals,\n  inputTokenPrice,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n  // Hooks & Data\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const abondPrice = useAbondPrice()\n  const userTier = getUserTier(promotionalPoints)\n  // const nextTierInfo = getNextTierInfo(promotionalPoints || '0')\n  // const inputAmountUSD = parseFloat(inputAmount) * (inputTokenPrice ?? 0)\n  // const necessaryUSDAmount = (nextTierInfo?.pointsNeeded! / 4) * abondPrice!\n  // const fee = ((bond.tierBoostRate ?? 0) + 100) / 100 - 1\n  // const feeToBeCollected = inputAmountUSD * fee\n  // const feeInAbond = feeToBeCollected / abondPrice!\n  // const pointsToBeEarned = feeInAbond * 4\n\n  const optimizationData = calculateOptimizationData(inputAmount, promotionalPoints!, bond, inputTokenPrice, abondPrice)\n  const nextTierData = optimizationData?.data?.[0]\n  const highestProfitableTier = optimizationData?.highestProfitableTier\n  const shouldRenderNextTierRow = Boolean(\n    (userTier ?? 0) < LaunchBondTiers.Mythical && nextTierData && (!highestProfitableTier || isOpen),\n  )\n  const shouldShowNextTierRowCaret = !highestProfitableTier\n\n  const handleSetNextTierAmount = (amount: number) => {\n    const inputValueInSelectedToken = amount / (inputTokenPrice ?? 0)\n    const roundedInputValue = toFixedString(inputValueInSelectedToken, inputTokenDecimals, 'ceil')\n    setInputValue(roundedInputValue)\n  }\n\n  const handleTierSelection = (amount: number) => {\n    handleSetNextTierAmount(getUpgradeNowAmountUsd(amount))\n    setIsOpen(false)\n  }\n\n  const handleToggleOpen = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setIsOpen((prev) => !prev)\n  }\n\n  const handleUpgradeNowClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (!nextTierData) return\n    handleTierSelection(nextTierData.minBreakevenWithFeeUSD)\n  }\n\n  return (\n    userTier !== LaunchBondTiers.Legend &&\n    bond.billVersion === BillVersion.V4 && (\n      <Flex\n        className=\"ape:w-full ape:mt-[10px] ape:text-[12px] ape:font-normal ape:flex-col ape:relative\"\n        style={{ cursor: !highestProfitableTier ? 'pointer' : undefined }}\n        onClick={() => setIsOpen(!isOpen)}\n      >\n        {highestProfitableTier && (\n          <Flex\n            className=\"ape:border ape:border-solid ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[10px] ape:lg:pr-[20px] ape:py-[6px] ape:min-h-[27px] ape:items-center ape:gap-[5px] ape:flex-wrap\"\n            style={{\n              borderColor: 'rgba(22, 101, 52, 0.53)',\n              background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%)',\n              color: 'rgba(134, 237, 171, 0.70)',\n            }}\n          >\n            <span className=\"ape:flex-1\">\n              <span className=\"ape:inline-flex ape:align-sub ape:mr-[4px]\">\n                <Discount width={14} color={'#4AD980'} />\n              </span>\n              <span className=\"ape:font-bold\">Congratulations!</span> With your purchase you will accumulate points to\n              upgrade to {/*@ts-ignore*/}\n              <span className=\"ape:font-bold\" style={{ color: TIERS_COLORS[highestProfitableTier?.tier] }}>\n                {highestProfitableTier.tierName}\n              </span>{' '}\n              <span className=\"ape:font-bold\">Tier!</span>\n            </span>\n            {!highestProfitableTier && <Caret direction={isOpen ? 'up' : 'down'} width={10} />}\n          </Flex>\n        )}\n        {shouldRenderNextTierRow && !highestProfitableTier && (\n          <Flex\n            onClick={handleToggleOpen}\n            className=\"ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[15px] ape:py-[2px] ape:items-center ape:justify-between ape:min-w-[120px]\"\n            style={{ background: '#312341', marginTop: highestProfitableTier ? '3px' : '0px' }}\n          >\n            <span className=\"ape:flex-1\">\n              <span className=\"ape:inline-flex ape:align-bottom\">\n                <img\n                  src={`https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`}\n                  alt=\"minTier\"\n                  style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                />\n              </span>\n              Doing a ${formatNumberSI(nextTierData?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n              <span className=\"ape:px-[3px] ape:font-semibold\" style={{ color: TIERS_COLORS[nextTierData?.tier] }}>\n                {nextTierData?.tierName}\n              </span>\n              Tier.\n              <span className={upgradeNowInlineClasses} onClick={(e) => handleUpgradeNowClick(e)}>\n                {`Upgrade now >`}\n              </span>\n            </span>\n            <span className={upgradeNowFlexClasses} onClick={(e) => handleUpgradeNowClick(e)}>\n              {`Upgrade now >`}\n            </span>\n            {shouldShowNextTierRowCaret && (\n              <span\n                className=\"ape:inline-flex ape:items-center\"\n                onClick={handleToggleOpen}\n                role=\"button\"\n                aria-label={isOpen ? 'Collapse tier list' : 'Expand tier list'}\n              >\n                <Caret direction={isOpen ? 'up' : 'down'} width={8} />\n              </span>\n            )}\n          </Flex>\n        )}\n        <AnimatePresence>\n          {isOpen && optimizationData && !highestProfitableTier && (\n            <motion.div\n              initial={{ height: 0 }}\n              animate={{ height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ height: 0 }}\n              className=\"ape:overflow-hidden ape:w-full ape:mt-[3px] ape:cursor-pointer\"\n            >\n              {optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {\n                return (\n                  <Flex\n                    className=\"ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[20px] ape:py-[2px] ape:items-center ape:justify-between\"\n                    style={{ background: '#312341', marginTop: index === 0 ? '0px' : '3px' }}\n                    onClick={handleToggleOpen}\n                    key={data.tierName}\n                  >\n                    <span className=\"ape:flex-1\">\n                      <span className=\"ape:inline-flex ape:align-bottom\">\n                        <img\n                          src={`https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`}\n                          alt=\"minTier\"\n                          style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                        />\n                      </span>\n                      Doing a ${formatNumberSI(data?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n                      <span className=\"ape:px-[3px] ape:font-semibold\" style={{ color: TIERS_COLORS[data?.tier] }}>\n                        {data?.tierName}\n                      </span>\n                      Tier.\n                      <span\n                        className={`${upgradeNowInlineClasses} ape:mr-[15px]!`}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                          setIsOpen(false)\n                        }}\n                      >\n                        {`Upgrade now >`}\n                      </span>\n                    </span>\n                    <span\n                      className={`${upgradeNowFlexClasses} ape:min-w-[100px]`}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                        setIsOpen(false)\n                      }}\n                    >\n                      {`Upgrade now >`}\n                    </span>\n                  </Flex>\n                )\n              })}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </Flex>\n    )\n  )\n}\n\nexport default PointsLeftForNextTier\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PointsLeftForNextTier.js","sources":["../../../../../src/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, {\n  getUserTier,\n  TIERS_COLORS,\n  // TIERS_WEIGHT,\n} from '../../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\n// import { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { useAbondPrice } from '../../../../state/tokenPrices/useAbondPrice'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { calculateOptimizationData } from '../../utils'\nimport Discount from '../../../../components/uikit-sdk/Svg/Icons/Discount'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport { toFixedString } from '../../../../utils/fixedPoint'\n\nconst UPGRADE_NOW_USD_BUFFER = 0.1\n\nconst getUpgradeNowAmountUsd = (amountUsd: number) => {\n  const roundedUp = Number(toFixedString(amountUsd, 2, 'halfUp'))\n  return Number(toFixedString(roundedUp + UPGRADE_NOW_USD_BUFFER, 2, 'ceil'))\n}\n\n// const getNextTierInfo = (userPoints: string) => {\n//   const tiers = [\n//     { tier: LaunchBondTiers.Silver, threshold: TIERS_WEIGHT[LaunchBondTiers.Silver] },\n//     { tier: LaunchBondTiers.Gold, threshold: TIERS_WEIGHT[LaunchBondTiers.Gold] },\n//     { tier: LaunchBondTiers.Diamond, threshold: TIERS_WEIGHT[LaunchBondTiers.Diamond] },\n//     { tier: LaunchBondTiers.Legend, threshold: TIERS_WEIGHT[LaunchBondTiers.Legend] },\n//     { tier: LaunchBondTiers.Mythical, threshold: TIERS_WEIGHT[LaunchBondTiers.Mythical] },\n//   ]\n//\n//   const userPointsBN = getBalanceNumber(userPoints)\n//\n//   for (const { tier, threshold } of tiers) {\n//     const thresholdNumber = getBalanceNumber(threshold)\n//     if (userPointsBN < thresholdNumber) {\n//       const pointsNeeded = thresholdNumber - userPointsBN\n//       return { nextTier: tier, pointsNeeded }\n//     }\n//   }\n//\n//   return null // User is at max tier (Mythical)\n// }\n\ninterface GetUpToComponentProps {\n  bond: BondsData\n  inputAmount: string\n  setInputValue: (value: string) => void\n  inputTokenDecimals: number\n  inputTokenPrice?: number\n}\n\nconst PointsLeftForNextTier: React.FC<GetUpToComponentProps> = ({\n  bond,\n  inputAmount,\n  setInputValue,\n  inputTokenDecimals,\n  inputTokenPrice,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n  // Hooks & Data\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const abondPrice = useAbondPrice()\n  const userTier = getUserTier(promotionalPoints)\n  // const nextTierInfo = getNextTierInfo(promotionalPoints || '0')\n  // const inputAmountUSD = parseFloat(inputAmount) * (inputTokenPrice ?? 0)\n  // const necessaryUSDAmount = (nextTierInfo?.pointsNeeded! / 4) * abondPrice!\n  // const fee = ((bond.tierBoostRate ?? 0) + 100) / 100 - 1\n  // const feeToBeCollected = inputAmountUSD * fee\n  // const feeInAbond = feeToBeCollected / abondPrice!\n  // const pointsToBeEarned = feeInAbond * 4\n\n  const optimizationData = calculateOptimizationData(inputAmount, promotionalPoints!, bond, inputTokenPrice, abondPrice)\n  const nextTierData = optimizationData?.data?.[0]\n  const highestProfitableTier = optimizationData?.highestProfitableTier\n  const shouldRenderNextTierRow = Boolean(\n    (userTier ?? 0) < LaunchBondTiers.Mythical && nextTierData && (!highestProfitableTier || isOpen),\n  )\n  const shouldShowNextTierRowCaret = !highestProfitableTier\n\n  const handleSetNextTierAmount = (amount: number) => {\n    const inputValueInSelectedToken = amount / (inputTokenPrice ?? 0)\n    const roundedInputValue = toFixedString(inputValueInSelectedToken, inputTokenDecimals, 'ceil')\n    setInputValue(roundedInputValue)\n  }\n\n  const handleTierSelection = (amount: number) => {\n    handleSetNextTierAmount(getUpgradeNowAmountUsd(amount))\n    setIsOpen(false)\n  }\n\n  const handleToggleOpen = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setIsOpen((prev) => !prev)\n  }\n\n  const handleUpgradeNowClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (!nextTierData) return\n    handleTierSelection(nextTierData.minBreakevenWithFeeUSD)\n  }\n\n  return (\n    userTier !== LaunchBondTiers.Legend &&\n    bond.billVersion === BillVersion.V4 && (\n      <Flex\n        sx={{\n          width: '100%',\n          mt: '10px',\n          fontSize: '12px',\n          fontWeight: 400,\n          flexDirection: 'column',\n          position: 'relative',\n          cursor: !highestProfitableTier && 'pointer',\n        }}\n        onClick={() => setIsOpen(!isOpen)}\n      >\n        {highestProfitableTier && (\n          <Flex\n            sx={{\n              border: '1px solid rgba(22, 101, 52, 0.53)',\n              borderRadius: 'normal',\n              position: 'relative',\n              overflow: 'hidden',\n              pl: '10px',\n              pr: ['10px', '10px', '10px', '20px'],\n              py: '6px',\n              background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%) !important',\n              color: 'rgba(134, 237, 171, 0.70)',\n              minHeight: '27px',\n              alignItems: 'center',\n              gap: '5px',\n              flexWrap: 'wrap',\n            }}\n          >\n            <span sx={{ flex: 1 }}>\n              <span sx={{ display: 'inline-flex', verticalAlign: 'sub', mr: '4px' }}>\n                <Discount width={14} color={'#4AD980'} />\n              </span>\n              <span sx={{ fontWeight: 700 }}>Congratulations!</span> With your purchase you will accumulate points to\n              upgrade to {/*@ts-ignore*/}\n              <span sx={{ fontWeight: 700, color: TIERS_COLORS[highestProfitableTier?.tier] }}>\n                {highestProfitableTier.tierName}\n              </span>{' '}\n              <span sx={{ fontWeight: 700 }}>Tier!</span>\n            </span>\n            {!highestProfitableTier && <Caret direction={isOpen ? 'up' : 'down'} width={10} />}\n          </Flex>\n        )}\n        {shouldRenderNextTierRow && !highestProfitableTier && (\n          <Flex\n            onClick={handleToggleOpen}\n            sx={{\n              border: '1px solid #9960C5',\n              borderRadius: 'normal',\n              position: 'relative',\n              overflow: 'hidden',\n              pl: '10px',\n              pr: '15px',\n              py: '2px',\n              mt: highestProfitableTier ? '3px' : '0px',\n              alignItems: 'center',\n              background: '#312341',\n              justifyContent: 'space-between',\n              minWidth: '120px',\n            }}\n          >\n            <span sx={{ flex: 1 }}>\n              <span sx={{ display: 'inline-flex', verticalAlign: 'bottom' }}>\n                <img\n                  src={`https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`}\n                  alt=\"minTier\"\n                  style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                />\n              </span>\n              Doing a ${formatNumberSI(nextTierData?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n              <span sx={{ color: TIERS_COLORS[nextTierData?.tier], px: '3px', fontWeight: 600 }}>\n                {nextTierData?.tierName}\n              </span>\n              Tier.\n              <span\n                sx={{\n                  ml: '5px',\n                  mr: '5px',\n                  color: 'primaryButton',\n                  fontWeight: 500,\n                  cursor: 'pointer',\n                  ':hover': { textDecoration: 'underline' },\n                  display: ['inline', 'inline', 'inline', 'none'],\n                }}\n                onClick={(e) => {\n                  handleUpgradeNowClick(e)\n                }}\n              >\n                {`Upgrade now >`}\n              </span>\n            </span>\n            <span\n              sx={{\n                ml: '5px',\n                mr: '5px',\n                color: 'primaryButton',\n                fontWeight: 500,\n                cursor: 'pointer',\n                ':hover': { textDecoration: 'underline' },\n                display: ['none', 'none', 'none', 'flex'],\n              }}\n              onClick={(e) => {\n                handleUpgradeNowClick(e)\n              }}\n            >\n              {`Upgrade now >`}\n            </span>\n            {shouldShowNextTierRowCaret && (\n              <span\n                sx={{ display: 'inline-flex', alignItems: 'center' }}\n                onClick={handleToggleOpen}\n                role=\"button\"\n                aria-label={isOpen ? 'Collapse tier list' : 'Expand tier list'}\n              >\n                <Caret direction={isOpen ? 'up' : 'down'} width={8} />\n              </span>\n            )}\n          </Flex>\n        )}\n        <AnimatePresence>\n          {isOpen && optimizationData && !highestProfitableTier && (\n            <motion.div\n              initial={{ height: 0 }}\n              animate={{ height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ height: 0 }}\n              sx={{ overflow: 'hidden', width: '100%', marginTop: '3px', cursor: 'pointer' }}\n            >\n              {optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {\n                return (\n                  <Flex\n                    sx={{\n                      border: '1px solid #9960C5',\n                      borderRadius: 'normal',\n                      position: 'relative',\n                      overflow: 'hidden',\n                      pl: '10px',\n                      pr: '20px',\n                      py: '2px',\n                      mt: index === 0 ? '0px' : '3px',\n                      alignItems: 'center',\n                      background: '#312341',\n                      justifyContent: 'space-between',\n                    }}\n                    onClick={handleToggleOpen}\n                    key={data.tierName}\n                  >\n                    <span sx={{ flex: 1 }}>\n                      <span sx={{ display: 'inline-flex', verticalAlign: 'bottom' }}>\n                        <img\n                          src={`https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`}\n                          alt=\"minTier\"\n                          style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                        />\n                      </span>\n                      Doing a ${formatNumberSI(data?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n                      <span sx={{ color: TIERS_COLORS[data?.tier], px: '3px', fontWeight: 600 }}>{data?.tierName}</span>\n                      Tier.\n                      <span\n                        sx={{\n                          ml: '5px',\n                          mr: '15px',\n                          color: 'primaryButton',\n                          fontWeight: 500,\n                          cursor: 'pointer',\n                          ':hover': { textDecoration: 'underline' },\n                          display: ['inline', 'inline', 'inline', 'none'],\n                        }}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                          setIsOpen(false)\n                        }}\n                      >\n                        {`Upgrade now >`}\n                      </span>\n                    </span>\n                    <span\n                      sx={{\n                        ml: '5px',\n                        color: 'primaryButton',\n                        fontWeight: 500,\n                        cursor: 'pointer',\n                        ':hover': { textDecoration: 'underline' },\n                        display: ['none', 'none', 'none', 'flex'],\n                        minWidth: '100px',\n                      }}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                        setIsOpen(false)\n                      }}\n                    >\n                      {`Upgrade now >`}\n                    </span>\n                  </Flex>\n                )\n              })}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </Flex>\n    )\n  )\n}\n\nexport default PointsLeftForNextTier\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,sBAAsB,GAAG,GAAG;AAElC,MAAM,sBAAsB,GAAG,CAAC,SAAiB,KAAI;AACnD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC/D,IAAA,OAAO,MAAM,CAAC,aAAa,CAAC,SAAS,GAAG,sBAAsB,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAC7E,CAAC;AAgCD,MAAM,qBAAqB,GAAoC,CAAC,EAC9D,IAAI,EACJ,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,eAAe,GAChB,KAAI;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;IAE3C,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE;AAC3C,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,SAAS,IAAI,EAAE;AAC7C,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,iBAAiB,CAAC;;;;;;;;AAS/C,IAAA,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,WAAW,EAAE,iBAAkB,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,CAAC;IACtH,MAAM,YAAY,GAAG,gBAAgB,EAAE,IAAI,GAAG,CAAC,CAAC;AAChD,IAAA,MAAM,qBAAqB,GAAG,gBAAgB,EAAE,qBAAqB;IACrE,MAAM,uBAAuB,GAAG,OAAO,CACrC,CAAC,QAAQ,IAAI,CAAC,IAAI,eAAe,CAAC,QAAQ,IAAI,YAAY,KAAK,CAAC,qBAAqB,IAAI,MAAM,CAAC,CACjG;AACD,IAAA,MAAM,0BAA0B,GAAG,CAAC,qBAAqB;AAEzD,IAAA,MAAM,uBAAuB,GAAG,CAAC,MAAc,KAAI;QACjD,MAAM,yBAAyB,GAAG,MAAM,IAAI,eAAe,IAAI,CAAC,CAAC;QACjE,MAAM,iBAAiB,GAAG,aAAa,CAAC,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,CAAC;QAC9F,aAAa,CAAC,iBAAiB,CAAC;AAClC,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,MAAc,KAAI;AAC7C,QAAA,uBAAuB,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACvD,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAmB,KAAI;QAC/C,CAAC,CAAC,eAAe,EAAE;QACnB,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;AAC5B,IAAA,CAAC;AAED,IAAA,MAAM,qBAAqB,GAAG,CAAC,CAAmB,KAAI;QACpD,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,YAAY;YAAE;AACnB,QAAA,mBAAmB,CAAC,YAAY,CAAC,sBAAsB,CAAC;AAC1D,IAAA,CAAC;AAED,IAAA,QACE,QAAQ,KAAK,eAAe,CAAC,MAAM;AACnC,QAAA,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,EAAE,KACjCA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,CAAC,qBAAqB,IAAI,SAAS;AAC5C,SAAA,EACD,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,CAEhC,qBAAqB,KACpBA,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,MAAM,EAAE,mCAAmC;AAC3C,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,EAAE,EAAE,MAAM;oBACV,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AACpC,oBAAA,EAAE,EAAE,KAAK;AACT,oBAAA,UAAU,EAAE,6DAA6D;AACzE,oBAAA,KAAK,EAAE,2BAA2B;AAClC,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,GAAG,EAAE,KAAK;AACV,oBAAA,QAAQ,EAAE,MAAM;AACjB,iBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EACnEA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CACpC,EACPA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAyB,EAAA,+DAAA,EAEtDA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,CAAC,qBAAqB,EAAE,IAAI,CAAC,EAAE,EAAA,QAAA,EAC5E,qBAAqB,CAAC,QAAQ,EAAA,CAC1B,EAAC,GAAG,EACXA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CACtC,EACN,CAAC,qBAAqB,IAAIA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,CAAA,EAAA,CAC7E,CACR,EACA,uBAAuB,IAAI,CAAC,qBAAqB,KAChDD,IAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,gBAAgB,EACzB,EAAE,EAAE;AACF,oBAAA,MAAM,EAAE,mBAAmB;AAC3B,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,EAAE,EAAE,MAAM;AACV,oBAAA,EAAE,EAAE,MAAM;AACV,oBAAA,EAAE,EAAE,KAAK;oBACT,EAAE,EAAE,qBAAqB,GAAG,KAAK,GAAG,KAAK;AACzC,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,UAAU,EAAE,SAAS;AACrB,oBAAA,cAAc,EAAE,eAAe;AAC/B,oBAAA,QAAQ,EAAE,OAAO;iBAClB,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAC3DA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,CAAA,+BAAA,EAAkC,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAClF,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GACvE,EAAA,CACG,EAAA,WAAA,EACG,cAAc,CAAC,YAAY,EAAE,sBAAuB,CAAC,gCAC/DA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,YAC9E,YAAY,EAAE,QAAQ,EAAA,CAClB,EAAA,OAAA,EAEPA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,oCAAA,EAAE,EAAE,KAAK;AACT,oCAAA,EAAE,EAAE,KAAK;AACT,oCAAA,KAAK,EAAE,eAAe;AACtB,oCAAA,UAAU,EAAE,GAAG;AACf,oCAAA,MAAM,EAAE,SAAS;AACjB,oCAAA,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;oCACzC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC;AAChD,iCAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;oCACb,qBAAqB,CAAC,CAAC,CAAC;AAC1B,gCAAA,CAAC,YAEA,CAAA,aAAA,CAAe,EAAA,CACX,IACF,EACPA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,4BAAA,EAAE,EAAE,KAAK;AACT,4BAAA,EAAE,EAAE,KAAK;AACT,4BAAA,KAAK,EAAE,eAAe;AACtB,4BAAA,UAAU,EAAE,GAAG;AACf,4BAAA,MAAM,EAAE,SAAS;AACjB,4BAAA,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;4BACzC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC1C,yBAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;4BACb,qBAAqB,CAAC,CAAC,CAAC;AAC1B,wBAAA,CAAC,YAEA,CAAA,aAAA,CAAe,EAAA,CACX,EACN,0BAA0B,KACzBA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,EACpD,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,MAAM,GAAG,oBAAoB,GAAG,kBAAkB,EAAA,QAAA,EAE9DA,GAAA,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAA,CAAI,EAAA,CACjD,CACR,CAAA,EAAA,CACI,CACR,EACDA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,MAAM,IAAI,gBAAgB,IAAI,CAAC,qBAAqB,KACnDA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACtB,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,EAClC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAC1C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAA,QAAA,EAE7E,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACpF,wBAAA,QACED,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,MAAM,EAAE,mBAAmB;AAC3B,gCAAA,YAAY,EAAE,QAAQ;AACtB,gCAAA,QAAQ,EAAE,UAAU;AACpB,gCAAA,QAAQ,EAAE,QAAQ;AAClB,gCAAA,EAAE,EAAE,MAAM;AACV,gCAAA,EAAE,EAAE,MAAM;AACV,gCAAA,EAAE,EAAE,KAAK;gCACT,EAAE,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK;AAC/B,gCAAA,UAAU,EAAE,QAAQ;AACpB,gCAAA,UAAU,EAAE,SAAS;AACrB,gCAAA,cAAc,EAAE,eAAe;6BAChC,EACD,OAAO,EAAE,gBAAgB,EAAA,QAAA,EAAA,CAGzBA,eAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAC3DA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,CAAA,+BAAA,EAAkC,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA,IAAA,CAAM,EAC1E,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAA,CACvE,EAAA,CACG,eACG,cAAc,CAAC,IAAI,EAAE,sBAAuB,CAAC,EAAA,4BAAA,EACvDA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,YAAG,IAAI,EAAE,QAAQ,EAAA,CAAQ,EAAA,OAAA,EAElGA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,gDAAA,EAAE,EAAE,KAAK;AACT,gDAAA,EAAE,EAAE,MAAM;AACV,gDAAA,KAAK,EAAE,eAAe;AACtB,gDAAA,UAAU,EAAE,GAAG;AACf,gDAAA,MAAM,EAAE,SAAS;AACjB,gDAAA,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;gDACzC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC;AAChD,6CAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;gDACb,CAAC,CAAC,eAAe,EAAE;gDACnB,uBAAuB,CAAC,sBAAsB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;gDAC5E,SAAS,CAAC,KAAK,CAAC;AAClB,4CAAA,CAAC,YAEA,CAAA,aAAA,CAAe,EAAA,CACX,IACF,EACPA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,wCAAA,EAAE,EAAE,KAAK;AACT,wCAAA,KAAK,EAAE,eAAe;AACtB,wCAAA,UAAU,EAAE,GAAG;AACf,wCAAA,MAAM,EAAE,SAAS;AACjB,wCAAA,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;wCACzC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AACzC,wCAAA,QAAQ,EAAE,OAAO;AAClB,qCAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;wCACb,CAAC,CAAC,eAAe,EAAE;wCACnB,uBAAuB,CAAC,sBAAsB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;wCAC5E,SAAS,CAAC,KAAK,CAAC;oCAClB,CAAC,EAAA,QAAA,EAEA,eAAe,EAAA,CACX,CAAA,EAAA,EAjDF,IAAI,CAAC,QAAQ,CAkDb;AAEX,oBAAA,CAAC,CAAC,EAAA,CACS,CACd,GACe,CAAA,EAAA,CACb,CACR;AAEL;;;;"}

package/dist/views/BuyBond/components/ProjectDescription.d.ts

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

package/dist/views/BuyBond/components/ProjectDescription.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
 import SafeHTMLComponent from '../../../components/SafeHTMLComponent/index.js';
 import Flex from '../../../components/uikit-sdk/Flex/index.js';
@@ -6,7 +6,20 @@ import Text from '../../../components/uikit-sdk/Text/index.js';
 
 const ProjectDescription = ({ description, isProjectView }) => {
     const [isOpen, setIsOpen] = useState(false);
-    return (jsx(Flex, { className: "description-container ape:flex ape:items-start ape:font-normal ape:text-[14px] ape:leading-[21px] ape:py-[10px]", children: isProjectView && (jsxs(Fragment, { children: [jsxs(Flex, { className: "ape:flex ape:lg:hidden ape:flex-col", children: [jsx(Text, { size: "12px", className: "ape:lg:text-[14px]! ape:mt-[10px] ape:font-normal ape:overflow-hidden ape:leading-[18px]! ape:lg:leading-[21px]!", style: { maxHeight: isOpen ? 'unset' : '54px' }, children: description && jsx(SafeHTMLComponent, { html: description }) }), !isOpen && (jsxs(Text, { size: "12px", className: "ape:font-normal ape:cursor-pointer", style: { color: 'var(--ape-color-primary-button)', lineHeight: '18px' }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx(Flex, { className: "ape:hidden ape:lg:flex", children: jsx(SafeHTMLComponent, { html: description ?? '' }) })] })) }));
+    return (jsx(Flex, { className: "description-container", children: isProjectView && (jsxs(Fragment, { children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx(Text, { sx: {
+                                fontSize: ['12px', '12px', '12px', '14px'],
+                                mt: '10px',
+                                lineHeight: ['18px', '18px', '18px', '21px'],
+                                fontWeight: 400,
+                                overflow: 'hidden',
+                                maxHeight: isOpen ? 'unset' : '54px',
+                            }, children: description && jsx(SafeHTMLComponent, { html: description }) }), !isOpen && (jsxs(Text, { sx: {
+                                color: 'primaryButton',
+                                fontSize: '12px',
+                                lineHeight: '18px',
+                                fontWeight: 400,
+                                cursor: 'pointer',
+                            }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx(SafeHTMLComponent, { html: description ?? '' }) })] })) }));
 };
 
 export { ProjectDescription as default };

package/dist/views/BuyBond/components/ProjectDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectDescription.js","sources":["../../../../src/views/BuyBond/components/ProjectDescription.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport SafeHTMLComponent from '../../../components/SafeHTMLComponent'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport Text from '../../../components/uikit-sdk/Text'\n\nconst ProjectDescription = ({ description, isProjectView }: { description?: string; isProjectView?: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false)\n\n  return (\n    <Flex className=\"description-container ape:flex ape:items-start ape:font-normal ape:text-[14px] ape:leading-[21px] ape:py-[10px]\">\n      {isProjectView && (\n        <>\n          <Flex className=\"ape:flex ape:lg:hidden ape:flex-col\">\n            <Text\n              size=\"12px\"\n              className=\"ape:lg:text-[14px]! ape:mt-[10px] ape:font-normal ape:overflow-hidden ape:leading-[18px]! ape:lg:leading-[21px]!\"\n              style={{ maxHeight: isOpen ? 'unset' : '54px' }}\n            >\n              {description && <SafeHTMLComponent html={description} />}\n            </Text>\n            {!isOpen && (\n              <Text\n                size=\"12px\"\n                className=\"ape:font-normal ape:cursor-pointer\"\n                style={{ color: 'var(--ape-color-primary-button)', lineHeight: '18px' }}\n                onClick={() => setIsOpen(true)}\n              >\n                View More {'>'}\n              </Text>\n            )}\n          </Flex>\n          <Flex className=\"ape:hidden ape:lg:flex\">\n            <SafeHTMLComponent html={description ?? ''} />\n          </Flex>\n        </>\n      )}\n    </Flex>\n  )\n}\n\nexport default ProjectDescription\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;AAKA,MAAM,kBAAkB,GAAG,CAAC,EAAE,WAAW,EAAE,aAAa,EAAqD,KAAI;IAC/G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAEpD,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iHAAiH,EAAA,QAAA,EAC9H,aAAa,KACZC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAAA,CACnDD,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,kHAAkH,EAC5H,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,QAAA,EAE9C,WAAW,IAAIA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,EAAA,CACnD,EACN,CAAC,MAAM,KACNC,IAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE,EAAE,KAAK,EAAE,iCAAiC,EAAE,UAAU,EAAE,MAAM,EAAE,EACvE,OAAO,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAAA,YAAA,EAEnB,GAAG,CAAA,EAAA,CACT,CACR,CAAA,EAAA,CACI,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wBAAwB,EAAA,QAAA,EACtCA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,IAAI,EAAE,EAAA,CAAI,EAAA,CACzC,CAAA,EAAA,CACN,CACJ,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"ProjectDescription.js","sources":["../../../../src/views/BuyBond/components/ProjectDescription.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport SafeHTMLComponent from '../../../components/SafeHTMLComponent'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport Text from '../../../components/uikit-sdk/Text'\n\nconst ProjectDescription = ({ description, isProjectView }: { description?: string; isProjectView?: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false)\n\n  return (\n    <Flex className=\"description-container\">\n      {isProjectView && (\n        <>\n          <Flex sx={{ display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }}>\n            <Text\n              sx={{\n                fontSize: ['12px', '12px', '12px', '14px'],\n                mt: '10px',\n                lineHeight: ['18px', '18px', '18px', '21px'],\n                fontWeight: 400,\n                overflow: 'hidden',\n                maxHeight: isOpen ? 'unset' : '54px',\n              }}\n            >\n              {description && <SafeHTMLComponent html={description} />}\n            </Text>\n            {!isOpen && (\n              <Text\n                sx={{\n                  color: 'primaryButton',\n                  fontSize: '12px',\n                  lineHeight: '18px',\n                  fontWeight: 400,\n                  cursor: 'pointer',\n                }}\n                onClick={() => setIsOpen(true)}\n              >\n                View More {'>'}\n              </Text>\n            )}\n          </Flex>\n          <Flex sx={{ display: ['none', 'none', 'none', 'flex'] }}>\n            <SafeHTMLComponent html={description ?? ''} />\n          </Flex>\n        </>\n      )}\n    </Flex>\n  )\n}\n\nexport default ProjectDescription\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;AAKA,MAAM,kBAAkB,GAAG,CAAC,EAAE,WAAW,EAAE,aAAa,EAAqD,KAAI;IAC/G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AAEpD,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA,QAAA,EACpC,aAAa,KACZC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAC9ED,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;gCACF,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC1C,gCAAA,EAAE,EAAE,MAAM;gCACV,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC5C,gCAAA,UAAU,EAAE,GAAG;AACf,gCAAA,QAAQ,EAAE,QAAQ;gCAClB,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;AACrC,6BAAA,EAAA,QAAA,EAEA,WAAW,IAAIA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,GACnD,EACN,CAAC,MAAM,KACNC,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,KAAK,EAAE,eAAe;AACtB,gCAAA,QAAQ,EAAE,MAAM;AAChB,gCAAA,UAAU,EAAE,MAAM;AAClB,gCAAA,UAAU,EAAE,GAAG;AACf,gCAAA,MAAM,EAAE,SAAS;6BAClB,EACD,OAAO,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAAA,YAAA,EAEnB,GAAG,IACT,CACR,CAAA,EAAA,CACI,EACPD,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EACrDA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,IAAI,EAAE,EAAA,CAAI,GACzC,CAAA,EAAA,CACN,CACJ,EAAA,CACI;AAEX;;;;"}

package/dist/views/BuyBond/index.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import Providers from '../../providers/index.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import BuyBondModal from './BuyBondModal.js';

package/dist/views/BuyBond/styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'buyContainer' | 'cardContainer' | 'infoRowsContainer' | 'infoRow' | 'infoTitle' | 'infoData', ThemeUIStyleObject>;

package/dist/views/BuyBond/styles.js

@@ -0,0 +1,33 @@
+const styles = {
+    buyContainer: {
+        width: '100%',
+        mb: ['30px', '30px', '30px', '0px'],
+        flexDirection: 'column',
+    },
+    cardContainer: {
+        width: '100%',
+        background: 'white2',
+        borderRadius: 'normal',
+        flexDirection: 'column',
+    },
+    infoRowsContainer: {
+        width: '100%',
+        flexDirection: 'column',
+        mb: '10px',
+    },
+    infoRow: {
+        width: '100%',
+        justifyContent: 'space-between',
+    },
+    infoTitle: {
+        fontSize: '12px',
+        fontWeight: 400,
+    },
+    infoData: {
+        fontSize: '12px',
+        fontWeight: 700,
+    },
+};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

package/dist/views/BuyBond/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/views/BuyBond/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<\n  'buyContainer' | 'cardContainer' | 'infoRowsContainer' | 'infoRow' | 'infoTitle' | 'infoData',\n  ThemeUIStyleObject\n> = {\n  buyContainer: {\n    width: '100%',\n    mb: ['30px', '30px', '30px', '0px'],\n    flexDirection: 'column',\n  },\n  cardContainer: {\n    width: '100%',\n    background: 'white2',\n    borderRadius: 'normal',\n    flexDirection: 'column',\n  },\n  infoRowsContainer: {\n    width: '100%',\n    flexDirection: 'column',\n    mb: '10px',\n  },\n  infoRow: {\n    width: '100%',\n    justifyContent: 'space-between',\n  },\n  infoTitle: {\n    fontSize: '12px',\n    fontWeight: 400,\n  },\n  infoData: {\n    fontSize: '12px',\n    fontWeight: 700,\n  },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAGf;AACF,IAAA,YAAY,EAAE;AACZ,QAAA,KAAK,EAAE,MAAM;QACb,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;AACnC,QAAA,aAAa,EAAE,QAAQ;AACxB,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,aAAa,EAAE,QAAQ;AACxB,KAAA;AACD,IAAA,iBAAiB,EAAE;AACjB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,cAAc,EAAE,eAAe;AAChC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;;;;;"}

package/dist/views/FullBondsView/FullBondsView.d.ts

@@ -1,2 +1,3 @@
-declare const FullBondsView: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+declare const FullBondsView: () => React.JSX.Element;
 export default FullBondsView;

package/dist/views/FullBondsView/FullBondsView.js

@@ -1,4 +1,4 @@
-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 YourBonds from '../YourBonds/YourBonds.js';
 import Bonds from '../Bonds/Bonds.js';
@@ -9,7 +9,7 @@ import Toggle from '../../components/uikit-sdk/Toggle/index.js';
 const FullBondsView = () => {
     const { activeView, handleToogle } = useActiveView();
     const SDKConfig = useSDKConfig();
-    return (jsxs("div", { className: "full-bonds-view-container ape:w-full ape:flex ape:flex-col ape:relative", children: [(SDKConfig.solAddress || SDKConfig.evmAddress) && (jsxs(Flex, { className: "ape:justify-center ape:my-[20px]", children: ["Debugger mode for address: ", SDKConfig.solAddress || SDKConfig.evmAddress] })), jsx("div", { className: "toggle-container ape:w-full ape:p-[10px] ape:min-[1000px]:p-0 ape:min-[1000px]:w-[300px] ape:min-[1000px]:absolute ape:min-[1000px]:left-[10px]", children: jsx(Toggle, { options: [BondsViewOptions.BONDSMARKET, BondsViewOptions.YOURBONDS], activeOption: activeView, handleToggle: handleToogle }) }), jsx(Flex, { className: "ape:w-full", children: activeView === BondsViewOptions.BONDSMARKET ? jsx(Bonds, {}) : jsx(YourBonds, {}) })] }));
+    return (jsxs("div", { className: "full-bonds-view-container", children: [(SDKConfig.solAddress || SDKConfig.evmAddress) && (jsxs(Flex, { sx: { justifyContent: 'center', my: '20px' }, children: ["Debugger mode for address: ", SDKConfig.solAddress || SDKConfig.evmAddress] })), jsx("div", { className: "toggle-container", children: jsx(Toggle, { options: [BondsViewOptions.BONDSMARKET, BondsViewOptions.YOURBONDS], activeOption: activeView, handleToggle: handleToogle }) }), jsx(Flex, { sx: { width: '100%' }, children: activeView === BondsViewOptions.BONDSMARKET ? jsx(Bonds, {}) : jsx(YourBonds, {}) })] }));
 };
 
 export { FullBondsView as default };

package/dist/views/FullBondsView/FullBondsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullBondsView.js","sources":["../../../src/views/FullBondsView/FullBondsView.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport YourBonds from '../YourBonds/YourBonds'\nimport Bonds from '../Bonds/Bonds'\nimport useActiveView, { BondsViewOptions } from '../../state/activeView'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport Toggle from '../../components/uikit-sdk/Toggle'\n\nconst FullBondsView = () => {\n  const { activeView, handleToogle } = useActiveView()\n  const SDKConfig = useSDKConfig()\n\n  return (\n    <div className=\"full-bonds-view-container ape:w-full ape:flex ape:flex-col ape:relative\">\n      {(SDKConfig.solAddress || SDKConfig.evmAddress) && (\n        <Flex className=\"ape:justify-center ape:my-[20px]\">\n          Debugger mode for address: {SDKConfig.solAddress || SDKConfig.evmAddress}\n        </Flex>\n      )}\n      <div className=\"toggle-container ape:w-full ape:p-[10px] ape:min-[1000px]:p-0 ape:min-[1000px]:w-[300px] ape:min-[1000px]:absolute ape:min-[1000px]:left-[10px]\">\n        <Toggle\n          options={[BondsViewOptions.BONDSMARKET, BondsViewOptions.YOURBONDS]}\n          activeOption={activeView}\n          handleToggle={handleToogle}\n        />\n      </div>\n      <Flex className=\"ape:w-full\">{activeView === BondsViewOptions.BONDSMARKET ? <Bonds /> : <YourBonds />}</Flex>\n    </div>\n  )\n}\n\nexport default FullBondsView\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAQA,MAAM,aAAa,GAAG,MAAK;IACzB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE;AACpD,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAEhC,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yEAAyE,EAAA,QAAA,EAAA,CACrF,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,MAC5CA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAAA,6BAAA,EACpB,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,CAAA,EAAA,CACnE,CACR,EACDC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iJAAiJ,EAAA,QAAA,EAC9JA,IAAC,MAAM,EAAA,EACL,OAAO,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC,SAAS,CAAC,EACnE,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,YAAY,EAAA,CAC1B,EAAA,CACE,EACNA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAAE,UAAU,KAAK,gBAAgB,CAAC,WAAW,GAAGA,GAAA,CAAC,KAAK,KAAG,GAAGA,GAAA,CAAC,SAAS,KAAG,EAAA,CAAQ,CAAA,EAAA,CACzG;AAEV;;;;"}
+{"version":3,"file":"FullBondsView.js","sources":["../../../src/views/FullBondsView/FullBondsView.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport YourBonds from '../YourBonds/YourBonds'\nimport Bonds from '../Bonds/Bonds'\nimport useActiveView, { BondsViewOptions } from '../../state/activeView'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport Toggle from '../../components/uikit-sdk/Toggle'\n\nconst FullBondsView = () => {\n  const { activeView, handleToogle } = useActiveView()\n  const SDKConfig = useSDKConfig()\n\n  return (\n    <div className=\"full-bonds-view-container\">\n      {(SDKConfig.solAddress || SDKConfig.evmAddress) && (\n        <Flex sx={{ justifyContent: 'center', my: '20px' }}>\n          Debugger mode for address: {SDKConfig.solAddress || SDKConfig.evmAddress}\n        </Flex>\n      )}\n      <div className=\"toggle-container\">\n        <Toggle\n          options={[BondsViewOptions.BONDSMARKET, BondsViewOptions.YOURBONDS]}\n          activeOption={activeView}\n          handleToggle={handleToogle}\n        />\n      </div>\n      <Flex sx={{ width: '100%' }}>{activeView === BondsViewOptions.BONDSMARKET ? <Bonds /> : <YourBonds />}</Flex>\n    </div>\n  )\n}\n\nexport default FullBondsView\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAQA,MAAM,aAAa,GAAG,MAAK;IACzB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE;AACpD,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;IAEhC,QACEA,cAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAA,CACvC,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,MAC5CA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAAA,6BAAA,EACpB,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,CAAA,EAAA,CACnE,CACR,EACDC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAC/BA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC,SAAS,CAAC,EACnE,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,YAAY,EAAA,CAC1B,EAAA,CACE,EACNA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,UAAU,KAAK,gBAAgB,CAAC,WAAW,GAAGA,IAAC,KAAK,EAAA,EAAA,CAAG,GAAGA,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CAAQ,CAAA,EAAA,CACzG;AAEV;;;;"}

package/dist/views/FullBondsView/index.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import Providers from '../../providers/index.js';
 import FullBondsView from './FullBondsView.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';

package/dist/views/LifiModal/LifiModal.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 declare const LifiModal: ({ bondChain, principalToken, onDismiss, }: {
     bondChain?: number;
     principalToken?: string;
     onDismiss?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default LifiModal;

package/dist/views/LifiModal/LifiModal.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { LiFiWidget } from '@lifi/widget';
 import Modal from '../../components/uikit-sdk/Modal/index.js';
 import ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader.js';
@@ -61,7 +61,7 @@ const LifiModal = ({ bondChain, principalToken, onDismiss, }) => {
             },
         },
     };
-    return (jsxs(Modal, { className: "ape:min-w-[450px] ape:justify-center ape:items-center ape:p-0", children: [jsx(ModalHeader, { onDismiss: onDismiss, hideDivider: true, className: "ape:p-[20px_20px_0_20px]", children: jsx(Text, { size: "22px", weight: 700, style: { lineHeight: '33px' }, children: "Swap & Bridge with LIFI" }) }), jsx(LiFiWidget, { ...config })] }));
+    return (jsxs(Modal, { sx: { minWidth: '450px', justifyContent: 'center', alignItems: 'center', p: '0px' }, children: [jsx(ModalHeader, { onDismiss: onDismiss, hideDivider: true, sx: { p: '20px 20px 0 20px' }, children: jsx(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: "Swap & Bridge with LIFI" }) }), jsx(LiFiWidget, { ...config })] }));
 };
 
 export { LifiModal as default };

package/dist/views/LifiModal/LifiModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"LifiModal.js","sources":["../../../src/views/LifiModal/LifiModal.tsx"],"sourcesContent":["import React from 'react'\nimport { LiFiWidget } from '@lifi/widget'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader'\nimport Text from '../../components/uikit-sdk/Text'\n\nconst getFees = async (fromTokenSymbol: string, toTokenSymbol: string): Promise<number> => {\n  const stableCoins = ['FRAX', 'USDC', 'USDT', 'DAI', 'BUSD', 'TUSD', 'USDD', 'FDUSD']\n  const isFromStable = stableCoins.includes(fromTokenSymbol)\n  const isToStable = stableCoins.includes(toTokenSymbol)\n  if (toTokenSymbol.toLowerCase() === 'abond') {\n    return 0\n  }\n  return isFromStable && isToStable ? 0.001 : 0.003\n}\n\nconst LifiModal = ({\n  bondChain,\n  principalToken,\n  onDismiss,\n}: {\n  bondChain?: number\n  principalToken?: string\n  onDismiss?: () => void\n}) => {\n  const config = {\n    appearance: 'dark' as const,\n    loadFonts: false,\n    theme: {\n      typography: {\n        fontFamily: 'Poppins',\n      },\n      colorSchemes: {\n        dark: {\n          palette: {\n            background: {\n              default: '#161420',\n              paper: '#1F1D29',\n            },\n            primary: {\n              main: '#6560C5',\n            },\n            secondary: {\n              main: '#6560C5',\n            },\n          },\n        },\n      },\n      container: {\n        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',\n        borderRadius: '16px',\n      },\n    },\n    // fromToken: 'BNB',\n    // fromChain: ChainId.BSC,\n    toChain: bondChain,\n    toToken: principalToken,\n    sdkConfig: {\n      rpcUrls: {\n        [1151111081099710]: [\n          'https://ancient-cold-sailboat.solana-mainnet.quiknode.pro/da13400ad8d0035313f3e71c6a37c107d0d0334b',\n        ],\n      },\n    },\n    variant: 'wide' as const,\n    integrator: 'apeswap',\n    feeConfig: {\n      calculateFee: async (params: any) => {\n        return getFees(params.fromToken.symbol, params.toToken.symbol)\n      },\n    },\n  }\n\n  return (\n    <Modal className=\"ape:min-w-[450px] ape:justify-center ape:items-center ape:p-0\">\n      <ModalHeader onDismiss={onDismiss} hideDivider className=\"ape:p-[20px_20px_0_20px]\">\n        <Text size=\"22px\" weight={700} style={{ lineHeight: '33px' }}>\n          Swap & Bridge with LIFI\n        </Text>\n      </ModalHeader>\n      <LiFiWidget {...config} />\n    </Modal>\n  )\n}\n\nexport default LifiModal\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMA,MAAM,OAAO,GAAG,OAAO,eAAuB,EAAE,aAAqB,KAAqB;AACxF,IAAA,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;IACpF,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,eAAe,CAAC;IAC1D,MAAM,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC;AACtD,IAAA,IAAI,aAAa,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;AAC3C,QAAA,OAAO,CAAC;IACV;IACA,OAAO,YAAY,IAAI,UAAU,GAAG,KAAK,GAAG,KAAK;AACnD,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,cAAc,EACd,SAAS,GAKV,KAAI;AACH,IAAA,MAAM,MAAM,GAAG;AACb,QAAA,UAAU,EAAE,MAAe;AAC3B,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE;AACL,YAAA,UAAU,EAAE;AACV,gBAAA,UAAU,EAAE,SAAS;AACtB,aAAA;AACD,YAAA,YAAY,EAAE;AACZ,gBAAA,IAAI,EAAE;AACJ,oBAAA,OAAO,EAAE;AACP,wBAAA,UAAU,EAAE;AACV,4BAAA,OAAO,EAAE,SAAS;AAClB,4BAAA,KAAK,EAAE,SAAS;AACjB,yBAAA;AACD,wBAAA,OAAO,EAAE;AACP,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;AACD,wBAAA,SAAS,EAAE;AACT,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;AACD,YAAA,SAAS,EAAE;AACT,gBAAA,SAAS,EAAE,kCAAkC;AAC7C,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACF,SAAA;;;AAGD,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,SAAS,EAAE;AACT,YAAA,OAAO,EAAE;gBACP,CAAC,gBAAgB,GAAG;oBAClB,oGAAoG;AACrG,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA,OAAO,EAAE,MAAe;AACxB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,SAAS,EAAE;AACT,YAAA,YAAY,EAAE,OAAO,MAAW,KAAI;AAClC,gBAAA,OAAO,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;YAChE,CAAC;AACF,SAAA;KACF;IAED,QACEA,KAAC,KAAK,EAAA,EAAC,SAAS,EAAC,+DAA+D,EAAA,QAAA,EAAA,CAC9EC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAA,IAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,QAAA,EACjFA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,yBAAA,EAAA,CAErD,EAAA,CACK,EACdA,GAAA,CAAC,UAAU,OAAK,MAAM,EAAA,CAAI,CAAA,EAAA,CACpB;AAEZ;;;;"}
+{"version":3,"file":"LifiModal.js","sources":["../../../src/views/LifiModal/LifiModal.tsx"],"sourcesContent":["import React from 'react'\nimport { LiFiWidget } from '@lifi/widget'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader'\nimport Text from '../../components/uikit-sdk/Text'\n\nconst getFees = async (fromTokenSymbol: string, toTokenSymbol: string): Promise<number> => {\n  const stableCoins = ['FRAX', 'USDC', 'USDT', 'DAI', 'BUSD', 'TUSD', 'USDD', 'FDUSD']\n  const isFromStable = stableCoins.includes(fromTokenSymbol)\n  const isToStable = stableCoins.includes(toTokenSymbol)\n  if (toTokenSymbol.toLowerCase() === 'abond') {\n    return 0\n  }\n  return isFromStable && isToStable ? 0.001 : 0.003\n}\n\nconst LifiModal = ({\n  bondChain,\n  principalToken,\n  onDismiss,\n}: {\n  bondChain?: number\n  principalToken?: string\n  onDismiss?: () => void\n}) => {\n  const config = {\n    appearance: 'dark' as const,\n    loadFonts: false,\n    theme: {\n      typography: {\n        fontFamily: 'Poppins',\n      },\n      colorSchemes: {\n        dark: {\n          palette: {\n            background: {\n              default: '#161420',\n              paper: '#1F1D29',\n            },\n            primary: {\n              main: '#6560C5',\n            },\n            secondary: {\n              main: '#6560C5',\n            },\n          },\n        },\n      },\n      container: {\n        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',\n        borderRadius: '16px',\n      },\n    },\n    // fromToken: 'BNB',\n    // fromChain: ChainId.BSC,\n    toChain: bondChain,\n    toToken: principalToken,\n    sdkConfig: {\n      rpcUrls: {\n        [1151111081099710]: [\n          'https://ancient-cold-sailboat.solana-mainnet.quiknode.pro/da13400ad8d0035313f3e71c6a37c107d0d0334b',\n        ],\n      },\n    },\n    variant: 'wide' as const,\n    integrator: 'apeswap',\n    feeConfig: {\n      calculateFee: async (params: any) => {\n        return getFees(params.fromToken.symbol, params.toToken.symbol)\n      },\n    },\n  }\n\n  return (\n    <Modal sx={{ minWidth: '450px', justifyContent: 'center', alignItems: 'center', p: '0px' }}>\n      <ModalHeader onDismiss={onDismiss} hideDivider sx={{ p: '20px 20px 0 20px' }}>\n        <Text sx={{ fontSize: '22px', fontWeight: 700, lineHeight: '33px' }}>Swap & Bridge with LIFI</Text>\n      </ModalHeader>\n      <LiFiWidget {...config} />\n    </Modal>\n  )\n}\n\nexport default LifiModal\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMA,MAAM,OAAO,GAAG,OAAO,eAAuB,EAAE,aAAqB,KAAqB;AACxF,IAAA,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;IACpF,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,eAAe,CAAC;IAC1D,MAAM,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC;AACtD,IAAA,IAAI,aAAa,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;AAC3C,QAAA,OAAO,CAAC;IACV;IACA,OAAO,YAAY,IAAI,UAAU,GAAG,KAAK,GAAG,KAAK;AACnD,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,cAAc,EACd,SAAS,GAKV,KAAI;AACH,IAAA,MAAM,MAAM,GAAG;AACb,QAAA,UAAU,EAAE,MAAe;AAC3B,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE;AACL,YAAA,UAAU,EAAE;AACV,gBAAA,UAAU,EAAE,SAAS;AACtB,aAAA;AACD,YAAA,YAAY,EAAE;AACZ,gBAAA,IAAI,EAAE;AACJ,oBAAA,OAAO,EAAE;AACP,wBAAA,UAAU,EAAE;AACV,4BAAA,OAAO,EAAE,SAAS;AAClB,4BAAA,KAAK,EAAE,SAAS;AACjB,yBAAA;AACD,wBAAA,OAAO,EAAE;AACP,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;AACD,wBAAA,SAAS,EAAE;AACT,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;AACD,YAAA,SAAS,EAAE;AACT,gBAAA,SAAS,EAAE,kCAAkC;AAC7C,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACF,SAAA;;;AAGD,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,SAAS,EAAE;AACT,YAAA,OAAO,EAAE;gBACP,CAAC,gBAAgB,GAAG;oBAClB,oGAAoG;AACrG,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA,OAAO,EAAE,MAAe;AACxB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,SAAS,EAAE;AACT,YAAA,YAAY,EAAE,OAAO,MAAW,KAAI;AAClC,gBAAA,OAAO,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;YAChE,CAAC;AACF,SAAA;KACF;AAED,IAAA,QACEA,IAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CACxFC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAA,IAAA,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,kBAAkB,EAAE,YAC1EA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAgC,EAAA,CACvF,EACdA,GAAA,CAAC,UAAU,EAAA,EAAA,GAAK,MAAM,EAAA,CAAI,CAAA,EAAA,CACpB;AAEZ;;;;"}

package/dist/views/ProjectView/ProjectView.js

@@ -1,7 +1,8 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
 import { useEffect } from 'react';
 import useBondsData from '../../state/bonds/useBondsData.js';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
+import { styles } from './styles.js';
 import RecommendationCards from './components/RecommendationCards/index.js';
 import NavPanel from './components/NavPanel/index.js';
 import BondCards from '../BuyBond/components/BondCards/BondCards.js';
@@ -32,7 +33,19 @@ const ProjectView = ({ bondAddress, bondChain }) => {
         }
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [Object.keys(tokenPrices ?? {})?.length, bonds?.length, refetch]);
-    return (jsxs(Flex, { className: "ape:w-full ape:flex-col ape:mt-[15px] ape:max-w-[1150px]", children: [jsx(RecommendationCards, {}), jsx(NavPanel, { contractAddress: bondData?.contractAddress?.[bondData.chainId] }), bondData && (jsx(Flex, { className: "ape:w-full ape:mt-[10px] ape:hidden ape:md:block ape:[&>div>div]:bg-white2", children: jsx(BondCards, { bondData: bondData }) })), bondData ? (jsx(Fragment, { children: jsxs(Flex, { className: "ape:w-full ape:flex-col ape:mt-[10px]", children: [jsxs(Flex, { className: "ape:w-full ape:flex-col ape:md:flex-row ape:items-stretch", children: [jsx(Flex, { className: "ape:bg-white2 ape:rounded-normal ape:w-full ape:md:w-1/2 ape:mt-[5px]", children: jsx(BuyBond, { bondAddress: bondData?.contractAddress?.[bondData.chainId], bondChain: bondData.chainId, isProjectView: true }) }), jsx(PriceChart, { selectedBond: bondData, historicalPrices: historicalPrices })] }), jsx(Flex, { className: "ape:w-full ape:mt-[10px]", children: jsx(ProjectInfo, { selectedBond: bondData }) }), jsx(Flex, { className: "ape:w-full ape:mt-[10px]", children: jsx(BondStats, { selectedBond: bondData }) }), jsx(Flex, { className: "ape:w-full ape:mt-[10px] ape:mb-[50px]", children: jsx(BondLeaderboard, { selectedBond: bondData }) })] }) })) : (jsx(Flex, { className: "ape:w-full ape:justify-center ape:text-[12px] ape:font-medium", children: "Loading..." }))] }));
+    return (jsxs(Flex, { sx: styles.mainViewContainer, children: [jsx(RecommendationCards, {}), jsx(NavPanel, { contractAddress: bondData?.contractAddress?.[bondData.chainId] }), bondData && (jsx(Flex, { sx: {
+                    width: '100%',
+                    mt: '10px',
+                    display: ['none', 'none', 'none', 'block'],
+                    '&& > div > div': {
+                        background: 'white2',
+                    },
+                }, children: jsx(BondCards, { bondData: bondData }) })), bondData ? (jsx(Fragment, { children: jsxs(Flex, { sx: { width: '100%', flexDirection: 'column', mt: '10px' }, children: [jsxs(Flex, { sx: { width: '100%', flexDirection: ['column', 'column', 'column', 'row'], alignItems: 'stretch' }, children: [jsx(Flex, { sx: {
+                                        background: 'white2',
+                                        borderRadius: 'normal',
+                                        width: ['100%', '100%', '100%', '50%'],
+                                        mt: '5px',
+                                    }, children: jsx(BuyBond, { bondAddress: bondData?.contractAddress?.[bondData.chainId], bondChain: bondData.chainId, isProjectView: true }) }), jsx(PriceChart, { selectedBond: bondData, historicalPrices: historicalPrices })] }), jsx(Flex, { sx: { width: '100%', mt: '10px' }, children: jsx(ProjectInfo, { selectedBond: bondData }) }), jsx(Flex, { sx: { width: '100%', mt: '10px' }, children: jsx(BondStats, { selectedBond: bondData }) }), jsx(Flex, { sx: { width: '100%', mt: '10px', mb: '50px' }, children: jsx(BondLeaderboard, { selectedBond: bondData }) })] }) })) : (jsx(Flex, { sx: { width: '100%', justifyContent: 'center', fontSize: '12px', fontWeight: 500 }, children: "Loading..." }))] }));
 };
 
 export { ProjectView as default };

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

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

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

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

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

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

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