From 9c657a416af730c502ca62f3f97600b1f4d1c555 Mon Sep 17 00:00:00 2001 From: AP Date: Tue, 26 May 2020 20:25:20 +0200 Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=94=A7=20more=20bar=20types=20in?= =?UTF-8?q?=20channel=20view?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/fees.tsx | 26 ++-- src/components/generic/CardGeneric.tsx | 4 + src/components/input/InputWithDeco.tsx | 8 +- src/components/price/Price.tsx | 11 +- src/context/ConfigContext.tsx | 4 +- src/utils/helpers.tsx | 7 +- src/views/channels/channels/ChannelCard.tsx | 113 ++++++++++++++---- src/views/channels/channels/ChannelManage.tsx | 22 +++- src/views/channels/channels/Channels.tsx | 23 ++-- src/views/fees/FeeCard.tsx | 10 +- 10 files changed, 165 insertions(+), 63 deletions(-) diff --git a/pages/fees.tsx b/pages/fees.tsx index 053dd958..bab0f459 100644 --- a/pages/fees.tsx +++ b/pages/fees.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react'; import { toast } from 'react-toastify'; -import { ChevronRight, X } from 'react-feather'; +import { ChevronRight, ChevronUp, ChevronDown } 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 { GridWrapper } from 'src/components/gridWrapper/GridWrapper'; import { withApollo } from 'config/client'; +import styled from 'styled-components'; import { Card, CardWithTitle, @@ -21,7 +22,10 @@ import { LoadingCard } from '../src/components/loading/LoadingCard'; 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'; + +const WithPointer = styled.div` + cursor: pointer; +`; const FeesView = () => { const [indexOpen, setIndexOpen] = useState(0); @@ -58,26 +62,28 @@ const FeesView = () => { Update Channel Fees - - Channel Fees - setIsEdit(prev => !prev)}> - {isEdit ? : 'Update'} - - + + setIsEdit(prev => !prev)}> + Channel Fees + {isEdit ? : } + + {isEdit && ( <> setBaseFee(Number(value))} /> setFeeRate(Number(value))} /> diff --git a/src/components/generic/CardGeneric.tsx b/src/components/generic/CardGeneric.tsx index 362a1484..f0e0fe0d 100644 --- a/src/components/generic/CardGeneric.tsx +++ b/src/components/generic/CardGeneric.tsx @@ -29,6 +29,10 @@ export const ProgressBar = styled.div` return chartColors.orange; case 4: return progressBackground; + case 5: + return chartColors.orange2; + case 6: + return chartColors.darkyellow; default: return chartColors.purple; } diff --git a/src/components/input/InputWithDeco.tsx b/src/components/input/InputWithDeco.tsx index 27957bfc..bd87e2c8 100644 --- a/src/components/input/InputWithDeco.tsx +++ b/src/components/input/InputWithDeco.tsx @@ -39,6 +39,7 @@ type InputWithDecoProps = { title: string; noInput?: boolean; amount?: number; + override?: string; customAmount?: string; color?: string; placeholder?: string; @@ -49,6 +50,7 @@ type InputWithDecoProps = { export const InputWithDeco: React.FC = ({ title, amount, + override, customAmount, children, placeholder, @@ -65,7 +67,11 @@ export const InputWithDeco: React.FC = ({ {title} {showAmount && ( - {customAmount ? customAmount : } + {customAmount ? ( + customAmount + ) : ( + + )} )} diff --git a/src/components/price/Price.tsx b/src/components/price/Price.tsx index 662918ca..ea616e7e 100644 --- a/src/components/price/Price.tsx +++ b/src/components/price/Price.tsx @@ -12,10 +12,12 @@ type PriceProps = { export const Price = ({ amount, breakNumber = false, + override, }: { amount: number | string; breakNumber?: boolean; -}) => { + override?: string; +}): JSX.Element => { const { currency, displayValues } = useConfigState(); const { prices, dontShow } = usePriceState(); @@ -42,12 +44,13 @@ export const Price = ({ }; } - return <>{getValue({ amount, ...priceProps, breakNumber })}; + return <>{getValue({ amount, ...priceProps, breakNumber, override })}; }; interface GetPriceProps { amount: number | string; breakNumber?: boolean; + override?: string; } export const getPrice = ( @@ -57,7 +60,7 @@ export const getPrice = ( dontShow: boolean; prices?: { [key: string]: { last: number; symbol: string } }; } -) => ({ amount, breakNumber = false }: GetPriceProps): string => { +) => ({ amount, breakNumber = false, override }: GetPriceProps): string => { const { prices, dontShow } = priceContext; if (!displayValues) { @@ -83,5 +86,5 @@ export const getPrice = ( }; } - return getValue({ amount, ...priceProps, breakNumber }); + return getValue({ amount, ...priceProps, breakNumber, override }); }; diff --git a/src/context/ConfigContext.tsx b/src/context/ConfigContext.tsx index a652c397..42d52849 100644 --- a/src/context/ConfigContext.tsx +++ b/src/context/ConfigContext.tsx @@ -6,8 +6,8 @@ const themeTypes = ['dark', 'light']; const currencyTypes = ['sat', 'btc', 'EUR', 'USD']; export type channelBarStyleTypes = 'normal' | 'compact' | 'ultracompact'; -export type channelBarTypeTypes = 'balance' | 'details' | 'partner'; -export type channelSortTypes = 'none' | 'local' | 'balance'; +export type channelBarTypeTypes = 'balance' | 'fees' | 'size' | 'proportional'; +export type channelSortTypes = 'none' | 'local' | 'balance' | 'feeRate'; export type sortDirectionTypes = 'increase' | 'decrease'; type State = { diff --git a/src/utils/helpers.tsx b/src/utils/helpers.tsx index 27cc24ba..45435036 100644 --- a/src/utils/helpers.tsx +++ b/src/utils/helpers.tsx @@ -16,6 +16,7 @@ interface GetNumberProps { symbol: string; currency: string; breakNumber?: boolean; + override?: string; } export const getValue = ({ @@ -24,7 +25,9 @@ export const getValue = ({ symbol, currency, breakNumber, + override, }: GetNumberProps): string => { + const correctCurrency = override || currency; let value = 0; if (typeof amount === 'string') { value = Number(amount); @@ -32,14 +35,14 @@ export const getValue = ({ value = amount; } - if (currency === 'btc') { + if (correctCurrency === 'btc') { if (!value) return '₿0.0'; const amountInBtc = value / 100000000; const rounded = Math.round(amountInBtc * 10000) / 10000; return `₿${rounded}`; } - if (currency === 'sat') { + if (correctCurrency === 'sat') { const breakAmount = breakNumber ? getValueString(value) : numeral(value).format('0,0.[000]'); diff --git a/src/views/channels/channels/ChannelCard.tsx b/src/views/channels/channels/ChannelCard.tsx index 8bf37e45..2e30480c 100644 --- a/src/views/channels/channels/ChannelCard.tsx +++ b/src/views/channels/channels/ChannelCard.tsx @@ -66,7 +66,7 @@ interface ChannelCardProps { biggestRateFee: number; } -export const ChannelCard = ({ +export const ChannelCard: React.FC = ({ channelInfo, index, setIndexOpen, @@ -76,7 +76,7 @@ export const ChannelCard = ({ mostChannels, biggestBaseFee, biggestRateFee, -}: ChannelCardProps) => { +}) => { const { channelBarType, channelBarStyle } = useConfigState(); const [modalOpen, setModalOpen] = useState(false); @@ -133,6 +133,9 @@ export const ChannelCard = ({ const remoteReserve = format({ amount: remote_reserve }); const nodeCapacity = format({ amount: partnerNodeCapacity }); + const baseFee = format({ amount: base_fee / 1000, override: 'sat' }); + const feeRate = format({ amount: fee_rate, override: 'sat' }); + const handleClick = () => { if (indexOpen === index) { setIndexOpen(0); @@ -150,8 +153,8 @@ export const ChannelCard = ({ 'Last Update:', `${getDateDif(updated_at)} ago (${getFormatDate(updated_at)})` )} - {renderLine('Base Fee:', `${base_fee} msats`)} - {renderLine('Fee Rate:', `${fee_rate} sats/Msats`)} + {renderLine('Base Fee:', baseFee)} + {renderLine('Fee Rate:', `${feeRate}/million`)} {renderLine('CTLV Delta:', cltv_delta)} ) : ( @@ -205,28 +208,79 @@ export const ChannelCard = ({ const renderBars = () => { switch (channelBarType) { - case 'partner': + case 'fees': return ( - - - - + + + + + + + + ); - case 'details': + case 'size': return ( - - - - + + + + + + + + + + ); + case 'proportional': + return ( + + + + + + + + + ); default: @@ -253,16 +307,27 @@ export const ChannelCard = ({ const renderBarsInfo = () => { switch (channelBarType) { - case 'partner': + case 'fees': + return ( + <> +
{`Partner Fee Rate: ${feeRate}/million`}
+
{`Partner Base Fee: ${baseFee}`}
+ + ); + case 'size': return ( <>
{`Partner Capacity: ${nodeCapacity}`}
{`Partner Channels: ${channel_count}`}
-
{`Partner Base Fee: ${base_fee} msats`}
-
{`Partner Fee Rate: ${fee_rate} sats/Msats`}
); - case 'details': + case 'proportional': + return ( + <> +
{`Local Balance: ${formatLocal}`}
+
{`Remote Balance: ${formatRemote}`}
+ + ); default: return ( <> diff --git a/src/views/channels/channels/ChannelManage.tsx b/src/views/channels/channels/ChannelManage.tsx index bfab8dc9..2465428e 100644 --- a/src/views/channels/channels/ChannelManage.tsx +++ b/src/views/channels/channels/ChannelManage.tsx @@ -71,16 +71,22 @@ export const ChannelManage = () => { Balance changeType('details')} + selected={channelBarType === 'proportional'} + onClick={() => changeType('proportional')} > Proportional changeType('partner')} + selected={channelBarType === 'size'} + onClick={() => changeType('size')} > - Partner + Partner Size + + changeType('fees')} + > + Partner Fees @@ -105,6 +111,12 @@ export const ChannelManage = () => { > Balance + changeSort('feeRate')} + > + Fee Rate + {channelSort !== 'none' && ( diff --git a/src/views/channels/channels/Channels.tsx b/src/views/channels/channels/Channels.tsx index 023ee0c6..a7000961 100644 --- a/src/views/channels/channels/Channels.tsx +++ b/src/views/channels/channels/Channels.tsx @@ -10,7 +10,7 @@ import { getErrorContent } from '../../../utils/error'; import { LoadingCard } from '../../../components/loading/LoadingCard'; import { ChannelCard } from './ChannelCard'; -export const Channels = () => { +export const Channels: React.FC = () => { const { sortDirection, channelSort } = useConfigState(); const [indexOpen, setIndexOpen] = useState(0); @@ -35,19 +35,13 @@ export const Channels = () => { for (let i = 0; i < data.getChannels.length; i++) { const channel = data.getChannels[i]; - const { - local_balance, - remote_balance, - sent, - received, - partner_node_info = {}, - } = channel; + const { local_balance, remote_balance, partner_node_info = {} } = channel; const { capacity, channel_count, base_fee, fee_rate } = partner_node_info; const partner = Number(capacity) || 0; const channels = Number(channel_count) || 0; - const max = Math.max(local_balance, remote_balance, sent, received); + const max = Math.max(local_balance, remote_balance); if (max > biggest) { biggest = max; @@ -78,6 +72,13 @@ export const Channels = () => { ); return sortDirection === 'increase' ? newArray : newArray.reverse(); } + case 'feeRate': { + const newArray = sortBy( + data.getChannels, + channel => channel.partner_node_info.fee_rate + ); + return sortDirection === 'increase' ? newArray : newArray.reverse(); + } default: return data.getChannels; } @@ -95,8 +96,8 @@ export const Channels = () => { biggest={biggest} biggestPartner={biggestPartner} mostChannels={mostChannels} - biggestBaseFee={biggestBaseFee} - biggestRateFee={biggestRateFee} + biggestBaseFee={Math.max(biggestBaseFee, 100000)} + biggestRateFee={Math.max(biggestRateFee, 2000)} /> ))} diff --git a/src/views/fees/FeeCard.tsx b/src/views/fees/FeeCard.tsx index 4f39384a..7528210a 100644 --- a/src/views/fees/FeeCard.tsx +++ b/src/views/fees/FeeCard.tsx @@ -28,12 +28,12 @@ interface FeeCardProps { indexOpen: number; } -export const FeeCard = ({ +export const FeeCard: React.FC = ({ channelInfo, index, setIndexOpen, indexOpen, -}: FeeCardProps) => { +}) => { const [newBaseFee, setBaseFee] = useState(0); const [newFeeRate, setFeeRate] = useState(0); @@ -78,15 +78,17 @@ export const FeeCard = ({ setBaseFee(Number(value))} /> setFeeRate(Number(value))} />