git.iko.soy/bridge
on master help sign in
Polish custom gwei dropdown (#846)
2bd4b28Will Galebach
src/components/L2/Dropdowns/FeeDropdown.scss+31−7
compare with master
unifiedsplit
@@ -4,6 +4,31 @@
4 font-size: 14px;
4 font-size: 14px;
5 position: relative;
5 position: relative;
6
6
7+ &.custom {
8+ background-color: $washed-gray;
9+ padding: 4px;
10+ border-radius: $medium-border-radius;
11+ display: flex;
12+ flex-direction: row;
13+ justify-content: space-between;
14+ align-items: center;
15+ cursor: pointer;
16+
17+ .custom-input {
18+ font-family: "Inter", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
19+ height: 24px;
20+ width: 134px;
21+ border: none;
22+ background-color: $washed-gray;
23+ }
24+
25+ svg {
26+ width: 16px;
27+ height: 14px;
28+ margin-right: 6px;
29+ }
30+ }
31+
7 .selector {
32 .selector {
8 min-width: 150px;
33 min-width: 150px;
9 }
34 }
@@ -16,7 +41,6 @@
16 .price {
41 .price {
17 display: flex;
42 display: flex;
18 flex-direction: row;
43 flex-direction: row;
19− justify-content: space-between;
20 align-items: center;
44 align-items: center;
21 cursor: pointer;
45 cursor: pointer;
22 line-height: 20px;
46 line-height: 20px;
@@ -27,14 +51,14 @@
27 opacity: 0.8;
51 opacity: 0.8;
28 }
52 }
29
53
30− .label {
54+ .speed {
55+ font-weight: 600;
31− margin-right: 8px;
56+ margin-right: 4px;
32 }
57 }
33
58
34− .custom-input {
59+ .time {
35− font-family: "Inter", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
60+ color: $dark-gray;
36− text-align: right;
61+ font-weight: 600;
37− height: 24px;
38 }
62 }
39
63
40 .unit {
64 .unit {
src/components/L2/Dropdowns/FeeDropdown.tsx+30−13
@@ -1,12 +1,12 @@
1import React, { useCallback, useEffect, useState, FormEvent } from 'react';
1import React, { useCallback, useEffect, useState, FormEvent } from 'react';
2−import { Box, Row, StatelessTextInput } from '@tlon/indigo-react';
2+import { Box, Row, Icon, StatelessTextInput } from '@tlon/indigo-react';
3import { DEFAULT_GAS_PRICE_GWEI } from 'lib/constants';
3import { DEFAULT_GAS_PRICE_GWEI } from 'lib/constants';
4import useGasPrice from 'lib/useGasPrice';
4import useGasPrice from 'lib/useGasPrice';
5
5
6import Dropdown from './Dropdown';
6import Dropdown from './Dropdown';
7import './FeeDropdown.scss';
7import './FeeDropdown.scss';
8
8
9−const PRICE_LABELS = ['Fast', 'Average', 'Slow'];
9+const PRICE_LABELS = ['Fast', 'Normal', 'Slow'];
10
10
11export interface GasPrice {
11export interface GasPrice {
12 price: number;
12 price: number;
@@ -25,7 +25,8 @@ export default function FeeDropdown({
25 const { suggestedGasPrices } = useGasPrice(DEFAULT_GAS_PRICE_GWEI);
25 const { suggestedGasPrices } = useGasPrice(DEFAULT_GAS_PRICE_GWEI);
26
26
27 const [open, setOpen] = useState(false);
27 const [open, setOpen] = useState(false);
28+ const [useCustom, setUseCustom] = useState(false);
28− const [custom, setCustom] = useState<string>('0');
29+ const [custom, setCustom] = useState<string | undefined>();
29 const [selected, setSelected] = useState<GasPrice>(
30 const [selected, setSelected] = useState<GasPrice>(
30 suggestedGasPrices.average
31 suggestedGasPrices.average
31 );
32 );
@@ -66,6 +67,28 @@ export default function FeeDropdown({
66 [setGasPrice, setSelected, setOpen]
67 [setGasPrice, setSelected, setOpen]
67 );
68 );
68
69
70+ if (useCustom) {
71+ return (
72+ <Row className="fee-dropdown custom">
73+ <StatelessTextInput
74+ value={custom}
75+ className="custom-input"
76+ placeholder="Custom gwei"
77+ onChange={handleCustom}
78+ autoFocus
79+ />
80+ <Icon
81+ icon="ChevronSouth"
82+ onClick={() => {
83+ setOpen(true);
84+ setUseCustom(false);
85+ setCustom('');
86+ }}
87+ />
88+ </Row>
89+ );
90+ }
91+
69 return (
92 return (
70 <Dropdown
93 <Dropdown
71 className="fee-dropdown"
94 className="fee-dropdown"
@@ -79,19 +102,13 @@ export default function FeeDropdown({
79 className="price"
102 className="price"
80 onClick={selectPrice(value)}
103 onClick={selectPrice(value)}
81 key={`gas-price-${ind}`}>
104 key={`gas-price-${ind}`}>
105+ <Box className="speed">{PRICE_LABELS[ind]}</Box>
82− {PRICE_LABELS[ind]}: {formatDisplay(value)}
106+ <Box className="time">{formatDisplay(value)}</Box>
83 </Row>
107 </Row>
84 )
108 )
85 )}
109 )}
86− <Row className="price">
110+ <Row className="price" onClick={() => setUseCustom(true)}>
87− <Box className="label">Custom:</Box>
111+ <Box className="time">Custom...</Box>
88− <StatelessTextInput
89− value={custom}
90− className="custom-input"
91− placeholder="0"
92− onChange={handleCustom}
93− />
94− <Box className="unit">gwei</Box>
95 </Row>
112 </Row>
96 </Box>
113 </Box>
97 </Dropdown>
114 </Dropdown>
src/style/shared/variables.scss+1−1
@@ -1,6 +1,6 @@
1$default-font: "Inter", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
1$default-font: "Inter", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
2
2
3−$washed-gray: rgba(0, 0, 0, 0.04);
3+$washed-gray: rgba(245, 245, 245, 1);
4$small-border-radius: 2px;
4$small-border-radius: 2px;
5$medium-border-radius: 4px;
5$medium-border-radius: 4px;
6$large-border-radius: 8px;
6$large-border-radius: 8px;