@ape.swap/bonds-sdk 6.2.17 → 6.2.19

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

@@ -1 +1 @@
-{"version":3,"file":"NewRateModal.js","sources":["../../../../../src/views/BuyBond/components/NewRateModal/NewRateModal.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondsData } from '../../../../types/bonds'\nimport Estimations from '../Estimations'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { mulDivRound, parseUnits } from '../../../../utils/fixedPoint'\nimport useTierPoints from '../../../../state/tiers/useTierPoints'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport Arrow from '../../../../components/uikit-sdk/Svg/Icons/Arrow'\n\nconst NewRateModal = ({\n  bond,\n  zapTrueBondPrice,\n  depositAmount,\n  youSpendString,\n  fetchingZapQuote,\n  zapError,\n  onDismiss,\n}: {\n  bond?: BondsData\n  zapTrueBondPrice?: string\n  depositAmount: string\n  youSpendString?: string\n  fetchingZapQuote?: boolean\n  zapError?: boolean\n  onDismiss?: () => void\n}) => {\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const trueBondPrice = findHighestTrueBondPrice(promotionalPoints, bond?.trueBondPrices)\n\n  const tokenSymbol = bond?.earnToken?.symbol\n  const oldBonus = trueBondPrice?.bonusWithFee ?? 0\n  const fee = bond?.feeInPayout ?? 0\n  const earnTokenPrice = parseFloat(bond?.payoutTokenPrice ?? '0')\n  const lpPrice = parseFloat(bond?.principalTokenPrice ?? '0')\n  const trueBillPriceMinusFee = mulDivRound(\n    BigInt(zapTrueBondPrice ?? '0'),\n    parseUnits(String(100 + fee), 6),\n    parseUnits('100', 6),\n    'halfUp',\n  )\n  const priceUSDMinusFee = getBalanceNumber(trueBillPriceMinusFee) * lpPrice\n  const discountWithoutFee = ((earnTokenPrice - priceUSDMinusFee) / earnTokenPrice) * 100\n  const zapBonusWithFee = discountWithoutFee > 0 ? (discountWithoutFee / (100 - discountWithoutFee)) * 100 : 0\n\n  return (\n    <Modal title=\"Bonus update\" sx={{ width: '380px' }}>\n      <Flex sx={{ width: '100%', alignItems: 'center', flexDirection: 'column', mt: '10px' }}>\n        <Flex sx={{ display: 'block', fontSize: '14px', fontWeight: 500, color: 'textDisabledButton' }}>\n          The bonus for the bond you are purchasing has been adjusted by{' '}\n          <Text sx={{ color: 'error' }}>{(zapBonusWithFee - oldBonus).toFixed(2)}%</Text>.\n        </Flex>\n        <Flex\n          sx={{\n            p: '8px 4px 4px 4px',\n            borderRadius: '8px',\n            width: '100%',\n            alignItems: 'center',\n          }}\n        >\n          <Flex sx={{ alignItems: 'center' }}>\n            <TokenImage size={30} symbol={tokenSymbol} />\n            <Flex sx={{ flexDirection: 'column', ml: '10px' }}>\n              <Text sx={{ fontSize: '12px', fontWeight: '300', lineHeight: '14px' }}>Old Bonus:</Text>\n              <Text sx={{ fontSize: '12px', fontWeight: 400 }}>\n                {oldBonus?.toFixed(2)}% {tokenSymbol}\n              </Text>\n            </Flex>\n          </Flex>\n          <Flex sx={{ width: '15px', height: '15px', ml: '20px', mr: '10px', alignItems: 'center' }}>\n            <Arrow direction=\"right\" />\n          </Flex>\n          <Flex sx={{ alignItems: 'center' }}>\n            <TokenImage size={30} symbol={tokenSymbol} />\n            <Flex sx={{ flexDirection: 'column', ml: '10px' }}>\n              <Text sx={{ fontSize: '12px', fontWeight: '300', lineHeight: '14px' }}>New Bonus:</Text>\n              <Text sx={{ fontSize: '12px', fontWeight: 400 }}>\n                {zapBonusWithFee.toFixed(2)}% {tokenSymbol}\n              </Text>\n            </Flex>\n          </Flex>\n        </Flex>\n        <Estimations\n          depositAmount={depositAmount}\n          inputValue={depositAmount} // placeholder value\n          inputTokenPrice={1} // placeholder value\n          bondData={{ ...bond, trueBillPrice: zapTrueBondPrice } as BondsData}\n          youSpendString={youSpendString}\n          fetchingZapQuote={fetchingZapQuote}\n          zapError={zapError}\n          isZap\n        />\n        <Flex\n          sx={{\n            width: '100%',\n            fontSize: '14px',\n            fontWeight: 500,\n            color: 'textDisabledButton',\n            justifyContent: 'flex-start',\n            mb: '10px',\n          }}\n        >\n          Would you like to confirm the new rate?\n        </Flex>\n        <Button fullWidth onClick={onDismiss} disabled={fetchingZapQuote} load={fetchingZapQuote}>\n          {fetchingZapQuote ? 'Loading' : 'Confirm'}\n        </Button>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default NewRateModal\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"NewRateModal.js","sources":["../../../../../src/views/BuyBond/components/NewRateModal/NewRateModal.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondsData } from '../../../../types/bonds'\nimport Estimations from '../Estimations'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { mulDivRound, parseUnits } from '../../../../utils/fixedPoint'\nimport useTierPoints from '../../../../state/tiers/useTierPoints'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport Arrow from '../../../../components/uikit-sdk/Svg/Icons/Arrow'\n\nconst NewRateModal = ({\n  bond,\n  zapTrueBondPrice,\n  depositAmount,\n  youSpendString,\n  fetchingZapQuote,\n  zapError,\n  onDismiss,\n}: {\n  bond?: BondsData\n  zapTrueBondPrice?: string\n  depositAmount: string\n  youSpendString?: string\n  fetchingZapQuote?: boolean\n  zapError?: boolean\n  onDismiss?: () => void\n}) => {\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const trueBondPrice = findHighestTrueBondPrice(promotionalPoints, bond?.trueBondPrices)\n\n  const tokenSymbol = bond?.earnToken?.symbol\n  const oldBonus = trueBondPrice?.bonusWithFee ?? 0\n  const fee = bond?.feeInPayout ?? 0\n  const earnTokenPrice = parseFloat(bond?.payoutTokenPrice ?? '0')\n  const lpPrice = parseFloat(bond?.principalTokenPrice ?? '0')\n  const trueBillPriceMinusFee = mulDivRound(\n    BigInt(zapTrueBondPrice ?? '0'),\n    parseUnits(String(100 + fee), 6),\n    parseUnits('100', 6),\n    'halfUp',\n  )\n  const priceUSDMinusFee = getBalanceNumber(trueBillPriceMinusFee) * lpPrice\n  const discountWithoutFee = ((earnTokenPrice - priceUSDMinusFee) / earnTokenPrice) * 100\n  const zapBonusWithFee = discountWithoutFee > 0 ? (discountWithoutFee / (100 - discountWithoutFee)) * 100 : 0\n\n  return (\n    <Modal title=\"Bonus update\" className=\"ape:w-[380px]!\">\n      <Flex className=\"ape:w-full ape:items-center ape:flex-col ape:mt-[10px]\">\n        <Flex className=\"ape:block ape:text-[14px] ape:font-medium\" style={{ color: 'var(--ape-color-text-disabled-button)' }}>\n          The bonus for the bond you are purchasing has been adjusted by{' '}\n          <Text style={{ color: 'var(--ape-color-error)' }}>{(zapBonusWithFee - oldBonus).toFixed(2)}%</Text>.\n        </Flex>\n        <Flex className=\"ape:p-[8px_4px_4px_4px] ape:rounded-[8px] ape:w-full ape:items-center\">\n          <Flex className=\"ape:items-center\">\n            <TokenImage size={30} symbol={tokenSymbol} />\n            <Flex className=\"ape:flex-col ape:ml-[10px]\">\n              <Text size=\"12px\" style={{ fontWeight: 300, lineHeight: '14px' }}>\n                Old Bonus:\n              </Text>\n              <Text size=\"12px\" weight={400}>\n                {oldBonus?.toFixed(2)}% {tokenSymbol}\n              </Text>\n            </Flex>\n          </Flex>\n          <Flex className=\"ape:w-[15px] ape:h-[15px] ape:ml-[20px] ape:mr-[10px] ape:items-center\">\n            <Arrow direction=\"right\" />\n          </Flex>\n          <Flex className=\"ape:items-center\">\n            <TokenImage size={30} symbol={tokenSymbol} />\n            <Flex className=\"ape:flex-col ape:ml-[10px]\">\n              <Text size=\"12px\" style={{ fontWeight: 300, lineHeight: '14px' }}>\n                New Bonus:\n              </Text>\n              <Text size=\"12px\" weight={400}>\n                {zapBonusWithFee.toFixed(2)}% {tokenSymbol}\n              </Text>\n            </Flex>\n          </Flex>\n        </Flex>\n        <Estimations\n          depositAmount={depositAmount}\n          inputValue={depositAmount} // placeholder value\n          inputTokenPrice={1} // placeholder value\n          bondData={{ ...bond, trueBillPrice: zapTrueBondPrice } as BondsData}\n          youSpendString={youSpendString}\n          fetchingZapQuote={fetchingZapQuote}\n          zapError={zapError}\n          isZap\n        />\n        <Flex\n          className=\"ape:w-full ape:text-[14px] ape:font-medium ape:justify-start ape:mb-[10px]\"\n          style={{ color: 'var(--ape-color-text-disabled-button)' }}\n        >\n          Would you like to confirm the new rate?\n        </Flex>\n        <Button fullWidth onClick={onDismiss} disabled={fetchingZapQuote} load={fetchingZapQuote}>\n          {fetchingZapQuote ? 'Loading' : 'Confirm'}\n        </Button>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default NewRateModal\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Modal from '../../../../components/uikit-sdk/Modal/index.js';
@@ -18,7 +18,7 @@ const NoBonusModal = ({ onAcknowledge, showcaseTokenName }) => {
     const handleCheckboxChange = () => {
         setIsChecked(!isChecked);
     };
-    return (isOpen && (jsxs(Modal, { className: "nobonus-modal", title: "Warning", onClose: handleAcknowledge, children: [jsxs("p", { children: ["You're buying ", showcaseTokenName, " at a higher price than the market, which will result in receiving fewer tokens compared to swapping via an exchange."] }), jsx("p", { children: "You will not receive any bonus tokens when buying this bond." }), jsxs(Flex, { className: "nobonus-checkbox-row", sx: { flexDirection: 'row', gap: '8px', pb: '20px', cursor: 'pointer' }, onClick: handleCheckboxChange, children: [jsx(Flex, { className: "nobonus-checkbox", children: jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange }) }), jsx(Flex, { className: "nobonus-checkbox-text", children: "I understand and want to proceed." })] }), jsxs(Flex, { className: "nobonus-actions", sx: { flexDirection: 'row', gap: '8px' }, children: [jsx(Button, { className: "nobonus-cancel", onClick: handleCancel, sx: { width: '100%', justifyContent: 'center' }, variant: "secondary", children: "Cancel" }), jsx(Button, { className: "nobonus-buy", onClick: handleAcknowledge, disabled: !isChecked, sx: { width: '100%', justifyContent: 'center' }, children: "Buy" })] })] })));
+    return (isOpen && (jsxs(Modal, { className: "nobonus-modal", title: "Warning", onClose: handleAcknowledge, children: [jsxs("p", { children: ["You're buying ", showcaseTokenName, " at a higher price than the market, which will result in receiving fewer tokens compared to swapping via an exchange."] }), jsx("p", { children: "You will not receive any bonus tokens when buying this bond." }), jsxs(Flex, { className: "nobonus-checkbox-row ape:flex-row ape:gap-[8px] ape:pb-[20px] ape:cursor-pointer", onClick: handleCheckboxChange, children: [jsx(Flex, { className: "nobonus-checkbox", children: jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange }) }), jsx(Flex, { className: "nobonus-checkbox-text", children: "I understand and want to proceed." })] }), jsxs(Flex, { className: "nobonus-actions ape:flex-row ape:gap-[8px]", children: [jsx(Button, { className: "nobonus-cancel ape:w-full ape:justify-center", onClick: handleCancel, variant: "secondary", children: "Cancel" }), jsx(Button, { className: "nobonus-buy ape:w-full ape:justify-center", onClick: handleAcknowledge, disabled: !isChecked, children: "Buy" })] })] })));
 };
 
 export { NoBonusModal as default };

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

@@ -1 +1 @@
-{"version":3,"file":"NoBonusModal.js","sources":["../../../../../src/views/BuyBond/components/NoBonusModal/NoBonusModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Checkbox from '../../../../components/uikit-sdk/Checkbox'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\n\ninterface NoBonusModalProps {\n  showcaseTokenName?: string\n  onAcknowledge: () => void\n}\n\nconst NoBonusModal: React.FC<NoBonusModalProps> = ({ onAcknowledge, showcaseTokenName }) => {\n  const [isOpen, setIsOpen] = useState(true)\n  const [isChecked, setIsChecked] = useState(false)\n\n  const handleAcknowledge = () => {\n    onAcknowledge()\n    setIsOpen(false)\n  }\n\n  const handleCancel = () => {\n    setIsOpen(false)\n  }\n\n  const handleCheckboxChange = () => {\n    setIsChecked(!isChecked)\n  }\n\n  return (\n    isOpen && (\n      <Modal className=\"nobonus-modal\" title=\"Warning\" onClose={handleAcknowledge}>\n        <p>\n          You&#39;re buying {showcaseTokenName} at a higher price than the market, which will result in receiving fewer\n          tokens compared to swapping via an exchange.\n        </p>\n        <p>You will not receive any bonus tokens when buying this bond.</p>\n        <Flex\n          className=\"nobonus-checkbox-row\"\n          sx={{ flexDirection: 'row', gap: '8px', pb: '20px', cursor: 'pointer' }}\n          onClick={handleCheckboxChange}\n        >\n          <Flex className=\"nobonus-checkbox\">\n            <Checkbox checked={isChecked} onChange={handleCheckboxChange} />\n          </Flex>\n          <Flex className=\"nobonus-checkbox-text\">I understand and want to proceed.</Flex>\n        </Flex>\n        <Flex className=\"nobonus-actions\" sx={{ flexDirection: 'row', gap: '8px' }}>\n          <Button\n            className=\"nobonus-cancel\"\n            onClick={handleCancel}\n            sx={{ width: '100%', justifyContent: 'center' }}\n            variant=\"secondary\"\n          >\n            Cancel\n          </Button>\n          <Button\n            className=\"nobonus-buy\"\n            onClick={handleAcknowledge}\n            disabled={!isChecked}\n            sx={{ width: '100%', justifyContent: 'center' }}\n          >\n            Buy\n          </Button>\n        </Flex>\n      </Modal>\n    )\n  )\n}\n\nexport default NoBonusModal\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAgC,CAAC,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAI;IACzF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAC1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEjD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,aAAa,EAAE;QACf,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,MAAM,YAAY,GAAG,MAAK;QACxB,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,MAAM,oBAAoB,GAAG,MAAK;AAChC,QAAA,YAAY,CAAC,CAAC,SAAS,CAAC;AAC1B,IAAA,CAAC;AAED,IAAA,QACE,MAAM,KACJA,IAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,iBAAiB,EAAA,QAAA,EAAA,CACzEA,IAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,EACqB,iBAAiB,6HAElC,EACJC,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,8DAAA,EAAA,CAAmE,EACnED,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,sBAAsB,EAChC,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EACvE,OAAO,EAAE,oBAAoB,aAE7BC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAChCA,IAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,GAAI,EAAA,CAC3D,EACPA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAyC,CAAA,EAAA,CAC3E,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CACxEC,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,YAAY,EACrB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,EAC/C,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,QAAA,EAAA,CAGZ,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,SAAS,EACpB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGxC,IACJ,CAAA,EAAA,CACD,CACT;AAEL;;;;"}
+{"version":3,"file":"NoBonusModal.js","sources":["../../../../../src/views/BuyBond/components/NoBonusModal/NoBonusModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Checkbox from '../../../../components/uikit-sdk/Checkbox'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\n\ninterface NoBonusModalProps {\n  showcaseTokenName?: string\n  onAcknowledge: () => void\n}\n\nconst NoBonusModal: React.FC<NoBonusModalProps> = ({ onAcknowledge, showcaseTokenName }) => {\n  const [isOpen, setIsOpen] = useState(true)\n  const [isChecked, setIsChecked] = useState(false)\n\n  const handleAcknowledge = () => {\n    onAcknowledge()\n    setIsOpen(false)\n  }\n\n  const handleCancel = () => {\n    setIsOpen(false)\n  }\n\n  const handleCheckboxChange = () => {\n    setIsChecked(!isChecked)\n  }\n\n  return (\n    isOpen && (\n      <Modal className=\"nobonus-modal\" title=\"Warning\" onClose={handleAcknowledge}>\n        <p>\n          You&#39;re buying {showcaseTokenName} at a higher price than the market, which will result in receiving fewer\n          tokens compared to swapping via an exchange.\n        </p>\n        <p>You will not receive any bonus tokens when buying this bond.</p>\n        <Flex\n          className=\"nobonus-checkbox-row ape:flex-row ape:gap-[8px] ape:pb-[20px] ape:cursor-pointer\"\n          onClick={handleCheckboxChange}\n        >\n          <Flex className=\"nobonus-checkbox\">\n            <Checkbox checked={isChecked} onChange={handleCheckboxChange} />\n          </Flex>\n          <Flex className=\"nobonus-checkbox-text\">I understand and want to proceed.</Flex>\n        </Flex>\n        <Flex className=\"nobonus-actions ape:flex-row ape:gap-[8px]\">\n          <Button\n            className=\"nobonus-cancel ape:w-full ape:justify-center\"\n            onClick={handleCancel}\n            variant=\"secondary\"\n          >\n            Cancel\n          </Button>\n          <Button\n            className=\"nobonus-buy ape:w-full ape:justify-center\"\n            onClick={handleAcknowledge}\n            disabled={!isChecked}\n          >\n            Buy\n          </Button>\n        </Flex>\n      </Modal>\n    )\n  )\n}\n\nexport default NoBonusModal\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAgC,CAAC,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAI;IACzF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAC1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEjD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,aAAa,EAAE;QACf,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,MAAM,YAAY,GAAG,MAAK;QACxB,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,MAAM,oBAAoB,GAAG,MAAK;AAChC,QAAA,YAAY,CAAC,CAAC,SAAS,CAAC;AAC1B,IAAA,CAAC;IAED,QACE,MAAM,KACJA,IAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,iBAAiB,EAAA,QAAA,EAAA,CACzEA,yCACqB,iBAAiB,EAAA,uHAAA,CAAA,EAAA,CAElC,EACJC,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,8DAAA,EAAA,CAAmE,EACnED,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,kFAAkF,EAC5F,OAAO,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAE7BC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAChCA,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,EAAA,CAAI,GAC3D,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAyC,CAAA,EAAA,CAC3E,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CAC1DC,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,8CAA8C,EACxD,OAAO,EAAE,YAAY,EACrB,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,QAAA,EAAA,CAGZ,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,SAAS,oBAGb,CAAA,EAAA,CACJ,CAAA,EAAA,CACD,CACT;AAEL;;;;"}

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

@@ -1,8 +1,8 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import useTierPoints, { getUserTier, TIERS_COLORS } from '../../../../state/tiers/useTierPoints.js';
-import { LaunchBondTiers, BillVersion } from '@ape.swap/apeswap-lists';
+import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 import { formatNumberSI } from '../../../../utils/formatNumber.js';
 import { useAbondPrice } from '../../../../state/tokenPrices/useAbondPrice.js';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -16,6 +16,9 @@ const getUpgradeNowAmountUsd = (amountUsd) => {
     const roundedUp = Number(toFixedString(amountUsd, 2, 'halfUp'));
     return Number(toFixedString(roundedUp + UPGRADE_NOW_USD_BUFFER, 2, 'ceil'));
 };
+// always a separate flex item (not inline text) so it stays pinned to the row's right edge
+// via the row's `justify-between`, instead of trailing wherever the sentence happens to end
+const upgradeNowClasses = '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';
 const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDecimals, inputTokenPrice, }) => {
     const [isOpen, setIsOpen] = useState(false);
     // Hooks & Data
@@ -30,7 +33,7 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
     // const feeToBeCollected = inputAmountUSD * fee
     // const feeInAbond = feeToBeCollected / abondPrice!
     // const pointsToBeEarned = feeInAbond * 4
-    const optimizationData = calculateOptimizationData(inputAmount, promotionalPoints, bond, inputTokenPrice, abondPrice);
+    const optimizationData = calculateOptimizationData(inputAmount, promotionalPoints, bond, inputTokenPrice, Number(abondPrice));
     const nextTierData = optimizationData?.data?.[0];
     const highestProfitableTier = optimizationData?.highestProfitableTier;
     const shouldRenderNextTierRow = Boolean((userTier ?? 0) < LaunchBondTiers.Mythical && nextTierData && (!highestProfitableTier || isOpen));
@@ -54,101 +57,17 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
             return;
         handleTierSelection(nextTierData.minBreakevenWithFeeUSD);
     };
-    return (userTier !== LaunchBondTiers.Legend &&
-        bond.billVersion === BillVersion.V4 && (jsxs(Flex, { sx: {
-            width: '100%',
-            mt: '10px',
-            fontSize: '12px',
-            fontWeight: 400,
-            flexDirection: 'column',
-            position: 'relative',
-            cursor: !highestProfitableTier && 'pointer',
-        }, onClick: () => setIsOpen(!isOpen), children: [highestProfitableTier && (jsxs(Flex, { sx: {
-                    border: '1px solid rgba(22, 101, 52, 0.53)',
-                    borderRadius: 'normal',
-                    position: 'relative',
-                    overflow: 'hidden',
-                    pl: '10px',
-                    pr: ['10px', '10px', '10px', '20px'],
-                    py: '6px',
-                    background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%) !important',
+    return (jsxs(Flex, { className: "ape:w-full ape:text-[12px] ape:font-normal ape:flex-col ape:relative", style: { cursor: !highestProfitableTier ? 'pointer' : undefined }, onClick: () => setIsOpen(!isOpen), children: [highestProfitableTier ? (jsxs(Flex, { 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", style: {
+                    borderColor: 'rgba(22, 101, 52, 0.53)',
+                    background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%)',
                     color: 'rgba(134, 237, 171, 0.70)',
-                    minHeight: '27px',
-                    alignItems: 'center',
-                    gap: '5px',
-                    flexWrap: 'wrap',
-                }, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'sub', mr: '4px' }, children: jsx(Discount, { width: 14, color: '#4AD980' }) }), jsx("span", { sx: { fontWeight: 700 }, children: "Congratulations!" }), " With your purchase you will accumulate points to upgrade to ", jsx("span", { sx: { fontWeight: 700, color: TIERS_COLORS[highestProfitableTier?.tier] }, children: highestProfitableTier.tierName }), ' ', jsx("span", { sx: { fontWeight: 700 }, children: "Tier!" })] }), !highestProfitableTier && jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 10 })] })), shouldRenderNextTierRow && !highestProfitableTier && (jsxs(Flex, { onClick: handleToggleOpen, sx: {
-                    border: '1px solid #9960C5',
-                    borderRadius: 'normal',
-                    position: 'relative',
-                    overflow: 'hidden',
-                    pl: '10px',
-                    pr: '15px',
-                    py: '2px',
-                    mt: highestProfitableTier ? '3px' : '0px',
-                    alignItems: 'center',
-                    background: '#312341',
-                    justifyContent: 'space-between',
-                    minWidth: '120px',
-                }, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'bottom' }, children: jsx("img", { src: `https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(nextTierData?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { sx: { color: TIERS_COLORS[nextTierData?.tier], px: '3px', fontWeight: 600 }, children: nextTierData?.tierName }), "Tier.", jsx("span", { sx: {
-                                    ml: '5px',
-                                    mr: '5px',
-                                    color: 'primaryButton',
-                                    fontWeight: 500,
-                                    cursor: 'pointer',
-                                    ':hover': { textDecoration: 'underline' },
-                                    display: ['inline', 'inline', 'inline', 'none'],
-                                }, onClick: (e) => {
-                                    handleUpgradeNowClick(e);
-                                }, children: `Upgrade now >` })] }), jsx("span", { sx: {
-                            ml: '5px',
-                            mr: '5px',
-                            color: 'primaryButton',
-                            fontWeight: 500,
-                            cursor: 'pointer',
-                            ':hover': { textDecoration: 'underline' },
-                            display: ['none', 'none', 'none', 'flex'],
-                        }, onClick: (e) => {
-                            handleUpgradeNowClick(e);
-                        }, children: `Upgrade now >` }), shouldShowNextTierRowCaret && (jsx("span", { sx: { display: 'inline-flex', alignItems: 'center' }, onClick: handleToggleOpen, role: "button", "aria-label": isOpen ? 'Collapse tier list' : 'Expand tier list', children: jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 8 }) }))] })), jsx(AnimatePresence, { children: isOpen && optimizationData && !highestProfitableTier && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%', marginTop: '3px', cursor: 'pointer' }, children: optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {
-                        return (jsxs(Flex, { sx: {
-                                border: '1px solid #9960C5',
-                                borderRadius: 'normal',
-                                position: 'relative',
-                                overflow: 'hidden',
-                                pl: '10px',
-                                pr: '20px',
-                                py: '2px',
-                                mt: index === 0 ? '0px' : '3px',
-                                alignItems: 'center',
-                                background: '#312341',
-                                justifyContent: 'space-between',
-                            }, onClick: handleToggleOpen, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'bottom' }, children: jsx("img", { src: `https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(data?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { sx: { color: TIERS_COLORS[data?.tier], px: '3px', fontWeight: 600 }, children: data?.tierName }), "Tier.", jsx("span", { sx: {
-                                                ml: '5px',
-                                                mr: '15px',
-                                                color: 'primaryButton',
-                                                fontWeight: 500,
-                                                cursor: 'pointer',
-                                                ':hover': { textDecoration: 'underline' },
-                                                display: ['inline', 'inline', 'inline', 'none'],
-                                            }, onClick: (e) => {
-                                                e.stopPropagation();
-                                                handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD));
-                                                setIsOpen(false);
-                                            }, children: `Upgrade now >` })] }), jsx("span", { sx: {
-                                        ml: '5px',
-                                        color: 'primaryButton',
-                                        fontWeight: 500,
-                                        cursor: 'pointer',
-                                        ':hover': { textDecoration: 'underline' },
-                                        display: ['none', 'none', 'none', 'flex'],
-                                        minWidth: '100px',
-                                    }, onClick: (e) => {
+                }, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-sub ape:mr-[4px]", children: jsx(Discount, { width: 14, color: '#4AD980' }) }), jsx("span", { className: "ape:font-bold", children: "Congratulations!" }), " With your purchase you will accumulate points to upgrade to ", jsx("span", { className: "ape:font-bold", style: { color: TIERS_COLORS[highestProfitableTier?.tier] }, children: highestProfitableTier.tierName }), ' ', jsx("span", { className: "ape:font-bold", children: "Tier!" })] }), !highestProfitableTier && jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 10 })] })) : shouldRenderNextTierRow ? (jsxs(Flex, { onClick: handleToggleOpen, 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]", style: { background: '#312341', marginTop: highestProfitableTier ? '3px' : '0px' }, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-middle", children: jsx("img", { src: `https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(nextTierData?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { className: "ape:px-[3px] ape:font-semibold", style: { color: TIERS_COLORS[nextTierData?.tier] }, children: nextTierData?.tierName }), "Tier."] }), jsx("span", { className: upgradeNowClasses, onClick: (e) => handleUpgradeNowClick(e), children: `Upgrade now >` }), shouldShowNextTierRowCaret && (jsx("span", { className: "ape:inline-flex ape:items-center", onClick: handleToggleOpen, role: "button", "aria-label": isOpen ? 'Collapse tier list' : 'Expand tier list', children: jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 8 }) }))] })) : null, jsx(AnimatePresence, { children: isOpen && optimizationData && !highestProfitableTier && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, className: "ape:overflow-hidden ape:w-full ape:mt-[3px] ape:cursor-pointer", children: optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {
+                        return (jsxs(Flex, { 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", style: { background: '#312341', marginTop: index === 0 ? '0px' : '3px' }, onClick: handleToggleOpen, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-middle", children: jsx("img", { src: `https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(data?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { className: "ape:px-[3px] ape:font-semibold", style: { color: TIERS_COLORS[data?.tier] }, children: data?.tierName }), "Tier."] }), jsx("span", { className: upgradeNowClasses, onClick: (e) => {
                                         e.stopPropagation();
                                         handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD));
                                         setIsOpen(false);
                                     }, children: `Upgrade now >` })] }, data.tierName));
-                    }) })) })] })));
+                    }) })) })] }));
 };
 
 export { PointsLeftForNextTier as default };

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

@@ -1 +1 @@
-{"version":3,"file":"PointsLeftForNextTier.js","sources":["../../../../../src/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, {\n  getUserTier,\n  TIERS_COLORS,\n  // TIERS_WEIGHT,\n} from '../../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\n// import { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { useAbondPrice } from '../../../../state/tokenPrices/useAbondPrice'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { calculateOptimizationData } from '../../utils'\nimport Discount from '../../../../components/uikit-sdk/Svg/Icons/Discount'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport { toFixedString } from '../../../../utils/fixedPoint'\n\nconst UPGRADE_NOW_USD_BUFFER = 0.1\n\nconst getUpgradeNowAmountUsd = (amountUsd: number) => {\n  const roundedUp = Number(toFixedString(amountUsd, 2, 'halfUp'))\n  return Number(toFixedString(roundedUp + UPGRADE_NOW_USD_BUFFER, 2, 'ceil'))\n}\n\n// const getNextTierInfo = (userPoints: string) => {\n//   const tiers = [\n//     { tier: LaunchBondTiers.Silver, threshold: TIERS_WEIGHT[LaunchBondTiers.Silver] },\n//     { tier: LaunchBondTiers.Gold, threshold: TIERS_WEIGHT[LaunchBondTiers.Gold] },\n//     { tier: LaunchBondTiers.Diamond, threshold: TIERS_WEIGHT[LaunchBondTiers.Diamond] },\n//     { tier: LaunchBondTiers.Legend, threshold: TIERS_WEIGHT[LaunchBondTiers.Legend] },\n//     { tier: LaunchBondTiers.Mythical, threshold: TIERS_WEIGHT[LaunchBondTiers.Mythical] },\n//   ]\n//\n//   const userPointsBN = getBalanceNumber(userPoints)\n//\n//   for (const { tier, threshold } of tiers) {\n//     const thresholdNumber = getBalanceNumber(threshold)\n//     if (userPointsBN < thresholdNumber) {\n//       const pointsNeeded = thresholdNumber - userPointsBN\n//       return { nextTier: tier, pointsNeeded }\n//     }\n//   }\n//\n//   return null // User is at max tier (Mythical)\n// }\n\ninterface GetUpToComponentProps {\n  bond: BondsData\n  inputAmount: string\n  setInputValue: (value: string) => void\n  inputTokenDecimals: number\n  inputTokenPrice?: number\n}\n\nconst PointsLeftForNextTier: React.FC<GetUpToComponentProps> = ({\n  bond,\n  inputAmount,\n  setInputValue,\n  inputTokenDecimals,\n  inputTokenPrice,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n  // Hooks & Data\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const abondPrice = useAbondPrice()\n  const userTier = getUserTier(promotionalPoints)\n  // const nextTierInfo = getNextTierInfo(promotionalPoints || '0')\n  // const inputAmountUSD = parseFloat(inputAmount) * (inputTokenPrice ?? 0)\n  // const necessaryUSDAmount = (nextTierInfo?.pointsNeeded! / 4) * abondPrice!\n  // const fee = ((bond.tierBoostRate ?? 0) + 100) / 100 - 1\n  // const feeToBeCollected = inputAmountUSD * fee\n  // const feeInAbond = feeToBeCollected / abondPrice!\n  // const pointsToBeEarned = feeInAbond * 4\n\n  const optimizationData = calculateOptimizationData(inputAmount, promotionalPoints!, bond, inputTokenPrice, abondPrice)\n  const nextTierData = optimizationData?.data?.[0]\n  const highestProfitableTier = optimizationData?.highestProfitableTier\n  const shouldRenderNextTierRow = Boolean(\n    (userTier ?? 0) < LaunchBondTiers.Mythical && nextTierData && (!highestProfitableTier || isOpen),\n  )\n  const shouldShowNextTierRowCaret = !highestProfitableTier\n\n  const handleSetNextTierAmount = (amount: number) => {\n    const inputValueInSelectedToken = amount / (inputTokenPrice ?? 0)\n    const roundedInputValue = toFixedString(inputValueInSelectedToken, inputTokenDecimals, 'ceil')\n    setInputValue(roundedInputValue)\n  }\n\n  const handleTierSelection = (amount: number) => {\n    handleSetNextTierAmount(getUpgradeNowAmountUsd(amount))\n    setIsOpen(false)\n  }\n\n  const handleToggleOpen = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setIsOpen((prev) => !prev)\n  }\n\n  const handleUpgradeNowClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (!nextTierData) return\n    handleTierSelection(nextTierData.minBreakevenWithFeeUSD)\n  }\n\n  return (\n    userTier !== LaunchBondTiers.Legend &&\n    bond.billVersion === BillVersion.V4 && (\n      <Flex\n        sx={{\n          width: '100%',\n          mt: '10px',\n          fontSize: '12px',\n          fontWeight: 400,\n          flexDirection: 'column',\n          position: 'relative',\n          cursor: !highestProfitableTier && 'pointer',\n        }}\n        onClick={() => setIsOpen(!isOpen)}\n      >\n        {highestProfitableTier && (\n          <Flex\n            sx={{\n              border: '1px solid rgba(22, 101, 52, 0.53)',\n              borderRadius: 'normal',\n              position: 'relative',\n              overflow: 'hidden',\n              pl: '10px',\n              pr: ['10px', '10px', '10px', '20px'],\n              py: '6px',\n              background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%) !important',\n              color: 'rgba(134, 237, 171, 0.70)',\n              minHeight: '27px',\n              alignItems: 'center',\n              gap: '5px',\n              flexWrap: 'wrap',\n            }}\n          >\n            <span sx={{ flex: 1 }}>\n              <span sx={{ display: 'inline-flex', verticalAlign: 'sub', mr: '4px' }}>\n                <Discount width={14} color={'#4AD980'} />\n              </span>\n              <span sx={{ fontWeight: 700 }}>Congratulations!</span> With your purchase you will accumulate points to\n              upgrade to {/*@ts-ignore*/}\n              <span sx={{ fontWeight: 700, color: TIERS_COLORS[highestProfitableTier?.tier] }}>\n                {highestProfitableTier.tierName}\n              </span>{' '}\n              <span sx={{ fontWeight: 700 }}>Tier!</span>\n            </span>\n            {!highestProfitableTier && <Caret direction={isOpen ? 'up' : 'down'} width={10} />}\n          </Flex>\n        )}\n        {shouldRenderNextTierRow && !highestProfitableTier && (\n          <Flex\n            onClick={handleToggleOpen}\n            sx={{\n              border: '1px solid #9960C5',\n              borderRadius: 'normal',\n              position: 'relative',\n              overflow: 'hidden',\n              pl: '10px',\n              pr: '15px',\n              py: '2px',\n              mt: highestProfitableTier ? '3px' : '0px',\n              alignItems: 'center',\n              background: '#312341',\n              justifyContent: 'space-between',\n              minWidth: '120px',\n            }}\n          >\n            <span sx={{ flex: 1 }}>\n              <span sx={{ display: 'inline-flex', verticalAlign: 'bottom' }}>\n                <img\n                  src={`https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`}\n                  alt=\"minTier\"\n                  style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                />\n              </span>\n              Doing a ${formatNumberSI(nextTierData?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n              <span sx={{ color: TIERS_COLORS[nextTierData?.tier], px: '3px', fontWeight: 600 }}>\n                {nextTierData?.tierName}\n              </span>\n              Tier.\n              <span\n                sx={{\n                  ml: '5px',\n                  mr: '5px',\n                  color: 'primaryButton',\n                  fontWeight: 500,\n                  cursor: 'pointer',\n                  ':hover': { textDecoration: 'underline' },\n                  display: ['inline', 'inline', 'inline', 'none'],\n                }}\n                onClick={(e) => {\n                  handleUpgradeNowClick(e)\n                }}\n              >\n                {`Upgrade now >`}\n              </span>\n            </span>\n            <span\n              sx={{\n                ml: '5px',\n                mr: '5px',\n                color: 'primaryButton',\n                fontWeight: 500,\n                cursor: 'pointer',\n                ':hover': { textDecoration: 'underline' },\n                display: ['none', 'none', 'none', 'flex'],\n              }}\n              onClick={(e) => {\n                handleUpgradeNowClick(e)\n              }}\n            >\n              {`Upgrade now >`}\n            </span>\n            {shouldShowNextTierRowCaret && (\n              <span\n                sx={{ display: 'inline-flex', alignItems: 'center' }}\n                onClick={handleToggleOpen}\n                role=\"button\"\n                aria-label={isOpen ? 'Collapse tier list' : 'Expand tier list'}\n              >\n                <Caret direction={isOpen ? 'up' : 'down'} width={8} />\n              </span>\n            )}\n          </Flex>\n        )}\n        <AnimatePresence>\n          {isOpen && optimizationData && !highestProfitableTier && (\n            <motion.div\n              initial={{ height: 0 }}\n              animate={{ height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ height: 0 }}\n              sx={{ overflow: 'hidden', width: '100%', marginTop: '3px', cursor: 'pointer' }}\n            >\n              {optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {\n                return (\n                  <Flex\n                    sx={{\n                      border: '1px solid #9960C5',\n                      borderRadius: 'normal',\n                      position: 'relative',\n                      overflow: 'hidden',\n                      pl: '10px',\n                      pr: '20px',\n                      py: '2px',\n                      mt: index === 0 ? '0px' : '3px',\n                      alignItems: 'center',\n                      background: '#312341',\n                      justifyContent: 'space-between',\n                    }}\n                    onClick={handleToggleOpen}\n                    key={data.tierName}\n                  >\n                    <span sx={{ flex: 1 }}>\n                      <span sx={{ display: 'inline-flex', verticalAlign: 'bottom' }}>\n                        <img\n                          src={`https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`}\n                          alt=\"minTier\"\n                          style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                        />\n                      </span>\n                      Doing a ${formatNumberSI(data?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n                      <span sx={{ color: TIERS_COLORS[data?.tier], px: '3px', fontWeight: 600 }}>{data?.tierName}</span>\n                      Tier.\n                      <span\n                        sx={{\n                          ml: '5px',\n                          mr: '15px',\n                          color: 'primaryButton',\n                          fontWeight: 500,\n                          cursor: 'pointer',\n                          ':hover': { textDecoration: 'underline' },\n                          display: ['inline', 'inline', 'inline', 'none'],\n                        }}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                          setIsOpen(false)\n                        }}\n                      >\n                        {`Upgrade now >`}\n                      </span>\n                    </span>\n                    <span\n                      sx={{\n                        ml: '5px',\n                        color: 'primaryButton',\n                        fontWeight: 500,\n                        cursor: 'pointer',\n                        ':hover': { textDecoration: 'underline' },\n                        display: ['none', 'none', 'none', 'flex'],\n                        minWidth: '100px',\n                      }}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                        setIsOpen(false)\n                      }}\n                    >\n                      {`Upgrade now >`}\n                    </span>\n                  </Flex>\n                )\n              })}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </Flex>\n    )\n  )\n}\n\nexport default PointsLeftForNextTier\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PointsLeftForNextTier.js","sources":["../../../../../src/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, {\n  getUserTier,\n  TIERS_COLORS,\n  // TIERS_WEIGHT,\n} from '../../../../state/tiers/useTierPoints'\nimport { 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":";;;;;;;;;;;;;AAkBA,MAAM,sBAAsB,GAAG,GAAG;AAElC,MAAM,sBAAsB,GAAG,CAAC,SAAiB,KAAI;AACnD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC/D,IAAA,OAAO,MAAM,CAAC,aAAa,CAAC,SAAS,GAAG,sBAAsB,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAC7E,CAAC;AAgCD;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/components/ProjectDescription.d.ts

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

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

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

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

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

package/dist/views/BuyBond/index.js

@@ -1,11 +1,11 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Providers from '../../providers/index.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import BuyBondModal from './BuyBondModal.js';
 
 const BuyBondModalWithProviders = (props) => {
     useSDKConfig(props);
-    return (jsx(Providers, { theme: props.theme, children: jsx(BuyBondModal, { ...props }) }));
+    return (jsx(Providers, { children: jsx(BuyBondModal, { ...props }) }));
 };
 
 export { BuyBondModalWithProviders as default };

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 theme={props.theme}>\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;AAEnB,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,QAAA,EAC3BA,IAAC,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 { 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;;;;"}

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

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

package/dist/views/FullBondsView/FullBondsView.js

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

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

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

package/dist/views/FullBondsView/index.js

@@ -1,11 +1,11 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Providers from '../../providers/index.js';
 import FullBondsView from './FullBondsView.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 
 const FullBondsViewWithProviders = (props) => {
     useSDKConfig(props);
-    return (jsx(Providers, { theme: props?.theme, children: jsx(FullBondsView, {}) }));
+    return (jsx(Providers, { children: jsx(FullBondsView, {}) }));
 };
 
 export { FullBondsViewWithProviders as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/views/FullBondsView/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport FullBondsView from './FullBondsView'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\n\nconst FullBondsViewWithProviders: React.FC<SDKPropsDTO> = (props) => {\n  useSDKConfig(props)\n  return (\n    <Providers theme={props?.theme}>\n      <FullBondsView />\n    </Providers>\n  )\n}\n\nexport default FullBondsViewWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,0BAA0B,GAA0B,CAAC,KAAK,KAAI;IAClE,YAAY,CAAC,KAAK,CAAC;AACnB,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,YAC5BA,GAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACP;AAEhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/views/FullBondsView/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport FullBondsView from './FullBondsView'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\n\nconst FullBondsViewWithProviders: React.FC<SDKPropsDTO> = (props) => {\n  useSDKConfig(props)\n  return (\n    <Providers>\n      <FullBondsView />\n    </Providers>\n  )\n}\n\nexport default FullBondsViewWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,0BAA0B,GAA0B,CAAC,KAAK,KAAI;IAClE,YAAY,CAAC,KAAK,CAAC;IACnB,QACEA,IAAC,SAAS,EAAA,EAAA,QAAA,EACRA,IAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACP;AAEhB;;;;"}

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

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

package/dist/views/LifiModal/LifiModal.js

@@ -1,8 +1,7 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { LiFiWidget } from '@lifi/widget';
 import Modal from '../../components/uikit-sdk/Modal/index.js';
 import ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader.js';
-import Text from '../../components/uikit-sdk/Text/index.js';
 
 const getFees = async (fromTokenSymbol, toTokenSymbol) => {
     const stableCoins = ['FRAX', 'USDC', 'USDT', 'DAI', 'BUSD', 'TUSD', 'USDD', 'FDUSD'];
@@ -61,7 +60,7 @@ const LifiModal = ({ bondChain, principalToken, onDismiss, }) => {
             },
         },
     };
-    return (jsxs(Modal, { sx: { minWidth: '450px', justifyContent: 'center', alignItems: 'center', p: '0px' }, children: [jsx(ModalHeader, { onDismiss: onDismiss, hideDivider: true, sx: { p: '20px 20px 0 20px' }, children: jsx(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: "Swap & Bridge with LIFI" }) }), jsx(LiFiWidget, { ...config })] }));
+    return (jsxs(Modal, { className: "ape:justify-center ape:items-center ape:p-0!", children: [jsx(ModalHeader, { className: "ape:px-6 ape:pt-4", onDismiss: onDismiss, hideDivider: true, children: "Swap & Bridge with LIFI" }), jsx(LiFiWidget, { ...config })] }));
 };
 
 export { LifiModal as default };

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

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