ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-11-28 19:55:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix feepicker issues

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
pkg/btc-wallet/src/components/Send/FeePicker.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useRef } from 'react';
import {
Box,
Text,
@ -20,65 +20,81 @@ const FeePicker: React.FC<Props> = ({
feeValue,
setFeeValue,
feeDismiss,
}) => (
<Box
position="absolute"
p={4}
border="1px solid green"
zIndex={10}
backgroundColor="white"
borderRadius={3}
>
<Text fontSize={1} color="black" fontWeight="bold" mb={4}>
Transaction Speed
</Text>
<Col mt={4}>
<RadioButton
name="feeRadio"
selected={feeValue === feeLevels.low}
p="2"
onChange={() => {
setFeeValue(feeLevels.low);
feeDismiss();
}}
>
<Label fontSize="14px">
Slow: {feeChoices[feeLevels.low][1]} sats/vbyte ~
{feeChoices[feeLevels.low][0]}m
</Label>
</RadioButton>
}) => {
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);
};
}, []);
<RadioButton
name="feeRadio"
selected={feeValue === feeLevels.mid}
p="2"
onChange={() => {
setFeeValue(feeLevels.mid);
feeDismiss();
}}
>
<Label fontSize="14px">
Normal: {feeChoices[feeLevels.mid][1]} sats/vbyte ~
{feeChoices[feeLevels.mid][0]}m
</Label>
</RadioButton>
return (
<Box
position="absolute"
p={4}
border="1px solid green"
zIndex={10}
backgroundColor="white"
borderRadius={3}
ref={modalRef}
>
<Text fontSize={1} color="black" fontWeight="bold" mb={4}>
Transaction Speed
</Text>
<Col mt={4}>
<RadioButton
name="feeRadio"
selected={feeValue === feeLevels.low}
p="2"
onChange={() => {
setFeeValue(feeLevels.low);
feeDismiss();
}}
>
<Label fontSize="14px">
Slow: {feeChoices[feeLevels.low][1]} sats/vbyte ~
{feeChoices[feeLevels.low][0]}m
</Label>
</RadioButton>
<RadioButton
name="feeRadio"
selected={feeValue === feeLevels.high}
p="2"
onChange={() => {
setFeeValue(feeLevels.high);
feeDismiss();
}}
>
<Label fontSize="14px">
Fast: {feeChoices[feeLevels.high][1]} sats/vbyte ~
{feeChoices[feeLevels.high][0]}m
</Label>
</RadioButton>
</Col>
</Box>
);
<RadioButton
name="feeRadio"
selected={feeValue === feeLevels.mid}
p="2"
onChange={() => {
setFeeValue(feeLevels.mid);
feeDismiss();
}}
>
<Label fontSize="14px">
Normal: {feeChoices[feeLevels.mid][1]} sats/vbyte ~
{feeChoices[feeLevels.mid][0]}m
</Label>
</RadioButton>
<RadioButton
name="feeRadio"
selected={feeValue === feeLevels.high}
p="2"
onChange={() => {
setFeeValue(feeLevels.high);
feeDismiss();
}}
>
<Label fontSize="14px">
Fast: {feeChoices[feeLevels.high][1]} sats/vbyte ~
{feeChoices[feeLevels.high][0]}m
</Label>
</RadioButton>
</Col>
</Box>
);
};
export default FeePicker;

11
pkg/btc-wallet/src/components/Send/Send.tsx
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>