@ape.swap/bonds-sdk 1.0.623 → 1.0.625

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.
Files changed (7) hide show
  1. package/dist/components/Modals/BondModal/BondModal.js +24 -34
  2. package/dist/components/Modals/YourBondsModal/YourBondsModal.js +40 -31
  3. package/dist/pages/YourBonds/YourBonds.js +50 -38
  4. package/dist/scss/BondModal.scss +24 -0
  5. package/dist/scss/YourBonds.scss +7 -6
  6. package/dist/scss/YourBondsModal.scss +24 -0
  7. package/package.json +1 -1
package/dist/components/Modals/BondModal/BondModal.js CHANGED
@@ -54,21 +54,19 @@ import ERC_20_ABI from '../../../config/abi/erc20.json';
54
54
  import { NETWORK_ICONS } from '../../../config/constants/chains';
55
55
  import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
56
56
  import '../../../scss/BondModal.scss';
57
- import { useWriteContract } from "wagmi";
57
+ import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
58
58
  import { PUBLIC_RPC_URLS } from "../../../config/constants/networks";
59
59
  var BondModal = function (_a) {
60
60
  var account = _a.account, isActive = _a.isActive, isOpen = _a.isOpen, accountChainId = _a.accountChainId, onClose = _a.onClose, bondAddress = _a.bondAddress;
61
61
  if (!isOpen)
62
62
  return null;
63
63
  var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract, writeContractAsync = _b.writeContractAsync;
64
- // const { isLoading: isConfirming, isSuccess: isConfirmed } =
65
- // useWaitForTransactionReceipt({
66
- // confirmations: 4,
67
- // chainId: accountChainId,
68
- // hash: hash,
69
- // pollingInterval: 1_000
70
- // });
71
- var _c = useState([]), bondData = _c[0], setBondData = _c[1];
64
+ var _c = useWaitForTransactionReceipt({
65
+ confirmations: 4,
66
+ chainId: accountChainId,
67
+ hash: hash,
68
+ }), isConfirming = _c.isLoading, isConfirmed = _c.isSuccess;
69
+ var _d = useState([]), bondData = _d[0], setBondData = _d[1];
72
70
  //This is a temp solution, but we will force approval each time, and then once set we will set status here and allow
73
71
  //user to buy
74
72
  //Check with Fede if this needs to be temp, if we force approval everytime, isn't this fine?
@@ -83,17 +81,16 @@ var BondModal = function (_a) {
83
81
  case 1:
84
82
  _a.trys.push([1, 3, , 4]);
85
83
  console.log('HANDLEBUY CLICKED');
86
- maxPrice = new BigNumber(bondData[0].trueBillPrice).times(102).div(100).toFixed(0);
84
+ maxPrice = new BigNumber(bondData[0].trueBillPrice).times(102).div(100);
87
85
  amount = convertToTokenValue(inputValue, decimals);
88
86
  console.log('BillAddress:', billAddress);
89
87
  console.log('Amount:', amount);
90
88
  console.log('MaxPrice:', maxPrice);
91
- console.log('Price:', bondData[0].trueBillPrice);
92
89
  return [4 /*yield*/, writeContractAsync({
93
90
  address: billAddress,
94
91
  abi: BOND_ABI,
95
92
  functionName: 'deposit',
96
- args: [amount, maxPrice, account],
93
+ args: [amount, maxPrice.toFixed(0), account],
97
94
  })];
98
95
  case 2:
99
96
  tx = _a.sent();
@@ -112,7 +109,7 @@ var BondModal = function (_a) {
112
109
  }
113
110
  });
114
111
  }); };
115
- var _d = useState(null), buyTx = _d[0], setBuyTx = _d[1];
112
+ var _e = useState(null), buyTx = _e[0], setBuyTx = _e[1];
116
113
  //You approve the token, not the contract (this code will have to be updated for zap)
117
114
  var handleApprove = function () { return __awaiter(void 0, void 0, void 0, function () {
118
115
  var tokenAddress, decimals, amount, tx, error_2;
@@ -125,7 +122,6 @@ var BondModal = function (_a) {
125
122
  case 1:
126
123
  _a.trys.push([1, 3, , 4]);
127
124
  amount = convertToTokenValue(inputValue, decimals);
128
- console.log('Amount:', amount);
129
125
  return [4 /*yield*/, writeContractAsync({
130
126
  address: tokenAddress,
131
127
  abi: ERC_20_ABI,
@@ -134,20 +130,8 @@ var BondModal = function (_a) {
134
130
  })];
135
131
  case 2:
136
132
  tx = _a.sent();
137
- // const receipt = useWaitForTransactionReceipt({
138
- // confirmations: 4,
139
- // chainId: accountChainId,
140
- // hash: tx,
141
- // pollingInterval: 1_000
142
- // });
143
- // console.log('Receipt',receipt);
144
- // if(receipt.isSuccess) {
145
- // setReceiptTx(receipt.data.transactionHash);
146
- // console.log('Receipt:', receipt);
147
- // }
148
133
  if (tx) {
149
134
  setApproveTx(tx);
150
- console.log('setApproveTx:', tx);
151
135
  }
152
136
  return [3 /*break*/, 4];
153
137
  case 3:
@@ -159,10 +143,16 @@ var BondModal = function (_a) {
159
143
  }
160
144
  });
161
145
  }); };
162
- var _e = useState(null), receiptTx = _e[0], setReceiptTx = _e[1];
163
146
  var _f = useState(null), approveTx = _f[0], setApproveTx = _f[1];
164
- var _g = useState(null), tokenBalance = _g[0], setTokenBalance = _g[1];
165
- var _h = useState(null), tokenDecimals = _h[0], setTokenDecimals = _h[1];
147
+ var _g = useState(null), toastMessage = _g[0], setToastMessage = _g[1];
148
+ useEffect(function () {
149
+ if (isConfirmed) {
150
+ setToastMessage("Transaction Complete.");
151
+ setTimeout(function () { return setToastMessage(null); }, 10000);
152
+ }
153
+ }, [approveTx, buyTx, isConfirmed]);
154
+ var _h = useState(null), tokenBalance = _h[0], setTokenBalance = _h[1];
155
+ var _j = useState(null), tokenDecimals = _j[0], setTokenDecimals = _j[1];
166
156
  useEffect(function () {
167
157
  if (isActive && account && bondData.length > 0) {
168
158
  getTokenBalance(bondData[0].chainId, bondData[0].principalToken, account).then(function (_a) {
@@ -235,13 +225,13 @@ var BondModal = function (_a) {
235
225
  var singlePurchaseLimit = new BigNumber((_c = bond === null || bond === void 0 ? void 0 : bond.maxPayout) !== null && _c !== void 0 ? _c : 0).div(new BigNumber(10).pow((_d = bond === null || bond === void 0 ? void 0 : bond.payoutTokenDecimals) !== null && _d !== void 0 ? _d : 18));
236
226
  return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
237
227
  };
238
- var _j = useState(''), inputValue = _j[0], setInputValue = _j[1];
228
+ var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
239
229
  var handleInputChange = function (event) {
240
230
  setInputValue(event.target.value);
241
231
  };
242
232
  return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: bondData.map(function (bond) {
243
233
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
244
- return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal modal-backdrop", children: _jsxs(Flex, { className: "modal modal-content", children: [_jsx(Flex, { className: "modal modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "modal-container table-container", children: [_jsxs(Flex, { className: "modal-container title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { 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, { className: "title-container bondname", children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }), _jsxs(Flex, { className: "title-container price-container", children: [_jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bond)] }), _jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bond)] })] }), _jsx(Flex, { 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, { className: "modal-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "modal-container blocks-container", children: [_jsxs(Flex, { className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-header header", children: ["Discount", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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, { className: "modal-block column-arr", children: [_jsxs(Flex, { className: "block-header header", children: ["ARR", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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, { className: "modal-block column-term", children: [_jsxs(Flex, { className: "block-header header", children: ["Terms", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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, { className: "modal-block column-maxbuy", children: [_jsxs(Flex, { className: "block-header header", children: ["Max Buy", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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, { className: "modal-container text-container", children: [_jsxs(Flex, { className: "text-container row", children: [_jsx(Flex, { className: "row-container spend", children: "You spend:" }), _jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container premium", children: ["Premium:", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "row-container premium-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsxs(Flex, { className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)), children: ["$ ", premium(bond, inputValue)] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { 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, { className: "row-container get-val", children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] })] })] }), _jsxs(Flex, { className: "modal-container input-container", children: [_jsxs(Flex, { className: "input-container inputrow", children: [_jsx(Flex, { className: "input-container input", children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
234
+ return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal modal-backdrop", children: _jsxs(Flex, { className: "modal modal-content", children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "modal modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "modal-container table-container", children: [_jsxs(Flex, { className: "modal-container title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { 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, { className: "title-container bondname", children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }), _jsxs(Flex, { className: "title-container price-container", children: [_jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bond)] }), _jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bond)] })] }), _jsx(Flex, { 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, { className: "modal-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "modal-container blocks-container", children: [_jsxs(Flex, { className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-header header", children: ["Discount", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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, { className: "modal-block column-arr", children: [_jsxs(Flex, { className: "block-header header", children: ["ARR", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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, { className: "modal-block column-term", children: [_jsxs(Flex, { className: "block-header header", children: ["Terms", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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, { className: "modal-block column-maxbuy", children: [_jsxs(Flex, { className: "block-header header", children: ["Max Buy", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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, { className: "modal-container text-container", children: [_jsxs(Flex, { className: "text-container row", children: [_jsx(Flex, { className: "row-container spend", children: "You spend:" }), _jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container premium", children: ["Premium:", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "row-container premium-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsxs(Flex, { className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)), children: ["$ ", premium(bond, inputValue)] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { 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, { className: "row-container get-val", children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] })] })] }), _jsxs(Flex, { className: "modal-container input-container", children: [_jsxs(Flex, { className: "input-container inputrow", children: [_jsx(Flex, { className: "input-container input", children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
245
235
  if (v.currentTarget.value.includes(',')) {
246
236
  v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
247
237
  }
@@ -255,10 +245,10 @@ var BondModal = function (_a) {
255
245
  !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
256
246
  ? v.currentTarget.value
257
247
  : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
258
- } }) }), _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.principalTokenName) !== null && _o !== void 0 ? _o : bond.payoutTokenName, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName })] })] }), 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, { onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modal-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: approveTx != null ?
259
- _jsxs(Button, { disabled: isPending, onClick: handleBuy, children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] })
248
+ } }) }), _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.principalTokenName) !== null && _o !== void 0 ? _o : bond.payoutTokenName, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName })] })] }), 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, { onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modal-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: approveTx != null && isConfirmed ?
249
+ _jsx(Button, { disabled: isPending || isConfirming, onClick: handleBuy, children: isConfirming ? 'Confirming...' : "Buy ".concat(bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName) })
260
250
  :
261
- _jsx(Button, { disabled: isPending, onClick: handleApprove, children: "Approve" }) })] })] })] }) }) }, bond.billAddress));
251
+ _jsx(Button, { disabled: isPending || isConfirming, onClick: handleApprove, children: isConfirming ? 'Confirming...' : 'Approve' }) })] })] })] }) }) }, bond.billAddress));
262
252
  }) }));
263
253
  };
264
254
  export default BondModal;
package/dist/components/Modals/YourBondsModal/YourBondsModal.js CHANGED
@@ -51,7 +51,7 @@ import { getPendingVesting } from '../../../hooks/usePendingVesting';
51
51
  import { formatNumberSI } from '../../../utils/formatNumber';
52
52
  import { StyledHeadingText, TraitsContentContainer } from './styles';
53
53
  import '../../../scss/YourBondsModal.scss';
54
- import { useWriteContract } from 'wagmi';
54
+ import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
55
55
  import BOND_ABI from '../../../config/abi/bond.json';
56
56
  var YourBondsModal = function (_a) {
57
57
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
@@ -59,40 +59,49 @@ var YourBondsModal = function (_a) {
59
59
  if (!isOpen)
60
60
  return null;
61
61
  var _s = useWeb3React(), account = _s.account, chainId = _s.chainId, isActive = _s.isActive;
62
- var _t = useWriteContract(), hash = _t.data, isPending = _t.isPending, writeContract = _t.writeContract;
62
+ var _t = useWriteContract(), hash = _t.data, isPending = _t.isPending, writeContract = _t.writeContract, writeContractAsync = _t.writeContractAsync;
63
+ var _u = useWaitForTransactionReceipt({
64
+ confirmations: 4,
65
+ chainId: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId,
66
+ hash: hash,
67
+ }), isConfirming = _u.isLoading, isConfirmed = _u.isSuccess;
63
68
  var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
64
- var address;
69
+ var address, tx, error_1;
65
70
  return __generator(this, function (_a) {
66
- address = billAddress;
67
- try {
68
- // @ts-ignore
69
- writeContract({
70
- address: address,
71
- abi: BOND_ABI,
72
- functionName: 'redeem',
73
- args: [billId],
74
- });
75
- if (hash) {
76
- setClaimTx(hash);
77
- }
71
+ switch (_a.label) {
72
+ case 0:
73
+ address = billAddress;
74
+ _a.label = 1;
75
+ case 1:
76
+ _a.trys.push([1, 3, , 4]);
77
+ return [4 /*yield*/, writeContractAsync({
78
+ address: address,
79
+ abi: BOND_ABI,
80
+ functionName: 'redeem',
81
+ args: [billId],
82
+ })];
83
+ case 2:
84
+ tx = _a.sent();
85
+ if (tx) {
86
+ setClaimTx(tx);
87
+ }
88
+ return [3 /*break*/, 4];
89
+ case 3:
90
+ error_1 = _a.sent();
91
+ console.error('Approval failed:', error_1);
92
+ return [3 /*break*/, 4];
93
+ case 4: return [2 /*return*/];
78
94
  }
79
- catch (error) {
80
- console.error('Approval failed:', error);
81
- }
82
- return [2 /*return*/];
83
95
  });
84
96
  }); };
85
- var _u = useState(null), claimTx = _u[0], setClaimTx = _u[1];
86
- var _v = useState(null), toastMessage = _v[0], setToastMessage = _v[1];
97
+ var _v = useState(null), claimTx = _v[0], setClaimTx = _v[1];
98
+ var _w = useState(null), toastMessage = _w[0], setToastMessage = _w[1];
87
99
  useEffect(function () {
88
- if (claimTx) {
89
- setToastMessage("Transaction complete: ".concat(claimTx));
90
- setTimeout(function () { return setToastMessage(null); }, 5000); // Hide toast after 5 seconds
100
+ if (isConfirmed) {
101
+ setToastMessage("Transaction Complete.");
102
+ setTimeout(function () { return setToastMessage(null); }, 10000);
91
103
  }
92
- }, [claimTx]);
93
- // Fetch data for user owned bill
94
- var _w = useState([]), bondData = _w[0], setBondData = _w[1];
95
- var _x = useState([]), userOwnedBillsData = _x[0], setUserOwnedBillsData = _x[1];
104
+ }, [claimTx, isConfirmed]);
96
105
  // Functions to calculate display values for modal
97
106
  var totalPending = function (userBill) {
98
107
  var _a, _b, _c, _d;
@@ -107,10 +116,10 @@ var YourBondsModal = function (_a) {
107
116
  return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
108
117
  };
109
118
  var BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
110
- var _y = useState(false), isOpenTraits = _y[0], setIsOpenTraits = _y[1];
111
- var _z = useState(false), billRendered = _z[0], setBillRendered = _z[1];
119
+ var _x = useState(false), isOpenTraits = _x[0], setIsOpenTraits = _x[1];
120
+ var _y = useState(false), billRendered = _y[0], setBillRendered = _y[1];
112
121
  var attributes = (_c = (_b = userBill.nftData) === null || _b === void 0 ? void 0 : _b.data.attributes) === null || _c === void 0 ? void 0 : _c.filter(function (attrib) { return BILL_ATTRIBUTES.includes(attrib.trait_type); });
113
- return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal backdrop", children: _jsxs(Flex, { className: "yourbondsmodal content", children: [_jsx(Flex, { className: "yourbondsmodal header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "yourbondsmodal table-container", children: [_jsx(Flex, { className: "yourbondsmodal bondimage", children: _jsx("img", { src: (_d = userBill.nftData) === null || _d === void 0 ? void 0 : _d.data.image }) }), _jsxs(Flex, { className: "yourbondsmodal yourbondinfo", children: [_jsxs(Flex, { className: "yourbondinfo title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 18, height: 18, icon: (_e = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _e !== void 0 ? _e : 'question' }), _jsx(TokenImage, { symbol: (_f = userBill.bond.showcaseTokenName) !== null && _f !== void 0 ? _f : userBill.bond.payoutTokenName, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_g = userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_h = userBill.bond.tags) === null || _h === void 0 ? void 0 : _h.slice(0, 1).map(function (tag) {
122
+ return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal backdrop", children: _jsxs(Flex, { className: "yourbondsmodal content", children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "yourbondsmodal header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "yourbondsmodal table-container", children: [_jsx(Flex, { className: "yourbondsmodal bondimage", children: _jsx("img", { src: (_d = userBill.nftData) === null || _d === void 0 ? void 0 : _d.data.image }) }), _jsxs(Flex, { className: "yourbondsmodal yourbondinfo", children: [_jsxs(Flex, { className: "yourbondinfo title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 18, height: 18, icon: (_e = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _e !== void 0 ? _e : 'question' }), _jsx(TokenImage, { symbol: (_f = userBill.bond.showcaseTokenName) !== null && _f !== void 0 ? _f : userBill.bond.payoutTokenName, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_g = userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_h = userBill.bond.tags) === null || _h === void 0 ? void 0 : _h.slice(0, 1).map(function (tag) {
114
123
  return (_jsx(Flex, { sx: { marginRight: '10px' }, children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
115
124
  }) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsx(Flex, { className: "yourbondinfo-block attributes", children: _jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [_jsxs(Flex, { sx: {
116
125
  justifyContent: 'space-between',
package/dist/pages/YourBonds/YourBonds.js CHANGED
@@ -65,43 +65,55 @@ import { fetchUserOwnedBillsDataAsync } from './fetchBillsUser';
65
65
  import { Input } from '../../components/uikit-sdk/Input';
66
66
  import { YourBondsModal } from "../../index";
67
67
  import BOND_ABI from '../../config/abi/bond.json';
68
- import { useWriteContract } from 'wagmi';
68
+ import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
69
69
  var YourBonds = function (_a) {
70
- var account = _a.account;
71
- var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract;
70
+ var account = _a.account, accountChainId = _a.accountChainId;
71
+ var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract, writeContractAsync = _b.writeContractAsync;
72
+ var _c = useWaitForTransactionReceipt({
73
+ confirmations: 4,
74
+ chainId: accountChainId,
75
+ hash: hash,
76
+ }), isConfirming = _c.isLoading, isConfirmed = _c.isSuccess;
72
77
  var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
73
- var address;
78
+ var address, tx, error_1;
74
79
  return __generator(this, function (_a) {
75
- address = billAddress;
76
- try {
77
- // @ts-ignore
78
- writeContract({
79
- address: address,
80
- abi: BOND_ABI,
81
- functionName: 'redeem',
82
- args: [billId],
83
- });
84
- if (hash) {
85
- setClaimTx(hash);
86
- }
87
- }
88
- catch (error) {
89
- console.error('Approval failed:', error);
80
+ switch (_a.label) {
81
+ case 0:
82
+ address = billAddress;
83
+ _a.label = 1;
84
+ case 1:
85
+ _a.trys.push([1, 3, , 4]);
86
+ return [4 /*yield*/, writeContractAsync({
87
+ address: address,
88
+ abi: BOND_ABI,
89
+ functionName: 'redeem',
90
+ args: [billId],
91
+ })];
92
+ case 2:
93
+ tx = _a.sent();
94
+ if (tx) {
95
+ setClaimTx(tx);
96
+ }
97
+ return [3 /*break*/, 4];
98
+ case 3:
99
+ error_1 = _a.sent();
100
+ console.error('Approval failed:', error_1);
101
+ return [3 /*break*/, 4];
102
+ case 4: return [2 /*return*/];
90
103
  }
91
- return [2 /*return*/];
92
104
  });
93
105
  }); };
94
- var _c = useState(null), claimTx = _c[0], setClaimTx = _c[1];
95
- var _d = useState(null), toastMessage = _d[0], setToastMessage = _d[1];
106
+ var _d = useState(null), claimTx = _d[0], setClaimTx = _d[1];
107
+ var _e = useState(null), toastMessage = _e[0], setToastMessage = _e[1];
96
108
  useEffect(function () {
97
- if (claimTx) {
98
- setToastMessage("Transaction complete: ".concat(claimTx));
99
- setTimeout(function () { return setToastMessage(null); }, 5000); // Hide toast after 5 seconds
109
+ if (isConfirmed) {
110
+ setToastMessage("Transaction Complete.");
111
+ setTimeout(function () { return setToastMessage(null); }, 10000);
100
112
  }
101
- }, [claimTx]);
113
+ }, [claimTx, isConfirmed]);
102
114
  // Fetch data
103
- var _e = useState([]), bondData = _e[0], setBondData = _e[1];
104
- var _f = useState([]), mappedUserBills = _f[0], setMappedUserBills = _f[1];
115
+ var _f = useState([]), bondData = _f[0], setBondData = _f[1];
116
+ var _g = useState([]), mappedUserBills = _g[0], setMappedUserBills = _g[1];
105
117
  useEffect(function () {
106
118
  axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
107
119
  var bonds = response.data.bonds;
@@ -110,7 +122,7 @@ var YourBonds = function (_a) {
110
122
  }, []);
111
123
  useEffect(function () {
112
124
  var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
113
- var results, mappedBills, error_1;
125
+ var results, mappedBills, error_2;
114
126
  return __generator(this, function (_a) {
115
127
  switch (_a.label) {
116
128
  case 0:
@@ -126,8 +138,8 @@ var YourBonds = function (_a) {
126
138
  console.log('User owned bills data:', mappedBills);
127
139
  return [3 /*break*/, 4];
128
140
  case 3:
129
- error_1 = _a.sent();
130
- console.error('Error fetching user owned bills data:', error_1);
141
+ error_2 = _a.sent();
142
+ console.error('Error fetching user owned bills data:', error_2);
131
143
  return [3 /*break*/, 4];
132
144
  case 4: return [2 /*return*/];
133
145
  }
@@ -135,8 +147,8 @@ var YourBonds = function (_a) {
135
147
  }); };
136
148
  fetchData();
137
149
  }, [account, bondData, claimTx]);
138
- var _g = useState(null), sortConfig = _g[0], setSortConfig = _g[1];
139
- var _h = useState(mappedUserBills), sortedBonds = _h[0], setSortedBonds = _h[1];
150
+ var _h = useState(null), sortConfig = _h[0], setSortConfig = _h[1];
151
+ var _j = useState(mappedUserBills), sortedBonds = _j[0], setSortedBonds = _j[1];
140
152
  var handleSort = function (key) {
141
153
  var direction = 'asc';
142
154
  if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === key && (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.direction) === 'asc') {
@@ -212,16 +224,16 @@ var YourBonds = function (_a) {
212
224
  return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
213
225
  };
214
226
  // Modal
215
- var _j = useState(false), isModalOpen = _j[0], setIsModalOpen = _j[1];
216
- var _k = useState(undefined), selectedBill = _k[0], setSelectedBill = _k[1];
227
+ var _k = useState(false), isModalOpen = _k[0], setIsModalOpen = _k[1];
228
+ var _l = useState(undefined), selectedBill = _l[0], setSelectedBill = _l[1];
217
229
  var rowClick = function (bill) {
218
230
  console.log(bill);
219
231
  setSelectedBill(bill);
220
232
  setIsModalOpen(true);
221
233
  };
222
234
  // Search logic
223
- var _l = useState(''), inputValue = _l[0], setInputValue = _l[1];
224
- var _m = useState(sortedBonds), filteredBonds = _m[0], setFilteredBonds = _m[1];
235
+ var _m = useState(''), inputValue = _m[0], setInputValue = _m[1];
236
+ var _o = useState(sortedBonds), filteredBonds = _o[0], setFilteredBonds = _o[1];
225
237
  useEffect(function () {
226
238
  if (inputValue === '') {
227
239
  setFilteredBonds(sortedBonds);
@@ -236,7 +248,7 @@ var YourBonds = function (_a) {
236
248
  setInputValue(event.target.value);
237
249
  };
238
250
  // Page render logic
239
- var _o = useState(false), bondsRendered = _o[0], setBondsRendered = _o[1];
251
+ var _p = useState(false), bondsRendered = _p[0], setBondsRendered = _p[1];
240
252
  useEffect(function () {
241
253
  if (filteredBonds.length > 0) {
242
254
  setBondsRendered(true);
package/dist/scss/BondModal.scss CHANGED
@@ -405,4 +405,28 @@
405
405
  Button {
406
406
  width: 375px;
407
407
  }
408
+ }
409
+
410
+ .toast {
411
+ position: fixed;
412
+ bottom: 50px;
413
+ right: 20px;
414
+ background-color: var(--theme-ui-colors-white2);
415
+ color: white;
416
+ font-size: 24px;
417
+ padding: 10px 20px;
418
+ border-radius: 5px;
419
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
420
+ z-index: 9999;
421
+ animation: fadein 0.5s, fadeout 0.5s 4.5s;
422
+ }
423
+
424
+ @keyframes fadein {
425
+ from { bottom: 0; opacity: 0; }
426
+ to { bottom: 50px; opacity: 1; }
427
+ }
428
+
429
+ @keyframes fadeout {
430
+ from { bottom: 50px; opacity: 1; }
431
+ to { bottom: 0; opacity: 0; }
408
432
  }
package/dist/scss/YourBonds.scss CHANGED
@@ -132,23 +132,24 @@
132
132
 
133
133
  .toast {
134
134
  position: fixed;
135
- bottom: 20px;
135
+ bottom: 50px;
136
136
  right: 20px;
137
- background-color: #333;
138
- color: #fff;
137
+ background-color: var(--theme-ui-colors-white2);
138
+ color: white;
139
+ font-size: 24px;
139
140
  padding: 10px 20px;
140
141
  border-radius: 5px;
141
142
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
142
- z-index: 1000;
143
+ z-index: 9999;
143
144
  animation: fadein 0.5s, fadeout 0.5s 4.5s;
144
145
  }
145
146
 
146
147
  @keyframes fadein {
147
148
  from { bottom: 0; opacity: 0; }
148
- to { bottom: 20px; opacity: 1; }
149
+ to { bottom: 50px; opacity: 1; }
149
150
  }
150
151
 
151
152
  @keyframes fadeout {
152
- from { bottom: 20px; opacity: 1; }
153
+ from { bottom: 50px; opacity: 1; }
153
154
  to { bottom: 0; opacity: 0; }
154
155
  }
package/dist/scss/YourBondsModal.scss CHANGED
@@ -263,4 +263,28 @@
263
263
  Button {
264
264
  width: 125px;
265
265
  }
266
+ }
267
+
268
+ .toast {
269
+ position: fixed;
270
+ bottom: 50px;
271
+ right: 20px;
272
+ background-color: var(--theme-ui-colors-white2);
273
+ color: white;
274
+ font-size: 24px;
275
+ padding: 10px 20px;
276
+ border-radius: 5px;
277
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
278
+ z-index: 9999;
279
+ animation: fadein 0.5s, fadeout 0.5s 4.5s;
280
+ }
281
+
282
+ @keyframes fadein {
283
+ from { bottom: 0; opacity: 0; }
284
+ to { bottom: 50px; opacity: 1; }
285
+ }
286
+
287
+ @keyframes fadeout {
288
+ from { bottom: 50px; opacity: 1; }
289
+ to { bottom: 0; opacity: 0; }
266
290
  }
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.623",
6
+ "version": "1.0.625",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",
9
9
  "types": "dist/index.d.ts",