@ape.swap/bonds-sdk 6.2.28 → 7.0.0-test.0

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 { 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// always a separate flex item (not inline text) so it stays pinned to the row's right edge\n// via the row's `justify-between`, instead of trailing wherever the sentence happens to end\nconst upgradeNowClasses =\n  'ape:ml-[5px] ape:mr-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:flex ape:shrink-0 ape:whitespace-nowrap'\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(\n    inputAmount,\n    promotionalPoints!,\n    bond,\n    inputTokenPrice,\n    Number(abondPrice),\n  )\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    <Flex\n      className=\"ape:w-full 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:px-2.5 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      ) : shouldRenderNextTierRow ? (\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-middle\">\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>\n          <span className={upgradeNowClasses} 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      ) : null}\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-[23px] 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-middle\">\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                  <span\n                    className={upgradeNowClasses}\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\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 from '../../../../state/tiers/useTierPoints'\nimport { getUserTier, TIERS_COLORS } from '../../../../state/tiers/tiers'\nimport { 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// always a separate flex item (not inline text) so it stays pinned to the row's right edge\n// via the row's `justify-between`, instead of trailing wherever the sentence happens to end\nconst upgradeNowClasses =\n  'ape:ml-[5px] ape:mr-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:flex ape:shrink-0 ape:whitespace-nowrap'\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(\n    inputAmount,\n    promotionalPoints!,\n    bond,\n    inputTokenPrice,\n    Number(abondPrice),\n  )\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    <Flex\n      className=\"ape:w-full 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:px-2.5 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      ) : shouldRenderNextTierRow ? (\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-middle\">\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>\n          <span className={upgradeNowClasses} 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      ) : null}\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-[23px] 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-middle\">\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                  <span\n                    className={upgradeNowClasses}\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\nexport default PointsLeftForNextTier\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;AAeA,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;AACA;AACA,MAAM,iBAAiB,GACrB,sJAAsJ;AAExJ,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,CAChD,WAAW,EACX,iBAAkB,EAClB,IAAI,EACJ,eAAe,EACf,MAAM,CAAC,UAAU,CAAC,CACnB;IACD,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;IAED,QACEA,KAAC,IAAI,EAAA,EACH,SAAS,EAAC,sEAAsE,EAChF,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,qBAAqB,GAAG,SAAS,GAAG,SAAS,EAAE,EACjE,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,CAEhC,qBAAqB,IACpBA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,wLAAwL,EAClM,KAAK,EAAE;AACL,oBAAA,WAAW,EAAE,yBAAyB;AACtC,oBAAA,UAAU,EAAE,kDAAkD;AAC9D,oBAAA,KAAK,EAAE,2BAA2B;AACnC,iBAAA,EAAA,QAAA,EAAA,CAEDA,eAAM,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CAC1BC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAC1DA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CACpC,EACPA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAwB,mEAEvDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,qBAAqB,EAAE,IAAI,CAAC,EAAE,EAAA,QAAA,EACxF,qBAAqB,CAAC,QAAQ,GAC1B,EAAC,GAAG,EACXA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,sBAAa,CAAA,EAAA,CACvC,EACN,CAAC,qBAAqB,IAAIA,GAAA,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,CAAA,EAAA,CAC7E,IACL,uBAAuB,IACzBD,IAAA,CAAC,IAAI,IACH,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAC,sMAAsM,EAChN,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,GAAG,KAAK,GAAG,KAAK,EAAE,aAElFA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CAC1BC,cAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAChDA,aACE,GAAG,EAAE,kCAAkC,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA,IAAA,CAAM,EAClF,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,YAAY,EAAE,sBAAuB,CAAC,EAAA,4BAAA,EAC/DA,cAAM,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,YAChG,YAAY,EAAE,QAAQ,EAAA,CAClB,aAEF,EACPA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,qBAAqB,CAAC,CAAC,CAAC,YACzE,CAAA,aAAA,CAAe,EAAA,CACX,EACN,0BAA0B,KACzBA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAC,kCAAkC,EAC5C,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAC,QAAQ,gBACD,MAAM,GAAG,oBAAoB,GAAG,kBAAkB,EAAA,QAAA,EAE9DA,IAAC,KAAK,EAAA,EAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAA,CAAI,EAAA,CACjD,CACR,CAAA,EAAA,CACI,IACL,IAAI,EACRA,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,SAAS,EAAC,gEAAgE,EAAA,QAAA,EAEzE,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;wBACpF,QACED,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,oLAAoL,EAC9L,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,EAAE,EACxE,OAAO,EAAE,gBAAgB,EAAA,QAAA,EAAA,CAGzBA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CAC1BC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAChDA,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,EAAA,WAAA,EACG,cAAc,CAAC,IAAI,EAAE,sBAAuB,CAAC,EAAA,4BAAA,EACvDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAA,QAAA,EACxF,IAAI,EAAE,QAAQ,EAAA,CACV,EAAA,OAAA,CAAA,EAAA,CAEF,EACPA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,iBAAiB,EAC5B,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,EAzBF,IAAI,CAAC,QAAQ,CA0Bb;AAEX,oBAAA,CAAC,CAAC,EAAA,CACS,CACd,EAAA,CACe,CAAA,EAAA,CACb;AAEX;;;;"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BuyComponentProps } from './BuyComponent';
+import type { ChainBuyComponentProps } from '../../adapters/types';
 import { SDKPropsDTO } from '../../state/useSDKConfig';
-interface Props extends SDKPropsDTO, BuyComponentProps {
+interface Props extends SDKPropsDTO, ChainBuyComponentProps {
 }
 declare const BuyBondModalWithProviders: React.FC<Props>;
 export default BuyBondModalWithProviders;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/views/BuyBond/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport { BuyComponentProps } from './BuyComponent'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\nimport BuyBondModal from './BuyBondModal'\n\ninterface Props extends SDKPropsDTO, BuyComponentProps {}\n\nconst BuyBondModalWithProviders: React.FC<Props> = (props) => {\n  useSDKConfig(props)\n\n  return (\n    <Providers>\n      <BuyBondModal {...props} />\n    </Providers>\n  )\n}\n\nexport default BuyBondModalWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,yBAAyB,GAAoB,CAAC,KAAK,KAAI;IAC3D,YAAY,CAAC,KAAK,CAAC;IAEnB,QACEA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACRA,GAAA,CAAC,YAAY,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI,EAAA,CACjB;AAEhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/views/BuyBond/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport type { ChainBuyComponentProps } from '../../adapters/types'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\nimport BuyBondModal from './BuyBondModal'\n\ninterface Props extends SDKPropsDTO, ChainBuyComponentProps {}\n\nconst BuyBondModalWithProviders: React.FC<Props> = (props) => {\n  useSDKConfig(props)\n\n  return (\n    <Providers>\n      <BuyBondModal {...props} />\n    </Providers>\n  )\n}\n\nexport default BuyBondModalWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,yBAAyB,GAAoB,CAAC,KAAK,KAAI;IAC3D,YAAY,CAAC,KAAK,CAAC;IAEnB,QACEA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACRA,GAAA,CAAC,YAAY,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI,EAAA,CACjB;AAEhB;;;;"}

package/dist/views/BuyBond/utils.js

@@ -1,5 +1,5 @@
 import { findHighestTrueBondPrice } from '../../utils/bondPriceHelpers.js';
-import { getUserTier, TIERS_NAMES } from '../../state/tiers/useTierPoints.js';
+import { getUserTier, TIERS_NAMES } from '../../state/tiers/tiers.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 
 function calculateOptimizationData(inputAmount, userPoints = '0', bond, inputTokenPriceUsd = 0, abondPriceUsd) {

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/views/BuyBond/utils.ts"],"sourcesContent":["import { BondsData } from '../../types/bonds'\nimport { findHighestTrueBondPrice } from '../../utils/bondPriceHelpers'\nimport { getUserTier, NewTiers, TIERS_NAMES } from '../../state/tiers/useTierPoints'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nexport function calculateOptimizationData(\n  inputAmount: string,\n  userPoints = '0',\n  bond: BondsData,\n  inputTokenPriceUsd = 0,\n  abondPriceUsd?: number,\n) {\n  if (bond.chainId === ChainId.SUI || bond.chainId === ChainId.APTOS || bond.chainId === ChainId.SOL) return null\n\n  const { trueBondPrices } = bond\n\n  if (!trueBondPrices) {\n    console.log('no truebondprices')\n    return null\n  }\n  if (!abondPriceUsd) {\n    console.log('No Abond Price')\n    return null\n  }\n\n  if (inputTokenPriceUsd <= 0) {\n    console.log('missing token price')\n    return null\n  }\n\n  const currentTierData = findHighestTrueBondPrice(userPoints, trueBondPrices)\n  const currentTier = getUserTier(userPoints)!\n\n  // const bonus_curr = 1 + currentTierData?.bonusWithFee! / 100\n  const currentPoints = BigInt(userPoints)\n\n  const inputAmountUSD = parseFloat(inputAmount || '0') * inputTokenPriceUsd\n\n  const tierBoostRate = (bond.tierBoostRate ?? 0) / 100\n  const tierBoostUsd = inputAmountUSD * tierBoostRate\n  const feeInAbond = tierBoostUsd / abondPriceUsd\n  const tierBoostPoints = feeInAbond * 4\n  const currentPrice = parseFloat(currentTierData?.trueBondPrice!)\n\n  const dataToReturn: Record<\n    number,\n    {\n      tier: number\n      tierName: string\n      isProfitable: boolean\n      tierCostUSD: number\n      minBreakevenWithFeeUSD: number\n      necessaryPointsToUpgrade: number\n    }\n  > = {}\n\n  for (const tierData of trueBondPrices) {\n    if (tierData.boost <= currentTier) continue\n    // @ts-ignore\n    const tierName = TIERS_NAMES[tierData.boost]\n\n    const pointsNeededWei = BigInt(tierData.points) - currentPoints\n    const abondNeededRaw = Math.ceil(Number(pointsNeededWei) / 1e18 / 4)\n\n    const tierCostUsd = abondNeededRaw * abondPriceUsd\n    const newPrice = parseFloat(tierData.trueBondPrice)\n    const priceDiff = (currentPrice - newPrice) / currentPrice\n\n    // const newBonusWithThisTier = tierData.bonusWithFee\n\n    // const bonus_new = 1 + newBonusWithThisTier / 100\n\n    // const denominator = bonus_new - bonus_curr + tierBoostRate\n    const denominator = (1 - tierBoostRate) * priceDiff + tierBoostRate\n    const minBreakeven = denominator > 0 ? tierCostUsd / denominator : Infinity\n    const minBreakevenWithFee = minBreakeven * 1.05 + 0.1\n\n    // for debugging purposes this two should match\n    // const originalOutputUsd = minBreakeven * bonus_curr\n    // const outputAfterUpgrade = (minBreakeven - (tierCostUsd - minBreakeven * tierBoostRate)) * bonus_new\n\n    const isProfitable = inputAmountUSD > (minBreakevenWithFee ?? 0)\n\n    dataToReturn[tierData.boost] = {\n      tier: tierData.boost as NewTiers,\n      tierName,\n      isProfitable,\n      tierCostUSD: tierCostUsd,\n      minBreakevenWithFeeUSD: minBreakevenWithFee,\n      necessaryPointsToUpgrade: abondNeededRaw * 4,\n    }\n  }\n\n  const profitableTiers = Object.values(dataToReturn).filter((item) => item.isProfitable)\n  const highestProfitableTier = profitableTiers[profitableTiers.length - 1]\n\n  return { tierBoostPoints, highestProfitableTier, data: Object.values(dataToReturn) }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/views/BuyBond/utils.ts"],"sourcesContent":["import { BondsData } from '../../types/bonds'\nimport { findHighestTrueBondPrice } from '../../utils/bondPriceHelpers'\nimport { getUserTier, NewTiers, TIERS_NAMES } from '../../state/tiers/tiers'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nexport function calculateOptimizationData(\n  inputAmount: string,\n  userPoints = '0',\n  bond: BondsData,\n  inputTokenPriceUsd = 0,\n  abondPriceUsd?: number,\n) {\n  if (bond.chainId === ChainId.SUI || bond.chainId === ChainId.APTOS || bond.chainId === ChainId.SOL) return null\n\n  const { trueBondPrices } = bond\n\n  if (!trueBondPrices) {\n    console.log('no truebondprices')\n    return null\n  }\n  if (!abondPriceUsd) {\n    console.log('No Abond Price')\n    return null\n  }\n\n  if (inputTokenPriceUsd <= 0) {\n    console.log('missing token price')\n    return null\n  }\n\n  const currentTierData = findHighestTrueBondPrice(userPoints, trueBondPrices)\n  const currentTier = getUserTier(userPoints)!\n\n  // const bonus_curr = 1 + currentTierData?.bonusWithFee! / 100\n  const currentPoints = BigInt(userPoints)\n\n  const inputAmountUSD = parseFloat(inputAmount || '0') * inputTokenPriceUsd\n\n  const tierBoostRate = (bond.tierBoostRate ?? 0) / 100\n  const tierBoostUsd = inputAmountUSD * tierBoostRate\n  const feeInAbond = tierBoostUsd / abondPriceUsd\n  const tierBoostPoints = feeInAbond * 4\n  const currentPrice = parseFloat(currentTierData?.trueBondPrice!)\n\n  const dataToReturn: Record<\n    number,\n    {\n      tier: number\n      tierName: string\n      isProfitable: boolean\n      tierCostUSD: number\n      minBreakevenWithFeeUSD: number\n      necessaryPointsToUpgrade: number\n    }\n  > = {}\n\n  for (const tierData of trueBondPrices) {\n    if (tierData.boost <= currentTier) continue\n    // @ts-ignore\n    const tierName = TIERS_NAMES[tierData.boost]\n\n    const pointsNeededWei = BigInt(tierData.points) - currentPoints\n    const abondNeededRaw = Math.ceil(Number(pointsNeededWei) / 1e18 / 4)\n\n    const tierCostUsd = abondNeededRaw * abondPriceUsd\n    const newPrice = parseFloat(tierData.trueBondPrice)\n    const priceDiff = (currentPrice - newPrice) / currentPrice\n\n    // const newBonusWithThisTier = tierData.bonusWithFee\n\n    // const bonus_new = 1 + newBonusWithThisTier / 100\n\n    // const denominator = bonus_new - bonus_curr + tierBoostRate\n    const denominator = (1 - tierBoostRate) * priceDiff + tierBoostRate\n    const minBreakeven = denominator > 0 ? tierCostUsd / denominator : Infinity\n    const minBreakevenWithFee = minBreakeven * 1.05 + 0.1\n\n    // for debugging purposes this two should match\n    // const originalOutputUsd = minBreakeven * bonus_curr\n    // const outputAfterUpgrade = (minBreakeven - (tierCostUsd - minBreakeven * tierBoostRate)) * bonus_new\n\n    const isProfitable = inputAmountUSD > (minBreakevenWithFee ?? 0)\n\n    dataToReturn[tierData.boost] = {\n      tier: tierData.boost as NewTiers,\n      tierName,\n      isProfitable,\n      tierCostUSD: tierCostUsd,\n      minBreakevenWithFeeUSD: minBreakevenWithFee,\n      necessaryPointsToUpgrade: abondNeededRaw * 4,\n    }\n  }\n\n  const profitableTiers = Object.values(dataToReturn).filter((item) => item.isProfitable)\n  const highestProfitableTier = profitableTiers[profitableTiers.length - 1]\n\n  return { tierBoostPoints, highestProfitableTier, data: Object.values(dataToReturn) }\n}\n"],"names":[],"mappings":"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"}

package/dist/views/ProjectView/ProjectView.js

@@ -9,7 +9,7 @@ import ProjectInfo from './components/ProjectInfo/index.js';
 import BondStats from './components/BondStats/index.js';
 import BondLeaderboard from './components/BondLeaderboard/index.js';
 import PriceChart from './components/PriceChart/index.js';
-import BuyBond from '../BuyBond/BuyComponent.js';
+import ChainBuyComponent from '../BuyBond/ChainBuyComponent.js';
 import useTokenPrices from '../../state/tokenPrices/useTokenPrices.js';
 import useHistoricalPrice from '../../state/historicalPrice/useHistoricalPrice.js';
 
@@ -32,7 +32,7 @@ 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]", 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] ape:[&>div]:pt-0!", 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, { className: "ape:w-full ape:flex-col ape:mt-[15px]", 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] ape:[&>div]:pt-0!", children: jsx(ChainBuyComponent, { 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..." }))] }));
 };
 
 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]\">\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] ape:[&>div]:pt-0!\">\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 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 ChainBuyComponent from '../BuyBond/ChainBuyComponent'\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]\">\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] ape:[&>div]:pt-0!\">\n                <ChainBuyComponent\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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"}

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

@@ -2,10 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 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';
-import useEVMAccount from '../../../../../hooks/accounts/useEVMAccount.js';
+import useChainAccount from '../../../../../state/chainAccount/useChainAccount.js';
 
 const SalesTable = ({ allSales }) => {
-    const { address: account } = useEVMAccount();
+    const { address: account } = useChainAccount('evm');
     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 &&
                     allSales.length > 0 &&
                     allSales.map((sale, index) => {

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 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 useChainAccount from '../../../../../state/chainAccount/useChainAccount'\n\nconst SalesTable = ({ allSales }: { allSales: Sales[] | undefined }) => {\n  const { address: account } = useChainAccount('evm')\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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"}

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

@@ -2,10 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import Flex from '../../../../../components/uikit-sdk/Flex/index.js';
 import { formatUTCDate } from '../../../../../utils/dates/formatDate.js';
-import useEVMAccount from '../../../../../hooks/accounts/useEVMAccount.js';
+import useChainAccount from '../../../../../state/chainAccount/useChainAccount.js';
 
 const TopSaleCard = ({ sale, position }) => {
-    const { address: account } = useEVMAccount();
+    const { address: account } = useChainAccount('evm');
     const buyer = sale?.createdAddressOwner;
     const isUserTheBuyer = buyer?.toLowerCase() === account?.toLowerCase();
     const receivedUsdAmount = (sale?.payout ?? 0) * (sale?.payoutTokenPrice ?? 0);

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

@@ -1 +1 @@
-{"version":3,"file":"TopSaleCard.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/TopSaleCard.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../../../../../components/uikit-sdk/Flex'\nimport { formatUTCDate } from '../../../../../utils/dates/formatDate'\nimport { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats'\nimport useEVMAccount from '../../../../../hooks/accounts/useEVMAccount'\n\nconst TopSaleCard = ({ sale, position }: { sale?: Sales; position: number }) => {\n  const { address: account } = useEVMAccount()\n  const buyer = sale?.createdAddressOwner\n  const isUserTheBuyer = buyer?.toLowerCase() === account?.toLowerCase()\n  const receivedUsdAmount = (sale?.payout ?? 0) * (sale?.payoutTokenPrice ?? 0)\n  const discount = 100 - ((sale?.dollarValue ?? 0) * 100) / receivedUsdAmount\n\n  const borderColor = ['2px solid #E6C7B180', '2px solid #D5CDE480', '2px solid #D2B0BA80']\n  const sizeClasses = [\n    'ape:w-[60px] ape:h-[60px] ape:md:w-[225px] ape:md:h-[225px]',\n    'ape:w-[60px] ape:h-[60px] ape:md:w-[200px] ape:md:h-[200px]',\n    'ape:w-[60px] ape:h-[60px] ape:md:w-[200px] ape:md:h-[200px]',\n  ]\n\n  return (\n    <Flex\n      className=\"ape:w-full ape:p-[20px] ape:rounded-normal ape:relative ape:overflow-hidden\"\n      style={{ border: borderColor[position - 1], backgroundImage: 'url(/images/singleBondPage/background.png)' }}\n    >\n      <Flex className=\"ape:w-full ape:md:w-[180px] ape:flex-col\">\n        <Flex>\n          <Flex className=\"ape:w-[30px] ape:h-[30px] ape:justify-center ape:items-center ape:rounded-[50px]\" style={{ background: 'linear-gradient(90deg, #AA80F9 0%, #6165D7 100%)' }}>\n            {position}\n          </Flex>\n          <Flex className=\"ape:flex-col ape:ml-[10px]\">\n            <Flex className=\"ape:text-[10px]\" style={{ color: 'var(--ape-color-text-disabled-button)' }}>\n              Buyer\n            </Flex>\n            <Flex className=\"ape:text-[12px] ape:relative\" style={{ lineHeight: '13px' }}>\n              {buyer?.slice(0, 4)}...\n              {buyer?.slice(buyer?.length - 4, buyer?.length)}\n              {isUserTheBuyer && (\n                <Flex\n                  className=\"ape-you-card ape:bg-primary-button ape:rounded-[0px_10px_10px_0px] ape:p-[2.5px_5px] ape:text-[12px] ape:font-normal\"\n                  style={{ lineHeight: '12px' }}\n                >\n                  You\n                </Flex>\n              )}\n            </Flex>\n          </Flex>\n        </Flex>\n        <Flex className=\"ape:mt-[20px] ape:w-full ape:text-[12px] ape:font-normal ape:flex-col\">\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex>Deposit Amount:</Flex>\n            <Flex>${sale?.dollarValue.toFixed(2)}</Flex>\n          </Flex>\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex>Payout Amount:</Flex>\n            <Flex>${receivedUsdAmount?.toFixed(2)}</Flex>\n          </Flex>\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex>Bonus:</Flex>\n            <Flex style={{ color: discount > 0 ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }}>\n              {discount?.toFixed(2)}%\n            </Flex>\n          </Flex>\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex>Date:</Flex>\n            <Flex>{formatUTCDate(new Date((sale?.createdAt ?? 0) * 1000))}</Flex>\n          </Flex>\n        </Flex>\n      </Flex>\n      <img\n        src={`https://ape.bond/images/singleBondPage/${position}.png`}\n        alt=\"ads\"\n        className={clsx(\n          'ape:object-contain ape:absolute ape:bottom-[unset] ape:md:bottom-[-15px] ape:right-[10px] ape:md:right-[-50px] ape:top-0 ape:md:top-[unset]',\n          sizeClasses[position - 1],\n        )}\n      />\n      <Flex\n        className=\"ape:absolute ape:w-1/2 ape:right-0 ape:h-full ape:opacity-20\"\n        style={{ background: '#BF5AC7', filter: 'blur(92px)' }}\n      />\n    </Flex>\n  )\n}\n\nexport default TopSaleCard\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"TopSaleCard.js","sources":["../../../../../../src/views/ProjectView/components/BondLeaderboard/components/TopSaleCard.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../../../../../components/uikit-sdk/Flex'\nimport { formatUTCDate } from '../../../../../utils/dates/formatDate'\nimport { Sales } from '../../../../../state/bondApiStats/useGetBondApiStats'\nimport useChainAccount from '../../../../../state/chainAccount/useChainAccount'\n\nconst TopSaleCard = ({ sale, position }: { sale?: Sales; position: number }) => {\n  const { address: account } = useChainAccount('evm')\n  const buyer = sale?.createdAddressOwner\n  const isUserTheBuyer = buyer?.toLowerCase() === account?.toLowerCase()\n  const receivedUsdAmount = (sale?.payout ?? 0) * (sale?.payoutTokenPrice ?? 0)\n  const discount = 100 - ((sale?.dollarValue ?? 0) * 100) / receivedUsdAmount\n\n  const borderColor = ['2px solid #E6C7B180', '2px solid #D5CDE480', '2px solid #D2B0BA80']\n  const sizeClasses = [\n    'ape:w-[60px] ape:h-[60px] ape:md:w-[225px] ape:md:h-[225px]',\n    'ape:w-[60px] ape:h-[60px] ape:md:w-[200px] ape:md:h-[200px]',\n    'ape:w-[60px] ape:h-[60px] ape:md:w-[200px] ape:md:h-[200px]',\n  ]\n\n  return (\n    <Flex\n      className=\"ape:w-full ape:p-[20px] ape:rounded-normal ape:relative ape:overflow-hidden\"\n      style={{ border: borderColor[position - 1], backgroundImage: 'url(/images/singleBondPage/background.png)' }}\n    >\n      <Flex className=\"ape:w-full ape:md:w-[180px] ape:flex-col\">\n        <Flex>\n          <Flex\n            className=\"ape:w-[30px] ape:h-[30px] ape:justify-center ape:items-center ape:rounded-[50px]\"\n            style={{ background: 'linear-gradient(90deg, #AA80F9 0%, #6165D7 100%)' }}\n          >\n            {position}\n          </Flex>\n          <Flex className=\"ape:flex-col ape:ml-[10px]\">\n            <Flex className=\"ape:text-[10px]\" style={{ color: 'var(--ape-color-text-disabled-button)' }}>\n              Buyer\n            </Flex>\n            <Flex className=\"ape:text-[12px] ape:relative\" style={{ lineHeight: '13px' }}>\n              {buyer?.slice(0, 4)}...\n              {buyer?.slice(buyer?.length - 4, buyer?.length)}\n              {isUserTheBuyer && (\n                <Flex\n                  className=\"ape-you-card ape:bg-primary-button ape:rounded-[0px_10px_10px_0px] ape:p-[2.5px_5px] ape:text-[12px] ape:font-normal\"\n                  style={{ lineHeight: '12px' }}\n                >\n                  You\n                </Flex>\n              )}\n            </Flex>\n          </Flex>\n        </Flex>\n        <Flex className=\"ape:mt-[20px] ape:w-full ape:text-[12px] ape:font-normal ape:flex-col\">\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex>Deposit Amount:</Flex>\n            <Flex>${sale?.dollarValue.toFixed(2)}</Flex>\n          </Flex>\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex>Payout Amount:</Flex>\n            <Flex>${receivedUsdAmount?.toFixed(2)}</Flex>\n          </Flex>\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex>Bonus:</Flex>\n            <Flex style={{ color: discount > 0 ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }}>\n              {discount?.toFixed(2)}%\n            </Flex>\n          </Flex>\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex>Date:</Flex>\n            <Flex>{formatUTCDate(new Date((sale?.createdAt ?? 0) * 1000))}</Flex>\n          </Flex>\n        </Flex>\n      </Flex>\n      <img\n        src={`https://ape.bond/images/singleBondPage/${position}.png`}\n        alt=\"ads\"\n        className={clsx(\n          'ape:object-contain ape:absolute ape:bottom-[unset] ape:md:bottom-[-15px] ape:right-[10px] ape:md:right-[-50px] ape:top-0 ape:md:top-[unset]',\n          sizeClasses[position - 1],\n        )}\n      />\n      <Flex\n        className=\"ape:absolute ape:w-1/2 ape:right-0 ape:h-full ape:opacity-20\"\n        style={{ background: '#BF5AC7', filter: 'blur(92px)' }}\n      />\n    </Flex>\n  )\n}\n\nexport default TopSaleCard\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ import CandleStickChart from './components/CandleStickChart.js';
 import LineChart$1 from './components/LineChart.js';
 import { getFirstNonZeroDigits } from '../../../../utils/roundNumber.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
-import { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints.js';
+import { TIERS_WEIGHT } from '../../../../state/tiers/tiers.js';
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 import { discountEarnTokenPrice } from '../../../../utils/displayHelpers.js';
 import { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/PriceChart/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport CandleStickChart from './components/CandleStickChart'\nimport LineChart from './components/LineChart'\nimport { BondsData } from '../../../../types/bonds'\nimport { HistoricalPrices } from '../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../utils/roundNumber'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { discountEarnTokenPrice } from '../../../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport LineChartIcon from '../../../../components/uikit-sdk/Svg/Icons/LineChart'\nimport PlaceholderMonkey from '../../../../components/uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst PriceChart = ({\n  selectedBond,\n  historicalPrices,\n}: {\n  selectedBond: BondsData\n  historicalPrices?: HistoricalPrices[] | null\n}) => {\n  const earnTokenPrice = parseFloat(selectedBond?.payoutTokenPrice ?? '0')\n  const trueBondPrice = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], selectedBond?.trueBondPrices)\n  const bondPrice = discountEarnTokenPrice(selectedBond, true)\n  const hasDiscount = (trueBondPrice?.bonus ?? 0) > 0\n  const contractAddress = selectedBond.contractAddress[selectedBond.chainId]\n\n  const [show, setShow] = useState<boolean>(false)\n  const priceBelowChartPrecision = earnTokenPrice > 0 && earnTokenPrice < 1e-6\n  const [chartOption, setChartOption] = useState<'line' | 'candleStick'>('line')\n\n  useEffect(() => {\n    // This effect is to ensure that the charts are only rendered on the client\n    setShow(true)\n  }, [])\n\n  useEffect(() => {\n    // This effect is to ensure the charts are re-rendered everytime the selectedBond changes\n    setShow(false)\n    const timer = setTimeout(() => {\n      setShow(true)\n    }, 50)\n    return () => clearTimeout(timer)\n  }, [contractAddress])\n\n  const buttonClasses =\n    'ape:w-[35px] ape:h-[35px] ape:text-[12px] ape:rounded-small ape:bg-white3 ape:border ape:border-[grey] ape:flex ape:justify-center ape:items-center ape:cursor-pointer ape:hover:bg-white4'\n\n  return (\n    <Flex className=\"ape:w-full ape:md:w-1/2 ape:text-[12px] ape:md:text-[16px] ape:flex-col ape:bg-white2 ape:rounded-normal ape:p-[20px] ape:pr-0 ape:items-center ape:mt-[15px] ape:md:mt-[5px] ape:min-h-[330px] ape:md:min-h-[430px] ape:ml-0 ape:md:ml-[5px]\">\n      <Flex className=\"ape:w-full ape:justify-between ape:mb-[15px] ape:pr-[20px]\">\n        <Flex>Prices</Flex>\n        <Flex>\n          <Flex\n            className=\"ape:text-[12px] ape:font-medium ape:mr-[15px]\"\n            style={{ color: hasDiscount ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }}\n          >\n            Bond Price: ${bondPrice}\n          </Flex>\n          <Flex\n            className=\"ape:text-[12px] ape:font-medium\"\n            style={{ color: 'var(--ape-color-text-disabled-button)' }}\n          >\n            Market Price: ${getFirstNonZeroDigits(earnTokenPrice ?? 0)}\n          </Flex>\n        </Flex>\n      </Flex>\n      {show && (\n        <Flex className=\"ape:relative ape:w-full ape:h-full\">\n          <Flex className=\"ape:absolute ape:top-0 ape:left-0 ape:z-[20]\">\n            <Flex className={clsx(buttonClasses, 'ape:mr-[15px]')} onClick={() => setChartOption('line')}>\n              <LineChartIcon width={20} />\n            </Flex>\n            <Flex className={buttonClasses} onClick={() => setChartOption('candleStick')}>\n              D\n            </Flex>\n          </Flex>\n          {historicalPrices && historicalPrices.length > 0 && !priceBelowChartPrecision ? (\n            chartOption === 'line' ? (\n              <LineChart\n                historicalPrices={historicalPrices}\n                hasDiscount={hasDiscount}\n                bondPrice={bondPrice ?? '0'}\n                tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n              />\n            ) : (\n              <CandleStickChart\n                historicalPrices={historicalPrices}\n                hasDiscount={hasDiscount}\n                bondPrice={bondPrice ?? '0'}\n                tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n              />\n            )\n          ) : (\n            <Flex className=\"ape:flex-col ape:justify-center ape:items-center ape:w-full\">\n              <PlaceholderMonkey />\n              <Flex className=\"ape:mt-[15px]\">No Historical Price for this Token</Flex>\n            </Flex>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default PriceChart\n"],"names":["_jsxs","_jsx","LineChartIcon","LineChart"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/PriceChart/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport CandleStickChart from './components/CandleStickChart'\nimport LineChart from './components/LineChart'\nimport { BondsData } from '../../../../types/bonds'\nimport { HistoricalPrices } from '../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../utils/roundNumber'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/tiers'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { discountEarnTokenPrice } from '../../../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport LineChartIcon from '../../../../components/uikit-sdk/Svg/Icons/LineChart'\nimport PlaceholderMonkey from '../../../../components/uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst PriceChart = ({\n  selectedBond,\n  historicalPrices,\n}: {\n  selectedBond: BondsData\n  historicalPrices?: HistoricalPrices[] | null\n}) => {\n  const earnTokenPrice = parseFloat(selectedBond?.payoutTokenPrice ?? '0')\n  const trueBondPrice = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], selectedBond?.trueBondPrices)\n  const bondPrice = discountEarnTokenPrice(selectedBond, true)\n  const hasDiscount = (trueBondPrice?.bonus ?? 0) > 0\n  const contractAddress = selectedBond.contractAddress[selectedBond.chainId]\n\n  const [show, setShow] = useState<boolean>(false)\n  const priceBelowChartPrecision = earnTokenPrice > 0 && earnTokenPrice < 1e-6\n  const [chartOption, setChartOption] = useState<'line' | 'candleStick'>('line')\n\n  useEffect(() => {\n    // This effect is to ensure that the charts are only rendered on the client\n    setShow(true)\n  }, [])\n\n  useEffect(() => {\n    // This effect is to ensure the charts are re-rendered everytime the selectedBond changes\n    setShow(false)\n    const timer = setTimeout(() => {\n      setShow(true)\n    }, 50)\n    return () => clearTimeout(timer)\n  }, [contractAddress])\n\n  const buttonClasses =\n    'ape:w-[35px] ape:h-[35px] ape:text-[12px] ape:rounded-small ape:bg-white3 ape:border ape:border-[grey] ape:flex ape:justify-center ape:items-center ape:cursor-pointer ape:hover:bg-white4'\n\n  return (\n    <Flex className=\"ape:w-full ape:md:w-1/2 ape:text-[12px] ape:md:text-[16px] ape:flex-col ape:bg-white2 ape:rounded-normal ape:p-[20px] ape:pr-0 ape:items-center ape:mt-[15px] ape:md:mt-[5px] ape:min-h-[330px] ape:md:min-h-[430px] ape:ml-0 ape:md:ml-[5px]\">\n      <Flex className=\"ape:w-full ape:justify-between ape:mb-[15px] ape:pr-[20px]\">\n        <Flex>Prices</Flex>\n        <Flex>\n          <Flex\n            className=\"ape:text-[12px] ape:font-medium ape:mr-[15px]\"\n            style={{ color: hasDiscount ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }}\n          >\n            Bond Price: ${bondPrice}\n          </Flex>\n          <Flex className=\"ape:text-[12px] ape:font-medium\" style={{ color: 'var(--ape-color-text-disabled-button)' }}>\n            Market Price: ${getFirstNonZeroDigits(earnTokenPrice ?? 0)}\n          </Flex>\n        </Flex>\n      </Flex>\n      {show && (\n        <Flex className=\"ape:relative ape:w-full ape:h-full\">\n          <Flex className=\"ape:absolute ape:top-0 ape:left-0 ape:z-[20]\">\n            <Flex className={clsx(buttonClasses, 'ape:mr-[15px]')} onClick={() => setChartOption('line')}>\n              <LineChartIcon width={20} />\n            </Flex>\n            <Flex className={buttonClasses} onClick={() => setChartOption('candleStick')}>\n              D\n            </Flex>\n          </Flex>\n          {historicalPrices && historicalPrices.length > 0 && !priceBelowChartPrecision ? (\n            chartOption === 'line' ? (\n              <LineChart\n                historicalPrices={historicalPrices}\n                hasDiscount={hasDiscount}\n                bondPrice={bondPrice ?? '0'}\n                tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n              />\n            ) : (\n              <CandleStickChart\n                historicalPrices={historicalPrices}\n                hasDiscount={hasDiscount}\n                bondPrice={bondPrice ?? '0'}\n                tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n              />\n            )\n          ) : (\n            <Flex className=\"ape:flex-col ape:justify-center ape:items-center ape:w-full\">\n              <PlaceholderMonkey />\n              <Flex className=\"ape:mt-[15px]\">No Historical Price for this Token</Flex>\n            </Flex>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default PriceChart\n"],"names":["_jsxs","_jsx","LineChartIcon","LineChart"],"mappings":"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"}

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

@@ -5,20 +5,20 @@ import useBondsData from '../../../../state/bonds/useBondsData.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import RecommendationSelector from '../../../../components/MenuSelect/RecommendationSelector.js';
 import SmallRecommendationCard from '../../../Bonds/components/RecommendationCards/SmallRecommendationCard.js';
-import { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints.js';
+import { TIERS_WEIGHT } from '../../../../state/tiers/tiers.js';
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 import useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations.js';
 import { useHotBondContracts } from '../../../../state/hotBonds/useHotBonds.js';
 import { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers.js';
-import useEVMAccount from '../../../../hooks/accounts/useEVMAccount.js';
+import useChainAccount from '../../../../state/chainAccount/useChainAccount.js';
 
 const RecommendationCards = () => {
     const topTags = useTopTags();
-    const { address: account } = useEVMAccount();
+    const { address: account } = useChainAccount('evm');
     const options = account ? ['For You', 'Hot', ...topTags] : ['Hot', ...topTags];
     const [activeOption, setActiveOption] = useState(options[0]);
     const { data: hotBonds } = useHotBondContracts();
-    const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3');
+    const { data: forYouRecommendations } = useGetBondRecommendations(account ?? undefined, undefined, '3');
     const { data: bonds } = useBondsData();
     const sortedBonds = bonds && bonds?.length > 0
         ? [...bonds].sort((a, b) => (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0) -

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/RecommendationCards/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { useTopTags } from '../../../../hooks/useTopTags'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { SmallCardBond } from '../../../Bonds/components/RecommendationCards'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport RecommendationSelector from '../../../../components/MenuSelect/RecommendationSelector'\nimport SmallRecommendationCard from '../../../Bonds/components/RecommendationCards/SmallRecommendationCard'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport { useHotBondContracts } from '../../../../state/hotBonds/useHotBonds'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport useEVMAccount from '../../../../hooks/accounts/useEVMAccount'\n\nconst RecommendationCards = () => {\n  const topTags = useTopTags()\n  const { address: account } = useEVMAccount()\n  const options = account ? ['For You', 'Hot', ...topTags] : ['Hot', ...topTags]\n  const [activeOption, setActiveOption] = useState(options[0])\n  const { data: hotBonds } = useHotBondContracts()\n\n  const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3')\n  const { data: bonds } = useBondsData()\n  const sortedBonds =\n    bonds && bonds?.length > 0\n      ? [...bonds].sort(\n          (a, b) =>\n            (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0) -\n            (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0),\n        )\n      : undefined\n\n  const filteredBonds = sortedBonds?.filter(\n    (bond) =>\n      bond?.tags?.includes(activeOption) &&\n      !bond?.soldOut &&\n      (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], bond?.trueBondPrices)?.bonus ?? 0) < 50,\n  )\n\n  // This should come from the API\n  const hotRecommendations = sortedBonds?.filter((bond) =>\n    hotBonds?.includes(bond?.contractAddress?.[bond.chainId]?.toLowerCase() ?? ''),\n  )\n\n  const selectedBonds =\n    activeOption === 'For You' ? forYouRecommendations : activeOption === 'Hot' ? hotRecommendations : filteredBonds\n\n  const slicedBonds = selectedBonds\n    ?.sort(\n      (a, b) =>\n        ('discount' in b\n          ? b.discount\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0))! -\n        ('discount' in a\n          ? a.discount\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0))!,\n    )\n    ?.slice(0, 3)\n\n  const parsedBondsToRender: SmallCardBond[] | undefined = slicedBonds?.map((bond) => {\n    let contractAddress = ''\n    if ('contractAddress' in bond) {\n      contractAddress = bond.contractAddress as string\n    }\n    if ('billAddress' in bond) {\n      contractAddress = bond.billAddress as string\n    }\n\n    return {\n      payoutTokenName: bond?.showcaseTokenName ?? '',\n      contractAddress,\n      vestingTerm: bond.vestingTerm ?? 0,\n      bonus:\n        'bonus' in bond\n          ? bond.bonus\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], bond?.trueBondPrices)?.bonusWithFee ?? 0),\n      chainId: bond.chainId,\n    }\n  })\n\n  useEffect(() => {\n    if (account) {\n      setActiveOption('For You')\n    } else {\n      setActiveOption('Hot')\n    }\n  }, [account])\n\n  return (\n    <Flex className=\"ape:mt-[15px] ape:flex-col ape:w-full ape:hidden ape:md:flex\">\n      <Flex className=\"ape:w-full ape:justify-between\">\n        <Flex>\n          <Flex\n            className=\"ape:w-[60px] ape:md:w-[unset] ape:mr-0 ape:md:mr-[15px] ape:items-center ape:text-[11px] ape:font-medium\"\n            style={{ color: 'grey' }}\n          >\n            BONDS MARKETS:\n          </Flex>\n          <RecommendationSelector options={options} activeOption={activeOption} setActiveOption={setActiveOption} />\n        </Flex>\n        <Flex className=\"ape:hidden ape:md:flex\">\n          <img\n            width={190}\n            height={20}\n            alt=\"poweredBy\"\n            src=\"/images/bills/powered.png\"\n            className=\"ape:w-[190px] ape:h-[20px] ape:cursor-pointer\"\n            onClick={() => window.open('/apebond-ai', '_blank')}\n          />\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:my-[10px] ape:min-h-[47.45px]\">\n        {parsedBondsToRender &&\n          parsedBondsToRender.length > 0 &&\n          parsedBondsToRender.map((bond, index) => {\n            return <SmallRecommendationCard recommendation={bond} key={`${bond.payoutTokenName}-${index}`} />\n          })}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default RecommendationCards\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/RecommendationCards/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { useTopTags } from '../../../../hooks/useTopTags'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { SmallCardBond } from '../../../Bonds/components/RecommendationCards'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport RecommendationSelector from '../../../../components/MenuSelect/RecommendationSelector'\nimport SmallRecommendationCard from '../../../Bonds/components/RecommendationCards/SmallRecommendationCard'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/tiers'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport { useHotBondContracts } from '../../../../state/hotBonds/useHotBonds'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport useChainAccount from '../../../../state/chainAccount/useChainAccount'\n\nconst RecommendationCards = () => {\n  const topTags = useTopTags()\n  const { address: account } = useChainAccount('evm')\n  const options = account ? ['For You', 'Hot', ...topTags] : ['Hot', ...topTags]\n  const [activeOption, setActiveOption] = useState(options[0])\n  const { data: hotBonds } = useHotBondContracts()\n\n  const { data: forYouRecommendations } = useGetBondRecommendations(account ?? undefined, undefined, '3')\n  const { data: bonds } = useBondsData()\n  const sortedBonds =\n    bonds && bonds?.length > 0\n      ? [...bonds].sort(\n          (a, b) =>\n            (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0) -\n            (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0),\n        )\n      : undefined\n\n  const filteredBonds = sortedBonds?.filter(\n    (bond) =>\n      bond?.tags?.includes(activeOption) &&\n      !bond?.soldOut &&\n      (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], bond?.trueBondPrices)?.bonus ?? 0) < 50,\n  )\n\n  // This should come from the API\n  const hotRecommendations = sortedBonds?.filter((bond) =>\n    hotBonds?.includes(bond?.contractAddress?.[bond.chainId]?.toLowerCase() ?? ''),\n  )\n\n  const selectedBonds =\n    activeOption === 'For You' ? forYouRecommendations : activeOption === 'Hot' ? hotRecommendations : filteredBonds\n\n  const slicedBonds = selectedBonds\n    ?.sort(\n      (a, b) =>\n        ('discount' in b\n          ? b.discount\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0))! -\n        ('discount' in a\n          ? a.discount\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0))!,\n    )\n    ?.slice(0, 3)\n\n  const parsedBondsToRender: SmallCardBond[] | undefined = slicedBonds?.map((bond) => {\n    let contractAddress = ''\n    if ('contractAddress' in bond) {\n      contractAddress = bond.contractAddress as string\n    }\n    if ('billAddress' in bond) {\n      contractAddress = bond.billAddress as string\n    }\n\n    return {\n      payoutTokenName: bond?.showcaseTokenName ?? '',\n      contractAddress,\n      vestingTerm: bond.vestingTerm ?? 0,\n      bonus:\n        'bonus' in bond\n          ? bond.bonus\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], bond?.trueBondPrices)?.bonusWithFee ?? 0),\n      chainId: bond.chainId,\n    }\n  })\n\n  useEffect(() => {\n    if (account) {\n      setActiveOption('For You')\n    } else {\n      setActiveOption('Hot')\n    }\n  }, [account])\n\n  return (\n    <Flex className=\"ape:mt-[15px] ape:flex-col ape:w-full ape:hidden ape:md:flex\">\n      <Flex className=\"ape:w-full ape:justify-between\">\n        <Flex>\n          <Flex\n            className=\"ape:w-[60px] ape:md:w-[unset] ape:mr-0 ape:md:mr-[15px] ape:items-center ape:text-[11px] ape:font-medium\"\n            style={{ color: 'grey' }}\n          >\n            BONDS MARKETS:\n          </Flex>\n          <RecommendationSelector options={options} activeOption={activeOption} setActiveOption={setActiveOption} />\n        </Flex>\n        <Flex className=\"ape:hidden ape:md:flex\">\n          <img\n            width={190}\n            height={20}\n            alt=\"poweredBy\"\n            src=\"/images/bills/powered.png\"\n            className=\"ape:w-[190px] ape:h-[20px] ape:cursor-pointer\"\n            onClick={() => window.open('/apebond-ai', '_blank')}\n          />\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:my-[10px] ape:min-h-[47.45px]\">\n        {parsedBondsToRender &&\n          parsedBondsToRender.length > 0 &&\n          parsedBondsToRender.map((bond, index) => {\n            return <SmallRecommendationCard recommendation={bond} key={`${bond.payoutTokenName}-${index}`} />\n          })}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default RecommendationCards\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/SingleBond/SingleBond.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
 import useBondsData from '../../state/bonds/useBondsData.js';
 import useBondsList from '../../state/bonds/useBondsList.js';
-import BuyBond from '../BuyBond/BuyComponent.js';
+import ChainBuyComponent from '../BuyBond/ChainBuyComponent.js';
 import TabNav from '../../components/uikit-sdk/TabNav/index.js';
 import YourBonds from '../YourBonds/YourBonds.js';
 import SoldOutBuyBondPlaceholder from './SoldOutBuyBondPlaceholder.js';
@@ -30,7 +30,7 @@ const SingleBond = ({ tokenSymbol }) => {
     }, [allBonds, tokenSymbol]);
     const bondAddress = activeBond?.contractAddress?.[activeBond?.chainId];
     const bondChain = activeBond?.chainId;
-    return (jsx(Flex, { className: "ape:flex-col", children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:w-full ape:justify-center ape:mb-[15px]", children: jsx(TabNav, { activeTab: activeTab, tabOptions: ['Buy Bond', 'Your Bonds'], onChangeActiveTab: (newValue) => setActiveTab(newValue) }) }), activeTab === 'Buy Bond' ? (jsx(Flex, { className: clsx('ape:rounded-normal ape:p-[0_20px_20px_20px] ape:mx-[10px]', activeTab === 'Buy Bond' && 'ape:bg-white2'), children: activeBond ? (jsx(BuyBond, { bondAddress: bondAddress, bondChain: bondChain })) : soldOutBond && isFetched ? (jsx(SoldOutBuyBondPlaceholder, { bond: soldOutBond })) : isFetched ? (jsx(Flex, { className: "ape:justify-center ape:w-full ape:pt-[20px]", children: "No bond" })) : (jsx(Flex, { className: "placeholder-monkey-wrapper ape:w-full ape:flex-col ape:pt-[100px] ape:pb-[100px] ape:bg-white2 ape:items-center ape:rounded-[10px] ape:mt-[15px] ape:justify-center ape:h-[400px]", children: jsx(Spinner, { size: 100 }) })) })) : (jsx(YourBonds, { showOnly: tokenSymbol?.[0] }))] }) }));
+    return (jsx(Flex, { className: "ape:flex-col", children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:w-full ape:justify-center ape:mb-[15px]", children: jsx(TabNav, { activeTab: activeTab, tabOptions: ['Buy Bond', 'Your Bonds'], onChangeActiveTab: (newValue) => setActiveTab(newValue) }) }), activeTab === 'Buy Bond' ? (jsx(Flex, { className: clsx('ape:rounded-normal ape:p-[0_20px_20px_20px] ape:mx-[10px]', activeTab === 'Buy Bond' && 'ape:bg-white2'), children: activeBond ? (jsx(ChainBuyComponent, { bondAddress: bondAddress, bondChain: bondChain })) : soldOutBond && isFetched ? (jsx(SoldOutBuyBondPlaceholder, { bond: soldOutBond })) : isFetched ? (jsx(Flex, { className: "ape:justify-center ape:w-full ape:pt-[20px]", children: "No bond" })) : (jsx(Flex, { className: "placeholder-monkey-wrapper ape:w-full ape:flex-col ape:pt-[100px] ape:pb-[100px] ape:bg-white2 ape:items-center ape:rounded-[10px] ape:mt-[15px] ape:justify-center ape:h-[400px]", children: jsx(Spinner, { size: 100 }) })) })) : (jsx(YourBonds, { showOnly: tokenSymbol?.[0] }))] }) }));
 };
 
 export { SingleBond as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SingleBond.js","sources":["../../../src/views/SingleBond/SingleBond.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport clsx from 'clsx'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport useBondsList from '../../state/bonds/useBondsList'\nimport BuyBond from '../BuyBond/BuyComponent'\nimport TabNav from '../../components/uikit-sdk/TabNav'\nimport YourBonds from '../YourBonds/YourBonds'\nimport SoldOutBuyBondPlaceholder from './SoldOutBuyBondPlaceholder'\nimport Spinner from '../../components/uikit-sdk/Spinner'\n\nexport interface SingleBondProps {\n  tokenSymbol?: string[]\n}\n\nconst SingleBond: React.FC<SingleBondProps> = ({ tokenSymbol }) => {\n  // Data Hooks\n  const { data: bonds, isFetched } = useBondsData()\n  const { data: allBonds } = useBondsList()\n\n  // State\n  const [activeTab, setActiveTab] = useState<string>('Buy Bond')\n\n  // Data\n  const activeBond = bonds?.find((bond) =>\n    tokenSymbol?.some((symbol) => bond.earnToken.symbol?.toLowerCase() === symbol.toLowerCase()),\n  )\n  const soldOutBond = useMemo(() => {\n    if (!allBonds) return undefined\n\n    for (const bondsForChain of Object.values(allBonds)) {\n      const bond = bondsForChain.find((item) =>\n        tokenSymbol?.some((symbol) => item.earnToken.symbol?.toLowerCase() === symbol.toLowerCase()),\n      )\n\n      if (bond) return bond\n    }\n\n    return undefined\n  }, [allBonds, tokenSymbol])\n\n  const bondAddress = activeBond?.contractAddress?.[activeBond?.chainId]\n  const bondChain = activeBond?.chainId\n\n  return (\n    <Flex className=\"ape:flex-col\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:w-full ape:justify-center ape:mb-[15px]\">\n          <TabNav\n            activeTab={activeTab}\n            tabOptions={['Buy Bond', 'Your Bonds']}\n            onChangeActiveTab={(newValue: string) => setActiveTab(newValue)}\n          />\n        </Flex>\n        {activeTab === 'Buy Bond' ? (\n          <Flex className={clsx('ape:rounded-normal ape:p-[0_20px_20px_20px] ape:mx-[10px]', activeTab === 'Buy Bond' && 'ape:bg-white2')}>\n            {activeBond ? (\n              <BuyBond bondAddress={bondAddress} bondChain={bondChain} />\n            ) : soldOutBond && isFetched ? (\n              <SoldOutBuyBondPlaceholder bond={soldOutBond} />\n            ) : isFetched ? (\n              <Flex className=\"ape:justify-center ape:w-full ape:pt-[20px]\">No bond</Flex>\n            ) : (\n              <Flex className=\"placeholder-monkey-wrapper ape:w-full ape:flex-col ape:pt-[100px] ape:pb-[100px] ape:bg-white2 ape:items-center ape:rounded-[10px] ape:mt-[15px] ape:justify-center ape:h-[400px]\">\n                <Spinner size={100} />\n              </Flex>\n            )}\n          </Flex>\n        ) : (\n          <YourBonds showOnly={tokenSymbol?.[0]} />\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default SingleBond\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,UAAU,GAA8B,CAAC,EAAE,WAAW,EAAE,KAAI;;IAEhE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE;IACjD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE;;IAGzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,UAAU,CAAC;;AAG9D,IAAA,MAAM,UAAU,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,KAClC,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC,CAC7F;AACD,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;AAC/B,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,SAAS;QAE/B,KAAK,MAAM,aAAa,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;AACnD,YAAA,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,KACnC,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC,CAC7F;AAED,YAAA,IAAI,IAAI;AAAE,gBAAA,OAAO,IAAI;QACvB;AAEA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IAE3B,MAAM,WAAW,GAAG,UAAU,EAAE,eAAe,GAAG,UAAU,EAAE,OAAO,CAAC;AACtE,IAAA,MAAM,SAAS,GAAG,UAAU,EAAE,OAAO;AAErC,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6CAA6C,YAC3DA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,EACtC,iBAAiB,EAAE,CAAC,QAAgB,KAAK,YAAY,CAAC,QAAQ,CAAC,EAAA,CAC/D,EAAA,CACG,EACN,SAAS,KAAK,UAAU,IACvBA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,2DAA2D,EAAE,SAAS,KAAK,UAAU,IAAI,eAAe,CAAC,EAAA,QAAA,EAC5H,UAAU,IACTA,GAAA,CAAC,OAAO,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,IACzD,WAAW,IAAI,SAAS,IAC1BA,IAAC,yBAAyB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,IAC9C,SAAS,IACXA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAA,SAAA,EAAA,CAAe,KAE5EA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mLAAmL,EAAA,QAAA,EACjMA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,GAAG,EAAA,CAAI,GACjB,CACR,EAAA,CACI,KAEPA,IAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,WAAW,GAAG,CAAC,CAAC,EAAA,CAAI,CAC1C,CAAA,EAAA,CACI,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"SingleBond.js","sources":["../../../src/views/SingleBond/SingleBond.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport clsx from 'clsx'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport useBondsList from '../../state/bonds/useBondsList'\nimport ChainBuyComponent from '../BuyBond/ChainBuyComponent'\nimport TabNav from '../../components/uikit-sdk/TabNav'\nimport YourBonds from '../YourBonds/YourBonds'\nimport SoldOutBuyBondPlaceholder from './SoldOutBuyBondPlaceholder'\nimport Spinner from '../../components/uikit-sdk/Spinner'\n\nexport interface SingleBondProps {\n  tokenSymbol?: string[]\n}\n\nconst SingleBond: React.FC<SingleBondProps> = ({ tokenSymbol }) => {\n  // Data Hooks\n  const { data: bonds, isFetched } = useBondsData()\n  const { data: allBonds } = useBondsList()\n\n  // State\n  const [activeTab, setActiveTab] = useState<string>('Buy Bond')\n\n  // Data\n  const activeBond = bonds?.find((bond) =>\n    tokenSymbol?.some((symbol) => bond.earnToken.symbol?.toLowerCase() === symbol.toLowerCase()),\n  )\n  const soldOutBond = useMemo(() => {\n    if (!allBonds) return undefined\n\n    for (const bondsForChain of Object.values(allBonds)) {\n      const bond = bondsForChain.find((item) =>\n        tokenSymbol?.some((symbol) => item.earnToken.symbol?.toLowerCase() === symbol.toLowerCase()),\n      )\n\n      if (bond) return bond\n    }\n\n    return undefined\n  }, [allBonds, tokenSymbol])\n\n  const bondAddress = activeBond?.contractAddress?.[activeBond?.chainId]\n  const bondChain = activeBond?.chainId\n\n  return (\n    <Flex className=\"ape:flex-col\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:w-full ape:justify-center ape:mb-[15px]\">\n          <TabNav\n            activeTab={activeTab}\n            tabOptions={['Buy Bond', 'Your Bonds']}\n            onChangeActiveTab={(newValue: string) => setActiveTab(newValue)}\n          />\n        </Flex>\n        {activeTab === 'Buy Bond' ? (\n          <Flex\n            className={clsx(\n              'ape:rounded-normal ape:p-[0_20px_20px_20px] ape:mx-[10px]',\n              activeTab === 'Buy Bond' && 'ape:bg-white2',\n            )}\n          >\n            {activeBond ? (\n              <ChainBuyComponent bondAddress={bondAddress} bondChain={bondChain} />\n            ) : soldOutBond && isFetched ? (\n              <SoldOutBuyBondPlaceholder bond={soldOutBond} />\n            ) : isFetched ? (\n              <Flex className=\"ape:justify-center ape:w-full ape:pt-[20px]\">No bond</Flex>\n            ) : (\n              <Flex className=\"placeholder-monkey-wrapper ape:w-full ape:flex-col ape:pt-[100px] ape:pb-[100px] ape:bg-white2 ape:items-center ape:rounded-[10px] ape:mt-[15px] ape:justify-center ape:h-[400px]\">\n                <Spinner size={100} />\n              </Flex>\n            )}\n          </Flex>\n        ) : (\n          <YourBonds showOnly={tokenSymbol?.[0]} />\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default SingleBond\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,UAAU,GAA8B,CAAC,EAAE,WAAW,EAAE,KAAI;;IAEhE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE;IACjD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE;;IAGzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,UAAU,CAAC;;AAG9D,IAAA,MAAM,UAAU,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,KAClC,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC,CAC7F;AACD,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;AAC/B,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,SAAS;QAE/B,KAAK,MAAM,aAAa,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;AACnD,YAAA,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,KACnC,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC,CAC7F;AAED,YAAA,IAAI,IAAI;AAAE,gBAAA,OAAO,IAAI;QACvB;AAEA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IAE3B,MAAM,WAAW,GAAG,UAAU,EAAE,eAAe,GAAG,UAAU,EAAE,OAAO,CAAC;AACtE,IAAA,MAAM,SAAS,GAAG,UAAU,EAAE,OAAO;AAErC,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6CAA6C,YAC3DA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,EACtC,iBAAiB,EAAE,CAAC,QAAgB,KAAK,YAAY,CAAC,QAAQ,CAAC,EAAA,CAC/D,EAAA,CACG,EACN,SAAS,KAAK,UAAU,IACvBA,IAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CACb,2DAA2D,EAC3D,SAAS,KAAK,UAAU,IAAI,eAAe,CAC5C,EAAA,QAAA,EAEA,UAAU,IACTA,GAAA,CAAC,iBAAiB,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,IACnE,WAAW,IAAI,SAAS,IAC1BA,IAAC,yBAAyB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,IAC9C,SAAS,IACXA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAA,SAAA,EAAA,CAAe,KAE5EA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mLAAmL,EAAA,QAAA,EACjMA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,GAAG,EAAA,CAAI,GACjB,CACR,EAAA,CACI,KAEPA,IAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,WAAW,GAAG,CAAC,CAAC,EAAA,CAAI,CAC1C,CAAA,EAAA,CACI,EAAA,CACF;AAEX;;;;"}

package/dist/views/SingleBond/SoldOutBuyBondPlaceholder.js

@@ -8,17 +8,18 @@ import useTokenFromZapList from '../../hooks/useTokenFromZapList.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { zapSupported } from '../../config/constants/variables.js';
 import { getSymbol } from '../../utils/getNativeTicker.js';
-import useTierPoints, { getUserTier } from '../../state/tiers/useTierPoints.js';
+import useTierPoints from '../../state/tiers/useTierPoints.js';
+import { getUserTier } from '../../state/tiers/tiers.js';
 import BondModalHeader from '../BuyBond/components/BondModalHeader.js';
 import ProjectDescription from '../BuyBond/components/ProjectDescription.js';
 import BondCards from '../BuyBond/components/BondCards/BondCards.js';
 import Estimations from '../BuyBond/components/Estimations.js';
-import useEVMAccount from '../../hooks/accounts/useEVMAccount.js';
+import useChainAccount from '../../state/chainAccount/useChainAccount.js';
 
 const SoldOutBuyBondPlaceholder = ({ bond }) => {
     const SDKConfig = useSDKConfig();
     // Hooks
-    const { address: account } = useEVMAccount();
+    const { address: account } = useChainAccount('evm');
     const { data: tierState } = useTierPoints();
     const { promotionalPoints } = tierState || {};
     const userTier = getUserTier(promotionalPoints ?? '0');

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

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