chore: styling

src/components/account/AccountInfo.tsx

@@ -6,6 +6,7 @@ import {
     SingleLine,
     Separation,
     SimpleButton,
+    DarkSubTitle,
 } from '../generic/Styled';
 import { AccountContext } from '../../context/AccountContext';
 import { getAuthString } from '../../utils/auth';
@@ -32,12 +33,6 @@ const Tile = styled.div`
         startTile ? 'flex-start' : 'flex-end'};
 `;
 
-const TileTitle = styled.div`
-    font-size: 14px;
-    color: ${unSelectedNavButton};
-    margin-bottom: 10px;
-`;
-
 const ButtonRow = styled.div`
     display: flex;
 `;
@@ -86,15 +81,15 @@ export const AccountInfo = () => {
                             }
                         />
                         <Tile startTile={true}>
-                            <TileTitle>Account</TileTitle>
+                            <DarkSubTitle>Account</DarkSubTitle>
                             <div>Total</div>
                         </Tile>
                         <Tile>
-                            <TileTitle>Current Balance</TileTitle>
+                            <DarkSubTitle>Current Balance</DarkSubTitle>
                             <div>{totalB}</div>
                         </Tile>
                         <Tile>
-                            <TileTitle>Pending Balance</TileTitle>
+                            <DarkSubTitle>Pending Balance</DarkSubTitle>
                             <div>{totalPB}</div>
                         </Tile>
                     </SingleLine>
@@ -108,15 +103,15 @@ export const AccountInfo = () => {
                             color={pendingBalance === 0 ? '#FFD300' : '#652EC7'}
                         />
                         <Tile startTile={true}>
-                            <TileTitle>Account</TileTitle>
+                            <DarkSubTitle>Account</DarkSubTitle>
                             <div>Lightning</div>
                         </Tile>
                         <Tile>
-                            <TileTitle>Current Balance</TileTitle>
+                            <DarkSubTitle>Current Balance</DarkSubTitle>
                             <div>{formatCCB}</div>
                         </Tile>
                         <Tile>
-                            <TileTitle>Pending Balance</TileTitle>
+                            <DarkSubTitle>Pending Balance</DarkSubTitle>
                             <div>{formatPCB}</div>
                         </Tile>
                         <ButtonRow>
@@ -141,15 +136,15 @@ export const AccountInfo = () => {
                             }
                         />
                         <Tile startTile={true}>
-                            <TileTitle>Account</TileTitle>
+                            <DarkSubTitle>Account</DarkSubTitle>
                             <div>Wallet</div>
                         </Tile>
                         <Tile>
-                            <TileTitle>Current Balance</TileTitle>
+                            <DarkSubTitle>Current Balance</DarkSubTitle>
                             <div>{formatCB}</div>
                         </Tile>
                         <Tile>
-                            <TileTitle>Pending Balance</TileTitle>
+                            <DarkSubTitle>Pending Balance</DarkSubTitle>
                             <div>{formatPB}</div>
                         </Tile>
                         <ButtonRow>

src/components/createInvoice/CreateInvoice.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { CardWithTitle, SubTitle, Card, Sub4Title } from '../generic/Styled';
 import { useMutation } from '@apollo/react-hooks';
 import { CREATE_INVOICE } from '../../graphql/mutation';
@@ -7,6 +7,8 @@ import styled from 'styled-components';
 import { textColor, buttonBorderColor } from '../../styles/Themes';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../utils/error';
+import { AccountContext } from '../../context/AccountContext';
+import { getAuthString } from '../../utils/auth';
 
 const SingleLine = styled.div`
     display: flex;
@@ -55,7 +57,15 @@ const Input = styled.input`
 
 export const CreateInvoiceCard = () => {
     const [amount, setAmount] = useState(10000);
-    const [createInvoice, { error }] = useMutation(CREATE_INVOICE);
+
+    const { host, read, cert } = useContext(AccountContext);
+    const auth = getAuthString(host, read, cert);
+
+    const [createInvoice, { data, loading, error }] = useMutation(
+        CREATE_INVOICE,
+    );
+
+    console.log(data, loading);
 
     useEffect(() => {
         if (error) {
@@ -73,7 +83,7 @@ export const CreateInvoiceCard = () => {
                     <Input type={'number'} onChange={e => setAmount(10000)} />
                     <SimpleButton
                         onClick={() => {
-                            createInvoice({ variables: { amount } });
+                            createInvoice({ variables: { amount, auth } });
                         }}
                     >
                         <Edit />

src/components/forwardReport/Buttons.tsx

@@ -1,43 +1,55 @@
-import React from "react";
+import React from 'react';
-import { ChartRow, ChartLink } from "../generic/Styled";
+import { ChartRow, SimpleButton } from '../generic/Styled';
+import styled from 'styled-components';
+import {
+    chartSelectedLinkColor,
+    chartLinkColor,
+    textColor,
+} from '../../styles/Themes';
+
+const availableTimes = ['day', 'week', 'month'];
+const mappedTimes = ['Day', 'Week', 'Month'];
+const availableTypes = ['amount', 'fee', 'tokens'];
+const mappedTypes = ['Amount', 'Fees', 'Value'];
+
+const ReportButton = styled(SimpleButton)`
+    color: ${chartLinkColor};
+    width: 70px;
+
+    &:hover {
+        border: 1px solid ${chartSelectedLinkColor};
+        color: ${textColor};
+    }
+`;
 
 export const ButtonRow = ({ isTime, setIsTime, isType, setIsType }: any) => {
-  return (
+    const timeIndex = availableTimes.indexOf(isTime);
-    <ChartRow style={{ marginTop: "16px" }}>
+    const typeIndex = availableTypes.indexOf(isType);
-      <ChartRow>
+
-        <ChartLink selected={isTime === "day"} onClick={() => setIsTime("day")}>
+    const toggleButtons = (array: string[], index: number) => {
-          Day
+        if (index === array.length - 1) {
-        </ChartLink>
+            return array[0];
-        <ChartLink
+        }
-          selected={isTime === "week"}
+        return array[index + 1];
-          onClick={() => setIsTime("week")}
+    };
-        >
+
-          Week
+    const buttonToShow = (
-        </ChartLink>
+        setFn: (text: string) => {},
-        <ChartLink
+        array: string[],
-          selected={isTime === "month"}
+        mapped: string[],
-          onClick={() => setIsTime("month")}
+        index: number,
-        >
+    ) => {
-          Month
+        return (
-        </ChartLink>
+            <ReportButton onClick={() => setFn(toggleButtons(array, index))}>
-      </ChartRow>
+                {mapped[index]}
-      <ChartRow>
+            </ReportButton>
-        <ChartLink
+        );
-          selected={isType === "amount"}
+    };
-          onClick={() => setIsType("amount")}
+
-        >
+    return (
-          Amount
+        <ChartRow>
-        </ChartLink>
+            {buttonToShow(setIsTime, availableTimes, mappedTimes, timeIndex)}
-        <ChartLink selected={isType === "fee"} onClick={() => setIsType("fee")}>
+            {buttonToShow(setIsType, availableTypes, mappedTypes, typeIndex)}
-          Fees
+        </ChartRow>
-        </ChartLink>
+    );
-        <ChartLink
-          selected={isType === "tokens"}
-          onClick={() => setIsType("tokens")}
-        >
-          Value
-        </ChartLink>
-      </ChartRow>
-    </ChartRow>
-  );
 };

src/components/forwardReport/ForwardChannelReport.tsx

@@ -1,24 +1,20 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
-import {
+import { Card, DarkSubTitle } from '../generic/Styled';
-    Card,
-    SubTitle,
-    Sub4Title,
-    CardContent,
-    ChannelRow,
-    CardWithTitle,
-} from '../generic/Styled';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_FORWARD_CHANNELS_REPORT } from '../../graphql/query';
-import { ButtonRow } from './Buttons';
 import { getValue } from '../../helpers/Helpers';
 import { SettingsContext } from '../../context/SettingsContext';
 import { AccountContext } from '../../context/AccountContext';
 import { getAuthString } from '../../utils/auth';
+import { ChannelRow, CardContent } from '.';
 
-export const ForwardChannelsReport = () => {
+interface Props {
+    isTime: string;
+    isType: string;
+}
+
+export const ForwardChannelsReport = ({ isTime, isType }: Props) => {
     const { price, symbol, currency } = useContext(SettingsContext);
-    const [isTime, setIsTime] = useState<string>('week');
-    const [isType, setIsType] = useState<string>('amount');
 
     const { host, read, cert } = useContext(AccountContext);
     const auth = getAuthString(host, read, cert);
@@ -35,13 +31,29 @@ export const ForwardChannelsReport = () => {
         );
     }
 
-    const parsedIncoming = JSON.parse(data.getForwardChannelsReport.incoming);
+    const fillArray = (array: {}[]) => {
-    const parsedOutgoing = JSON.parse(data.getForwardChannelsReport.outgoing);
+        const lengthMissing = 5 - array.length;
+        console.log(lengthMissing);
+        if (lengthMissing > 0) {
+            for (let i = 0; i < lengthMissing; i++) {
+                array.push({ name: '-', amount: '', fee: '', tokens: '' });
+            }
+        }
+        return array;
+    };
+
+    const parsedIncoming = fillArray(
+        JSON.parse(data.getForwardChannelsReport.incoming),
+    );
+    const parsedOutgoing = fillArray(
+        JSON.parse(data.getForwardChannelsReport.outgoing),
+    );
 
     // console.log(parsedIncoming);
     // console.log(parsedOutgoing);
 
-    const getFormatString = (amount: number) => {
+    const getFormatString = (amount: number | string) => {
+        if (typeof amount === 'string') return amount;
         if (isType !== 'amount') {
             return getValue({ amount, price, symbol, currency });
         }
@@ -55,38 +67,23 @@ export const ForwardChannelsReport = () => {
 
         return (
             <>
-                <Sub4Title>Incoming</Sub4Title>
+                <DarkSubTitle>Incoming</DarkSubTitle>
                 {parsedIncoming.map((channel: any, index: number) => (
                     <ChannelRow key={index}>
                         <div>{channel.name}</div>
                         <div>{getFormatString(channel[isType])}</div>
                     </ChannelRow>
                 ))}
-                <Sub4Title>Outgoing</Sub4Title>
+                <DarkSubTitle>Outgoing</DarkSubTitle>
                 {parsedOutgoing.map((channel: any, index: number) => (
                     <ChannelRow key={index}>
                         <div>{channel.name}</div>
                         <div>{getFormatString(channel[isType])}</div>
                     </ChannelRow>
                 ))}
-                <div style={{ marginTop: 'auto' }}>
-                    <ButtonRow
-                        isTime={isTime}
-                        isType={isType}
-                        setIsTime={setIsTime}
-                        setIsType={setIsType}
-                    />
-                </div>
             </>
         );
     };
 
-    return (
+    return <CardContent>{renderContent()}</CardContent>;
-        <CardWithTitle>
-            <SubTitle>Channel Forwards</SubTitle>
-            <Card bottom={'20px'} full>
-                <CardContent>{renderContent()}</CardContent>
-            </Card>
-        </CardWithTitle>
-    );
 };

src/components/forwardReport/ForwardReport.tsx

@@ -1,30 +1,29 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
-import {
+import { Sub4Title, DarkSubTitle } from '../generic/Styled';
-    Card,
-    ChartLink,
-    ChartRow,
-    TitleRow,
-    SubTitle,
-    CardContent,
-    Sub4Title,
-    ChannelRow,
-    CardWithTitle,
-} from '../generic/Styled';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_FORWARD_REPORT } from '../../graphql/query';
+import numeral from 'numeral';
+import { SettingsContext } from '../../context/SettingsContext';
+import { getValue } from '../../helpers/Helpers';
+import { AccountContext } from '../../context/AccountContext';
+import { getAuthString } from '../../utils/auth';
 import {
     VictoryBar,
     VictoryChart,
     VictoryAxis,
     VictoryVoronoiContainer,
 } from 'victory';
-import numeral from 'numeral';
+import {
-import { ButtonRow } from './Buttons';
+    chartAxisColor,
-import { SettingsContext } from '../../context/SettingsContext';
+    chartBarColor,
-import { chartAxisColor, chartBarColor } from '../../styles/Themes';
+    chartGridColor,
-import { getValue } from '../../helpers/Helpers';
+} from '../../styles/Themes';
-import { AccountContext } from '../../context/AccountContext';
+import { ChannelRow, CardContent } from '.';
-import { getAuthString } from '../../utils/auth';
+
+interface Props {
+    isTime: string;
+    isType: string;
+}
 
 const getValueString = (amount: number): string => {
     if (amount >= 100000) {
@@ -35,10 +34,8 @@ const getValueString = (amount: number): string => {
     return `${amount}`;
 };
 
-export const ForwardReport = () => {
+export const ForwardReport = ({ isTime, isType }: Props) => {
     const { theme, price, symbol, currency } = useContext(SettingsContext);
-    const [isTime, setIsTime] = useState<string>('week');
-    const [isType, setIsType] = useState<string>('amount');
 
     const { host, read, cert } = useContext(AccountContext);
     const auth = getAuthString(host, read, cert);
@@ -109,7 +106,7 @@ export const ForwardReport = () => {
                             domain={[0, domain]}
                             tickFormat={() => ''}
                             style={{
-                                axis: { stroke: chartAxisColor[theme] },
+                                axis: { stroke: chartGridColor[theme] },
                             }}
                         />
                         <VictoryAxis
@@ -119,7 +116,7 @@ export const ForwardReport = () => {
                                     fill: chartAxisColor[theme],
                                     fontSize: 18,
                                 },
-                                grid: { stroke: chartAxisColor[theme] },
+                                grid: { stroke: chartGridColor[theme] },
                                 axis: { stroke: 'transparent' },
                             }}
                             tickFormat={a =>
@@ -140,27 +137,12 @@ export const ForwardReport = () => {
                     </VictoryChart>
                 </div>
                 <ChannelRow>
-                    <Sub4Title>Total:</Sub4Title>
+                    <DarkSubTitle>Total:</DarkSubTitle>
                     {total}
                 </ChannelRow>
-                <div style={{ marginTop: 'auto' }}>
-                    <ButtonRow
-                        isTime={isTime}
-                        isType={isType}
-                        setIsTime={setIsTime}
-                        setIsType={setIsType}
-                    />
-                </div>
             </>
         );
     };
 
-    return (
+    return <CardContent>{renderContent()}</CardContent>;
-        <CardWithTitle>
-            <SubTitle>Fowards</SubTitle>
-            <Card bottom={'20px'} full>
-                <CardContent>{renderContent()}</CardContent>
-            </Card>
-        </CardWithTitle>
-    );
 };

src/components/forwardReport/index.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { ForwardReport } from '../forwardReport/ForwardReport';
+import { ForwardChannelsReport } from '../forwardReport/ForwardChannelReport';
+import styled from 'styled-components';
+import { CardWithTitle, SubTitle, Card } from '../generic/Styled';
+import { ButtonRow } from './Buttons';
+
+export const CardContent = styled.div`
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    width: 50%;
+    padding: 0 20px;
+`;
+
+export const ChannelRow = styled.div`
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const ChartRow = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const Row = styled.div`
+    display: flex;
+`;
+
+export const ForwardBox = () => {
+    const [isTime, setIsTime] = useState<string>('week');
+    const [isType, setIsType] = useState<string>('amount');
+
+    const props = { isTime, isType };
+
+    return (
+        <CardWithTitle>
+            <ChartRow>
+                <SubTitle>Foward Report</SubTitle>
+                <ButtonRow
+                    isTime={isTime}
+                    isType={isType}
+                    setIsTime={setIsTime}
+                    setIsType={setIsType}
+                />
+            </ChartRow>
+            <Card bottom={'25px'}>
+                <Row>
+                    <ForwardReport {...props} />
+                    <ForwardChannelsReport {...props} />
+                </Row>
+            </Card>
+        </CardWithTitle>
+    );
+};

src/components/generic/Styled.ts

@@ -67,27 +67,6 @@ export const SmallLink = styled.a`
     }
 `;
 
-export const ChartLink = styled.button`
-    text-decoration: none;
-    color: ${({ selected }: { selected: boolean }) =>
-        selected ? chartSelectedLinkColor : chartLinkColor};
-    background-color: transparent;
-    cursor: pointer;
-    border: 0;
-    padding: 0;
-    font-weight: bold;
-
-    &:hover {
-        color: ${chartSelectedLinkColor};
-    }
-`;
-
-export const ChartRow = styled.div`
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 3px;
-`;
-
 export const TitleRow = styled.div`
     display: flex;
     justify-content: space-between;
@@ -104,19 +83,6 @@ export const Sub4Title = styled.h5`
     font-weight: 500;
 `;
 
-export const CardContent = styled.div`
-    height: 100%;
-    display: flex;
-    flex-flow: column;
-`;
-
-export const ChannelRow = styled.div`
-    font-size: 14px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;
-
 export const Input = styled.input`
     width: 100%;
     margin: 10px 20px;
@@ -145,6 +111,7 @@ export const SingleLine = styled.div`
 `;
 
 export const SimpleButton = styled.button`
+    cursor: pointer;
     outline: none;
     padding: 5px;
     margin: 5px;
@@ -157,7 +124,11 @@ export const SimpleButton = styled.button`
     align-items: center;
     justify-content: center;
     border-radius: 5px;
-    /* width: 150px; */
-    /* width: 20% */
     white-space: nowrap;
 `;
+
+export const DarkSubTitle = styled.div`
+    font-size: 14px;
+    color: ${unSelectedNavButton};
+    margin-bottom: 10px;
+`;

src/components/pay/pay.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import {
     CardWithTitle,
     SubTitle,
@@ -11,12 +11,18 @@ import {
 import { useMutation } from '@apollo/react-hooks';
 import { PAY_INVOICE } from '../../graphql/mutation';
 import { Send, Settings } from '../generic/Icons';
+import { AccountContext } from '../../context/AccountContext';
+import { getAuthString } from '../../utils/auth';
 
 export const PayCard = () => {
     const [request, setRequest] = useState('');
+
+    const { host, read, cert } = useContext(AccountContext);
+    const auth = getAuthString(host, read, cert);
+
     const [makePayment, { data, loading, error }] = useMutation(PAY_INVOICE);
 
-    // console.log(data, loading, error);
+    console.log(data, loading, error);
 
     return (
         <CardWithTitle>
@@ -31,7 +37,7 @@ export const PayCard = () => {
                     <SimpleButton
                         enabled={request !== ''}
                         onClick={() => {
-                            makePayment({ variables: { request } });
+                            makePayment({ variables: { request, auth } });
                         }}
                     >
                         <Send />

src/styles/Themes.ts

@@ -1,91 +1,96 @@
-import theme from "styled-theming";
+import theme from 'styled-theming';
 
-export const backgroundColor = theme("mode", {
+export const backgroundColor = theme('mode', {
-  light: "#fafafa",
+    light: '#fafafa',
-  dark: "#151727"
+    dark: '#151727',
 });
 
-export const textColor = theme("mode", {
+export const textColor = theme('mode', {
-  light: "262626",
+    light: '262626',
-  dark: "#EFFFFA"
+    dark: '#EFFFFA',
 });
 
-export const cardColor = theme("mode", {
+export const cardColor = theme('mode', {
-  light: "white",
+    light: 'white',
-  dark: "#1b1e32"
+    dark: '#1b1e32',
 });
 
-export const subCardColor = theme("mode", {
+export const subCardColor = theme('mode', {
-  light: "white",
+    light: 'white',
-  dark: "#151727"
+    dark: '#151727',
 });
 
-export const cardBorderColor = theme("mode", {
+export const cardBorderColor = theme('mode', {
-  light: "#f5f5f5",
+    light: '#f5f5f5',
-  dark: "#242839"
+    dark: '#242839',
 });
 
-export const progressBackground = theme("mode", {
+export const progressBackground = theme('mode', {
-  light: "rgba(0, 0, 0, 0.05)",
+    light: 'rgba(0, 0, 0, 0.05)',
-  dark: "rgba(0, 0, 0, 1)"
+    dark: 'rgba(0, 0, 0, 1)',
 });
 
-export const progressFirst = theme("mode", {
+export const progressFirst = theme('mode', {
-  light: "#ffa940",
+    light: '#ffa940',
-  dark: "#ffa940"
+    dark: '#ffa940',
 });
 
-export const progressSecond = theme("mode", {
+export const progressSecond = theme('mode', {
-  light: "#1890ff",
+    light: '#1890ff',
-  dark: "#1890ff"
+    dark: '#1890ff',
 });
 
-export const iconButtonColor = theme("mode", {
+export const iconButtonColor = theme('mode', {
-  light: "black",
+    light: 'black',
-  dark: "white"
+    dark: 'white',
 });
 
-export const iconButtonHover = theme("mode", {
+export const iconButtonHover = theme('mode', {
-  light: "#e8e8e8",
+    light: '#e8e8e8',
-  dark: "#e8e8e8"
+    dark: '#e8e8e8',
 });
 
-export const iconButtonBack = theme("mode", {
+export const iconButtonBack = theme('mode', {
-  light: "#f5f5f5",
+    light: '#f5f5f5',
-  dark: "#0D0C1D"
+    dark: '#0D0C1D',
 });
 
-export const smallLinkColor = theme("mode", {
+export const smallLinkColor = theme('mode', {
-  light: "#9254de",
+    light: '#9254de',
-  dark: "#adc6ff"
+    dark: '#adc6ff',
 });
 
-export const chartLinkColor = theme("mode", {
+export const chartLinkColor = theme('mode', {
-  light: "#595959",
+    light: '#595959',
-  dark: "#8c8c8c"
+    dark: '#8c8c8c',
 });
 
-export const chartSelectedLinkColor = theme("mode", {
+export const chartSelectedLinkColor = theme('mode', {
-  light: "#43DDE2",
+    light: '#43DDE2',
-  dark: "#6938f1"
+    dark: '#6938f1',
 });
 
 export const chartAxisColor: { [key: string]: string } = {
-  light: "#1b1c22",
+    light: '#1b1c22',
-  dark: "white"
+    dark: 'white',
+};
+
+export const chartGridColor: { [key: string]: string } = {
+    light: '#1b1c22',
+    dark: '#595959',
 };
 
 export const chartBarColor: { [key: string]: string } = {
-  light: "#43DDE2",
+    light: '#43DDE2',
-  dark: "#6938f1"
+    dark: '#6938f1',
 };
 
-export const unSelectedNavButton = theme("mode", {
+export const unSelectedNavButton = theme('mode', {
-  light: "grey",
+    light: 'grey',
-  dark: "grey"
+    dark: 'grey',
 });
 
-export const buttonBorderColor = theme("mode", {
+export const buttonBorderColor = theme('mode', {
-  light: "black",
+    light: 'black',
-  dark: "#2e3245"
+    dark: '#2e3245',
 });

src/views/home/Home.tsx

@@ -1,19 +1,9 @@
 import React from 'react';
 import { NetworkInfo } from '../../components/networkInfo/NetworkInfo';
-import { ForwardReport } from '../../components/forwardReport/ForwardReport';
-import { ForwardChannelsReport } from '../../components/forwardReport/ForwardChannelReport';
-import styled from 'styled-components';
 import { PayCard } from '../../components/pay/pay';
 import { CreateInvoiceCard } from '../../components/createInvoice/CreateInvoice';
 import { AccountInfo } from '../../components/account/AccountInfo';
-
+import { ForwardBox } from '../../components/forwardReport';
-const Row = styled.div`
-    display: flex;
-`;
-
-const CenterPadding = styled.div`
-    width: 20px;
-`;
 
 export const Home = () => {
     return (
@@ -21,11 +11,7 @@ export const Home = () => {
             <AccountInfo />
             <PayCard />
             <CreateInvoiceCard />
-            <Row>
+            <ForwardBox />
-                <ForwardReport />
-                <CenterPadding />
-                <ForwardChannelsReport />
-            </Row>
             <NetworkInfo />
         </>
     );