@ape.swap/bonds-sdk 4.5.0-test.12 → 4.5.0-test.13

package/dist/components/TokenSelectorPanel/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ChainId, Token } from '@ape.swap/apeswap-lists';
-declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, bondChainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, inputDisabled, }: {
+import { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists';
+declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, bondChainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, inputDisabled, marketingCampaign, }: {
     typedValue: string;
     setTypedValue: (value: React.SetStateAction<string>) => void;
     selectedToken?: "NATIVE" | Token;
@@ -12,5 +12,6 @@ declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, b
     selectedTokenPrice?: number;
     bondPrincipalToken?: Token;
     inputDisabled?: boolean;
+    marketingCampaign?: MarketingCampaign;
 }) => React.JSX.Element;
 export default TokenSelectorPanel;

package/dist/main.js

@@ -67651,61 +67651,52 @@ const AddFavToken = ({ tokenSymbol, hotBond }) => {
         }, children: jsx$2(AnimatePresence, { mode: "wait", children: jsx$2(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex' }, children: isFavToken ? (jsx$2(Svg, { icon: "StarFilled", width: 22, height: 22, color: '#DE62F3' })) : (jsx$2(Svg, { icon: hotBond ? 'FirePink' : 'Star', width: hotBond ? 25 : 20, height: hotBond ? 25 : 20, color: '#73728E' })) }, isFavToken ? 'StarFilled' : 'Star') }) }));
 };
 
-// Styles of the row in the bonds list. In other words "/bonds" page.
-const bondRowCampaignStyles = {
-    [main.MarketingCampaign.Christmas2025]: {
-        backgroundImage: 'url(https://www.ape.bond/images/hotSummerCampaign/fire.png)',
-        backgroundSize: 'cover',
-    },
-};
 // Styles of the tag component.
-const tagCampaignStyles = {
+const MCTagStyles = {
     [main.MarketingCampaign.Christmas2025]: {
-        background: '#FF5A00',
+        background: '#DF4141',
         color: '#fff',
     },
 };
-const tagIconCampaignStyles = {
+// Styles of the buy bond modal.
+const MCBuyComponentStyles = {
     [main.MarketingCampaign.Christmas2025]: {
-        display: 'flex',
-        position: 'absolute',
-        right: '-40px',
-        zIndex: 1,
-        backgroundImage: 'url(https://www.ape.bond/images/hotSummerCampaign/fireTag.png)',
-        backgroundSize: 'contain',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        width: '50px',
-        height: '35px',
-        marginRight: '4px',
-        top: '50%',
-        transform: 'translateY(-50%)',
+        backgroundImage: 'url(https://ape.bond/images/mc/christmas-buy.png)',
+        backgroundSize: 'cover',
+        opacity: 1,
     },
 };
-// Styles of the buy bond modal.
-const buyComponentStyles = {
+const MCBondRowStyles = {
     [main.MarketingCampaign.Christmas2025]: {
-        backgroundImage: 'url(https://www.ape.bond/images/hotSummerCampaign/buyBond.png)',
+        backgroundImage: 'url(https://ape.bond/images/mc/christmas-row.png)',
         backgroundSize: 'cover',
+        opacity: 1,
+    },
+};
+const MCColorMapping = {
+    white3: {
+        [main.MarketingCampaign.Christmas2025]: '#348C9E33 !important',
+    },
+    white4: {
+        [main.MarketingCampaign.Christmas2025]: '#348C9E33 !important',
     },
 };
 // Styles of the token image displayed in the buy bond modal.
-const tokenImageIconStyles = {
+const MCTokenIconStyles = {
     [main.MarketingCampaign.Christmas2025]: {
-        display: 'flex',
-        top: '12px',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '55px',
-        height: '90px',
-        zIndex: 1,
-        backgroundImage: 'url(https://www.ape.bond/images/hotSummerCampaign/littleFire.png)',
+        position: 'absolute',
+        top: '-25px',
+        left: '18%',
+        width: '100%',
+        height: '50px',
+        zIndex: 10,
+        backgroundImage: 'url(https://ape.bond/images/mc/christmas-hat.png)',
         backgroundRepeat: 'no-repeat',
         backgroundSize: 'contain',
         backgroundPosition: 'center',
     },
 };
-const tagNameMapping = {
+const MCTagNameMapping = {
     [main.MarketingCampaign.Christmas2025]: 'Christmas Sale',
 };
 
@@ -67745,13 +67736,13 @@ const TokenInfoAndName = ({ tokenSymbol, chain, tag, vestEnds, isHotBond, market
                 } }), jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, icon: chain ? NETWORK_ICONS[chain] : 'question' }) }), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: {
                     marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0,
                     maxWidth: ['175px', '175px', '140px', '190px', '190px'],
-                }, children: [jsx$2(TokenImage, { symbol: tokenSymbol === 'AIX' && chain === main.ChainId.SOL ? 'SOLAIX' : tokenSymbol, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [jsx$2(Flex, { sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: jsx$2(Text, { sx: { fontSize: ['12px', '12px', '14px', '16px'] }, children: tokenSymbol }) }), vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { className: "tokeninfofav", sx: {
+                }, children: [jsxs(Flex, { sx: { position: 'relative', minWidth: '33px' }, children: [jsx$2(Flex, { sx: MCTokenIconStyles[marketingCampaign] }), jsx$2(TokenImage, { symbol: tokenSymbol === 'AIX' && chain === main.ChainId.SOL ? 'SOLAIX' : tokenSymbol, size: 33 })] }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [jsx$2(Flex, { sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: jsx$2(Text, { sx: { fontSize: ['12px', '12px', '14px', '16px'] }, children: tokenSymbol }) }), vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { className: "tokeninfofav", sx: {
                             minWidth: '25px',
                             p: '5px',
                         }, children: jsx$2(AddFavToken, { tokenSymbol: tokenSymbol, hotBond: !vestEnds && isHotBond }) })] }), jsx$2(Flex, { sx: {
                     justifyContent: isHotBond ? 'center' : 'flex-start',
                     alignItems: 'center',
-                }, children: jsx$2(Flex, { sx: { display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }, children: (tag || marketingCampaign) && (jsx$2(ListTag, { text: tagNameMapping[marketingCampaign] || tag, marketingCampaign: marketingCampaign })) }) })] }));
+                }, children: jsx$2(Flex, { sx: { display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }, children: (tag || marketingCampaign) && (jsx$2(ListTag, { text: MCTagNameMapping[marketingCampaign] || tag, marketingCampaign: marketingCampaign })) }) })] }));
 };
 
 //TODO: remove this shit
@@ -77154,7 +77145,7 @@ const TokenSelectorModal = ({ bondPrincipalToken, handleCurrencySelect, chainId,
                         }) })] }) }) }));
 };
 
-const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, inputDisabled = false, }) => {
+const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, inputDisabled = false, marketingCampaign, }) => {
     var _a, _b;
     const { address: account } = useEVMAccount();
     const { publicKey: solanaAccount } = useSOLAccount();
@@ -77165,7 +77156,7 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChai
         setTypedValue(event.target.value);
     };
     const [onTokenSelectorModal] = useModal(jsx$2(TokenSelectorModal, { bondPrincipalToken: bondPrincipalToken, handleCurrencySelect: handleCurrencySelect, chainId: bondChainId }), true, false, `tokenSelectorOnLiquidityModal${(_b = bondPrincipalToken === null || bondPrincipalToken === void 0 ? void 0 : bondPrincipalToken.address) === null || _b === void 0 ? void 0 : _b[bondChainId]}-${bondPrincipalToken === null || bondPrincipalToken === void 0 ? void 0 : bondPrincipalToken.symbol}`);
-    return (jsxs(Flex$1, { className: "token-selector-panel", sx: { borderRadius: 'normal', opacity: 0.9 }, children: [jsxs(Flex$1, { className: "input-container inputrow", children: [jsx$2(Flex$1, { className: "input-container input", children: jsx$2(Input$1, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
+    return (jsxs(Flex$1, { className: "token-selector-panel", sx: { borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign] }, children: [jsxs(Flex$1, { className: "input-container inputrow", children: [jsx$2(Flex$1, { className: "input-container input", children: jsx$2(Input$1, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
                                 if (v.currentTarget.value.includes(',')) {
                                     v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                 }
@@ -77179,7 +77170,11 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChai
                                     !!v.currentTarget.value && isNumber$1(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
                                         ? v.currentTarget.value
                                         : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
-                            }, disabled: inputDisabled }) }), jsxs(Flex$1, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: { cursor: enableZap ? 'pointer' : 'default', borderRadius: 'normal' }, children: [jsxs(Flex$1, { sx: { alignItems: 'center', gap: '10px' }, children: [jsx$2(Flex$1, { className: "input-container bondicon", children: lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: bondChainId })) : (jsx$2(TokenImage, { symbol: getSymbol(selectedToken, bondChainId), size: 28, chain: bondChainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: getSymbol(selectedToken, bondChainId) })] }), enableZap && (jsx$2(Flex$1, { sx: { mr: '8px' }, children: jsx$2(Svg, { icon: "caret" }) }))] })] }), jsxs(Flex$1, { className: "input-container balancerow", children: [jsx$2(Flex$1, { children: selectedTokenPrice && typedValue
+                            }, disabled: inputDisabled }) }), jsxs(Flex$1, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: {
+                            cursor: enableZap ? 'pointer' : 'default',
+                            borderRadius: 'normal',
+                            background: MCColorMapping.white4[marketingCampaign],
+                        }, children: [jsxs(Flex$1, { sx: { alignItems: 'center', gap: '10px' }, children: [jsx$2(Flex$1, { className: "input-container bondicon", children: lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: bondChainId })) : (jsx$2(TokenImage, { symbol: getSymbol(selectedToken, bondChainId), size: 28, chain: bondChainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: getSymbol(selectedToken, bondChainId) })] }), enableZap && (jsx$2(Flex$1, { sx: { mr: '8px' }, children: jsx$2(Svg, { icon: "caret" }) }))] })] }), jsxs(Flex$1, { className: "input-container balancerow", children: [jsx$2(Flex$1, { sx: { opacity: 0.6 }, children: selectedTokenPrice && typedValue
                             ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`
                             : '' }), jsxs(Flex$1, { children: [showBalance && jsxs(Flex$1, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsx$2(Flex$1, { className: "balancerow max", children: showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx$2(Fragment$1, { children: jsx$2(Button, { className: "max-button", onClick: () => { var _a; return handleValueBtn((_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, children: "Max" }) })) })] })] })] }));
 };
@@ -78818,7 +78813,7 @@ const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
                     height: '30px',
                     mb: ['10px', '10px', '10px', '0px'],
                     justifyContent: ['space-between', 'space-between', 'space-between', 'flex-end'],
-                }, children: [jsx$2(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'] }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) }), jsx$2(Flex, { sx: { cursor: 'pointer' }, children: onDismiss ? (jsxs(Fragment$1, { children: [showProjectInfoButton && jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx$2(Flex, { sx: { mx: '25px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: isMobile ? '16px' : '20px' }) }), jsx$2(Flex, { onClick: handleClose, children: jsx$2(Svg, { icon: "close", color: "text", width: isMobile ? '12px' : '18px' }) })] })) : (jsx$2(Flex, { sx: { py: '3px', mt: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: isMobile ? '16px' : '20px' }) })) })] }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { className: "title-container bondicon", children: [jsx$2(Flex, { sx: Object.assign({ display: 'none', position: 'absolute' }, tokenImageIconStyles[bondData.marketingCampaign]) }), jsx$2(Flex, { sx: { position: 'relative', zIndex: 2, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: jsx$2(TokenImage, { symbol: (_b = bondData.showcaseTokenName) !== null && _b !== void 0 ? _b : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) })] }), jsxs(Flex, { sx: {
+                }, children: [jsx$2(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'] }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) }), jsx$2(Flex, { sx: { cursor: 'pointer' }, children: onDismiss ? (jsxs(Fragment$1, { children: [showProjectInfoButton && jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx$2(Flex, { sx: { mx: '25px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: isMobile ? '16px' : '20px' }) }), jsx$2(Flex, { onClick: handleClose, children: jsx$2(Svg, { icon: "close", color: "text", width: isMobile ? '12px' : '18px' }) })] })) : (jsx$2(Flex, { sx: { py: '3px', mt: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: isMobile ? '16px' : '20px' }) })) })] }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { className: "title-container bondicon", children: [jsx$2(Flex, { sx: MCTokenIconStyles[bondData.marketingCampaign] }), jsx$2(TokenImage, { symbol: (_b = bondData.showcaseTokenName) !== null && _b !== void 0 ? _b : bondData.earnToken.symbol, size: 50, chain: bondData.chainId })] }), jsxs(Flex, { sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             pl: ['10px', '10px', '10px', '20px'],
@@ -78953,6 +78948,7 @@ const BondCards = ({ bondData }) => {
                         borderBottomRightRadius: 'normal',
                         borderBottomLeftRadius: 'normal',
                     },
+                    background: MCColorMapping.white3[bondData.marketingCampaign],
                 }, children: [jsxs(Flex, { className: "bond-card-title", children: [SDKConfig.namingPreference, jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(BonusComponent, { trueBondPrices: SDKConfig.namingPreference !== 'Discount' ? bondData.trueBondPrices : undefined, minTier: bondData.minTier, tooltipPosition: isMobile ? 'bottomRight' : 'bottomLeft', bonus: SDKConfig.namingPreference === 'Discount' ? `${(_a = bondData === null || bondData === void 0 ? void 0 : bondData.discountWithFee) === null || _a === void 0 ? void 0 : _a.toFixed(2)}%` : undefined })] }), jsxs("div", { className: "bond-card-block", sx: {
                     borderRadius: ['0px', '0px', '0px', 'normal'],
                     '&:first-of-type': {
@@ -78963,6 +78959,7 @@ const BondCards = ({ bondData }) => {
                         borderBottomRightRadius: 'normal',
                         borderBottomLeftRadius: 'normal',
                     },
+                    background: MCColorMapping.white3[bondData.marketingCampaign],
                 }, children: [jsxs("div", { className: "bond-card-title", children: ["Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs("div", { className: "bond-card-content", children: [getVestingTermsString(bondData), bondData.vestingCliff && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: getVestingTermsTooltipString(bondData) }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] })] }), jsxs("div", { className: "bond-card-block", sx: {
                     borderRadius: ['0px', '0px', '0px', 'normal'],
                     '&:first-of-type': {
@@ -78973,6 +78970,7 @@ const BondCards = ({ bondData }) => {
                         borderBottomRightRadius: 'normal',
                         borderBottomLeftRadius: 'normal',
                     },
+                    background: MCColorMapping.white3[bondData.marketingCampaign],
                 }, children: [jsxs("div", { className: "bond-card-title", children: ["Max Buy", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.MaxBuy((_b = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _b === void 0 ? void 0 : _b.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { className: "bond-card-content", sx: { alignItems: 'center' }, children: [jsx$2("div", { style: { paddingRight: '3px' }, children: jsx$2(TokenImage, { symbol: (_c = bondData.showcaseTokenName) !== null && _c !== void 0 ? _c : bondData.earnToken.symbol, size: 22, chain: bondData.chainId }) }), formatNumberSI(maxBuy(bondData, SDKConfig.showLowValueBonds).toFixed(0), 2)] })] }), jsxs("div", { className: "bond-card-block", sx: {
                     borderRadius: ['0px', '0px', '0px', 'normal'],
                     '&:first-of-type': {
@@ -78983,6 +78981,7 @@ const BondCards = ({ bondData }) => {
                         borderBottomRightRadius: 'normal',
                         borderBottomLeftRadius: 'normal',
                     },
+                    background: MCColorMapping.white3[bondData.marketingCampaign],
                 }, children: [jsxs(Flex, { className: "bond-card-title", children: ["Tokens Remaining", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bondData) }), style: {
                             width: '127px',
                             height: '25px',
@@ -79655,7 +79654,7 @@ const BuyComponent = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
         }
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [rateChanged]);
-    return bondData ? (jsx$2(Flex, { className: "modal-content", sx: Object.assign({}, buyComponentStyles[bondData === null || bondData === void 0 ? void 0 : bondData.marketingCampaign]), children: jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), jsx$2(ProjectDescription, { description: bondData.shortDescription, isProjectView: true }), jsx$2(Flex, { sx: { width: '100%', display: isProjectView ? ['flex', 'flex', 'flex', 'none'] : 'flex' }, children: jsx$2(BondCards, { bondData: bondData }) }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: bondData, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { 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, bondChainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: zapEnabled, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice, inputDisabled: isUserRestricted }), SDKConfig.useTiers && jsx$2(GetUpToComponent, { bond: bondData, depositAmount: depositAmount }), (bondData === null || bondData === void 0 ? void 0 : bondData.warningCard) && (jsx$2(Flex, { sx: {
+    return bondData ? (jsx$2(Flex, { className: "modal-content", sx: Object.assign({}, MCBuyComponentStyles[bondData === null || bondData === void 0 ? void 0 : bondData.marketingCampaign]), children: jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), jsx$2(ProjectDescription, { description: bondData.shortDescription, isProjectView: true }), jsx$2(Flex, { sx: { width: '100%', display: isProjectView ? ['flex', 'flex', 'flex', 'none'] : 'flex' }, children: jsx$2(BondCards, { bondData: bondData }) }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: bondData, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { 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, bondChainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: zapEnabled, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice, inputDisabled: isUserRestricted, marketingCampaign: bondData === null || bondData === void 0 ? void 0 : bondData.marketingCampaign }), SDKConfig.useTiers && jsx$2(GetUpToComponent, { bond: bondData, depositAmount: depositAmount }), (bondData === null || bondData === void 0 ? void 0 : bondData.warningCard) && (jsx$2(Flex, { sx: {
                         width: '100%',
                         background: '#DE62F366',
                         // justifyContent: 'center',
@@ -81113,7 +81112,7 @@ const BuyComponentSolana = ({ onDismiss, bondAddress, bondChain, isProjectView,
         }
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [inputCurrencyBalance, zapListFetched]);
-    return bondData ? (jsx$2(Flex, { className: "modal-content", sx: Object.assign({}, buyComponentStyles[bondData === null || bondData === void 0 ? void 0 : bondData.marketingCampaign]), children: jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss }), jsx$2(ProjectDescription, { description: bondData.shortDescription, isProjectView: true }), jsx$2(Flex, { sx: { width: '100%', display: isProjectView ? ['flex', 'flex', 'flex', 'none'] : 'flex' }, children: jsx$2(BondCards, { bondData: bondData }) }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: bondData, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { 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, bondChainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : undefined, selectedTokenPrice: inputTokenPrice }), (bondData === null || bondData === void 0 ? void 0 : bondData.warningCard) && (jsx$2(Flex, { sx: {
+    return bondData ? (jsx$2(Flex, { className: "modal-content", sx: Object.assign({}, MCBuyComponentStyles[bondData === null || bondData === void 0 ? void 0 : bondData.marketingCampaign]), children: jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss }), jsx$2(ProjectDescription, { description: bondData.shortDescription, isProjectView: true }), jsx$2(Flex, { sx: { width: '100%', display: isProjectView ? ['flex', 'flex', 'flex', 'none'] : 'flex' }, children: jsx$2(BondCards, { bondData: bondData }) }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: bondData, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { 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, bondChainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : undefined, selectedTokenPrice: inputTokenPrice }), (bondData === null || bondData === void 0 ? void 0 : bondData.warningCard) && (jsx$2(Flex, { sx: {
                         width: '100%',
                         background: '#DE62F366',
                         justifyContent: 'center',
@@ -81742,7 +81741,7 @@ const BondRow = ({ bondAddress, bondChain, marketingCampaign, payoutToken, billT
         });
     };
     return (jsxs("div", { className: "bond-row" // Insert special campaign styles here
-        , onClick: handleOpenModal, sx: Object.assign(Object.assign({ borderRadius: 'normal' }, bondRowCampaignStyles['Christmas2025']), { cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default' }), children: [jsx$2("div", { className: "token-info-container", sx: { width: ['40%', '40%', '40%', '30%'] }, children: jsx$2(TokenInfoAndName, { tokenSymbol: payoutToken === null || payoutToken === void 0 ? void 0 : payoutToken.symbol, chain: bondChain, tag: tag, marketingCampaign: marketingCampaign }) }), SDKConfig.useCardsView && shortDescription && (jsx$2("div", { className: "short-description", children: jsx$2(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: "bond-info-columns", sx: { width: ['60%', '60%', '60%', '70%'] }, children: [!SDKConfig.useCardsView && jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsx$2(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip }), jsxs("div", { className: "terms-column", children: [vestingTermString, vestingCliffString && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }), jsx$2("div", { className: "tokens-remaining-column", children: bondSoldOut ? ('-') : (jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: percentageAvailable }), style: {
+        , onClick: handleOpenModal, sx: Object.assign(Object.assign({ borderRadius: 'normal' }, MCBondRowStyles[marketingCampaign]), { cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default' }), children: [jsx$2("div", { className: "token-info-container", sx: { width: ['40%', '40%', '40%', '30%'] }, children: jsx$2(TokenInfoAndName, { tokenSymbol: payoutToken === null || payoutToken === void 0 ? void 0 : payoutToken.symbol, chain: bondChain, tag: tag, marketingCampaign: marketingCampaign }) }), SDKConfig.useCardsView && shortDescription && (jsx$2("div", { className: "short-description", children: jsx$2(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: "bond-info-columns", sx: { width: ['60%', '60%', '60%', '70%'] }, children: [!SDKConfig.useCardsView && jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsx$2(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip }), jsxs("div", { className: "terms-column", children: [vestingTermString, vestingCliffString && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }), jsx$2("div", { className: "tokens-remaining-column", children: bondSoldOut ? ('-') : (jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: percentageAvailable }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
@@ -87634,7 +87633,7 @@ const SelectItem = (_a) => {
 };
 
 const ListTag = ({ text = '', marketingCampaign }) => {
-    return (jsxs(Flex, { sx: { position: 'relative' }, children: [jsx$2(Flex, { sx: Object.assign({ display: 'none' }, tagIconCampaignStyles[marketingCampaign]) }), jsx$2(Flex, { sx: Object.assign(Object.assign({ background: '#3C6AB530', color: '#3b78d3', fontSize: '10px', fontWeight: 600, lineHeight: '15px', p: '2px 6px', borderRadius: '5px', width: 'fit-content' }, tagCampaignStyles[marketingCampaign]), { zIndex: 2 }), children: text.toUpperCase() })] }));
+    return (jsx$2(Flex, { sx: { position: 'relative' }, children: jsx$2(Flex, { sx: Object.assign({ background: '#3C6AB530', color: '#3b78d3', fontSize: '10px', fontWeight: 600, lineHeight: '15px', p: '2px 6px', borderRadius: '5px', width: 'fit-content', zIndex: 2 }, MCTagStyles[marketingCampaign]), children: text.toUpperCase() }) }));
 };
 
 const Context = createContext$1({

package/dist/styles.css

@@ -73,18 +73,20 @@
 }
 .bonds-cards .bond-card-block {
   display: flex;
-  padding: 8px 12px;
+  padding: 6px 12px;
   background: var(--theme-ui-colors-white3);
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1px;
+  border-bottom: 1px solid var(--theme-ui-colors-white2);
+  max-height: 32px;
 }
 @media screen and (min-width: 800px) {
   .bonds-cards .bond-card-block {
     width: 350px;
     flex-direction: column;
     padding: 12px;
+    max-height: none;
   }
 }
 .bonds-cards .bond-card-block .bond-card-title {
@@ -379,12 +381,11 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  opacity: 0.8;
   padding-left: 6px;
 }
 
 .balancerow.text {
-  opacity: 0.8;
+  opacity: 0.6;
   align-items: center;
   font-size: 12px;
 }

package/dist/utils/campaignStyles.d.ts

@@ -1,8 +1,15 @@
 import { ThemeUIStyleObject } from 'theme-ui';
 import { MarketingCampaign } from '@ape.swap/apeswap-lists';
-export declare const bondRowCampaignStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
-export declare const tagCampaignStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
-export declare const tagIconCampaignStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
-export declare const buyComponentStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
-export declare const tokenImageIconStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
-export declare const tagNameMapping: Partial<Record<MarketingCampaign, string>>;
+export declare const MCTagStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
+export declare const MCBuyComponentStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
+export declare const MCBondRowStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
+export declare const MCColorMapping: {
+    white3: {
+        Christmas2025: string;
+    };
+    white4: {
+        Christmas2025: string;
+    };
+};
+export declare const MCTokenIconStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
+export declare const MCTagNameMapping: Partial<Record<MarketingCampaign, string>>;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "4.5.0-test.12",
+  "version": "4.5.0-test.13",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",