chore: styling small bugs and refactors

pages/_app.tsx

@@ -36,9 +36,12 @@ const Wrapper: React.FC = ({ children }) => {
   const isInArray = withoutGrid.includes(pathname);
 
   const renderContent = () => {
-    if (loading) return <LoadingView />;
-    if (error) return <ErrorView />;
-    return <>{children}</>;
+    if (loading || error) {
+      return (
+        <GridWrapper>{loading ? <LoadingView /> : <ErrorView />}</GridWrapper>
+      );
+    }
+    return <GridWrapper without={isInArray}>{children}</GridWrapper>;
   };
 
   const renderGetters = () => (
@@ -54,7 +57,7 @@ const Wrapper: React.FC = ({ children }) => {
         <GlobalStyles />
         {loggedIn && renderGetters()}
         <Header />
-        <GridWrapper without={isInArray}>{renderContent()}</GridWrapper>
+        {renderContent()}
         <Footer />
       </ModalProvider>
     </ThemeProvider>

src/api/schemas/types/QueryType.ts

@@ -177,14 +177,14 @@ export const NetworkInfoType = new GraphQLObjectType({
   name: 'networkInfoType',
   fields: () => {
     return {
-      averageChannelSize: { type: GraphQLInt },
+      averageChannelSize: { type: GraphQLString },
       channelCount: { type: GraphQLInt },
       maxChannelSize: { type: GraphQLInt },
       medianChannelSize: { type: GraphQLInt },
       minChannelSize: { type: GraphQLInt },
       nodeCount: { type: GraphQLInt },
       notRecentlyUpdatedPolicyCount: { type: GraphQLInt },
-      totalCapacity: { type: GraphQLInt },
+      totalCapacity: { type: GraphQLString },
     };
   },
 });

src/components/bitcoinInfo/BitcoinFees.ts

@@ -5,6 +5,7 @@ import { useGetBitcoinFeesQuery } from '../../generated/graphql';
 export const BitcoinFees = () => {
   const setInfo = useBitcoinDispatch();
   const { loading, data, stopPolling } = useGetBitcoinFeesQuery({
+    fetchPolicy: 'network-only',
     onError: () => {
       setInfo({ type: 'error' });
       stopPolling();

src/components/bitcoinInfo/BitcoinPrice.ts

@@ -5,6 +5,7 @@ import { useGetBitcoinPriceQuery } from '../../generated/graphql';
 export const BitcoinPrice = () => {
   const setPrices = usePriceDispatch();
   const { loading, data, stopPolling } = useGetBitcoinPriceQuery({
+    fetchPolicy: 'network-only',
     onError: () => setPrices({ type: 'error' }),
     pollInterval: 60000,
   });

src/components/generic/Styled.tsx

@@ -44,11 +44,11 @@ export const Card = styled.div`
     ${({ cardPadding, mobileCardPadding }) =>
       mobileCardPadding
         ? css`
-            margin: ${mobileCardPadding};
+            padding: ${mobileCardPadding};
           `
         : cardPadding
         ? css`
-            margin: ${cardPadding};
+            padding: ${cardPadding};
           `
         : ''};
   }

src/components/link/Link.tsx

@@ -78,8 +78,8 @@ export const Link = ({
   }
 
   const linkProps = {
-    href: `${basePath}${to}`,
-    ...(basePath !== '' ? { prefetch: false } : {}),
+    href: to,
+    ...(basePath !== '' ? { as: `${basePath}${to}` } : {}),
   };
 
   return (

src/components/price/Price.tsx

@@ -13,7 +13,7 @@ export const Price = ({
   amount,
   breakNumber = false,
 }: {
-  amount: number;
+  amount: number | string;
   breakNumber?: boolean;
 }) => {
   const { currency } = useSettings();
@@ -38,10 +38,7 @@ export const Price = ({
     };
   }
 
-  const getFormat = (amount: number) =>
-    getValue({ amount, ...priceProps, breakNumber });
-
-  return <>{getFormat(amount)}</>;
+  return <>{getValue({ amount, ...priceProps, breakNumber })}</>;
 };
 
 export const getPrice = (
@@ -55,7 +52,7 @@ export const getPrice = (
   amount,
   breakNumber = false,
 }: {
-  amount: number;
+  amount: number | string;
   breakNumber?: boolean;
 }) => {
   const { prices, loading, error } = priceContext;
@@ -79,8 +76,5 @@ export const getPrice = (
     };
   }
 
-  const getFormat = (amount: number) =>
-    getValue({ amount, ...priceProps, breakNumber });
-
-  return getFormat(amount);
+  return getValue({ amount, ...priceProps, breakNumber });
 };

src/context/AccountContext.tsx

@@ -56,9 +56,6 @@ export const AccountContext = createContext<AccountProps>({
 });
 
 const AccountProvider = ({ children }: any) => {
-  // const sessionAdmin = sessionStorage.getItem('session') || '';
-  // const { name, host, admin, viewOnly, cert, id, accounts, loggedIn } = getAuth();
-
   useEffect(() => {
     refreshAccount();
   }, []);

src/generated/graphql.tsx

@@ -309,14 +309,14 @@ export type ChannelReportType = {
 
 export type NetworkInfoType = {
   __typename?: 'networkInfoType';
-  averageChannelSize?: Maybe<Scalars['Int']>;
+  averageChannelSize?: Maybe<Scalars['String']>;
   channelCount?: Maybe<Scalars['Int']>;
   maxChannelSize?: Maybe<Scalars['Int']>;
   medianChannelSize?: Maybe<Scalars['Int']>;
   minChannelSize?: Maybe<Scalars['Int']>;
   nodeCount?: Maybe<Scalars['Int']>;
   notRecentlyUpdatedPolicyCount?: Maybe<Scalars['Int']>;
-  totalCapacity?: Maybe<Scalars['Int']>;
+  totalCapacity?: Maybe<Scalars['String']>;
 };
 
 export type NodeInfoType = {

src/layouts/navigation/nodeInfo/NodeInfo.tsx

@@ -89,6 +89,7 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
   };
 
   const { loading, data } = useGetNodeInfoQuery({
+    skip: host === '' || (viewOnly === '' && sessionAdmin === ''),
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/homepage/HomePage.styled.ts

@@ -1,12 +1,11 @@
-import React from 'react';
 import styled, { keyframes } from 'styled-components';
 import { fontColors, mediaWidths } from '../../styles/Themes';
-import { appendBasePath } from '../../utils/basePath';
+import ThunderHub from '../../assets/ThunderHub.svg';
 
 export const Headline = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
   padding: 48px 0 140px;
 
   @media (${mediaWidths.mobile}) {
@@ -36,12 +35,8 @@ const flicker = keyframes`
     100%  { opacity: 0;   }
 `;
 
-const HeadlineImage = () => (
-  <img src={appendBasePath('/static/images/ThunderHub.svg')} />
-);
-
-export const StyledImage = styled(HeadlineImage)`
-  width: 500px;
+export const StyledImage = styled(ThunderHub)`
+  width: 360px;
 
   & .glowEffect {
     animation: ${flicker} 3s infinite step-end;

src/views/homepage/Sections/CallToAction.tsx

@@ -28,7 +28,7 @@ export const CallToAction = () => {
           <StyledH2>Ready to take control of your Lightning Node?</StyledH2>
         </Center>
         <Center>
-          <Link to={'/login'}>
+          <Link to={'/login'} noStyling={true}>
             <CallToActionButton>
               <Padding>
                 <Zap fillcolor={'white'} color={'white'} />

src/views/login/SessionLogin.tsx

@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
 import { useAccount } from '../../context/AccountContext';
-import {
-  SingleLine,
-  Sub4Title,
-  CardWithTitle,
-  Card,
-  SubTitle,
-} from '../../components/generic/Styled';
+import { SingleLine, Sub4Title, Card } from '../../components/generic/Styled';
 import CryptoJS from 'crypto-js';
 import { toast } from 'react-toastify';
 import { saveSessionAuth } from '../../utils/auth';
 import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
 import { Input } from '../../components/input/Input';
 import { Section } from '../../components/section/Section';
+import { Title } from '../../components/typography/Styled';
+import styled from 'styled-components';
+import { textColor } from '../../styles/Themes';
+
+const StyledTitle = styled(Title)`
+  font-size: 28px;
+  color: ${textColor};
+`;
 
 export const SessionLogin = () => {
   const { name, admin, refreshAccount } = useAccount();
@@ -31,31 +33,27 @@ export const SessionLogin = () => {
   };
 
   return (
-    <Section>
-      <CardWithTitle>
-        <SubTitle>{`Please Login (${name}):`}</SubTitle>
-        <Card>
-          <SingleLine>
-            <Sub4Title>Password:</Sub4Title>
-            <Input
-              type={'password'}
-              withMargin={'0 0 0 16px'}
-              onChange={e => setPass(e.target.value)}
-            />
-          </SingleLine>
-          {pass !== '' && (
-            <ColorButton
-              disabled={pass === ''}
-              onClick={handleClick}
-              withMargin={'16px 0 0'}
-              fullWidth={true}
-              arrow={true}
-            >
-              Connect
-            </ColorButton>
-          )}
-        </Card>
-      </CardWithTitle>
+    <Section padding={'36px 0'}>
+      <StyledTitle>{`Please Login (${name}):`}</StyledTitle>
+      <Card cardPadding={'32px'} mobileCardPadding={'16px'}>
+        <SingleLine>
+          <Sub4Title>Password:</Sub4Title>
+          <Input
+            type={'password'}
+            withMargin={'0 0 0 16px'}
+            onChange={e => setPass(e.target.value)}
+          />
+        </SingleLine>
+        <ColorButton
+          disabled={pass === ''}
+          onClick={handleClick}
+          withMargin={'16px 0 0'}
+          fullWidth={true}
+          arrow={true}
+        >
+          Connect
+        </ColorButton>
+      </Card>
     </Section>
   );
 };

src/views/settings/Danger.tsx

@@ -107,6 +107,8 @@ export const DangerView = () => {
           color={'red'}
           onClick={() => {
             deleteAccount(accounts[0].id);
+            refreshAccount();
+            push(appendBasePath('/'));
           }}
         >
           {accounts[0].name}