fix: ๐Ÿ› correct fee unit

This commit is contained in:
AP 2020-05-25 22:32:11 +02:00
parent 60ad4b3bef
commit ca9a2cfcee
3 changed files with 35 additions and 55 deletions

View file

@ -4,6 +4,7 @@ import { ChevronRight, X } from 'react-feather';
import { useAccountState } from 'src/context/AccountContext'; import { useAccountState } from 'src/context/AccountContext';
import { useChannelFeesQuery } from 'src/graphql/queries/__generated__/getChannelFees.generated'; import { useChannelFeesQuery } from 'src/graphql/queries/__generated__/getChannelFees.generated';
import { useUpdateFeesMutation } from 'src/graphql/mutations/__generated__/updateFees.generated'; import { useUpdateFeesMutation } from 'src/graphql/mutations/__generated__/updateFees.generated';
import { InputWithDeco } from 'src/components/input/InputWithDeco';
import { import {
Card, Card,
CardWithTitle, CardWithTitle,
@ -11,10 +12,7 @@ import {
SingleLine, SingleLine,
Sub4Title, Sub4Title,
Separation, Separation,
DarkSubTitle,
RightAlign, RightAlign,
ResponsiveLine,
NoWrapTitle,
} from '../src/components/generic/Styled'; } from '../src/components/generic/Styled';
import { getErrorContent } from '../src/utils/error'; import { getErrorContent } from '../src/utils/error';
import { LoadingCard } from '../src/components/loading/LoadingCard'; 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 { SecureButton } from '../src/components/buttons/secureButton/SecureButton';
import { AdminSwitch } from '../src/components/adminSwitch/AdminSwitch'; import { AdminSwitch } from '../src/components/adminSwitch/AdminSwitch';
import { ColorButton } from '../src/components/buttons/colorButton/ColorButton'; import { ColorButton } from '../src/components/buttons/colorButton/ColorButton';
import { Input } from '../src/components/input/Input';
const FeesView = () => { const FeesView = () => {
const [indexOpen, setIndexOpen] = useState(0); const [indexOpen, setIndexOpen] = useState(0);
@ -68,26 +65,20 @@ const FeesView = () => {
{isEdit && ( {isEdit && (
<> <>
<Separation /> <Separation />
<ResponsiveLine> <InputWithDeco
<NoWrapTitle> title={'BaseFee'}
<DarkSubTitle>{'Base Fee:'}</DarkSubTitle> placeholder={'Sats'}
</NoWrapTitle> amount={baseFee}
<Input inputType={'number'}
placeholder={'Sats'} inputCallback={value => setBaseFee(Number(value))}
type={'number'} />
onChange={e => setBaseFee(Number(e.target.value))} <InputWithDeco
/> title={'Fee Rate'}
</ResponsiveLine> placeholder={'MilliSats/Million'}
<ResponsiveLine> amount={feeRate / 1000}
<NoWrapTitle> inputType={'number'}
<DarkSubTitle>{'Fee Rate:'}</DarkSubTitle> inputCallback={value => setFeeRate(Number(value))}
</NoWrapTitle> />
<Input
placeholder={'Sats/Million'}
type={'number'}
onChange={e => setFeeRate(Number(e.target.value))}
/>
</ResponsiveLine>
<RightAlign> <RightAlign>
<SecureButton <SecureButton
callback={updateFees} callback={updateFees}

View file

@ -42,7 +42,7 @@ export const getValue = ({
if (currency === 'sat') { if (currency === 'sat') {
const breakAmount = breakNumber const breakAmount = breakNumber
? getValueString(value) ? getValueString(value)
: numeral(value).format('0,0'); : numeral(value).format('0,0.[000]');
return `${breakAmount} sats`; return `${breakAmount} sats`;
} }

View file

@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { ChevronRight } from 'react-feather'; import { ChevronRight } from 'react-feather';
import { useUpdateFeesMutation } from 'src/graphql/mutations/__generated__/updateFees.generated'; import { useUpdateFeesMutation } from 'src/graphql/mutations/__generated__/updateFees.generated';
import { InputWithDeco } from 'src/components/input/InputWithDeco';
import { import {
SubCard, SubCard,
Separation, Separation,
@ -18,9 +19,6 @@ import {
} from '../../components/generic/CardGeneric'; } from '../../components/generic/CardGeneric';
import { getErrorContent } from '../../utils/error'; import { getErrorContent } from '../../utils/error';
import { SecureButton } from '../../components/buttons/secureButton/SecureButton'; 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'; import { AdminSwitch } from '../../components/adminSwitch/AdminSwitch';
interface FeeCardProps { interface FeeCardProps {
@ -39,8 +37,6 @@ export const FeeCard = ({
const [newBaseFee, setBaseFee] = useState(0); const [newBaseFee, setBaseFee] = useState(0);
const [newFeeRate, setFeeRate] = useState(0); const [newFeeRate, setFeeRate] = useState(0);
const { theme } = useConfigState();
const { const {
alias, alias,
color, color,
@ -51,6 +47,8 @@ export const FeeCard = ({
public_key, public_key,
} = channelInfo; } = channelInfo;
const feeRateSats = feeRate / 1000;
const [updateFees] = useUpdateFeesMutation({ const [updateFees] = useUpdateFeesMutation({
onError: error => toast.error(getErrorContent(error)), onError: error => toast.error(getErrorContent(error)),
onCompleted: data => { onCompleted: data => {
@ -78,28 +76,20 @@ export const FeeCard = ({
{renderLine('Transaction Vout:', transactionVout)} {renderLine('Transaction Vout:', transactionVout)}
<Separation /> <Separation />
<AdminSwitch> <AdminSwitch>
<ResponsiveLine> <InputWithDeco
<NoWrapTitle> title={'BaseFee'}
<DarkSubTitle>{'Base Fee:'}</DarkSubTitle> placeholder={'Sats'}
</NoWrapTitle> amount={newBaseFee}
<Input inputType={'number'}
placeholder={'Sats'} inputCallback={value => setBaseFee(Number(value))}
color={textColorMap[theme]} />
type={textColorMap[theme]} <InputWithDeco
onChange={e => setBaseFee(Number(e.target.value))} title={'Fee Rate'}
/> placeholder={'MilliSats/Million'}
</ResponsiveLine> amount={newFeeRate / 1000}
<ResponsiveLine> inputType={'number'}
<NoWrapTitle> inputCallback={value => setFeeRate(Number(value))}
<DarkSubTitle>{'Fee Rate:'}</DarkSubTitle> />
</NoWrapTitle>
<Input
placeholder={'Sats/Million'}
color={textColorMap[theme]}
type={'number'}
onChange={e => setFeeRate(Number(e.target.value))}
/>
</ResponsiveLine>
<SecureButton <SecureButton
callback={updateFees} callback={updateFees}
variables={{ variables={{
@ -112,7 +102,6 @@ export const FeeCard = ({
feeRate: newFeeRate, feeRate: newFeeRate,
}), }),
}} }}
color={textColorMap[theme]}
disabled={newBaseFee === 0 && newFeeRate === 0} disabled={newBaseFee === 0 && newFeeRate === 0}
fullWidth={true} fullWidth={true}
withMargin={'16px 0 0'} withMargin={'16px 0 0'}
@ -145,9 +134,9 @@ export const FeeCard = ({
<DarkSubTitle>{'Fee Rate:'}</DarkSubTitle> <DarkSubTitle>{'Fee Rate:'}</DarkSubTitle>
</NoWrapTitle> </NoWrapTitle>
<SingleLine> <SingleLine>
{feeRate} {feeRateSats}
<DarkSubTitle> <DarkSubTitle>
{feeRate === 1 ? 'sat/million' : 'sats/million'} {feeRateSats === 1 ? 'sat/million' : 'sats/million'}
</DarkSubTitle> </DarkSubTitle>
</SingleLine> </SingleLine>
</SingleLine> </SingleLine>