@ape.swap/bonds-sdk 1.0.780 → 1.1.0-seedify

package/dist/types/yourbonds.d.ts

@@ -1,13 +1,9 @@
-import { ChainId } from "../enum/apeswaplists";
-import { BondsDataResponse } from "./bonds";
+import { BondsData } from './bonds';
+import { ChainId } from '@ape.swap/apeswap-lists';
 export interface UserOwnedBillsData {
     index: number;
     userOwnedBills: UserBill[];
 }
-export interface ownedBillsWithNftData {
-    index: number;
-    userOwnedBillsNfts: any[];
-}
 export interface UserBill {
     address: string;
     id: string;
@@ -18,76 +14,65 @@ export interface UserBill {
     lastBlockTimestamp: string;
     pendingRewards: string;
     billNftAddress: string;
-    nftData?: UserBillNftData;
-    bond: BondsDataResponse;
+    bond: BondsData;
 }
 export interface UserBillNftData {
     id: number;
+    tokenId: number;
+    attributes: {
+        trait_type: string;
+        value: string;
+    }[];
+    chainId: ChainId;
+    contractAddress: string;
+    description: string;
+    image: string;
+    name: string;
     data: {
-        name: string;
-        description: string;
-        tokenId: number;
-        image: string;
-        attributes: {
-            trait_type: string;
-            value: string;
-        }[];
-        data: {
-            billContract: string;
-            billNftAddress: string;
-            payout: number;
-            deposit: number;
-            createTransactionHash: string;
-            billNftId: number;
-            expires: number;
-            vestingPeriodSeconds: number;
-            payoutToken: string;
-            principalToken: string;
-            type: string;
-            pairName: string;
-            payoutTokenData: {
-                address: string;
-                name: string;
-                symbol: string;
-                decimals: {
-                    [chainId: number]: number;
-                };
+        billContract: string;
+        billNftAddress: string;
+        billNftId: number;
+        blockNumber: number;
+        bondArtCollection: string;
+        bondPartner: string;
+        bondVersion: string;
+        chainId: ChainId;
+        createTransactionHash: string;
+        createdAddressOwner: string;
+        createdAt: number;
+        deposit: number;
+        dollarValue: number;
+        expires: number;
+        pairName: string;
+        payout: number;
+        payoutToken: string;
+        payoutTokenData: {
+            address: string;
+            name: string;
+            symbol: string;
+            decimals: {
+                [chainId: number]: number;
             };
-            token0: {
-                address: string;
-                symbol: string;
-                name: string;
-                decimals: {
-                    [chainId: number]: number;
-                };
+        };
+        payoutTokenPrice: string;
+        principalToken: string;
+        token0: {
+            address: string;
+            symbol: string;
+            name: string;
+            decimals: {
+                [chainId: number]: number;
             };
-            token1: {
-                address: string;
-                symbol: string;
-                name: string;
-                decimals: {
-                    [chainId: number]: number;
-                };
+        };
+        token1: {
+            address: string;
+            symbol: string;
+            name: string;
+            decimals: {
+                [chainId: number]: number;
             };
-            dollarValue: number;
-            chainId: ChainId;
-            blockNumber: number;
-            bondArtCollection: string;
-            bondPartner: string;
-            bondVersion: string;
-            createdAddressOwner: string;
-            createdAt: number;
-            payoutTokenPrice: string;
         };
-        contractAddress: string;
-        chainId: ChainId;
+        type: string;
+        vestingPeriodSeconds: number;
     };
 }
-export interface UserBillNft {
-    image: string;
-    tokenId: string;
-    attributes: {
-        trait_type: string;
-        value: string;
-    }[];
-}

package/dist/utils/displayHelpers.d.ts

@@ -0,0 +1,13 @@
+import { UserBill } from '../types/yourbonds';
+import { BondsData } from '../types/bonds';
+export declare const claimable: (userBill: UserBill) => number;
+export declare const earnTokenPrice: (bond: BondsData) => string;
+export declare const totalPending: (userBill: UserBill) => number;
+export declare const vestingTimeRemaining: (userBill: UserBill) => {
+    years: number;
+    months: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};

package/dist/utils/getNativeTicker.d.ts

@@ -1,3 +1,3 @@
-import { ChainId } from "@ape.swap/apeswap-lists";
-declare const getNativeTicker: (chain?: ChainId) => string | undefined;
-export default getNativeTicker;
+import { ChainId, Token } from '@ape.swap/apeswap-lists';
+export declare const getNativeTicker: (chain?: ChainId) => string | undefined;
+export declare const getTokenSymbol: (token: Token) => string;

package/dist/utils/index.d.ts

@@ -13,4 +13,4 @@ export declare function getEtherscanLink(data: string | number, type: 'transacti
  * @param tokenImage
  * @returns {boolean} true if the token has been added, false otherwise
  */
-export declare const registerToken: (tokenAddress: string, tokenSymbol: string | undefined, tokenDecimals: number, tokenImage: string | undefined) => Promise<any>;
+export declare const registerToken: (tokenAddress: string, tokenSymbol: string | undefined, tokenDecimals: number, tokenImage: string | undefined) => Promise<void | null>;

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

@@ -2,16 +2,13 @@
 import React from 'react';
 import '../../scss/BondModal.scss';
 export interface BondModalProps {
-    account: string;
-    isActive: boolean;
-    isOpen: boolean;
-    onClose: () => void;
-    bondAddress: string | null;
-    accountChainId: number;
+    onDismiss?: () => void;
+    bondAddress?: string;
+    bondChain?: number;
+    variant?: 'standard' | 'alt';
     accordionTitle?: string;
     accordionBody?: string;
     accordionVisible?: boolean;
-    style?: string;
 }
 declare const BondModal: React.FC<BondModalProps>;
 export default BondModal;

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

@@ -1,10 +1,10 @@
-import { BondsDataResponse } from "../../types/bonds";
+import { BondsData } from '../../types/bonds';
 declare function formatNumber(input: string): string;
 declare function formatUSDNumber(input: string): string;
 declare const youSpend: (inputValue: string) => string;
-declare const youSpendUSD: (bond: BondsDataResponse, inputValue: string) => string;
-declare const youGet: (bond: BondsDataResponse, inputValue: string) => string;
-declare const youGetUSD: (bond: BondsDataResponse, inputValue: string) => string;
-declare const premium: (bond: BondsDataResponse, inputValue: string) => string;
-declare const getPremiumColor: (bond: BondsDataResponse, inputValue: string) => string;
+declare const youSpendUSD: (bond: BondsData, inputValue: string) => string;
+declare const youGet: (bond: BondsData, inputValue: string) => number;
+declare const youGetUSD: (bond: BondsData, inputValue: string) => string;
+declare const premium: (bond: BondsData, inputValue: string) => string;
+declare const getPremiumColor: (bond: BondsData, inputValue: string) => string;
 export { formatNumber, formatUSDNumber, youSpend, youSpendUSD, youGet, youGetUSD, premium, getPremiumColor };

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

@@ -1,4 +1,4 @@
-import React from "react";
-import { BondModalProps } from "./BondModal";
+import React from 'react';
+import { BondModalProps } from './BondModal';
 declare const BondModalWithProviders: React.FC<BondModalProps>;
 export default BondModalWithProviders;

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

@@ -1,17 +1,14 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
 import '../../scss/Bonds.scss';
-declare global {
-    interface Window {
-        ethereum?: any;
-    }
-}
 export interface BondsProps {
-    account: string;
-    accountChainId: number;
-    isActive: boolean;
-    bondAddress: string | null;
     chains?: number[];
 }
+type SortableKeys = 'discount' | 'arr' | 'terms' | 'tokensRemaining';
+type SortDirection = 'asc' | 'desc';
+export interface SortOptions {
+    key: SortableKeys;
+    direction: SortDirection;
+}
 declare const Bonds: React.FC<BondsProps>;
 export default Bonds;

package/dist/views/Bonds/components/CheckURL/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+/** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
+declare const CheckUrl: () => React.JSX.Element | null;
+export default CheckUrl;

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

@@ -1,4 +1,4 @@
-import React from "react";
-import { BondsProps } from "./Bonds";
+import React from 'react';
+import { BondsProps } from './Bonds';
 declare const BondsWithProviders: React.FC<BondsProps>;
 export default BondsWithProviders;

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

@@ -0,0 +1,14 @@
+import { BondsData } from '../../types/bonds';
+import { SortOptions } from './Bonds';
+export declare const isBondSoldOut: (bill: BondsData) => boolean;
+export declare const sortBonds: (sortConfig?: SortOptions, bonds?: BondsData[]) => BondsData[];
+export declare const calculateARR: (bond: BondsData) => number;
+export declare const vestingTime: (vestingTerm: number) => {
+    years: number;
+    months: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+export declare const remainingPercentage: (bond: BondsData) => number;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare enum BondsViewOptions {
+    BONDSMARKET = "Bonds Market",
+    YOURBONDS = "Your Bonds"
+}
+declare const FullBondsView: () => React.JSX.Element;
+export default FullBondsView;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FullBondsViewWithProviders: () => React.JSX.Element;
+export default FullBondsViewWithProviders;

package/dist/views/YourBonds/YourBonds.d.ts

@@ -1,15 +1,5 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
 import '../../scss/YourBonds.scss';
-declare global {
-    interface Window {
-        ethereum?: any;
-    }
-}
-interface YourBondsProps {
-    account: string;
-    accountChainId: number;
-    isActive: boolean;
-}
-declare const YourBonds: React.FC<YourBondsProps>;
+declare const YourBonds: () => React.JSX.Element;
 export default YourBonds;

package/dist/views/YourBonds/components/UserBondRow/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { UserBill } from '../../../../types/yourbonds';
+declare const UserBondRow: ({ bill }: {
+    bill: UserBill;
+}) => React.JSX.Element;
+export default UserBondRow;

package/dist/views/YourBonds/fetchBillsUser.d.ts

@@ -1,6 +1,5 @@
-import { ChainId } from '../../enum/apeswaplists';
 import { UserBill, UserOwnedBillsData } from '../../types/yourbonds';
-import { BondsDataResponse } from '../../types/bonds';
+import { BillsConfig, ChainId } from '@ape.swap/apeswap-lists';
 /**
  * Fetches user-owned bill NFT data for a given set of owned bills data, chain ID, and bills.
  * @param ownedBillsData An array of objects containing the ID, bill NFT address, and contract address of the owned bills.
@@ -12,6 +11,6 @@ export declare const fetchUserOwnedBillNftData: (ownedBillsData: {
     id: string;
     billNftAddress: string;
     contractAddress: string;
-}[], chainId: ChainId, bills: BondsDataResponse[]) => Promise<any[]>;
-export declare const fetchUserOwnedBillsDataAsync: (chainId: ChainId, account: string, bondData: BondsDataResponse[]) => Promise<UserOwnedBillsData[]>;
-export declare const fetchUserOwnedBills: (chainId: ChainId, account: string, bonds: BondsDataResponse[]) => Promise<UserBill[]>;
+}[], chainId: ChainId, bills: BillsConfig[]) => Promise<any[]>;
+export declare const fetchUserOwnedBillsDataAsync: (chainId: ChainId, account: string, bondData: BillsConfig[]) => Promise<UserOwnedBillsData[]>;
+export declare const fetchUserOwnedBills: (chainId: ChainId, account: string, bonds: BillsConfig[]) => Promise<UserBill[]>;

package/dist/views/YourBonds/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const YourBondsWithProviders: () => React.JSX.Element;
+export default YourBondsWithProviders;

package/dist/views/YourBondsModal/YourBondsModal.d.ts

@@ -2,9 +2,8 @@
 import React from 'react';
 import { UserBill } from '../../types/yourbonds';
 import '../../scss/YourBondsModal.scss';
-declare const YourBondsModal: ({ isOpen, onClose, userBill }: {
-    isOpen: boolean;
-    onClose: () => void;
-    userBill: UserBill | undefined;
-}) => React.JSX.Element | null;
+declare const YourBondsModal: ({ onDismiss, userBill }: {
+    onDismiss?: () => void;
+    userBill?: UserBill;
+}) => React.JSX.Element;
 export default YourBondsModal;

package/package.json

@@ -3,34 +3,41 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.0.780",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "version": "1.1.0-seedify",
+  "module": "dist/main.js",
+  "type": "module",
+  "types": "dist/main.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "prepublishOnly": "npm run build",
-    "build": "npm run clean && tsc && npm run copy",
+    "build": "npm run clean && rollup -c && npm run copy",
     "dev": "vite",
-    "lint": "eslint",
-    "start": "react-scripts start",
+    "format:write": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\" --config .prettierrc",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\" --config .prettierrc",
+    "lint": "eslint && tsc --noEmit",
     "clean": "rimraf dist/",
     "copy": "copyfiles -u 1 src/**/*.scss dist/"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.51.5",
     "axios": "^1.7.2",
     "ethers": "5.7.2",
     "react": "^18.3.1",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "theme-ui": "^0.16.2"
+    "wagmi": "^2.12.5"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
     "@eslint/js": "^9.10.0",
     "@rainbow-me/rainbowkit": "^2.1.6",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@tanstack/react-query-devtools": "^5.51.24",
     "@types/lodash": "^4.17.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -53,38 +60,26 @@
     "globals": "^15.9.0",
     "prettier": "^3.3.3",
     "rimraf": "5.0.10",
-    "sass": "^1.77.7",
-    "theme-ui": "^0.16.2",
+    "rollup": "^4.14.0",
+    "rollup-plugin-scss": "^4.0.0",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.5.0",
     "vite": "^5.4.4",
-    "yalc": "^1.0.0-pre.53",
-    "@tanstack/react-query-devtools": "^5.51.24"
+    "yalc": "^1.0.0-pre.53"
   },
   "dependencies": {
     "@ape.swap/apeswap-lists": "3.69.2-test.0",
     "@ape.swap/sdk-core": "^1.0.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@reduxjs/toolkit": "^2.2.6",
-    "@tanstack/react-query": "^5.51.5",
-    "@types/node": "^20.14.10",
-    "@uniswap/token-lists": "^1.0.0-beta.34",
-    "axios-retry": "^4.4.2",
     "bignumber.js": "^9.1.2",
     "framer-motion": "^11.3.2",
     "lodash": "^4.17.21",
-    "lottie-react": "^2.4.0",
     "moment": "^2.30.1",
-    "next": "^14.2.5",
     "numbro": "^2.5.0",
-    "react-redux": "^9.1.2",
-    "react-router-dom": "^6.24.1",
-    "react-svg": "^16.1.34",
     "sass": "^1.77.7",
     "swiper": "^11.1.4",
-    "theme-ui": "^0.16.2",
-    "wagmi": "2.12.5"
+    "theme-ui": "0.16.2"
   },
   "browserslist": {
     "production": [

package/dist/components/AccordionText/index.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
-import { useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Flex, Svg } from '../uikit-sdk';
-import '../../scss/AccordionText.scss';
-var AccordionText = function (_a) {
-    var title = _a.title, body = _a.body, _b = _a.isVisible, isVisible = _b === void 0 ? false : _b;
-    var _c = useState(false), isDropdownExpanded = _c[0], setIsDropdownExpanded = _c[1];
-    var toggleDropdown = function () {
-        setIsDropdownExpanded(!isDropdownExpanded);
-    };
-    if (!isVisible) {
-        return null;
-    }
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { className: "accordion-header", onClick: toggleDropdown, children: [_jsx(Flex, { className: "accordion-title", children: title }), _jsx(Flex, { className: "accordion-icon", children: _jsx(Svg, { icon: "caret", direction: isDropdownExpanded ? 'down' : 'up' }) })] }), _jsx(AnimatePresence, { children: isDropdownExpanded && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: _jsx(Flex, { className: "accordion-body", children: body }) })) })] }));
-};
-export default AccordionText;

package/dist/components/BondMenu/BondMenu.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import { useCallback } from 'react';
-import { Flex, IconButton } from '../uikit-sdk';
-import RecommendationSelector from '../MenuSelect/RecommendationSelector';
-import MenuSelect from '../MenuSelect/MenuSelect';
-import '../../scss/BondMenu.scss';
-import NetworkFilter from '../NetworkFilter';
-var BondMenu = function (_a) {
-    var setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onHandleQueryChange = _a.onHandleQueryChange;
-    var mappedFilters = filterOptions.map(function (filter) {
-        return {
-            label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),
-            value: filter,
-        };
-    });
-    var asPath = window.location.pathname + window.location.search;
-    var handleFilterSelection = useCallback(function (newOption) {
-        setChainFilterOption(['All Chains']);
-        setFilterOption(newOption);
-    }, [setChainFilterOption, setFilterOption]);
-    return (_jsxs(Flex, { className: "menu-container filters", children: [_jsx(Flex, { className: "filters desktop-rec", sx: { display: ['none', 'none', 'none', 'flex'], mr: '20px' }, children: _jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), _jsx(Flex, { className: "filtesr mobile-rec", sx: { display: ['flex', 'flex', 'flex', 'none'], width: '100%' }, children: _jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) }), _jsx(Flex, { className: "filters network", sx: { width: ['49%', '49%', '49%', 'unset'], minWidth: '120px' }, children: _jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), _jsxs(Flex, { className: "filters clear-all", sx: {
-                    display: ['none', 'none', 'none', 'flex'],
-                    color: 'textDisabledButton',
-                    fontSize: '14px',
-                    background: 'white2',
-                    borderRadius: 'normal',
-                    p: '8px 16px',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontWeight: 500,
-                    ml: '15px',
-                    lineHeight: '13px',
-                    cursor: 'pointer',
-                }, onClick: function () {
-                    setChainFilterOption(['All Chains']);
-                    setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
-                    onHandleQueryChange('');
-                }, children: ["Clear All", _jsx(Flex, { sx: { ml: '7px' }, children: _jsx(IconButton, { icon: "close", color: "textDisabledButton", variant: "transparent" }) })] })] }));
-};
-export default BondMenu;

package/dist/components/BondMenu/useChainFilterOption.js

@@ -1,30 +0,0 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { QUERY_KEYS } from '../../config/constants/queryKeys';
-import useCookie from '../../hooks/useCookie';
-import { useCallback } from 'react';
-export default function useChainFilterOption() {
-    var _a;
-    var _b = useCookie(QUERY_KEYS.CHAIN_FILTER_OPTION, ['All Chains']), cookie = _b.cookie, updateCookie = _b.updateCookie;
-    var data = useQuery({
-        queryKey: ["".concat(QUERY_KEYS.CHAIN_FILTER_OPTION)],
-        queryFn: function () { return cookie; },
-        initialData: cookie,
-    }).data;
-    var urlParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
-    var urlChain = (_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('chain')) !== null && _a !== void 0 ? _a : '';
-    var queryClient = useQueryClient();
-    var removeURLChain = useCallback(function () {
-        if (urlChain && urlParams) {
-            console.log('remove url');
-            urlParams.delete('chain');
-            var newUrl = "".concat(window.location.pathname, "?").concat(urlParams.toString());
-            window.history.replaceState({}, '', newUrl);
-        }
-    }, [urlChain, urlParams]);
-    var setChainFilterOption = useCallback(function (newValue) {
-        updateCookie(newValue);
-        queryClient.setQueryData(["".concat(QUERY_KEYS.CHAIN_FILTER_OPTION)], newValue);
-        removeURLChain();
-    }, [updateCookie, queryClient, removeURLChain]);
-    return { data: data, setChainFilterOption: setChainFilterOption };
-}

package/dist/components/BondRows/BondRow.js

@@ -1,81 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import BigNumber from "bignumber.js";
-import { ChainId } from "../../enum/apeswaplists";
-import ProgressBar from "../ProgressBar/ProgressBar";
-import ProgressBarWrapper from "../ProgressBar/ProgressBarWrapper";
-import TokenInfoAndName from "../TokenInfoAndName";
-import Tooltip from "../Tooltip/Tooltip";
-import { Svg, TooltipBubble } from "../uikit-sdk";
-import { formatDollar, formatValue } from "../../utils/formatNumbers";
-import getTimePeriods from "../../utils/getTimePeriods";
-import { BLOCK_EXPLORER } from "../../config/constants/chains";
-import { useEffect, useState } from "react";
-import '../../scss/BondRow.scss';
-import { Flex } from "theme-ui";
-var BondRow = function (_a) {
-    var _b, _c, _d;
-    var bond = _a.bond, hotBonds = _a.hotBonds;
-    // Modal
-    var _e = useState(false), isModalOpen = _e[0], setIsModalOpen = _e[1];
-    useEffect(function () {
-        if (isModalOpen === true) {
-            if (typeof window !== "undefined") {
-                var newUrl = "/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId);
-                window.history.pushState({ path: newUrl }, '', newUrl);
-                console.log(isModalOpen);
-            }
-        }
-    }, [isModalOpen]);
-    useEffect(function () {
-        var fullUrl = window.location.href;
-        console.log('URL: ', fullUrl);
-    }, []);
-    var rowClick = function (bond) {
-        setIsModalOpen(true);
-    };
-    // Functions for calcuations
-    var vestingTime = function (vestingTerm) {
-        return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
-    };
-    var getDiscountColor = function (discount) {
-        return discount < 0 ? 'discount-negative' : 'discount-positive';
-    };
-    var remainingPercentage = function (bond) {
-        var _a, _b;
-        var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.earnToken.decimals[bond.chainId]));
-        var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
-        return remainingTokens.div(totalMaxPayout).times(100).toNumber();
-    };
-    var remainingTokensFormat = function (bond) {
-        var _a;
-        return formatValue({ num: new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0') });
-    };
-    var remainingTokensUsd = function (bond) {
-        var _a, _b;
-        var tokens = new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
-        return tokens.times((_b = bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
-    };
-    var getBillContractURL = function (bond) {
-        var _a;
-        var selectedChain = (_a = bond.chainId) !== null && _a !== void 0 ? _a : ChainId.BSC;
-        var explorerLink = BLOCK_EXPLORER[selectedChain];
-        return "".concat(explorerLink, "/address/").concat(bond === null || bond === void 0 ? void 0 : bond.billAddress);
-    };
-    var calculateARR = function (bond) {
-        var _a;
-        var discount = (_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0;
-        var vestingDays = vestingTime(bond.vestingTerm).days;
-        return parseFloat((((discount * 365) / vestingDays).toFixed(2)));
-    };
-    return (_jsxs(Flex, { className: "bonds-container bondrow-container", onClick: function () { return rowClick(bond); }, children: [_jsxs(Flex, { className: "column column-tokens", children: [_jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bond }) }), _jsx(Flex, { className: "column column-tokenicons", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.earnToken.address[bond.chainId]) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_b = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _b === void 0 ? void 0 : _b.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_c = bond.chainId) !== null && _c !== void 0 ? _c : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: _jsx(Svg, { icon: "more", width: "20px" }) }) })] }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsx(Flex, { className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: (bond === null || bond === void 0 ? void 0 : bond.discount) !== undefined ? "".concat(bond.discount.toFixed(2), "%") : '-' }), _jsx(Flex, { className: "column column-arr", children: calculateARR(bond) !== undefined ? "".concat(calculateARR(bond), "%") : '-' }), _jsx(Flex, { className: "column column-terms", children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' }), _jsx(Flex, { className: "column column-tokensremaining", children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
-                                width: '127px',
-                                height: '25px',
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                                display: ['none', 'none', 'none', 'flex'],
-                            }, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.earnToken.symbol, " (").concat(formatDollar({
-                                num: remainingTokensUsd(bond).toNumber(),
-                                isPrice: true,
-                            }), ")") }) }), _jsx(Flex, { className: "column column-hotbond", children: _jsx(Flex, { className: "column column-icon", children: (hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.includes(bond.billAddress.toLowerCase())) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) }) })] })] }, bond.billAddress));
-};
-export default BondRow;