@ape.swap/bonds-sdk 1.0.718 → 1.0.720

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 (5) hide show
  1. package/dist/components/Modals/YourBondsModal/YourBondsModal.js +21 -11
  2. package/dist/pages/YourBonds/YourBonds.js +1 -1
  3. package/dist/scss/YourBonds.scss +16 -0
  4. package/dist/scss/YourBondsModal.scss +7 -3
  5. package/package.json +1 -1
package/dist/components/Modals/YourBondsModal/YourBondsModal.js CHANGED
@@ -40,7 +40,7 @@ import React, { useEffect, useState } from 'react';
40
40
  import { Flex } from 'theme-ui';
41
41
  import { BigNumber } from 'bignumber.js';
42
42
  import { AnimatePresence, motion } from 'framer-motion';
43
- import { NETWORK_ICONS } from '../../../config/constants/chains';
43
+ import { NETWORK_ICONS, NETWORK_LABEL } from '../../../config/constants/chains';
44
44
  import { getBalanceNumber } from '../../../utils/getBalanceNumber';
45
45
  import { getFirstNonZeroDigits } from '../../../utils/roundNumber';
46
46
  import TokenImage from '../../uikit-sdk/TokenImage';
@@ -50,7 +50,7 @@ import { getPendingVesting } from '../../../hooks/usePendingVesting';
50
50
  import { formatNumberSI } from '../../../utils/formatNumber';
51
51
  import { StyledHeadingText, TraitsContentContainer } from './styles';
52
52
  import '../../../scss/YourBondsModal.scss';
53
- import { useChainId, useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
53
+ import { useChainId, useSwitchChain, useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
54
54
  import BOND_ABI from '../../../config/abi/bond.json';
55
55
  var YourBondsModal = function (_a) {
56
56
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
@@ -58,14 +58,15 @@ var YourBondsModal = function (_a) {
58
58
  if (!isOpen)
59
59
  return null;
60
60
  var chainId = useChainId();
61
- var _s = useWriteContract(), hash = _s.data, isPending = _s.isPending, writeContract = _s.writeContract, writeContractAsync = _s.writeContractAsync;
62
- var _t = useWaitForTransactionReceipt({
61
+ var _s = useSwitchChain(), chains = _s.chains, switchChain = _s.switchChain;
62
+ var _t = useWriteContract(), hash = _t.data, isPending = _t.isPending, writeContract = _t.writeContract, writeContractAsync = _t.writeContractAsync;
63
+ var _u = useWaitForTransactionReceipt({
63
64
  confirmations: 4,
64
65
  chainId: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId,
65
66
  hash: hash,
66
- }), isConfirming = _t.isLoading, isConfirmed = _t.isSuccess;
67
- var _u = useState(null), claimTx = _u[0], setClaimTx = _u[1];
68
- var _v = useState(null), toastMessage = _v[0], setToastMessage = _v[1];
67
+ }), isConfirming = _u.isLoading, isConfirmed = _u.isSuccess;
68
+ var _v = useState(null), claimTx = _v[0], setClaimTx = _v[1];
69
+ var _w = useState(null), toastMessage = _w[0], setToastMessage = _w[1];
69
70
  var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
70
71
  var address, tx, error_1;
71
72
  return __generator(this, function (_a) {
@@ -116,10 +117,10 @@ var YourBondsModal = function (_a) {
116
117
  return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
117
118
  };
118
119
  var BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
119
- var _w = useState(false), isOpenTraits = _w[0], setIsOpenTraits = _w[1];
120
- var _x = useState(false), billRendered = _x[0], setBillRendered = _x[1];
120
+ var _x = useState(false), isOpenTraits = _x[0], setIsOpenTraits = _x[1];
121
+ var _y = useState(false), billRendered = _y[0], setBillRendered = _y[1];
121
122
  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); });
122
- var _y = useState(false), isImageLoaded = _y[0], setIsImageLoaded = _y[1];
123
+ var _z = useState(false), isImageLoaded = _z[0], setIsImageLoaded = _z[1];
123
124
  var handleImageLoad = function () {
124
125
  setIsImageLoaded(true);
125
126
  };
@@ -137,6 +138,15 @@ var YourBondsModal = function (_a) {
137
138
  ? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), _jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)); })
138
139
  : BILL_ATTRIBUTES.map(function (attrib) {
139
140
  return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
140
- }) }) })) })] }) }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((totalPending(userBill) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 0)).toFixed(2), ")") })] })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _p !== void 0 ? _p : 'question' }), _jsx(TokenImage, { symbol: (_q = userBill.bond.showcaseTokenName) !== null && _q !== void 0 ? _q : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((claimable(userBill) * ((_r = parseFloat(earnTokenPrice(userBill.bond))) !== null && _r !== void 0 ? _r : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: _jsx(Button, { className: "action-button", disabled: claimable(userBill) === 0 || isPending || chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId), onClick: function () { return handleClaim(userBill.id, userBill.address); }, children: "CLAIM" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { className: "action-button", variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] }))] })] }) }) }, userBill.address) }));
141
+ }) }) })) })] }) }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((totalPending(userBill) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 0)).toFixed(2), ")") })] })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _p !== void 0 ? _p : 'question' }), _jsx(TokenImage, { symbol: (_q = userBill.bond.showcaseTokenName) !== null && _q !== void 0 ? _q : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((claimable(userBill) * ((_r = parseFloat(earnTokenPrice(userBill.bond))) !== null && _r !== void 0 ? _r : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ?
142
+ _jsxs(Button, { className: "switch-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
143
+ event.stopPropagation();
144
+ switchChain({ chainId: userBill.bond.chainId });
145
+ }, children: ["Switch to ", NETWORK_LABEL[userBill.bond.chainId]] })
146
+ :
147
+ _jsx(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
148
+ event.stopPropagation();
149
+ handleClaim(userBill.id, userBill.address);
150
+ }, children: "Claim" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { className: "transfer-button", variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] }))] })] }) }) }, userBill.address) }));
141
151
  };
142
152
  export default YourBondsModal;
package/dist/pages/YourBonds/YourBonds.js CHANGED
@@ -259,7 +259,7 @@ var YourBonds = function (_a) {
259
259
  _jsx(YourBondsModal, { isOpen: true, onClose: closeModal, userBill: selectedBill }), toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), bondsRendered && (_jsxs(Flex, { className: "yourbonds table-container", children: [_jsxs(Flex, { className: "yourbonds header-container", children: [_jsx(Flex, { className: "yourbonds column-tokens", children: _jsx(Flex, { className: "yourbonds column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: _jsx(Input, { value: inputValue, onChange: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), _jsxs(Flex, { className: "yourbonds column-bondinfo", children: [_jsxs(Flex, { className: "yourbonds header-claimable", children: ["CLAIMABLE", _jsx(Flex, { className: "yourbonds header-icon", onClick: function () { return handleSort('claimable'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "yourbonds header-pending", children: ["PENDING", _jsx(Flex, { className: "yourbonds header-icon", onClick: function () { return handleSort('pending'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "yourbonds header-terms", children: ["TERMS", _jsx(Flex, { className: "yourbonds header-icon", onClick: function () { return handleSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "yourbonds header-claimall" })] })] }), filteredBonds.map(function (bill) {
260
260
  var _a, _b;
261
261
  return (_jsxs(Flex, { className: "yourbonds bondrow-container", onClick: function () { return rowClick(bill); }, children: [_jsx(Flex, { className: "yourbonds column-tokens", children: _jsx(Flex, { className: "yourbonds column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) }) }), _jsxs(Flex, { className: "yourbonds column-bondinfo", children: [_jsxs(Flex, { className: "yourbonds column-claimable", children: [formatNumberSI(parseFloat(claimable(bill).toFixed(4)), 4), _jsx(Text, { sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' }, children: "($".concat((claimable(bill) * ((_a = parseFloat(earnTokenPrice(bill.bond))) !== null && _a !== void 0 ? _a : 0)).toFixed(2), ")") })] }), _jsxs(Flex, { className: "yourbonds column-pending", children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), _jsx(Text, { sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' }, children: "($".concat((totalPending(bill) * ((_b = parseFloat(earnTokenPrice(bill.bond))) !== null && _b !== void 0 ? _b : 0)).toFixed(2), ")") })] }), _jsx(Flex, { className: "yourbonds column-terms", children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") }), _jsx(Flex, { className: "yourbonds column-claimall", children: chainId !== bill.bond.chainId ?
262
- _jsxs(Button, { className: "claim-button", disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
262
+ _jsxs(Button, { className: "switch-button", disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
263
263
  event.stopPropagation();
264
264
  // Add your claim logic here
265
265
  switchChain({ chainId: bill.bond.chainId });
package/dist/scss/YourBonds.scss CHANGED
@@ -152,6 +152,22 @@
152
152
  filter: brightness(130%)
153
153
  }
154
154
  }
155
+
156
+ .switch-button {
157
+ height: auto;
158
+ line-height: 12px;
159
+ font-size: 14px;
160
+ font-weight: 600;
161
+ width: 100%;
162
+
163
+ @media (min-width: 1024px) {
164
+ height: 26px;
165
+ }
166
+
167
+ &:disabled {
168
+ filter: brightness(130%)
169
+ }
170
+ }
155
171
  }
156
172
 
157
173
  .toast {
package/dist/scss/YourBondsModal.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  z-index: 1001;
24
24
  max-width: 1200px;
25
25
  min-width: 1000px;
26
- height: 85%;
26
+ height: 80%;
27
27
  overflow: auto;
28
28
  }
29
29
 
@@ -252,7 +252,11 @@
252
252
  align-items: center;
253
253
  cursor: pointer;
254
254
 
255
- Button {
255
+ .switch-button {
256
+ width: 300px;
257
+ }
258
+
259
+ .claim-button {
256
260
  width: 300px;
257
261
  }
258
262
  }
@@ -261,7 +265,7 @@
261
265
  justify-content: center;
262
266
  align-items: center;
263
267
 
264
- Button {
268
+ .transfer-button {
265
269
  width: 125px;
266
270
  }
267
271
  }
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.718",
6
+ "version": "1.0.720",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",
9
9
  "types": "dist/index.d.ts",