Fix feepicker issues

pkg/btc-wallet/src/components/Send/FeePicker.tsx

@@ -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;

pkg/btc-wallet/src/components/Send/Send.tsx

@@ -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>