@ape.swap/bonds-sdk 1.0.427 → 1.0.429
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.
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BondsDataResponse } from "../../../types/bonds";
|
|
3
|
+
interface BondRowProps {
|
|
4
|
+
key: string;
|
|
5
|
+
bond: BondsDataResponse;
|
|
6
|
+
hotBonds: string[];
|
|
7
|
+
rowClick: (bond: BondsDataResponse) => void;
|
|
8
|
+
}
|
|
9
|
+
declare const BondRow: React.FC<BondRowProps>;
|
|
10
|
+
export default BondRow;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
13
|
+
import BigNumber from "bignumber.js";
|
|
14
|
+
import { ChainId } from "../../../enum/apeswaplists";
|
|
15
|
+
import ProgressBar from "../../ProgressBar/ProgressBar";
|
|
16
|
+
import ProgressBarWrapper from "../../ProgressBar/ProgressBarWrapper";
|
|
17
|
+
import TokenInfoAndName from "../../TokenInfoAndName";
|
|
18
|
+
import Tooltip from "../../Tooltip/Tooltip";
|
|
19
|
+
import { Flex, Svg, TooltipBubble } from "../../uikit-sdk";
|
|
20
|
+
import { formatDollar, formatValue } from "../../../utils/formatNumbers";
|
|
21
|
+
import getTimePeriods from "../../../utils/getTimePeriods";
|
|
22
|
+
import { BLOCK_EXPLORER } from "../../../config/constants/chains";
|
|
23
|
+
import { useState } from "react";
|
|
24
|
+
import { useNavigate } from "react-router-dom";
|
|
25
|
+
var BondRow = function (_a) {
|
|
26
|
+
var _b, _c, _d;
|
|
27
|
+
var bond = _a.bond, hotBonds = _a.hotBonds;
|
|
28
|
+
var navigate = useNavigate();
|
|
29
|
+
// Modal
|
|
30
|
+
var _e = useState(false), isModalOpen = _e[0], setIsModalOpen = _e[1];
|
|
31
|
+
var _f = useState(null), selectedBond = _f[0], setSelectedBond = _f[1];
|
|
32
|
+
var rowClick = function (bond) {
|
|
33
|
+
setSelectedBond(bond);
|
|
34
|
+
setIsModalOpen(true);
|
|
35
|
+
navigate("/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId), { replace: true });
|
|
36
|
+
};
|
|
37
|
+
// Functions for calcuations
|
|
38
|
+
var vestingTime = function (vestingTerm) {
|
|
39
|
+
return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
|
|
40
|
+
};
|
|
41
|
+
var getDiscountColor = function (discount) {
|
|
42
|
+
return discount < 0 ? 'discount-negative' : 'discount-positive';
|
|
43
|
+
};
|
|
44
|
+
var remainingPercentage = function (bond) {
|
|
45
|
+
var _a, _b;
|
|
46
|
+
var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.payoutTokenDecimals));
|
|
47
|
+
var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
|
|
48
|
+
return remainingTokens.div(totalMaxPayout).times(100).toNumber();
|
|
49
|
+
};
|
|
50
|
+
var remainingTokensFormat = function (bond) {
|
|
51
|
+
var _a;
|
|
52
|
+
return formatValue({ num: new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0') });
|
|
53
|
+
};
|
|
54
|
+
var remainingTokensUsd = function (bond) {
|
|
55
|
+
var _a, _b;
|
|
56
|
+
var tokens = new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
|
|
57
|
+
return tokens.times((_b = bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
|
|
58
|
+
};
|
|
59
|
+
var getBillContractURL = function (bond) {
|
|
60
|
+
var _a;
|
|
61
|
+
var selectedChain = (_a = bond.chainId) !== null && _a !== void 0 ? _a : ChainId.BSC;
|
|
62
|
+
var explorerLink = BLOCK_EXPLORER[selectedChain];
|
|
63
|
+
return "".concat(explorerLink, "/address/").concat(bond === null || bond === void 0 ? void 0 : bond.billAddress);
|
|
64
|
+
};
|
|
65
|
+
var calculateARR = function (bond) {
|
|
66
|
+
var _a;
|
|
67
|
+
var discount = (_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0;
|
|
68
|
+
var vestingDays = vestingTime(bond.vestingTerm).days;
|
|
69
|
+
return parseFloat((((discount * 365) / vestingDays).toFixed(2)));
|
|
70
|
+
};
|
|
71
|
+
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bond }) })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.payoutToken) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_b = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _b === void 0 ? void 0 : _b.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_c = bond.chainId) !== null && _c !== void 0 ? _c : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "more", width: "20px" }) })) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: (bond === null || bond === void 0 ? void 0 : bond.discount) !== undefined ? "".concat(bond.discount.toFixed(2), "%") : '-' })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: calculateARR(bond) !== undefined ? "".concat(calculateARR(bond), "%") : '-' })), _jsx(Flex, __assign({ className: "column column-terms" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
|
|
72
|
+
width: '127px',
|
|
73
|
+
height: '25px',
|
|
74
|
+
flexDirection: 'column',
|
|
75
|
+
justifyContent: 'center',
|
|
76
|
+
display: ['none', 'none', 'none', 'flex'],
|
|
77
|
+
}, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.payoutTokenName, " (").concat(formatDollar({
|
|
78
|
+
num: remainingTokensUsd(bond).toNumber(),
|
|
79
|
+
isPrice: true,
|
|
80
|
+
}), ")") }) })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) })) }))] }))] }), bond.billAddress));
|
|
81
|
+
};
|
|
82
|
+
export default BondRow;
|
|
@@ -54,7 +54,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
54
54
|
}
|
|
55
55
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
56
56
|
};
|
|
57
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
57
|
+
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
58
58
|
/** @jsxImportSource theme-ui */
|
|
59
59
|
import { useCallback, useEffect, useState } from 'react';
|
|
60
60
|
import { Flex, ThemeUIProvider } from 'theme-ui';
|
|
@@ -67,15 +67,12 @@ import { defaultTheme } from '../../theme';
|
|
|
67
67
|
import '../../scss/Bonds.scss';
|
|
68
68
|
import { BigNumber } from 'bignumber.js';
|
|
69
69
|
import { ChainId } from '../../enum/apeswaplists';
|
|
70
|
-
import
|
|
71
|
-
import ProgressBar from '../ProgressBar/ProgressBar';
|
|
72
|
-
import { formatDollar, formatValue } from '../../utils/formatNumbers';
|
|
70
|
+
import { formatValue } from '../../utils/formatNumbers';
|
|
73
71
|
import { TooltipText } from '../../enum/tooltips';
|
|
74
72
|
import { TooltipBubble, Svg } from '../uikit-sdk';
|
|
75
|
-
import
|
|
76
|
-
import { BLOCK_EXPLORER, MAINNET_CHAINS } from '../../config/constants/chains';
|
|
77
|
-
import TokenInfoAndName from '../TokenInfoAndName';
|
|
73
|
+
import { BLOCK_EXPLORER } from '../../config/constants/chains';
|
|
78
74
|
import { Input } from '../uikit-sdk/Input';
|
|
75
|
+
import BondRow from './BondRow/BondRow';
|
|
79
76
|
var Bonds = function (_a) {
|
|
80
77
|
var connectionString = _a.connectionString;
|
|
81
78
|
var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
|
|
@@ -272,20 +269,6 @@ var Bonds = function (_a) {
|
|
|
272
269
|
setBondsRendered(true);
|
|
273
270
|
}
|
|
274
271
|
}, [filteredBonds]);
|
|
275
|
-
return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column 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' }, width: '100%', placeholder: 'Search...' }) })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })),
|
|
276
|
-
return (_jsxs(_Fragment, { children: ["MAINNETCHAINS", chain] }));
|
|
277
|
-
}), filteredBonds.map(function (bond) {
|
|
278
|
-
var _a, _b, _c;
|
|
279
|
-
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bond }) })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.payoutToken) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_b = bond.chainId) !== null && _b !== void 0 ? _b : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "more", width: "20px" }) })) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: (bond === null || bond === void 0 ? void 0 : bond.discount) !== undefined ? "".concat(bond.discount.toFixed(2), "%") : '-' })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: calculateARR(bond) !== undefined ? "".concat(calculateARR(bond), "%") : '-' })), _jsx(Flex, __assign({ className: "column column-terms" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
|
|
280
|
-
width: '127px',
|
|
281
|
-
height: '25px',
|
|
282
|
-
flexDirection: 'column',
|
|
283
|
-
justifyContent: 'center',
|
|
284
|
-
display: ['none', 'none', 'none', 'flex'],
|
|
285
|
-
}, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.payoutTokenName, " (").concat(formatDollar({
|
|
286
|
-
num: remainingTokensUsd(bond).toNumber(),
|
|
287
|
-
isPrice: true,
|
|
288
|
-
}), ")") }) })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_c = bond.discount) !== null && _c !== void 0 ? _c : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) })) }))] }))] }), bond.billAddress));
|
|
289
|
-
})] })))] })));
|
|
272
|
+
return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column 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' }, width: '100%', placeholder: 'Search...' }) })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), filteredBonds.map(function (bond) { return (_jsx(BondRow, { bond: bond, hotBonds: hotBonds, rowClick: rowClick }, bond.billAddress)); })] })))] })));
|
|
290
273
|
};
|
|
291
274
|
export default Bonds;
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
.container.bondrow-container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: row;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 70px;
|
|
6
|
+
justify-content: space-around;
|
|
7
|
+
background-color: var(--theme-ui-colors-white2);
|
|
8
|
+
margin-bottom: 5px;
|
|
9
|
+
border-radius: 10px;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
|
|
12
|
+
&:hover {
|
|
13
|
+
background-color: var(--theme-ui-colors-white3);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.column.column-tokens {
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: start;
|
|
21
|
+
width: 40%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.column.column-search {
|
|
25
|
+
padding-bottom: 15px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.column.column-tokeninfoname {
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
flex-direction: row;
|
|
32
|
+
justify-content: start;
|
|
33
|
+
align-items: center;
|
|
34
|
+
padding-left: 20px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.column.column-tokenname {
|
|
38
|
+
width: 100%;
|
|
39
|
+
flex-direction: row;
|
|
40
|
+
justify-content: start;
|
|
41
|
+
align-items: center;
|
|
42
|
+
padding-left: 20px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.column.column-tokenicons {
|
|
46
|
+
width: 20%;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: start;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.column.column-bondinfo {
|
|
53
|
+
flex-direction: row;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: end;
|
|
56
|
+
width: 70%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.column.column-discount {
|
|
60
|
+
flex-direction: row;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
align-items: center;
|
|
63
|
+
width: 20%;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.discount-positive {
|
|
67
|
+
color: #38A611;
|
|
68
|
+
width: 20%;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.discount-negative {
|
|
72
|
+
color: #DF4141;
|
|
73
|
+
width: 20%;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.column.column-arr {
|
|
77
|
+
flex-direction: row;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
align-items: center;
|
|
80
|
+
width: 20%;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.column.column-terms {
|
|
84
|
+
flex-direction: row;
|
|
85
|
+
justify-content: center;
|
|
86
|
+
align-items: center;
|
|
87
|
+
width: 20%;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.column.column-tokensremaining {
|
|
91
|
+
flex-direction: row;
|
|
92
|
+
justify-content: center;
|
|
93
|
+
align-items: center;
|
|
94
|
+
width: 30%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.column.column-hotbond {
|
|
98
|
+
flex-direction: row;
|
|
99
|
+
justify-content: center;
|
|
100
|
+
align-items: center;
|
|
101
|
+
width: 10%;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.column.tooltip {
|
|
105
|
+
flex-direction: row;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: space-around;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.column.header-icon {
|
|
111
|
+
padding-left: 5px;
|
|
112
|
+
align-items: start;
|
|
113
|
+
justify-content: space-around;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
opacity: 0.6;
|
|
116
|
+
}
|
package/dist/scss/Bonds.scss
CHANGED
|
@@ -38,10 +38,6 @@
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.column {
|
|
42
|
-
cursor: pointer;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
41
|
.column.column-tokens {
|
|
46
42
|
display: flex;
|
|
47
43
|
align-items: center;
|
|
@@ -119,7 +115,7 @@
|
|
|
119
115
|
flex-direction: row;
|
|
120
116
|
justify-content: center;
|
|
121
117
|
align-items: center;
|
|
122
|
-
width:
|
|
118
|
+
width: 30%;
|
|
123
119
|
}
|
|
124
120
|
|
|
125
121
|
.column.column-hotbond {
|