Fix feepicker issues

This commit is contained in:
finned-palmer 2021-08-19 17:13:23 -05:00
parent b4eae08f88
commit 09bfb81c84
2 changed files with 83 additions and 62 deletions

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useRef } from 'react';
import {
Box,
Text,
@ -20,7 +20,21 @@ const FeePicker: React.FC<Props> = ({
feeValue,
setFeeValue,
feeDismiss,
}) => (
}) => {
const modalRef = useRef(null);
const clickDismiss = (e: any) => {
if (modalRef && !modalRef.current.contains(e.target)) {
feeDismiss();
}
};
useEffect(() => {
document.addEventListener('click', clickDismiss);
return () => {
document.removeEventListener('click', clickDismiss);
};
}, []);
return (
<Box
position="absolute"
p={4}
@ -28,6 +42,7 @@ const FeePicker: React.FC<Props> = ({
zIndex={10}
backgroundColor="white"
borderRadius={3}
ref={modalRef}
>
<Text fontSize={1} color="black" fontWeight="bold" mb={4}>
Transaction Speed
@ -80,5 +95,6 @@ const FeePicker: React.FC<Props> = ({
</Col>
</Box>
);
};
export default FeePicker;

View File

@ -397,14 +397,19 @@ const Send: React.FC<Props> = ({ stopSending, value, conversion }) => {
width="24px"
border="none"
backgroundColor="rgba(33, 157, 255)"
onClick={() => {
setShowFeePicker((prev) => {
if (prev) {
return false;
}
return true;
});
}}
>
<Icon
icon="ChevronSouth"
width="12px"
color="white"
onClick={() => {
if (!showFeePicker) setShowFeePicker(true);
}}
cursor="pointer"
/>
</Button>