@ape.swap/bonds-sdk 1.0.159 → 1.0.161
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.
- package/dist/components/Bonds/Bonds.js +1 -9
- package/dist/scss/Bonds.scss +9 -0
- package/package.json +1 -1
- package/dist/components/Flex/index.d.ts +0 -3
- package/dist/components/Flex/index.js +0 -29
- package/dist/components/ProgressBar/ProgressBar.d.ts +0 -7
- package/dist/components/ProgressBar/ProgressBar.js +0 -29
- package/dist/components/ProgressBar/ProgressBarWrapper.d.ts +0 -14
- package/dist/components/ProgressBar/ProgressBarWrapper.js +0 -25
- package/dist/components/ProgressBar/styles.d.ts +0 -2
- package/dist/components/ProgressBar/styles.js +0 -82
- package/dist/components/Skeleton/index.d.ts +0 -4
- package/dist/components/Skeleton/index.js +0 -31
- package/dist/components/Skeleton/styles.d.ts +0 -5
- package/dist/components/Skeleton/styles.js +0 -40
- package/dist/components/Skeleton/types.d.ts +0 -18
- package/dist/components/Skeleton/types.js +0 -10
- package/dist/components/Text/index.d.ts +0 -4
- package/dist/components/Text/index.js +0 -35
- package/dist/components/Text/types.d.ts +0 -23
- package/dist/components/Text/types.js +0 -13
- package/dist/components/Tooltip/index.d.ts +0 -4
- package/dist/components/Tooltip/index.js +0 -66
- package/dist/components/Tooltip/styles.d.ts +0 -4
- package/dist/components/Tooltip/styles.js +0 -60
- package/dist/components/Tooltip/types.d.ts +0 -17
- package/dist/components/Tooltip/types.js +0 -8
|
@@ -59,8 +59,6 @@ import Svg from '../uikit/Svg';
|
|
|
59
59
|
import '../../scss/Bonds.scss';
|
|
60
60
|
import { BigNumber } from 'bignumber.js';
|
|
61
61
|
import { ChainId } from '../../config/chains';
|
|
62
|
-
import ProgressBarWrapper from '../ProgressBar/ProgressBarWrapper';
|
|
63
|
-
import ProgressBar from '../ProgressBar/ProgressBar';
|
|
64
62
|
var Bonds = function (_a) {
|
|
65
63
|
var connectionString = _a.connectionString;
|
|
66
64
|
var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
|
|
@@ -165,13 +163,7 @@ var Bonds = function (_a) {
|
|
|
165
163
|
};
|
|
166
164
|
return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens Remaining" })), _jsx(Flex, { className: "column column-header" })] })), sortedBonds.map(function (bond) {
|
|
167
165
|
var _a, _b, _c;
|
|
168
|
-
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-term" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })),
|
|
169
|
-
width: '127px',
|
|
170
|
-
height: '25px',
|
|
171
|
-
flexDirection: 'column',
|
|
172
|
-
justifyContent: 'center',
|
|
173
|
-
display: ['none', 'none', 'none', 'flex'],
|
|
174
|
-
}, showTooltip: true }), bond.tokensRemaining.split('.')[0]] })), _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: "fire", width: "20px" })) })) }))] }), bond.billAddress));
|
|
166
|
+
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-term" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: bond.tokensRemaining.split('.')[0] })), _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: "fire", width: "20px" })) })) }))] }), bond.billAddress));
|
|
175
167
|
})] }))] })));
|
|
176
168
|
};
|
|
177
169
|
export default Bonds;
|
package/dist/scss/Bonds.scss
CHANGED
|
@@ -34,6 +34,15 @@
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
.column {
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
align-items: center;
|
|
41
|
+
flex: 1; /* Adjust the flex basis as needed for each column */
|
|
42
|
+
min-width: 120px; /* Example min-width, adjust based on content */
|
|
43
|
+
text-align: center; /* Ensure text is centered if that's your design */
|
|
44
|
+
}
|
|
45
|
+
|
|
37
46
|
.column.column-token {
|
|
38
47
|
width: 100px;
|
|
39
48
|
flex-direction: column;
|
package/package.json
CHANGED
|
@@ -1,29 +0,0 @@
|
|
|
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
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
24
|
-
import { Flex as ThemeUIFlex } from 'theme-ui';
|
|
25
|
-
var Flex = function (_a) {
|
|
26
|
-
var children = _a.children, props = __rest(_a, ["children"]);
|
|
27
|
-
return _jsx(ThemeUIFlex, __assign({}, props, { children: children }));
|
|
28
|
-
};
|
|
29
|
-
export default Flex;
|
|
@@ -1,29 +0,0 @@
|
|
|
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 } from "theme-ui/jsx-runtime";
|
|
13
|
-
import { Box, Flex } from 'theme-ui';
|
|
14
|
-
var ProgressBar = function (_a) {
|
|
15
|
-
var value = _a.value, _b = _a.color, color = _b === void 0 ? 'text' : _b;
|
|
16
|
-
return (_jsx(Flex, __assign({ sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' } }, { children: _jsx(Box, __assign({ sx: {
|
|
17
|
-
width: '100%',
|
|
18
|
-
height: '5px',
|
|
19
|
-
backgroundColor: 'white4',
|
|
20
|
-
borderRadius: '10px',
|
|
21
|
-
overflow: 'hidden',
|
|
22
|
-
} }, { children: _jsx(Box, { sx: {
|
|
23
|
-
width: "".concat(value <= 3 ? 3 : value, "%"),
|
|
24
|
-
background: color,
|
|
25
|
-
borderRadius: '10px',
|
|
26
|
-
height: '100%',
|
|
27
|
-
} }) })) })));
|
|
28
|
-
};
|
|
29
|
-
export default ProgressBar;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ThemeUIStyleObject } from 'theme-ui';
|
|
3
|
-
export interface ProgressBarWrapperProps {
|
|
4
|
-
title?: string;
|
|
5
|
-
value?: React.ReactNode;
|
|
6
|
-
value2Direction?: 'column' | 'row';
|
|
7
|
-
toolTip?: string;
|
|
8
|
-
toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
|
|
9
|
-
toolTipTransform?: string;
|
|
10
|
-
style?: ThemeUIStyleObject;
|
|
11
|
-
showTooltip?: boolean;
|
|
12
|
-
}
|
|
13
|
-
declare const _default: React.NamedExoticComponent<ProgressBarWrapperProps>;
|
|
14
|
-
export default _default;
|
|
@@ -1,25 +0,0 @@
|
|
|
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 React from 'react';
|
|
14
|
-
import { useTranslation } from '../../contexts/Localization';
|
|
15
|
-
import { styles } from './styles';
|
|
16
|
-
import { Flex } from 'theme-ui';
|
|
17
|
-
import TooltipBubble from '../Tooltip';
|
|
18
|
-
import Skeleton from '../Skeleton';
|
|
19
|
-
import Text from '../Text';
|
|
20
|
-
var ProgressBarWrapper = function (_a) {
|
|
21
|
-
var title = _a.title, value = _a.value, style = _a.style, showTooltip = _a.showTooltip, toolTipPlacement = _a.toolTipPlacement, toolTipTransform = _a.toolTipTransform, toolTip = _a.toolTip;
|
|
22
|
-
var t = useTranslation().t;
|
|
23
|
-
return (_jsxs(Flex, __assign({ sx: style }, { children: [_jsx(Flex, __assign({ sx: { alignItems: 'center' } }, { children: _jsx(Text, __assign({ sx: styles.titleText }, { children: t("".concat(title)) })) })), showTooltip ? (_jsx(Flex, __assign({ sx: { alignItems: 'center', width: '100%' } }, { children: _jsx(TooltipBubble, __assign({ placement: toolTipPlacement, transformTip: toolTipTransform, body: _jsx(Flex, __assign({ sx: { justifyContent: 'center' } }, { children: toolTip })), width: "250px" }, { children: _jsx(Flex, __assign({ sx: { justifyContent: 'center', alignItems: 'center', width: '127px' } }, { children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) })) })) }))) : (_jsx(Flex, __assign({ sx: { justifyContent: 'center', alignItems: 'center' } }, { children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) })))] })));
|
|
24
|
-
};
|
|
25
|
-
export default React.memo(ProgressBarWrapper);
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import { ThemeUIStyleObject } from 'theme-ui';
|
|
2
|
-
export declare const styles: Record<'listCardContainer' | 'listViewContainer' | 'titleContainer' | 'infoContentMobile' | 'tokensContainer' | 'titleText' | 'skeleton' | 'valueText' | 'secondaryText' | 'cardContentContainer' | 'animationDiv' | 'expandedWrapper', ThemeUIStyleObject>;
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
export var styles = {
|
|
2
|
-
listCardContainer: {
|
|
3
|
-
borderRadius: 0,
|
|
4
|
-
flexDirection: ['column', 'column', 'column', 'row'],
|
|
5
|
-
alignItems: 'center',
|
|
6
|
-
justifyContent: 'space-between',
|
|
7
|
-
background: 'white2',
|
|
8
|
-
borderBottom: '1px solid rgba(226, 226, 226, .2)',
|
|
9
|
-
padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],
|
|
10
|
-
margin: '0 10px 0 10px',
|
|
11
|
-
maxWidth: ['500px', '500px', '500px', '100%'],
|
|
12
|
-
minWidth: '300px',
|
|
13
|
-
width: '100%',
|
|
14
|
-
height: ['unset', 'unset', 'unset', '86px'],
|
|
15
|
-
},
|
|
16
|
-
listViewContainer: {
|
|
17
|
-
display: 'flex',
|
|
18
|
-
flexDirection: 'column',
|
|
19
|
-
alignItems: 'center',
|
|
20
|
-
width: '100%',
|
|
21
|
-
},
|
|
22
|
-
titleContainer: {
|
|
23
|
-
width: '100%',
|
|
24
|
-
justifyContent: 'space-between',
|
|
25
|
-
my: '5px',
|
|
26
|
-
},
|
|
27
|
-
infoContentMobile: {
|
|
28
|
-
display: ['flex', 'flex', 'flex', 'none'],
|
|
29
|
-
alignItems: 'center',
|
|
30
|
-
},
|
|
31
|
-
tokensContainer: {
|
|
32
|
-
alignItems: 'center',
|
|
33
|
-
height: '100%',
|
|
34
|
-
width: '100%',
|
|
35
|
-
},
|
|
36
|
-
titleText: {
|
|
37
|
-
opacity: 0.6,
|
|
38
|
-
fontSize: '12px',
|
|
39
|
-
lineHeight: ['16px', '16px', '16px', '24px'],
|
|
40
|
-
fontWeight: 400,
|
|
41
|
-
},
|
|
42
|
-
skeleton: {
|
|
43
|
-
width: ['45px', '45px', '60px'],
|
|
44
|
-
maxHeight: '18px',
|
|
45
|
-
minHeight: '18px',
|
|
46
|
-
},
|
|
47
|
-
valueText: {
|
|
48
|
-
fontSize: ['12px', '12px', '12px', '14px'],
|
|
49
|
-
color: 'primaryBright',
|
|
50
|
-
lineHeight: '16px',
|
|
51
|
-
fontWeight: 700,
|
|
52
|
-
mr: '5px',
|
|
53
|
-
display: 'flex',
|
|
54
|
-
alignItems: 'center',
|
|
55
|
-
},
|
|
56
|
-
secondaryText: {
|
|
57
|
-
fontSize: '12px',
|
|
58
|
-
color: 'gray',
|
|
59
|
-
lineHeight: '16px',
|
|
60
|
-
fontWeight: 400,
|
|
61
|
-
},
|
|
62
|
-
cardContentContainer: {
|
|
63
|
-
width: '100%',
|
|
64
|
-
height: '100%',
|
|
65
|
-
alignItems: 'center',
|
|
66
|
-
justifyContent: 'flex-end',
|
|
67
|
-
},
|
|
68
|
-
animationDiv: {
|
|
69
|
-
position: 'relative',
|
|
70
|
-
width: '100%',
|
|
71
|
-
maxWidth: ['500px', '500px', '500px', '100%'],
|
|
72
|
-
minWidth: '300px',
|
|
73
|
-
},
|
|
74
|
-
expandedWrapper: {
|
|
75
|
-
background: 'white3',
|
|
76
|
-
flexDirection: 'column',
|
|
77
|
-
justifyContent: 'space-between',
|
|
78
|
-
padding: '15px 10px',
|
|
79
|
-
flexWrap: 'wrap',
|
|
80
|
-
alignItems: 'center',
|
|
81
|
-
},
|
|
82
|
-
};
|
|
@@ -1,31 +0,0 @@
|
|
|
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
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
24
|
-
import { Box } from 'theme-ui';
|
|
25
|
-
import { animation as ANIMATION, variant as VARIANT } from './types';
|
|
26
|
-
import styles from './styles';
|
|
27
|
-
var Skeleton = function (_a) {
|
|
28
|
-
var _b = _a.variant, variant = _b === void 0 ? VARIANT.RECT : _b, _c = _a.animation, animation = _c === void 0 ? ANIMATION.PULSE : _c, props = __rest(_a, ["variant", "animation"]);
|
|
29
|
-
return (_jsx(Box, __assign({}, props, { sx: __assign(__assign({}, (animation === ANIMATION.WAVES ? styles.waves : styles.pulse)), { height: props.height, width: props.width, borderRadius: variant === VARIANT.RECT ? '10px' : '50%' }) })));
|
|
30
|
-
};
|
|
31
|
-
export default Skeleton;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { keyframes } from '@emotion/react';
|
|
2
|
-
export var waves = keyframes({
|
|
3
|
-
from: { left: '-150px' },
|
|
4
|
-
to: { left: '100%' },
|
|
5
|
-
});
|
|
6
|
-
export var pulse = keyframes({
|
|
7
|
-
'0%': { opacity: 1 },
|
|
8
|
-
'50%': { opacity: 0.4 },
|
|
9
|
-
'100%': { opacity: 1 },
|
|
10
|
-
});
|
|
11
|
-
var styles = {
|
|
12
|
-
waves: {
|
|
13
|
-
position: 'relative',
|
|
14
|
-
overflow: 'hidden',
|
|
15
|
-
transform: 'translate3d(0, 0, 0)',
|
|
16
|
-
borderRadius: '',
|
|
17
|
-
minHeight: '20px',
|
|
18
|
-
display: 'block',
|
|
19
|
-
backgroundColor: 'backgroundDisabled',
|
|
20
|
-
'&:before': {
|
|
21
|
-
content: "\"\"",
|
|
22
|
-
position: 'absolute',
|
|
23
|
-
backgroundImage: 'linear-gradient(90deg, transparent, rgba(243, 243, 243, 0.3), transparent)',
|
|
24
|
-
top: 0,
|
|
25
|
-
left: '-150px',
|
|
26
|
-
height: '100%',
|
|
27
|
-
width: '250px',
|
|
28
|
-
animation: "".concat(waves, " 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite"),
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
pulse: {
|
|
32
|
-
animation: "".concat(pulse, " 2s infinite ease-out"),
|
|
33
|
-
transform: 'translate3d(0, 0, 0)',
|
|
34
|
-
borderRadius: '2px',
|
|
35
|
-
minHeight: '20px',
|
|
36
|
-
display: 'block',
|
|
37
|
-
backgroundColor: 'backgroundDisabled',
|
|
38
|
-
},
|
|
39
|
-
};
|
|
40
|
-
export default styles;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { BoxProps } from 'theme-ui';
|
|
2
|
-
export declare enum animation {
|
|
3
|
-
WAVES = "waves",
|
|
4
|
-
PULSE = "pulse"
|
|
5
|
-
}
|
|
6
|
-
export declare enum variant {
|
|
7
|
-
RECT = "rect",
|
|
8
|
-
CIRCLE = "circle"
|
|
9
|
-
}
|
|
10
|
-
type Animation = `${animation}`;
|
|
11
|
-
type Variant = `${variant}`;
|
|
12
|
-
export interface SkeletonProps extends BoxProps {
|
|
13
|
-
animation?: Animation;
|
|
14
|
-
variant?: Variant;
|
|
15
|
-
width?: string | number;
|
|
16
|
-
height?: string | number;
|
|
17
|
-
}
|
|
18
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export var animation;
|
|
2
|
-
(function (animation) {
|
|
3
|
-
animation["WAVES"] = "waves";
|
|
4
|
-
animation["PULSE"] = "pulse";
|
|
5
|
-
})(animation || (animation = {}));
|
|
6
|
-
export var variant;
|
|
7
|
-
(function (variant) {
|
|
8
|
-
variant["RECT"] = "rect";
|
|
9
|
-
variant["CIRCLE"] = "circle";
|
|
10
|
-
})(variant || (variant = {}));
|
|
@@ -1,35 +0,0 @@
|
|
|
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
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
24
|
-
import { Text as ThemeUIText } from 'theme-ui';
|
|
25
|
-
import { variants } from './types';
|
|
26
|
-
var Text = function (_a) {
|
|
27
|
-
var _b = _a.variant, variant = _b === void 0 ? variants.NORMAL : _b, _c = _a.weight, weight = _c === void 0 ? variants.NORMAL : _c, size = _a.size, children = _a.children, _d = _a.color, color = _d === void 0 ? 'text' : _d, props = __rest(_a, ["variant", "weight", "size", "children", "color"]);
|
|
28
|
-
return (_jsx(ThemeUIText, __assign({}, props, { sx: {
|
|
29
|
-
variant: variant === variants.LINK ? "flex.".concat(variant) : "text.".concat(variant),
|
|
30
|
-
color: color,
|
|
31
|
-
fontWeight: weight,
|
|
32
|
-
fontSize: size,
|
|
33
|
-
} }, { children: children })));
|
|
34
|
-
};
|
|
35
|
-
export default Text;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { TextProps as ThemeUITextProps } from 'theme-ui';
|
|
2
|
-
export declare enum variants {
|
|
3
|
-
SMALL = "sm",
|
|
4
|
-
NORMAL = "md",
|
|
5
|
-
LARGE = "lg",
|
|
6
|
-
LINK = "link"
|
|
7
|
-
}
|
|
8
|
-
export declare enum weights {
|
|
9
|
-
LIGHT = "light",
|
|
10
|
-
NORMAL = "normal",
|
|
11
|
-
BOLD = "bold"
|
|
12
|
-
}
|
|
13
|
-
type variantProps = `${variants}`;
|
|
14
|
-
type weightProps = `${weights}` | number;
|
|
15
|
-
type sizeProps = string;
|
|
16
|
-
export interface TextProps extends Omit<ThemeUITextProps, 'sx'> {
|
|
17
|
-
variant?: variantProps;
|
|
18
|
-
weight?: weightProps;
|
|
19
|
-
color?: string;
|
|
20
|
-
size?: sizeProps;
|
|
21
|
-
[key: string]: any;
|
|
22
|
-
}
|
|
23
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export var variants;
|
|
2
|
-
(function (variants) {
|
|
3
|
-
variants["SMALL"] = "sm";
|
|
4
|
-
variants["NORMAL"] = "md";
|
|
5
|
-
variants["LARGE"] = "lg";
|
|
6
|
-
variants["LINK"] = "link";
|
|
7
|
-
})(variants || (variants = {}));
|
|
8
|
-
export var weights;
|
|
9
|
-
(function (weights) {
|
|
10
|
-
weights["LIGHT"] = "light";
|
|
11
|
-
weights["NORMAL"] = "normal";
|
|
12
|
-
weights["BOLD"] = "bold";
|
|
13
|
-
})(weights || (weights = {}));
|
|
@@ -1,66 +0,0 @@
|
|
|
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
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
var _a;
|
|
24
|
-
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
25
|
-
import { Box } from 'theme-ui';
|
|
26
|
-
import { placements } from './types';
|
|
27
|
-
import style, { container } from './styles';
|
|
28
|
-
var placementStyles = (_a = {},
|
|
29
|
-
_a[placements.BOTTOMLEFT] = {
|
|
30
|
-
top: 'calc(100% + 15px)',
|
|
31
|
-
left: 0,
|
|
32
|
-
},
|
|
33
|
-
_a[placements.BOTTOMRIGHT] = {
|
|
34
|
-
top: 'calc(100% + 15px)',
|
|
35
|
-
right: 0,
|
|
36
|
-
},
|
|
37
|
-
_a[placements.TOPLEFT] = {
|
|
38
|
-
bottom: 'calc(100% + 15px)',
|
|
39
|
-
left: 0,
|
|
40
|
-
},
|
|
41
|
-
_a[placements.TOPRIGHT] = {
|
|
42
|
-
bottom: 'calc(100% + 15px)',
|
|
43
|
-
right: 0,
|
|
44
|
-
},
|
|
45
|
-
_a[placements.ONLYCONTAINERRIGHT] = {
|
|
46
|
-
top: 'calc(100% + 15px)',
|
|
47
|
-
right: 0,
|
|
48
|
-
},
|
|
49
|
-
_a);
|
|
50
|
-
var TooltipBubble = function (_a) {
|
|
51
|
-
var width = _a.width, _b = _a.placement, placement = _b === void 0 ? placements.BOTTOMRIGHT : _b, body = _a.body, backgroundColor = _a.backgroundColor, hideTooltip = _a.hideTooltip, children = _a.children, transformTip = _a.transformTip, props = __rest(_a, ["width", "placement", "body", "backgroundColor", "hideTooltip", "children", "transformTip"]);
|
|
52
|
-
var backgroundColorStyle = backgroundColor
|
|
53
|
-
? {
|
|
54
|
-
backgroundColor: backgroundColor,
|
|
55
|
-
'&:before': {
|
|
56
|
-
borderBottomColor: placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT ? backgroundColor : undefined,
|
|
57
|
-
borderTopColor: placement === placements.TOPLEFT || placement === placements.TOPRIGHT ? backgroundColor : undefined,
|
|
58
|
-
},
|
|
59
|
-
}
|
|
60
|
-
: {};
|
|
61
|
-
var handleClick = function (event) {
|
|
62
|
-
event.stopPropagation();
|
|
63
|
-
};
|
|
64
|
-
return (_jsxs(Box, __assign({ sx: container(hideTooltip), onClick: handleClick }, { children: [_jsx(Box, __assign({ sx: __assign({ position: 'absolute' }, (placementStyles[placement] || {})) }, { children: _jsx(Box, __assign({ sx: __assign(__assign(__assign(__assign({ position: 'relative' }, style.default), style[placement]), backgroundColorStyle), { width: width, transform: transformTip }) }, props, { children: body })) })), children] })));
|
|
65
|
-
};
|
|
66
|
-
export default TooltipBubble;
|
|
@@ -1,60 +0,0 @@
|
|
|
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
|
-
var baseStyle = {
|
|
13
|
-
p: 9,
|
|
14
|
-
borderRadius: 'normal',
|
|
15
|
-
background: 'white2',
|
|
16
|
-
width: 'max-content',
|
|
17
|
-
zIndex: 'modal',
|
|
18
|
-
boxShadow: "0px 0px 30px rgb(200,200,200, .4)",
|
|
19
|
-
};
|
|
20
|
-
var baseDirectionArrow = {
|
|
21
|
-
content: '""',
|
|
22
|
-
display: 'block',
|
|
23
|
-
width: 0,
|
|
24
|
-
border: '12px solid transparent',
|
|
25
|
-
};
|
|
26
|
-
var topArrow = __assign(__assign({ bottom: 0 }, baseDirectionArrow), { borderBottom: 0, borderTopWidth: '15px', borderTopStyle: 'solid', transform: 'translate(-50%, calc(100%))' });
|
|
27
|
-
var bottomArrow = __assign(__assign({ top: 0 }, baseDirectionArrow), { borderTop: 0, borderBottomWidth: '15px', borderBottomStyle: 'solid', transform: 'translate(-50%, calc(-100%))' });
|
|
28
|
-
export var container = function (hide) { return ({
|
|
29
|
-
position: 'relative',
|
|
30
|
-
display: 'inline-block',
|
|
31
|
-
'& > div:first-of-type': {
|
|
32
|
-
display: 'none',
|
|
33
|
-
},
|
|
34
|
-
'&:hover > div:first-of-type': {
|
|
35
|
-
display: hide ? 'none' : 'block',
|
|
36
|
-
},
|
|
37
|
-
}); };
|
|
38
|
-
var styles = {
|
|
39
|
-
default: __assign({ color: 'text', fontSize: 0, lineHeight: '18px', fontWeight: 'normal' }, baseStyle),
|
|
40
|
-
bottomRight: {
|
|
41
|
-
'&::before': __assign(__assign({ position: 'absolute' }, bottomArrow), { right: '3%', borderBottomColor: 'white2' }),
|
|
42
|
-
},
|
|
43
|
-
bottomLeft: {
|
|
44
|
-
'&::before': __assign(__assign({ position: 'absolute' }, bottomArrow), { left: 'calc(3% + 15px)', borderBottomColor: 'white2' }),
|
|
45
|
-
},
|
|
46
|
-
topRight: {
|
|
47
|
-
'&::before': __assign(__assign({ position: 'absolute' }, topArrow), { right: '3%', borderTopColor: 'white2' }),
|
|
48
|
-
},
|
|
49
|
-
topLeft: {
|
|
50
|
-
'&::before': __assign(__assign({ position: 'absolute' }, topArrow), { left: 'calc(3% + 15px)', borderTopColor: 'white2' }),
|
|
51
|
-
},
|
|
52
|
-
onlyContainerRight: {
|
|
53
|
-
'&::before': {
|
|
54
|
-
position: 'absolute',
|
|
55
|
-
right: '3%',
|
|
56
|
-
borderBottomColor: 'white2',
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
export default styles;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { BoxProps } from 'theme-ui';
|
|
3
|
-
export declare enum placements {
|
|
4
|
-
TOPRIGHT = "topRight",
|
|
5
|
-
TOPLEFT = "topLeft",
|
|
6
|
-
BOTTOMRIGHT = "bottomRight",
|
|
7
|
-
BOTTOMLEFT = "bottomLeft",
|
|
8
|
-
ONLYCONTAINERRIGHT = "onlyContainerRight"
|
|
9
|
-
}
|
|
10
|
-
export type placementProps = `${placements}`;
|
|
11
|
-
export interface TooltipProps extends BoxProps {
|
|
12
|
-
width?: string;
|
|
13
|
-
placement?: placementProps;
|
|
14
|
-
body: ReactNode;
|
|
15
|
-
hideTooltip?: boolean;
|
|
16
|
-
transformTip?: string;
|
|
17
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export var placements;
|
|
2
|
-
(function (placements) {
|
|
3
|
-
placements["TOPRIGHT"] = "topRight";
|
|
4
|
-
placements["TOPLEFT"] = "topLeft";
|
|
5
|
-
placements["BOTTOMRIGHT"] = "bottomRight";
|
|
6
|
-
placements["BOTTOMLEFT"] = "bottomLeft";
|
|
7
|
-
placements["ONLYCONTAINERRIGHT"] = "onlyContainerRight";
|
|
8
|
-
})(placements || (placements = {}));
|