Fix feepicker

pkg/btc-wallet/src/js/components/lib/feePicker.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React from 'react';
 import {
   Box,
   Text,
@@ -6,38 +6,15 @@ import {
   StatelessRadioButtonField as RadioButton,
   Label,
 } from '@tlon/indigo-react';
+import { feeLevels } from './send';
 
-const feeLevels = {
-  low: 'low',
-  mid: 'mid',
-  high: 'high',
-};
-
-const FeePicker = ({ feeChoices, feeSelect, feeDismiss }) => {
-  const [feeSelected, setFeeSelected] = useState(feeLevels.mid);
-  const [modalElement, setModalElement] = useState();
-  const modalRef = useRef();
-
-  // const clickDismiss = (e) => {
-  // console.log(modalElement, e);
-  // // if (modalRef && !modalRef.contains(e.target)) {
-  // // feeDismiss();
-  // // }
-  // };
-
+const FeePicker = ({ feeChoices, feeValue, setFeeValue, feeDismiss }) => {
   const select = (which) => {
-    setFeeSelected(which);
-    feeSelect(which);
+    console.log(which);
+    setFeeValue(feeLevels[which]);
     feeDismiss();
   };
 
-  // useEffect(() => {
-  // document.addEventListener('click', (e) => clickDismiss(e));
-  // setModalElement(modalRef.current);
-  // console.log(modalRef.current);
-  // return () => document.addEventListener('click', clickDismiss);
-  // }, []);
-
   return (
     <Box
       // ref={modalRef}
@@ -55,10 +32,10 @@ const FeePicker = ({ feeChoices, feeSelect, feeDismiss }) => {
       <Col mt={4}>
         <RadioButton
           name="feeRadio"
-          selected={feeSelected === feeLevels.low}
+          selected={feeValue === feeLevels.low}
           p="2"
           onChange={() => {
-            select('low');
+            select(feeLevels.low);
           }}
         >
           <Label fontSize="14px">
@@ -68,10 +45,10 @@ const FeePicker = ({ feeChoices, feeSelect, feeDismiss }) => {
 
         <RadioButton
           name="feeRadio"
-          selected={feeSelected === feeLevels.mid}
+          selected={feeValue === feeLevels.mid}
           p="2"
           onChange={() => {
-            select('mid');
+            select(feeLevels.low);
           }}
         >
           <Label fontSize="14px">
@@ -81,10 +58,10 @@ const FeePicker = ({ feeChoices, feeSelect, feeDismiss }) => {
 
         <RadioButton
           name="feeRadio"
-          selected={feeSelected === feeLevels.high}
+          selected={feeValue === feeLevels.high}
           p="2"
           onChange={() => {
-            select('high');
+            select(feeLevels.high);
           }}
         >
           <Label fontSize="14px">

pkg/btc-wallet/src/js/components/lib/send.js

@@ -27,6 +27,12 @@ const focusFields = {
   note: 'note',
 };
 
+export const feeLevels = {
+  low: 'low',
+  mid: 'mid',
+  high: 'high',
+};
+
 const Send = ({ stopSending, value, conversion }) => {
   const { error, setError, network, psbt, denomination, shipWallets } =
     useSettings();
@@ -44,7 +50,7 @@ const Send = ({ stopSending, value, conversion }) => {
     mid: [10, 1],
     high: [10, 1],
   });
-  const [feeValue, setFeeValue] = useState('mid');
+  const [feeValue, setFeeValue] = useState(feeLevels.mid);
   const [showModal, setShowModal] = useState(false);
   const [note, setNote] = useState('');
   const [choosingSignMethod, setChoosingSignMethod] = useState(false);
@@ -54,10 +60,6 @@ const Send = ({ stopSending, value, conversion }) => {
     setShowModal(false);
   };
 
-  const feeSelect = (which) => {
-    setFeeValue(which);
-  };
-
   const handleSetSignMethod = (signMethod) => {
     setSignMethod(signMethod);
     setChoosingSignMethod(false);
@@ -123,6 +125,7 @@ const Send = ({ stopSending, value, conversion }) => {
   };
 
   useEffect(() => {
+    console.log({ network });
     if (network === 'bitcoin') {
       let url = 'https://bitcoiner.live/api/fees/estimates/latest';
       fetch(url)
@@ -131,6 +134,7 @@ const Send = ({ stopSending, value, conversion }) => {
           // let estimates = Object.keys(n.estimates);
           // let mid = Math.floor(estimates.length / 2);
           // let high = estimates.length - 1;
+          console.log('hello');
           setFeeChoices({
             high: [30, n.estimates[30]['sat_per_vbyte']],
             mid: [180, n.estimates[180]['sat_per_vbyte']],
@@ -354,7 +358,8 @@ const Send = ({ stopSending, value, conversion }) => {
               {!showModal ? null : (
                 <FeePicker
                   feeChoices={feeChoices}
-                  feeSelect={feeSelect}
+                  feeValue={feeValue}
+                  setFeeValue={setFeeValue}
                   feeDismiss={feeDismiss}
                 />
               )}