@@ -1,5 +1,5 @@
1−import React, { useCallback, useEffect, useState } from 'react';
2−import { Box, Row } from '@tlon/indigo-react';
1+import React, { useCallback, useEffect, useState, FormEvent } from 'react';
2+import { Box, Row, StatelessTextInput } from '@tlon/indigo-react';
33import { DEFAULT_GAS_PRICE_GWEI } from 'lib/constants';
44import useGasPrice from 'lib/useGasPrice';
55
@@ -10,20 +10,49 @@ const PRICE_LABELS = ['Fast', 'Average', 'Slow'];
1010
1111export interface GasPrice {
1212 price: number;
13− wait: number;
13+ wait: string;
1414}
1515
16−const formatPriceWait = ({ price, wait }: GasPrice) =>
17− `${price} gwei (${Math.round(wait * 100) / 100} min)`;
16+export const formatWait = (wait: number) => Math.round(wait * 100) / 100;
17+export const formatDisplay = ({ price, wait }: GasPrice) =>
18+ `${price} gwei (${wait} min)`;
1819
19−const FeeDropdown = ({ setGasPrice }: { setGasPrice: (g: number) => void }) => {
20+export default function FeeDropdown({
21+ setGasPrice,
22+}: {
23+ setGasPrice: (g: number) => void;
24+}) {
2025 const { suggestedGasPrices } = useGasPrice(DEFAULT_GAS_PRICE_GWEI);
2126
22− const [open, setOpen] = useState<boolean>(false);
27+ const [open, setOpen] = useState(false);
28+ const [custom, setCustom] = useState<string>('0');
2329 const [selected, setSelected] = useState<GasPrice>(
2430 suggestedGasPrices.average
2531 );
2632
33+ const handleCustom = (e: FormEvent) => {
34+ const cleanedValue = e.target.value.replace(/[^0-9]/g, '');
35+ const cleanedNum = Number(cleanedValue);
36+ setCustom(cleanedValue);
37+ setGasPrice(cleanedNum);
38+
39+ let customWait = 'Unknown';
40+
41+ const { fast, average, low } = suggestedGasPrices;
42+
43+ if (cleanedNum < low.price) {
44+ customWait = `> ${low.wait}`;
45+ } else if (cleanedNum < average.price) {
46+ customWait = `~${low.wait}`;
47+ } else if (cleanedNum < fast.price) {
48+ customWait = `~${average.wait}`;
49+ } else {
50+ customWait = `< ${fast.wait}`;
51+ }
52+
53+ setSelected({ price: cleanedValue, wait: customWait });
54+ };
55+
2756 useEffect(() => {
2857 setSelected(suggestedGasPrices.average);
2958 }, [suggestedGasPrices]);
@@ -41,7 +70,7 @@ const FeeDropdown = ({ setGasPrice }: { setGasPrice: (g: number) => void }) => {
4170 <Dropdown
4271 className="fee-dropdown"
4372 open={open}
44− value={formatPriceWait(selected)}
73+ value={formatDisplay(selected)}
4574 toggleOpen={() => setOpen(!open)}>
4675 <Box className="prices">
4776 {Object.values(suggestedGasPrices).map(
@@ -50,13 +79,21 @@ const FeeDropdown = ({ setGasPrice }: { setGasPrice: (g: number) => void }) => {
5079 className="price"
5180 onClick={selectPrice(value)}
5281 key={value.wait}>
53− {PRICE_LABELS[ind]}: {formatPriceWait(value)}
82+ {PRICE_LABELS[ind]}: {formatDisplay(value)}
5483 </Row>
5584 )
5685 )}
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>
95+ </Row>
5796 </Box>
5897 </Dropdown>
5998 );
6099};
61−
62−export default FeeDropdown;