@ape.swap/bonds-sdk 1.0.521 → 1.0.523

package/dist/components/BondMenu/BondMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import '../../scss/BondMenu.scss';
+interface BondMenuProps {
+    setChainFilterOption: (newValue: string[]) => void;
+    chainFilterOption: string[];
+    filterOptions: string[];
+    filterOption: string;
+    setFilterOption: (newOption: string) => void;
+}
+declare const BondMenu: React.FC<BondMenuProps>;
+export default BondMenu;

package/dist/components/BondMenu/BondMenu.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useCallback } from 'react';
+import { Flex } 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;
+    var mappedFilters = filterOptions.map(function (filter) {
+        return {
+            label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),
+            value: filter,
+        };
+    });
+    var handleFilterSelection = useCallback(function (newOption) {
+        setChainFilterOption(['All Chains']);
+        setFilterOption(newOption);
+    }, [setChainFilterOption, setFilterOption]);
+    return (_jsxs(Flex, { className: "menu-container filters", children: [_jsx(Flex, { className: "filters network", sx: { width: ['49%', '49%', '49%', 'unset'], minWidth: '120px' }, children: _jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), _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' } }) })] }));
+};
+export default BondMenu;

package/dist/components/BondMenu/useChainFilterOption.d.ts

@@ -0,0 +1,4 @@
+export default function useChainFilterOption(): {
+    data: string[];
+    setChainFilterOption: (newValue: string[]) => void;
+};

package/dist/components/BondMenu/useChainFilterOption.js

@@ -0,0 +1,34 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../config/constants/queryKeys';
+import useCookie from '../../hooks/useCookie';
+import { useCallback } from 'react';
+import { useRouter } from 'next/router';
+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 _c = useRouter(), asPath = _c.asPath, query = _c.query, replace = _c.replace, pathname = _c.pathname;
+    var urlParams = typeof window !== 'undefined' ? new URLSearchParams(new URL(asPath, window.location.origin).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) {
+            console.log('remove url');
+            delete query.chain;
+            replace({
+                pathname: pathname,
+                query: query,
+            }, undefined, { scroll: false });
+        }
+    }, [urlChain, pathname, query, replace]);
+    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/BondRowHeader.d.ts

@@ -9,9 +9,5 @@ interface BondRowHeaderProps {
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onSort: (key: 'discount' | 'arr' | 'terms' | 'tokensRemaining') => void;
 }
-export declare enum BondsViewOptions {
-    BONDSMARKET = "Bonds Market",
-    YOURBONDS = "Your Bonds"
-}
 declare const BondRowHeader: React.FC<BondRowHeaderProps>;
 export default BondRowHeader;

package/dist/components/BondRows/BondRowHeader.js

@@ -6,13 +6,8 @@ import { Input } from '../uikit-sdk/Input';
 import { Svg, TooltipBubble } from '../uikit-sdk';
 import { TooltipText } from '../../enum/tooltips';
 import '../../scss/BondRowHeader.scss';
-import MenuSelect from '../MenuSelect/MenuSelect';
-import RecommendationSelector from '../MenuSelect/RecommendationSelector';
-export var BondsViewOptions;
-(function (BondsViewOptions) {
-    BondsViewOptions["BONDSMARKET"] = "Bonds Market";
-    BondsViewOptions["YOURBONDS"] = "Your Bonds";
-})(BondsViewOptions || (BondsViewOptions = {}));
+import BondMenu from '../BondMenu/BondMenu';
+import useChainFilterOption from '../BondMenu/useChainFilterOption';
 var BondRowHeader = function (_a) {
     var inputValue = _a.inputValue, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onSort = _a.onSort;
     var mappedFilters = filterOptions.map(function (filter) {
@@ -21,22 +16,13 @@ var BondRowHeader = function (_a) {
             value: filter,
         };
     });
-    var handleFilterSelection = useCallback(function (newOption) {
-        //setChainFilterOption(['All Chains'])
+    var _b = useChainFilterOption(), chainFilterOption = _b.data, setChainFilterOption = _b.setChainFilterOption;
+    var handleChangeFilterOption = useCallback(function (newOption) {
         setFilterOption(newOption);
-    }, [setFilterOption]);
-    // const handleChangeNav = useCallback(
-    //   (navOption: string) => {
-    //     if (navOption === BondsViewOptions.BONDSMARKET) {
-    //       setBillsView(BondsViewOptions.BONDSMARKET)
-    //       replace('/bonds', undefined, { shallow: true })
-    //     } else {
-    //       setBillsView(BondsViewOptions.YOURBONDS)
-    //       push('/bonds?yourBonds', undefined, { shallow: true })
-    //     }
-    //   },
-    //   [push, replace, setBillsView],
-    // )
-    return (_jsxs(Flex, { className: "header-container", children: [_jsx(Flex, { sx: { width: ['100%', '100%', '100%', '325px'] } }), _jsxs(Flex, { className: "header-container filters", children: [_jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], mr: '20px' }, children: _jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), _jsx(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], width: '100%' }, children: _jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) })] }), _jsxs(Flex, { className: "header-container rows", children: [_jsxs(Flex, { className: "column column-tokens", children: [_jsx(Flex, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: _jsx(Input, { value: inputValue, onChange: onInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }), _jsx(Flex, { className: "column column-tokenicons" })] }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column column-discount", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)", children: ["DISCOUNT", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('discount'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-arr", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)", children: ["ARR", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('arr'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-terms", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)", children: ["TERMS", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-tokensremaining", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)", children: ["TOKENS REMAINING", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('tokensRemaining'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "column column-hotbond" })] })] })] }));
+    }, []);
+    var handleChangeChainFilterOption = useCallback(function (newOptions) {
+        setChainFilterOption(newOptions);
+    }, [setChainFilterOption]);
+    return (_jsxs(Flex, { className: "header-container", children: [_jsx(Flex, { className: "header-container filters", children: _jsx(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: handleChangeChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption }) }), _jsxs(Flex, { className: "header-container rows", children: [_jsxs(Flex, { className: "column column-tokens", children: [_jsx(Flex, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: _jsx(Input, { value: inputValue, onChange: onInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }), _jsx(Flex, { className: "column column-tokenicons" })] }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column column-discount", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)", children: ["DISCOUNT", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('discount'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-arr", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)", children: ["ARR", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('arr'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-terms", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)", children: ["TERMS", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-tokensremaining", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)", children: ["TOKENS REMAINING", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('tokensRemaining'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "column column-hotbond" })] })] })] }));
 };
 export default BondRowHeader;

package/dist/hooks/useCookie.d.ts

@@ -0,0 +1,9 @@
+interface UseCookieOptions {
+    expires?: number;
+}
+declare function useCookie<T>(key: string, defaultValue: T): {
+    cookie: T;
+    updateCookie: (value: T, options?: UseCookieOptions) => void;
+    removeCookie: () => void;
+};
+export default useCookie;

package/dist/hooks/useCookie.js

@@ -0,0 +1,29 @@
+import { useCallback, useState } from 'react';
+function useCookie(key, defaultValue) {
+    var getCookie = function () {
+        var cookie = typeof window !== 'undefined' ? window.document.cookie.split('; ').find(function (row) { return row.startsWith(key); }) : null;
+        if (cookie)
+            return JSON.parse(cookie.slice(key.length + 1));
+        return defaultValue;
+    };
+    var _a = useState(getCookie), cookie = _a[0], setCookieState = _a[1];
+    var updateCookie = useCallback(function (value) {
+        if (typeof window === 'undefined')
+            return;
+        var defaultExpiry = 6 * 30; // Default to approximately six months
+        var str = "".concat(key, "=").concat(JSON.stringify(value));
+        var date = new Date();
+        date.setTime(date.getTime() + defaultExpiry * 24 * 60 * 60 * 1000);
+        str += "; expires=".concat(date.toUTCString());
+        window.document.cookie = str;
+        setCookieState(value);
+    }, [key]);
+    var removeCookie = useCallback(function () {
+        if (typeof window === 'undefined')
+            return;
+        document.cookie = "".concat(key, "=; Expires=Thu, 01 Jan 1970 00:00:01 GMT;");
+        setCookieState(defaultValue);
+    }, [defaultValue, key]);
+    return { cookie: cookie, updateCookie: updateCookie, removeCookie: removeCookie };
+}
+export default useCookie;

package/dist/pages/YourBonds/YourBonds.js

@@ -113,8 +113,6 @@ var YourBonds = function (_a) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        console.log("ACCOUNT");
-                        console.log(account);
                         if (!(account && bondData)) return [3 /*break*/, 4];
                         _a.label = 1;
                     case 1:
@@ -122,9 +120,6 @@ var YourBonds = function (_a) {
                         return [4 /*yield*/, Promise.all(MAINNET_CHAINS.map(function (chain) { return fetchUserOwnedBillsDataAsync(chain, account, bondData); }))];
                     case 2:
                         results = _a.sent();
-                        console.log('RESULTS-----');
-                        console.log(results);
-                        console.log('-----');
                         mappedBills = results.flat().flatMap(function (results) { return results.userOwnedBills; });
                         setMappedUserBills(mappedBills);
                         console.log('User owned bills data:', mappedBills);

package/dist/scss/BondMenu.scss

@@ -0,0 +1,22 @@
+.menu-container.filters {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+}
+
+.filters.network {
+    display: flex;
+    width: 100%
+}
+
+.filters.desktop-rec {
+    display: flex;
+    width: 100%
+}
+
+.filters.mobile-rec {
+    display: flex;
+    width: 100%
+}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.0.521",
+  "version": "1.0.523",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

package/dist/components/uikit-sdk/Toggle/index.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-declare const Toggle: ({ options, activeOption, handleToggle, }: {
-    options: string[];
-    activeOption: string;
-    handleToggle: (newOption: string) => void;
-}) => React.JSX.Element;
-export default Toggle;

package/dist/components/uikit-sdk/Toggle/index.js

@@ -1,44 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import styles from './styles';
-import Text from '../Text';
-import Flex from '../Flex';
-import { AnimatePresence, motion } from 'framer-motion';
-// import { useBills } from 'state/bills/hooks'
-// import { BondsViewOptions } from '../../../views/Bonds/BondsListView'
-// import useRefresh from '../../../hooks/useRefresh'
-var Toggle = function (_a) {
-    // const bills = useBills()
-    // const { fastRefresh } = useRefresh()
-    // const claimableBillsAmount = useMemo(() => {
-    //   return bills
-    //     ?.filter((bill) => (bill?.userOwnedBillsData?.length ?? 0) > 0)
-    //     ?.map((bill) => {
-    //       return {
-    //         billIds: bill.userOwnedBillsData
-    //           ?.filter((b) => parseFloat(b.pendingRewards) > 0)
-    //           .map((b) => {
-    //             return b.id
-    //           }),
-    //       }
-    //     })
-    //     ?.filter((bill) => bill?.billIds?.length ?? 0 > 0)
-    //     ?.reduce((total, ownerBills) => total + (ownerBills.billIds?.length || 0), 0)
-    //   /* eslint-disable react-hooks/exhaustive-deps */
-    // }, [fastRefresh])
-    var options = _a.options, activeOption = _a.activeOption, handleToggle = _a.handleToggle;
-    return (_jsx(Flex, { sx: styles.container, children: _jsx(AnimatePresence, { initial: false, children: options.map(function (option) {
-                return (_jsx(motion.div, { animate: { opacity: option === activeOption ? 1 : 0.6, scale: option === activeOption ? 1 : 0.9 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2, type: 'spring', stiffness: 50 }, sx: { overflow: 'hidden', width: '100%' }, children: _jsx(Flex, { sx: __assign(__assign({}, styles.switch), { background: option === activeOption ? 'primaryButton' : 'white2' }), onClick: function () { return handleToggle(option); }, children: _jsx(Text, { sx: { fontSize: '14px' }, children: option }) }) }, option));
-            }) }) }));
-};
-export default Toggle;

package/dist/components/uikit-sdk/Toggle/styles.d.ts

@@ -1,3 +0,0 @@
-import { ThemeUIStyleObject } from 'theme-ui';
-declare const styles: Record<string, ThemeUIStyleObject>;
-export default styles;

package/dist/components/uikit-sdk/Toggle/styles.js

@@ -1,40 +0,0 @@
-var styles = {
-    container: {
-        display: 'flex',
-        borderRadius: '10px',
-        background: 'white2',
-        width: '100%',
-        position: 'relative',
-    },
-    switch: {
-        borderRadius: '10px',
-        color: 'primaryButtonDisable',
-        justifyContent: 'center',
-        px: '14px',
-        py: '5px',
-        cursor: 'pointer',
-        '&:hover': {
-            filter: '20%',
-        },
-    },
-    button: {
-        position: 'absolute',
-        border: 0,
-        top: 0,
-        height: '100%',
-        transition: 'left 0.2s linear',
-        textTransform: 'none',
-        '&:hover': {
-            filter: 'none',
-        },
-    },
-    input: {
-        bottom: 0,
-        left: 0,
-        position: 'absolute',
-        opacity: 0,
-        pointerEvents: 'none',
-        width: '100%',
-    },
-};
-export default styles;