feat: new home (#28)

* chore: top styling

* chore: compatible section changes

* chore: wip remove home

* chore: refactor login flow

* chore: yarn lock update

pages/_app.tsx

@@ -9,47 +9,30 @@ import { Header } from '../src/layouts/header/Header';
 import { Footer } from '../src/layouts/footer/Footer';
 import { ApolloProvider } from '@apollo/react-hooks';
 import withApollo from '../config/apolloClient';
-import { useAccount } from '../src/context/AccountContext';
 import { BitcoinFees } from '../src/components/bitcoinInfo/BitcoinFees';
 import { BitcoinPrice } from '../src/components/bitcoinInfo/BitcoinPrice';
 import { GridWrapper } from '../src/components/gridWrapper/GridWrapper';
 import { useRouter } from 'next/router';
-import {
-  useConnectionState,
-  useConnectionDispatch,
-} from '../src/context/ConnectionContext';
-import {
-  LoadingView,
-  ErrorView,
-} from '../src/components/stateViews/StateCards';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Head from 'next/head';
 import { PageWrapper, HeaderBodyWrapper } from '../src/layouts/Layout.styled';
+import { useStatusState } from '../src/context/StatusContext';
 
-toast.configure({ draggable: false });
-
-const withoutGrid = ['/', '/login', '/faq', '/privacy', '/terms'];
+toast.configure({ draggable: false, pauseOnFocusLoss: false });
 
 const Wrapper: React.FC = ({ children }) => {
-  const dispatch = useConnectionDispatch();
   const { theme } = useSettings();
-  const { loggedIn } = useAccount();
   const { pathname } = useRouter();
-  const { loading, error } = useConnectionState();
+  const { connected } = useStatusState();
 
-  const isInArray = withoutGrid.includes(pathname);
+  const isRoot = pathname === '/';
 
   const renderContent = () => {
-    if (error && pathname === '/') {
-      dispatch({ type: 'disconnected' });
-    }
-    if ((loading || error) && pathname !== '/') {
-      return (
-        <GridWrapper>{loading ? <LoadingView /> : <ErrorView />}</GridWrapper>
-      );
+    if (isRoot) {
+      return <>{children}</>;
     }
-    return <GridWrapper without={isInArray}>{children}</GridWrapper>;
+    return <GridWrapper>{children}</GridWrapper>;
   };
 
   const renderGetters = () => (
@@ -60,10 +43,10 @@ const Wrapper: React.FC = ({ children }) => {
   );
 
   return (
-    <ThemeProvider theme={{ mode: theme }}>
+    <ThemeProvider theme={{ mode: isRoot ? 'light' : theme }}>
       <ModalProvider backgroundComponent={BaseModalBackground}>
         <GlobalStyles />
-        {loggedIn && renderGetters()}
+        {connected && renderGetters()}
         <PageWrapper>
           <HeaderBodyWrapper>
             <Header />

pages/index.tsx

@@ -1,23 +1,90 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useAccount } from '../src/context/AccountContext';
 import { SessionLogin } from '../src/views/login/SessionLogin';
 import { useRouter } from 'next/router';
-import { HomePageView } from '../src/views/homepage/HomePage';
 import { appendBasePath } from '../src/utils/basePath';
-import { LoadingView } from '../src/components/loading/LoadingView';
+import { TopSection } from '../src/views/homepage/Top';
+import { LoginBox } from '../src/views/homepage/LoginBox';
+import { Accounts } from '../src/views/homepage/Accounts';
+import {
+  useStatusState,
+  useStatusDispatch,
+} from '../src/context/StatusContext';
+import { useGetCanConnectLazyQuery } from '../src/generated/graphql';
+import { LoadingCard } from '../src/components/loading/LoadingCard';
+import { Section } from '../src/components/section/Section';
+import { toast } from 'react-toastify';
 
-const ContextApp: React.FC = () => {
+const ContextApp = () => {
   const { push } = useRouter();
-  const { loggedIn, admin, viewOnly, sessionAdmin } = useAccount();
+  const {
+    name,
+    host,
+    cert,
+    admin,
+    viewOnly,
+    sessionAdmin,
+    accounts,
+  } = useAccount();
+  const { loading: statusLoading } = useStatusState();
+  const dispatch = useStatusDispatch();
 
-  if (loggedIn) {
-    if (admin === '' || viewOnly !== '' || sessionAdmin !== '') {
+  const change = accounts.length <= 1 && admin === '';
+  const isSession = admin !== '' && viewOnly === '';
+
+  const [getCanConnect, { data, loading, error }] = useGetCanConnectLazyQuery({
+    fetchPolicy: 'network-only',
+    onError: () => {
+      toast.error(`Unable to connect to ${name}`);
+      dispatch({ type: 'disconnected' });
+    },
+  });
+
+  useEffect(() => {
+    if (loading && !error) {
+      dispatch({ type: 'loading' });
+    }
+    if (!loading && data?.getNodeInfo && !error) {
+      dispatch({ type: 'connected' });
       push(appendBasePath('/home'));
-      return <LoadingView />;
     }
-  }
+  }, [loading, data, error]);
+
+  useEffect(() => {
+    if (viewOnly !== '' || sessionAdmin !== '') {
+      getCanConnect({
+        variables: {
+          auth: {
+            host,
+            macaroon: viewOnly !== '' ? viewOnly : sessionAdmin,
+            cert,
+          },
+        },
+      });
+    }
+  }, [viewOnly, sessionAdmin]);
 
-  return !loggedIn && admin === '' ? <HomePageView /> : <SessionLogin />;
+  return (
+    <>
+      <TopSection />
+      {statusLoading && (
+        <Section withColor={false}>
+          <LoadingCard
+            inverseColor={true}
+            loadingHeight={'160px'}
+            title={`Connecting to ${name}`}
+          />
+        </Section>
+      )}
+      {!statusLoading && (
+        <>
+          {isSession && <SessionLogin />}
+          <Accounts change={!isSession} />
+          <LoginBox change={change} />
+        </>
+      )}
+    </>
+  );
 };
 
 export default ContextApp;