@ape.swap/bonds-sdk 1.0.78-2.test.21 → 1.0.78-2.test.23

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/scss/AccordionText.scss

@@ -0,0 +1,11 @@
+.accordion-title {
+    padding-right: 10px;
+}
+
+
+// example to change icon color
+// .accordion-icon {
+//     svg {
+//         color: red;
+//     }
+// }

package/dist/scss/BondModal.scss

@@ -383,6 +383,12 @@
     }
 }
 
+.modaltable-container.accordion-container {
+    display: flex;
+    width: 100%;
+    padding-top: 10px;
+}
+
 .toast {
     position: fixed;
     top: 50px;
@@ -392,6 +398,8 @@
     font-size: 24px;
     padding: 10px 20px;
     border-radius: 5px;
+    height: 75px;
+    align-items: center;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     z-index: 9999;
     animation: fadein 0.5s, fadeout 0.5s 4.5s;

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

@@ -8,6 +8,9 @@ export interface BondModalProps {
     onClose: () => void;
     bondAddress: string | null;
     accountChainId: number;
+    accordionTitle: string;
+    accordionBody: string;
+    accordionVisible: boolean;
 }
 declare const BondModal: React.FC<BondModalProps>;
 export default BondModal;

package/dist/views/BondModal/BondModal.js

@@ -56,25 +56,26 @@ import '../../scss/BondModal.scss';
 import { useChainId, useSwitchChain, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { PUBLIC_RPC_URLS } from "../../config/constants/networks";
 import useModal from "../../hooks/useModal";
+import AccordionText from '../../components/AccordionText';
 var BondModal = function (_a) {
-    var account = _a.account, isActive = _a.isActive, isOpen = _a.isOpen, accountChainId = _a.accountChainId, onClose = _a.onClose, bondAddress = _a.bondAddress;
+    var account = _a.account, isActive = _a.isActive, isOpen = _a.isOpen, accountChainId = _a.accountChainId, onClose = _a.onClose, bondAddress = _a.bondAddress, _b = _a.accordionTitle, accordionTitle = _b === void 0 ? "What are Bonds?" : _b, _c = _a.accordionBody, accordionBody = _c === void 0 ? "Body" : _c, _d = _a.accordionVisible, accordionVisible = _d === void 0 ? false : _d;
     if (!isOpen)
         return null;
     var chainId = useChainId();
-    var _b = useSwitchChain(), chains = _b.chains, switchChain = _b.switchChain;
-    var _c = useState([]), bondData = _c[0], setBondData = _c[1];
-    var _d = useWriteContract(), hash = _d.data, isPending = _d.isPending, writeContract = _d.writeContract, writeContractAsync = _d.writeContractAsync;
-    var _e = useWaitForTransactionReceipt({
+    var _e = useSwitchChain(), chains = _e.chains, switchChain = _e.switchChain;
+    var _f = useState([]), bondData = _f[0], setBondData = _f[1];
+    var _g = useWriteContract(), hash = _g.data, isPending = _g.isPending, writeContract = _g.writeContract, writeContractAsync = _g.writeContractAsync;
+    var _h = useWaitForTransactionReceipt({
         confirmations: 4,
         chainId: chainId !== null && chainId !== void 0 ? chainId : accountChainId,
         hash: hash,
-    }), isConfirming = _e.isLoading, isConfirmed = _e.isSuccess;
-    var _f = useState(null), approveTx = _f[0], setApproveTx = _f[1];
-    var _g = useState(null), toastMessage = _g[0], setToastMessage = _g[1];
-    var _h = useState(null), buyTx = _h[0], setBuyTx = _h[1];
-    var _j = useState(null), tokenBalance = _j[0], setTokenBalance = _j[1];
-    var _k = useState(null), tokenDecimals = _k[0], setTokenDecimals = _k[1];
-    var _l = useState(''), inputValue = _l[0], setInputValue = _l[1];
+    }), isConfirming = _h.isLoading, isConfirmed = _h.isSuccess;
+    var _j = useState(null), approveTx = _j[0], setApproveTx = _j[1];
+    var _k = useState(null), toastMessage = _k[0], setToastMessage = _k[1];
+    var _l = useState(null), buyTx = _l[0], setBuyTx = _l[1];
+    var _m = useState(null), tokenBalance = _m[0], setTokenBalance = _m[1];
+    var _o = useState(null), tokenDecimals = _o[0], setTokenDecimals = _o[1];
+    var _p = useState(''), inputValue = _p[0], setInputValue = _p[1];
     var handleInputChange = function (event) {
         setInputValue(event.target.value);
     };
@@ -276,7 +277,7 @@ var BondModal = function (_a) {
                                                                     !!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", children: [_jsx(Flex, { className: "input-container bondicon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.lpToken.symbol) !== null && _o !== void 0 ? _o : bond.earnToken.symbol, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol })] })] }), isActive && account && (_jsxs(Flex, { className: "input-container balancerow", children: [_jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalance] }), _jsx(Flex, { className: "balancerow max", children: _jsx(Button, { className: "max-button", onClick: function () {
+                                                            } }) }), _jsxs(Flex, { className: "input-container token", children: [_jsx(Flex, { className: "input-container bondicon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.lpToken.symbol) !== null && _o !== void 0 ? _o : bond.earnToken.symbol, size: 30 })] }) }), _jsx(Flex, { className: "title-container bondname-small", children: bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol })] })] }), isActive && account && (_jsxs(Flex, { className: "input-container balancerow", children: [_jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalance] }), _jsx(Flex, { className: "balancerow max", children: _jsx(Button, { className: "max-button", onClick: function () {
                                                                 setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0');
                                                             }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modaltable-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { className: "action-button", onClick: onAsd, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol] }) }), _jsx(Flex, { className: "button-container buy", children: chainId !== bond.chainId
                                                     ?
@@ -288,7 +289,7 @@ var BondModal = function (_a) {
                                                         approveTx != null && isConfirmed ?
                                                             _jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: handleBuy, children: getActionButtonText(bond) })
                                                             :
-                                                                _jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: handleApprove, children: getActionButtonText(bond) }) })] })] })] }) }) }, bond.billAddress));
+                                                                _jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: handleApprove, children: getActionButtonText(bond) }) })] }), _jsx(Flex, { className: "modaltable-container accordion-container", children: _jsx(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) })] })] }) }) }, bond.billAddress));
         }) }));
 };
 export default BondModal;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.0.78-2.test.21",
+  "version": "1.0.78-2.test.23",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",