@ape.swap/bonds-sdk 1.0.375 → 1.0.377

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -66,6 +66,7 @@ import '../../scss/BondModal.scss';
66
66
  import BOND_ABI from '../../config/abi/bond.json';
67
67
  import ERC_20_ABI from '../../config/abi/bond.json';
68
68
  import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
69
+ import { NETWORK_ICONS } from '../../config/constants/chains';
69
70
  var BondModal = function (_a) {
70
71
  var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
71
72
  if (!isOpen)
@@ -192,22 +193,22 @@ var BondModal = function (_a) {
192
193
  });
193
194
  }); };
194
195
  return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: bondData.map(function (bond) {
195
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
196
- return (_jsx(React.Fragment, { 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] })), _jsx(Flex, __assign({ className: "modal modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_a = bond.showcaseTokenName) !== null && _a !== void 0 ? _a : bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_b = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { 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 ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat((_d = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _d === void 0 ? void 0 : _d.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat(((((_e = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _e !== void 0 ? _e : 0) * 365) / vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days ? "".concat(vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), (_j = parseFloat(maxBuy(bond).toFixed(0))) === null || _j === void 0 ? void 0 : _j.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend(inputValue), " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)) }, { children: ["$ ", premium(bond, inputValue)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_k = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _k !== void 0 ? _k : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
197
- if (v.currentTarget.value.includes(',')) {
198
- v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
199
- }
200
- if (v.currentTarget.value.includes('%')) {
201
- v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
202
- }
203
- if (v.currentTarget.value === '.') {
204
- v.currentTarget.value = '0.';
205
- }
206
- v.currentTarget.value =
207
- !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
208
- ? v.currentTarget.value
209
- : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
210
- } }) })), _jsx(Flex, __assign({ className: "input-container token" }, { children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName }))] })), _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: approvalStatus === true ?
196
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
197
+ return (_jsx(React.Fragment, { 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] })), _jsx(Flex, __assign({ className: "modal modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container" }, { children: [_jsx(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _a !== void 0 ? _a : 'question' }), _jsx(TokenImage, { symbol: (_b = bond.showcaseTokenName) !== null && _b !== void 0 ? _b : bond.payoutTokenName, size: 50 })] })) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0], variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { 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 ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 0) * 365) / vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days ? "".concat(vestingTime((_j = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _j !== void 0 ? _j : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), (_k = parseFloat(maxBuy(bond).toFixed(0))) === null || _k === void 0 ? void 0 : _k.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend(inputValue), " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)) }, { children: ["$ ", premium(bond, inputValue)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_l = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _l !== void 0 ? _l : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsxs(Flex, __assign({ className: "input-container inputrow" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
198
+ if (v.currentTarget.value.includes(',')) {
199
+ v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
200
+ }
201
+ if (v.currentTarget.value.includes('%')) {
202
+ v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
203
+ }
204
+ if (v.currentTarget.value === '.') {
205
+ v.currentTarget.value = '0.';
206
+ }
207
+ v.currentTarget.value =
208
+ !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
209
+ ? v.currentTarget.value
210
+ : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
211
+ } }) })), _jsxs(Flex, __assign({ className: "input-container token" }, { children: [_jsx(Flex, __assign({ className: "input-container bondicon" }, { children: _jsxs("div", __assign({ 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.principalTokenName) !== null && _o !== void 0 ? _o : bond.payoutTokenName, size: 30 })] })) })), _jsx(Flex, __assign({ className: "title-container tokenname-small" }, { children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName }))] }))] })), _jsxs(Flex, __assign({ className: "input-container balancerow" }, { children: [_jsx(Flex, __assign({ className: "balancerow text" }, { children: "Balance: " })), _jsx(Flex, __assign({ className: "balancerow max" }, { children: _jsx(Button, { children: "Max" }) }))] }))] })), _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: approvalStatus === true ?
211
212
  _jsxs(Button, __assign({ onClick: handleBuy }, { children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] }))
212
213
  :
213
214
  _jsx(Button, __assign({ onClick: handleApprove }, { children: "Approve" })) }))] }))] }))] })) })) }, bond.billAddress));
@@ -111,16 +111,16 @@ var YourBonds = function (_a) {
111
111
  });
112
112
  }); };
113
113
  // Fetch data for user owned bill
114
+ var _d = useState([]), bondData = _d[0], setBondData = _d[1];
115
+ var _e = useState([]), userOwnedBillsData = _e[0], setUserOwnedBillsData = _e[1];
116
+ var _f = useState(false), isModalOpen = _f[0], setIsModalOpen = _f[1];
117
+ var _g = useState(null), selectedBill = _g[0], setSelectedBill = _g[1];
114
118
  useEffect(function () {
115
119
  axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
116
120
  var bonds = response.data.bonds;
117
121
  setBondData(bonds);
118
122
  });
119
123
  }, []);
120
- var _d = useState([]), bondData = _d[0], setBondData = _d[1];
121
- var _e = useState(false), isModalOpen = _e[0], setIsModalOpen = _e[1];
122
- var _f = useState(null), selectedBill = _f[0], setSelectedBill = _f[1];
123
- var _g = useState([]), userOwnedBillsData = _g[0], setUserOwnedBillsData = _g[1];
124
124
  useEffect(function () {
125
125
  var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
126
126
  var results, error_2;
@@ -72,6 +72,7 @@ var YourBondsModal = function (_a) {
72
72
  var _b = useWeb3React(), account = _b.account, chainId = _b.chainId, isActive = _b.isActive;
73
73
  // Fetch data for user owned bill
74
74
  var _c = useState([]), bondData = _c[0], setBondData = _c[1];
75
+ var _d = useState([]), userOwnedBillsData = _d[0], setUserOwnedBillsData = _d[1];
75
76
  useEffect(function () {
76
77
  axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
77
78
  var bond = response.data.bonds.filter(function (x) {
@@ -80,7 +81,6 @@ var YourBondsModal = function (_a) {
80
81
  setBondData(bond);
81
82
  });
82
83
  }, [bondAddress]);
83
- var _d = useState([]), userOwnedBillsData = _d[0], setUserOwnedBillsData = _d[1];
84
84
  useEffect(function () {
85
85
  var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
86
86
  var results, error_1;
@@ -124,12 +124,8 @@ var YourBondsModal = function (_a) {
124
124
  return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: userOwnedBillsData.flat().map(function (data) {
125
125
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
126
126
  var userBill = data.userOwnedBills.find(function (bill) { return bill.bond.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
127
- console.log("USER BILL LOG");
128
- console.log(userBill);
129
127
  var attributes = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _a === void 0 ? void 0 : _a.data.attributes) === null || _b === void 0 ? void 0 : _b.filter(function (attrib) { return BILL_ATTRIBUTES.includes(attrib.trait_type); });
130
- console.log("ATTRIBUTES LOG");
131
- console.log(attributes);
132
- return userBill ? (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "yourbondsmodal backdrop" }, { children: _jsxs(Flex, __assign({ className: "yourbondsmodal content" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "yourbondsmodal table-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal bondimage" }, { children: _jsx("img", { src: (_c = userBill.nftData) === null || _c === void 0 ? void 0 : _c.data.image }) })), _jsxs(Flex, __assign({ className: "yourbondsmodal yourbondinfo" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container" }, { children: [_jsx(Svg, { width: 18, height: 18, icon: (_d = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 'question' }), _jsx(TokenImage, { symbol: (_e = userBill.bond.showcaseTokenName) !== null && _e !== void 0 ? _e : userBill.bond.payoutTokenName, size: 40 })] })) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: _jsx(StyledHeadingText, { children: (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName }) })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: (_g = userBill.bond.tags) === null || _g === void 0 ? void 0 : _g.slice(0, 1).map(function (tag) {
128
+ return userBill ? (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "yourbondsmodal backdrop" }, { children: _jsxs(Flex, __assign({ className: "yourbondsmodal content" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "yourbondsmodal table-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal bondimage" }, { children: _jsx("img", { src: (_c = userBill.nftData) === null || _c === void 0 ? void 0 : _c.data.image }) })), _jsxs(Flex, __assign({ className: "yourbondsmodal yourbondinfo" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container" }, { children: [_jsx(Svg, { width: 18, height: 18, icon: (_d = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 'question' }), _jsx(TokenImage, { symbol: (_e = userBill.bond.showcaseTokenName) !== null && _e !== void 0 ? _e : userBill.bond.payoutTokenName, size: 40 })] })) })), _jsx(Flex, __assign({ className: "title-container tokenname" }, { children: _jsx(StyledHeadingText, { children: (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName }) })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: (_g = userBill.bond.tags) === null || _g === void 0 ? void 0 : _g.slice(0, 1).map(function (tag) {
133
129
  return (_jsx(Flex, __assign({ sx: { marginRight: '10px' } }, { children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }), tag));
134
130
  }) })), _jsxs(Text, __assign({ sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] } }, { children: ["#", userBill.id] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo blocks-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block attributes" }, { children: _jsxs(Flex, __assign({ sx: { flexDirection: 'column', width: '100%' } }, { children: [_jsxs(Flex, __assign({ sx: {
135
131
  justifyContent: 'space-between',
@@ -97,13 +97,52 @@
97
97
  align-items: center;
98
98
  }
99
99
 
100
- .title-container.bondname {
100
+ .icon-container {
101
+ position: relative;
102
+ display: inline-block;
103
+ }
104
+
105
+ .icon-container svg {
106
+ position: absolute;
107
+ top: -8px;
108
+ right: -5px;
109
+ z-index: 1;
110
+ }
111
+
112
+ .icon-container img {
113
+ display: block;
114
+ }
115
+
116
+ .icon-container-small {
117
+ position: relative;
118
+ display: inline-block;
119
+ }
120
+
121
+ .icon-container-small svg {
122
+ position: absolute;
123
+ top: -5px;
124
+ right: -4px;
125
+ z-index: 1;
126
+ }
127
+
128
+ .icon-container-small img {
129
+ display: block;
130
+ }
131
+
132
+ .title-container.tokenname {
101
133
  display: flex;
102
134
  flex-direction: row;
103
135
  align-items: center;
104
136
  padding-left: 20px;
105
137
  }
106
138
 
139
+ .title-container.tokenname-small {
140
+ display: flex;
141
+ flex-direction: row;
142
+ align-items: center;
143
+ padding-left: 10px;
144
+ }
145
+
107
146
  .title-container.price-container {
108
147
  display: flex;
109
148
  flex-direction: column;
@@ -258,7 +297,7 @@
258
297
 
259
298
  .modal-container.input-container {
260
299
  display: flex;
261
- flex-direction: row;
300
+ flex-direction: column;
262
301
  background: var(--theme-ui-colors-white3);
263
302
  border-radius: 10px;
264
303
  min-height: 100px;
@@ -267,6 +306,23 @@
267
306
  padding: 10px;
268
307
  }
269
308
 
309
+ .input-container.inputrow {
310
+ flex-direction: row;
311
+ }
312
+
313
+ .input-container.balancerow {
314
+ flex-direction: row;
315
+ align-items: center;
316
+ }
317
+
318
+ .balancerow.text {
319
+ align-items: center;
320
+ }
321
+
322
+ .balancerow.max {
323
+ align-items: center;
324
+ }
325
+
270
326
  .input-container.input {
271
327
  background: var(--theme-ui-colors-white3);
272
328
  border-radius: 10px;
@@ -117,7 +117,7 @@
117
117
  }
118
118
 
119
119
 
120
- .title-container.bondname {
120
+ .title-container.tokenname {
121
121
  display: flex;
122
122
  flex-direction: row;
123
123
  align-items: center;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Ape Bond SDK",
4
4
  "author": "Ape Bond",
5
5
  "license": "MIT",
6
- "version": "1.0.375",
6
+ "version": "1.0.377",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",
9
9
  "types": "dist/index.d.ts",