@ape.swap/bonds-sdk 1.0.90 → 1.0.91

package/dist/components/BondModal/BondModal.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsxs as _jsxs, jsx as _jsx } from "theme-ui/jsx-runtime";
-import { Flex, ThemeUIProvider } from "theme-ui";
+import { Flex, ThemeUIProvider, Input } from "theme-ui";
 import { useWeb3React } from "@web3-react/core";
 import { getColumnDiscountStyle } from '../Bonds/styles';
 import { defaultTheme } from '../../theme';
@@ -27,6 +27,6 @@ var BondModal = function (_a) {
     var vestingTime = function (vestingTerm) {
         return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
     };
-    return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsxs(Flex, __assign({ className: "modal modal-header" }, { children: [_jsx(Flex, __assign({ className: "new" }, { children: "NEW" })), _jsxs(Flex, __assign({ className: "project-info" }, { children: ["Project Info", _jsx(Flex, __assign({ className: "project-info icon" }, { children: _jsx(Svg, { icon: "expand" }) }))] })), _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) }))] })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsx(Flex, __assign({ className: "modal-container title-container" }, { children: _jsx("h2", { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }) })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: _jsx("p", { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }) })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount", sx: getColumnDiscountStyle((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill" }) }))] })), "".concat((_c = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill" }) }))] })), "".concat("".concat(((((_d = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _d !== void 0 ? _d : 0) * 365) / vestingTime((_e = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _e !== void 0 ? _e : 0).days).toFixed(2), "%"))] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill" }) }))] })), vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days ? "".concat(vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill" }) }))] })), "1,000,000"] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container button-container" }, { children: [_jsxs(Button, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }), _jsxs(Button, { children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] })] }))] })) })) })));
+    return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsxs(Flex, __assign({ className: "modal modal-header" }, { children: [_jsx(Flex, __assign({ className: "new" }, { children: "NEW" })), _jsxs(Flex, __assign({ className: "project-info" }, { children: ["Project Info", _jsx(Flex, __assign({ className: "project-info icon" }, { children: _jsx(Svg, { icon: "expand" }) }))] })), _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) }))] })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsx(Flex, __assign({ className: "modal-container title-container" }, { children: _jsx("h2", { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }) })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: _jsx("p", { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }) })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount", sx: getColumnDiscountStyle((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), "".concat((_c = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), "".concat("".concat(((((_d = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _d !== void 0 ? _d : 0) * 365) / vestingTime((_e = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _e !== void 0 ? _e : 0).days).toFixed(2), "%"))] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days ? "".concat(vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), "1,000,000"] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx("div", { children: "You spend:" }), _jsxs("div", { children: ["0 ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName, " = $ 0"] })] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs("div", { children: ["Premium: ", _jsx(Svg, { icon: "questionFill", width: "15px" })] }), _jsx("div", { children: "$ 0" })] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx("div", { children: "You get (over 90 days):" }), _jsxs("div", { children: ["0 ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ 0"] })] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { type: "number", className: "number-input", placeholder: "0.0" }) })), _jsx(Flex, __assign({ className: "input-container token" }, { children: "Token" }))] })), _jsxs(Flex, __assign({ className: "modal-container button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container get" }, { children: _jsxs(Button, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) })), _jsx(Flex, __assign({ className: "button-container buy" }, { children: _jsxs(Button, { children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] }) }))] }))] }))] })) })) })));
 };
 export default BondModal;

package/dist/scss/bondmodal.scss

@@ -8,15 +8,15 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 1000; /* Ensure it's on top */
+    z-index: 1000;
 }
 
 .modal.modal-content {
     display: flex;
     flex-direction: column;
     border-radius: 10px;
-    background-color: #0E0D16;
-    padding: 20px;
+    background-color: var(--theme-ui-colors-white2);
+    padding: 10px;
     border-radius: 10px;
     z-index: 1001;
     max-width: 700px;
@@ -27,6 +27,7 @@
     display: flex;
     justify-content: end;
     align-items: center;
+    padding: 5px;
 
     .svg-close {
         height: 12px;
@@ -75,7 +76,9 @@
     width: 100%;
     display: flex;
     flex-direction: column; 
-    padding: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
 }
 
 .modal-container.title-container {
@@ -94,8 +97,8 @@
     align-items: center;
     width: 100%;
     justify-content: space-around;
-    margin-bottom: 20px;
-    margin-top: 20px;
+    margin-bottom: 10px;
+    margin-top: 5px;
 }
 
 .modal-block {
@@ -122,7 +125,6 @@
 .block-header.icon {
     padding-left: 5px;
     align-items: start;
-    width: 18px;
     cursor: pointer;
 }
 
@@ -145,15 +147,76 @@
     width: 350px;
 }
 
+.modal-container.text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 12px;
+}
+
+.text-container.row {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.modal-container.input-container {
+    display: flex;
+    flex-direction: row;
+    background: var(--theme-ui-colors-white3);
+    border-radius: 10px;
+    min-height: 100px;
+    margin-top: 10px;
+    margin-bottom: 0px;
+    padding: 10px;
+}
+
+.input-container.input {
+    background: var(--theme-ui-colors-white3);
+    border-radius: 10px;
+    border: medium;
+    padding-right: 10px;
+    width: 80%;
+    height: 50px;
+    font-size: 22px;
+}
+
+.input-container.token {
+  display: flex;
+  background: var(--theme-ui-colors-white4);
+  border-radius: 10px;
+  position: relative;
+  width: 190px;
+  height: 40px;
+  padding: 5px 4px;
+  cursor: unset;
+}
+
 .modal-container.button-container {
     width: 100%;
+    padding-top: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.button-container.get {
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;    
 
     Button {
-        justify-content: center;
-        align-items: center;
-        flex: 1;
-        margin-left: 10px;
-        margin-right: 10px;
-        cursor: pointer;
+        width: 275px;
+    }
+}
+
+.button-container.buy {
+    justify-content: center;
+    align-items: center;
+
+    Button {
+        width: 375px;
     }
 }

package/package.json

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