@ape.swap/bonds-sdk 1.0.2-seedify → 1.0.3-seedify

package/dist/main.js

@@ -3,7 +3,6 @@ import React__default, { forwardRef, useContext, useState, useEffect, useCallbac
 import { useChainId, useSwitchChain, useWriteContract, useWaitForTransactionReceipt, useAccount, useSendTransaction } from 'wagmi';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
-import { parseEther } from 'viem';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -5341,7 +5340,7 @@ var cjs = deepmerge_1;
 var deepmerge$1 = /*@__PURE__*/getDefaultExportFromCjs(cjs);
 
 var name = "@emotion/react";
-var version$i = "11.13.3";
+var version$j = "11.13.3";
 var main = "dist/emotion-react.cjs.js";
 var module = "dist/emotion-react.esm.js";
 var exports = {
@@ -5656,7 +5655,7 @@ var preconstruct = {
 };
 var packageInfo = {
 	name: name,
-	version: version$i,
+	version: version$j,
 	main: main,
 	module: module,
 	exports: exports,
@@ -25175,9 +25174,9 @@ function useBondNFTData(id, billNftAddress, chainId) {
 }
 const getBondNFTData = (id, billNftAddress, chainId) => __awaiter$9(void 0, void 0, void 0, function* () {
     try {
-        // console.log('Bond NFT Data: Started')
+        console.log('Bond NFT Data: Started');
         const billNFTData = yield getBillNftBatchData([id], billNftAddress, chainId);
-        // console.log('Bond NFT Data: Finished')
+        console.log('Bond NFT Data: Finished');
         return billNFTData[0];
     }
     catch (e) {
@@ -45990,7 +45989,7 @@ bn.exports;
 var bnExports = bn.exports;
 var BN$1 = /*@__PURE__*/getDefaultExportFromCjs(bnExports);
 
-const version$h = "logger/5.7.0";
+const version$i = "logger/5.7.0";
 
 let _permanentCensorErrors = false;
 let _censorErrors = false;
@@ -46305,7 +46304,7 @@ class Logger {
     }
     static globalLogger() {
         if (!_globalLogger) {
-            _globalLogger = new Logger(version$h);
+            _globalLogger = new Logger(version$i);
         }
         return _globalLogger;
     }
@@ -46341,9 +46340,9 @@ class Logger {
 Logger.errors = ErrorCode;
 Logger.levels = LogLevel;
 
-const version$g = "bytes/5.7.0";
+const version$h = "bytes/5.7.0";
 
-const logger$o = new Logger(version$g);
+const logger$o = new Logger(version$h);
 ///////////////////////////////
 function isHexable(value) {
     return !!(value.toHexString);
@@ -46741,10 +46740,10 @@ function splitSignature(signature) {
     return result;
 }
 
-const version$f = "bignumber/5.7.0";
+const version$g = "bignumber/5.7.0";
 
 var BN = BN$1.BN;
-const logger$n = new Logger(version$f);
+const logger$n = new Logger(version$g);
 const _constructorGuard$3 = {};
 const MAX_SAFE = 0x1fffffffffffff;
 function isBigNumberish(value) {
@@ -47032,7 +47031,7 @@ function _base36To16(value) {
     return (new BN(value, 36)).toString(16);
 }
 
-const logger$m = new Logger(version$f);
+const logger$m = new Logger(version$g);
 const _constructorGuard$2 = {};
 const Zero$2 = BigNumber.from(0);
 const NegativeOne$2 = BigNumber.from(-1);
@@ -47386,7 +47385,7 @@ class FixedNumber {
 const ONE = FixedNumber.from(1);
 const BUMP = FixedNumber.from("0.5");
 
-const version$e = "properties/5.7.0";
+const version$f = "properties/5.7.0";
 
 var __awaiter$8 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -47397,7 +47396,7 @@ var __awaiter$8 = (undefined && undefined.__awaiter) || function (thisArg, _argu
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const logger$l = new Logger(version$e);
+const logger$l = new Logger(version$f);
 function defineReadOnly(object, name, value) {
     Object.defineProperty(object, name, {
         enumerable: true,
@@ -47511,9 +47510,9 @@ class Description {
     }
 }
 
-const version$d = "abi/5.7.0";
+const version$e = "abi/5.7.0";
 
-const logger$k = new Logger(version$d);
+const logger$k = new Logger(version$e);
 const _constructorGuard$1 = {};
 let ModifiersBytes = { calldata: true, memory: true, storage: true };
 let ModifiersNest = { calldata: true, memory: true };
@@ -48361,7 +48360,7 @@ function splitNesting(value) {
     return result;
 }
 
-const logger$j = new Logger(version$d);
+const logger$j = new Logger(version$e);
 function checkResultErrors(result) {
     // Find the first error (if any)
     const errors = [];
@@ -49164,9 +49163,9 @@ function keccak256(data) {
     return '0x' + sha3.keccak_256(arrayify(data));
 }
 
-const version$c = "rlp/5.7.0";
+const version$d = "rlp/5.7.0";
 
-const logger$i = new Logger(version$c);
+const logger$i = new Logger(version$d);
 function arrayifyInteger(value) {
     const result = [];
     while (value) {
@@ -49281,9 +49280,9 @@ function decode$2(data) {
     return decoded.result;
 }
 
-const version$b = "address/5.7.0";
+const version$c = "address/5.7.0";
 
-const logger$h = new Logger(version$b);
+const logger$h = new Logger(version$c);
 function getChecksumAddress(address) {
     if (!isHexString(address, 20)) {
         logger$h.throwArgumentError("invalid address", "address", address);
@@ -49423,7 +49422,7 @@ class AnonymousCoder extends Coder {
     }
 }
 
-const logger$g = new Logger(version$d);
+const logger$g = new Logger(version$e);
 function pack(writer, coders, values) {
     let arrayValues = null;
     if (Array.isArray(values)) {
@@ -49756,9 +49755,9 @@ class NumberCoder extends Coder {
     }
 }
 
-const version$a = "strings/5.7.0";
+const version$b = "strings/5.7.0";
 
-const logger$f = new Logger(version$a);
+const logger$f = new Logger(version$b);
 ///////////////////////////////
 var UnicodeNormalizationForm;
 (function (UnicodeNormalizationForm) {
@@ -50041,7 +50040,7 @@ class TupleCoder extends Coder {
     }
 }
 
-const logger$e = new Logger(version$d);
+const logger$e = new Logger(version$e);
 const paramTypeBytes = new RegExp(/^bytes([0-9]*)$/);
 const paramTypeNumber = new RegExp(/^(u?int)([0-9]*)$/);
 class AbiCoder {
@@ -50124,7 +50123,7 @@ function id(text) {
     return keccak256(toUtf8Bytes(text));
 }
 
-const version$9 = "hash/5.7.0";
+const version$a = "hash/5.7.0";
 
 function decode$1(textData) {
     textData = atob(textData);
@@ -50560,7 +50559,7 @@ function consume_emoji_reversed(cps, eaten) {
     return emoji;
 }
 
-const logger$d = new Logger(version$9);
+const logger$d = new Logger(version$a);
 const Zeros = new Uint8Array(32);
 Zeros.fill(0);
 function checkComponent(comp) {
@@ -50625,7 +50624,7 @@ var __awaiter$7 = (undefined && undefined.__awaiter) || function (thisArg, _argu
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const logger$c = new Logger(version$9);
+const logger$c = new Logger(version$a);
 const padding = new Uint8Array(32);
 padding.fill(0);
 const NegativeOne = BigNumber.from(-1);
@@ -51049,7 +51048,7 @@ class TypedDataEncoder {
     }
 }
 
-const logger$b = new Logger(version$d);
+const logger$b = new Logger(version$e);
 class LogDescription extends Description {
 }
 class TransactionDescription extends Description {
@@ -51795,7 +51794,7 @@ var multicallV2Abi = [
 	}
 ];
 
-const version$8 = "abstract-provider/5.7.0";
+const version$9 = "abstract-provider/5.7.0";
 
 var __awaiter$6 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -51806,7 +51805,7 @@ var __awaiter$6 = (undefined && undefined.__awaiter) || function (thisArg, _argu
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const logger$a = new Logger(version$8);
+const logger$a = new Logger(version$9);
 //export type CallTransactionable = {
 //    call(transaction: TransactionRequest): Promise<TransactionResponse>;
 //};
@@ -51857,7 +51856,7 @@ class Provider {
     }
 }
 
-const version$7 = "abstract-signer/5.7.0";
+const version$8 = "abstract-signer/5.7.0";
 
 var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -51868,7 +51867,7 @@ var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _argu
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const logger$9 = new Logger(version$7);
+const logger$9 = new Logger(version$8);
 const allowedTransactionKeys$1 = [
     "accessList", "ccipReadEnabled", "chainId", "customData", "data", "from", "gasLimit", "gasPrice", "maxFeePerGas", "maxPriorityFeePerGas", "nonce", "to", "type", "value"
 ];
@@ -55858,9 +55857,9 @@ elliptic.eddsa = /*RicMoo:ethers:require(./elliptic/eddsa)*/(null);
 
 var EC$1 = elliptic_1.ec;
 
-const version$6 = "signing-key/5.7.0";
+const version$7 = "signing-key/5.7.0";
 
-const logger$8 = new Logger(version$6);
+const logger$8 = new Logger(version$7);
 let _curve = null;
 function getCurve() {
     if (!_curve) {
@@ -55929,9 +55928,9 @@ function computePublicKey(key, compressed) {
     return logger$8.throwArgumentError("invalid public or private key", "key", "[REDACTED]");
 }
 
-const version$5 = "transactions/5.7.0";
+const version$6 = "transactions/5.7.0";
 
-const logger$7 = new Logger(version$5);
+const logger$7 = new Logger(version$6);
 var TransactionTypes;
 (function (TransactionTypes) {
     TransactionTypes[TransactionTypes["legacy"] = 0] = "legacy";
@@ -56199,7 +56198,7 @@ function parse(rawTransaction) {
     });
 }
 
-const version$4 = "contracts/5.7.0";
+const version$5 = "contracts/5.7.0";
 
 var __awaiter$4 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -56210,7 +56209,7 @@ var __awaiter$4 = (undefined && undefined.__awaiter) || function (thisArg, _argu
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const logger$6 = new Logger(version$4);
+const logger$6 = new Logger(version$5);
 function resolveName(resolver, nameOrPromise) {
     return __awaiter$4(this, void 0, void 0, function* () {
         const name = yield nameOrPromise;
@@ -57201,9 +57200,9 @@ function sha256(data) {
     return "0x" + (hash.sha256().update(arrayify(data)).digest("hex"));
 }
 
-const version$3 = "networks/5.7.1";
+const version$4 = "networks/5.7.1";
 
-const logger$5 = new Logger(version$3);
+const logger$5 = new Logger(version$4);
 function isRenetworkable(value) {
     return (value && typeof (value.renetwork) === "function");
 }
@@ -57447,7 +57446,7 @@ function getNetwork(network) {
     };
 }
 
-const version$2 = "web/5.7.1";
+const version$3 = "web/5.7.1";
 
 var __awaiter$3 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -57524,7 +57523,7 @@ var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _argu
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const logger$4 = new Logger(version$2);
+const logger$4 = new Logger(version$3);
 function staller(duration) {
     return new Promise((resolve) => {
         setTimeout(resolve, duration);
@@ -58094,9 +58093,9 @@ var bech32 = {
 
 var bech32$1 = /*@__PURE__*/getDefaultExportFromCjs(bech32);
 
-const version$1 = "providers/5.7.2";
+const version$2 = "providers/5.7.2";
 
-const logger$3 = new Logger(version$1);
+const logger$3 = new Logger(version$2);
 class Formatter {
     constructor() {
         this.formats = this.getDefaultFormats();
@@ -58517,7 +58516,7 @@ var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _argu
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const logger$2 = new Logger(version$1);
+const logger$2 = new Logger(version$2);
 const MAX_CCIP_REDIRECTS = 10;
 //////////////////////////////
 // Event Serializeing
@@ -60506,7 +60505,7 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const logger$1 = new Logger(version$1);
+const logger$1 = new Logger(version$2);
 const errorGas = ["call", "estimateGas"];
 function spelunk(value, requireData) {
     if (value == null) {
@@ -61158,9 +61157,9 @@ class JsonRpcProvider extends BaseProvider {
     }
 }
 
-const version = "units/5.7.0";
+const version$1 = "units/5.7.0";
 
-const logger = new Logger(version);
+const logger = new Logger(version$1);
 const names = [
     "wei",
     "kwei",
@@ -61170,7 +61169,7 @@ const names = [
     "finney",
     "ether",
 ];
-function parseUnits(value, unitName) {
+function parseUnits$1(value, unitName) {
     if (typeof (value) !== "string") {
         logger.throwArgumentError("value must be a string", "value", value);
     }
@@ -64302,7 +64301,7 @@ function useTokenPrices() {
 }
 const getTokenPrices = () => __awaiter$9(void 0, void 0, void 0, function* () {
     try {
-        // console.log('Token Prices: Started')
+        console.log('Token Prices: Started');
         const response = yield axios.get('https://raw.githubusercontent.com/ApeSwapFinance/apeswap-lists/staging/config/tokens.json');
         const tokenList = response.data;
         const prices = [];
@@ -64314,7 +64313,7 @@ const getTokenPrices = () => __awaiter$9(void 0, void 0, void 0, function* () {
         // Keep only successfully fulfilled promises and discard the rest
         const successfulPromises = all === null || all === void 0 ? void 0 : all.filter((result) => result.status === 'fulfilled');
         const successfulPrices = successfulPromises.map((result) => result.value);
-        // console.log('Token Prices: Finished')
+        console.log('Token Prices: Finished');
         return successfulPrices.flat();
     }
     catch (_a) {
@@ -64571,7 +64570,7 @@ supportedChainId, lpTokens) {
         if (lpTokens && protocol == types.Protocols.Algebra) {
             protocol = types.Protocols.Gamma;
         }
-        if (lpTokens && protocol == types.Protocols.V3) {
+        if (lpTokens && protocol == types.Protocols.V3 && supportedChainId !== types.ChainId.ARBITRUM) {
             protocol = types.Protocols.Steer;
         }
         if ([types.ChainId.LINEA, types.ChainId.LIGHTLINK, types.ChainId.IOTA, types.ChainId.BASE, types.ChainId.ARBITRUM].includes(supportedChainId) &&
@@ -64670,7 +64669,7 @@ function useBondsList() {
 }
 const getBondsList = () => __awaiter$9(void 0, void 0, void 0, function* () {
     try {
-        // console.log('Bond List: Fetching')
+        console.log('fetch bond list');
         const response = yield axios.get('https://raw.githubusercontent.com/ApeSwapFinance/apeswap-lists/staging/config/bills.json');
         return response.data;
     }
@@ -64788,9 +64787,9 @@ function useUserBonds() {
 }
 const getUserBonds = (account, bondList) => __awaiter$9(void 0, void 0, void 0, function* () {
     try {
-        // console.log('User Bonds: Started')
+        console.log('User Bonds: Started');
         const results = yield Promise.all(MAINNET_CHAINS.map((chain) => fetchUserOwnedBillsDataAsync(chain, account, bondList)));
-        // console.log('User Bonds: Finished')
+        console.log('User Bonds: Finished');
         return results.flat().flatMap((results) => results.userOwnedBills);
     }
     catch (_a) {
@@ -64880,141 +64879,259 @@ const YourBonds = () => {
     return (jsx$2(Fragment$1, { children: jsxs(Flex$1, { className: "yourbonds table-container", children: [jsx$2(Flex$1, { className: "bondrow-header filters", children: jsx$2(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }) }), jsxs(Flex$1, { className: "yourbonds header-container", children: [jsx$2(Flex$1, { className: "yourbonds column-tokens", children: jsx$2(Flex$1, { className: "yourbonds column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: jsx$2(Input, { value: inputValue, onChange: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs(Flex$1, { className: "yourbonds column-bondinfo", children: [jsxs(Flex$1, { className: "yourbonds header-claimable", children: ["CLAIMABLE", jsx$2(Flex$1, { className: "yourbonds header-icon", onClick: () => handleSort('claimable'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs(Flex$1, { className: "yourbonds header-pending", children: ["PENDING", jsx$2(Flex$1, { className: "yourbonds header-icon", onClick: () => handleSort('pending'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs(Flex$1, { className: "yourbonds header-terms", children: ["TERMS", jsx$2(Flex$1, { className: "yourbonds header-icon", onClick: () => handleSort('terms'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "yourbonds header-claimall" })] })] }), !account ? (jsx$2(DisconnectedPlaceholder, {})) : filteredBonds && (filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.length) > 0 ? (filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.map((bill) => jsx$2(UserBondRow, { bill: bill }, bill.id))) : (jsx$2(Flex$1, { className: "yourbonds-spinner", children: jsx$2(Spinner, { size: 100 }) }))] }) }));
 };
 
-// This basically returns the 2 tags with the higher active bond count
-const useTopTags = (initialBondList) => {
-    const bonds = initialBondList;
-    const countTagsInBonds = (bonds) => {
-        const tagCount = {};
-        bonds === null || bonds === void 0 ? void 0 : bonds.forEach((bond) => {
-            var _a;
-            if (bond.soldOut)
-                return;
-            (_a = bond.tags) === null || _a === void 0 ? void 0 : _a.forEach((tag) => {
-                if (tag in tagCount) {
-                    tagCount[tag] += 1;
-                }
-                else {
-                    tagCount[tag] = 1;
-                }
-            });
-        });
-        return tagCount;
-    };
-    const activeBonds = bonds === null || bonds === void 0 ? void 0 : bonds.filter((bond) => !bond.soldOut);
-    const countedTags = countTagsInBonds(activeBonds);
-    const sortedTagsArray = Object.entries(countedTags).sort((a, b) => b[1] - a[1]);
-    return sortedTagsArray.slice(0, 2).map((tagCountArray) => tagCountArray[0]);
+const BondRowHeader = ({ searchQuery, setSearchQuery, setChainFilterOption, chainFilterOption, filterOptions, filterOption, setFilterOption, onSort, }) => {
+    return (jsxs(Flex$1, { className: "bondrow-header", children: [jsx$2(Flex$1, { className: "bondrow-header filters", children: jsx$2(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setSearchQuery('') }) }), jsxs(Flex$1, { className: "bondrow-header rows", children: [jsxs(Flex$1, { className: "column column-tokens header", children: [jsx$2(Flex$1, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: jsx$2(Input, { value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }), jsx$2(Flex$1, { className: "column column-tokenicons header" })] }), jsxs(Flex$1, { className: "column column-bondinfo header", children: [jsxs(Flex$1, { className: "column column-discount header", children: [jsx$2(Flex$1, { className: "column tooltip", children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)", children: ["DISCOUNT", jsx$2(Flex$1, { className: "column header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), jsx$2(Flex$1, { className: "column header-icon", onClick: () => onSort('discount'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs(Flex$1, { className: "column column-arr header", children: [jsx$2(Flex$1, { className: "column tooltip", children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)", children: ["ARR", jsx$2(Flex$1, { className: "column header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), jsx$2(Flex$1, { className: "column header-icon", onClick: () => onSort('arr'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs(Flex$1, { className: "column column-terms header", children: [jsx$2(Flex$1, { className: "column tooltip", children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)", children: ["TERMS", jsx$2(Flex$1, { className: "column header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), jsx$2(Flex$1, { className: "column header-icon", onClick: () => onSort('terms'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs(Flex$1, { className: "column column-tokensremaining header", children: [jsx$2(Flex$1, { className: "column tooltip", children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)", children: ["TOKENS REMAINING", jsx$2(Flex$1, { className: "column header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), jsx$2(Flex$1, { className: "column header-icon", onClick: () => onSort('tokensRemaining'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "column column-hotbond header" })] })] })] }));
 };
 
-const isBondSoldOut = (bill) => {
-    var _a;
-    const { tokensRemaining, discount, payoutTokenPrice, billAddress } = bill;
-    if (bill.soldOut)
-        return true;
-    if (bill.inactive)
-        return true;
-    if (!tokensRemaining)
-        return false;
-    const thresholdToHide = new BigNumber$1(100).div(payoutTokenPrice !== null && payoutTokenPrice !== void 0 ? payoutTokenPrice : 0);
-    if (discount && discount > 50) {
-        // If discount is over 50% it will be hidden
-        // console.log('Soldout contract:', billAddress)
-        return true;
-    }
-    if (((_a = new BigNumber$1(tokensRemaining)) === null || _a === void 0 ? void 0 : _a.lte(thresholdToHide)) || discount === 100) {
-        // If there's less than 100 usd bond will be hidden
-        // console.log('Soldout contract: ', billAddress)
-        return true;
-    }
-    else
-        return false;
+const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
+    return (jsxs(Flex, { className: "chaintitle", sx: {
+            pt,
+            pb: '10px',
+            color: 'textDisabledButton',
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase',
+            display: hideTitles ? 'none' : 'flex',
+            width: '200px',
+        }, children: [NETWORK_LABEL[chain], " Bonds", jsx$2(Flex, { sx: { ml: '7px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) })] }));
 };
-const sortBonds = (sortConfig, bonds) => {
-    const bondsToSort = bonds !== null && bonds !== void 0 ? bonds : [];
-    if (!sortConfig) {
-        return bondsToSort;
-    }
-    return [...bondsToSort].sort((a, b) => {
-        let aValue, bValue;
-        if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === 'arr') {
-            aValue = calculateARR(a);
-            bValue = calculateARR(b);
+
+const ProgressBar = ({ value, color = 'text' }) => {
+    return (jsx$2(Flex$1, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' }, children: jsx$2(Box$1, { className: "progressbar-background", children: jsx$2(Box$1, { className: "progressbar-completed", style: {
+                    width: `${value <= 3 ? 3 : value}%`,
+                } }) }) }));
+};
+
+const styles$4 = {
+    listCardContainer: {
+        borderRadius: 0,
+        flexDirection: ['column', 'column', 'column', 'row'],
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        background: 'white2',
+        borderBottom: '1px solid rgba(226, 226, 226, .2)',
+        padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],
+        margin: '0 10px 0 10px',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+        width: '100%',
+        height: ['unset', 'unset', 'unset', '86px'],
+    },
+    listViewContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+    },
+    titleContainer: {
+        width: '100%',
+        justifyContent: 'space-between',
+        my: '5px',
+    },
+    infoContentMobile: {
+        display: ['flex', 'flex', 'flex', 'none'],
+        alignItems: 'center',
+    },
+    tokensContainer: {
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+    },
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    },
+    valueText: {
+        fontSize: ['12px', '12px', '12px', '14px'],
+        color: 'primaryBright',
+        lineHeight: '16px',
+        fontWeight: 700,
+        mr: '5px',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    secondaryText: {
+        fontSize: '12px',
+        color: 'gray',
+        lineHeight: '16px',
+        fontWeight: 400,
+    },
+    cardContentContainer: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    animationDiv: {
+        position: 'relative',
+        width: '100%',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+    },
+    expandedWrapper: {
+        background: 'white3',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '15px 10px',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    },
+};
+
+const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
+    return (jsxs(Flex, { sx: style, children: [jsx$2(Flex, { sx: { alignItems: 'center' }, children: jsx$2(Text, { sx: styles$4.titleText, children: `${title}` }) }), showTooltip ? (jsx$2(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx$2(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx$2(Skeleton, { sx: styles$4.skeleton }) }) }) })) : (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx$2(Skeleton, { sx: styles$4.skeleton }) }))] }));
+};
+var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
+
+const styles$3 = {
+    infoRow: {
+        justifyContent: 'space-between',
+        width: '100%',
+        marginBottom: '5px',
+    },
+    linkRow: {
+        width: '100%',
+        marginTop: '5px',
+        justifyContent: 'flex-end',
+        '& svg': { width: '11px' },
+    },
+    titleText: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 500,
+    },
+    contentText: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 700,
+    },
+    iconButton: {
+        background: 'white3',
+        textDecoration: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'fit-content',
+        height: '30px',
+        padding: '2px 5px',
+        borderRadius: '8px',
+        margin: '0 5px 5px 0',
+        '&:hover': {
+            cursor: 'pointer',
+        },
+    },
+    link: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        display: 'flex',
+        textDecoration: 'none',
+        '&: hover': { textDecoration: 'underline' },
+    },
+};
+
+const ButtonsRow = ({ projectLink, twitter, bubble, audit, }) => {
+    const bubbleURL = `https://app.bubblemaps.io/bsc/token/${bubble}`;
+    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx$2(Flex, { sx: styles$3.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx$2(Svg, { icon: "URL", width: 18 }) }), jsx$2(Flex, { sx: styles$3.iconButton, as: Link, href: twitter, target: "_blank", children: jsx$2(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && (jsx$2(Flex, { sx: styles$3.iconButton, as: Link, href: bubbleURL, target: "_blank", children: jsx$2(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$3.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank", children: [jsx$2(Svg, { icon: "audit", width: 18, color: "text" }), jsx$2(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
+};
+
+const Tooltip = ({ valueTitle, valueContent, value2Title, value2Content, tokenContract, secondURL, secondURLTitle, projectLink, twitter, audit, thirdURL, thirdURLTitle, chain, }) => {
+    const explorerLink = BLOCK_EXPLORER[chain];
+    const tokenLink = `${explorerLink}/address/${tokenContract}`;
+    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [projectLink && twitter && (jsx$2(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: tokenContract, audit: audit })), valueTitle && (jsxs(Flex, { sx: styles$3.infoRow, children: [jsxs(Text, { sx: styles$3.titleText, children: [valueTitle, ": "] }), jsx$2(Text, { sx: styles$3.contentText, children: valueContent })] })), value2Title && (jsxs(Flex, { sx: styles$3.infoRow, children: [jsxs(Text, { sx: styles$3.titleText, children: [value2Title, ": "] }), jsx$2(Text, { sx: styles$3.contentText, children: value2Content })] })), jsx$2(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx$2(Flex, { sx: styles$3.linkRow, children: jsxs(Link, { href: tokenLink, sx: styles$3.link, target: "_blank", children: ['View Token Contract', jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] }) }), secondURL && (jsx$2(Flex, { sx: styles$3.linkRow, children: jsxs(Link, { href: secondURL, sx: styles$3.link, target: "_blank", children: [secondURLTitle, jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] }) })), thirdURL && (jsx$2(Flex, { sx: styles$3.linkRow, children: jsx$2(Link, { href: thirdURL, sx: styles$3.link, target: "_blank", children: thirdURLTitle }) }))] }) })] }));
+};
+
+/**
+ * Returns a USD dollar or equivalent denominated numerical value formatted
+ * in human readable string for use in template.
+ *
+ * Adheres to guidelines for prices and other numbers defined here:
+ * https://www.notion.so/uniswaplabs/Number-standards-fbb9f533f10e4e22820722c2f66d23c0
+ * @param num numerical value denominated in USD or USD equivalent
+ * @param isPrice whether the amount represents a price or not
+ * @param lessPreciseStablecoinValues whether or not we should show less precise values for
+ * stablecoins (around 1$ in value always) for the sake of readability
+ * @param digits number of digits after the decimal for non-price amounts
+ * @param round whether or not to round up non-price amounts
+ */
+const formatDollar = ({ num, isPrice = false, lessPreciseStablecoinValues = false, digits = 2, round = true, }) => {
+    // For USD dollar denominated prices.
+    if (isPrice) {
+        if (num === 0)
+            return '$0.00';
+        if (!num)
+            return '-';
+        if (num < 0.000001) {
+            return `$${num.toExponential(2)}`;
         }
-        else if (sortConfig.key === 'tokensRemaining') {
-            aValue = remainingPercentage(a);
-            bValue = remainingPercentage(b);
+        if ((num >= 0.000001 && num < 0.1) || num > 1000000) {
+            return `$${Number(num).toPrecision(3)}`;
         }
-        else if (sortConfig.key === 'terms') {
-            aValue = vestingTime(a.vestingTerm).days;
-            bValue = vestingTime(b.vestingTerm).days;
+        // We only show 2 decimal places in explore table for stablecoin value ranges
+        // for the sake of readability (as opposed to the usual 3 elsewhere).
+        if (num >= 0.1 && num < (lessPreciseStablecoinValues ? 0.9995 : 1.05)) {
+            return `$${num.toFixed(3)}`;
         }
-        else {
-            aValue = a[sortConfig.key];
-            bValue = b[sortConfig.key];
+        return `$${Number(num.toFixed(2)).toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
+    }
+    // For volume dollar amounts, like market cap, total value locked, etc.
+    else {
+        if (num === 0)
+            return '$0.00';
+        if (!num)
+            return '-';
+        if (num < 0.000001) {
+            return '$<0.000001';
         }
-        if (aValue < bValue) {
-            return sortConfig.direction === 'asc' ? -1 : 1;
+        if (num >= 0.000001 && num < 0.1) {
+            return `$${Number(num).toPrecision(3)}`;
         }
-        if (aValue > bValue) {
-            return sortConfig.direction === 'asc' ? 1 : -1;
+        if (num >= 0.1 && num < 1.05) {
+            return `$${num.toFixed(3)}`;
         }
-        return 0;
-    });
-};
-const calculateARR = (bond) => {
-    var _a;
-    const discount = (_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0;
-    const vestingDays = vestingTime(bond.vestingTerm).days;
-    return parseFloat(((discount * 365) / vestingDays).toFixed(2));
-};
-const vestingTime = (vestingTerm) => {
-    return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
-};
-const remainingPercentage = (bond) => {
-    var _a, _b, _c, _d;
-    const totalMaxPayout = new BigNumber$1((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber$1(10).pow((_c = (_b = bond.earnToken.decimals) === null || _b === void 0 ? void 0 : _b[bond.chainId]) !== null && _c !== void 0 ? _c : 18));
-    const remainingTokens = new BigNumber$1((_d = bond.tokensRemaining) !== null && _d !== void 0 ? _d : '0');
-    return remainingTokens.div(totalMaxPayout).times(100).toNumber();
-};
-
-function useBondsData() {
-    return useQuery({
-        queryKey: [QUERY_KEYS.BONDS_DATA],
-        queryFn: getBondsData,
-        refetchInterval: 30000, // i.e. 30 sec
-        refetchOnWindowFocus: false,
-        retry: 1,
-        initialData: [],
-    });
-}
-const getBondsData = () => __awaiter$9(void 0, void 0, void 0, function* () {
-    try {
-        const response = yield axios.get('https://realtime-api.ape.bond/bonds');
-        return response.data.bonds;
+        return numbro(num)
+            .formatCurrency({
+            average: round,
+            mantissa: num > 1000 ? 2 : digits,
+            abbreviations: {
+                million: 'M',
+                billion: 'B',
+            },
+        })
+            .toUpperCase();
     }
-    catch (_a) {
-        return [];
+};
+const formatValue = ({ num, digits = 2, round = true }) => {
+    if (num === 0)
+        return '0.00';
+    if (!num)
+        return '-';
+    if (num < 0.000001) {
+        return '<0.000001';
     }
-});
-
-function useHotBonds() {
-    return useQuery({
-        queryKey: [QUERY_KEYS.HOT_BONDS],
-        queryFn: getHotBonds,
-        refetchOnWindowFocus: false,
-        retry: 1,
-        initialData: [],
-    });
-}
-const getHotBonds = () => __awaiter$9(void 0, void 0, void 0, function* () {
-    try {
-        const response = yield axios.get('https://apeswap-strapi.herokuapp.com/hot-bonds');
-        return response.data.map((bond) => bond.BondAddress.toLowerCase());
+    if (num >= 0.000001 && num < 0.1) {
+        return `${Number(num).toPrecision(3)}`;
     }
-    catch (_a) {
-        return [];
+    if (num >= 0.1 && num < 1.05) {
+        return `${num.toFixed(3)}`;
     }
-});
+    return numbro(num)
+        .format({
+        average: round,
+        mantissa: num > 1000 ? 2 : digits,
+        abbreviations: {
+            million: 'M',
+            billion: 'B',
+        },
+    })
+        .toUpperCase();
+};
 
 function adjustDecimals(numStr) {
     const parts = numStr.split('.');
@@ -65033,9 +65150,9 @@ function adjustDecimals(numStr) {
 const convertToTokenValue = (numberString, decimals) => {
     if (isNaN(parseFloat(numberString))) {
         console.error('Error: numberString to parse is not a number');
-        return parseUnits('0', decimals);
+        return parseUnits$1('0', decimals);
     }
-    const tokenValue = parseUnits(adjustDecimals(numberString), decimals);
+    const tokenValue = parseUnits$1(adjustDecimals(numberString), decimals);
     return tokenValue;
 };
 
@@ -65091,7 +65208,7 @@ const getPremiumColor = (bond, inputValue) => {
     return parseFloat(getPremium) < 0 ? 'premium-negative' : 'premium-positive';
 };
 
-const styles$4 = {
+const styles$2 = {
     toPanelContainer: {
         position: 'relative',
         width: '100%',
@@ -65922,6 +66039,170 @@ const useApproval = (amount, currency, spender, account, chainId) => {
     return [approvalState !== null && approvalState !== void 0 ? approvalState : ApprovalState.NOT_APPROVED, handleApprove];
 };
 
+const version = '2.21.17';
+
+let errorConfig = {
+    getDocsUrl: ({ docsBaseUrl, docsPath = '', docsSlug, }) => docsPath
+        ? `${docsBaseUrl ?? 'https://viem.sh'}${docsPath}${docsSlug ? `#${docsSlug}` : ''}`
+        : undefined,
+    version,
+};
+class BaseError extends Error {
+    constructor(shortMessage, args = {}) {
+        const details = (() => {
+            if (args.cause instanceof BaseError)
+                return args.cause.details;
+            if (args.cause?.message)
+                return args.cause.message;
+            return args.details;
+        })();
+        const docsPath = (() => {
+            if (args.cause instanceof BaseError)
+                return args.cause.docsPath || args.docsPath;
+            return args.docsPath;
+        })();
+        const docsUrl = errorConfig.getDocsUrl?.({ ...args, docsPath });
+        const message = [
+            shortMessage || 'An error occurred.',
+            '',
+            ...(args.metaMessages ? [...args.metaMessages, ''] : []),
+            ...(docsUrl ? [`Docs: ${docsUrl}`] : []),
+            ...(details ? [`Details: ${details}`] : []),
+            ...([`Version: ${errorConfig.version}`] ),
+        ].join('\n');
+        super(message, args.cause ? { cause: args.cause } : undefined);
+        Object.defineProperty(this, "details", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "docsPath", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "metaMessages", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "shortMessage", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'BaseError'
+        });
+        this.details = details;
+        this.docsPath = docsPath;
+        this.metaMessages = args.metaMessages;
+        this.name = args.name ?? this.name;
+        this.shortMessage = shortMessage;
+        this.version = version;
+    }
+    walk(fn) {
+        return walk(this, fn);
+    }
+}
+function walk(err, fn) {
+    if (fn?.(err))
+        return err;
+    if (err && typeof err === 'object' && 'cause' in err)
+        return walk(err.cause, fn);
+    return fn ? null : err;
+}
+
+const etherUnits = {
+    gwei: 9,
+    wei: 18,
+};
+
+class InvalidDecimalNumberError extends BaseError {
+    constructor({ value }) {
+        super(`Number \`${value}\` is not a valid decimal number.`, {
+            name: 'InvalidDecimalNumberError',
+        });
+    }
+}
+
+/**
+ * Multiplies a string representation of a number by a given exponent of base 10 (10exponent).
+ *
+ * - Docs: https://viem.sh/docs/utilities/parseUnits
+ *
+ * @example
+ * import { parseUnits } from 'viem'
+ *
+ * parseUnits('420', 9)
+ * // 420000000000n
+ */
+function parseUnits(value, decimals) {
+    if (!/^(-?)([0-9]*)\.?([0-9]*)$/.test(value))
+        throw new InvalidDecimalNumberError({ value });
+    let [integer, fraction = '0'] = value.split('.');
+    const negative = integer.startsWith('-');
+    if (negative)
+        integer = integer.slice(1);
+    // trim trailing zeros.
+    fraction = fraction.replace(/(0+)$/, '');
+    // round off if the fraction is larger than the number of decimals.
+    if (decimals === 0) {
+        if (Math.round(Number(`.${fraction}`)) === 1)
+            integer = `${BigInt(integer) + 1n}`;
+        fraction = '';
+    }
+    else if (fraction.length > decimals) {
+        const [left, unit, right] = [
+            fraction.slice(0, decimals - 1),
+            fraction.slice(decimals - 1, decimals),
+            fraction.slice(decimals),
+        ];
+        const rounded = Math.round(Number(`${unit}.${right}`));
+        if (rounded > 9)
+            fraction = `${BigInt(left) + BigInt(1)}0`.padStart(left.length + 1, '0');
+        else
+            fraction = `${left}${rounded}`;
+        if (fraction.length > decimals) {
+            fraction = fraction.slice(1);
+            integer = `${BigInt(integer) + 1n}`;
+        }
+        fraction = fraction.slice(0, decimals);
+    }
+    else {
+        fraction = fraction.padEnd(decimals, '0');
+    }
+    return BigInt(`${negative ? '-' : ''}${integer}${fraction}`);
+}
+
+/**
+ * Converts a string representation of ether to numerical wei.
+ *
+ * - Docs: https://viem.sh/docs/utilities/parseEther
+ *
+ * @example
+ * import { parseEther } from 'viem'
+ *
+ * parseEther('420')
+ * // 420000000000000000000n
+ */
+function parseEther(ether, unit = 'wei') {
+    return parseUnits(ether, etherUnits[unit]);
+}
+
 const useTokenFromZapList = (tokenString, chainId, principalToken) => {
     var _a;
     if (tokenString === 'NATIVE')
@@ -66044,7 +66325,7 @@ const ZapModal = ({ onDismiss, outputToken, account, chainId }) => {
         setPendingTx(true);
         yield approveCallback().finally(() => setPendingTx(false));
     }), []);
-    return (jsxs(Modal, { children: [jsx$2(ModalHeader, { onDismiss: onDismiss, children: jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '30px' }, children: ["Zap ", jsx$2(Svg, { icon: "ZapIcon" })] }), jsx$2(Flex, { onClick: onOpenSlippageModal, sx: { mr: '15px' }, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', pt: '10px', gap: '10px' }, children: [jsx$2(Flex, { sx: { position: 'relative' }, children: jsx$2(Text, { children: "From:" }) }), jsx$2(Flex, { sx: { width: '100%', height: 'auto', justifyContent: 'space-between' }, children: jsx$2(TokenSelectorPanel, { typedValue: typedValue, setTypedValue: setTypedValue, selectedToken: inputToken, handleMaxBtn: handleMaxInput, handleCurrencySelect: handleCurrencySelect, chainId: chainId, enableZap: true, tokenBalance: inputTokenBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }) }), jsxs(Flex, { sx: { position: 'relative', mt: '10px' }, children: [jsx$2(Text, { children: "To:" }), jsx$2(Box$1, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsx$2(Svg, { icon: "ZapArrow" }) })] }), jsxs(Flex, { sx: styles$4.toPanelContainer, children: [jsxs(Flex, { sx: styles$4.cont, children: [jsx$2(NumericInput, { value: parseFloat(outputValue) === 0 ? '' : outputValue, onUserInput: () => null }), jsxs(Flex, { sx: styles$4.tokensContainer, children: [lodashExports.isArray(splited) && jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28 }), jsx$2(Text, { sx: styles$4.tokenSymbolText, children: outputToken === null || outputToken === void 0 ? void 0 : outputToken.symbol })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx$2(Flex, { sx: { alignItems: 'center', justifyContent: 'center' }, children: jsx$2(Text, { size: "12px", sx: { opacity: 0.8 }, children: outputTokenPrice &&
+    return (jsxs(Modal, { children: [jsx$2(ModalHeader, { onDismiss: onDismiss, children: jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '30px' }, children: ["Zap ", jsx$2(Svg, { icon: "ZapIcon" })] }), jsx$2(Flex, { onClick: onOpenSlippageModal, sx: { mr: '15px' }, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', pt: '10px', gap: '10px' }, children: [jsx$2(Flex, { sx: { position: 'relative' }, children: jsx$2(Text, { children: "From:" }) }), jsx$2(Flex, { sx: { width: '100%', height: 'auto', justifyContent: 'space-between' }, children: jsx$2(TokenSelectorPanel, { typedValue: typedValue, setTypedValue: setTypedValue, selectedToken: inputToken, handleMaxBtn: handleMaxInput, handleCurrencySelect: handleCurrencySelect, chainId: chainId, enableZap: true, tokenBalance: inputTokenBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }) }), jsxs(Flex, { sx: { position: 'relative', mt: '10px' }, children: [jsx$2(Text, { children: "To:" }), jsx$2(Box$1, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsx$2(Svg, { icon: "ZapArrow" }) })] }), jsxs(Flex, { sx: styles$2.toPanelContainer, children: [jsxs(Flex, { sx: styles$2.cont, children: [jsx$2(NumericInput, { value: parseFloat(outputValue) === 0 ? '' : outputValue, onUserInput: () => null }), jsxs(Flex, { sx: styles$2.tokensContainer, children: [lodashExports.isArray(splited) && jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28 }), jsx$2(Text, { sx: styles$2.tokenSymbolText, children: outputToken === null || outputToken === void 0 ? void 0 : outputToken.symbol })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx$2(Flex, { sx: { alignItems: 'center', justifyContent: 'center' }, children: jsx$2(Text, { size: "12px", sx: { opacity: 0.8 }, children: outputTokenPrice &&
                                                 (outputTokenPrice === null || outputTokenPrice === void 0 ? void 0 : outputTokenPrice.price) &&
                                                 outputValue &&
                                                 parseFloat(outputValue) !== 0 &&
@@ -71870,20 +72151,40 @@ const useSoulZapBondQuote = (typedValue, inputCurrency, bond, account) => {
     return [isLoading, response, estimateOutput];
 };
 
-const BondModal = ({ bondAddress, bondChain, accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = false, variant = 'standard', onDismiss, }) => {
+function useBondsData() {
+    return useQuery({
+        queryKey: [QUERY_KEYS.BONDS_DATA],
+        queryFn: getBondsData,
+        refetchInterval: 30000, // i.e. 30 sec
+        refetchOnWindowFocus: false,
+        retry: 1,
+        initialData: [],
+    });
+}
+const getBondsData = () => __awaiter$9(void 0, void 0, void 0, function* () {
+    try {
+        const response = yield axios.get('https://realtime-api.ape.bond/bonds');
+        return response.data.bonds;
+    }
+    catch (_a) {
+        return [];
+    }
+});
+
+const BondModal = ({ bondAddress, bondChain, accordionTitle = 'What are Bonds?', accordionBody = 'Body', accordionVisible = false, variant = 'alt', onDismiss, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     // Hooks
     const userChainId = useChainId();
     const { address: account } = useAccount();
     const { switchChain } = useSwitchChain();
-    const { writeContractAsync, isPending, isSuccess, submittedAt } = useWriteContract();
+    const { writeContractAsync } = useWriteContract();
     const { sendTransactionAsync } = useSendTransaction();
     const { data: bonds } = useBondsData();
     // State
     const [modalVariant, setModalVariant] = useState(variant);
     const [bondData, setBondData] = useState();
     const [toastMessage, setToastMessage] = useState(null);
-    const [buyTxHash, setBuyTxHash] = useState();
+    const [buyTxHash, setBuyTxHash] = useState(null);
     const [inputValue, setInputValue] = useState('');
     const [inputTokenString, setInputTokenString] = useState('NATIVE');
     // Data
@@ -71908,7 +72209,7 @@ const BondModal = ({ bondAddress, bondChain, accordionTitle = 'What are Bonds?',
     }, []);
     const handleClose = () => {
         if (typeof window !== 'undefined') {
-            window.history.pushState({}, '', `/bonds`);
+            window.history.pushState({}, '', `/`);
         }
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     };
@@ -72020,9 +72321,9 @@ const BondModal = ({ bondAddress, bondChain, accordionTitle = 'What are Bonds?',
         setBondData(bond);
         setInputTokenString((_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.lpToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond.chainId]) !== null && _c !== void 0 ? _c : 'NATIVE');
     }, [bondAddress]);
-    return (jsxs(Modal, { className: "modal", sx: { width: 'fit-content', maxWidth: '100%' }, children: [jsx$2(ModalHeader, { hideDivider: true, onDismiss: handleClose }), bondData && (jsx$2(Fragment$1, { children: modalVariant === 'standard' ? (
-                // <Flex className="modal-backdrop" onClick={handleClose}>
-                jsxs(Flex, { className: "modal-content", sx: { width: 'fit-content' }, children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev mode - Current view: \"", modalVariant, "\"", jsx$2(Text, { onClick: () => setModalVariant('alt'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), toastMessage && jsx$2(Flex, { className: "toast", children: toastMessage }), jsxs(Flex, { className: "modaltable-container", children: [jsxs(Flex, { className: "modaltable-container title-container", children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_g = bondData.showcaseTokenName) !== null && _g !== void 0 ? _g : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsx$2(Flex, { className: "title-container bondname", children: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), jsxs(Flex, { className: "title-container price-container", children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { className: "title-container tokentags", children: jsx$2(ListTag, { text: (_h = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _h === void 0 ? void 0 : _h[0], variant: ((_j = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _j === void 0 ? void 0 : _j[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }), jsx$2(Flex, { className: "slippage-cog", onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }), jsx$2(Flex, { className: "modaltable-container description-container", children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription }), jsxs(Flex, { className: "modaltable-container blocks-container", children: [jsxs(Flex, { className: `modal-block block-discount ${getDiscountColor(bondData === null || bondData === void 0 ? void 0 : bondData.discount)}`, children: [jsxs(Flex, { className: "block-header", children: ["Discount", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: `${(_k = bondData === null || bondData === void 0 ? void 0 : bondData.discount) === null || _k === void 0 ? void 0 : _k.toFixed(2)}%` })] }), jsxs(Flex, { className: "modal-block block-arr", children: [jsxs(Flex, { className: "block-header", children: ["ARR", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: `${((((_l = bondData === null || bondData === void 0 ? void 0 : bondData.discount) !== null && _l !== void 0 ? _l : 0) * 365) / vestingTime((_m = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _m !== void 0 ? _m : 0).days).toFixed(2)}%` })] }), jsxs(Flex, { className: "modal-block block-term", children: [jsxs(Flex, { className: "block-header", children: ["Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: vestingTime((_o = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _o !== void 0 ? _o : 0).days
+    return (
+    // <Modal className="modal">
+    jsx$2(Fragment$1, { children: bondData && (jsx$2(Fragment$1, { children: modalVariant === 'standard' ? (jsx$2(Flex, { className: "modal-backdrop", onClick: handleClose, children: jsxs(Flex, { className: "modal-content", onClick: (event) => event.stopPropagation(), children: [jsx$2(ModalHeader, { hideDivider: true, onDismiss: handleClose }), window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev mode - Current view: \"", modalVariant, "\"", jsx$2(Text, { onClick: () => setModalVariant('alt'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), toastMessage && jsx$2(Flex, { className: "toast", children: toastMessage }), jsxs(Flex, { className: "modaltable-container", children: [jsxs(Flex, { className: "modaltable-container title-container", children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_g = bondData.showcaseTokenName) !== null && _g !== void 0 ? _g : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsx$2(Flex, { className: "title-container bondname", children: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), jsxs(Flex, { className: "title-container price-container", children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { className: "title-container tokentags", children: jsx$2(ListTag, { text: (_h = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _h === void 0 ? void 0 : _h[0], variant: ((_j = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _j === void 0 ? void 0 : _j[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }), jsx$2(Flex, { className: "slippage-cog", onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] }), jsx$2(Flex, { className: "modaltable-container description-container", children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription }), jsxs(Flex, { className: "modaltable-container blocks-container", children: [jsxs(Flex, { className: `modal-block block-discount ${getDiscountColor(bondData === null || bondData === void 0 ? void 0 : bondData.discount)}`, children: [jsxs(Flex, { className: "block-header", children: ["Discount", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: `${(_k = bondData === null || bondData === void 0 ? void 0 : bondData.discount) === null || _k === void 0 ? void 0 : _k.toFixed(2)}%` })] }), jsxs(Flex, { className: "modal-block block-arr", children: [jsxs(Flex, { className: "block-header", children: ["ARR", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: `${((((_l = bondData === null || bondData === void 0 ? void 0 : bondData.discount) !== null && _l !== void 0 ? _l : 0) * 365) / vestingTime((_m = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _m !== void 0 ? _m : 0).days).toFixed(2)}%` })] }), jsxs(Flex, { className: "modal-block block-term", children: [jsxs(Flex, { className: "block-header", children: ["Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: vestingTime((_o = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _o !== void 0 ? _o : 0).days
                                                         ? `${vestingTime((_p = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _p !== void 0 ? _p : 0).days} D`
                                                         : '-' })] }), jsxs(Flex, { className: "modal-block block-maxbuy", children: [jsxs(Flex, { className: "block-header", children: ["Max Buy", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.MaxBuy(bondData.earnToken.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2(Flex, { className: "block-content", children: (_q = parseFloat(maxBuy(bondData).toFixed(0))) === null || _q === void 0 ? void 0 : _q.toLocaleString('en-US') })] })] }), jsxs(Flex, { className: "modaltable-container text-container", children: [jsxs(Flex, { className: "text-container row", children: [jsx$2(Flex, { className: "row-container spend", children: "You spend:" }), jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", bondData.lpToken.symbol, " = $", ' ', formatUSDNumber(youSpendUSD(bondData, inputValue))] })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Premium:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { className: `row-container premium-val ${getPremiumColor(bondData, inputValue)}`, children: ["$ ", premium(bondData, inputValue)] })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You get (over ", vestingTime((_r = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _r !== void 0 ? _r : 0).days, " days):"] }), jsxs(Flex, { className: "row-container get-val", children: [youGet(bondData, inputValue), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(youGetUSD(bondData, inputValue))] })] })] }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: (bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== types.ChainId.IOTA, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { className: "modaltable-container button-container", children: [jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => notSupportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? openExternal() : onOpenZapModal(), variant: "secondary", children: ["Get ", bondData === null || bondData === void 0 ? void 0 : bondData.lpToken.symbol] }) }), jsx$2(Flex, { className: "button-container buy", children: userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account, onClick: (event) => {
                                                     event.stopPropagation();
@@ -72031,15 +72332,13 @@ const BondModal = ({ bondAddress, bondChain, accordionTitle = 'What are Bonds?',
                                                     (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                     !account ||
                                                     !inputValue ||
-                                                    parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })] })) : (
-                // </Flex>
-                //
-                //
-                // ALTERNATIVE VIEW!!
-                //
-                //
-                // <Flex className="modal-backdrop" onClick={handleClose}>
-                jsxs(Flex, { className: "modal-content font-small gpt", sx: { width: 'fit-content' }, children: [window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"", modalVariant, "\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), toastMessage && jsx$2(Flex, { className: "toast", children: toastMessage }), jsx$2(Flex, { className: "modal-header" }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_s = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _s !== void 0 ? _s : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_t = bondData.showcaseTokenName) !== null && _t !== void 0 ? _t : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { children: ["You will receive:", jsx$2(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_u = bondData.showcaseTokenName) !== null && _u !== void 0 ? _u : bondData.earnToken.symbol, size: 20 }) }), (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, " + \u00A0", (youGet(bondData, inputValue) -
+                                                    parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })] }) })) : (
+            //
+            //
+            // ALTERNATIVE VIEW!!
+            //
+            //
+            jsx$2(Flex, { className: "modal-backdrop", onClick: handleClose, children: jsxs(Flex, { className: "modal-content font-small gpt", onClick: (event) => event.stopPropagation(), children: [jsx$2(ModalHeader, { hideDivider: true, onDismiss: handleClose }), window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"", modalVariant, "\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), toastMessage && jsx$2(Flex, { className: "toast", children: toastMessage }), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: '20px' }, children: [jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [jsx$2("img", { src: "https://placehold.co/400x200" }), jsx$2(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription })] }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: { minWidth: '300px' }, children: jsxs("h2", { sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' ', jsx$2(Svg, { width: 20, height: 20, icon: (_s = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _s !== void 0 ? _s : 'question' })] }) }), jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [jsx$2(TokenImage, { symbol: (_t = bondData.showcaseTokenName) !== null && _t !== void 0 ? _t : bondData.earnToken.symbol, size: 20 }), jsx$2("span", { children: bondData.earnToken.symbol }), " ", jsx$2("span", { children: "|" }), ' ', jsxs("span", { children: ["Market Price: $", earnTokenPrice(bondData)] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleMaxBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { children: ["You will receive:", jsx$2(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_u = bondData.showcaseTokenName) !== null && _u !== void 0 ? _u : bondData.earnToken.symbol, size: 20 }) }), (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, " + \u00A0", (youGet(bondData, inputValue) -
                                                                     lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), jsx$2("span", { className: "text-highlight", children: "\u00A0additional" })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button button-narrow", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account, onClick: (event) => {
                                                                     event.stopPropagation();
                                                                     switchChain({ chainId: bondData.chainId });
@@ -72047,298 +72346,9 @@ const BondModal = ({ bondAddress, bondChain, accordionTitle = 'What are Bonds?',
                                                                     (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                                     !account ||
                                                                     !inputValue ||
-                                                                    parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue).toFixed(0), ' ', jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date: ", moment().format('DD-MMM-YYYY')] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', moment()
+                                                                    parseFloat(inputValue) === 0, onClick: approveCallback, children: ["approve ", isZap ? 'zap' : 'normal'] })) })] }), jsx$2(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: jsx$2("hr", { className: "fading-hr" }) }), jsxs(Flex, { sx: { width: '100%' }, children: [jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((youGet(bondData, inputValue) * lodashExports.toNumber(earnTokenPrice(bondData))).toString()), jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Our price: " }), jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((lodashExports.toNumber(inputValue) * lodashExports.toNumber(bondData.principalTokenPrice)).toString()), ' '] }), jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bondData === null || bondData === void 0 ? void 0 : bondData.discount.toFixed(2), "%)"] })] }), jsx$2(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market:", ' ', (lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0), ' ', bondData.earnToken.symbol, jsx$2("hr", { className: "fading-hr" }), jsx$2("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bondData, inputValue).toFixed(0), " ", jsx$2("span", { className: "flex-inline", children: bondData.earnToken.symbol })] })] })] })] })] }), jsxs(Flex, { className: "footer-details", children: [jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date: ", moment().format('DD-MMM-YYYY')] }), jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', moment()
                                             .add(vestingTime((_v = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _v !== void 0 ? _v : 0).days, 'days')
-                                            .format('DD-MMM-YYYY')] }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "What are bonds?" })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })
-                // </Flex>
-                ) }))] }));
-};
-
-/** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
-const CheckUrl = () => {
-    var _a, _b;
-    if (typeof window === 'undefined')
-        return null;
-    const { data: bonds } = useBondsData();
-    const asPath = window.location.search;
-    const urlParams = new URLSearchParams(new URL(asPath, window.location.origin).search);
-    const bondAddress = (_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('bondAddress')) !== null && _a !== void 0 ? _a : '';
-    const bondChain = (_b = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('bondChain')) !== null && _b !== void 0 ? _b : '';
-    const bond = useMemo(() => {
-        if (!bondAddress)
-            return undefined;
-        return bonds === null || bonds === void 0 ? void 0 : bonds.find((bond) => { var _a; return ((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
-    }, [bonds === null || bonds === void 0 ? void 0 : bonds.length]);
-    const [onPresentBuyBillsModal] = useModal(jsx$2(BondModal, { bondAddress: bondAddress, bondChain: parseInt(bondChain) }), true, true, `BuyBondModal:${bondAddress.toLowerCase()}-${bondChain}-${bond === null || bond === void 0 ? void 0 : bond.index}`);
-    useEffect(() => {
-        if (bond && bondChain && bondAddress) {
-            onPresentBuyBillsModal();
-            // track({
-            //   event: 'buyModalOpen',
-            //   chain: bondChain,
-            //   data: {
-            //     cat: 'Row', // Row: clicked by user or custom URL. CTA add this to buy button on future A/B testing.
-            //     bond: bond.payoutTokenName,
-            //     bondChain: bondChain,
-            //   },
-            // })
-        }
-    }, [bonds === null || bonds === void 0 ? void 0 : bonds.length]);
-    return jsx$2(Fragment$1, {});
-};
-
-const BondRowHeader = ({ searchQuery, setSearchQuery, setChainFilterOption, chainFilterOption, filterOptions, filterOption, setFilterOption, onSort, }) => {
-    return (jsxs(Flex$1, { className: "bondrow-header", children: [jsx$2(Flex$1, { className: "bondrow-header filters", children: jsx$2(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setSearchQuery('') }) }), jsxs(Flex$1, { className: "bondrow-header rows", children: [jsxs(Flex$1, { className: "column column-tokens header", children: [jsx$2(Flex$1, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: jsx$2(Input, { value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }), jsx$2(Flex$1, { className: "column column-tokenicons header" })] }), jsxs(Flex$1, { className: "column column-bondinfo header", children: [jsxs(Flex$1, { className: "column column-discount header", children: [jsx$2(Flex$1, { className: "column tooltip", children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)", children: ["DISCOUNT", jsx$2(Flex$1, { className: "column header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), jsx$2(Flex$1, { className: "column header-icon", onClick: () => onSort('discount'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs(Flex$1, { className: "column column-arr header", children: [jsx$2(Flex$1, { className: "column tooltip", children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)", children: ["ARR", jsx$2(Flex$1, { className: "column header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), jsx$2(Flex$1, { className: "column header-icon", onClick: () => onSort('arr'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs(Flex$1, { className: "column column-terms header", children: [jsx$2(Flex$1, { className: "column tooltip", children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)", children: ["TERMS", jsx$2(Flex$1, { className: "column header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), jsx$2(Flex$1, { className: "column header-icon", onClick: () => onSort('terms'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs(Flex$1, { className: "column column-tokensremaining header", children: [jsx$2(Flex$1, { className: "column tooltip", children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)", children: ["TOKENS REMAINING", jsx$2(Flex$1, { className: "column header-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), jsx$2(Flex$1, { className: "column header-icon", onClick: () => onSort('tokensRemaining'), children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "column column-hotbond header" })] })] })] }));
-};
-
-const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
-    return (jsxs(Flex, { className: "chaintitle", sx: {
-            pt,
-            pb: '10px',
-            color: 'textDisabledButton',
-            fontSize: '13px',
-            fontWeight: 500,
-            cursor: 'pointer',
-            textTransform: 'uppercase',
-            display: hideTitles ? 'none' : 'flex',
-            width: '200px',
-        }, children: [NETWORK_LABEL[chain], " Bonds", jsx$2(Flex, { sx: { ml: '7px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) })] }));
-};
-
-const ProgressBar = ({ value, color = 'text' }) => {
-    return (jsx$2(Flex$1, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' }, children: jsx$2(Box$1, { className: "progressbar-background", children: jsx$2(Box$1, { className: "progressbar-completed", style: {
-                    width: `${value <= 3 ? 3 : value}%`,
-                } }) }) }));
-};
-
-const styles$3 = {
-    listCardContainer: {
-        borderRadius: 0,
-        flexDirection: ['column', 'column', 'column', 'row'],
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        background: 'white2',
-        borderBottom: '1px solid rgba(226, 226, 226, .2)',
-        padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],
-        margin: '0 10px 0 10px',
-        maxWidth: ['500px', '500px', '500px', '100%'],
-        minWidth: '300px',
-        width: '100%',
-        height: ['unset', 'unset', 'unset', '86px'],
-    },
-    listViewContainer: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100%',
-    },
-    titleContainer: {
-        width: '100%',
-        justifyContent: 'space-between',
-        my: '5px',
-    },
-    infoContentMobile: {
-        display: ['flex', 'flex', 'flex', 'none'],
-        alignItems: 'center',
-    },
-    tokensContainer: {
-        alignItems: 'center',
-        height: '100%',
-        width: '100%',
-    },
-    titleText: {
-        opacity: 0.6,
-        fontSize: '12px',
-        lineHeight: ['16px', '16px', '16px', '24px'],
-        fontWeight: 400,
-    },
-    skeleton: {
-        width: ['45px', '45px', '60px'],
-        maxHeight: '18px',
-        minHeight: '18px',
-    },
-    valueText: {
-        fontSize: ['12px', '12px', '12px', '14px'],
-        color: 'primaryBright',
-        lineHeight: '16px',
-        fontWeight: 700,
-        mr: '5px',
-        display: 'flex',
-        alignItems: 'center',
-    },
-    secondaryText: {
-        fontSize: '12px',
-        color: 'gray',
-        lineHeight: '16px',
-        fontWeight: 400,
-    },
-    cardContentContainer: {
-        width: '100%',
-        height: '100%',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-    },
-    animationDiv: {
-        position: 'relative',
-        width: '100%',
-        maxWidth: ['500px', '500px', '500px', '100%'],
-        minWidth: '300px',
-    },
-    expandedWrapper: {
-        background: 'white3',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        padding: '15px 10px',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-    },
-};
-
-const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
-    return (jsxs(Flex, { sx: style, children: [jsx$2(Flex, { sx: { alignItems: 'center' }, children: jsx$2(Text, { sx: styles$3.titleText, children: `${title}` }) }), showTooltip ? (jsx$2(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx$2(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx$2(Skeleton, { sx: styles$3.skeleton }) }) }) })) : (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx$2(Skeleton, { sx: styles$3.skeleton }) }))] }));
-};
-var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
-
-const styles$2 = {
-    infoRow: {
-        justifyContent: 'space-between',
-        width: '100%',
-        marginBottom: '5px',
-    },
-    linkRow: {
-        width: '100%',
-        marginTop: '5px',
-        justifyContent: 'flex-end',
-        '& svg': { width: '11px' },
-    },
-    titleText: {
-        fontSize: '12px',
-        lineHeight: '14px',
-        fontWeight: 500,
-    },
-    contentText: {
-        fontSize: '12px',
-        lineHeight: '14px',
-        fontWeight: 700,
-    },
-    iconButton: {
-        background: 'white3',
-        textDecoration: 'none',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 'fit-content',
-        height: '30px',
-        padding: '2px 5px',
-        borderRadius: '8px',
-        margin: '0 5px 5px 0',
-        '&:hover': {
-            cursor: 'pointer',
-        },
-    },
-    link: {
-        fontSize: '12px',
-        lineHeight: '14px',
-        display: 'flex',
-        textDecoration: 'none',
-        '&: hover': { textDecoration: 'underline' },
-    },
-};
-
-const ButtonsRow = ({ projectLink, twitter, bubble, audit, }) => {
-    const bubbleURL = `https://app.bubblemaps.io/bsc/token/${bubble}`;
-    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx$2(Flex, { sx: styles$2.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx$2(Svg, { icon: "URL", width: 18 }) }), jsx$2(Flex, { sx: styles$2.iconButton, as: Link, href: twitter, target: "_blank", children: jsx$2(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && (jsx$2(Flex, { sx: styles$2.iconButton, as: Link, href: bubbleURL, target: "_blank", children: jsx$2(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$2.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank", children: [jsx$2(Svg, { icon: "audit", width: 18, color: "text" }), jsx$2(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
-};
-
-const Tooltip = ({ valueTitle, valueContent, value2Title, value2Content, tokenContract, secondURL, secondURLTitle, projectLink, twitter, audit, thirdURL, thirdURLTitle, chain, }) => {
-    const explorerLink = BLOCK_EXPLORER[chain];
-    const tokenLink = `${explorerLink}/address/${tokenContract}`;
-    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [projectLink && twitter && (jsx$2(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: tokenContract, audit: audit })), valueTitle && (jsxs(Flex, { sx: styles$2.infoRow, children: [jsxs(Text, { sx: styles$2.titleText, children: [valueTitle, ": "] }), jsx$2(Text, { sx: styles$2.contentText, children: valueContent })] })), value2Title && (jsxs(Flex, { sx: styles$2.infoRow, children: [jsxs(Text, { sx: styles$2.titleText, children: [value2Title, ": "] }), jsx$2(Text, { sx: styles$2.contentText, children: value2Content })] })), jsx$2(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx$2(Flex, { sx: styles$2.linkRow, children: jsxs(Link, { href: tokenLink, sx: styles$2.link, target: "_blank", children: ['View Token Contract', jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] }) }), secondURL && (jsx$2(Flex, { sx: styles$2.linkRow, children: jsxs(Link, { href: secondURL, sx: styles$2.link, target: "_blank", children: [secondURLTitle, jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] }) })), thirdURL && (jsx$2(Flex, { sx: styles$2.linkRow, children: jsx$2(Link, { href: thirdURL, sx: styles$2.link, target: "_blank", children: thirdURLTitle }) }))] }) })] }));
-};
-
-/**
- * Returns a USD dollar or equivalent denominated numerical value formatted
- * in human readable string for use in template.
- *
- * Adheres to guidelines for prices and other numbers defined here:
- * https://www.notion.so/uniswaplabs/Number-standards-fbb9f533f10e4e22820722c2f66d23c0
- * @param num numerical value denominated in USD or USD equivalent
- * @param isPrice whether the amount represents a price or not
- * @param lessPreciseStablecoinValues whether or not we should show less precise values for
- * stablecoins (around 1$ in value always) for the sake of readability
- * @param digits number of digits after the decimal for non-price amounts
- * @param round whether or not to round up non-price amounts
- */
-const formatDollar = ({ num, isPrice = false, lessPreciseStablecoinValues = false, digits = 2, round = true, }) => {
-    // For USD dollar denominated prices.
-    if (isPrice) {
-        if (num === 0)
-            return '$0.00';
-        if (!num)
-            return '-';
-        if (num < 0.000001) {
-            return `$${num.toExponential(2)}`;
-        }
-        if ((num >= 0.000001 && num < 0.1) || num > 1000000) {
-            return `$${Number(num).toPrecision(3)}`;
-        }
-        // We only show 2 decimal places in explore table for stablecoin value ranges
-        // for the sake of readability (as opposed to the usual 3 elsewhere).
-        if (num >= 0.1 && num < (lessPreciseStablecoinValues ? 0.9995 : 1.05)) {
-            return `$${num.toFixed(3)}`;
-        }
-        return `$${Number(num.toFixed(2)).toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
-    }
-    // For volume dollar amounts, like market cap, total value locked, etc.
-    else {
-        if (num === 0)
-            return '$0.00';
-        if (!num)
-            return '-';
-        if (num < 0.000001) {
-            return '$<0.000001';
-        }
-        if (num >= 0.000001 && num < 0.1) {
-            return `$${Number(num).toPrecision(3)}`;
-        }
-        if (num >= 0.1 && num < 1.05) {
-            return `$${num.toFixed(3)}`;
-        }
-        return numbro(num)
-            .formatCurrency({
-            average: round,
-            mantissa: num > 1000 ? 2 : digits,
-            abbreviations: {
-                million: 'M',
-                billion: 'B',
-            },
-        })
-            .toUpperCase();
-    }
-};
-const formatValue = ({ num, digits = 2, round = true }) => {
-    if (num === 0)
-        return '0.00';
-    if (!num)
-        return '-';
-    if (num < 0.000001) {
-        return '<0.000001';
-    }
-    if (num >= 0.000001 && num < 0.1) {
-        return `${Number(num).toPrecision(3)}`;
-    }
-    if (num >= 0.1 && num < 1.05) {
-        return `${num.toFixed(3)}`;
-    }
-    return numbro(num)
-        .format({
-        average: round,
-        mantissa: num > 1000 ? 2 : digits,
-        abbreviations: {
-            million: 'M',
-            billion: 'B',
-        },
-    })
-        .toUpperCase();
+                                            .format('DD-MMM-YYYY')] }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), jsx$2(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "What are bonds?" })] }), accordionVisible && (jsx$2(Flex, { className: "modaltable-container accordion-container", children: jsx$2(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] }) })) })) }));
 };
 
 const BondRow = ({ bond, hotBonds, modalVariant }) => {
@@ -72417,6 +72427,155 @@ const BondRowsByChain = ({ bonds, hotBonds, hideTitles, chains, modalVariant })
         }) }));
 };
 
+// This basically returns the 2 tags with the higher active bond count
+const useTopTags = (initialBondList) => {
+    const bonds = initialBondList;
+    const countTagsInBonds = (bonds) => {
+        const tagCount = {};
+        bonds === null || bonds === void 0 ? void 0 : bonds.forEach((bond) => {
+            var _a;
+            if (bond.soldOut)
+                return;
+            (_a = bond.tags) === null || _a === void 0 ? void 0 : _a.forEach((tag) => {
+                if (tag in tagCount) {
+                    tagCount[tag] += 1;
+                }
+                else {
+                    tagCount[tag] = 1;
+                }
+            });
+        });
+        return tagCount;
+    };
+    const activeBonds = bonds === null || bonds === void 0 ? void 0 : bonds.filter((bond) => !bond.soldOut);
+    const countedTags = countTagsInBonds(activeBonds);
+    const sortedTagsArray = Object.entries(countedTags).sort((a, b) => b[1] - a[1]);
+    return sortedTagsArray.slice(0, 2).map((tagCountArray) => tagCountArray[0]);
+};
+
+const isBondSoldOut = (bill) => {
+    var _a;
+    const { tokensRemaining, discount, payoutTokenPrice, billAddress } = bill;
+    if (bill.soldOut)
+        return true;
+    if (bill.inactive)
+        return true;
+    if (!tokensRemaining)
+        return false;
+    const thresholdToHide = new BigNumber$1(100).div(payoutTokenPrice !== null && payoutTokenPrice !== void 0 ? payoutTokenPrice : 0);
+    if (discount && discount > 50) {
+        // If discount is over 50% it will be hidden
+        console.log('Soldout contract:', billAddress);
+        return true;
+    }
+    if (((_a = new BigNumber$1(tokensRemaining)) === null || _a === void 0 ? void 0 : _a.lte(thresholdToHide)) || discount === 100) {
+        // If there's less than 100 usd bond will be hidden
+        console.log('Soldout contract: ', billAddress);
+        return true;
+    }
+    else
+        return false;
+};
+const sortBonds = (sortConfig, bonds) => {
+    const bondsToSort = bonds !== null && bonds !== void 0 ? bonds : [];
+    if (!sortConfig) {
+        return bondsToSort;
+    }
+    return [...bondsToSort].sort((a, b) => {
+        let aValue, bValue;
+        if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === 'arr') {
+            aValue = calculateARR(a);
+            bValue = calculateARR(b);
+        }
+        else if (sortConfig.key === 'tokensRemaining') {
+            aValue = remainingPercentage(a);
+            bValue = remainingPercentage(b);
+        }
+        else if (sortConfig.key === 'terms') {
+            aValue = vestingTime(a.vestingTerm).days;
+            bValue = vestingTime(b.vestingTerm).days;
+        }
+        else {
+            aValue = a[sortConfig.key];
+            bValue = b[sortConfig.key];
+        }
+        if (aValue < bValue) {
+            return sortConfig.direction === 'asc' ? -1 : 1;
+        }
+        if (aValue > bValue) {
+            return sortConfig.direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+    });
+};
+const calculateARR = (bond) => {
+    var _a;
+    const discount = (_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0;
+    const vestingDays = vestingTime(bond.vestingTerm).days;
+    return parseFloat(((discount * 365) / vestingDays).toFixed(2));
+};
+const vestingTime = (vestingTerm) => {
+    return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
+};
+const remainingPercentage = (bond) => {
+    var _a, _b, _c, _d;
+    const totalMaxPayout = new BigNumber$1((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber$1(10).pow((_c = (_b = bond.earnToken.decimals) === null || _b === void 0 ? void 0 : _b[bond.chainId]) !== null && _c !== void 0 ? _c : 18));
+    const remainingTokens = new BigNumber$1((_d = bond.tokensRemaining) !== null && _d !== void 0 ? _d : '0');
+    return remainingTokens.div(totalMaxPayout).times(100).toNumber();
+};
+
+function useHotBonds() {
+    return useQuery({
+        queryKey: [QUERY_KEYS.HOT_BONDS],
+        queryFn: getHotBonds,
+        refetchOnWindowFocus: false,
+        retry: 1,
+        initialData: [],
+    });
+}
+const getHotBonds = () => __awaiter$9(void 0, void 0, void 0, function* () {
+    try {
+        const response = yield axios.get('https://apeswap-strapi.herokuapp.com/hot-bonds');
+        return response.data.map((bond) => bond.BondAddress.toLowerCase());
+    }
+    catch (_a) {
+        return [];
+    }
+});
+
+/** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
+const CheckUrl = () => {
+    var _a, _b;
+    if (typeof window === 'undefined')
+        return null;
+    const { data: bonds } = useBondsData();
+    const asPath = window.location.search;
+    const urlParams = new URLSearchParams(new URL(asPath, window.location.origin).search);
+    const bondAddress = (_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('bondAddress')) !== null && _a !== void 0 ? _a : '';
+    const bondChain = (_b = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('bondChain')) !== null && _b !== void 0 ? _b : '';
+    const bond = useMemo(() => {
+        if (!bondAddress)
+            return undefined;
+        return bonds === null || bonds === void 0 ? void 0 : bonds.find((bond) => { var _a; return ((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
+    }, [bonds === null || bonds === void 0 ? void 0 : bonds.length]);
+    const [onPresentBuyBillsModal] = useModal(jsx$2(BondModal, { bondAddress: bondAddress, bondChain: parseInt(bondChain) }), true, true, `BuyBondModal:${bondAddress.toLowerCase()}-${bondChain}-${bond === null || bond === void 0 ? void 0 : bond.index}`);
+    useEffect(() => {
+        if (bond && bondChain && bondAddress) {
+            onPresentBuyBillsModal();
+            // track({
+            //   event: 'buyModalOpen',
+            //   chain: bondChain,
+            //   data: {
+            //     cat: 'Row', // Row: clicked by user or custom URL. CTA add this to buy button on future A/B testing.
+            //     bond: bond.payoutTokenName,
+            //     bondChain: bondChain,
+            //   },
+            // })
+        }
+    }, [bonds === null || bonds === void 0 ? void 0 : bonds.length]);
+    return jsx$2(Fragment$1, {});
+};
+
 const Bonds = ({ chains = [], modalVariant = 'standard' }) => {
     // Fetch data
     const { data: bondData } = useBondsData();