@ape.swap/bonds-sdk 6.2.12 → 6.2.13

package/dist/utils/campaignStyles.d.ts

@@ -1,8 +1,8 @@
-import { ThemeUIStyleObject } from 'theme-ui';
+import React from 'react';
 import { MarketingCampaign } from '@ape.swap/apeswap-lists';
-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 MCTagStyles: Partial<Record<MarketingCampaign, React.CSSProperties>>;
+export declare const MCBuyComponentStyles: Partial<Record<MarketingCampaign, React.CSSProperties>>;
+export declare const MCBondRowStyles: Partial<Record<MarketingCampaign, React.CSSProperties>>;
 export declare const MCColorMapping: {
     white3: {
         Christmas2025: string;
@@ -11,5 +11,5 @@ export declare const MCColorMapping: {
         Christmas2025: string;
     };
 };
-export declare const MCTokenIconStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>>;
+export declare const MCTokenIconStyles: Partial<Record<MarketingCampaign, React.CSSProperties>>;
 export declare const MCTagNameMapping: Partial<Record<MarketingCampaign, string>>;

package/dist/utils/campaignStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"campaignStyles.js","sources":["../../src/utils/campaignStyles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\nimport { MarketingCampaign } from '@ape.swap/apeswap-lists'\n\n// Styles of the tag component.\nexport const MCTagStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>> = {\n  [MarketingCampaign.Christmas2025]: {\n    background: '#DF4141',\n    color: '#fff',\n  },\n}\n\n// Styles of the buy bond modal.\nexport const MCBuyComponentStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>> = {\n  [MarketingCampaign.Christmas2025]: {\n    backgroundImage: 'url(https://ape.bond/images/mc/christmas-buy.png)',\n    backgroundSize: 'cover',\n    opacity: 1,\n  },\n}\n\nexport const MCBondRowStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>> = {\n  [MarketingCampaign.Christmas2025]: {\n    backgroundImage: 'url(https://ape.bond/images/mc/christmas-row.png)',\n    backgroundSize: 'cover',\n    opacity: 1,\n  },\n}\n\nexport const MCColorMapping = {\n  white3: {\n    [MarketingCampaign.Christmas2025]: '#348C9E33 !important',\n  },\n  white4: {\n    [MarketingCampaign.Christmas2025]: '#348C9E33 !important',\n  },\n}\n\n// Styles of the token image displayed in the buy bond modal.\nexport const MCTokenIconStyles: Partial<Record<MarketingCampaign, ThemeUIStyleObject>> = {\n  [MarketingCampaign.Christmas2025]: {\n    position: 'absolute',\n    top: '-25px',\n    left: '18%',\n    width: '100%',\n    height: '50px',\n    zIndex: 10,\n    backgroundImage: 'url(https://ape.bond/images/mc/christmas-hat.png)',\n    backgroundRepeat: 'no-repeat',\n    backgroundSize: 'contain',\n    backgroundPosition: 'center',\n  },\n}\n\nexport const MCTagNameMapping: Partial<Record<MarketingCampaign, string>> = {\n  [MarketingCampaign.Christmas2025]: 'Christmas Sale',\n}\n"],"names":[],"mappings":";;AAGA;AACO,MAAM,WAAW,GAA2D;AACjF,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG;AACjC,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;;AAGH;AACO,MAAM,oBAAoB,GAA2D;AAC1F,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG;AACjC,QAAA,eAAe,EAAE,mDAAmD;AACpE,QAAA,cAAc,EAAE,OAAO;AACvB,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;;AAGI,MAAM,eAAe,GAA2D;AACrF,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG;AACjC,QAAA,eAAe,EAAE,mDAAmD;AACpE,QAAA,cAAc,EAAE,OAAO;AACvB,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;;AAGI,MAAM,cAAc,GAAG;AAC5B,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG,sBAAsB;AAC1D,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG,sBAAsB;AAC1D,KAAA;;AAGH;AACO,MAAM,iBAAiB,GAA2D;AACvF,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG;AACjC,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,eAAe,EAAE,mDAAmD;AACpE,QAAA,gBAAgB,EAAE,WAAW;AAC7B,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,kBAAkB,EAAE,QAAQ;AAC7B,KAAA;;AAGI,MAAM,gBAAgB,GAA+C;AAC1E,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG,gBAAgB;;;;;"}
+{"version":3,"file":"campaignStyles.js","sources":["../../src/utils/campaignStyles.ts"],"sourcesContent":["import React from 'react'\nimport { MarketingCampaign } from '@ape.swap/apeswap-lists'\n\n// Styles of the tag component.\nexport const MCTagStyles: Partial<Record<MarketingCampaign, React.CSSProperties>> = {\n  [MarketingCampaign.Christmas2025]: {\n    background: '#DF4141',\n    color: '#fff',\n  },\n}\n\n// Styles of the buy bond modal.\nexport const MCBuyComponentStyles: Partial<Record<MarketingCampaign, React.CSSProperties>> = {\n  [MarketingCampaign.Christmas2025]: {\n    backgroundImage: 'url(https://ape.bond/images/mc/christmas-buy.png)',\n    backgroundSize: 'cover',\n    opacity: 1,\n  },\n}\n\nexport const MCBondRowStyles: Partial<Record<MarketingCampaign, React.CSSProperties>> = {\n  [MarketingCampaign.Christmas2025]: {\n    backgroundImage: 'url(https://ape.bond/images/mc/christmas-row.png)',\n    backgroundSize: 'cover',\n    opacity: 1,\n  },\n}\n\nexport const MCColorMapping = {\n  white3: {\n    [MarketingCampaign.Christmas2025]: '#348C9E33 !important',\n  },\n  white4: {\n    [MarketingCampaign.Christmas2025]: '#348C9E33 !important',\n  },\n}\n\n// Styles of the token image displayed in the buy bond modal.\nexport const MCTokenIconStyles: Partial<Record<MarketingCampaign, React.CSSProperties>> = {\n  [MarketingCampaign.Christmas2025]: {\n    position: 'absolute',\n    top: '-25px',\n    left: '18%',\n    width: '100%',\n    height: '50px',\n    zIndex: 10,\n    backgroundImage: 'url(https://ape.bond/images/mc/christmas-hat.png)',\n    backgroundRepeat: 'no-repeat',\n    backgroundSize: 'contain',\n    backgroundPosition: 'center',\n  },\n}\n\nexport const MCTagNameMapping: Partial<Record<MarketingCampaign, string>> = {\n  [MarketingCampaign.Christmas2025]: 'Christmas Sale',\n}\n"],"names":[],"mappings":";;AAGA;AACO,MAAM,WAAW,GAA4D;AAClF,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG;AACjC,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;;AAGH;AACO,MAAM,oBAAoB,GAA4D;AAC3F,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG;AACjC,QAAA,eAAe,EAAE,mDAAmD;AACpE,QAAA,cAAc,EAAE,OAAO;AACvB,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;;AAGI,MAAM,eAAe,GAA4D;AACtF,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG;AACjC,QAAA,eAAe,EAAE,mDAAmD;AACpE,QAAA,cAAc,EAAE,OAAO;AACvB,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;;AAGI,MAAM,cAAc,GAAG;AAC5B,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG,sBAAsB;AAC1D,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG,sBAAsB;AAC1D,KAAA;;AAGH;AACO,MAAM,iBAAiB,GAA4D;AACxF,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG;AACjC,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,OAAO;AACZ,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,eAAe,EAAE,mDAAmD;AACpE,QAAA,gBAAgB,EAAE,WAAW;AAC7B,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,kBAAkB,EAAE,QAAQ;AAC7B,KAAA;;AAGI,MAAM,gBAAgB,GAA+C;AAC1E,IAAA,CAAC,iBAAiB,CAAC,aAAa,GAAG,gBAAgB;;;;;"}

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

@@ -1,9 +1,8 @@
-import React from 'react';
 type SortableKeys = 'bonus' | 'arr' | 'terms' | 'tokensRemaining';
 type SortDirection = 'asc' | 'desc';
 export interface SortOptions {
     key: SortableKeys;
     direction: SortDirection;
 }
-declare const Bonds: () => React.JSX.Element;
+declare const Bonds: () => import("react/jsx-runtime").JSX.Element;
 export default Bonds;

package/dist/views/Bonds/Bonds.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useTopTags } from '../../hooks/useTopTags.js';
 import { sortBonds, isBondSupported, isBondSoldOut } from './utils.js';
@@ -158,16 +158,7 @@ const Bonds = () => {
             tryScroll();
         }
     }, [bondData?.length]);
-    return (jsxs(Flex, { className: "bonds-container", children: [jsx(CheckUrl, {}), jsx(BondsMenu, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption ?? ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onSort: handleSortOptions }), SDKConfig.useHotBonds && !SDKConfig.bondPartner && filterOption !== 'SOLD OUT' && jsx(BuyAgainRow, {}), Object.keys(billsToRender)?.length > 0 ? (jsx(Flex, { className: "bondrowsbychain", children: validatedChains?.map((chain) => filterOption === 'SOLD OUT' ? (Object.entries(billsToRender[chain] ?? {}).map((groupedBonds) => (jsx(SoldOutRows, { bonds: groupedBonds[1] }, groupedBonds[0])))) : (jsx(ActiveBondRows, { chain: chain, bonds: (billsToRender[chain] ?? []), hideTitles: searchQuery !== '', showHotBonds: !searchQuery && SDKConfig.useHotBonds && SDKConfig?.hotBondChains?.includes(chain) }, chain))) })) : searchQuery || !chainFilterOption.includes('All Chains') ? (jsx(Flex, { className: "placeholder-monkey-wrapper", children: jsx(PlaceholderMonkey, { text: 'No results, change filters.' }) })) : filterOption === 'FAVORITES' ? (jsxs(Flex, { sx: {
-                    width: '100%',
-                    height: '300px',
-                    background: 'white2',
-                    borderRadius: 'normal',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    flexDirection: 'column',
-                    mt: '10px',
-                }, children: [jsx(StarFilled, { width: 75, height: 75 }), jsx(Flex, { sx: { mt: '10px' }, children: `You don't have any Favorite Bonds yet!` }), jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400, color: 'textDisabledButton', mt: '10px' }, children: `Click on the 'star' or 'fire' icon to add Bonds to the list.` })] })) : (jsx(LoadingSkeleton, {})), SDKConfig.useHotBonds && jsx(RecommendationCards, {}), jsx(Flex, { sx: { width: '100%', justifyContent: 'center', my: '15px' }, className: "powered-by-apebond", children: jsx("img", { src: "https://res.cloudinary.com/dswmrqgwy/image/upload/v1741643990/poweredbyapebondsdk_cxiouj.png", alt: "powered-by-apebond", style: { width: '200px', height: 'auto' } }) })] }));
+    return (jsxs(Flex, { className: "bonds-container ape:w-full ape:flex ape:flex-col ape:px-[10px]", children: [jsx(CheckUrl, {}), jsx(BondsMenu, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption ?? ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onSort: handleSortOptions }), SDKConfig.useHotBonds && !SDKConfig.bondPartner && filterOption !== 'SOLD OUT' && jsx(BuyAgainRow, {}), Object.keys(billsToRender)?.length > 0 ? (jsx(Flex, { className: "bondrowsbychain ape:w-full ape:flex-col ape:mt-[5px]", children: validatedChains?.map((chain) => filterOption === 'SOLD OUT' ? (Object.entries(billsToRender[chain] ?? {}).map((groupedBonds) => (jsx(SoldOutRows, { bonds: groupedBonds[1] }, groupedBonds[0])))) : (jsx(ActiveBondRows, { chain: chain, bonds: (billsToRender[chain] ?? []), hideTitles: searchQuery !== '', showHotBonds: !searchQuery && SDKConfig.useHotBonds && SDKConfig?.hotBondChains?.includes(chain) }, chain))) })) : searchQuery || !chainFilterOption.includes('All Chains') ? (jsx(Flex, { className: "placeholder-monkey-wrapper ape:w-full ape:flex-col ape:pt-[100px] ape:pb-[100px] ape:bg-white2 ape:items-center ape:rounded-[10px] ape:mt-[15px] ape:justify-center ape:h-[400px]", children: jsx(PlaceholderMonkey, { text: 'No results, change filters.' }) })) : filterOption === 'FAVORITES' ? (jsxs("div", { className: "ape:w-full ape:h-[300px] ape:bg-white2 ape:rounded-normal ape:flex ape:justify-center ape:items-center ape:flex-col ape:mt-[10px]", children: [jsx(StarFilled, { width: 75, height: 75 }), jsx("div", { className: "ape:mt-[10px]", children: `You don't have any Favorite Bonds yet!` }), jsx("div", { className: "ape:text-[12px] ape:font-normal ape:text-text-disabled-button ape:mt-[10px]", children: `Click on the 'star' or 'fire' icon to add Bonds to the list.` })] })) : (jsx(LoadingSkeleton, {})), SDKConfig.useHotBonds && jsx(RecommendationCards, {}), jsx("div", { className: "powered-by-apebond ape:w-full ape:flex ape:justify-center ape:my-[15px]", children: jsx("img", { src: "https://res.cloudinary.com/dswmrqgwy/image/upload/v1741643990/poweredbyapebondsdk_cxiouj.png", alt: "powered-by-apebond", style: { width: '200px', height: 'auto' } }) })] }));
 };
 
 export { Bonds as default };

package/dist/views/Bonds/Bonds.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bonds.js","sources":["../../../src/views/Bonds/Bonds.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { BondsData } from '../../types/bonds'\nimport { useTopTags } from '../../hooks/useTopTags'\nimport { isBondSoldOut, isBondSupported, sortBonds } from './utils'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport CheckURL from './components/CheckURL'\nimport PlaceholderMonkey from '../../components/PlaceholderMonkey'\nimport useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens'\nimport useChainFilterOption from '../../state/chainFilterOption/useChainFilterOption'\nimport useBondsList from '../../state/bonds/useBondsList'\nimport { BaseBondConfig } from '@ape.swap/apeswap-lists'\nimport RecommendationCards from './components/RecommendationCards'\nimport BondsMenu from './components/BondsMenu/BondsMenu'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport BuyAgainRow from './components/BuyAgainRow'\nimport LoadingSkeleton from './components/LoadingSkeleton/LoadingSkeleton'\nimport useHotBonds from '../../state/hotBonds/useHotBonds'\nimport useBondsListPreTGE from '../../state/bonds/useBondsListPreTGE'\nimport { MAINNET_CHAINS } from '../../config/constants/chains'\nimport ActiveBondRows from './components/BondRows/ActiveBondRows'\nimport SoldOutRows from './components/BondRows/SoldOutRows'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport StarFilled from '../../components/uikit-sdk/Svg/Icons/StarFilled'\n\ntype SortableKeys = 'bonus' | 'arr' | 'terms' | 'tokensRemaining'\ntype SortDirection = 'asc' | 'desc'\n\nexport interface SortOptions {\n  key: SortableKeys\n  direction: SortDirection\n}\n\ntype GroupedByChain = Record<number, (BondsData | BaseBondConfig)[]>\ntype GroupedBySymbol = Record<number, Record<string, (BondsData | BaseBondConfig)[]>>\n\nconst Bonds = () => {\n  // Fetch data\n  useHotBonds()\n  const SDKConfig = useSDKConfig()\n  const { favTokens } = useFavoriteTokens()\n  const { data: bondData } = useBondsData()\n  const { data: allBonds } = useBondsList()\n  const { data: allPreBonds } = useBondsListPreTGE()\n  const { data: chainFilterOption, setChainFilterOption } = useChainFilterOption()\n  const topTags = useTopTags()\n\n  // State\n  const [sortConfig, setSortConfig] = useState<SortOptions | undefined>({ key: 'bonus', direction: 'desc' })\n  const [searchQuery, setSearchQuery] = useState('')\n  const [filterOption, setFilterOption] = useState('ALL')\n\n  // Static data\n  const filterOptions = ['ALL', 'FAVORITES', ...topTags, 'SOLD OUT']\n  const validatedChains = SDKConfig?.chains?.filter((chain) => MAINNET_CHAINS.includes(chain))\n\n  const billsToRender: GroupedByChain | GroupedBySymbol = useMemo(() => {\n    let bondsToUse\n\n    if (filterOption === 'SOLD OUT') {\n      if (!allBonds || !allPreBonds) return {}\n      bondsToUse = [...allPreBonds, ...Object.values(allBonds).flat()]\n    } else {\n      bondsToUse = sortBonds(sortConfig, bondData)\n    }\n\n    const filteredBonds = bondsToUse?.filter((bill) => {\n      // filter incompatible bonds\n      if (!isBondSupported(SDKConfig.highestCompatibleVersion!, bill.version)) return false\n\n      // filter onlyPartner Bonds\n      if (bill.onlyPartner && SDKConfig.bondPartner !== bill.bondPartner) return false\n\n      // filter searchQuery\n      if (searchQuery) {\n        const matchesSearch = [\n          //@ts-ignore\n          `${bill?.underlyingEarnToken?.symbol?.toUpperCase()}`,\n          `${bill?.earnToken?.symbol.toUpperCase()}`,\n          `${bill?.lpToken?.symbol.toUpperCase()}`,\n        ].some((property) => property?.includes(searchQuery.toUpperCase()))\n        if (!matchesSearch) return false\n      }\n\n      // filter tiers\n      if (!SDKConfig?.useTiers && 'minTier' in bill) {\n        if (bill.minTier !== null && bill.minTier !== undefined) return false\n      }\n\n      // filter bondPartner\n      if (SDKConfig?.bondPartner && bill.bondPartner !== SDKConfig.bondPartner) return false\n\n      // filter topTags\n      if (topTags.includes(filterOption) && !bill?.tags?.includes(filterOption)) return false\n\n      // filter chainFilterOption\n      if (chainFilterOption && !chainFilterOption?.includes('All Chains')) {\n        if (!chainFilterOption?.includes(bill?.chainId?.toString())) return false\n      }\n\n      // filter SOLD OUT\n      if (filterOption === 'SOLD OUT' && !isBondSoldOut(bill as BondsData, SDKConfig.showLowValueBonds)) return false\n\n      // filter not SOLD OUT\n      if (filterOption !== 'SOLD OUT' && isBondSoldOut(bill as BondsData, SDKConfig.showLowValueBonds)) return false\n\n      // filter FAVORITES\n      if (filterOption === 'FAVORITES' && !favTokens.includes(bill?.earnToken?.symbol?.toLowerCase())) return false\n\n      return true\n    })\n\n    if (filterOption === 'SOLD OUT') {\n      return filteredBonds?.reduce<GroupedBySymbol>((acc, bond) => {\n        const symbol = bond?.earnToken?.symbol\n        const chainId = bond.chainId\n\n        if (!acc[chainId]) acc[chainId] = {}\n\n        if (!acc[chainId][symbol]) acc[chainId][symbol] = []\n\n        acc[chainId][symbol].push(bond)\n        return acc\n      }, {})\n    } else {\n      return filteredBonds?.reduce<GroupedByChain>((acc, bond) => {\n        const { chainId } = bond\n        if (!acc[chainId]) acc[chainId] = []\n        acc[chainId].push(bond)\n        return acc\n      }, {})\n    }\n  }, [\n    allBonds,\n    allPreBonds,\n    sortConfig,\n    bondData,\n    filterOption,\n    SDKConfig.highestCompatibleVersion,\n    SDKConfig.bondPartner,\n    SDKConfig?.useTiers,\n    SDKConfig.showLowValueBonds,\n    searchQuery,\n    topTags,\n    chainFilterOption,\n    favTokens,\n  ])\n\n  // Handlers\n  const handleSortOptions = useCallback(\n    (key: SortableKeys) => {\n      let direction: SortDirection = 'desc'\n      if (sortConfig?.key === key && sortConfig?.direction === 'desc') {\n        direction = 'asc'\n      }\n      setSortConfig({ key, direction })\n    },\n    [sortConfig?.key, sortConfig?.direction],\n  )\n\n  const handleChangeFilterOption = useCallback((newOption: string) => {\n    setFilterOption(newOption)\n  }, [])\n\n  useEffect(() => {\n    const hash = window.location.hash\n    //@ts-ignore\n    if (bondData?.length > 0 && hash) {\n      const tryScroll = () => {\n        const normalizedHash = decodeURIComponent(hash).replace(/\\s+/g, '')\n        const element = document.querySelector(normalizedHash)\n        if (element) {\n          const y = element.getBoundingClientRect().top + window.scrollY - 70\n          window.scrollTo({ top: y, behavior: 'smooth' })\n        } else {\n          setTimeout(tryScroll, 50)\n        }\n      }\n      tryScroll()\n    }\n  }, [bondData?.length])\n\n  return (\n    <Flex className=\"bonds-container\">\n      <CheckURL />\n      <BondsMenu\n        searchQuery={searchQuery}\n        setSearchQuery={setSearchQuery}\n        setChainFilterOption={setChainFilterOption}\n        chainFilterOption={chainFilterOption ?? ['All Chains']}\n        filterOptions={filterOptions}\n        filterOption={filterOption}\n        setFilterOption={handleChangeFilterOption}\n        onSort={handleSortOptions}\n      />\n      {SDKConfig.useHotBonds && !SDKConfig.bondPartner && filterOption !== 'SOLD OUT' && <BuyAgainRow />}\n      {Object.keys(billsToRender)?.length > 0 ? (\n        <Flex className=\"bondrowsbychain\">\n          {validatedChains?.map((chain) =>\n            filterOption === 'SOLD OUT' ? (\n              Object.entries(billsToRender[chain] ?? {}).map((groupedBonds) => (\n                <SoldOutRows bonds={groupedBonds[1]} key={groupedBonds[0]} />\n              ))\n            ) : (\n              <ActiveBondRows\n                chain={chain}\n                bonds={(billsToRender[chain] ?? []) as (BondsData | BaseBondConfig)[]}\n                key={chain}\n                hideTitles={searchQuery !== ''}\n                showHotBonds={!searchQuery && SDKConfig.useHotBonds && SDKConfig?.hotBondChains?.includes(chain)}\n              />\n            ),\n          )}\n        </Flex>\n      ) : searchQuery || !chainFilterOption.includes('All Chains') ? (\n        <Flex className=\"placeholder-monkey-wrapper\">\n          <PlaceholderMonkey text={'No results, change filters.'} />\n        </Flex>\n      ) : filterOption === 'FAVORITES' ? (\n        <Flex\n          sx={{\n            width: '100%',\n            height: '300px',\n            background: 'white2',\n            borderRadius: 'normal',\n            justifyContent: 'center',\n            alignItems: 'center',\n            flexDirection: 'column',\n            mt: '10px',\n          }}\n        >\n          <StarFilled width={75} height={75} />\n          <Flex sx={{ mt: '10px' }}>{`You don't have any Favorite Bonds yet!`}</Flex>\n          <Flex sx={{ fontSize: '12px', fontWeight: 400, color: 'textDisabledButton', mt: '10px' }}>\n            {`Click on the 'star' or 'fire' icon to add Bonds to the list.`}\n          </Flex>\n        </Flex>\n      ) : (\n        <LoadingSkeleton />\n      )}\n      {SDKConfig.useHotBonds && <RecommendationCards />}\n      <Flex sx={{ width: '100%', justifyContent: 'center', my: '15px' }} className=\"powered-by-apebond\">\n        <img\n          src=\"https://res.cloudinary.com/dswmrqgwy/image/upload/v1741643990/poweredbyapebondsdk_cxiouj.png\"\n          alt=\"powered-by-apebond\"\n          style={{ width: '200px', height: 'auto' }}\n        />\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default Bonds\n"],"names":["_jsxs","_jsx","CheckURL"],"mappings":"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"}
+{"version":3,"file":"Bonds.js","sources":["../../../src/views/Bonds/Bonds.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { BondsData } from '../../types/bonds'\nimport { useTopTags } from '../../hooks/useTopTags'\nimport { isBondSoldOut, isBondSupported, sortBonds } from './utils'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport CheckURL from './components/CheckURL'\nimport PlaceholderMonkey from '../../components/PlaceholderMonkey'\nimport useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens'\nimport useChainFilterOption from '../../state/chainFilterOption/useChainFilterOption'\nimport useBondsList from '../../state/bonds/useBondsList'\nimport { BaseBondConfig } from '@ape.swap/apeswap-lists'\nimport RecommendationCards from './components/RecommendationCards'\nimport BondsMenu from './components/BondsMenu/BondsMenu'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport BuyAgainRow from './components/BuyAgainRow'\nimport LoadingSkeleton from './components/LoadingSkeleton/LoadingSkeleton'\nimport useHotBonds from '../../state/hotBonds/useHotBonds'\nimport useBondsListPreTGE from '../../state/bonds/useBondsListPreTGE'\nimport { MAINNET_CHAINS } from '../../config/constants/chains'\nimport ActiveBondRows from './components/BondRows/ActiveBondRows'\nimport SoldOutRows from './components/BondRows/SoldOutRows'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport StarFilled from '../../components/uikit-sdk/Svg/Icons/StarFilled'\n\ntype SortableKeys = 'bonus' | 'arr' | 'terms' | 'tokensRemaining'\ntype SortDirection = 'asc' | 'desc'\n\nexport interface SortOptions {\n  key: SortableKeys\n  direction: SortDirection\n}\n\ntype GroupedByChain = Record<number, (BondsData | BaseBondConfig)[]>\ntype GroupedBySymbol = Record<number, Record<string, (BondsData | BaseBondConfig)[]>>\n\nconst Bonds = () => {\n  // Fetch data\n  useHotBonds()\n  const SDKConfig = useSDKConfig()\n  const { favTokens } = useFavoriteTokens()\n  const { data: bondData } = useBondsData()\n  const { data: allBonds } = useBondsList()\n  const { data: allPreBonds } = useBondsListPreTGE()\n  const { data: chainFilterOption, setChainFilterOption } = useChainFilterOption()\n  const topTags = useTopTags()\n\n  // State\n  const [sortConfig, setSortConfig] = useState<SortOptions | undefined>({ key: 'bonus', direction: 'desc' })\n  const [searchQuery, setSearchQuery] = useState('')\n  const [filterOption, setFilterOption] = useState('ALL')\n\n  // Static data\n  const filterOptions = ['ALL', 'FAVORITES', ...topTags, 'SOLD OUT']\n  const validatedChains = SDKConfig?.chains?.filter((chain) => MAINNET_CHAINS.includes(chain))\n\n  const billsToRender: GroupedByChain | GroupedBySymbol = useMemo(() => {\n    let bondsToUse\n\n    if (filterOption === 'SOLD OUT') {\n      if (!allBonds || !allPreBonds) return {}\n      bondsToUse = [...allPreBonds, ...Object.values(allBonds).flat()]\n    } else {\n      bondsToUse = sortBonds(sortConfig, bondData)\n    }\n\n    const filteredBonds = bondsToUse?.filter((bill) => {\n      // filter incompatible bonds\n      if (!isBondSupported(SDKConfig.highestCompatibleVersion!, bill.version)) return false\n\n      // filter onlyPartner Bonds\n      if (bill.onlyPartner && SDKConfig.bondPartner !== bill.bondPartner) return false\n\n      // filter searchQuery\n      if (searchQuery) {\n        const matchesSearch = [\n          //@ts-ignore\n          `${bill?.underlyingEarnToken?.symbol?.toUpperCase()}`,\n          `${bill?.earnToken?.symbol.toUpperCase()}`,\n          `${bill?.lpToken?.symbol.toUpperCase()}`,\n        ].some((property) => property?.includes(searchQuery.toUpperCase()))\n        if (!matchesSearch) return false\n      }\n\n      // filter tiers\n      if (!SDKConfig?.useTiers && 'minTier' in bill) {\n        if (bill.minTier !== null && bill.minTier !== undefined) return false\n      }\n\n      // filter bondPartner\n      if (SDKConfig?.bondPartner && bill.bondPartner !== SDKConfig.bondPartner) return false\n\n      // filter topTags\n      if (topTags.includes(filterOption) && !bill?.tags?.includes(filterOption)) return false\n\n      // filter chainFilterOption\n      if (chainFilterOption && !chainFilterOption?.includes('All Chains')) {\n        if (!chainFilterOption?.includes(bill?.chainId?.toString())) return false\n      }\n\n      // filter SOLD OUT\n      if (filterOption === 'SOLD OUT' && !isBondSoldOut(bill as BondsData, SDKConfig.showLowValueBonds)) return false\n\n      // filter not SOLD OUT\n      if (filterOption !== 'SOLD OUT' && isBondSoldOut(bill as BondsData, SDKConfig.showLowValueBonds)) return false\n\n      // filter FAVORITES\n      if (filterOption === 'FAVORITES' && !favTokens.includes(bill?.earnToken?.symbol?.toLowerCase())) return false\n\n      return true\n    })\n\n    if (filterOption === 'SOLD OUT') {\n      return filteredBonds?.reduce<GroupedBySymbol>((acc, bond) => {\n        const symbol = bond?.earnToken?.symbol\n        const chainId = bond.chainId\n\n        if (!acc[chainId]) acc[chainId] = {}\n\n        if (!acc[chainId][symbol]) acc[chainId][symbol] = []\n\n        acc[chainId][symbol].push(bond)\n        return acc\n      }, {})\n    } else {\n      return filteredBonds?.reduce<GroupedByChain>((acc, bond) => {\n        const { chainId } = bond\n        if (!acc[chainId]) acc[chainId] = []\n        acc[chainId].push(bond)\n        return acc\n      }, {})\n    }\n  }, [\n    allBonds,\n    allPreBonds,\n    sortConfig,\n    bondData,\n    filterOption,\n    SDKConfig.highestCompatibleVersion,\n    SDKConfig.bondPartner,\n    SDKConfig?.useTiers,\n    SDKConfig.showLowValueBonds,\n    searchQuery,\n    topTags,\n    chainFilterOption,\n    favTokens,\n  ])\n\n  // Handlers\n  const handleSortOptions = useCallback(\n    (key: SortableKeys) => {\n      let direction: SortDirection = 'desc'\n      if (sortConfig?.key === key && sortConfig?.direction === 'desc') {\n        direction = 'asc'\n      }\n      setSortConfig({ key, direction })\n    },\n    [sortConfig?.key, sortConfig?.direction],\n  )\n\n  const handleChangeFilterOption = useCallback((newOption: string) => {\n    setFilterOption(newOption)\n  }, [])\n\n  useEffect(() => {\n    const hash = window.location.hash\n    //@ts-ignore\n    if (bondData?.length > 0 && hash) {\n      const tryScroll = () => {\n        const normalizedHash = decodeURIComponent(hash).replace(/\\s+/g, '')\n        const element = document.querySelector(normalizedHash)\n        if (element) {\n          const y = element.getBoundingClientRect().top + window.scrollY - 70\n          window.scrollTo({ top: y, behavior: 'smooth' })\n        } else {\n          setTimeout(tryScroll, 50)\n        }\n      }\n      tryScroll()\n    }\n  }, [bondData?.length])\n\n  return (\n    <Flex className=\"bonds-container ape:w-full ape:flex ape:flex-col ape:px-[10px]\">\n      <CheckURL />\n      <BondsMenu\n        searchQuery={searchQuery}\n        setSearchQuery={setSearchQuery}\n        setChainFilterOption={setChainFilterOption}\n        chainFilterOption={chainFilterOption ?? ['All Chains']}\n        filterOptions={filterOptions}\n        filterOption={filterOption}\n        setFilterOption={handleChangeFilterOption}\n        onSort={handleSortOptions}\n      />\n      {SDKConfig.useHotBonds && !SDKConfig.bondPartner && filterOption !== 'SOLD OUT' && <BuyAgainRow />}\n      {Object.keys(billsToRender)?.length > 0 ? (\n        <Flex className=\"bondrowsbychain ape:w-full ape:flex-col ape:mt-[5px]\">\n          {validatedChains?.map((chain) =>\n            filterOption === 'SOLD OUT' ? (\n              Object.entries(billsToRender[chain] ?? {}).map((groupedBonds) => (\n                <SoldOutRows bonds={groupedBonds[1]} key={groupedBonds[0]} />\n              ))\n            ) : (\n              <ActiveBondRows\n                chain={chain}\n                bonds={(billsToRender[chain] ?? []) as (BondsData | BaseBondConfig)[]}\n                key={chain}\n                hideTitles={searchQuery !== ''}\n                showHotBonds={!searchQuery && SDKConfig.useHotBonds && SDKConfig?.hotBondChains?.includes(chain)}\n              />\n            ),\n          )}\n        </Flex>\n      ) : searchQuery || !chainFilterOption.includes('All Chains') ? (\n        <Flex className=\"placeholder-monkey-wrapper ape:w-full ape:flex-col ape:pt-[100px] ape:pb-[100px] ape:bg-white2 ape:items-center ape:rounded-[10px] ape:mt-[15px] ape:justify-center ape:h-[400px]\">\n          <PlaceholderMonkey text={'No results, change filters.'} />\n        </Flex>\n      ) : filterOption === 'FAVORITES' ? (\n        <div className=\"ape:w-full ape:h-[300px] ape:bg-white2 ape:rounded-normal ape:flex ape:justify-center ape:items-center ape:flex-col ape:mt-[10px]\">\n          <StarFilled width={75} height={75} />\n          <div className=\"ape:mt-[10px]\">{`You don't have any Favorite Bonds yet!`}</div>\n          <div className=\"ape:text-[12px] ape:font-normal ape:text-text-disabled-button ape:mt-[10px]\">\n            {`Click on the 'star' or 'fire' icon to add Bonds to the list.`}\n          </div>\n        </div>\n      ) : (\n        <LoadingSkeleton />\n      )}\n      {SDKConfig.useHotBonds && <RecommendationCards />}\n      <div className=\"powered-by-apebond ape:w-full ape:flex ape:justify-center ape:my-[15px]\">\n        <img\n          src=\"https://res.cloudinary.com/dswmrqgwy/image/upload/v1741643990/poweredbyapebondsdk_cxiouj.png\"\n          alt=\"powered-by-apebond\"\n          style={{ width: '200px', height: 'auto' }}\n        />\n      </div>\n    </Flex>\n  )\n}\n\nexport default Bonds\n"],"names":["_jsxs","_jsx","CheckURL"],"mappings":"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"}

package/dist/views/Bonds/components/BondRows/ActiveBondRows.js

@@ -1,9 +1,10 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
+import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import ChainTitle from './ChainTitle.js';
 import BondRow from './BondRow.js';
-import { Flex } from 'theme-ui';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import HotBondCards from '../HotBondCards/index.js';
 import ChainBanner from '../ChainBanner/ChainBanner.js';
@@ -14,15 +15,10 @@ import { getTimePeriods } from '../../../../utils/getTimePeriods.js';
 import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 
 const ActiveBondRows = ({ chain, bonds, hideTitles, showHotBonds }) => {
-    const { namingPreference } = useSDKConfig();
+    const { namingPreference, useCardsView } = useSDKConfig();
     const [isOpen, setIsOpen] = useState(true);
     const key = chain;
-    return (jsx(Flex, { className: "bondrowswithtitle", children: jsxs(AnimatePresence, { initial: false, children: [jsx(Flex, { onClick: () => setIsOpen(!isOpen), sx: { cursor: 'pointer' }, children: jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: (bonds.length <= 0 && chain !== ChainId.SOL && chain !== ChainId.MONAD) || hideTitles, isOpen: isOpen }) }), isOpen && (bonds.length > 0 || chain === ChainId.MONAD) && (jsxs(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
-                        position: 'relative',
-                        overflow: 'hidden',
-                        width: '100%',
-                        marginTop: '0px',
-                    }, className: "bonds-card-container", children: [[
+    return (jsx(Flex, { className: "bondrowswithtitle ape:w-full ape:flex-col", children: jsxs(AnimatePresence, { initial: false, children: [jsx(Flex, { onClick: () => setIsOpen(!isOpen), className: "ape:cursor-pointer", children: jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: (bonds.length <= 0 && chain !== ChainId.SOL && chain !== ChainId.MONAD) || hideTitles, isOpen: isOpen }) }), isOpen && (bonds.length > 0 || chain === ChainId.MONAD) && (jsxs(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, className: clsx('bonds-card-container ape:relative ape:overflow-hidden ape:w-full ape:mt-0', useCardsView && 'ape:flex ape:flex-wrap'), children: [[
                             // ChainId.SOL,
                             ChainId.MONAD,
                             // ChainId.APTOS,

package/dist/views/Bonds/components/BondRows/ActiveBondRows.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveBondRows.js","sources":["../../../../../src/views/Bonds/components/BondRows/ActiveBondRows.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport ChainTitle from './ChainTitle'\nimport BondRow from './BondRow'\nimport { Flex } from 'theme-ui'\nimport { BondsData } from '../../../../types/bonds'\nimport { BaseBondConfig, ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport HotBondCards from '../HotBondCards'\nimport ChainBanner from '../ChainBanner/ChainBanner'\nimport {\n  getRemainingTokensString,\n  getVestingTermsString,\n  getVestingTermsTooltipString,\n  remainingPercentage,\n} from '../../../../utils/displayHelpers'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\n\n// Record<string, (BondsData | BaseBondConfig)[]>\n\ninterface ActiveBondRowsProps {\n  chain: number\n  bonds: (BondsData | BaseBondConfig)[]\n  hideTitles: boolean\n  showHotBonds: boolean\n}\n\nconst ActiveBondRows: React.FC<ActiveBondRowsProps> = ({ chain, bonds, hideTitles, showHotBonds }) => {\n  const { namingPreference } = useSDKConfig()\n  const [isOpen, setIsOpen] = useState<boolean>(true)\n  const key = chain\n\n  return (\n    <Flex className=\"bondrowswithtitle\" key={key}>\n      <AnimatePresence initial={false}>\n        <Flex onClick={() => setIsOpen(!isOpen)} sx={{ cursor: 'pointer' }}>\n          <ChainTitle\n            chain={chain}\n            pt={'5px'}\n            hideTitles={(bonds.length <= 0 && chain !== ChainId.SOL && chain !== ChainId.MONAD) || hideTitles}\n            isOpen={isOpen}\n          />\n        </Flex>\n        {isOpen && (bonds.length > 0 || chain === ChainId.MONAD) && (\n          <motion.div\n            initial={{ height: 0, overflow: 'hidden' }}\n            animate={{ height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }}\n            exit={{ height: 0, overflow: 'hidden' }}\n            sx={{\n              position: 'relative',\n              overflow: 'hidden',\n              width: '100%',\n              marginTop: '0px',\n            }}\n            key={key}\n            className=\"bonds-card-container\"\n          >\n            {[\n              // ChainId.SOL,\n              ChainId.MONAD,\n              // ChainId.APTOS,\n              // ChainId.SUI\n            ].includes(chain) &&\n              !hideTitles && <ChainBanner chainId={chain} />}\n            {bonds?.map((bondFromMap, index) => {\n              // PRE TGE ROWS\n\n              if (bondFromMap.billType === 'fcfs') {\n                const bond = bondFromMap as BondsData\n                const totalPrincipalBilled =\n                  Math.round(\n                    getBalanceNumber(\n                      bond?.totalPrincipalBilled ?? '0',\n                      bond?.lpToken?.decimals?.[bond?.chainId] as number,\n                    ),\n                  ) / (bond.initPrice ?? 0)\n                const raiseGoal =\n                  Math.round(\n                    getBalanceNumber(bond?.totalRaise ?? '0', bond?.lpToken?.decimals?.[bond?.chainId] as number),\n                  ) / (bond.initPrice ?? 0)\n\n                const tokensRemaining = raiseGoal - totalPrincipalBilled\n                const tokensRemainingUSD = tokensRemaining * (bond?.initPrice ?? 0)\n                const percentageAvailable = 100 - Math.floor((totalPrincipalBilled * 100) / raiseGoal)\n                const earnToken = bond?.earnToken?.symbol\n\n                const baseBonus = bond?.trueBondPrices?.[0]?.bonus ?? 0\n                const airdropBonus = bond?.airdropBonus ?? 0\n                const bonus = baseBonus + airdropBonus\n                const initialRelease = (bond?.initialRelease ?? 0) * 100\n\n                const now = new Date().getTime()\n                const saleFinishTime = (bond?.finishTime ?? 0) * 1000\n                const saleHasFinished = now > saleFinishTime || bond.finalized\n\n                return (\n                  <BondRow\n                    key={`${bond.contractAddress}-${bond.chainId}-${index}`}\n                    bondAddress={bond.contractAddress?.[bond.chainId] as string}\n                    bondChain={bond.chainId}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    payoutToken={bond.underlyingEarnToken || bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.tags?.[0]}\n                    bonus={\n                      bond.yieldBond\n                        ? `${bond.yieldData?.apr.toFixed()}% APR`\n                        : saleHasFinished\n                          ? undefined\n                          : `${bonus}%`\n                    }\n                    airdropTooltip={bond.airdropTooltip}\n                    percentageAvailable={percentageAvailable}\n                    remainingTokensString={\n                      saleHasFinished\n                        ? `0 ${earnToken} ($0) `\n                        : `${formatNumberSI(tokensRemaining, 0)} ${earnToken} ($${formatNumberSI(tokensRemainingUSD, 2)})`\n                    }\n                    vestingTermString={\n                      saleHasFinished\n                        ? '-'\n                        : bond.yieldBond\n                          ? `${\n                              getTimePeriods(\n                                (bond?.yieldData?.rewardDistributionEnd ?? 0) -\n                                  parseInt(bond.startVestingTimestamp ?? '0'),\n                                true,\n                              ).days\n                            } D`\n                          : initialRelease === 100\n                            ? `0 D`\n                            : `${getTimePeriods(bond.vestingTerm).months} Mo`\n                    }\n                    vestingCliffString={\n                      bond.yieldBond\n                        ? `This is the duration over which the bonus yield will be distributed while your initial tokens remain staked.`\n                        : undefined\n                    }\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    bondSoldOut={saleHasFinished}\n                    shortDescription={bond.shortDescription}\n                  />\n                )\n              } else {\n                // POST TGE BONDS AKA NORMAL BONDS\n\n                const bond = bondFromMap as BondsData\n                const bondAddress = bond?.contractAddress?.[bond?.chainId] as string\n                const remainingTokensString = getRemainingTokensString(bond)\n                return (\n                  <BondRow\n                    key={`${bondAddress}-${bond.chainId}-${index}`}\n                    bondAddress={bondAddress}\n                    bondChain={bond.chainId}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    payoutToken={bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.highlightTag || bond.tags?.[0]}\n                    trueBondPrices={namingPreference === 'Bonus' ? bond.trueBondPrices : undefined}\n                    minTier={bond?.minTier}\n                    vestingTermString={getVestingTermsString(bond)}\n                    vestingCliffString={getVestingTermsTooltipString(bond)}\n                    percentageAvailable={remainingPercentage(bond)}\n                    remainingTokensString={remainingTokensString}\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    bonus={\n                      namingPreference === 'Discount'\n                        ? `${bond?.trueBondPrices?.[0]?.discountWithFee?.toFixed(2)}%`\n                        : undefined\n                    }\n                    shortDescription={bond.shortDescription}\n                    cgId={bond.cgId}\n                    dexscreener={bond?.dexscreener}\n                  />\n                )\n              }\n            })}\n            {showHotBonds && <HotBondCards />}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default ActiveBondRows\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,cAAc,GAAkC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,KAAI;AACnG,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,YAAY,EAAE;IAC3C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC;IACnD,MAAM,GAAG,GAAG,KAAK;AAEjB,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCC,IAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAAA,CAC7BD,GAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAA,QAAA,EAChEA,GAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,KAAK,EACT,UAAU,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,KAAK,OAAO,CAAC,GAAG,IAAI,KAAK,KAAK,OAAO,CAAC,KAAK,KAAK,UAAU,EACjG,MAAM,EAAE,MAAM,EAAA,CACd,EAAA,CACG,EACN,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC,KACtDC,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC1C,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAC9F,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACvC,EAAE,EAAE;AACF,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,SAAS,EAAE,KAAK;qBACjB,EAED,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAA,CAE/B;;AAEC,4BAAA,OAAO,CAAC,KAAK;;;yBAGd,CAAC,QAAQ,CAAC,KAAK,CAAC;AACf,4BAAA,CAAC,UAAU,IAAID,GAAA,CAAC,WAAW,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,CAAI,EAC/C,KAAK,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,KAAI;;AAGjC,4BAAA,IAAI,WAAW,CAAC,QAAQ,KAAK,MAAM,EAAE;gCACnC,MAAM,IAAI,GAAG,WAAwB;AACrC,gCAAA,MAAM,oBAAoB,GACxB,IAAI,CAAC,KAAK,CACR,gBAAgB,CACd,IAAI,EAAE,oBAAoB,IAAI,GAAG,EACjC,IAAI,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAE,OAAO,CAAW,CACnD,CACF,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;AAC3B,gCAAA,MAAM,SAAS,GACb,IAAI,CAAC,KAAK,CACR,gBAAgB,CAAC,IAAI,EAAE,UAAU,IAAI,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAE,OAAO,CAAW,CAAC,CAC9F,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;AAE3B,gCAAA,MAAM,eAAe,GAAG,SAAS,GAAG,oBAAoB;gCACxD,MAAM,kBAAkB,GAAG,eAAe,IAAI,IAAI,EAAE,SAAS,IAAI,CAAC,CAAC;AACnE,gCAAA,MAAM,mBAAmB,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,oBAAoB,GAAG,GAAG,IAAI,SAAS,CAAC;AACtF,gCAAA,MAAM,SAAS,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM;AAEzC,gCAAA,MAAM,SAAS,GAAG,IAAI,EAAE,cAAc,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;AACvD,gCAAA,MAAM,YAAY,GAAG,IAAI,EAAE,YAAY,IAAI,CAAC;AAC5C,gCAAA,MAAM,KAAK,GAAG,SAAS,GAAG,YAAY;gCACtC,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,cAAc,IAAI,CAAC,IAAI,GAAG;gCAExD,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE;gCAChC,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,UAAU,IAAI,CAAC,IAAI,IAAI;gCACrD,MAAM,eAAe,GAAG,GAAG,GAAG,cAAc,IAAI,IAAI,CAAC,SAAS;gCAE9D,QACEA,GAAA,CAAC,OAAO,EAAA,EAEN,WAAW,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAW,EAC3D,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAsC,EAC9D,WAAW,EAAE,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,SAAS,EACvD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,EACnB,KAAK,EACH,IAAI,CAAC;0CACD,CAAA,EAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,OAAO,EAAE,CAAA,KAAA;AAClC,0CAAE;AACA,8CAAE;AACF,8CAAE,CAAA,EAAG,KAAK,CAAA,CAAA,CAAG,EAEnB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,mBAAmB,EAAE,mBAAmB,EACxC,qBAAqB,EACnB;0CACI,CAAA,EAAA,EAAK,SAAS,CAAA,MAAA;0CACd,GAAG,cAAc,CAAC,eAAe,EAAE,CAAC,CAAC,CAAA,CAAA,EAAI,SAAS,MAAM,cAAc,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAA,CAAA,CAAG,EAEtG,iBAAiB,EACf;AACE,0CAAE;0CACA,IAAI,CAAC;AACL,8CAAE,CAAA,EACE,cAAc,CACZ,CAAC,IAAI,EAAE,SAAS,EAAE,qBAAqB,IAAI,CAAC;AAC1C,gDAAA,QAAQ,CAAC,IAAI,CAAC,qBAAqB,IAAI,GAAG,CAAC,EAC7C,IAAI,CACL,CAAC,IACJ,CAAA,EAAA;8CACA,cAAc,KAAK;AACnB,kDAAE,CAAA,GAAA;AACF,kDAAE,CAAA,EAAG,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,KAAK,EAEzD,kBAAkB,EAChB,IAAI,CAAC;AACH,0CAAE,CAAA,4GAAA;AACF,0CAAE,SAAS,EAEf,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,WAAW,EAAE,eAAe,EAC5B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAA,EA5ClC,CAAA,EAAG,IAAI,CAAC,eAAe,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CA6CvD;4BAEN;iCAAO;;gCAGL,MAAM,IAAI,GAAG,WAAwB;gCACrC,MAAM,WAAW,GAAG,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAW;AACpE,gCAAA,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,IAAI,CAAC;gCAC5D,QACEA,GAAA,CAAC,OAAO,EAAA,EAEN,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAsC,EAC9D,WAAW,EAAE,IAAI,CAAC,SAAS,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,EACxC,cAAc,EAAE,gBAAgB,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,GAAG,SAAS,EAC9E,OAAO,EAAE,IAAI,EAAE,OAAO,EACtB,iBAAiB,EAAE,qBAAqB,CAAC,IAAI,CAAC,EAC9C,kBAAkB,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtD,mBAAmB,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAC9C,qBAAqB,EAAE,qBAAqB,EAC5C,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,KAAK,EACH,gBAAgB,KAAK;AACnB,0CAAE,CAAA,EAAG,IAAI,EAAE,cAAc,GAAG,CAAC,CAAC,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA;AAC3D,0CAAE,SAAS,EAEf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,EAAE,WAAW,EAAA,EAtBzB,CAAA,EAAG,WAAW,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAuB9C;4BAEN;AACF,wBAAA,CAAC,CAAC,EACD,YAAY,IAAIA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,CAAA,EAAA,EA7H5B,GAAG,CA8HG,CACd,CAAA,EAAA,CACe,EAAA,EArJqB,GAAG,CAsJrC;AAEX;;;;"}
+{"version":3,"file":"ActiveBondRows.js","sources":["../../../../../src/views/Bonds/components/BondRows/ActiveBondRows.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport ChainTitle from './ChainTitle'\nimport BondRow from './BondRow'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport { BaseBondConfig, ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport HotBondCards from '../HotBondCards'\nimport ChainBanner from '../ChainBanner/ChainBanner'\nimport {\n  getRemainingTokensString,\n  getVestingTermsString,\n  getVestingTermsTooltipString,\n  remainingPercentage,\n} from '../../../../utils/displayHelpers'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\n\n// Record<string, (BondsData | BaseBondConfig)[]>\n\ninterface ActiveBondRowsProps {\n  chain: number\n  bonds: (BondsData | BaseBondConfig)[]\n  hideTitles: boolean\n  showHotBonds: boolean\n}\n\nconst ActiveBondRows: React.FC<ActiveBondRowsProps> = ({ chain, bonds, hideTitles, showHotBonds }) => {\n  const { namingPreference, useCardsView } = useSDKConfig()\n  const [isOpen, setIsOpen] = useState<boolean>(true)\n  const key = chain\n\n  return (\n    <Flex className=\"bondrowswithtitle ape:w-full ape:flex-col\" key={key}>\n      <AnimatePresence initial={false}>\n        <Flex onClick={() => setIsOpen(!isOpen)} className=\"ape:cursor-pointer\">\n          <ChainTitle\n            chain={chain}\n            pt={'5px'}\n            hideTitles={(bonds.length <= 0 && chain !== ChainId.SOL && chain !== ChainId.MONAD) || hideTitles}\n            isOpen={isOpen}\n          />\n        </Flex>\n        {isOpen && (bonds.length > 0 || chain === ChainId.MONAD) && (\n          <motion.div\n            initial={{ height: 0, overflow: 'hidden' }}\n            animate={{ height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }}\n            exit={{ height: 0, overflow: 'hidden' }}\n            className={clsx(\n              'bonds-card-container ape:relative ape:overflow-hidden ape:w-full ape:mt-0',\n              useCardsView && 'ape:flex ape:flex-wrap',\n            )}\n            key={key}\n          >\n            {[\n              // ChainId.SOL,\n              ChainId.MONAD,\n              // ChainId.APTOS,\n              // ChainId.SUI\n            ].includes(chain) &&\n              !hideTitles && <ChainBanner chainId={chain} />}\n            {bonds?.map((bondFromMap, index) => {\n              // PRE TGE ROWS\n\n              if (bondFromMap.billType === 'fcfs') {\n                const bond = bondFromMap as BondsData\n                const totalPrincipalBilled =\n                  Math.round(\n                    getBalanceNumber(\n                      bond?.totalPrincipalBilled ?? '0',\n                      bond?.lpToken?.decimals?.[bond?.chainId] as number,\n                    ),\n                  ) / (bond.initPrice ?? 0)\n                const raiseGoal =\n                  Math.round(\n                    getBalanceNumber(bond?.totalRaise ?? '0', bond?.lpToken?.decimals?.[bond?.chainId] as number),\n                  ) / (bond.initPrice ?? 0)\n\n                const tokensRemaining = raiseGoal - totalPrincipalBilled\n                const tokensRemainingUSD = tokensRemaining * (bond?.initPrice ?? 0)\n                const percentageAvailable = 100 - Math.floor((totalPrincipalBilled * 100) / raiseGoal)\n                const earnToken = bond?.earnToken?.symbol\n\n                const baseBonus = bond?.trueBondPrices?.[0]?.bonus ?? 0\n                const airdropBonus = bond?.airdropBonus ?? 0\n                const bonus = baseBonus + airdropBonus\n                const initialRelease = (bond?.initialRelease ?? 0) * 100\n\n                const now = new Date().getTime()\n                const saleFinishTime = (bond?.finishTime ?? 0) * 1000\n                const saleHasFinished = now > saleFinishTime || bond.finalized\n\n                return (\n                  <BondRow\n                    key={`${bond.contractAddress}-${bond.chainId}-${index}`}\n                    bondAddress={bond.contractAddress?.[bond.chainId] as string}\n                    bondChain={bond.chainId}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    payoutToken={bond.underlyingEarnToken || bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.tags?.[0]}\n                    bonus={\n                      bond.yieldBond\n                        ? `${bond.yieldData?.apr.toFixed()}% APR`\n                        : saleHasFinished\n                          ? undefined\n                          : `${bonus}%`\n                    }\n                    airdropTooltip={bond.airdropTooltip}\n                    percentageAvailable={percentageAvailable}\n                    remainingTokensString={\n                      saleHasFinished\n                        ? `0 ${earnToken} ($0) `\n                        : `${formatNumberSI(tokensRemaining, 0)} ${earnToken} ($${formatNumberSI(tokensRemainingUSD, 2)})`\n                    }\n                    vestingTermString={\n                      saleHasFinished\n                        ? '-'\n                        : bond.yieldBond\n                          ? `${\n                              getTimePeriods(\n                                (bond?.yieldData?.rewardDistributionEnd ?? 0) -\n                                  parseInt(bond.startVestingTimestamp ?? '0'),\n                                true,\n                              ).days\n                            } D`\n                          : initialRelease === 100\n                            ? `0 D`\n                            : `${getTimePeriods(bond.vestingTerm).months} Mo`\n                    }\n                    vestingCliffString={\n                      bond.yieldBond\n                        ? `This is the duration over which the bonus yield will be distributed while your initial tokens remain staked.`\n                        : undefined\n                    }\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    bondSoldOut={saleHasFinished}\n                    shortDescription={bond.shortDescription}\n                  />\n                )\n              } else {\n                // POST TGE BONDS AKA NORMAL BONDS\n\n                const bond = bondFromMap as BondsData\n                const bondAddress = bond?.contractAddress?.[bond?.chainId] as string\n                const remainingTokensString = getRemainingTokensString(bond)\n                return (\n                  <BondRow\n                    key={`${bondAddress}-${bond.chainId}-${index}`}\n                    bondAddress={bondAddress}\n                    bondChain={bond.chainId}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    payoutToken={bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.highlightTag || bond.tags?.[0]}\n                    trueBondPrices={namingPreference === 'Bonus' ? bond.trueBondPrices : undefined}\n                    minTier={bond?.minTier}\n                    vestingTermString={getVestingTermsString(bond)}\n                    vestingCliffString={getVestingTermsTooltipString(bond)}\n                    percentageAvailable={remainingPercentage(bond)}\n                    remainingTokensString={remainingTokensString}\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    bonus={\n                      namingPreference === 'Discount'\n                        ? `${bond?.trueBondPrices?.[0]?.discountWithFee?.toFixed(2)}%`\n                        : undefined\n                    }\n                    shortDescription={bond.shortDescription}\n                    cgId={bond.cgId}\n                    dexscreener={bond?.dexscreener}\n                  />\n                )\n              }\n            })}\n            {showHotBonds && <HotBondCards />}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default ActiveBondRows\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/views/Bonds/components/BondRows/BondRow.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
+import clsx from 'clsx';
 import ProgressBar from '../../../../components/ProgressBar/ProgressBar.js';
 import ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper.js';
 import TokenInfoAndName from '../../../../components/TokenInfoAndName/index.js';
@@ -19,7 +20,7 @@ import Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret.js';
 import More from '../../../../components/uikit-sdk/Svg/Icons/More.js';
 
 const BondRow = ({ bondAddress, bondChain, marketingCampaign, payoutToken, billType, tag, bondSoldOut, trueBondPrices, minTier, bonus, airdropTooltip, vestingTermString, vestingCliffString, percentageAvailable, remainingTokensString, projectURL, twitterURL, shortDescription, soldoutBondsCount, isOpen, cgId, dexscreener, }) => {
-    const SDKConfig = useSDKConfig();
+    const { useCardsView: cardsView } = useSDKConfig();
     // Modal
     const [openBuyModal] = useModal(jsx(ModalHandler, { bondAddress: bondAddress, bondChain: bondChain }), true, true, `buyBondModal-${bondAddress.toLowerCase()}-${bondChain}`);
     const [openPreTGEBondModal] = useModal(jsx(ModalHandlerPreTGE, { bondAddress: bondAddress, bondChain: bondChain }), true, true, `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`);
@@ -46,21 +47,21 @@ const BondRow = ({ bondAddress, bondChain, marketingCampaign, payoutToken, billT
             },
         });
     };
-    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, sx: {
-            borderRadius: 'normal',
-            // Insert special campaign styles here
-            ...MCBondRowStyles[marketingCampaign],
+    return (jsxs("div", { className: clsx('bond-row ape:group ape:rounded-normal ape:relative ape:flex', cardsView
+            ? 'ape:flex-col ape:w-[calc(33.33%-20px)] ape:max-[768px]:w-full ape:h-fit ape:float-left ape:mr-[20px] ape:mb-[20px] ape:p-[20px] ape:justify-between'
+            : 'ape:flex-row ape:w-full ape:h-[70px] ape:bg-white2 ape:mb-[5px] ape:justify-between ape:hover:bg-white3'), onClick: handleOpenModal, style: {
             cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',
-            '&:hover .list-tag': {
-                background: 'rgb(20 18 29 / 0.25)',
-            },
-        }, children: [jsx("div", { className: "token-info-container", sx: { width: ['45%', '45%', '45%', '30%'], minWidth: ['unset', 'unset', 'unset', '400px'] }, children: jsx(TokenInfoAndName, { tokenSymbol: payoutToken?.symbol, chain: bondChain, tag: tag, marketingCampaign: marketingCampaign }) }), SDKConfig.useCardsView && shortDescription && (jsx("div", { className: "short-description", children: jsx(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: "bond-info-columns", sx: { width: ['55%', '55%', '55%', '70%'] }, children: [!SDKConfig.useCardsView && jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsx(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip }), jsxs("div", { className: "terms-column", children: [vestingTermString, vestingCliffString && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx(QuestionCircle, { width: "12px" }) }) }))] }), jsx("div", { className: "tokens-remaining-column", children: bondSoldOut ? ('-') : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: percentageAvailable }), style: {
+            ...MCBondRowStyles[marketingCampaign],
+        }, children: [jsx("div", { className: clsx('token-info-container', cardsView ? 'ape:w-full' : 'ape:w-[45%] ape:lg:w-[30%] ape:min-w-[unset] ape:lg:min-w-[400px]'), children: jsx(TokenInfoAndName, { tokenSymbol: payoutToken?.symbol, chain: bondChain, tag: tag, marketingCampaign: marketingCampaign, cardsView: cardsView }) }), cardsView && shortDescription && (jsx("div", { className: "short-description ape:flex ape:text-[12px] ape:font-normal ape:leading-[22px]", children: jsx(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: clsx('bond-info-columns ape:flex', cardsView
+                    ? 'ape:w-full ape:justify-between ape:items-start ape:mt-[40px]'
+                    : 'ape:flex-row ape:items-center ape:justify-end ape:lg:justify-between ape:w-[55%] ape:lg:w-[70%]'), children: [!cardsView && jsx("div", { className: "ape:hidden ape:lg:flex ape:w-[125px]" }), jsx(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip, cardsView: cardsView }), jsxs("div", { className: clsx('terms-column', cardsView
+                            ? 'ape:flex ape:flex-col ape:justify-start ape:items-start ape:relative ape:w-[60px]'
+                            : 'ape:hidden ape:lg:flex ape:lg:w-[115px] ape:items-center ape:justify-center'), children: [cardsView && (jsx("span", { className: "ape:text-[12px] ape:font-normal ape:text-[#777] ape:absolute ape:-top-[15px]", children: "Terms" })), vestingTermString, vestingCliffString && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx(Flex, { className: "ape:opacity-60 ape:ml-[6px]", children: jsx(QuestionCircle, { width: "12px" }) }) }))] }), jsx("div", { className: clsx('tokens-remaining-column', cardsView ? 'ape:hidden' : 'ape:hidden ape:lg:flex ape:lg:w-[135px] ape:items-end ape:justify-center'), children: bondSoldOut ? ('-') : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: percentageAvailable }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
                                 justifyContent: 'center',
-                                display: ['none', 'none', 'none', 'flex'],
-                            }, showTooltip: true, toolTip: remainingTokensString })) }), jsx("div", { className: "tooltip-column", children: soldoutBondsCount ? (jsxs(Flex, { sx: { gap: '5px', fontSize: '13px', fontWeight: 500, opacity: 0.5 }, children: ["(", soldoutBondsCount, ")", jsx(Caret, { direction: isOpen ? 'up' : 'down', width: "8px" })] })) : (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(BondInfoTooltip, { earnTokenContract: payoutToken?.address?.[bondChain] ?? '', earnTokenSymbol: payoutToken?.symbol ?? '', bondContract: bondAddress ?? '', projectLink: projectURL, twitter: twitterURL, chain: bondChain, isSoldOut: bondSoldOut, billType: billType, cgId: cgId, dexscreener: dexscreener }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx(More, { width: "25px" }) }) })) })] })] }, `${bondAddress}-${bondChain}`));
+                            }, hideOnMobile: true, showTooltip: true, toolTip: remainingTokensString })) }), jsx("div", { className: clsx('tooltip-column ape:flex', cardsView ? 'ape:w-[25px]' : 'ape:w-[50px]'), children: soldoutBondsCount ? (jsxs(Flex, { className: "ape:gap-[5px] ape:text-[13px] ape:font-medium ape:opacity-50", children: ["(", soldoutBondsCount, ")", jsx(Caret, { direction: isOpen ? 'up' : 'down', width: "8px" })] })) : (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(BondInfoTooltip, { earnTokenContract: payoutToken?.address?.[bondChain] ?? '', earnTokenSymbol: payoutToken?.symbol ?? '', bondContract: bondAddress ?? '', projectLink: projectURL, twitter: twitterURL, chain: bondChain, isSoldOut: bondSoldOut, billType: billType, cgId: cgId, dexscreener: dexscreener }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx(Flex, { className: "more-icon ape:opacity-80", children: jsx(More, { width: "25px" }) }) })) })] })] }, `${bondAddress}-${bondChain}`));
 };
 var BondRow$1 = React.memo(BondRow);
 

package/dist/views/Bonds/components/BondRows/BondRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BondRow.js","sources":["../../../../../src/views/Bonds/components/BondRows/BondRow.tsx"],"sourcesContent":["import React from 'react'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport { ChainId, LaunchBondTiers, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../../../hooks/useModal'\nimport ModalHandler from './ModalHandler'\nimport track from '../../../../utils/track'\nimport BonusContainer from '../BonusComponents/BonusContainer'\nimport ModalHandlerPreTGE from './ModalHandlerPreTGE'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport SafeHTMLComponent from '../../../../components/SafeHTMLComponent'\nimport { MCBondRowStyles } from '../../../../utils/campaignStyles'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport More from '../../../../components/uikit-sdk/Svg/Icons/More'\n\ninterface BondRowProps {\n  bondAddress: string\n  bondChain: ChainId\n  marketingCampaign?: MarketingCampaign\n  payoutToken: Token\n  billType: string\n  tag?: string\n  bondSoldOut?: boolean\n  trueBondPrices?: TrueBondPrices[]\n  minTier?: LaunchBondTiers\n  bonus?: string\n  airdropTooltip?: string\n  vestingTermString: string\n  vestingCliffString?: string\n  percentageAvailable: number\n  remainingTokensString: string\n  projectURL?: string\n  twitterURL?: string\n  shortDescription?: string\n  soldoutBondsCount?: number\n  isOpen?: boolean\n  cgId?: string\n  dexscreener?: string\n}\n\nconst BondRow: React.FC<BondRowProps> = ({\n  bondAddress,\n  bondChain,\n  marketingCampaign,\n  payoutToken,\n  billType,\n  tag,\n  bondSoldOut,\n  trueBondPrices,\n  minTier,\n  bonus,\n  airdropTooltip,\n  vestingTermString,\n  vestingCliffString,\n  percentageAvailable,\n  remainingTokensString,\n  projectURL,\n  twitterURL,\n  shortDescription,\n  soldoutBondsCount,\n  isOpen,\n  cgId,\n  dexscreener,\n}) => {\n  const SDKConfig = useSDKConfig()\n\n  // Modal\n  const [openBuyModal] = useModal(\n    <ModalHandler bondAddress={bondAddress} bondChain={bondChain} />,\n    true,\n    true,\n    `buyBondModal-${bondAddress.toLowerCase()}-${bondChain}`,\n  )\n\n  const [openPreTGEBondModal] = useModal(\n    <ModalHandlerPreTGE bondAddress={bondAddress} bondChain={bondChain} />,\n    true,\n    true,\n    `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n  )\n\n  const handleOpenModal = () => {\n    if (bondSoldOut) return\n    if (billType === 'fcfs') {\n      openPreTGEBondModal()\n    } else {\n      openBuyModal()\n    }\n    if (typeof window !== 'undefined') {\n      const locationPath = window.location.pathname.replace('/', '')\n      window.history.pushState({}, '', `${locationPath}?bondAddress=${bondAddress}&bondChain=${bondChain}`)\n    }\n    track({\n      event: 'buyModalOpen',\n      chain: bondChain,\n      data: {\n        cat: 'Row',\n        bond: payoutToken.symbol,\n        bondChain: bondChain,\n      },\n    })\n  }\n\n  return (\n    <div\n      className=\"bond-row\"\n      onClick={handleOpenModal}\n      key={`${bondAddress}-${bondChain}`}\n      sx={{\n        borderRadius: 'normal',\n        // Insert special campaign styles here\n        ...MCBondRowStyles[marketingCampaign!],\n        cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',\n        '&:hover .list-tag': {\n          background: 'rgb(20 18 29 / 0.25)',\n        },\n      }}\n    >\n      <div\n        className=\"token-info-container\"\n        sx={{ width: ['45%', '45%', '45%', '30%'], minWidth: ['unset', 'unset', 'unset', '400px'] }}\n      >\n        <TokenInfoAndName\n          tokenSymbol={payoutToken?.symbol}\n          chain={bondChain}\n          tag={tag}\n          marketingCampaign={marketingCampaign}\n        />\n      </div>\n      {SDKConfig.useCardsView && shortDescription && (\n        <div className=\"short-description\">\n          <SafeHTMLComponent html={shortDescription} />\n        </div>\n      )}\n      <div className=\"bond-info-columns\" sx={{ width: ['55%', '55%', '55%', '70%'] }}>\n        {!SDKConfig.useCardsView && <Flex sx={{ display: ['none', 'none', 'none', 'flex'], width: '125px' }} />}\n        <BonusContainer\n          trueBondPrices={trueBondPrices}\n          minTier={minTier}\n          bonus={bonus}\n          airdropTooltip={airdropTooltip}\n        />\n\n        <div className=\"terms-column\">\n          {vestingTermString}\n          {vestingCliffString && (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={<Flex>{vestingCliffString}</Flex>}\n              width=\"180px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(13%, 0%)\"\n            >\n              <Flex sx={{ opacity: 0.6, ml: '6px' }}>\n                <QuestionCircle width=\"12px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n        <div className=\"tokens-remaining-column\">\n          {bondSoldOut ? (\n            '-'\n          ) : (\n            <ProgressBarWrapper\n              title={''}\n              value={<ProgressBar value={percentageAvailable} />}\n              style={{\n                width: '127px',\n                height: '25px',\n                flexDirection: 'column',\n                justifyContent: 'center',\n                display: ['none', 'none', 'none', 'flex'],\n              }}\n              showTooltip={true}\n              toolTip={remainingTokensString}\n            />\n          )}\n        </div>\n        <div className=\"tooltip-column\">\n          {soldoutBondsCount ? (\n            <Flex sx={{ gap: '5px', fontSize: '13px', fontWeight: 500, opacity: 0.5 }}>\n              ({soldoutBondsCount})\n              <Caret direction={isOpen ? 'up' : 'down'} width=\"8px\" />\n            </Flex>\n          ) : (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={\n                <Tooltip\n                  earnTokenContract={payoutToken?.address?.[bondChain] ?? ''}\n                  earnTokenSymbol={payoutToken?.symbol ?? ''}\n                  bondContract={bondAddress ?? ''}\n                  projectLink={projectURL}\n                  twitter={twitterURL}\n                  chain={bondChain}\n                  isSoldOut={bondSoldOut}\n                  billType={billType}\n                  cgId={cgId}\n                  dexscreener={dexscreener}\n                />\n              }\n              width=\"205px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(7%, -2%)\"\n            >\n              <Flex className=\"more-icon\" sx={{ opacity: 0.8 }}>\n                <More width=\"25px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(BondRow)\n"],"names":["_jsx","_jsxs","Tooltip"],"mappings":"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"}
+{"version":3,"file":"BondRow.js","sources":["../../../../../src/views/Bonds/components/BondRows/BondRow.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport { ChainId, LaunchBondTiers, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../../../hooks/useModal'\nimport ModalHandler from './ModalHandler'\nimport track from '../../../../utils/track'\nimport BonusContainer from '../BonusComponents/BonusContainer'\nimport ModalHandlerPreTGE from './ModalHandlerPreTGE'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport SafeHTMLComponent from '../../../../components/SafeHTMLComponent'\nimport { MCBondRowStyles } from '../../../../utils/campaignStyles'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport More from '../../../../components/uikit-sdk/Svg/Icons/More'\n\ninterface BondRowProps {\n  bondAddress: string\n  bondChain: ChainId\n  marketingCampaign?: MarketingCampaign\n  payoutToken: Token\n  billType: string\n  tag?: string\n  bondSoldOut?: boolean\n  trueBondPrices?: TrueBondPrices[]\n  minTier?: LaunchBondTiers\n  bonus?: string\n  airdropTooltip?: string\n  vestingTermString: string\n  vestingCliffString?: string\n  percentageAvailable: number\n  remainingTokensString: string\n  projectURL?: string\n  twitterURL?: string\n  shortDescription?: string\n  soldoutBondsCount?: number\n  isOpen?: boolean\n  cgId?: string\n  dexscreener?: string\n}\n\nconst BondRow: React.FC<BondRowProps> = ({\n  bondAddress,\n  bondChain,\n  marketingCampaign,\n  payoutToken,\n  billType,\n  tag,\n  bondSoldOut,\n  trueBondPrices,\n  minTier,\n  bonus,\n  airdropTooltip,\n  vestingTermString,\n  vestingCliffString,\n  percentageAvailable,\n  remainingTokensString,\n  projectURL,\n  twitterURL,\n  shortDescription,\n  soldoutBondsCount,\n  isOpen,\n  cgId,\n  dexscreener,\n}) => {\n  const { useCardsView: cardsView } = useSDKConfig()\n\n  // Modal\n  const [openBuyModal] = useModal(\n    <ModalHandler bondAddress={bondAddress} bondChain={bondChain} />,\n    true,\n    true,\n    `buyBondModal-${bondAddress.toLowerCase()}-${bondChain}`,\n  )\n\n  const [openPreTGEBondModal] = useModal(\n    <ModalHandlerPreTGE bondAddress={bondAddress} bondChain={bondChain} />,\n    true,\n    true,\n    `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n  )\n\n  const handleOpenModal = () => {\n    if (bondSoldOut) return\n    if (billType === 'fcfs') {\n      openPreTGEBondModal()\n    } else {\n      openBuyModal()\n    }\n    if (typeof window !== 'undefined') {\n      const locationPath = window.location.pathname.replace('/', '')\n      window.history.pushState({}, '', `${locationPath}?bondAddress=${bondAddress}&bondChain=${bondChain}`)\n    }\n    track({\n      event: 'buyModalOpen',\n      chain: bondChain,\n      data: {\n        cat: 'Row',\n        bond: payoutToken.symbol,\n        bondChain: bondChain,\n      },\n    })\n  }\n\n  return (\n    <div\n      className={clsx(\n        'bond-row ape:group ape:rounded-normal ape:relative ape:flex',\n        cardsView\n          ? 'ape:flex-col ape:w-[calc(33.33%-20px)] ape:max-[768px]:w-full ape:h-fit ape:float-left ape:mr-[20px] ape:mb-[20px] ape:p-[20px] ape:justify-between'\n          : 'ape:flex-row ape:w-full ape:h-[70px] ape:bg-white2 ape:mb-[5px] ape:justify-between ape:hover:bg-white3',\n      )}\n      onClick={handleOpenModal}\n      key={`${bondAddress}-${bondChain}`}\n      style={{\n        cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',\n        ...MCBondRowStyles[marketingCampaign!],\n      }}\n    >\n      <div\n        className={clsx(\n          'token-info-container',\n          cardsView ? 'ape:w-full' : 'ape:w-[45%] ape:lg:w-[30%] ape:min-w-[unset] ape:lg:min-w-[400px]',\n        )}\n      >\n        <TokenInfoAndName\n          tokenSymbol={payoutToken?.symbol}\n          chain={bondChain}\n          tag={tag}\n          marketingCampaign={marketingCampaign}\n          cardsView={cardsView}\n        />\n      </div>\n      {cardsView && shortDescription && (\n        <div className=\"short-description ape:flex ape:text-[12px] ape:font-normal ape:leading-[22px]\">\n          <SafeHTMLComponent html={shortDescription} />\n        </div>\n      )}\n      <div\n        className={clsx(\n          'bond-info-columns ape:flex',\n          cardsView\n            ? 'ape:w-full ape:justify-between ape:items-start ape:mt-[40px]'\n            : 'ape:flex-row ape:items-center ape:justify-end ape:lg:justify-between ape:w-[55%] ape:lg:w-[70%]',\n        )}\n      >\n        {!cardsView && <div className=\"ape:hidden ape:lg:flex ape:w-[125px]\" />}\n        <BonusContainer\n          trueBondPrices={trueBondPrices}\n          minTier={minTier}\n          bonus={bonus}\n          airdropTooltip={airdropTooltip}\n          cardsView={cardsView}\n        />\n\n        <div\n          className={clsx(\n            'terms-column',\n            cardsView\n              ? 'ape:flex ape:flex-col ape:justify-start ape:items-start ape:relative ape:w-[60px]'\n              : 'ape:hidden ape:lg:flex ape:lg:w-[115px] ape:items-center ape:justify-center',\n          )}\n        >\n          {cardsView && (\n            <span className=\"ape:text-[12px] ape:font-normal ape:text-[#777] ape:absolute ape:-top-[15px]\">Terms</span>\n          )}\n          {vestingTermString}\n          {vestingCliffString && (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={<Flex>{vestingCliffString}</Flex>}\n              width=\"180px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(13%, 0%)\"\n            >\n              <Flex className=\"ape:opacity-60 ape:ml-[6px]\">\n                <QuestionCircle width=\"12px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n        <div\n          className={clsx(\n            'tokens-remaining-column',\n            cardsView ? 'ape:hidden' : 'ape:hidden ape:lg:flex ape:lg:w-[135px] ape:items-end ape:justify-center',\n          )}\n        >\n          {bondSoldOut ? (\n            '-'\n          ) : (\n            <ProgressBarWrapper\n              title={''}\n              value={<ProgressBar value={percentageAvailable} />}\n              style={{\n                width: '127px',\n                height: '25px',\n                flexDirection: 'column',\n                justifyContent: 'center',\n              }}\n              hideOnMobile\n              showTooltip={true}\n              toolTip={remainingTokensString}\n            />\n          )}\n        </div>\n        <div className={clsx('tooltip-column ape:flex', cardsView ? 'ape:w-[25px]' : 'ape:w-[50px]')}>\n          {soldoutBondsCount ? (\n            <Flex className=\"ape:gap-[5px] ape:text-[13px] ape:font-medium ape:opacity-50\">\n              ({soldoutBondsCount})\n              <Caret direction={isOpen ? 'up' : 'down'} width=\"8px\" />\n            </Flex>\n          ) : (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={\n                <Tooltip\n                  earnTokenContract={payoutToken?.address?.[bondChain] ?? ''}\n                  earnTokenSymbol={payoutToken?.symbol ?? ''}\n                  bondContract={bondAddress ?? ''}\n                  projectLink={projectURL}\n                  twitter={twitterURL}\n                  chain={bondChain}\n                  isSoldOut={bondSoldOut}\n                  billType={billType}\n                  cgId={cgId}\n                  dexscreener={dexscreener}\n                />\n              }\n              width=\"205px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(7%, -2%)\"\n            >\n              <Flex className=\"more-icon ape:opacity-80\">\n                <More width=\"25px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(BondRow)\n"],"names":["_jsx","_jsxs","Tooltip"],"mappings":"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"}

package/dist/views/Bonds/components/BondRows/ChainTitle.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 declare const ChainTitle: ({ chain, pt, hideTitles, isOpen, }: {
     chain: number;
     pt: string;
     hideTitles?: boolean;
     isOpen: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ChainTitle;

package/dist/views/Bonds/components/BondRows/ChainTitle.js

@@ -1,6 +1,8 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { NETWORK_LABEL } from '../../../../config/constants/chains.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
+import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Text from '../../../../components/uikit-sdk/Text/index.js';
 import TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble/index.js';
@@ -9,18 +11,8 @@ import QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionC
 
 const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
     const isMobile = useIsMobile();
-    return (jsxs(Flex, { id: `${NETWORK_LABEL[chain].toLowerCase().replace(/\s+/g, '')}`, className: "chaintitle", sx: {
-            pt,
-            pb: '10px',
-            color: 'textDisabledButton',
-            fontSize: '13px',
-            fontWeight: 500,
-            cursor: 'pointer',
-            textTransform: 'uppercase',
-            display: hideTitles ? 'none' : 'flex',
-            width: '300px',
-            alignItems: 'center',
-        }, children: [NETWORK_LABEL[chain], " Bonds", jsx(Flex, { sx: { ml: '7px' }, children: jsx(Caret, { direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }), NETWORK_LABEL[chain]?.toLowerCase().includes('testnet') && (jsxs(Flex, { sx: { ml: '15px' }, children: [jsx(Text, { sx: { fontSize: '12px', color: '#DE62F3', fontWeight: 700, mr: '7px' }, children: "TESTNET" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Text, { sx: { textTransform: 'none' }, children: "Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development." }), width: isMobile ? '272px' : '280px', placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)', children: jsx(QuestionCircle, { width: 14, color: "textDisabledButton" }) })] }))] }));
+    const { useCardsView } = useSDKConfig();
+    return (jsxs("div", { id: `${NETWORK_LABEL[chain].toLowerCase().replace(/\s+/g, '')}`, className: clsx('chaintitle ape:pb-[10px] ape:text-text-disabled-button ape:text-[13px] ape:font-medium ape:cursor-pointer ape:uppercase ape:w-[300px] ape:items-center', useCardsView || hideTitles ? 'ape:hidden' : 'ape:flex'), style: { paddingTop: pt }, children: [NETWORK_LABEL[chain], " Bonds", jsx(Flex, { className: "ape:ml-[7px]", children: jsx(Caret, { direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }), NETWORK_LABEL[chain]?.toLowerCase().includes('testnet') && (jsxs(Flex, { className: "ape:ml-[15px]", children: [jsx(Text, { size: "12px", style: { color: '#DE62F3', fontWeight: 700, marginRight: '7px' }, children: "TESTNET" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Text, { className: "ape:normal-case", children: "Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development." }), width: isMobile ? '272px' : '280px', placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)', children: jsx(QuestionCircle, { width: 14, color: "textDisabledButton" }) })] }))] }));
 };
 
 export { ChainTitle as default };

package/dist/views/Bonds/components/BondRows/ChainTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChainTitle.js","sources":["../../../../../src/views/Bonds/components/BondRows/ChainTitle.tsx"],"sourcesContent":["import React from 'react'\nimport { NETWORK_LABEL } from '../../../../config/constants/chains'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst ChainTitle = ({\n  chain,\n  pt,\n  hideTitles,\n  isOpen,\n}: {\n  chain: number\n  pt: string\n  hideTitles?: boolean\n  isOpen: boolean\n}) => {\n  const isMobile = useIsMobile()\n  return (\n    <Flex\n      id={`${NETWORK_LABEL[chain].toLowerCase().replace(/\\s+/g, '')}`}\n      className=\"chaintitle\"\n      sx={{\n        pt,\n        pb: '10px',\n        color: 'textDisabledButton',\n        fontSize: '13px',\n        fontWeight: 500,\n        cursor: 'pointer',\n        textTransform: 'uppercase',\n        display: hideTitles ? 'none' : 'flex',\n        width: '300px',\n        alignItems: 'center',\n      }}\n    >\n      {NETWORK_LABEL[chain]} Bonds\n      <Flex sx={{ ml: '7px' }}>\n        <Caret direction={isOpen ? 'down' : 'up'} width={8} color=\"textDisabledButton\" />\n      </Flex>\n      {NETWORK_LABEL[chain]?.toLowerCase().includes('testnet') && (\n        <Flex sx={{ ml: '15px' }}>\n          <Text sx={{ fontSize: '12px', color: '#DE62F3', fontWeight: 700, mr: '7px' }}>TESTNET</Text>\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={\n              <Text sx={{ textTransform: 'none' }}>\n                Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development.\n              </Text>\n            }\n            width={isMobile ? '272px' : '280px'}\n            placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n            transformTip={isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)'}\n          >\n            <QuestionCircle width={14} color=\"textDisabledButton\" />\n          </TooltipBubble>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ChainTitle\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AASA,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,EAAE,EACF,UAAU,EACV,MAAM,GAMP,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,CAAA,EAAG,aAAa,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA,CAAE,EAC/D,SAAS,EAAC,YAAY,EACtB,EAAE,EAAE;YACF,EAAE;AACF,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,KAAK,EAAE,oBAAoB;AAC3B,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,aAAa,EAAE,WAAW;YAC1B,OAAO,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM;AACrC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,UAAU,EAAE,QAAQ;AACrB,SAAA,EAAA,QAAA,EAAA,CAEA,aAAa,CAAC,KAAK,CAAC,EAAA,QAAA,EACrBC,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,YACrBA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,EAAA,CAC5E,EACN,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,KACtDD,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CACtBC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,wBAAgB,EAC5FA,GAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EACFA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,oHAE5B,EAET,KAAK,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,EACnC,SAAS,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,EAClD,YAAY,EAAE,QAAQ,GAAG,qBAAqB,GAAG,qBAAqB,YAEtEA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,EAAA,CAC1C,IACX,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"ChainTitle.js","sources":["../../../../../src/views/Bonds/components/BondRows/ChainTitle.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { NETWORK_LABEL } from '../../../../config/constants/chains'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst ChainTitle = ({\n  chain,\n  pt,\n  hideTitles,\n  isOpen,\n}: {\n  chain: number\n  pt: string\n  hideTitles?: boolean\n  isOpen: boolean\n}) => {\n  const isMobile = useIsMobile()\n  const { useCardsView } = useSDKConfig()\n  return (\n    <div\n      id={`${NETWORK_LABEL[chain].toLowerCase().replace(/\\s+/g, '')}`}\n      className={clsx(\n        'chaintitle ape:pb-[10px] ape:text-text-disabled-button ape:text-[13px] ape:font-medium ape:cursor-pointer ape:uppercase ape:w-[300px] ape:items-center',\n        useCardsView || hideTitles ? 'ape:hidden' : 'ape:flex',\n      )}\n      style={{ paddingTop: pt }}\n    >\n      {NETWORK_LABEL[chain]} Bonds\n      <Flex className=\"ape:ml-[7px]\">\n        <Caret direction={isOpen ? 'down' : 'up'} width={8} color=\"textDisabledButton\" />\n      </Flex>\n      {NETWORK_LABEL[chain]?.toLowerCase().includes('testnet') && (\n        <Flex className=\"ape:ml-[15px]\">\n          <Text size=\"12px\" style={{ color: '#DE62F3', fontWeight: 700, marginRight: '7px' }}>\n            TESTNET\n          </Text>\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Text className=\"ape:normal-case\">Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development.</Text>}\n            width={isMobile ? '272px' : '280px'}\n            placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n            transformTip={isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)'}\n          >\n            <QuestionCircle width={14} color=\"textDisabledButton\" />\n          </TooltipBubble>\n        </Flex>\n      )}\n    </div>\n  )\n}\n\nexport default ChainTitle\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAWA,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,EAAE,EACF,UAAU,EACV,MAAM,GAMP,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE;IACvC,QACEA,cACE,EAAE,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA,CAAE,EAC/D,SAAS,EAAE,IAAI,CACb,wJAAwJ,EACxJ,YAAY,IAAI,UAAU,GAAG,YAAY,GAAG,UAAU,CACvD,EACD,KAAK,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,EAAA,QAAA,EAAA,CAExB,aAAa,CAAC,KAAK,CAAC,EAAA,QAAA,EACrBC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BA,IAAC,KAAK,EAAA,EAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,EAAA,CAC5E,EACN,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,KACtDD,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,eAAe,aAC7BC,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,SAAA,EAAA,CAE3E,EACPA,IAAC,aAAa,EAAA,EACZ,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,qGAAA,EAAA,CAA2G,EAClJ,KAAK,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,EACnC,SAAS,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,EAClD,YAAY,EAAE,QAAQ,GAAG,qBAAqB,GAAG,qBAAqB,EAAA,QAAA,EAEtEA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,GAC1C,CAAA,EAAA,CACX,CACR,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/views/Bonds/components/BondRows/ModalHandler.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import { ChainId } from '@ape.swap/apeswap-lists';
 declare const ModalHandler: ({ onDismiss, bondAddress, bondChain, }: {
     onDismiss?: () => void;
     bondAddress: string;
     bondChain: ChainId;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ModalHandler;

package/dist/views/Bonds/components/BondRows/ModalHandler.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { getUserBonds } from '../../../../state/bonds/useUserBonds.js';
 import YourBondsModal from '../../../YourBondsModal/YourBondsModal.js';

package/dist/views/Bonds/components/BondRows/ModalHandlerPreTGE.d.ts

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

package/dist/views/Bonds/components/BondRows/ModalHandlerPreTGE.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
 import { useMonitorTx } from '../../../../hooks/useMonitorTx.js';

package/dist/views/Bonds/components/BondRows/SoldOutRows.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { BaseBondConfig } from '@ape.swap/apeswap-lists';
 import { BondsData } from '../../../../types/bonds';
 declare const SoldOutRows: ({ bonds }: {
     bonds: (BondsData | BaseBondConfig)[];
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SoldOutRows;

package/dist/views/Bonds/components/BondRows/SoldOutRows.js

@@ -1,27 +1,25 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
+import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import BondRow from './BondRow.js';
 import { formatNumberSI } from '../../../../utils/formatNumber.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import TurnArrow from '../../../../components/uikit-sdk/Svg/Icons/TurnArrow.js';
+import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 
 const SoldOutRows = ({ bonds }) => {
     const bond = bonds[0];
     const [isOpen, setIsOpen] = useState(false);
-    return (jsxs(AnimatePresence, { initial: false, children: [jsx(Flex, { sx: { cursor: 'pointer' }, onClick: () => setIsOpen(!isOpen), children: jsx(BondRow, { bondAddress: bond.contractAddress?.[bond.chainId], marketingCampaign: bond.marketingCampaign, bondChain: bond.chainId, 
+    const { useCardsView } = useSDKConfig();
+    return (jsxs(AnimatePresence, { initial: false, children: [jsx(Flex, { className: "ape:cursor-pointer", onClick: () => setIsOpen(!isOpen), children: jsx(BondRow, { bondAddress: bond.contractAddress?.[bond.chainId], marketingCampaign: bond.marketingCampaign, bondChain: bond.chainId, 
                     //@ts-ignore
                     payoutToken: bond.underlyingEarnToken || bond.earnToken, billType: bond.billType, tag: bond.tags?.[0], bondSoldOut: true, percentageAvailable: 100, remainingTokensString: `${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`, vestingTermString: "-", projectURL: bond.projectLink, twitterURL: bond.twitter, shortDescription: bond.shortDescription, soldoutBondsCount: bonds.length > 1 ? bonds.length : undefined, isOpen: isOpen }, `${bond.contractAddress[bond.chainId]}-${bond.chainId}`) }), bonds.length > 1 &&
                 isOpen &&
                 bonds
                     .sort((a, b) => (b?.initTime?.[b.chainId] ?? 0) - (a?.initTime?.[a.chainId] ?? 0))
                     .map((bond) => {
-                    return (jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
-                            position: 'relative',
-                            overflow: 'hidden',
-                            width: '100%',
-                            marginTop: '0px',
-                        }, className: "bonds-card-container", children: jsxs(Flex, { sx: { cursor: 'pointer' }, onClick: () => setIsOpen(!isOpen), children: [jsx(Flex, { sx: { alignItems: 'center', pb: '10px' }, children: jsx(TurnArrow, { direction: 'up' }) }), jsx(BondRow, { bondAddress: bond.contractAddress?.[bond.chainId], marketingCampaign: bond.marketingCampaign, bondChain: bond.chainId, payoutToken: bond.earnToken, billType: bond.billType, tag: bond.tags?.[0], bondSoldOut: true, percentageAvailable: 100, remainingTokensString: `${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`, vestingTermString: "-", projectURL: bond.projectLink, twitterURL: bond.twitter, shortDescription: bond.shortDescription })] }) }, `${bond.contractAddress[bond.chainId]}-${bond.chainId}`));
+                    return (jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, className: clsx('bonds-card-container ape:relative ape:overflow-hidden ape:w-full ape:mt-0', useCardsView && 'ape:flex ape:flex-wrap'), children: jsxs(Flex, { className: "ape:cursor-pointer", onClick: () => setIsOpen(!isOpen), children: [jsx(Flex, { className: "ape:items-center ape:pb-[10px]", children: jsx(TurnArrow, { direction: 'up' }) }), jsx(BondRow, { bondAddress: bond.contractAddress?.[bond.chainId], marketingCampaign: bond.marketingCampaign, bondChain: bond.chainId, payoutToken: bond.earnToken, billType: bond.billType, tag: bond.tags?.[0], bondSoldOut: true, percentageAvailable: 100, remainingTokensString: `${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`, vestingTermString: "-", projectURL: bond.projectLink, twitterURL: bond.twitter, shortDescription: bond.shortDescription })] }) }, `${bond.contractAddress[bond.chainId]}-${bond.chainId}`));
                 })] }));
 };