chore: new view

src/client/pages/amboss/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { GridWrapper } from '../../src/components/gridWrapper/GridWrapper';
+import { SingleLine } from '../../src/components/generic/Styled';
+import { NextPageContext } from 'next';
+import { getProps } from '../../src/utils/ssr';
+import { AmbossLoginButton } from '../../src/views/amboss/LoginButton';
+import { Backups } from '../../src/views/amboss/Backups';
+import { SectionTitle, Text } from '../../src/components/typography/Styled';
+import { Healthchecks } from '../../src/views/amboss/Healthchecks';
+import { Balances } from '../../src/views/amboss/Balances';
+
+const AmbossView = () => (
+  <>
+    <SingleLine>
+      <SectionTitle style={{ margin: '0', color: '#ff0080', fontWeight: 900 }}>
+        AMBOSS
+      </SectionTitle>
+      <AmbossLoginButton />
+    </SingleLine>
+    <Text>
+      Amboss offers different integration options that can help you monitor your
+      node, store backups and get historical graphs about your balances.
+    </Text>
+  </>
+);
+
+const Wrapped = () => (
+  <GridWrapper>
+    <AmbossView />
+    <Backups />
+    <Healthchecks />
+    <Balances />
+  </GridWrapper>
+);
+
+export default Wrapped;
+
+export async function getServerSideProps(context: NextPageContext) {
+  return await getProps(context);
+}

src/client/src/layouts/navigation/Navigation.tsx

@@ -15,6 +15,7 @@ import {
   Heart,
   Shuffle,
   Grid,
+  Globe,
 } from 'react-feather';
 import { useRouter } from 'next/router';
 import { useBaseConnect } from '../../hooks/UseBaseConnect';
@@ -135,6 +136,7 @@ const DONATIONS = '/leaderboard';
 const CHAT = '/chat';
 const SETTINGS = '/settings';
 const SWAP = '/swap';
+const AMBOSS = '/amboss';
 
 interface NavigationProps {
   isBurger?: boolean;
@@ -185,6 +187,7 @@ export const Navigation = ({ isBurger, setOpen }: NavigationProps) => {
       {renderNavButton('Transactions', TRANS, Server, sidebar)}
       {renderNavButton('Forwards', FORWARDS, GitPullRequest, sidebar)}
       {renderNavButton('Chain', CHAIN_TRANS, LinkIcon, sidebar)}
+      {renderNavButton('Amboss', AMBOSS, Globe, sidebar)}
       {renderNavButton('Tools', TOOLS, Shield, sidebar)}
       {renderNavButton('Swap', SWAP, Shuffle, sidebar)}
       {renderNavButton('Stats', STATS, BarChart2, sidebar)}
@@ -201,6 +204,7 @@ export const Navigation = ({ isBurger, setOpen }: NavigationProps) => {
       {renderBurgerNav('Transactions', TRANS, Server)}
       {renderBurgerNav('Forwards', FORWARDS, GitPullRequest)}
       {renderBurgerNav('Chain', CHAIN_TRANS, LinkIcon)}
+      {renderBurgerNav('Amboss', AMBOSS, Globe)}
       {renderBurgerNav('Tools', TOOLS, Shield)}
       {renderBurgerNav('Swap', SWAP, Shuffle)}
       {renderBurgerNav('Stats', STATS, BarChart2)}

src/client/src/views/amboss/Backups.tsx

@@ -0,0 +1,134 @@
+import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import {
+  Card,
+  CardWithTitle,
+  SubTitle,
+  Separation,
+  SingleLine,
+  DarkSubTitle,
+} from '../../components/generic/Styled';
+import { Text } from '../../components/typography/Styled';
+import numeral from 'numeral';
+import { toast } from 'react-toastify';
+import { usePushBackupMutation } from '../../graphql/mutations/__generated__/pushBackup.generated';
+import { getErrorContent } from '../../utils/error';
+import { useAmbossUser } from '../../hooks/UseAmbossUser';
+import { getFormatDate, renderLine } from '../../components/generic/helpers';
+import { useToggleConfigMutation } from '../../graphql/mutations/__generated__/toggleConfig.generated';
+import { useGetConfigStateQuery } from '../../graphql/queries/__generated__/getConfigState.generated';
+import { ConfigFields } from '../../graphql/types';
+
+const PushBackup = () => {
+  const [backup, { loading }] = usePushBackupMutation({
+    onCompleted: () => toast.success('Backup saved on Amboss'),
+    onError: error => toast.error(getErrorContent(error)),
+    refetchQueries: ['GetAmbossUser'],
+  });
+
+  return (
+    <SingleLine>
+      <DarkSubTitle>Push Backup to Amboss</DarkSubTitle>
+      <ColorButton
+        color="#ff0080"
+        withMargin={'4px 0'}
+        disabled={loading}
+        onClick={() => backup()}
+        loading={loading}
+      >
+        Push
+      </ColorButton>
+    </SingleLine>
+  );
+};
+
+export const AmbossBackupsView = () => {
+  const { user } = useAmbossUser();
+
+  const renderContent = () => {
+    if (!user) return null;
+
+    const {
+      backups: {
+        remaining_size,
+        total_size_saved,
+        last_update,
+        last_update_size,
+      },
+    } = user;
+
+    const total = Number(total_size_saved) / 1e6;
+    const remaining = Number(remaining_size) / 1e6;
+
+    return (
+      <>
+        {renderLine(
+          'Last Update',
+          last_update
+            ? getFormatDate(last_update)
+            : 'No backups done this month'
+        )}
+        {last_update_size
+          ? renderLine('Last Update Size', `${last_update_size} bytes`)
+          : null}
+        <Separation />
+        {renderLine(
+          'Total Size Saved',
+          `${numeral(total).format('0.[0000]')} MB`
+        )}
+        {renderLine(
+          'Remaining Size Available',
+          `${numeral(remaining).format('0.[0000]')} MB`
+        )}
+        <Separation />
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Separation />
+      {renderContent()}
+      <PushBackup />
+    </>
+  );
+};
+
+export const Backups = () => {
+  const { data, loading } = useGetConfigStateQuery({
+    onError: err => toast.error(getErrorContent(err)),
+  });
+
+  const [toggle, { loading: toggleLoading }] = useToggleConfigMutation({
+    refetchQueries: ['GetConfigState'],
+    onError: err => toast.error(getErrorContent(err)),
+  });
+
+  const isEnabled = data?.getConfigState.backup_state || false;
+
+  return (
+    <CardWithTitle>
+      <SubTitle>Backups</SubTitle>
+      <Card>
+        <SingleLine>
+          <Text>
+            {isEnabled
+              ? 'By disabling automatic backups to Amboss, ThunderHub will no longer push encrypted backups.'
+              : 'By enabling automatic backups to Amboss, ThunderHub will automatically push an encrypted version of your static channel backups (SCB) whenever there is a change that needs backing up.'}
+          </Text>
+          <ColorButton
+            color="#ff0080"
+            loading={loading || toggleLoading}
+            disabled={loading || toggleLoading}
+            withMargin="0 0 0 16px"
+            onClick={() =>
+              toggle({ variables: { field: ConfigFields.Backups } })
+            }
+          >
+            {isEnabled ? 'Disable' : 'Enable'}
+          </ColorButton>
+        </SingleLine>
+        <AmbossBackupsView />
+      </Card>
+    </CardWithTitle>
+  );
+};

src/client/src/views/amboss/Balances.tsx

@@ -0,0 +1,92 @@
+import { toast } from 'react-toastify';
+import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import {
+  Card,
+  CardWithTitle,
+  Separation,
+  SingleLine,
+  SubTitle,
+} from '../../components/generic/Styled';
+import { Text } from '../../components/typography/Styled';
+import { useToggleConfigMutation } from '../../graphql/mutations/__generated__/toggleConfig.generated';
+import { useGetConfigStateQuery } from '../../graphql/queries/__generated__/getConfigState.generated';
+import { ConfigFields } from '../../graphql/types';
+import { getErrorContent } from '../../utils/error';
+
+export const Balances = () => {
+  const { data, loading } = useGetConfigStateQuery({
+    onError: err => toast.error(getErrorContent(err)),
+  });
+
+  const [toggle, { loading: toggleLoading }] = useToggleConfigMutation({
+    refetchQueries: ['GetConfigState'],
+    onError: err => toast.error(getErrorContent(err)),
+  });
+
+  const {
+    onchain_push_enabled = false,
+    channels_push_enabled = false,
+    private_channels_push_enabled = false,
+  } = data?.getConfigState || {};
+
+  return (
+    <CardWithTitle>
+      <SubTitle>Balances</SubTitle>
+      <Card>
+        <SingleLine>
+          <SubTitle>Push Onchain</SubTitle>
+          <ColorButton
+            color="#ff0080"
+            loading={loading || toggleLoading}
+            disabled={loading || toggleLoading}
+            withMargin="0 0 0 16px"
+            onClick={() =>
+              toggle({ variables: { field: ConfigFields.OnchainPush } })
+            }
+          >
+            {onchain_push_enabled ? 'Disable' : 'Enable'}
+          </ColorButton>
+        </SingleLine>
+        <Text>
+          Push your onchain balance to Amboss to get historical reports.
+        </Text>
+        <Separation />
+        <SingleLine>
+          <SubTitle>Push Public Channels</SubTitle>
+          <ColorButton
+            color="#ff0080"
+            loading={loading || toggleLoading}
+            disabled={loading || toggleLoading}
+            withMargin="0 0 0 16px"
+            onClick={() =>
+              toggle({ variables: { field: ConfigFields.ChannelsPush } })
+            }
+          >
+            {channels_push_enabled ? 'Disable' : 'Enable'}
+          </ColorButton>
+        </SingleLine>
+        <Text>
+          Push your public channel balances to get historical reports.
+        </Text>
+        <Separation />
+        <SingleLine>
+          <SubTitle>Push Private Channels</SubTitle>
+          <ColorButton
+            color="#ff0080"
+            loading={loading || toggleLoading}
+            disabled={loading || toggleLoading}
+            withMargin="0 0 0 16px"
+            onClick={() =>
+              toggle({ variables: { field: ConfigFields.PrivateChannelsPush } })
+            }
+          >
+            {private_channels_push_enabled ? 'Disable' : 'Enable'}
+          </ColorButton>
+        </SingleLine>
+        <Text>
+          Push your private channel balances to get historical reports.
+        </Text>
+      </Card>
+    </CardWithTitle>
+  );
+};

src/client/src/views/amboss/Healthchecks.tsx

@@ -0,0 +1,52 @@
+import { toast } from 'react-toastify';
+import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
+import {
+  Card,
+  CardWithTitle,
+  SingleLine,
+  SubTitle,
+} from '../../components/generic/Styled';
+import { Text } from '../../components/typography/Styled';
+import { useToggleConfigMutation } from '../../graphql/mutations/__generated__/toggleConfig.generated';
+import { useGetConfigStateQuery } from '../../graphql/queries/__generated__/getConfigState.generated';
+import { ConfigFields } from '../../graphql/types';
+import { getErrorContent } from '../../utils/error';
+
+export const Healthchecks = () => {
+  const { data, loading } = useGetConfigStateQuery({
+    onError: err => toast.error(getErrorContent(err)),
+  });
+
+  const [toggle, { loading: toggleLoading }] = useToggleConfigMutation({
+    refetchQueries: ['GetConfigState'],
+    onError: err => toast.error(getErrorContent(err)),
+  });
+
+  const isEnabled = data?.getConfigState.healthcheck_ping_state || false;
+
+  return (
+    <CardWithTitle>
+      <SubTitle>Healthchecks</SubTitle>
+      <Card>
+        <SingleLine>
+          <Text>
+            {isEnabled
+              ? 'By disabling automatic healthcheck pings to Amboss, ThunderHub will no longer ping Amboss.'
+              : 'By enabling automatic healthcheck pings to Amboss, ThunderHub will consistently ping Amboss to show the liveliness of your node.'}
+          </Text>
+          <ColorButton
+            color="#ff0080"
+            loading={loading || toggleLoading}
+            disabled={loading || toggleLoading}
+            withMargin="0 0 0 16px"
+            onClick={() =>
+              toggle({ variables: { field: ConfigFields.Healthchecks } })
+            }
+          >
+            {isEnabled ? 'Disable' : 'Enable'}
+          </ColorButton>
+        </SingleLine>
+      </Card>
+    </CardWithTitle>
+  );
+};