86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import { Button, makeStyles, MenuItem, TextField } from "@material-ui/core";
|
|
import { useCallback } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import {
|
|
selectAttestIsSourceComplete,
|
|
selectAttestShouldLockFields,
|
|
selectAttestSourceAsset,
|
|
selectAttestSourceChain,
|
|
} from "../../store/selectors";
|
|
import {
|
|
incrementStep,
|
|
setSourceAsset,
|
|
setSourceChain,
|
|
} from "../../store/attestSlice";
|
|
import { CHAINS } from "../../utils/consts";
|
|
import KeyAndBalance from "../KeyAndBalance";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
transferField: {
|
|
marginTop: theme.spacing(5),
|
|
},
|
|
}));
|
|
|
|
function Source() {
|
|
const classes = useStyles();
|
|
const dispatch = useDispatch();
|
|
const sourceChain = useSelector(selectAttestSourceChain);
|
|
const sourceAsset = useSelector(selectAttestSourceAsset);
|
|
const isSourceComplete = useSelector(selectAttestIsSourceComplete);
|
|
const shouldLockFields = useSelector(selectAttestShouldLockFields);
|
|
const handleSourceChange = useCallback(
|
|
(event) => {
|
|
dispatch(setSourceChain(event.target.value));
|
|
},
|
|
[dispatch]
|
|
);
|
|
const handleAssetChange = useCallback(
|
|
(event) => {
|
|
dispatch(setSourceAsset(event.target.value));
|
|
},
|
|
[dispatch]
|
|
);
|
|
const handleNextClick = useCallback(
|
|
(event) => {
|
|
dispatch(incrementStep());
|
|
},
|
|
[dispatch]
|
|
);
|
|
return (
|
|
<>
|
|
<TextField
|
|
select
|
|
fullWidth
|
|
value={sourceChain}
|
|
onChange={handleSourceChange}
|
|
disabled={shouldLockFields}
|
|
>
|
|
{CHAINS.map(({ id, name }) => (
|
|
<MenuItem key={id} value={id}>
|
|
{name}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
<KeyAndBalance chainId={sourceChain} />
|
|
<TextField
|
|
label="Asset"
|
|
fullWidth
|
|
className={classes.transferField}
|
|
value={sourceAsset}
|
|
onChange={handleAssetChange}
|
|
disabled={shouldLockFields}
|
|
/>
|
|
<Button
|
|
disabled={!isSourceComplete}
|
|
onClick={handleNextClick}
|
|
variant="contained"
|
|
color="primary"
|
|
>
|
|
Next
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Source;
|