Merge pull request #232 from apotdevin/mempool-min

chore: add mempool minimum
apotdevin · Mar 23, 2021 · 44a2f45 · 44a2f45
2 parents 46b103f + 0beb2f4
commit 44a2f45
Show file tree

Hide file tree

Showing 15 changed files with 74 additions and 8 deletions.
diff --git 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 = () => (
     <FlowBox />
     <LiquidReport />
     <ForwardBox />
+    <MempoolReport />
     <NetworkInfo />
   </>
 );

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -20,13 +20,19 @@ import {
   MultiButton,
   SingleButton,
 } from '../../buttons/multiButton/MultiButton';
+import { chartColors } from 'src/styles/Themes';
 
 interface CloseChannelProps {
   callback: () => void;
   channelId: string;
   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<boolean>(false);
   const [isType, setIsType] = useState<string>('fee');
@@ -161,6 +167,7 @@ export const CloseChannel = ({
         <>
           <SingleLine>
             <Sub4Title>Fee:</Sub4Title>
+            {!dontShow && <Warning>{`Minimum: ${minimum} sats/vByte`}</Warning>}
           </SingleLine>
           <MultiButton>
             {fetchFees &&

diff --git 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<TableProps> = ({
@@ -99,6 +100,7 @@ export const Table: React.FC<TableProps> = ({
   fontSize,
   filterPlaceholder,
   notSortable,
+  alignCenter,
 }) => {
   const data = useMemo(() => tableData, [tableData]);
   const columns = useMemo(() => tableColumns, [tableColumns]);
@@ -131,7 +133,11 @@ export const Table: React.FC<TableProps> = ({
           filterPlaceholder={filterPlaceholder}
         />
       )}
-      <Styles withBorder={withBorder} fontSize={fontSize}>
+      <Styles
+        withBorder={withBorder}
+        fontSize={fontSize}
+        alignCenter={alignCenter}
+      >
         <table {...getTableProps()} style={{ width: '100%' }}>
           <thead>
             {headerGroups.map((headerGroup, index) => (

diff --git a/src/graphql/queries/__generated__/getBitcoinFees.generated.tsx b/src/graphql/queries/__generated__/getBitcoinFees.generated.tsx
diff --git 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
@@ -499,6 +499,7 @@ export type BitcoinFeeType = {
   fast?: Maybe<Scalars['Int']>;
   halfHour?: Maybe<Scalars['Int']>;
   hour?: Maybe<Scalars['Int']>;
+  minimum?: Maybe<Scalars['Int']>;
 };
 
 export type PeerType = {

diff --git a/src/hooks/UseBitcoinFees.tsx b/src/hooks/UseBitcoinFees.tsx
@@ -6,13 +6,15 @@ type State = {
   fast: number;
   halfHour: number;
   hour: number;
+  minimum: number;
 };
 
 const initialState: State = {
   dontShow: true,
   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
@@ -34,7 +34,7 @@ const QRCodeReader = dynamic(() => import('src/components/qrReader'), {
 export const SendOnChainCard = ({ setOpen }: { setOpen: () => void }) => {
   const [scannerOpen, setScannerOpen] = useState<boolean>(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 }) => {
           </MultiButton>
         )}
       </InputWithDeco>
+      {!dontShow && renderLine('Minimum', `${minimum} sat/vByte`)}
       <Separation />
       <ColorButton
         disabled={!canSend}

diff --git a/src/views/home/quickActions/openChannel/OpenChannel.tsx b/src/views/home/quickActions/openChannel/OpenChannel.tsx
@@ -15,6 +15,7 @@ import {
   SingleButton,
   MultiButton,
 } from '../../../../components/buttons/multiButton/MultiButton';
+import { renderLine } from 'src/components/generic/helpers';
 
 interface OpenChannelProps {
   initialPublicKey?: string | undefined | null;
@@ -26,7 +27,7 @@ export const OpenChannelCard = ({
   initialPublicKey = '',
 }: OpenChannelProps) => {
   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 = ({
           </MultiButton>
         )}
       </InputWithDeco>
+      {!dontShow && renderLine('Minimum', `${minimum} sat/vByte`)}
       <Separation />
       <ColorButton
         loading={loading}

diff --git a/src/views/home/reports/mempool/index.tsx b/src/views/home/reports/mempool/index.tsx
@@ -0,0 +1,36 @@
+import { Card, CardWithTitle, SubTitle } from 'src/components/generic/Styled';
+import { Table } from 'src/components/table';
+import { useBitcoinFees } from 'src/hooks/UseBitcoinFees';
+
+export const MempoolReport = () => {
+  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 (
+    <CardWithTitle>
+      <SubTitle>Mempool Fees</SubTitle>
+      <Card>
+        <Table alignCenter={true} tableColumns={columns} tableData={data} />
+      </Card>
+    </CardWithTitle>
+  );
+};
diff --git 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<number>(0);
   const [type, setType] = useState('fee');
@@ -160,6 +161,7 @@ export const SwapClaim = () => {
           </MultiButton>
         )}
       </InputWithDeco>
+      {!dontShow && renderLine('Minimum', `${minimum} sat/vByte`)}
       <WarningText>
         {
           'If you set a low fee the swap will take more time if the mempool is congested.'
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ export const GET_BITCOIN_FEES = gql` @@
           fast
           halfHour
           hour
+          minimum
         }
       }
     `;