@ape.swap/bonds-sdk 1.0.779 → 1.1.0-test.3

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import '../../scss/AccordionText.scss';
+interface AccordionTextProps {
+    title?: string;
+    body?: string;
+    isVisible?: boolean;
+}
+declare const AccordionText: React.FC<AccordionTextProps>;
+export default AccordionText;

package/dist/components/AccordionText/index.js

@@ -0,0 +1,17 @@
+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/TokenInfoAndName/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BondsDataResponse } from '../../types/bonds';
+import '../../scss/TokenInfoName.scss';
 export declare const NETWORK_COLORS: Partial<Record<number, string>>;
 declare const TokenInfoAndName: ({ bill, vestEnds }: {
     bill: BondsDataResponse;

package/dist/components/TokenInfoAndName/index.js

@@ -6,6 +6,7 @@ import { ChainId } from '../../enum/apeswaplists';
 import Index from '../uikit-sdk/TokenImage';
 // import { CleanedBondsState } from 'state/bills/types'
 // import FavComponent from '../../../components/FavComponent'
+import '../../scss/TokenInfoName.scss';
 export var NETWORK_COLORS = (_a = {},
     _a[ChainId.BSC] = '#F3BA2F',
     _a[ChainId.MAINNET] = '#627eea',
@@ -19,39 +20,11 @@ export var NETWORK_COLORS = (_a = {},
 var TokenInfoAndName = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
     var bill = _a.bill, vestEnds = _a.vestEnds;
-    return (_jsxs(Flex, { sx: {
-            width: '100%',
-            position: 'relative',
-            justifyContent: ['space-between', 'space-between', 'space-between', 'flex-start'],
-            mr: ['10px', '10px', '10px', '0px'],
-            height: '100%',
-            alignItems: 'center',
-            ml: '-20px',
-            pl: '20px',
-            overflow: 'hidden',
-            borderRadius: '10px'
-        }, children: [_jsx(Flex, { sx: {
-                    position: 'absolute',
-                    left: '0px',
-                    top: '0px',
-                    overflow: 'hidden',
-                    borderRadius: '10px 0px 8px 0px',
-                    zIndex: 5,
-                }, children: _jsx(Svg, { width: 18, height: 18, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) }), _jsx(Flex, { sx: {
-                    position: 'absolute',
-                    zIndex: 0,
-                    left: '0px',
-                    width: '30px',
-                    height: '100%',
-                    background: NETWORK_COLORS[bill.chainId],
-                    filter: 'blur(35px)',
-                } }), _jsxs(Flex, { sx: { pl: '6px', width: '100%', maxWidth: '170px', alignItems: 'center' }, children: [_jsx(Index, { symbol: (_c = bill.showcaseTokenName) !== null && _c !== void 0 ? _c : bill.earnToken.symbol, size: 33 }), _jsxs(Flex, { sx: {
-                            ml: '10px',
-                            fontSize: '16px',
-                            fontWeight: 700,
-                            width: '100%',
-                            flexDirection: 'column',
-                        }, children: [(_d = bill.showcaseTokenName) !== null && _d !== void 0 ? _d : bill.earnToken.symbol, vestEnds && (_jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] })] }), _jsxs(Flex, { children: [_jsx(Flex, { sx: { width: '25px' } }), _jsx(Flex, { sx: {
+    return (_jsxs(Flex, { className: "tokeninfoname container", children: [_jsx(Flex, { className: "tokeninfoname chain", sx: {
+                    background: NETWORK_COLORS[bill.chainId]
+                }, children: _jsx(Svg, { width: 18, height: 18, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) }), _jsx(Flex, { className: "tokeninfoname gradient", sx: {
+                    background: NETWORK_COLORS[bill.chainId]
+                } }), _jsxs(Flex, { className: "tokeninfoname tokencontainer", children: [_jsx(Index, { symbol: (_c = bill.showcaseTokenName) !== null && _c !== void 0 ? _c : bill.earnToken.symbol, size: 33 }), _jsxs(Flex, { className: "tokeninfoname tokentext", children: [(_d = bill.showcaseTokenName) !== null && _d !== void 0 ? _d : bill.earnToken.symbol, vestEnds && (_jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] })] }), _jsxs(Flex, { children: [_jsx(Flex, { sx: { width: '25px' } }), _jsx(Flex, { sx: {
                             ml: '10px',
                             display: ['none', 'none', 'none', 'flex'],
                             minWidth: '70px',

package/dist/components/TokenSelectorModal/TokenRow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ChainId, Token } from '@ape.swap/apeswap-lists';
+declare const TokenRow: ({ token, chainId, handleTokenSelect, }: {
+    token: "NATIVE" | Token;
+    chainId: ChainId;
+    handleTokenSelect: (currency: string) => void;
+}) => React.JSX.Element;
+export default TokenRow;

package/dist/components/TokenSelectorModal/TokenRow.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import { Flex } from '../uikit-sdk';
+import TokenImage from '../uikit-sdk/TokenImage';
+import getNativeTicker from '../../utils/getNativeTicker';
+import useCurrencyBalance from '../../state/balance/useCurrencyBalance';
+import { useAccount } from 'wagmi';
+import BigNumber from 'bignumber.js';
+import { Spinner } from 'theme-ui';
+var TokenRow = function (_a) {
+    var _b;
+    var token = _a.token, chainId = _a.chainId, handleTokenSelect = _a.handleTokenSelect;
+    var symbol = token === 'NATIVE' ? getNativeTicker(chainId) : token.symbol;
+    var tokenAddress = token === 'NATIVE' ? 'NATIVE' : token.address[chainId];
+    var address = useAccount().address;
+    var tokenBalance = useCurrencyBalance(token, address !== null && address !== void 0 ? address : null, chainId).data;
+    return (_jsxs(Flex, { sx: { p: '8px', justifyContent: 'space-between', cursor: 'pointer', '&:hover': { background: 'white4' } }, onClick: function () { return handleTokenSelect(tokenAddress !== null && tokenAddress !== void 0 ? tokenAddress : ''); }, children: [_jsxs(Flex, { children: [_jsx(TokenImage, { symbol: symbol, chain: chainId, size: 30 }), _jsx(Flex, { sx: { mx: '8px' }, children: symbol })] }), _jsx(Flex, { children: tokenBalance === undefined ? ('0') : !tokenBalance ? (_jsx(Spinner, { size: 15 })) : (_jsx(_Fragment, { children: (_b = new BigNumber(tokenBalance)) === null || _b === void 0 ? void 0 : _b.toPrecision(5) })) })] }));
+};
+export default TokenRow;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ChainId } from '@ape.swap/apeswap-lists';
+import { Token } from '@ape.swap/apeswap-lists';
+interface TokenSelectorModalProps {
+    bondPrincipalToken?: Token;
+    handleCurrencySelect: (currency: string) => void;
+    chainId: ChainId;
+    onDismiss?: () => void;
+}
+declare const TokenSelectorModal: React.FC<TokenSelectorModalProps>;
+export default TokenSelectorModal;

package/dist/components/TokenSelectorModal/index.js

@@ -0,0 +1,56 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { isAddress } from '../../utils';
+import { zapInputTokens } from '../../config/constants/zapInputTokens';
+import { Flex, Modal } from '../uikit-sdk';
+import { Input } from 'theme-ui';
+import TokenRow from './TokenRow';
+var TokenSelectorModal = function (_a) {
+    var _b;
+    var bondPrincipalToken = _a.bondPrincipalToken, handleCurrencySelect = _a.handleCurrencySelect, chainId = _a.chainId, onDismiss = _a.onDismiss;
+    var _c = useState(''), searchQuery = _c[0], setSearchQuery = _c[1];
+    var zapInputList = zapInputTokens[chainId];
+    var parsedList = (_b = zapInputList === null || zapInputList === void 0 ? void 0 : zapInputList.filter(function (token) {
+        return !searchQuery ? true : token.symbol.toLowerCase().includes(searchQuery.toLowerCase());
+    })) !== null && _b !== void 0 ? _b : [];
+    var inputTokenList = bondPrincipalToken
+        ? __spreadArray([bondPrincipalToken, 'NATIVE'], parsedList, true) : __spreadArray(['NATIVE'], parsedList, true);
+    var handleTokenSelect = useCallback(function (currency) {
+        handleCurrencySelect(currency);
+        setSearchQuery('');
+        if (onDismiss)
+            onDismiss();
+    }, [onDismiss, handleCurrencySelect, setSearchQuery]);
+    var handleInput = useCallback(function (event) {
+        var input = event.target.value;
+        var checksummedInput = isAddress(input);
+        setSearchQuery(checksummedInput || input);
+    }, [setSearchQuery]);
+    return (_jsx(Modal, { onDismiss: onDismiss, title: "Tokens", children: _jsx(Flex, { sx: {
+                flexDirection: 'column',
+                maxHeight: 'none',
+                height: 'auto',
+                width: 'auto',
+                overflowY: 'auto',
+            }, children: _jsxs(Flex, { sx: { flexDirection: 'column' }, children: [_jsx(Flex, { sx: { position: 'relative', margin: '10px 0px 15px 0px' }, children: _jsx(Input, { id: "token-search-input", placeholder: "Name or Address", autoComplete: "off", value: searchQuery, onChange: handleInput, 
+                            // icon="search"
+                            autoFocus: true, sx: { borderRadius: 'normal' } }) }), _jsx(Flex, { sx: {
+                            borderRadius: '10px',
+                            background: 'white3',
+                            flexDirection: 'column',
+                            height: '300px',
+                            overflowY: 'auto',
+                        }, children: inputTokenList.map(function (token, i) {
+                            return _jsx(TokenRow, { token: token, chainId: chainId, handleTokenSelect: handleTokenSelect }, i);
+                        }) })] }) }) }));
+};
+export default TokenSelectorModal;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ChainId } from '../../enum/apeswaplists';
+import { Token } from '@ape.swap/apeswap-lists';
+declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, chainId, handleMaxBtn, handleCurrencySelect, enableZap, bondPrincipalToken, tokenBalance, selectedTokenPrice, }: {
+    typedValue: string;
+    setTypedValue: (value: React.SetStateAction<string>) => void;
+    selectedToken?: "NATIVE" | Token;
+    chainId: ChainId;
+    handleMaxBtn: () => void;
+    handleCurrencySelect: (value: string) => void;
+    enableZap?: boolean;
+    bondPrincipalToken?: Token;
+    tokenBalance?: string;
+    selectedTokenPrice?: number;
+}) => React.JSX.Element;
+export default TokenSelectorPanel;

package/dist/components/TokenSelectorPanel/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Flex, Input } from 'theme-ui';
+import { isNumber } from '../../utils/numbers';
+import { Button, Svg } from '../uikit-sdk';
+import TokenImage from '../uikit-sdk/TokenImage';
+import getNativeTicker from '../../utils/getNativeTicker';
+import useModal from '../../hooks/useModal';
+import TokenSelectorModal from '../TokenSelectorModal';
+import BigNumber from 'bignumber.js';
+import { isArray } from 'lodash';
+var TokenSelectorPanel = function (_a) {
+    var _b, _c, _d;
+    var typedValue = _a.typedValue, setTypedValue = _a.setTypedValue, selectedToken = _a.selectedToken, chainId = _a.chainId, handleMaxBtn = _a.handleMaxBtn, handleCurrencySelect = _a.handleCurrencySelect, enableZap = _a.enableZap, bondPrincipalToken = _a.bondPrincipalToken, tokenBalance = _a.tokenBalance, selectedTokenPrice = _a.selectedTokenPrice;
+    var tokenBalanceString = tokenBalance ? new BigNumber(tokenBalance).toPrecision(5) : 'loading';
+    var splited = typeof selectedToken !== 'string' ? (_b = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.symbol) === null || _b === void 0 ? void 0 : _b.split('-') : undefined;
+    var handleInputChange = function (event) {
+        setTypedValue(event.target.value);
+    };
+    var onTokenSelectorModal = useModal(_jsx(TokenSelectorModal, { bondPrincipalToken: bondPrincipalToken, handleCurrencySelect: handleCurrencySelect, chainId: chainId }), true, true, "tokenSelectorOnLiquidityModal".concat(bondPrincipalToken))[0];
+    return (_jsxs(Flex, { className: "modaltable-container buy-container", children: [_jsxs(Flex, { className: "input-container inputrow", children: [_jsx(Flex, { className: "input-container input", children: _jsx(Input, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
+                                if (v.currentTarget.value.includes(',')) {
+                                    v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
+                                }
+                                if (v.currentTarget.value.includes('%')) {
+                                    v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
+                                }
+                                if (v.currentTarget.value === '.') {
+                                    v.currentTarget.value = '0.';
+                                }
+                                v.currentTarget.value =
+                                    !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
+                                        ? v.currentTarget.value
+                                        : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
+                            } }) }), _jsxs(Flex, { className: "input-container token", onClick: onTokenSelectorModal, children: [_jsxs(Flex, { children: [_jsx(Flex, { className: "input-container bondicon", children: isArray(splited) ? (_jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 30, chain: chainId })) : (_jsx(TokenImage, { symbol: selectedToken === 'NATIVE' ? getNativeTicker(chainId) : ((_c = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.symbol) !== null && _c !== void 0 ? _c : ''), size: 30, chain: chainId })) }), _jsx(Flex, { className: "title-container tokenname-small", children: selectedToken === 'NATIVE' ? getNativeTicker(chainId) : ((_d = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.symbol) !== null && _d !== void 0 ? _d : '') })] }), _jsx(Flex, { sx: { mr: '8px' }, children: _jsx(Svg, { icon: "caret" }) })] })] }), tokenBalance && (_jsxs(Flex, { className: "input-container balancerow", children: [_jsx(Flex, { children: selectedTokenPrice && typedValue ? "$".concat((selectedTokenPrice * parseFloat(typedValue)).toFixed(2)) : '' }), _jsxs(Flex, { children: [_jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), _jsx(Flex, { className: "balancerow max", children: tokenBalance !== '0' && (_jsx(Button, { className: "max-button", onClick: handleMaxBtn, children: "Max" })) })] })] }))] }));
+};
+export default TokenSelectorPanel;

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

@@ -1,6 +1,7 @@
 import React from 'react';
-declare const TokenImage: ({ symbol, size, chain }: {
-    symbol: string;
+declare const TokenImage: ({ symbol, symbol2, size, chain }: {
+    symbol?: string;
+    symbol2?: string;
     size: number;
     chain?: number;
 }) => React.JSX.Element;

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

@@ -4,15 +4,38 @@ import { APESWAP_LIST_REPO } from '../../../config/constants/lists';
 import { NETWORK_ICONS } from '../../../config/constants/chains';
 import { Svg } from '../index';
 var TokenImage = function (_a) {
-    var _b;
-    var symbol = _a.symbol, size = _a.size, chain = _a.chain;
-    return (_jsxs(Flex, { sx: {
+    var _b, _c;
+    var symbol = _a.symbol, symbol2 = _a.symbol2, size = _a.size, chain = _a.chain;
+    return symbol2 ? (_jsxs(Flex, { sx: {
+            minWidth: size * 1.5 - 2,
+            height: size - 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '55px',
+            position: 'relative',
+        }, children: [_jsx("img", { src: "".concat(APESWAP_LIST_REPO, "/assets/").concat(symbol === null || symbol === void 0 ? void 0 : symbol.toUpperCase(), ".png"), alt: "tokenImgFor:".concat(symbol), width: size, height: size, style: { position: 'absolute', zIndex: 4001, left: 0 } }), _jsx("img", { src: "".concat(APESWAP_LIST_REPO, "/assets/").concat(symbol2.toUpperCase(), ".png"), alt: "tokenImgFor:".concat(symbol2), width: size, height: size, style: { position: 'absolute', zIndex: 4000, left: '33%' } }), chain && (_jsx(Flex, { sx: {
+                    zIndex: 4002,
+                    position: 'absolute',
+                    top: '-2px',
+                    right: "-".concat(size / 5, "px"),
+                    overflow: 'hidden',
+                    borderRadius: '50px',
+                }, children: _jsx(Svg, { width: size / 2.5, height: size / 2.5, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[chain]) !== null && _b !== void 0 ? _b : 'question' }) }))] })) : (_jsxs(Flex, { sx: {
             width: size - 2,
             height: size - 2,
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: '55px',
             position: 'relative',
-        }, children: [_jsx("img", { src: "".concat(APESWAP_LIST_REPO, "/assets/").concat(symbol.toUpperCase(), ".png"), alt: "tokenImgFor:".concat(symbol), width: size, height: symbol === 'BNB-ICHI' ? 19 : size }), chain && (_jsx(Flex, { sx: { zIndex: 5, position: 'absolute', top: '-2px', right: '-4px', overflow: 'hidden', borderRadius: '50px' }, children: _jsx(Svg, { width: size / 2.5, height: size / 2.5, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[chain]) !== null && _b !== void 0 ? _b : 'question' }) }))] }));
+        }, children: [_jsx("img", { src: "".concat(APESWAP_LIST_REPO, "/assets/").concat(symbol === null || symbol === void 0 ? void 0 : symbol.toUpperCase(), ".png"), alt: "tokenImgFor:".concat(symbol), width: size, height: symbol === 'BNB-ICHI' ? 19 : size }), chain && (_jsx(Flex, { sx: {
+                    zIndex: 5,
+                    position: 'absolute',
+                    top: '-2px',
+                    right: '-4px',
+                    overflow: 'hidden',
+                    borderRadius: '50px',
+                    width: "".concat(size / 2.5, "px"),
+                    height: "".concat(size / 2.5, "px")
+                }, children: _jsx(Svg, { width: size / 2.5, height: size / 2.5, icon: (_c = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[chain]) !== null && _c !== void 0 ? _c : 'question' }) }))] }));
 };
 export default TokenImage;