chore: styling

2025-02-22 14:22:33 +01:00 · 2019-12-01 15:32:52 +01:00 · 2019-12-01 15:32:52 +01:00 · a8132afa4c
commit a8132afa4c
parent 514b8ebe11
10 changed files with 262 additions and 241 deletions
--- a/src/components/account/AccountInfo.tsx
+++ b/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>
--- a/src/components/createInvoice/CreateInvoice.tsx
+++ b/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 />
--- a/src/components/forwardReport/Buttons.tsx
+++ b/src/components/forwardReport/Buttons.tsx
@ -1,43 +1,55 @@
-import React from "react";
-import { ChartRow, ChartLink } from "../generic/Styled";
+import React from 'react';
+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 (
-    <ChartRow style={{ marginTop: "16px" }}>
-      <ChartRow>
-        <ChartLink selected={isTime === "day"} onClick={() => setIsTime("day")}>
-          Day
-        </ChartLink>
-        <ChartLink
-          selected={isTime === "week"}
-          onClick={() => setIsTime("week")}
-        >
-          Week
-        </ChartLink>
-        <ChartLink
-          selected={isTime === "month"}
-          onClick={() => setIsTime("month")}
-        >
-          Month
-        </ChartLink>
-      </ChartRow>
-      <ChartRow>
-        <ChartLink
-          selected={isType === "amount"}
-          onClick={() => setIsType("amount")}
-        >
-          Amount
-        </ChartLink>
-        <ChartLink selected={isType === "fee"} onClick={() => setIsType("fee")}>
-          Fees
-        </ChartLink>
-        <ChartLink
-          selected={isType === "tokens"}
-          onClick={() => setIsType("tokens")}
-        >
-          Value
-        </ChartLink>
-      </ChartRow>
-    </ChartRow>
-  );
+    const timeIndex = availableTimes.indexOf(isTime);
+    const typeIndex = availableTypes.indexOf(isType);
+
+    const toggleButtons = (array: string[], index: number) => {
+        if (index === array.length - 1) {
+            return array[0];
+        }
+        return array[index + 1];
+    };
+
+    const buttonToShow = (
+        setFn: (text: string) => {},
+        array: string[],
+        mapped: string[],
+        index: number,
+    ) => {
+        return (
+            <ReportButton onClick={() => setFn(toggleButtons(array, index))}>
+                {mapped[index]}
+            </ReportButton>
+        );
+    };
+
+    return (
+        <ChartRow>
+            {buttonToShow(setIsTime, availableTimes, mappedTimes, timeIndex)}
+            {buttonToShow(setIsType, availableTypes, mappedTypes, typeIndex)}
+        </ChartRow>
+    );
 };
--- a/src/components/forwardReport/ForwardChannelReport.tsx
+++ b/src/components/forwardReport/ForwardChannelReport.tsx
@ -1,24 +1,20 @@
-import React, { useState, useContext } from 'react';
-import {
-    Card,
-    SubTitle,
-    Sub4Title,
-    CardContent,
-    ChannelRow,
-    CardWithTitle,
-} from '../generic/Styled';
+import React, { useContext } from 'react';
+import { Card, DarkSubTitle } 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 parsedOutgoing = JSON.parse(data.getForwardChannelsReport.outgoing);
+    const fillArray = (array: {}[]) => {
+        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 (
-        <CardWithTitle>
-            <SubTitle>Channel Forwards</SubTitle>
-            <Card bottom={'20px'} full>
-                <CardContent>{renderContent()}</CardContent>
-            </Card>
-        </CardWithTitle>
-    );
+    return <CardContent>{renderContent()}</CardContent>;
 };
--- a/src/components/forwardReport/ForwardReport.tsx
+++ b/src/components/forwardReport/ForwardReport.tsx
@ -1,30 +1,29 @@
-import React, { useState, useContext } from 'react';
-import {
-    Card,
-    ChartLink,
-    ChartRow,
-    TitleRow,
-    SubTitle,
-    CardContent,
-    Sub4Title,
-    ChannelRow,
-    CardWithTitle,
-} from '../generic/Styled';
+import React, { useContext } from 'react';
+import { Sub4Title, DarkSubTitle } 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 { ButtonRow } from './Buttons';
-import { SettingsContext } from '../../context/SettingsContext';
-import { chartAxisColor, chartBarColor } from '../../styles/Themes';
-import { getValue } from '../../helpers/Helpers';
-import { AccountContext } from '../../context/AccountContext';
-import { getAuthString } from '../../utils/auth';
+import {
+    chartAxisColor,
+    chartBarColor,
+    chartGridColor,
+} from '../../styles/Themes';
+import { ChannelRow, CardContent } from '.';
+
+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 (
-        <CardWithTitle>
-            <SubTitle>Fowards</SubTitle>
-            <Card bottom={'20px'} full>
-                <CardContent>{renderContent()}</CardContent>
-            </Card>
-        </CardWithTitle>
-    );
+    return <CardContent>{renderContent()}</CardContent>;
 };
--- a/src/components/forwardReport/index.tsx
+++ b/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>
+    );
+};
--- a/src/components/generic/Styled.ts
+++ b/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;
+`;
--- a/src/components/pay/pay.tsx
+++ b/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 />
--- a/src/styles/Themes.ts
+++ b/src/styles/Themes.ts
@ -1,91 +1,96 @@
-import theme from "styled-theming";
+import theme from 'styled-theming';

-export const backgroundColor = theme("mode", {
-  light: "#fafafa",
-  dark: "#151727"
+export const backgroundColor = theme('mode', {
+    light: '#fafafa',
+    dark: '#151727',
 });

-export const textColor = theme("mode", {
-  light: "262626",
-  dark: "#EFFFFA"
+export const textColor = theme('mode', {
+    light: '262626',
+    dark: '#EFFFFA',
 });

-export const cardColor = theme("mode", {
-  light: "white",
-  dark: "#1b1e32"
+export const cardColor = theme('mode', {
+    light: 'white',
+    dark: '#1b1e32',
 });

-export const subCardColor = theme("mode", {
-  light: "white",
-  dark: "#151727"
+export const subCardColor = theme('mode', {
+    light: 'white',
+    dark: '#151727',
 });

-export const cardBorderColor = theme("mode", {
-  light: "#f5f5f5",
-  dark: "#242839"
+export const cardBorderColor = theme('mode', {
+    light: '#f5f5f5',
+    dark: '#242839',
 });

-export const progressBackground = theme("mode", {
-  light: "rgba(0, 0, 0, 0.05)",
-  dark: "rgba(0, 0, 0, 1)"
+export const progressBackground = theme('mode', {
+    light: 'rgba(0, 0, 0, 0.05)',
+    dark: 'rgba(0, 0, 0, 1)',
 });

-export const progressFirst = theme("mode", {
-  light: "#ffa940",
-  dark: "#ffa940"
+export const progressFirst = theme('mode', {
+    light: '#ffa940',
+    dark: '#ffa940',
 });

-export const progressSecond = theme("mode", {
-  light: "#1890ff",
-  dark: "#1890ff"
+export const progressSecond = theme('mode', {
+    light: '#1890ff',
+    dark: '#1890ff',
 });

-export const iconButtonColor = theme("mode", {
-  light: "black",
-  dark: "white"
+export const iconButtonColor = theme('mode', {
+    light: 'black',
+    dark: 'white',
 });

-export const iconButtonHover = theme("mode", {
-  light: "#e8e8e8",
-  dark: "#e8e8e8"
+export const iconButtonHover = theme('mode', {
+    light: '#e8e8e8',
+    dark: '#e8e8e8',
 });

-export const iconButtonBack = theme("mode", {
-  light: "#f5f5f5",
-  dark: "#0D0C1D"
+export const iconButtonBack = theme('mode', {
+    light: '#f5f5f5',
+    dark: '#0D0C1D',
 });

-export const smallLinkColor = theme("mode", {
-  light: "#9254de",
-  dark: "#adc6ff"
+export const smallLinkColor = theme('mode', {
+    light: '#9254de',
+    dark: '#adc6ff',
 });

-export const chartLinkColor = theme("mode", {
-  light: "#595959",
-  dark: "#8c8c8c"
+export const chartLinkColor = theme('mode', {
+    light: '#595959',
+    dark: '#8c8c8c',
 });

-export const chartSelectedLinkColor = theme("mode", {
-  light: "#43DDE2",
-  dark: "#6938f1"
+export const chartSelectedLinkColor = theme('mode', {
+    light: '#43DDE2',
+    dark: '#6938f1',
 });

 export const chartAxisColor: { [key: string]: string } = {
-  light: "#1b1c22",
-  dark: "white"
+    light: '#1b1c22',
+    dark: 'white',
+};
+
+export const chartGridColor: { [key: string]: string } = {
+    light: '#1b1c22',
+    dark: '#595959',
 };

 export const chartBarColor: { [key: string]: string } = {
-  light: "#43DDE2",
-  dark: "#6938f1"
+    light: '#43DDE2',
+    dark: '#6938f1',
 };

-export const unSelectedNavButton = theme("mode", {
-  light: "grey",
-  dark: "grey"
+export const unSelectedNavButton = theme('mode', {
+    light: 'grey',
+    dark: 'grey',
 });

-export const buttonBorderColor = theme("mode", {
-  light: "black",
-  dark: "#2e3245"
+export const buttonBorderColor = theme('mode', {
+    light: 'black',
+    dark: '#2e3245',
 });
--- a/src/views/home/Home.tsx
+++ b/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';
-
-const Row = styled.div`
-    display: flex;
-`;
-
-const CenterPadding = styled.div`
-    width: 20px;
-`;
+import { ForwardBox } from '../../components/forwardReport';

 export const Home = () => {
    return (
@ -21,11 +11,7 @@ export const Home = () => {
            <AccountInfo />
            <PayCard />
            <CreateInvoiceCard />
-            <Row>
-                <ForwardReport />
-                <CenterPadding />
-                <ForwardChannelsReport />
-            </Row>
+            <ForwardBox />
            <NetworkInfo />
        </>
    );