@lidofinance/ui-primitives 0.23.0
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/README.md +87 -0
- package/README.mdx +4 -0
- package/dist/index.cjs +245 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +24 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.mjs +242 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +36 -0
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @lidofinance/ui-primitives
|
|
2
|
+
|
|
3
|
+
Widget UI primitives: components, hooks.
|
|
4
|
+
|
|
5
|
+
This component abstracted from the blockchain network,
|
|
6
|
+
other words you can use it for any widgets for any blockchains.
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
```bash
|
|
10
|
+
yarn add @lidofinance/ui-primitives
|
|
11
|
+
|
|
12
|
+
# and react 17
|
|
13
|
+
yarn add react@^17.0.0
|
|
14
|
+
|
|
15
|
+
# or react 18
|
|
16
|
+
yarn add react@^18.0.0
|
|
17
|
+
|
|
18
|
+
# and additional
|
|
19
|
+
yarn add next@^12.3.0 styled-components@^5.3.5 @lidofinance/lido-ui@^3.6.1
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Using
|
|
23
|
+
|
|
24
|
+
### Wallet components
|
|
25
|
+
|
|
26
|
+
You can make wallet components (like in image below) via `@lidofinance/ui-primitives` package.
|
|
27
|
+
|
|
28
|
+
<img width="500" src="./../../../.github/assets/ui-primitives/wallet.png">
|
|
29
|
+
<img width="500" src="./../../../.github/assets/ui-primitives/walletFallback.png">
|
|
30
|
+
|
|
31
|
+
#### Example based on Eth:
|
|
32
|
+
|
|
33
|
+
The design you can find on Figma https://www.figma.com/file/pmtFrBp0z1RvzdfcHaV2fn/Widget-UI-Guide?node-id=2-3256&t=VZj5YPwLffneQwE1-0
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
// `useWeb3` and other imports what is out of context here
|
|
37
|
+
import {
|
|
38
|
+
WalletCard,
|
|
39
|
+
WalletCardRow,
|
|
40
|
+
WalletCardBalance,
|
|
41
|
+
WalletCardAccount,
|
|
42
|
+
WalletFallback,
|
|
43
|
+
} from '@lidofinance/ui-primitives'
|
|
44
|
+
import { Divider } from '@lidofinance/lido-ui'
|
|
45
|
+
|
|
46
|
+
const EthWalletCard: EthWalletCardComponent = (props) => {
|
|
47
|
+
// `account`, `openModal` and other what is out of context here
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<WalletCard {...props}>
|
|
51
|
+
<WalletCardRow>
|
|
52
|
+
<WalletCardBalance
|
|
53
|
+
title="Eth balance"
|
|
54
|
+
loading={false}
|
|
55
|
+
value={'100.00 ETH'}
|
|
56
|
+
extra={'Extra content here'}
|
|
57
|
+
>Children content here</WalletCardBalance>
|
|
58
|
+
<WalletCardAccount account={account} onClickCb={openModal} />
|
|
59
|
+
</WalletCardRow>
|
|
60
|
+
<Divider />
|
|
61
|
+
<WalletCardRow>
|
|
62
|
+
<WalletCardBalance
|
|
63
|
+
small
|
|
64
|
+
title="Token balance"
|
|
65
|
+
loading={false}
|
|
66
|
+
value={'1000.00 stETH'}
|
|
67
|
+
extra={'Extra content here'}
|
|
68
|
+
>Children content here</WalletCardBalance>
|
|
69
|
+
<WalletCardBalance
|
|
70
|
+
small
|
|
71
|
+
title="Token balance"
|
|
72
|
+
loading={false}
|
|
73
|
+
value={'1000.00 wstETH'}
|
|
74
|
+
extra={'Extra content here'}
|
|
75
|
+
>Children content here</WalletCardBalance>
|
|
76
|
+
</WalletCardRow>
|
|
77
|
+
</WalletCard>
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
const EthWalletCardWrapper: EthWalletCardComponent = (props) => {
|
|
82
|
+
const { active } = useWeb3()
|
|
83
|
+
return active ? <EthWalletCard {...props} /> : <WalletFallback {...props} />
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
export default EthWalletCardWrapper
|
|
87
|
+
```
|
package/README.mdx
ADDED
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
var $41D0Z$reactjsxruntime = require("react/jsx-runtime");
|
|
2
|
+
require("react");
|
|
3
|
+
var $41D0Z$styledcomponents = require("styled-components");
|
|
4
|
+
var $41D0Z$lidofinancelidoui = require("@lidofinance/lido-ui");
|
|
5
|
+
|
|
6
|
+
function $parcel$exportWildcard(dest, source) {
|
|
7
|
+
Object.keys(source).forEach(function(key) {
|
|
8
|
+
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
Object.defineProperty(dest, key, {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return source[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
return dest;
|
|
21
|
+
}
|
|
22
|
+
function $parcel$export(e, n, v, s) {
|
|
23
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
24
|
+
}
|
|
25
|
+
function $parcel$interopDefault(a) {
|
|
26
|
+
return a && a.__esModule ? a.default : a;
|
|
27
|
+
}
|
|
28
|
+
var $f812b98c92824ab2$exports = {};
|
|
29
|
+
var $69db8755909407dc$exports = {};
|
|
30
|
+
var $fc137a99170e55e2$exports = {};
|
|
31
|
+
var $829e9b0c5c7aff2f$exports = {};
|
|
32
|
+
|
|
33
|
+
$parcel$export($829e9b0c5c7aff2f$exports, "WalletCard", function () { return $829e9b0c5c7aff2f$export$fa10365278598d8a; });
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
let $e59ee56775ea31d8$var$_ = (t)=>t, $e59ee56775ea31d8$var$t;
|
|
39
|
+
const $e59ee56775ea31d8$export$fe8257908279ce23 = (0, ($parcel$interopDefault($41D0Z$styledcomponents)))((0, $41D0Z$lidofinancelidoui.Block))($e59ee56775ea31d8$var$t || ($e59ee56775ea31d8$var$t = $e59ee56775ea31d8$var$_`
|
|
40
|
+
border-bottom-left-radius: 0;
|
|
41
|
+
border-bottom-right-radius: 0;
|
|
42
|
+
|
|
43
|
+
margin-bottom: ${0}px;
|
|
44
|
+
padding-bottom: ${0}px;
|
|
45
|
+
|
|
46
|
+
${0} {
|
|
47
|
+
padding-bottom: ${0}px;
|
|
48
|
+
}
|
|
49
|
+
`), ({ theme: theme })=>-theme.borderRadiusesMap.xl, ({ theme: theme })=>theme.borderRadiusesMap.xl + theme.spaceMap.xxl, ({ theme: theme })=>theme.mediaQueries.md, ({ theme: theme })=>theme.borderRadiusesMap.xl + theme.spaceMap.lg);
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
const $829e9b0c5c7aff2f$export$fa10365278598d8a = (props)=>{
|
|
53
|
+
return /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $e59ee56775ea31d8$export$fe8257908279ce23), {
|
|
54
|
+
color: "accent",
|
|
55
|
+
...props
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
$parcel$exportWildcard($fc137a99170e55e2$exports, $829e9b0c5c7aff2f$exports);
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
var $5f7eb0c04a209cf0$exports = {};
|
|
64
|
+
var $ff73dbbcec53aa22$exports = {};
|
|
65
|
+
|
|
66
|
+
$parcel$export($ff73dbbcec53aa22$exports, "WalletCardAccount", function () { return $ff73dbbcec53aa22$export$36be84b4aed0dcaa; });
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
let $e071e57fc1f1505d$var$_ = (t)=>t, $e071e57fc1f1505d$var$t;
|
|
72
|
+
const $e071e57fc1f1505d$export$125159fec6480082 = (0, ($parcel$interopDefault($41D0Z$styledcomponents))).div($e071e57fc1f1505d$var$t || ($e071e57fc1f1505d$var$t = $e071e57fc1f1505d$var$_`
|
|
73
|
+
align-self: stretch;
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-basis: 50%;
|
|
76
|
+
flex-grow: 1;
|
|
77
|
+
flex-shrink: 1;
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: flex-end;
|
|
81
|
+
margin-left: auto;
|
|
82
|
+
|
|
83
|
+
& > * {
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
}
|
|
86
|
+
`));
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
const $ff73dbbcec53aa22$export$36be84b4aed0dcaa = (props)=>{
|
|
90
|
+
const { account: account , onClickCb: onClickCb , ...rest } = props;
|
|
91
|
+
const isMobile = (0, $41D0Z$lidofinancelidoui.useBreakpoint)("md");
|
|
92
|
+
const mobileSymbols = 3;
|
|
93
|
+
const desktopSymbols = 6;
|
|
94
|
+
const symbols = isMobile ? mobileSymbols : desktopSymbols;
|
|
95
|
+
return /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $e071e57fc1f1505d$export$125159fec6480082), {
|
|
96
|
+
...rest,
|
|
97
|
+
children: /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $41D0Z$lidofinancelidoui.IdenticonBadge), {
|
|
98
|
+
address: account !== null && account !== void 0 ? account : "",
|
|
99
|
+
symbols: symbols,
|
|
100
|
+
onClick: onClickCb,
|
|
101
|
+
color: "accent"
|
|
102
|
+
})
|
|
103
|
+
});
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
$parcel$exportWildcard($5f7eb0c04a209cf0$exports, $ff73dbbcec53aa22$exports);
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
var $dc104a3cfac37534$exports = {};
|
|
111
|
+
var $dc56f960f8e379a3$exports = {};
|
|
112
|
+
|
|
113
|
+
$parcel$export($dc56f960f8e379a3$exports, "WalletCardBalance", function () { return $dc56f960f8e379a3$export$976f47e15d5defb0; });
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
let $1eacde4e26b66524$var$_ = (t)=>t, $1eacde4e26b66524$var$t, $1eacde4e26b66524$var$t1, $1eacde4e26b66524$var$t2, $1eacde4e26b66524$var$t3, $1eacde4e26b66524$var$t4;
|
|
119
|
+
const $1eacde4e26b66524$export$2d1cff8340d03905 = (0, ($parcel$interopDefault($41D0Z$styledcomponents))).div($1eacde4e26b66524$var$t || ($1eacde4e26b66524$var$t = $1eacde4e26b66524$var$_`
|
|
120
|
+
margin-right: 18px;
|
|
121
|
+
flex-basis: 50%;
|
|
122
|
+
flex-grow: 1;
|
|
123
|
+
font-size: ${0}px;
|
|
124
|
+
line-height: 1.6em;
|
|
125
|
+
|
|
126
|
+
:last-child {
|
|
127
|
+
margin-right: 0;
|
|
128
|
+
}
|
|
129
|
+
`), ({ theme: theme })=>theme.fontSizesMap.xxs);
|
|
130
|
+
const $1eacde4e26b66524$export$e4ca13e82989524a = (0, ($parcel$interopDefault($41D0Z$styledcomponents))).div($1eacde4e26b66524$var$t1 || ($1eacde4e26b66524$var$t1 = $1eacde4e26b66524$var$_``));
|
|
131
|
+
const $1eacde4e26b66524$export$623cde957a5a324e = (0, ($parcel$interopDefault($41D0Z$styledcomponents))).div($1eacde4e26b66524$var$t2 || ($1eacde4e26b66524$var$t2 = $1eacde4e26b66524$var$_`
|
|
132
|
+
margin-top: 2px;
|
|
133
|
+
font-size: ${0}px;
|
|
134
|
+
line-height: 1.4em;
|
|
135
|
+
font-weight: 800;
|
|
136
|
+
white-space: nowrap;
|
|
137
|
+
`), ({ theme: theme , $small: $small })=>$small ? theme.fontSizesMap.sm : theme.fontSizesMap.md);
|
|
138
|
+
const $1eacde4e26b66524$export$ed3240b66ab7bcea = (0, ($parcel$interopDefault($41D0Z$styledcomponents))).div($1eacde4e26b66524$var$t3 || ($1eacde4e26b66524$var$t3 = $1eacde4e26b66524$var$_`
|
|
139
|
+
margin-top: 2px;
|
|
140
|
+
opacity: 0.5;
|
|
141
|
+
`));
|
|
142
|
+
const $1eacde4e26b66524$export$8dce4e443c8afd41 = (0, ($parcel$interopDefault($41D0Z$styledcomponents))).div($1eacde4e26b66524$var$t4 || ($1eacde4e26b66524$var$t4 = $1eacde4e26b66524$var$_`
|
|
143
|
+
margin-top: 8px;
|
|
144
|
+
opacity: ${0};
|
|
145
|
+
pointer-events: ${0};
|
|
146
|
+
`), ({ $hidden: $hidden })=>$hidden ? 0 : 1, ({ $hidden: $hidden })=>$hidden ? "none" : "auto");
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
const $dc56f960f8e379a3$export$976f47e15d5defb0 = (props)=>{
|
|
150
|
+
const { title: title , small: small = false , extra: extra , loading: loading = false , children: children , value: value , ...rest } = props;
|
|
151
|
+
const hasExtra = extra != null;
|
|
152
|
+
const hasChildren = children != null;
|
|
153
|
+
return /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsxs)((0, $1eacde4e26b66524$export$2d1cff8340d03905), {
|
|
154
|
+
...rest,
|
|
155
|
+
children: [
|
|
156
|
+
/*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $1eacde4e26b66524$export$e4ca13e82989524a), {
|
|
157
|
+
children: title
|
|
158
|
+
}),
|
|
159
|
+
/*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $1eacde4e26b66524$export$623cde957a5a324e), {
|
|
160
|
+
$small: small,
|
|
161
|
+
children: loading ? /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $41D0Z$lidofinancelidoui.InlineLoader), {}) : value
|
|
162
|
+
}),
|
|
163
|
+
hasExtra && /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $1eacde4e26b66524$export$ed3240b66ab7bcea), {
|
|
164
|
+
children: loading ? /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $41D0Z$lidofinancelidoui.InlineLoader), {}) : extra
|
|
165
|
+
}),
|
|
166
|
+
hasChildren && /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $1eacde4e26b66524$export$8dce4e443c8afd41), {
|
|
167
|
+
$hidden: loading,
|
|
168
|
+
children: children
|
|
169
|
+
})
|
|
170
|
+
]
|
|
171
|
+
});
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
$parcel$exportWildcard($dc104a3cfac37534$exports, $dc56f960f8e379a3$exports);
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
var $cc2f4aa216efbbda$exports = {};
|
|
179
|
+
var $16311673d4ed5791$exports = {};
|
|
180
|
+
|
|
181
|
+
$parcel$export($16311673d4ed5791$exports, "WalletCardRow", function () { return $16311673d4ed5791$export$7d0c76f6a0418e11; });
|
|
182
|
+
|
|
183
|
+
let $e0c76ff559ce91ed$var$_ = (t)=>t, $e0c76ff559ce91ed$var$t;
|
|
184
|
+
const $e0c76ff559ce91ed$export$d700fd35c768af1d = (0, ($parcel$interopDefault($41D0Z$styledcomponents))).div($e0c76ff559ce91ed$var$t || ($e0c76ff559ce91ed$var$t = $e0c76ff559ce91ed$var$_`
|
|
185
|
+
display: flex;
|
|
186
|
+
margin: ${0}px 0;
|
|
187
|
+
|
|
188
|
+
&:first-child {
|
|
189
|
+
margin-top: 0;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
&:last-child {
|
|
193
|
+
margin-bottom: 0;
|
|
194
|
+
}
|
|
195
|
+
`), ({ theme: theme })=>theme.spaceMap.lg);
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
const $16311673d4ed5791$export$7d0c76f6a0418e11 = (0, $e0c76ff559ce91ed$export$d700fd35c768af1d);
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
$parcel$exportWildcard($cc2f4aa216efbbda$exports, $16311673d4ed5791$exports);
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
var $20047e2ea2e5f098$exports = {};
|
|
205
|
+
var $35ce4da3f038e635$exports = {};
|
|
206
|
+
|
|
207
|
+
$parcel$export($35ce4da3f038e635$exports, "WalletFallback", function () { return $35ce4da3f038e635$export$db542de45b23291e; });
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
let $221726d8ec45542f$var$_ = (t)=>t, $221726d8ec45542f$var$t;
|
|
213
|
+
const $221726d8ec45542f$export$37593eea88cd94ab = (0, ($parcel$interopDefault($41D0Z$styledcomponents)))((0, $829e9b0c5c7aff2f$export$fa10365278598d8a))($221726d8ec45542f$var$t || ($221726d8ec45542f$var$t = $221726d8ec45542f$var$_`
|
|
214
|
+
text-align: center;
|
|
215
|
+
background: var(--lido-color-error);
|
|
216
|
+
background-image: none !important;
|
|
217
|
+
`));
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
const $35ce4da3f038e635$export$db542de45b23291e = ({ error: error , ...rest })=>{
|
|
221
|
+
if (error) return /*#__PURE__*/ (0, $41D0Z$reactjsxruntime.jsx)((0, $221726d8ec45542f$export$37593eea88cd94ab), {
|
|
222
|
+
...rest,
|
|
223
|
+
children: error
|
|
224
|
+
});
|
|
225
|
+
return null;
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
$parcel$exportWildcard($20047e2ea2e5f098$exports, $35ce4da3f038e635$exports);
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
$parcel$exportWildcard($69db8755909407dc$exports, $fc137a99170e55e2$exports);
|
|
233
|
+
$parcel$exportWildcard($69db8755909407dc$exports, $5f7eb0c04a209cf0$exports);
|
|
234
|
+
$parcel$exportWildcard($69db8755909407dc$exports, $dc104a3cfac37534$exports);
|
|
235
|
+
$parcel$exportWildcard($69db8755909407dc$exports, $cc2f4aa216efbbda$exports);
|
|
236
|
+
$parcel$exportWildcard($69db8755909407dc$exports, $20047e2ea2e5f098$exports);
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
$parcel$exportWildcard($f812b98c92824ab2$exports, $69db8755909407dc$exports);
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
$parcel$exportWildcard(module.exports, $f812b98c92824ab2$exports);
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"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","sources":["packages/ui/primitives/src/index.ts","packages/ui/primitives/src/components/index.ts","packages/ui/primitives/src/components/wallet/index.ts","packages/ui/primitives/src/components/wallet/walletCard/index.ts","packages/ui/primitives/src/components/wallet/walletCard/walletCard.tsx","packages/ui/primitives/src/components/wallet/walletCard/styles.tsx","packages/ui/primitives/src/components/wallet/walletCardAccount/index.ts","packages/ui/primitives/src/components/wallet/walletCardAccount/walletCardAccount.tsx","packages/ui/primitives/src/components/wallet/walletCardAccount/styles.tsx","packages/ui/primitives/src/components/wallet/walletCardBalance/index.ts","packages/ui/primitives/src/components/wallet/walletCardBalance/walletCardBalance.tsx","packages/ui/primitives/src/components/wallet/walletCardBalance/styles.tsx","packages/ui/primitives/src/components/wallet/walletCardRow/index.ts","packages/ui/primitives/src/components/wallet/walletCardRow/walletCardRow.tsx","packages/ui/primitives/src/components/wallet/walletCardRow/styles.tsx","packages/ui/primitives/src/components/wallet/walletFallback/index.ts","packages/ui/primitives/src/components/wallet/walletFallback/walletFallback.tsx","packages/ui/primitives/src/components/wallet/walletFallback/styles.tsx"],"sourcesContent":["export * from './components'\n","export * from './wallet'\n","export * from './walletCard'\nexport * from './walletCardAccount'\nexport * from './walletCardBalance'\nexport * from './walletCardRow'\nexport * from './walletFallback'\n","export * from './walletCard'\n","import React, { FC } from 'react'\nimport { BlockProps } from '@lidofinance/lido-ui'\nimport { WalletCardStyle } from './styles'\n\nexport type WalletCardComponent = FC<BlockProps>\n\nexport const WalletCard: WalletCardComponent = (props) => {\n return <WalletCardStyle color=\"accent\" {...props} />\n}\n","import styled from 'styled-components'\nimport { Block } from '@lidofinance/lido-ui'\n\nexport const WalletCardStyle = styled(Block)`\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n margin-bottom: ${({ theme }) => -theme.borderRadiusesMap.xl}px;\n padding-bottom: ${({ theme }) => theme.borderRadiusesMap.xl + theme.spaceMap.xxl}px;\n\n ${({ theme }) => theme.mediaQueries.md} {\n padding-bottom: ${({ theme }) => theme.borderRadiusesMap.xl + theme.spaceMap.lg}px;\n }\n`\n","export * from './walletCardAccount'\n","import React, { FC } from 'react'\nimport { LidoComponentProps, IdenticonBadge, useBreakpoint } from '@lidofinance/lido-ui'\n\nimport { WalletCardAccountStyle } from './styles'\n\nexport type WalletCardAccountType = FC<\n LidoComponentProps<\n 'div',\n {\n account?: string | null\n onClickCb: (T: unknown) => unknown\n }\n >\n>\n\nexport const WalletCardAccount: WalletCardAccountType = (props) => {\n const { account, onClickCb, ...rest } = props\n\n const isMobile = useBreakpoint('md')\n const mobileSymbols = 3\n const desktopSymbols = 6\n const symbols = isMobile ? mobileSymbols : desktopSymbols\n\n return (\n <WalletCardAccountStyle {...rest}>\n <IdenticonBadge address={account ?? ''} symbols={symbols} onClick={onClickCb} color=\"accent\" />\n </WalletCardAccountStyle>\n )\n}\n","import styled from 'styled-components'\n\nexport const WalletCardAccountStyle = styled.div`\n align-self: stretch;\n display: flex;\n flex-basis: 50%;\n flex-grow: 1;\n flex-shrink: 1;\n overflow: hidden;\n align-items: center;\n justify-content: flex-end;\n margin-left: auto;\n\n & > * {\n cursor: pointer;\n }\n`\n","export * from './walletCardBalance'\n","import React, { FC, PropsWithChildren } from 'react'\nimport { LidoComponentProps, InlineLoader } from '@lidofinance/lido-ui'\n\nimport {\n WalletCardBalanceStyle,\n WalletCardTitleStyle,\n WalletCardValueStyle,\n WalletCardExtraStyle,\n WalletCardContentStyle,\n} from './styles'\n\nexport type WalletCardBalanceType = FC<\n PropsWithChildren<\n LidoComponentProps<\n 'div',\n {\n title: React.ReactNode\n value: React.ReactNode\n small?: boolean\n loading?: boolean\n extra?: React.ReactNode\n }\n >\n >\n>\n\nexport const WalletCardBalance: WalletCardBalanceType = (props) => {\n const { title, small = false, extra, loading = false, children, value, ...rest } = props\n\n const hasExtra = extra != null\n const hasChildren = children != null\n\n return (\n <WalletCardBalanceStyle {...rest}>\n <WalletCardTitleStyle>{title}</WalletCardTitleStyle>\n <WalletCardValueStyle $small={small}>{loading ? <InlineLoader /> : value}</WalletCardValueStyle>\n {hasExtra && <WalletCardExtraStyle>{loading ? <InlineLoader /> : extra}</WalletCardExtraStyle>}\n {hasChildren && <WalletCardContentStyle $hidden={loading}>{children}</WalletCardContentStyle>}\n </WalletCardBalanceStyle>\n )\n}\n","import styled from 'styled-components'\n\nexport const WalletCardBalanceStyle = styled.div`\n margin-right: 18px;\n flex-basis: 50%;\n flex-grow: 1;\n font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n line-height: 1.6em;\n\n :last-child {\n margin-right: 0;\n }\n`\n\nexport const WalletCardTitleStyle = styled.div``\n\nexport const WalletCardValueStyle = styled.div<{ $small: boolean }>`\n margin-top: 2px;\n font-size: ${({ theme, $small }) => ($small ? theme.fontSizesMap.sm : theme.fontSizesMap.md)}px;\n line-height: 1.4em;\n font-weight: 800;\n white-space: nowrap;\n`\n\nexport const WalletCardExtraStyle = styled.div`\n margin-top: 2px;\n opacity: 0.5;\n`\n\nexport const WalletCardContentStyle = styled.div<{ $hidden: boolean }>`\n margin-top: 8px;\n opacity: ${({ $hidden }) => ($hidden ? 0 : 1)};\n pointer-events: ${({ $hidden }) => ($hidden ? 'none' : 'auto')};\n`\n","export * from './walletCardRow'\n","import { WalletCardRowStyle } from './styles'\n\nexport const WalletCardRow = WalletCardRowStyle\n","import styled from 'styled-components'\n\nexport const WalletCardRowStyle = styled.div`\n display: flex;\n margin: ${({ theme }) => theme.spaceMap.lg}px 0;\n\n &:first-child {\n margin-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n`\n","export * from './walletFallback'\n","import React, { FC } from 'react'\nimport { BlockProps } from '@lidofinance/lido-ui'\nimport { FallbackWalletStyle } from './styles'\n\nexport type FallbackWalletComponent = FC<\n BlockProps & {\n error: string\n }\n>\n\nexport const WalletFallback: FallbackWalletComponent = ({ error, ...rest }) => {\n if (error) {\n return <FallbackWalletStyle {...rest}>{error}</FallbackWalletStyle>\n }\n\n return null\n}\n","import styled from 'styled-components'\n\nimport { WalletCard } from '../walletCard'\n\nexport const FallbackWalletStyle = styled(WalletCard)`\n text-align: center;\n background: var(--lido-color-error);\n background-image: none !important;\n`\n"],"names":[],"version":3,"file":"index.cjs.map"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { FC, PropsWithChildren } from "react";
|
|
2
|
+
import { BlockProps, LidoComponentProps } from "@lidofinance/lido-ui";
|
|
3
|
+
export type WalletCardComponent = FC<BlockProps>;
|
|
4
|
+
export const WalletCard: WalletCardComponent;
|
|
5
|
+
export type WalletCardAccountType = FC<LidoComponentProps<'div', {
|
|
6
|
+
account?: string | null;
|
|
7
|
+
onClickCb: (T: unknown) => unknown;
|
|
8
|
+
}>>;
|
|
9
|
+
export const WalletCardAccount: WalletCardAccountType;
|
|
10
|
+
export type WalletCardBalanceType = FC<PropsWithChildren<LidoComponentProps<'div', {
|
|
11
|
+
title: React.ReactNode;
|
|
12
|
+
value: React.ReactNode;
|
|
13
|
+
small?: boolean;
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
extra?: React.ReactNode;
|
|
16
|
+
}>>>;
|
|
17
|
+
export const WalletCardBalance: WalletCardBalanceType;
|
|
18
|
+
export const WalletCardRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
19
|
+
export type FallbackWalletComponent = FC<BlockProps & {
|
|
20
|
+
error: string;
|
|
21
|
+
}>;
|
|
22
|
+
export const WalletFallback: FallbackWalletComponent;
|
|
23
|
+
|
|
24
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;ACIA,kCAAkC,GAAG,UAAU,CAAC,CAAA;AAEhD,OAAO,MAAM,YAAY,mBAExB,CAAA;AGHD,oCAAoC,GAClC,mBACE,KAAK,EACL;IACE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAA;CACnC,CACF,CACF,CAAA;AAED,OAAO,MAAM,mBAAmB,qBAa/B,CAAA;AGjBD,oCAAoC,GAClC,kBACE,mBACE,KAAK,EACL;IACE,KAAK,EAAE,MAAM,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,SAAS,CAAA;CACxB,CACF,CACF,CACF,CAAA;AAED,OAAO,MAAM,mBAAmB,qBAc/B,CAAA;AGtCD,OAAO,MAAM,sHAAkC,CAAA;AGE/C,sCAAsC,GACpC,UAAU,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CACF,CAAA;AAED,OAAO,MAAM,gBAAgB,uBAM5B,CAAA","sources":["packages/ui/primitives/src/src/components/wallet/walletCard/styles.tsx","packages/ui/primitives/src/src/components/wallet/walletCard/walletCard.tsx","packages/ui/primitives/src/src/components/wallet/walletCard/index.ts","packages/ui/primitives/src/src/components/wallet/walletCardAccount/styles.tsx","packages/ui/primitives/src/src/components/wallet/walletCardAccount/walletCardAccount.tsx","packages/ui/primitives/src/src/components/wallet/walletCardAccount/index.ts","packages/ui/primitives/src/src/components/wallet/walletCardBalance/styles.tsx","packages/ui/primitives/src/src/components/wallet/walletCardBalance/walletCardBalance.tsx","packages/ui/primitives/src/src/components/wallet/walletCardBalance/index.ts","packages/ui/primitives/src/src/components/wallet/walletCardRow/styles.tsx","packages/ui/primitives/src/src/components/wallet/walletCardRow/walletCardRow.tsx","packages/ui/primitives/src/src/components/wallet/walletCardRow/index.ts","packages/ui/primitives/src/src/components/wallet/walletFallback/styles.tsx","packages/ui/primitives/src/src/components/wallet/walletFallback/walletFallback.tsx","packages/ui/primitives/src/src/components/wallet/walletFallback/index.ts","packages/ui/primitives/src/src/components/wallet/index.ts","packages/ui/primitives/src/src/components/index.ts","packages/ui/primitives/src/src/index.ts","packages/ui/primitives/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"export * from './components'\n"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import {jsx as $9LU3C$jsx, jsxs as $9LU3C$jsxs} from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import $9LU3C$styledcomponents from "styled-components";
|
|
4
|
+
import {Block as $9LU3C$Block, useBreakpoint as $9LU3C$useBreakpoint, IdenticonBadge as $9LU3C$IdenticonBadge, InlineLoader as $9LU3C$InlineLoader} from "@lidofinance/lido-ui";
|
|
5
|
+
|
|
6
|
+
function $parcel$exportWildcard(dest, source) {
|
|
7
|
+
Object.keys(source).forEach(function(key) {
|
|
8
|
+
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
Object.defineProperty(dest, key, {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return source[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
return dest;
|
|
21
|
+
}
|
|
22
|
+
function $parcel$export(e, n, v, s) {
|
|
23
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
24
|
+
}
|
|
25
|
+
var $2edec60da2794fb1$exports = {};
|
|
26
|
+
var $bee4c5e5a65c56cf$exports = {};
|
|
27
|
+
var $31d06770d11bf20e$exports = {};
|
|
28
|
+
var $14bfac055f2980c0$exports = {};
|
|
29
|
+
|
|
30
|
+
$parcel$export($14bfac055f2980c0$exports, "WalletCard", function () { return $14bfac055f2980c0$export$fa10365278598d8a; });
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
let $cca444b4a3633fd1$var$_ = (t)=>t, $cca444b4a3633fd1$var$t;
|
|
36
|
+
const $cca444b4a3633fd1$export$fe8257908279ce23 = (0, $9LU3C$styledcomponents)((0, $9LU3C$Block))($cca444b4a3633fd1$var$t || ($cca444b4a3633fd1$var$t = $cca444b4a3633fd1$var$_`
|
|
37
|
+
border-bottom-left-radius: 0;
|
|
38
|
+
border-bottom-right-radius: 0;
|
|
39
|
+
|
|
40
|
+
margin-bottom: ${0}px;
|
|
41
|
+
padding-bottom: ${0}px;
|
|
42
|
+
|
|
43
|
+
${0} {
|
|
44
|
+
padding-bottom: ${0}px;
|
|
45
|
+
}
|
|
46
|
+
`), ({ theme: theme })=>-theme.borderRadiusesMap.xl, ({ theme: theme })=>theme.borderRadiusesMap.xl + theme.spaceMap.xxl, ({ theme: theme })=>theme.mediaQueries.md, ({ theme: theme })=>theme.borderRadiusesMap.xl + theme.spaceMap.lg);
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
const $14bfac055f2980c0$export$fa10365278598d8a = (props)=>{
|
|
50
|
+
return /*#__PURE__*/ (0, $9LU3C$jsx)((0, $cca444b4a3633fd1$export$fe8257908279ce23), {
|
|
51
|
+
color: "accent",
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
$parcel$exportWildcard($31d06770d11bf20e$exports, $14bfac055f2980c0$exports);
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
var $debd5b9d56016368$exports = {};
|
|
61
|
+
var $24f5534c5a2a2725$exports = {};
|
|
62
|
+
|
|
63
|
+
$parcel$export($24f5534c5a2a2725$exports, "WalletCardAccount", function () { return $24f5534c5a2a2725$export$36be84b4aed0dcaa; });
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
let $0fb84f8a31124cdc$var$_ = (t)=>t, $0fb84f8a31124cdc$var$t;
|
|
69
|
+
const $0fb84f8a31124cdc$export$125159fec6480082 = (0, $9LU3C$styledcomponents).div($0fb84f8a31124cdc$var$t || ($0fb84f8a31124cdc$var$t = $0fb84f8a31124cdc$var$_`
|
|
70
|
+
align-self: stretch;
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-basis: 50%;
|
|
73
|
+
flex-grow: 1;
|
|
74
|
+
flex-shrink: 1;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: flex-end;
|
|
78
|
+
margin-left: auto;
|
|
79
|
+
|
|
80
|
+
& > * {
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
}
|
|
83
|
+
`));
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
const $24f5534c5a2a2725$export$36be84b4aed0dcaa = (props)=>{
|
|
87
|
+
const { account: account , onClickCb: onClickCb , ...rest } = props;
|
|
88
|
+
const isMobile = (0, $9LU3C$useBreakpoint)("md");
|
|
89
|
+
const mobileSymbols = 3;
|
|
90
|
+
const desktopSymbols = 6;
|
|
91
|
+
const symbols = isMobile ? mobileSymbols : desktopSymbols;
|
|
92
|
+
return /*#__PURE__*/ (0, $9LU3C$jsx)((0, $0fb84f8a31124cdc$export$125159fec6480082), {
|
|
93
|
+
...rest,
|
|
94
|
+
children: /*#__PURE__*/ (0, $9LU3C$jsx)((0, $9LU3C$IdenticonBadge), {
|
|
95
|
+
address: account !== null && account !== void 0 ? account : "",
|
|
96
|
+
symbols: symbols,
|
|
97
|
+
onClick: onClickCb,
|
|
98
|
+
color: "accent"
|
|
99
|
+
})
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
$parcel$exportWildcard($debd5b9d56016368$exports, $24f5534c5a2a2725$exports);
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
var $5e4f3f5938f09cef$exports = {};
|
|
108
|
+
var $f979852e26257adb$exports = {};
|
|
109
|
+
|
|
110
|
+
$parcel$export($f979852e26257adb$exports, "WalletCardBalance", function () { return $f979852e26257adb$export$976f47e15d5defb0; });
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
let $ca8b781e1b38cbcc$var$_ = (t)=>t, $ca8b781e1b38cbcc$var$t, $ca8b781e1b38cbcc$var$t1, $ca8b781e1b38cbcc$var$t2, $ca8b781e1b38cbcc$var$t3, $ca8b781e1b38cbcc$var$t4;
|
|
116
|
+
const $ca8b781e1b38cbcc$export$2d1cff8340d03905 = (0, $9LU3C$styledcomponents).div($ca8b781e1b38cbcc$var$t || ($ca8b781e1b38cbcc$var$t = $ca8b781e1b38cbcc$var$_`
|
|
117
|
+
margin-right: 18px;
|
|
118
|
+
flex-basis: 50%;
|
|
119
|
+
flex-grow: 1;
|
|
120
|
+
font-size: ${0}px;
|
|
121
|
+
line-height: 1.6em;
|
|
122
|
+
|
|
123
|
+
:last-child {
|
|
124
|
+
margin-right: 0;
|
|
125
|
+
}
|
|
126
|
+
`), ({ theme: theme })=>theme.fontSizesMap.xxs);
|
|
127
|
+
const $ca8b781e1b38cbcc$export$e4ca13e82989524a = (0, $9LU3C$styledcomponents).div($ca8b781e1b38cbcc$var$t1 || ($ca8b781e1b38cbcc$var$t1 = $ca8b781e1b38cbcc$var$_``));
|
|
128
|
+
const $ca8b781e1b38cbcc$export$623cde957a5a324e = (0, $9LU3C$styledcomponents).div($ca8b781e1b38cbcc$var$t2 || ($ca8b781e1b38cbcc$var$t2 = $ca8b781e1b38cbcc$var$_`
|
|
129
|
+
margin-top: 2px;
|
|
130
|
+
font-size: ${0}px;
|
|
131
|
+
line-height: 1.4em;
|
|
132
|
+
font-weight: 800;
|
|
133
|
+
white-space: nowrap;
|
|
134
|
+
`), ({ theme: theme , $small: $small })=>$small ? theme.fontSizesMap.sm : theme.fontSizesMap.md);
|
|
135
|
+
const $ca8b781e1b38cbcc$export$ed3240b66ab7bcea = (0, $9LU3C$styledcomponents).div($ca8b781e1b38cbcc$var$t3 || ($ca8b781e1b38cbcc$var$t3 = $ca8b781e1b38cbcc$var$_`
|
|
136
|
+
margin-top: 2px;
|
|
137
|
+
opacity: 0.5;
|
|
138
|
+
`));
|
|
139
|
+
const $ca8b781e1b38cbcc$export$8dce4e443c8afd41 = (0, $9LU3C$styledcomponents).div($ca8b781e1b38cbcc$var$t4 || ($ca8b781e1b38cbcc$var$t4 = $ca8b781e1b38cbcc$var$_`
|
|
140
|
+
margin-top: 8px;
|
|
141
|
+
opacity: ${0};
|
|
142
|
+
pointer-events: ${0};
|
|
143
|
+
`), ({ $hidden: $hidden })=>$hidden ? 0 : 1, ({ $hidden: $hidden })=>$hidden ? "none" : "auto");
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
const $f979852e26257adb$export$976f47e15d5defb0 = (props)=>{
|
|
147
|
+
const { title: title , small: small = false , extra: extra , loading: loading = false , children: children , value: value , ...rest } = props;
|
|
148
|
+
const hasExtra = extra != null;
|
|
149
|
+
const hasChildren = children != null;
|
|
150
|
+
return /*#__PURE__*/ (0, $9LU3C$jsxs)((0, $ca8b781e1b38cbcc$export$2d1cff8340d03905), {
|
|
151
|
+
...rest,
|
|
152
|
+
children: [
|
|
153
|
+
/*#__PURE__*/ (0, $9LU3C$jsx)((0, $ca8b781e1b38cbcc$export$e4ca13e82989524a), {
|
|
154
|
+
children: title
|
|
155
|
+
}),
|
|
156
|
+
/*#__PURE__*/ (0, $9LU3C$jsx)((0, $ca8b781e1b38cbcc$export$623cde957a5a324e), {
|
|
157
|
+
$small: small,
|
|
158
|
+
children: loading ? /*#__PURE__*/ (0, $9LU3C$jsx)((0, $9LU3C$InlineLoader), {}) : value
|
|
159
|
+
}),
|
|
160
|
+
hasExtra && /*#__PURE__*/ (0, $9LU3C$jsx)((0, $ca8b781e1b38cbcc$export$ed3240b66ab7bcea), {
|
|
161
|
+
children: loading ? /*#__PURE__*/ (0, $9LU3C$jsx)((0, $9LU3C$InlineLoader), {}) : extra
|
|
162
|
+
}),
|
|
163
|
+
hasChildren && /*#__PURE__*/ (0, $9LU3C$jsx)((0, $ca8b781e1b38cbcc$export$8dce4e443c8afd41), {
|
|
164
|
+
$hidden: loading,
|
|
165
|
+
children: children
|
|
166
|
+
})
|
|
167
|
+
]
|
|
168
|
+
});
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
$parcel$exportWildcard($5e4f3f5938f09cef$exports, $f979852e26257adb$exports);
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
var $12f586c8987d12ce$exports = {};
|
|
176
|
+
var $85abde3fc4d2318a$exports = {};
|
|
177
|
+
|
|
178
|
+
$parcel$export($85abde3fc4d2318a$exports, "WalletCardRow", function () { return $85abde3fc4d2318a$export$7d0c76f6a0418e11; });
|
|
179
|
+
|
|
180
|
+
let $850e0b5661e19f5b$var$_ = (t)=>t, $850e0b5661e19f5b$var$t;
|
|
181
|
+
const $850e0b5661e19f5b$export$d700fd35c768af1d = (0, $9LU3C$styledcomponents).div($850e0b5661e19f5b$var$t || ($850e0b5661e19f5b$var$t = $850e0b5661e19f5b$var$_`
|
|
182
|
+
display: flex;
|
|
183
|
+
margin: ${0}px 0;
|
|
184
|
+
|
|
185
|
+
&:first-child {
|
|
186
|
+
margin-top: 0;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&:last-child {
|
|
190
|
+
margin-bottom: 0;
|
|
191
|
+
}
|
|
192
|
+
`), ({ theme: theme })=>theme.spaceMap.lg);
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
const $85abde3fc4d2318a$export$7d0c76f6a0418e11 = (0, $850e0b5661e19f5b$export$d700fd35c768af1d);
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
$parcel$exportWildcard($12f586c8987d12ce$exports, $85abde3fc4d2318a$exports);
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
var $cd9ba9fc910e1e75$exports = {};
|
|
202
|
+
var $69868d219c84490b$exports = {};
|
|
203
|
+
|
|
204
|
+
$parcel$export($69868d219c84490b$exports, "WalletFallback", function () { return $69868d219c84490b$export$db542de45b23291e; });
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
let $bf0a356b24b10b1a$var$_ = (t)=>t, $bf0a356b24b10b1a$var$t;
|
|
210
|
+
const $bf0a356b24b10b1a$export$37593eea88cd94ab = (0, $9LU3C$styledcomponents)((0, $14bfac055f2980c0$export$fa10365278598d8a))($bf0a356b24b10b1a$var$t || ($bf0a356b24b10b1a$var$t = $bf0a356b24b10b1a$var$_`
|
|
211
|
+
text-align: center;
|
|
212
|
+
background: var(--lido-color-error);
|
|
213
|
+
background-image: none !important;
|
|
214
|
+
`));
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
const $69868d219c84490b$export$db542de45b23291e = ({ error: error , ...rest })=>{
|
|
218
|
+
if (error) return /*#__PURE__*/ (0, $9LU3C$jsx)((0, $bf0a356b24b10b1a$export$37593eea88cd94ab), {
|
|
219
|
+
...rest,
|
|
220
|
+
children: error
|
|
221
|
+
});
|
|
222
|
+
return null;
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
$parcel$exportWildcard($cd9ba9fc910e1e75$exports, $69868d219c84490b$exports);
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
$parcel$exportWildcard($bee4c5e5a65c56cf$exports, $31d06770d11bf20e$exports);
|
|
230
|
+
$parcel$exportWildcard($bee4c5e5a65c56cf$exports, $debd5b9d56016368$exports);
|
|
231
|
+
$parcel$exportWildcard($bee4c5e5a65c56cf$exports, $5e4f3f5938f09cef$exports);
|
|
232
|
+
$parcel$exportWildcard($bee4c5e5a65c56cf$exports, $12f586c8987d12ce$exports);
|
|
233
|
+
$parcel$exportWildcard($bee4c5e5a65c56cf$exports, $cd9ba9fc910e1e75$exports);
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
$parcel$exportWildcard($2edec60da2794fb1$exports, $bee4c5e5a65c56cf$exports);
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
export {$14bfac055f2980c0$export$fa10365278598d8a as WalletCard, $24f5534c5a2a2725$export$36be84b4aed0dcaa as WalletCardAccount, $f979852e26257adb$export$976f47e15d5defb0 as WalletCardBalance, $85abde3fc4d2318a$export$7d0c76f6a0418e11 as WalletCardRow, $69868d219c84490b$export$db542de45b23291e as WalletFallback};
|
|
242
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIAA;;ACAA;;;AAGO,MAAM,4CAAkB,CAAA,GAAA,uBAAK,EAAE,CAAA,GAAA,YAAK,AAAD,iFAAG;;;;iBAI5B,IAA6C;kBAC5C,IAAiE;;EAEjF,IAAuC;oBACrB,IAAgE;;AAEpF,IANmB,CAAC,SAAE,MAAK,EAAE,GAAK,CAAC,MAAM,iBAAiB,CAAC,EAAE,EACzC,CAAC,SAAE,MAAK,EAAE,GAAK,MAAM,iBAAiB,CAAC,EAAE,GAAG,MAAM,QAAQ,CAAC,GAAG,EAE9E,CAAC,SAAE,MAAK,EAAE,GAAK,MAAM,YAAY,CAAC,EAAE,EAClB,CAAC,SAAE,MAAK,EAAE,GAAK,MAAM,iBAAiB,CAAC,EAAE,GAAG,MAAM,QAAQ,CAAC,EAAE;;;ADL5E,MAAM,4CAAkC,CAAC,QAAU;IACxD,qBAAO,gBAAC,CAAA,GAAA,yCAAe,AAAD;QAAE,OAAM;QAAU,GAAG,KAAK;;AAClD;;ADRA;;;ADAA;;;;;AKAA;;;ACAA;;AAEO,MAAM,4CAAyB,CAAA,GAAA,uBAAM,AAAD,EAAE,GAAG,+EAAC;;;;;;;;;;;;;;AAcjD;;;ADDO,MAAM,4CAA2C,CAAC,QAAU;IACjE,MAAM,WAAE,QAAO,aAAE,UAAS,EAAE,GAAG,MAAM,GAAG;IAExC,MAAM,WAAW,CAAA,GAAA,oBAAY,EAAE;IAC/B,MAAM,gBAAgB;IACtB,MAAM,iBAAiB;IACvB,MAAM,UAAU,WAAW,gBAAgB,cAAc;IAEzD,qBACE,gBAAC,CAAA,GAAA,yCAAsB,AAAD;QAAG,GAAG,IAAI;kBAC9B,cAAA,gBAAC,CAAA,GAAA,qBAAc,AAAD;YAAE,SAAS,oBAAA,qBAAA,UAAW,EAAE;YAAE,SAAS;YAAS,SAAS;YAAW,OAAM;;;AAG1F;;AD5BA;;;;;;;;AIAA;;;ACAA;;AAEO,MAAM,4CAAyB,CAAA,GAAA,uBAAM,AAAD,EAAE,GAAG,+EAAC;;;;aAIpC,IAAwC;;;;;;AAMrD,IANe,CAAC,SAAE,MAAK,EAAE,GAAK,MAAM,YAAY,CAAC,GAAG;AAQ7C,MAAM,4CAAuB,CAAA,GAAA,uBAAM,AAAD,EAAE,GAAG,iFAAC;AAExC,MAAM,4CAAuB,CAAA,GAAA,uBAAM,AAAD,EAAE,GAAG,iFAAsB;;aAEvD,IAAkF;;;;AAI/F,IAJe,CAAC,SAAE,MAAK,UAAE,OAAM,EAAE,GAAM,SAAS,MAAM,YAAY,CAAC,EAAE,GAAG,MAAM,YAAY,CAAC,EAAE;AAMtF,MAAM,4CAAuB,CAAA,GAAA,uBAAM,AAAD,EAAE,GAAG,iFAAC;;;AAG/C;AAEO,MAAM,4CAAyB,CAAA,GAAA,uBAAM,AAAD,EAAE,GAAG,iFAAuB;;WAE5D,IAAqC;kBAC9B,IAA+C;AACjE,IAFa,CAAC,WAAE,QAAO,EAAE,GAAM,UAAU,IAAI,CAAC,EAC1B,CAAC,WAAE,QAAO,EAAE,GAAM,UAAU,SAAS,MAAM;;;ADNxD,MAAM,4CAA2C,CAAC,QAAU;IACjE,MAAM,SAAE,MAAK,SAAE,QAAQ,KAAK,UAAE,MAAK,WAAE,UAAU,KAAK,aAAE,SAAQ,SAAE,MAAK,EAAE,GAAG,MAAM,GAAG;IAEnF,MAAM,WAAW,SAAS,IAAI;IAC9B,MAAM,cAAc,YAAY,IAAI;IAEpC,qBACE,iBAAC,CAAA,GAAA,yCAAsB,AAAD;QAAG,GAAG,IAAI;;0BAC9B,gBAAC,CAAA,GAAA,yCAAmB;0BAAG;;0BACvB,gBAAC,CAAA,GAAA,yCAAmB;gBAAE,QAAQ;0BAAQ,wBAAU,gBAAC,CAAA,GAAA,mBAAW,SAAO,KAAK;;YACvE,0BAAY,gBAAC,CAAA,GAAA,yCAAoB,AAAD;0BAAG,wBAAU,gBAAC,CAAA,GAAA,mBAAW,SAAO,KAAK;;YACrE,6BAAe,gBAAC,CAAA,GAAA,yCAAsB,AAAD;gBAAE,SAAS;0BAAU;;;;AAGjE;;ADxCA;;;;;;;;AKAA;;AAEO,MAAM,4CAAqB,CAAA,GAAA,uBAAM,AAAD,EAAE,GAAG,+EAAC;;UAEnC,IAAmC;;;;;;;;;AAS7C,IATY,CAAC,SAAE,MAAK,EAAE,GAAK,MAAM,QAAQ,CAAC,EAAE;;ADJ5C;AAEO,MAAM,4CAAgB,CAAA,GAAA,yCAAkB,AAAD;;ADF9C;;;;;;;;AIAA;;ACAA;;;AAIO,MAAM,4CAAsB,CAAA,GAAA,uBAAK,EAAE,CAAA,GAAA,yCAAU,AAAD,iFAAG;;;;AAItD;;;ADEO,MAAM,4CAA0C,CAAC,SAAE,MAAK,EAAE,GAAG,MAAM,GAAK;IAC7E,IAAI,OACF,qBAAO,gBAAC,CAAA,GAAA,yCAAmB,AAAD;QAAG,GAAG,IAAI;kBAAG;;IAGzC,OAAO,IAAI;AACb;;ADhBA;;;;;;;;;;AdAA;;;ADAA","sources":["packages/ui/primitives/src/index.ts","packages/ui/primitives/src/components/index.ts","packages/ui/primitives/src/components/wallet/index.ts","packages/ui/primitives/src/components/wallet/walletCard/index.ts","packages/ui/primitives/src/components/wallet/walletCard/walletCard.tsx","packages/ui/primitives/src/components/wallet/walletCard/styles.tsx","packages/ui/primitives/src/components/wallet/walletCardAccount/index.ts","packages/ui/primitives/src/components/wallet/walletCardAccount/walletCardAccount.tsx","packages/ui/primitives/src/components/wallet/walletCardAccount/styles.tsx","packages/ui/primitives/src/components/wallet/walletCardBalance/index.ts","packages/ui/primitives/src/components/wallet/walletCardBalance/walletCardBalance.tsx","packages/ui/primitives/src/components/wallet/walletCardBalance/styles.tsx","packages/ui/primitives/src/components/wallet/walletCardRow/index.ts","packages/ui/primitives/src/components/wallet/walletCardRow/walletCardRow.tsx","packages/ui/primitives/src/components/wallet/walletCardRow/styles.tsx","packages/ui/primitives/src/components/wallet/walletFallback/index.ts","packages/ui/primitives/src/components/wallet/walletFallback/walletFallback.tsx","packages/ui/primitives/src/components/wallet/walletFallback/styles.tsx"],"sourcesContent":["export * from './components'\n","export * from './wallet'\n","export * from './walletCard'\nexport * from './walletCardAccount'\nexport * from './walletCardBalance'\nexport * from './walletCardRow'\nexport * from './walletFallback'\n","export * from './walletCard'\n","import React, { FC } from 'react'\nimport { BlockProps } from '@lidofinance/lido-ui'\nimport { WalletCardStyle } from './styles'\n\nexport type WalletCardComponent = FC<BlockProps>\n\nexport const WalletCard: WalletCardComponent = (props) => {\n return <WalletCardStyle color=\"accent\" {...props} />\n}\n","import styled from 'styled-components'\nimport { Block } from '@lidofinance/lido-ui'\n\nexport const WalletCardStyle = styled(Block)`\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n margin-bottom: ${({ theme }) => -theme.borderRadiusesMap.xl}px;\n padding-bottom: ${({ theme }) => theme.borderRadiusesMap.xl + theme.spaceMap.xxl}px;\n\n ${({ theme }) => theme.mediaQueries.md} {\n padding-bottom: ${({ theme }) => theme.borderRadiusesMap.xl + theme.spaceMap.lg}px;\n }\n`\n","export * from './walletCardAccount'\n","import React, { FC } from 'react'\nimport { LidoComponentProps, IdenticonBadge, useBreakpoint } from '@lidofinance/lido-ui'\n\nimport { WalletCardAccountStyle } from './styles'\n\nexport type WalletCardAccountType = FC<\n LidoComponentProps<\n 'div',\n {\n account?: string | null\n onClickCb: (T: unknown) => unknown\n }\n >\n>\n\nexport const WalletCardAccount: WalletCardAccountType = (props) => {\n const { account, onClickCb, ...rest } = props\n\n const isMobile = useBreakpoint('md')\n const mobileSymbols = 3\n const desktopSymbols = 6\n const symbols = isMobile ? mobileSymbols : desktopSymbols\n\n return (\n <WalletCardAccountStyle {...rest}>\n <IdenticonBadge address={account ?? ''} symbols={symbols} onClick={onClickCb} color=\"accent\" />\n </WalletCardAccountStyle>\n )\n}\n","import styled from 'styled-components'\n\nexport const WalletCardAccountStyle = styled.div`\n align-self: stretch;\n display: flex;\n flex-basis: 50%;\n flex-grow: 1;\n flex-shrink: 1;\n overflow: hidden;\n align-items: center;\n justify-content: flex-end;\n margin-left: auto;\n\n & > * {\n cursor: pointer;\n }\n`\n","export * from './walletCardBalance'\n","import React, { FC, PropsWithChildren } from 'react'\nimport { LidoComponentProps, InlineLoader } from '@lidofinance/lido-ui'\n\nimport {\n WalletCardBalanceStyle,\n WalletCardTitleStyle,\n WalletCardValueStyle,\n WalletCardExtraStyle,\n WalletCardContentStyle,\n} from './styles'\n\nexport type WalletCardBalanceType = FC<\n PropsWithChildren<\n LidoComponentProps<\n 'div',\n {\n title: React.ReactNode\n value: React.ReactNode\n small?: boolean\n loading?: boolean\n extra?: React.ReactNode\n }\n >\n >\n>\n\nexport const WalletCardBalance: WalletCardBalanceType = (props) => {\n const { title, small = false, extra, loading = false, children, value, ...rest } = props\n\n const hasExtra = extra != null\n const hasChildren = children != null\n\n return (\n <WalletCardBalanceStyle {...rest}>\n <WalletCardTitleStyle>{title}</WalletCardTitleStyle>\n <WalletCardValueStyle $small={small}>{loading ? <InlineLoader /> : value}</WalletCardValueStyle>\n {hasExtra && <WalletCardExtraStyle>{loading ? <InlineLoader /> : extra}</WalletCardExtraStyle>}\n {hasChildren && <WalletCardContentStyle $hidden={loading}>{children}</WalletCardContentStyle>}\n </WalletCardBalanceStyle>\n )\n}\n","import styled from 'styled-components'\n\nexport const WalletCardBalanceStyle = styled.div`\n margin-right: 18px;\n flex-basis: 50%;\n flex-grow: 1;\n font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n line-height: 1.6em;\n\n :last-child {\n margin-right: 0;\n }\n`\n\nexport const WalletCardTitleStyle = styled.div``\n\nexport const WalletCardValueStyle = styled.div<{ $small: boolean }>`\n margin-top: 2px;\n font-size: ${({ theme, $small }) => ($small ? theme.fontSizesMap.sm : theme.fontSizesMap.md)}px;\n line-height: 1.4em;\n font-weight: 800;\n white-space: nowrap;\n`\n\nexport const WalletCardExtraStyle = styled.div`\n margin-top: 2px;\n opacity: 0.5;\n`\n\nexport const WalletCardContentStyle = styled.div<{ $hidden: boolean }>`\n margin-top: 8px;\n opacity: ${({ $hidden }) => ($hidden ? 0 : 1)};\n pointer-events: ${({ $hidden }) => ($hidden ? 'none' : 'auto')};\n`\n","export * from './walletCardRow'\n","import { WalletCardRowStyle } from './styles'\n\nexport const WalletCardRow = WalletCardRowStyle\n","import styled from 'styled-components'\n\nexport const WalletCardRowStyle = styled.div`\n display: flex;\n margin: ${({ theme }) => theme.spaceMap.lg}px 0;\n\n &:first-child {\n margin-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n`\n","export * from './walletFallback'\n","import React, { FC } from 'react'\nimport { BlockProps } from '@lidofinance/lido-ui'\nimport { FallbackWalletStyle } from './styles'\n\nexport type FallbackWalletComponent = FC<\n BlockProps & {\n error: string\n }\n>\n\nexport const WalletFallback: FallbackWalletComponent = ({ error, ...rest }) => {\n if (error) {\n return <FallbackWalletStyle {...rest}>{error}</FallbackWalletStyle>\n }\n\n return null\n}\n","import styled from 'styled-components'\n\nimport { WalletCard } from '../walletCard'\n\nexport const FallbackWalletStyle = styled(WalletCard)`\n text-align: center;\n background: var(--lido-color-error);\n background-image: none !important;\n`\n"],"names":[],"version":3,"file":"index.mjs.map"}
|
package/package.json
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@lidofinance/ui-primitives",
|
|
3
|
+
"description": "UI primitives (client-side: components, constants, hooks)",
|
|
4
|
+
"repository": "git@github.com:lidofinance/warehouse.git",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"version": "0.23.0",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"engines": {
|
|
11
|
+
"node": ">= 16",
|
|
12
|
+
"browsers": "> 0.5%, last 2 versions, not dead"
|
|
13
|
+
},
|
|
14
|
+
"source": "./src/index.ts",
|
|
15
|
+
"main": "dist/index.cjs",
|
|
16
|
+
"module": "dist/index.mjs",
|
|
17
|
+
"types": "dist/index.d.ts",
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "parcel build",
|
|
20
|
+
"lint": "eslint . && prettier --check src",
|
|
21
|
+
"lint:fix": "eslint --fix . && prettier --check src --write",
|
|
22
|
+
"types": "tsc --noEmit"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@lidofinance/lido-ui": "^3.6.1",
|
|
26
|
+
"react": "17 || 18",
|
|
27
|
+
"styled-components": "^5.3.5"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@lidofinance/config-prettier": "~0.23.0",
|
|
31
|
+
"@lidofinance/lido-ui": "^3.6.1",
|
|
32
|
+
"@storybook/react": "^7.0.7",
|
|
33
|
+
"@types/react": "^18.0.25",
|
|
34
|
+
"@types/styled-components": "^5.1.26"
|
|
35
|
+
}
|
|
36
|
+
}
|