From ca9a2cfceef83aad855fd1d8b0304a080b9a72ae Mon Sep 17 00:00:00 2001
From: AP <potdevin.anthony@gmail.com>
Date: Mon, 25 May 2020 22:32:11 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20correct=20fee=20unit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/fees.tsx             | 39 ++++++++++++------------------
 src/utils/helpers.tsx      |  2 +-
 src/views/fees/FeeCard.tsx | 49 +++++++++++++++-----------------------
 3 files changed, 35 insertions(+), 55 deletions(-)

diff --git a/pages/fees.tsx b/pages/fees.tsx
index 52cee43d..faacfafe 100644
--- a/pages/fees.tsx
+++ b/pages/fees.tsx
@@ -4,6 +4,7 @@ import { ChevronRight, X } from 'react-feather';
 import { useAccountState } from 'src/context/AccountContext';
 import { useChannelFeesQuery } from 'src/graphql/queries/__generated__/getChannelFees.generated';
 import { useUpdateFeesMutation } from 'src/graphql/mutations/__generated__/updateFees.generated';
+import { InputWithDeco } from 'src/components/input/InputWithDeco';
 import {
   Card,
   CardWithTitle,
@@ -11,10 +12,7 @@ import {
   SingleLine,
   Sub4Title,
   Separation,
-  DarkSubTitle,
   RightAlign,
-  ResponsiveLine,
-  NoWrapTitle,
 } from '../src/components/generic/Styled';
 import { getErrorContent } from '../src/utils/error';
 import { LoadingCard } from '../src/components/loading/LoadingCard';
@@ -22,7 +20,6 @@ import { FeeCard } from '../src/views/fees/FeeCard';
 import { SecureButton } from '../src/components/buttons/secureButton/SecureButton';
 import { AdminSwitch } from '../src/components/adminSwitch/AdminSwitch';
 import { ColorButton } from '../src/components/buttons/colorButton/ColorButton';
-import { Input } from '../src/components/input/Input';
 
 const FeesView = () => {
   const [indexOpen, setIndexOpen] = useState(0);
@@ -68,26 +65,20 @@ const FeesView = () => {
             {isEdit && (
               <>
                 <Separation />
-                <ResponsiveLine>
-                  <NoWrapTitle>
-                    <DarkSubTitle>{'Base Fee:'}</DarkSubTitle>
-                  </NoWrapTitle>
-                  <Input
-                    placeholder={'Sats'}
-                    type={'number'}
-                    onChange={e => setBaseFee(Number(e.target.value))}
-                  />
-                </ResponsiveLine>
-                <ResponsiveLine>
-                  <NoWrapTitle>
-                    <DarkSubTitle>{'Fee Rate:'}</DarkSubTitle>
-                  </NoWrapTitle>
-                  <Input
-                    placeholder={'Sats/Million'}
-                    type={'number'}
-                    onChange={e => setFeeRate(Number(e.target.value))}
-                  />
-                </ResponsiveLine>
+                <InputWithDeco
+                  title={'BaseFee'}
+                  placeholder={'Sats'}
+                  amount={baseFee}
+                  inputType={'number'}
+                  inputCallback={value => setBaseFee(Number(value))}
+                />
+                <InputWithDeco
+                  title={'Fee Rate'}
+                  placeholder={'MilliSats/Million'}
+                  amount={feeRate / 1000}
+                  inputType={'number'}
+                  inputCallback={value => setFeeRate(Number(value))}
+                />
                 <RightAlign>
                   <SecureButton
                     callback={updateFees}
diff --git a/src/utils/helpers.tsx b/src/utils/helpers.tsx
index cb2f9e10..27cc24ba 100644
--- a/src/utils/helpers.tsx
+++ b/src/utils/helpers.tsx
@@ -42,7 +42,7 @@ export const getValue = ({
   if (currency === 'sat') {
     const breakAmount = breakNumber
       ? getValueString(value)
-      : numeral(value).format('0,0');
+      : numeral(value).format('0,0.[000]');
     return `${breakAmount} sats`;
   }
 
diff --git a/src/views/fees/FeeCard.tsx b/src/views/fees/FeeCard.tsx
index b314282c..4f39384a 100644
--- a/src/views/fees/FeeCard.tsx
+++ b/src/views/fees/FeeCard.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { toast } from 'react-toastify';
 import { ChevronRight } from 'react-feather';
 import { useUpdateFeesMutation } from 'src/graphql/mutations/__generated__/updateFees.generated';
+import { InputWithDeco } from 'src/components/input/InputWithDeco';
 import {
   SubCard,
   Separation,
@@ -18,9 +19,6 @@ import {
 } from '../../components/generic/CardGeneric';
 import { getErrorContent } from '../../utils/error';
 import { SecureButton } from '../../components/buttons/secureButton/SecureButton';
-import { useConfigState } from '../../context/ConfigContext';
-import { textColorMap } from '../../styles/Themes';
-import { Input } from '../../components/input/Input';
 import { AdminSwitch } from '../../components/adminSwitch/AdminSwitch';
 
 interface FeeCardProps {
@@ -39,8 +37,6 @@ export const FeeCard = ({
   const [newBaseFee, setBaseFee] = useState(0);
   const [newFeeRate, setFeeRate] = useState(0);
 
-  const { theme } = useConfigState();
-
   const {
     alias,
     color,
@@ -51,6 +47,8 @@ export const FeeCard = ({
     public_key,
   } = channelInfo;
 
+  const feeRateSats = feeRate / 1000;
+
   const [updateFees] = useUpdateFeesMutation({
     onError: error => toast.error(getErrorContent(error)),
     onCompleted: data => {
@@ -78,28 +76,20 @@ export const FeeCard = ({
         {renderLine('Transaction Vout:', transactionVout)}
         <Separation />
         <AdminSwitch>
-          <ResponsiveLine>
-            <NoWrapTitle>
-              <DarkSubTitle>{'Base Fee:'}</DarkSubTitle>
-            </NoWrapTitle>
-            <Input
-              placeholder={'Sats'}
-              color={textColorMap[theme]}
-              type={textColorMap[theme]}
-              onChange={e => setBaseFee(Number(e.target.value))}
-            />
-          </ResponsiveLine>
-          <ResponsiveLine>
-            <NoWrapTitle>
-              <DarkSubTitle>{'Fee Rate:'}</DarkSubTitle>
-            </NoWrapTitle>
-            <Input
-              placeholder={'Sats/Million'}
-              color={textColorMap[theme]}
-              type={'number'}
-              onChange={e => setFeeRate(Number(e.target.value))}
-            />
-          </ResponsiveLine>
+          <InputWithDeco
+            title={'BaseFee'}
+            placeholder={'Sats'}
+            amount={newBaseFee}
+            inputType={'number'}
+            inputCallback={value => setBaseFee(Number(value))}
+          />
+          <InputWithDeco
+            title={'Fee Rate'}
+            placeholder={'MilliSats/Million'}
+            amount={newFeeRate / 1000}
+            inputType={'number'}
+            inputCallback={value => setFeeRate(Number(value))}
+          />
           <SecureButton
             callback={updateFees}
             variables={{
@@ -112,7 +102,6 @@ export const FeeCard = ({
                 feeRate: newFeeRate,
               }),
             }}
-            color={textColorMap[theme]}
             disabled={newBaseFee === 0 && newFeeRate === 0}
             fullWidth={true}
             withMargin={'16px 0 0'}
@@ -145,9 +134,9 @@ export const FeeCard = ({
                 <DarkSubTitle>{'Fee Rate:'}</DarkSubTitle>
               </NoWrapTitle>
               <SingleLine>
-                {feeRate}
+                {feeRateSats}
                 <DarkSubTitle>
-                  {feeRate === 1 ? 'sat/million' : 'sats/million'}
+                  {feeRateSats === 1 ? 'sat/million' : 'sats/million'}
                 </DarkSubTitle>
               </SingleLine>
             </SingleLine>