@ape.swap/bonds-sdk 1.1.0-test.42 → 1.1.0-test.44

package/dist/components/BondRows/BondRow.d.ts

@@ -5,6 +5,7 @@ interface BondRowProps {
     key: string;
     bond: BondsData;
     hotBonds?: string[];
+    modalVariant?: 'standard' | 'alt';
 }
 declare const BondRow: React.FC<BondRowProps>;
 export default BondRow;

package/dist/components/BondRows/BondRowsByChain.d.ts

@@ -1,9 +1,10 @@
 import { BondsData } from '../../types/bonds';
 import '../../scss/BondRowsByChain.scss';
-declare const BondRowsByChain: ({ bonds, hotBonds, hideTitles, chains, }: {
+declare const BondRowsByChain: ({ bonds, hotBonds, hideTitles, chains, modalVariant }: {
     bonds: BondsData[];
     hotBonds?: string[];
     hideTitles: boolean;
     chains?: number[];
+    modalVariant?: "standard" | "alt";
 }) => import("react").JSX.Element;
 export default BondRowsByChain;

package/dist/components/BondRows/BondRowsWithTitle.d.ts

@@ -1,9 +1,10 @@
 import { BondsData } from '../../types/bonds';
 import '../../scss/BondRowsWithTitle.scss';
-declare const BondRowsWithTitle: ({ chain, bonds, hotBonds, hideTitles, }: {
+declare const BondRowsWithTitle: ({ chain, bonds, hotBonds, hideTitles, modalVariant }: {
     chain: number;
     bonds: BondsData[];
     hotBonds?: string[];
     hideTitles: boolean;
+    modalVariant?: "standard" | "alt";
 }) => import("react").JSX.Element;
 export default BondRowsWithTitle;

package/dist/main.js

@@ -7730,9 +7730,11 @@ const getDefaultTransition = (valueKey, { keyframes }) => {
 };
 
 function getValueTransition(transition, key) {
-    return (transition[key] ||
-        transition["default"] ||
-        transition);
+    return transition
+        ? transition[key] ||
+            transition["default"] ||
+            transition
+        : undefined;
 }
 
 const MotionGlobalConfig = {
@@ -9358,6 +9360,8 @@ const isEasingArray = (ease) => {
     return Array.isArray(ease) && typeof ease[0] !== "number";
 };
 
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+
 const easingLookup = {
     linear: noop,
     easeIn,
@@ -9372,7 +9376,7 @@ const easingLookup = {
     anticipate,
 };
 const easingDefinitionToFunction = (definition) => {
-    if (Array.isArray(definition)) {
+    if (isBezierDefinition(definition)) {
         // If cubic bezier definition, create bezier curve
         invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
         const [x1, y1, x2, y2] = definition;
@@ -10163,8 +10167,6 @@ const acceleratedValues = new Set([
     // "background-color"
 ]);
 
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-
 // Create a linear easing point for every 10 ms
 const resolution = 10;
 const generateLinearEasing = (easing, duration // as milliseconds
@@ -10839,7 +10841,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "11.11.0";
+        this.version = "11.11.7";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -15544,9 +15546,8 @@ const useIsomorphicLayoutEffect = isBrowser$1 ? useLayoutEffect : useEffect;
 
 const LazyContext = createContext({ strict: false });
 
-let scheduleHandoffComplete = false;
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    var _a;
+    var _a, _b;
     const { visualElement: parent } = useContext(MotionContext);
     const lazyContext = useContext(LazyContext);
     const presenceContext = useContext(PresenceContext);
@@ -15589,11 +15590,12 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
     const wantsHandoff = useRef(Boolean(optimisedAppearId) &&
-        !window.MotionHandoffIsComplete &&
-        ((_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)));
+        !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&
+        ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
+        window.MotionIsMounted = true;
         visualElement.updateFeatures();
         microtask.render(visualElement.render);
         /**
@@ -15616,18 +15618,17 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         if (!wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
-        wantsHandoff.current = false;
-        // This ensures all future calls to animateChanges() will run in useEffect
-        if (!scheduleHandoffComplete) {
-            scheduleHandoffComplete = true;
-            queueMicrotask(completeHandoff);
+        if (wantsHandoff.current) {
+            // This ensures all future calls to animateChanges() in this component will run in useEffect
+            queueMicrotask(() => {
+                var _a;
+                (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
+            });
+            wantsHandoff.current = false;
         }
     });
     return visualElement;
 }
-function completeHandoff() {
-    window.MotionHandoffIsComplete = true;
-}
 function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
     const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = props;
     visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"]
@@ -16616,7 +16617,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.11.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.11.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.7 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -17319,19 +17320,20 @@ function PopChild({ children, isPresent }) {
 const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
     const presenceChildren = useConstant(newChildrenMap);
     const id = useId();
+    const memoizedOnExitComplete = useCallback((childId) => {
+        presenceChildren.set(childId, true);
+        for (const isComplete of presenceChildren.values()) {
+            if (!isComplete)
+                return; // can stop searching when any is incomplete
+        }
+        onExitComplete && onExitComplete();
+    }, [presenceChildren, onExitComplete]);
     const context = useMemo(() => ({
         id,
         initial,
         isPresent,
         custom,
-        onExitComplete: (childId) => {
-            presenceChildren.set(childId, true);
-            for (const isComplete of presenceChildren.values()) {
-                if (!isComplete)
-                    return; // can stop searching when any is incomplete
-            }
-            onExitComplete && onExitComplete();
-        },
+        onExitComplete: memoizedOnExitComplete,
         register: (childId) => {
             presenceChildren.set(childId, false);
             return () => presenceChildren.delete(childId);
@@ -17342,7 +17344,9 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p
      * we want to make a new context value to ensure they get re-rendered
      * so they can detect that layout change.
      */
-    presenceAffectsLayout ? [Math.random()] : [isPresent]);
+    presenceAffectsLayout
+        ? [Math.random(), memoizedOnExitComplete]
+        : [isPresent, memoizedOnExitComplete]);
     useMemo(() => {
         presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
     }, [isPresent]);
@@ -65191,7 +65195,7 @@ const youGet = (bond, inputValue) => {
     var _a;
     const bigValue = new BigNumber$1(inputValue).times(new BigNumber$1(10).pow(18));
     const billValue = bigValue.div(new BigNumber$1((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
-    return formatNumber(billValue.toString());
+    return lodashExports.toNumber(billValue);
 };
 const youGetUSD = (bond, inputValue) => {
     var _a;
@@ -66039,7 +66043,7 @@ const useApproval = (amount, currency, spender, account, chainId) => {
     return [approvalState !== null && approvalState !== void 0 ? approvalState : ApprovalState.NOT_APPROVED, handleApprove];
 };
 
-const version = '2.21.17';
+const version = '2.21.21';
 
 let errorConfig = {
     getDocsUrl: ({ docsBaseUrl, docsPath = '', docsSlug, }) => docsPath
@@ -72340,25 +72344,25 @@ const BondModal = ({ bondAddress, bondChain, accordionTitle = 'What are Bonds?',
                 //
                 //
                 // <Flex className="modal-backdrop" onClick={handleClose}>
-                jsxs(Flex, { className: "modal-content font-small gpt", children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"", modalVariant, "\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), toastMessage && jsx$2(Flex, { className: "toast", children: toastMessage }), jsx$2(Flex, { className: "modal-header", children: jsx$2(Flex, { className: "svg-close", onClick: handleClose, children: jsx$2(Svg, { icon: "close" }) }) }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_s = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _s !== void 0 ? _s : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_t = bondData.showcaseTokenName) !== null && _t !== void 0 ? _t : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { children: ["You will receive:", jsx$2(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_u = bondData.showcaseTokenName) !== null && _u !== void 0 ? _u : bondData.earnToken.symbol, size: 20 }) }), (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(2), ' ', bondData.earnToken.symbol, " + \u00A0", (lodashExports.toNumber(youGet(bondData, inputValue)) -
-                                                                    lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(2), jsx$2("span", { className: "text-highlight", children: "\u00A0additional" })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button button-narrow", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account, onClick: (event) => {
+                jsxs(Flex, { className: "modal-content font-small gpt", children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"", modalVariant, "\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), toastMessage && jsx$2(Flex, { className: "toast", children: toastMessage }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_s = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _s !== void 0 ? _s : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_t = bondData.showcaseTokenName) !== null && _t !== void 0 ? _t : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { children: ["You will receive:", jsx$2(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_u = bondData.showcaseTokenName) !== null && _u !== void 0 ? _u : bondData.earnToken.symbol, size: 20 }) }), (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, " + \u00A0", (youGet(bondData, inputValue) -
+                                                                    lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), jsx$2("span", { className: "text-highlight", children: "\u00A0additional" })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button button-narrow", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account, onClick: (event) => {
                                                                     event.stopPropagation();
                                                                     switchChain({ chainId: bondData.chainId });
                                                                 }, children: !account ? 'Connect Wallet' : `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsxs(Button, { className: "action-button", load: load, disabled: load || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account || !inputValue || parseFloat(inputValue) === 0, onClick: handleBothPurchases, children: ["buy ", isZap ? 'zap' : 'normal'] })) : (jsxs(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
                                                                     (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                                     !account ||
                                                                     !inputValue ||
-                                                                    parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((lodashExports.toNumber(youGet(bondData, inputValue)) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue), " ", jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date: ", moment().format('DD-MMM-YYYY')] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', moment()
+                                                                    parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue).toFixed(0), " ", jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date: ", moment().format('DD-MMM-YYYY')] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', moment()
                                             .add(vestingTime((_v = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _v !== void 0 ? _v : 0).days, 'days')
                                             .format('DD-MMM-YYYY')] }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "What are bonds?" })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })
                 // </Flex>
                 ) }))] }));
 };
 
-const BondRow = ({ bond, hotBonds }) => {
+const BondRow = ({ bond, hotBonds, modalVariant }) => {
     var _a, _b, _c;
     // Modal
-    const [openBuyModal] = useModal(jsx$2(BondModal, { bondAddress: bond.billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${bond.billAddress}-${bond.chainId}`);
+    const [openBuyModal] = useModal(jsx$2(BondModal, { bondAddress: bond.billAddress, bondChain: bond.chainId, variant: modalVariant }), true, true, `buyBondModal-${bond.billAddress}-${bond.chainId}`);
     const handleOpenModal = () => {
         openBuyModal();
         if (typeof window !== 'undefined') {
@@ -72411,7 +72415,7 @@ const BondRow = ({ bond, hotBonds }) => {
                             })})` }) }), jsx$2(Flex$1, { className: "column column-hotbond", children: jsx$2(Flex$1, { className: "column column-icon", children: (hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.includes(bond.billAddress.toLowerCase())) && ((_c = bond.discount) !== null && _c !== void 0 ? _c : 0) > 0 && (jsx$2(Svg, { icon: "hot", width: "20px" })) }) })] })] }, bond.billAddress));
 };
 
-const BondRowsWithTitle = ({ chain, bonds, hotBonds, hideTitles, }) => {
+const BondRowsWithTitle = ({ chain, bonds, hotBonds, hideTitles, modalVariant }) => {
     const billsFilteredByChain = bonds.filter((bill) => bill.chainId === chain);
     const key = chain;
     const [isOpen, setIsOpen] = useState(true);
@@ -72421,13 +72425,13 @@ const BondRowsWithTitle = ({ chain, bonds, hotBonds, hideTitles, }) => {
                         width: '100%',
                         marginTop: '0px',
                     }, children: billsFilteredByChain === null || billsFilteredByChain === void 0 ? void 0 : billsFilteredByChain.map((bond) => {
-                        return jsx$2(BondRow, { bond: bond, hotBonds: hotBonds }, bond.billAddress);
+                        return jsx$2(BondRow, { bond: bond, hotBonds: hotBonds, modalVariant: modalVariant }, bond.billAddress);
                     }) }, key))] }) }, key));
 };
 
-const BondRowsByChain = ({ bonds, hotBonds, hideTitles, chains, }) => {
+const BondRowsByChain = ({ bonds, hotBonds, hideTitles, chains, modalVariant }) => {
     return (jsx$2(Flex$1, { className: "bondrowsbychain", children: MAINNET_CHAINS.map((chain, index) => {
-            return ((!chains || chains.length === 0 || chains.includes(chain)) && (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hotBonds: hotBonds, hideTitles: hideTitles }, chain)));
+            return ((!chains || chains.length === 0 || chains.includes(chain)) && (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hotBonds: hotBonds, hideTitles: hideTitles, modalVariant: modalVariant }, chain)));
         }) }));
 };
 
@@ -72580,7 +72584,7 @@ const CheckUrl = () => {
     return jsx$2(Fragment$1, {});
 };
 
-const Bonds = ({ chains = [] }) => {
+const Bonds = ({ chains = [], modalVariant = 'standard' }) => {
     // Fetch data
     const { data: bondData } = useBondsData();
     const { data: hotBonds } = useHotBonds();
@@ -72627,7 +72631,7 @@ const Bonds = ({ chains = [] }) => {
     const handleChangeFilterOption = useCallback((newOption) => {
         setFilterOption(newOption);
     }, []);
-    return (jsxs(Flex$1, { className: "bonds-container table-container", children: [jsx$2(CheckUrl, {}), jsx$2(BondRowHeader, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onSort: handleSortOptions }), (billsToRender === null || billsToRender === void 0 ? void 0 : billsToRender.length) > 0 ? (jsx$2(BondRowsByChain, { chains: chains, bonds: billsToRender, hotBonds: hotBonds, hideTitles: searchQuery !== '' })) : searchQuery ? (jsx$2(Fragment$1, { children: "No results" })) : (jsx$2(Flex$1, { className: "bonds-spinner", children: jsx$2(Spinner, { size: 100 }) }))] }));
+    return (jsxs(Flex$1, { className: "bonds-container table-container", children: [jsx$2(CheckUrl, {}), jsx$2(BondRowHeader, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onSort: handleSortOptions }), (billsToRender === null || billsToRender === void 0 ? void 0 : billsToRender.length) > 0 ? (jsx$2(BondRowsByChain, { chains: chains, bonds: billsToRender, hotBonds: hotBonds, hideTitles: searchQuery !== '', modalVariant: modalVariant })) : searchQuery ? (jsx$2(Fragment$1, { children: "No results" })) : (jsx$2(Flex$1, { className: "bonds-spinner", children: jsx$2(Spinner, { size: 100 }) }))] }));
 };
 
 var BondsViewOptions;

package/dist/scss/index.scss

@@ -1,12 +1,12 @@
-@use 'AccordionText';
-@use 'BondMenu';
-@use 'BondModal';
-@use 'BondRow';
-@use 'BondRowHeader';
-@use 'BondRowsByChain';
-@use 'BondRowsWithTitle';
-@use 'Bonds';
-@use 'ProgressBar';
-@use 'TokenInfoName';
-@use 'YourBonds';
+@use 'AccordionText';
+@use 'BondMenu';
+@use 'BondModal';
+@use 'BondRow';
+@use 'BondRowHeader';
+@use 'BondRowsByChain';
+@use 'BondRowsWithTitle';
+@use 'Bonds';
+@use 'ProgressBar';
+@use 'TokenInfoName';
+@use 'YourBonds';
 @use 'YourBondsModal';

package/dist/views/BondModal/helper.d.ts

@@ -3,7 +3,7 @@ declare function formatNumber(input: string): string;
 declare function formatUSDNumber(input: string): string;
 declare const youSpend: (inputValue: string) => string;
 declare const youSpendUSD: (bond: BondsData, inputValue: string) => string;
-declare const youGet: (bond: BondsData, inputValue: string) => string;
+declare const youGet: (bond: BondsData, inputValue: string) => number;
 declare const youGetUSD: (bond: BondsData, inputValue: string) => string;
 declare const premium: (bond: BondsData, inputValue: string) => string;
 declare const getPremiumColor: (bond: BondsData, inputValue: string) => string;

package/dist/views/Bonds/Bonds.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import '../../scss/Bonds.scss';
 export interface BondsProps {
     chains?: number[];
+    modalVariant?: 'standard' | 'alt';
 }
 type SortableKeys = 'discount' | 'arr' | 'terms' | 'tokensRemaining';
 type SortDirection = 'asc' | 'desc';

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.1.0-test.42",
+  "version": "1.1.0-test.44",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",
@@ -92,5 +92,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }