@@ -1,12 +1,12 @@
11import 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';
33import { DEFAULT_GAS_PRICE_GWEI } from 'lib/constants';
44import useGasPrice from 'lib/useGasPrice';
55
66import Dropdown from './Dropdown';
77import './FeeDropdown.scss';
88
9−const PRICE_LABELS = ['Fast', 'Average', 'Slow'];
9+const PRICE_LABELS = ['Fast', 'Normal', 'Slow'];
1010
1111export interface GasPrice {
1212 price: number;
@@ -25,7 +25,8 @@ export default function FeeDropdown({
2525 const { suggestedGasPrices } = useGasPrice(DEFAULT_GAS_PRICE_GWEI);
2626
2727 const [open, setOpen] = useState(false);
28− const [custom, setCustom] = useState<string>('0');
28+ const [useCustom, setUseCustom] = useState(false);
29+ const [custom, setCustom] = useState<string | undefined>();
2930 const [selected, setSelected] = useState<GasPrice>(
3031 suggestedGasPrices.average
3132 );
@@ -66,6 +67,28 @@ export default function FeeDropdown({
6667 [setGasPrice, setSelected, setOpen]
6768 );
6869
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+
6992 return (
7093 <Dropdown
7194 className="fee-dropdown"
@@ -79,19 +102,13 @@ export default function FeeDropdown({
79102 className="price"
80103 onClick={selectPrice(value)}
81104 key={`gas-price-${ind}`}>
82− {PRICE_LABELS[ind]}: {formatDisplay(value)}
105+ <Box className="speed">{PRICE_LABELS[ind]}</Box>
106+ <Box className="time">{formatDisplay(value)}</Box>
83107 </Row>
84108 )
85109 )}
86− <Row className="price">
87− <Box className="label">Custom:</Box>
88− <StatelessTextInput
89− value={custom}
90− className="custom-input"
91− placeholder="0"
92− onChange={handleCustom}
93− />
94− <Box className="unit">gwei</Box>
110+ <Row className="price" onClick={() => setUseCustom(true)}>
111+ <Box className="time">Custom...</Box>
95112 </Row>
96113 </Box>
97114 </Dropdown>