From 0beb2f4667c2e6335d7bf95ce4146cf837d4f80b Mon Sep 17 00:00:00 2001 From: apotdevin Date: Tue, 23 Mar 2021 23:26:01 +0100 Subject: [PATCH] chore: add mempool minimum --- pages/index.tsx | 2 ++ .../__snapshots__/bitcoin.test.ts.snap | 1 + server/schema/bitcoin/bitcoin.test.ts | 1 + server/schema/bitcoin/resolvers.ts | 3 +- server/schema/bitcoin/types.ts | 1 + .../modal/closeChannel/CloseChannel.tsx | 9 ++++- src/components/table/index.tsx | 8 ++++- .../getBitcoinFees.generated.tsx | 3 +- src/graphql/queries/getBitcoinFees.ts | 1 + src/graphql/types.ts | 1 + src/hooks/UseBitcoinFees.tsx | 5 ++- .../home/account/sendOnChain/SendOnChain.tsx | 3 +- .../quickActions/openChannel/OpenChannel.tsx | 4 ++- src/views/home/reports/mempool/index.tsx | 36 +++++++++++++++++++ src/views/swap/SwapClaim.tsx | 4 ++- 15 files changed, 74 insertions(+), 8 deletions(-) create mode 100644 src/views/home/reports/mempool/index.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 2f07c6f8..06d1fc63 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,6 +10,7 @@ import { FlowBox } from '../src/views/home/reports/flow'; import { ForwardBox } from '../src/views/home/reports/forwardReport'; import { LiquidReport } from '../src/views/home/reports/liquidReport/LiquidReport'; import { ConnectCard } from '../src/views/home/connect/Connect'; +import { MempoolReport } from 'src/views/home/reports/mempool'; const HomeView = () => ( <> @@ -20,6 +21,7 @@ const HomeView = () => ( + ); diff --git a/server/schema/bitcoin/__snapshots__/bitcoin.test.ts.snap b/server/schema/bitcoin/__snapshots__/bitcoin.test.ts.snap index fb773e6a..1ca40e03 100644 --- a/server/schema/bitcoin/__snapshots__/bitcoin.test.ts.snap +++ b/server/schema/bitcoin/__snapshots__/bitcoin.test.ts.snap @@ -24,6 +24,7 @@ Object { "fast": 3, "halfHour": 2, "hour": 1, + "minimum": 5, }, }, "errors": undefined, diff --git a/server/schema/bitcoin/bitcoin.test.ts b/server/schema/bitcoin/bitcoin.test.ts index d65a2a34..e2d31695 100644 --- a/server/schema/bitcoin/bitcoin.test.ts +++ b/server/schema/bitcoin/bitcoin.test.ts @@ -46,6 +46,7 @@ describe('Bitcoin Resolvers', () => { fastestFee: 3, halfHourFee: 2, hourFee: 1, + minimumFee: 5, }) ); const { query } = testServer(); diff --git a/server/schema/bitcoin/resolvers.ts b/server/schema/bitcoin/resolvers.ts index 68c6e95b..8cc2a702 100644 --- a/server/schema/bitcoin/resolvers.ts +++ b/server/schema/bitcoin/resolvers.ts @@ -35,11 +35,12 @@ export const bitcoinResolvers = { const json = await response.json(); if (json) { - const { fastestFee, halfHourFee, hourFee } = json; + const { fastestFee, halfHourFee, hourFee, minimumFee } = json; return { fast: fastestFee, halfHour: halfHourFee, hour: hourFee, + minimum: minimumFee, }; } throw new Error('Problem getting Bitcoin fees.'); diff --git a/server/schema/bitcoin/types.ts b/server/schema/bitcoin/types.ts index f4b0e558..eda89a8e 100644 --- a/server/schema/bitcoin/types.ts +++ b/server/schema/bitcoin/types.ts @@ -5,5 +5,6 @@ export const bitcoinTypes = gql` fast: Int halfHour: Int hour: Int + minimum: Int } `; diff --git a/src/components/modal/closeChannel/CloseChannel.tsx b/src/components/modal/closeChannel/CloseChannel.tsx index ee5c8285..8b9d31f4 100644 --- a/src/components/modal/closeChannel/CloseChannel.tsx +++ b/src/components/modal/closeChannel/CloseChannel.tsx @@ -20,6 +20,7 @@ import { MultiButton, SingleButton, } from '../../buttons/multiButton/MultiButton'; +import { chartColors } from 'src/styles/Themes'; interface CloseChannelProps { callback: () => void; @@ -27,6 +28,11 @@ interface CloseChannelProps { channelName: string; } +const Warning = styled.div` + font-size: 14px; + color: ${chartColors.orange}; +`; + const WarningCard = styled.div` display: flex; flex-direction: column; @@ -44,7 +50,7 @@ export const CloseChannel = ({ channelName, }: CloseChannelProps) => { const { fetchFees } = useConfigState(); - const { fast, halfHour, hour, dontShow } = useBitcoinFees(); + const { fast, halfHour, hour, minimum, dontShow } = useBitcoinFees(); const [isForce, setIsForce] = useState(false); const [isType, setIsType] = useState('fee'); @@ -161,6 +167,7 @@ export const CloseChannel = ({ <> Fee: + {!dontShow && {`Minimum: ${minimum} sats/vByte`}} {fetchFees && diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx index 1363dc40..046fbe20 100644 --- a/src/components/table/index.tsx +++ b/src/components/table/index.tsx @@ -90,6 +90,7 @@ type TableProps = { fontSize?: string; filterPlaceholder?: string; notSortable?: boolean; + alignCenter?: boolean; }; export const Table: React.FC = ({ @@ -99,6 +100,7 @@ export const Table: React.FC = ({ fontSize, filterPlaceholder, notSortable, + alignCenter, }) => { const data = useMemo(() => tableData, [tableData]); const columns = useMemo(() => tableColumns, [tableColumns]); @@ -131,7 +133,11 @@ export const Table: React.FC = ({ filterPlaceholder={filterPlaceholder} /> )} - + {headerGroups.map((headerGroup, index) => ( diff --git a/src/graphql/queries/__generated__/getBitcoinFees.generated.tsx b/src/graphql/queries/__generated__/getBitcoinFees.generated.tsx index f809f285..177eac5b 100644 --- a/src/graphql/queries/__generated__/getBitcoinFees.generated.tsx +++ b/src/graphql/queries/__generated__/getBitcoinFees.generated.tsx @@ -11,7 +11,7 @@ export type GetBitcoinFeesQuery = ( { __typename?: 'Query' } & { getBitcoinFees?: Types.Maybe<( { __typename?: 'bitcoinFeeType' } - & Pick + & Pick )> } ); @@ -22,6 +22,7 @@ export const GetBitcoinFeesDocument = gql` fast halfHour hour + minimum } } `; diff --git a/src/graphql/queries/getBitcoinFees.ts b/src/graphql/queries/getBitcoinFees.ts index 858f3b9c..03cd46a3 100644 --- a/src/graphql/queries/getBitcoinFees.ts +++ b/src/graphql/queries/getBitcoinFees.ts @@ -6,6 +6,7 @@ export const GET_BITCOIN_FEES = gql` fast halfHour hour + minimum } } `; diff --git a/src/graphql/types.ts b/src/graphql/types.ts index fdbae462..2f226158 100644 --- a/src/graphql/types.ts +++ b/src/graphql/types.ts @@ -499,6 +499,7 @@ export type BitcoinFeeType = { fast?: Maybe; halfHour?: Maybe; hour?: Maybe; + minimum?: Maybe; }; export type PeerType = { diff --git a/src/hooks/UseBitcoinFees.tsx b/src/hooks/UseBitcoinFees.tsx index 111dd0c0..70a5709c 100644 --- a/src/hooks/UseBitcoinFees.tsx +++ b/src/hooks/UseBitcoinFees.tsx @@ -6,6 +6,7 @@ type State = { fast: number; halfHour: number; hour: number; + minimum: number; }; const initialState: State = { @@ -13,6 +14,7 @@ const initialState: State = { fast: 0, halfHour: 0, hour: 0, + minimum: 0, }; export const useBitcoinFees = (): State => { @@ -30,12 +32,13 @@ export const useBitcoinFees = (): State => { useEffect(() => { if (!loading && data && data.getBitcoinFees) { - const { fast, halfHour, hour } = data.getBitcoinFees; + const { fast, halfHour, hour, minimum } = data.getBitcoinFees; setBitcoinFees({ fast: fast || 0, halfHour: halfHour || 0, hour: hour || 0, dontShow: false, + minimum: minimum || 0, }); } }, [data, loading]); diff --git a/src/views/home/account/sendOnChain/SendOnChain.tsx b/src/views/home/account/sendOnChain/SendOnChain.tsx index df96dc1a..678004a5 100644 --- a/src/views/home/account/sendOnChain/SendOnChain.tsx +++ b/src/views/home/account/sendOnChain/SendOnChain.tsx @@ -34,7 +34,7 @@ const QRCodeReader = dynamic(() => import('src/components/qrReader'), { export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => { const [scannerOpen, setScannerOpen] = useState(false); - const { fast, halfHour, hour, dontShow } = useBitcoinFees(); + const { fast, halfHour, hour, minimum, dontShow } = useBitcoinFees(); const { currency, displayValues, fetchFees } = useConfigState(); const priceContext = usePriceState(); const format = getPrice(currency, displayValues, priceContext); @@ -198,6 +198,7 @@ export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => { )} + {!dontShow && renderLine('Minimum', `${minimum} sat/vByte`)} { const { fetchFees } = useConfigState(); - const { fast, halfHour, hour, dontShow } = useBitcoinFees(); + const { fast, halfHour, hour, minimum, dontShow } = useBitcoinFees(); const [size, setSize] = useState(0); const [pushType, setPushType] = useState('none'); @@ -202,6 +203,7 @@ export const OpenChannelCard = ({ )} + {!dontShow && renderLine('Minimum', `${minimum} sat/vByte`)} { + const { fast, halfHour, hour, minimum, dontShow } = useBitcoinFees(); + + if (dontShow) { + return null; + } + + const columns = [ + { Header: 'Fastest', accessor: 'fast' }, + { Header: 'Half Hour', accessor: 'halfHour' }, + { Header: 'Hour', accessor: 'hour' }, + { Header: 'Minimum', accessor: 'minimum' }, + ]; + + const data = [ + { + fast: `${fast} sat/vB`, + halfHour: `${halfHour} sat/vB`, + hour: `${hour} sat/vB`, + minimum: `${minimum} sat/vB`, + }, + ]; + + return ( + + Mempool Fees + +
+ + + ); +}; diff --git a/src/views/swap/SwapClaim.tsx b/src/views/swap/SwapClaim.tsx index 5962f539..6a1821aa 100644 --- a/src/views/swap/SwapClaim.tsx +++ b/src/views/swap/SwapClaim.tsx @@ -5,6 +5,7 @@ import { MultiButton, SingleButton, } from 'src/components/buttons/multiButton/MultiButton'; +import { renderLine } from 'src/components/generic/helpers'; import { DarkSubTitle, Separation, @@ -35,7 +36,7 @@ const S = { export const SwapClaim = () => { const { fetchFees } = useConfigState(); - const { fast, halfHour, hour, dontShow } = useBitcoinFees(); + const { fast, halfHour, hour, minimum, dontShow } = useBitcoinFees(); const [fee, setFee] = useState(0); const [type, setType] = useState('fee'); @@ -160,6 +161,7 @@ export const SwapClaim = () => { )} + {!dontShow && renderLine('Minimum', `${minimum} sat/vByte`)} { 'If you set a low fee the swap will take more time if the mempool is congested.'