chore: cleanup

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { GlobalStyles } from './styles/GlobalStyle';
 import { Header } from './sections/header/Header';
@@ -8,10 +8,10 @@ import { Content } from './sections/content/Content';
 import { ApolloProvider } from '@apollo/react-hooks';
 import { BrowserRouter } from 'react-router-dom';
 import ApolloClient from 'apollo-boost';
-import SettingsProvider, { SettingsContext } from './context/SettingsContext';
+import { useSettings, SettingsProvider } from './context/SettingsContext';
 import { BitcoinPrice } from './components/bitcoinPrice/BitcoinPrice';
 import { ModalProvider } from 'styled-react-modal';
-import AccountProvider, { AccountContext } from './context/AccountContext';
+import { useAccount, AccountProvider } from './context/AccountContext';
 import { LoginView } from './views/login/Login';
 import { toast } from 'react-toastify';
 import { FadingBackground } from './components/modal/ReactModal';
@@ -47,8 +47,8 @@ const Container = styled.div`
 `;
 
 const ContextApp: React.FC = () => {
-    const { theme } = useContext(SettingsContext);
-    const { loggedIn, admin, read } = useContext(AccountContext);
+    const { theme } = useSettings();
+    const { loggedIn, admin, read } = useAccount();
 
     const renderContent = () =>
         !loggedIn && admin === '' ? (

src/components/account/AccountInfo.tsx

@@ -1,19 +1,18 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
     Card,
     CardWithTitle,
     SubTitle,
     SingleLine,
     Separation,
-    SimpleButton,
     DarkSubTitle,
     ColorButton,
 } from '../generic/Styled';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import { getAuthString } from '../../utils/auth';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_BALANCES } from '../../graphql/query';
-import { SettingsContext } from '../../context/SettingsContext';
+import { useSettings } from '../../context/SettingsContext';
 import styled from 'styled-components';
 import {
     Send,
@@ -23,7 +22,6 @@ import {
     Pocket,
     DownArrow,
 } from '../generic/Icons';
-import { unSelectedNavButton } from '../../styles/Themes';
 import { getValue } from '../../helpers/Helpers';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../utils/error';
@@ -41,7 +39,7 @@ const ButtonRow = styled.div`
 `;
 
 export const AccountInfo = () => {
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { data } = useQuery(GET_BALANCES, {
@@ -49,7 +47,7 @@ export const AccountInfo = () => {
         onError: error => toast.error(getErrorContent(error)),
     });
 
-    const { price, symbol, currency } = useContext(SettingsContext);
+    const { price, symbol, currency } = useSettings();
     const priceProps = { price, symbol, currency };
 
     if (!data) {

src/components/auth/BTCLogin.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { Input, SingleLine, Sub4Title } from '../../components/generic/Styled';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import { getConfigLnd, saveUserAuth } from '../../utils/auth';
 import CryptoJS from 'crypto-js';
 import { LoginButton, PasswordInput } from './Password';
@@ -12,7 +12,7 @@ interface AuthProps {
 }
 
 export const BTCLoginForm = ({ available, callback }: AuthProps) => {
-    const { setAccount } = useContext(AccountContext);
+    const { setAccount } = useAccount();
 
     const [isName, setName] = useState('');
     const [isJson, setJson] = useState('');

src/components/auth/ConnectLogin.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { Input, SingleLine, Sub4Title } from '../../components/generic/Styled';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import {
     getAuthLnd,
     getBase64CertfromDerFormat,
@@ -15,7 +15,7 @@ interface AuthProps {
 }
 
 export const ConnectLoginForm = ({ available, callback }: AuthProps) => {
-    const { setAccount } = useContext(AccountContext);
+    const { setAccount } = useAccount();
 
     const [isName, setName] = useState('');
     const [isUrl, setUrl] = useState('');

src/components/auth/NormalLogin.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { Input, SingleLine, Sub4Title } from '../generic/Styled';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import { saveUserAuth } from '../../utils/auth';
 import CryptoJS from 'crypto-js';
 import base64url from 'base64url';
@@ -12,7 +12,7 @@ interface AuthProps {
 }
 
 export const LoginForm = ({ available, callback }: AuthProps) => {
-    const { setAccount } = useContext(AccountContext);
+    const { setAccount } = useAccount();
 
     const [isName, setName] = useState('');
     const [isHost, setHost] = useState('');

src/components/bitcoinPrice/BitcoinPrice.ts

@@ -1,12 +1,12 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_BITCOIN_PRICE } from '../../graphql/query';
-import { SettingsContext } from '../../context/SettingsContext';
+import { useSettings } from '../../context/SettingsContext';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../utils/error';
 
 export const BitcoinPrice = () => {
-    const { setSettings } = useContext(SettingsContext);
+    const { setSettings } = useSettings();
     const { loading, data } = useQuery(GET_BITCOIN_PRICE, {
         onError: error => toast.error(getErrorContent(error)),
     });

src/components/channels/channels/ChannelCard.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { getPercent, getValue } from '../../../helpers/Helpers';
 import {
     Progress,
@@ -15,7 +15,7 @@ import {
     ColorButton,
     SingleLine,
 } from '../../generic/Styled';
-import { SettingsContext } from '../../../context/SettingsContext';
+import { useSettings } from '../../../context/SettingsContext';
 import {
     getStatusDot,
     getPrivate,
@@ -49,7 +49,7 @@ export const ChannelCard = ({
 }: ChannelCardProps) => {
     const [modalOpen, setModalOpen] = useState(false);
 
-    const { price, symbol, currency, theme } = useContext(SettingsContext);
+    const { price, symbol, currency, theme } = useSettings();
     const priceProps = { price, symbol, currency };
 
     const tooltipType = getTooltipType(theme);

src/components/channels/channels/Channels.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_CHANNELS } from '../../../graphql/query';
 import { Card, CardWithTitle, SubTitle } from '../../generic/Styled';
 import { ChannelCard } from './ChannelCard';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
@@ -11,7 +11,7 @@ import { getErrorContent } from '../../../utils/error';
 export const Channels = () => {
     const [indexOpen, setIndexOpen] = useState(0);
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { loading, data } = useQuery(GET_CHANNELS, {

src/components/channels/pendingChannels/PendingCard.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { getPercent, getValue } from '../../../helpers/Helpers';
 import {
     Progress,
@@ -9,7 +9,7 @@ import {
 } from '../Channels.style';
 import ReactTooltip from 'react-tooltip';
 import { SubCard, Separation, SingleLine } from '../../generic/Styled';
-import { SettingsContext } from '../../../context/SettingsContext';
+import { useSettings } from '../../../context/SettingsContext';
 import {
     getStatusDot,
     getTooltipType,
@@ -30,7 +30,7 @@ export const PendingCard = ({
     setIndexOpen,
     indexOpen,
 }: PendingCardProps) => {
-    const { price, symbol, currency, theme } = useContext(SettingsContext);
+    const { price, symbol, currency, theme } = useSettings();
     const priceProps = { price, symbol, currency };
 
     const tooltipType = getTooltipType(theme);
@@ -55,7 +55,7 @@ export const PendingCard = ({
         sent,
         transactionFee,
         transactionId,
-        transactionVout,
+        // transactionVout,
         partnerNodeInfo,
     } = channelInfo;
 

src/components/channels/pendingChannels/PendingChannels.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_PENDING_CHANNELS } from '../../../graphql/query';
 import { Card, CardWithTitle, SubTitle } from '../../generic/Styled';
 import { PendingCard } from './PendingCard';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
@@ -11,7 +11,7 @@ import { getErrorContent } from '../../../utils/error';
 export const PendingChannels = () => {
     const [indexOpen, setIndexOpen] = useState(0);
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { loading, data } = useQuery(GET_PENDING_CHANNELS, {

src/components/closeChannel/CloseChannel.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { CLOSE_CHANNEL } from '../../graphql/mutation';
 import { useMutation, useQuery } from '@apollo/react-hooks';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import { getAuthString } from '../../utils/auth';
 import {
     Input,
@@ -81,7 +81,7 @@ export const CloseChannel = ({
     const [halfHour, setHalfHour] = useState(0);
     const [hour, setHour] = useState(0);
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { data: feeData } = useQuery(GET_BITCOIN_FEES, {
@@ -114,7 +114,7 @@ export const CloseChannel = ({
             forceClose: isForce,
             auth,
             ...(isType !== 'none'
-                ? isType == 'fee'
+                ? isType === 'fee'
                     ? { tokens: amount }
                     : { target: amount }
                 : {}),

src/components/networkInfo/NetworkInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_NETWORK_INFO } from '../../graphql/query';
 import {
@@ -9,8 +9,8 @@ import {
     Separation,
 } from '../generic/Styled';
 import { getValue } from '../../helpers/Helpers';
-import { SettingsContext } from '../../context/SettingsContext';
-import { AccountContext } from '../../context/AccountContext';
+import { useSettings } from '../../context/SettingsContext';
+import { useAccount } from '../../context/AccountContext';
 import { getAuthString } from '../../utils/auth';
 import styled from 'styled-components';
 import { unSelectedNavButton } from '../../styles/Themes';
@@ -37,7 +37,7 @@ const Title = styled.div`
 `;
 
 export const NetworkInfo = () => {
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { loading, data } = useQuery(GET_NETWORK_INFO, {
@@ -45,7 +45,7 @@ export const NetworkInfo = () => {
         onError: error => toast.error(getErrorContent(error)),
     });
 
-    const { price, symbol, currency } = useContext(SettingsContext);
+    const { price, symbol, currency } = useSettings();
     const priceProps = { price, symbol, currency };
 
     if (loading || !data || !data.getNetworkInfo) {

src/components/nodeInfo/NodeInfo.tsx

@@ -1,14 +1,14 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_NODE_INFO } from '../../graphql/query';
 import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
-import { SettingsContext } from '../../context/SettingsContext';
+import { useSettings } from '../../context/SettingsContext';
 import { getValue } from '../../helpers/Helpers';
 import { Separation } from '../generic/Styled';
-import { QuestionIcon, Zap, ZapOff, Anchor } from '../generic/Icons';
+import { QuestionIcon, Zap, Anchor } from '../generic/Icons';
 import { getTooltipType } from '../generic/Helpers';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import { getAuthString } from '../../utils/auth';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../utils/error';
@@ -43,7 +43,7 @@ const Alias = styled.div`
 `;
 
 export const NodeInfo = () => {
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { loading, data } = useQuery(GET_NODE_INFO, {
@@ -51,7 +51,7 @@ export const NodeInfo = () => {
         onError: error => toast.error(getErrorContent(error)),
     });
 
-    const { price, symbol, currency, theme } = useContext(SettingsContext);
+    const { price, symbol, currency, theme } = useSettings();
     const priceProps = { price, symbol, currency };
 
     const tooltipType = getTooltipType(theme);

src/components/quickActions/createInvoice/CreateInvoice.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { Card, Input, ColorButton, NoWrapTitle } from '../../generic/Styled';
 import { useMutation } from '@apollo/react-hooks';
 import { CREATE_INVOICE } from '../../../graphql/mutation';
@@ -6,7 +6,7 @@ import { Edit } from '../../generic/Icons';
 import styled from 'styled-components';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 
 const SingleLine = styled.div`
@@ -18,7 +18,7 @@ const SingleLine = styled.div`
 export const CreateInvoiceCard = ({ color }: { color: string }) => {
     const [amount, setAmount] = useState(0);
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const [createInvoice, { data, loading }] = useMutation(CREATE_INVOICE, {

src/components/quickActions/decode/Decode.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import {
     Card,
     Sub4Title,
@@ -10,7 +10,7 @@ import {
 } from '../../generic/Styled';
 import { useMutation } from '@apollo/react-hooks';
 import { Layers } from '../../generic/Icons';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 import { DECODE_REQUEST } from '../../../graphql/mutation';
 import { getErrorContent } from '../../../utils/error';
@@ -18,15 +18,15 @@ import { toast } from 'react-toastify';
 import { getLoadingButton, getValue } from '../../../helpers/Helpers';
 import { DetailLine } from '../../channels/Channels.style';
 import { getNodeLink } from '../../generic/Helpers';
-import { SettingsContext } from '../../../context/SettingsContext';
+import { useSettings } from '../../../context/SettingsContext';
 
 export const DecodeCard = ({ color }: { color: string }) => {
     const [request, setRequest] = useState('');
 
-    const { price, symbol, currency, theme } = useContext(SettingsContext);
+    const { price, symbol, currency } = useSettings();
     const priceProps = { price, symbol, currency };
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const [decode, { data, loading }] = useMutation(DECODE_REQUEST, {

src/components/quickActions/pay/pay.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import {
     Card,
     Sub4Title,
@@ -9,7 +9,7 @@ import {
 import { useMutation } from '@apollo/react-hooks';
 import { PAY_INVOICE } from '../../../graphql/mutation';
 import { Send } from '../../generic/Icons';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
@@ -17,7 +17,7 @@ import { getErrorContent } from '../../../utils/error';
 export const PayCard = ({ color }: { color: string }) => {
     const [request, setRequest] = useState('');
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const [makePayment] = useMutation(PAY_INVOICE, {

src/components/quickActions/receiveOnChain/ReceiveOnChain.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
     Card,
     ColorButton,
@@ -12,7 +12,7 @@ import { Edit, Circle } from '../../generic/Icons';
 import styled from 'styled-components';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 
 const SingleLine = styled.div`
@@ -38,7 +38,7 @@ export const ReceiveOnChainCard = ({ color }: { color: string }) => {
     const [nested, setNested] = useState(false);
     const [received, setReceived] = useState(false);
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const [createAddress, { data }] = useMutation(CREATE_ADDRESS, {

src/components/quickActions/sendOnChain/SendOnChain.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
     Card,
     Input,
@@ -13,9 +13,9 @@ import { Send, Circle } from '../../generic/Icons';
 import styled from 'styled-components';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
-import { SettingsContext } from '../../../context/SettingsContext';
+import { useSettings } from '../../../context/SettingsContext';
 import { getValue } from '../../../helpers/Helpers';
 import { GET_BITCOIN_FEES } from '../../../graphql/query';
 
@@ -56,9 +56,9 @@ export const SendOnChainCard = ({ color }: { color: string }) => {
     const [halfHour, setHalfHour] = useState(0);
     const [hour, setHour] = useState(0);
 
-    const { price, symbol, currency } = useContext(SettingsContext);
+    const { price, symbol, currency } = useSettings();
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { data: feeData } = useQuery(GET_BITCOIN_FEES, {

src/components/reports/flow/FlowPie.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { DarkSubTitle } from '../../generic/Styled';
-import { SettingsContext } from '../../../context/SettingsContext';
+import { useSettings } from '../../../context/SettingsContext';
 import { getValue } from '../../../helpers/Helpers';
 import { VictoryPie } from 'victory';
 import { chartAxisColor } from '../../../styles/Themes';
@@ -12,7 +12,7 @@ interface Props {
 }
 
 export const FlowPie = ({ flowPie, isType }: Props) => {
-    const { theme, price, symbol, currency } = useContext(SettingsContext);
+    const { theme, price, symbol, currency } = useSettings();
 
     const priceProps = { price, symbol, currency };
     const getFormat = (amount: number) =>

src/components/reports/flow/FlowReport.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import numeral from 'numeral';
-import { SettingsContext } from '../../../context/SettingsContext';
+import { useSettings } from '../../../context/SettingsContext';
 import { getValue } from '../../../helpers/Helpers';
 import {
     VictoryBar,
@@ -29,7 +29,7 @@ export const FlowReport = ({
     parsedData,
     parsedData2,
 }: Props) => {
-    const { theme, price, symbol, currency } = useContext(SettingsContext);
+    const { theme, price, symbol, currency } = useSettings();
 
     const priceProps = { price, symbol, currency };
     const getFormat = (amount: number) =>

src/components/reports/flow/InvoicePie.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { DarkSubTitle } from '../../generic/Styled';
-import { SettingsContext } from '../../../context/SettingsContext';
+import { useSettings } from '../../../context/SettingsContext';
 import { VictoryPie } from 'victory';
 import { chartAxisColor } from '../../../styles/Themes';
 import { Row, Col, PieRow } from '.';
@@ -10,7 +10,7 @@ interface Props {
 }
 
 export const InvoicePie = ({ invoicePie }: Props) => {
-    const { theme } = useContext(SettingsContext);
+    const { theme } = useSettings();
 
     return (
         <Row>

src/components/reports/flow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import {
     CardWithTitle,
@@ -10,7 +10,7 @@ import {
 import { ButtonRow } from '../forwardReport/Buttons';
 import { FlowReport } from './FlowReport';
 import { getAuthString } from '../../../utils/auth';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { GET_IN_OUT } from '../../../graphql/query';
 import { useQuery } from '@apollo/react-hooks';
 import { FlowPie } from './FlowPie';
@@ -60,7 +60,7 @@ export const FlowBox = () => {
     const [isTime, setIsTime] = useState<string>('month');
     const [isType, setIsType] = useState<string>('amount');
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
     const { data, loading } = useQuery(GET_IN_OUT, {
         variables: { time: isTime, auth },

src/components/reports/forwardReport/ForwardChannelReport.tsx

@@ -1,16 +1,10 @@
-import React, { useContext, useState } from 'react';
-import {
-    DarkSubTitle,
-    Separation,
-    SimpleButton,
-    ColorButton,
-    SingleLine,
-} from '../../generic/Styled';
+import React, { useState } from 'react';
+import { DarkSubTitle, ColorButton, SingleLine } from '../../generic/Styled';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_FORWARD_CHANNELS_REPORT } from '../../../graphql/query';
 import { getValue } from '../../../helpers/Helpers';
-import { SettingsContext } from '../../../context/SettingsContext';
-import { AccountContext } from '../../../context/AccountContext';
+import { useSettings } from '../../../context/SettingsContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 import { ChannelRow, CardContent } from '.';
 import { toast } from 'react-toastify';
@@ -59,9 +53,9 @@ interface Props {
 export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
     const [type, setType] = useState('route');
 
-    const { price, symbol, currency } = useContext(SettingsContext);
+    const { price, symbol, currency } = useSettings();
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { data, loading } = useQuery(GET_FORWARD_CHANNELS_REPORT, {

src/components/reports/forwardReport/ForwardReport.tsx

@@ -1,11 +1,11 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Sub4Title } 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 { useSettings } from '../../../context/SettingsContext';
 import { getValue } from '../../../helpers/Helpers';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 import {
     VictoryBar,
@@ -28,9 +28,9 @@ interface Props {
 }
 
 export const ForwardReport = ({ isTime, isType }: Props) => {
-    const { theme, price, symbol, currency } = useContext(SettingsContext);
+    const { theme, price, symbol, currency } = useSettings();
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { data, loading } = useQuery(GET_FORWARD_REPORT, {

src/components/reports/liquidReport/LiquidReport.tsx

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { CardWithTitle, SubTitle, Card } from '../../generic/Styled';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_LIQUID_REPORT } from '../../../graphql/query';
-import { AccountContext } from '../../../context/AccountContext';
+import { useAccount } from '../../../context/AccountContext';
 import { getAuthString } from '../../../utils/auth';
 import {
     VictoryChart,
@@ -11,7 +11,7 @@ import {
     VictoryVoronoiContainer,
     VictoryTooltip,
 } from 'victory';
-import { SettingsContext } from '../../../context/SettingsContext';
+import { useSettings } from '../../../context/SettingsContext';
 import { getValue } from '../../../helpers/Helpers';
 import {
     chartGridColor,
@@ -20,10 +20,10 @@ import {
 } from '../../../styles/Themes';
 
 export const LiquidReport = () => {
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
-    const { theme, price, symbol, currency } = useContext(SettingsContext);
+    const { theme, price, symbol, currency } = useSettings();
 
     const priceProps = { price, symbol, currency };
     const getFormat = (amount: number) =>

src/components/resume/InvoiceCard.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { getValue } from '../../helpers/Helpers';
-import { SettingsContext } from '../../context/SettingsContext';
+import { useSettings } from '../../context/SettingsContext';
 import {
     Separation,
     SubCard,
@@ -14,7 +14,6 @@ import {
     getFormatDate,
     renderLine,
 } from '../generic/Helpers';
-import styled from 'styled-components';
 import { AddMargin } from './ResumeList';
 
 interface InvoiceCardProps {
@@ -24,32 +23,13 @@ interface InvoiceCardProps {
     indexOpen: number;
 }
 
-const DifLine = styled.div`
-    font-size: 12px;
-    color: #bfbfbf;
-`;
-
-const formatDifference = (
-    difference: string,
-    numDif: number,
-    status: boolean,
-) => {
-    if (numDif > 0) {
-        return `+ ${difference}`;
-    } else if (numDif < 0 && status) {
-        return `- ${difference}`;
-    } else {
-        return null;
-    }
-};
-
 export const InvoiceCard = ({
     invoice,
     index,
     setIndexOpen,
     indexOpen,
 }: InvoiceCardProps) => {
-    const { price, symbol, currency } = useContext(SettingsContext);
+    const { price, symbol, currency } = useSettings();
     const priceProps = { price, symbol, currency };
 
     const getFormat = (amount: string) =>
@@ -140,7 +120,10 @@ export const InvoiceCard = ({
                             )} ago)`}</DarkSubTitle>
                         </AddMargin>
                     </SingleLine>
-                    <SingleLine>{formatAmount}</SingleLine>
+                    <SingleLine>
+                        {formatAmount}
+                        {formatDif}
+                    </SingleLine>
                 </SingleLine>
             </MainInfo>
             {index === indexOpen && renderDetails()}

src/components/resume/PaymentsCards.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { getValue } from '../../helpers/Helpers';
-import { SettingsContext } from '../../context/SettingsContext';
+import { useSettings } from '../../context/SettingsContext';
 import {
     Separation,
     SubCard,
@@ -39,7 +39,7 @@ export const PaymentsCard = ({
     setIndexOpen,
     indexOpen,
 }: PaymentsCardProps) => {
-    const { price, symbol, currency } = useContext(SettingsContext);
+    const { price, symbol, currency } = useSettings();
     const priceProps = { price, symbol, currency };
 
     const getFormat = (amount: string) =>

src/components/resume/ResumeList.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { GET_RESUME } from '../../graphql/query';
 import { Card, CardWithTitle, SubTitle, ColorButton } from '../generic/Styled';
 import { InvoiceCard } from './InvoiceCard';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import { getAuthString } from '../../utils/auth';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../utils/error';
@@ -18,7 +18,7 @@ export const ResumeList = () => {
     const [indexOpen, setIndexOpen] = useState(0);
     const [token, setToken] = useState('');
 
-    const { host, read, cert } = useContext(AccountContext);
+    const { host, read, cert } = useAccount();
     const auth = getAuthString(host, read, cert);
 
     const { loading, data, fetchMore } = useQuery(GET_RESUME, {
@@ -28,10 +28,9 @@ export const ResumeList = () => {
 
     useEffect(() => {
         if (!loading && data && data.getResume && data.getResume.token) {
-            console.log('NEW TOKEN: ', data.getResume.token);
             setToken(data.getResume.token);
         }
-    }, [data]);
+    }, [data, loading]);
 
     if (loading || !data || !data.getResume) {
         return <Card>Loading....</Card>;

src/components/sideSettings/SideSettings.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Separation } from '../../components/generic/Styled';
-import { SettingsContext } from '../../context/SettingsContext';
+import { useSettings } from '../../context/SettingsContext';
 import { IconCircle, Sun, Moon } from '../generic/Icons';
 import styled from 'styled-components';
 import { iconButtonBack } from '../../styles/Themes';
@@ -25,7 +25,7 @@ const IconRow = styled.div`
 `;
 
 export const SideSettings = () => {
-    const { theme, currency, setSettings } = useContext(SettingsContext);
+    const { theme, currency, setSettings } = useSettings();
 
     return (
         <>

src/context/AccountContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useState, useContext } from 'react';
 import merge from 'lodash.merge';
 import { getAuthParams } from '../utils/auth';
 
@@ -131,4 +131,6 @@ const AccountProvider = ({ children }: any) => {
     );
 };
 
-export default AccountProvider;
+const useAccount = () => useContext(AccountContext);
+
+export { AccountProvider, useAccount };

src/context/SettingsContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useState, useContext } from 'react';
 import merge from 'lodash.merge';
 
 interface ChangeProps {
@@ -57,4 +57,6 @@ const SettingsProvider = ({ children }: any) => {
     );
 };
 
-export default SettingsProvider;
+const useSettings = () => useContext(SettingsContext);
+
+export { SettingsProvider, useSettings };

src/sections/navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { Link, useLocation } from 'react-router-dom';
 import { NodeInfo } from '../../components/nodeInfo/NodeInfo';
@@ -9,7 +9,7 @@ import {
     navButtonColor,
 } from '../../styles/Themes';
 import { Home, Cpu, Server, Settings } from '../../components/generic/Icons';
-import { SettingsContext } from '../../context/SettingsContext';
+import { useSettings } from '../../context/SettingsContext';
 
 const NavigationStyle = styled.div`
     grid-area: nav;
@@ -79,7 +79,7 @@ const RESUME_LINK = '/resume';
 const SETTINGS_LINK = '/settings';
 
 export const Navigation = () => {
-    const { theme } = useContext(SettingsContext);
+    const { theme } = useSettings();
     const { pathname } = useLocation();
 
     return (

src/views/login/SessionLogin.tsx

@@ -1,5 +1,5 @@
-import React, { useContext, useState } from 'react';
-import { AccountContext } from '../../context/AccountContext';
+import React, { useState } from 'react';
+import { useAccount } from '../../context/AccountContext';
 import {
     SingleLine,
     Sub4Title,
@@ -22,7 +22,7 @@ const Login = styled.div`
 `;
 
 export const SessionLogin = () => {
-    const { name, admin, refreshAccount } = useContext(AccountContext);
+    const { name, admin, refreshAccount } = useAccount();
     const [pass, setPass] = useState('');
 
     const handleClick = () => {

src/views/settings/Account.tsx

@@ -1,20 +1,18 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import {
     CardWithTitle,
     SubTitle,
     Card,
     SubCard,
     ColorButton,
-    Sub4Title,
 } from '../../components/generic/Styled';
 import { LoginForm } from '../../components/auth/NormalLogin';
 import { ConnectLoginForm } from '../../components/auth/ConnectLogin';
 import { BTCLoginForm } from '../../components/auth/BTCLogin';
 import { SettingsLine, SettingsButton, ButtonRow } from './Settings';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import styled from 'styled-components';
 import { getNextAvailable, getStorageSaved } from '../../utils/storage';
-import { unSelectedNavButton, chartLinkColor } from '../../styles/Themes';
 
 const ConnectButton = styled(ColorButton)`
     width: 100%;
@@ -23,22 +21,10 @@ const ConnectButton = styled(ColorButton)`
     font-size: 14px;
 `;
 
-const CurrentField = styled.div`
-    color: ${chartLinkColor};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border: 1px solid ${unSelectedNavButton};
-    margin: 5px 0;
-    font-size: 14px;
-    padding: 5px 10px;
-    border-radius: 5px;
-`;
-
 export const AccountSettings = () => {
     const [isType, setIsType] = useState('none');
     const [willAdd, setWillAdd] = useState(false);
-    const { changeAccount, refreshAccount } = useContext(AccountContext);
+    const { changeAccount, refreshAccount } = useAccount();
 
     const next = getNextAvailable();
 

src/views/settings/Danger.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
     Card,
     CardWithTitle,
@@ -7,7 +7,7 @@ import {
     SimpleButton,
 } from '../../components/generic/Styled';
 import { getStorageSaved, deleteStorage } from '../../utils/storage';
-import { AccountContext } from '../../context/AccountContext';
+import { useAccount } from '../../context/AccountContext';
 import styled from 'styled-components';
 import { deleteAuth } from '../../utils/auth';
 import { textColor } from '../../styles/Themes';
@@ -36,7 +36,7 @@ export const SettingsButton = styled(SimpleButton)`
 `;
 
 export const DangerView = () => {
-    const { refreshAccount } = useContext(AccountContext);
+    const { refreshAccount } = useAccount();
 
     return (
         <CardWithTitle>

src/views/settings/Interface.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
-import {
-    CardWithTitle,
-    SubTitle,
-    Card,
-    SimpleButton,
-} from '../../components/generic/Styled';
+import { CardWithTitle, SubTitle, Card } from '../../components/generic/Styled';
 import { SettingsLine, ButtonRow, SettingsButton } from './Settings';
-import { useContext } from 'react';
-import { SettingsContext } from '../../context/SettingsContext';
+import { useSettings } from '../../context/SettingsContext';
 
 export const InterfaceSettings = () => {
-    const { setSettings } = useContext(SettingsContext);
+    const { setSettings } = useSettings();
     const cTheme = localStorage.getItem('theme') || 'dark';
     const cCurrency = localStorage.getItem('currency') || 'sat';