-
Notifications
You must be signed in to change notification settings - Fork 5
/
ABISelect.tsx
66 lines (56 loc) · 1.52 KB
/
ABISelect.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { ERC20ABI, ERC4626ABI, ERC721ABI, ERC1155ABI } from '@abimate/solmate';
import { Box, Text } from 'ink';
import SelectInput from 'ink-select-input';
import React, { FC, useCallback, useEffect, useMemo } from 'react';
import { useABIs } from '../hooks/useABIs';
const DEFAULT_ABIs = {
ERC20: ERC20ABI,
ERC721: ERC721ABI,
ERC1155: ERC1155ABI,
ERC4626: ERC4626ABI,
};
interface ABISelectProps {
onSuccess: (item: any) => void;
abi?: string;
}
const ABISelect: FC<ABISelectProps> = ({ onSuccess, abi }) => {
const { abis, isLoading } = useABIs();
const items = useMemo(() => {
return Object.entries({ ...DEFAULT_ABIs, ...abis })
.map(([label, value]) => ({
label,
value,
key: label,
}))
.sort((a, b) => a.label.localeCompare(b.label));
}, [abis, isLoading]);
const handleSelect = useCallback(
(item: any) => {
onSuccess(item);
},
[onSuccess]
);
useEffect(
function selectABIArgument() {
if (abi && items && !isLoading) {
const abiItem = items.find((item) => item.label === abi);
if (abiItem) {
handleSelect(abiItem);
}
}
},
[abi, items, handleSelect, isLoading]
);
return (
<Box flexDirection="column">
<Text bold>ABI:</Text>
{items && (
<Box flexDirection="column">
<SelectInput items={items} onSelect={handleSelect} limit={10} />
{items.length > 10 && <Text>{'\t↓'}</Text>}
</Box>
)}
</Box>
);
};
export default ABISelect;