WIP: Adding stake pool api integration with graphql

.graphqlconfig

@@ -1,4 +1,4 @@
 {
   "name": "Cardano GraphQL Schema",
-  "schemaPath": "./schema.graphql"
+  "schemaPath": "./node_modules/@cardano-graphql/client-ts/api/schema.graphql"
 }

package.json

@@ -24,7 +24,8 @@
     "prettier:format": "yarn prettier --write --loglevel warn",
     "prettier:fix-staged": "pretty-quick --staged",
     "storybook": "start-storybook -s ./source/public -p 6006",
-    "storybook:build": "build-storybook -o build/storybook"
+    "storybook:build": "build-storybook -o build/storybook",
+    "next": "next dev source -p 4000"
   },
   "homepage": "https://github.com/input-output-hk/cardano-explorer-app",
   "husky": {

source/environment.ts

@@ -9,9 +9,9 @@ export const environment = {
     GRAPHQL: {
       HTTP_URL: `${process.env.GRAPHQL_API_PROTOCOL || 'https'}://${
         process.env.GRAPHQL_API_HOST ||
-        'cardano-graphql-mainnet.daedalus-operations.com'
+        `explorer.cardano-${process.env.CARDANO_NETWORK || 'mainnet'}.iohk.io`
       }:${process.env.GRAPHQL_API_PORT || '443'}/${
-        process.env.GRAPHQL_API_PATH || ''
+        process.env.GRAPHQL_API_PATH || 'graphql'
       }`,
     },
     NETWORK:
@@ -24,7 +24,7 @@ export const environment = {
   IS_SERVER: !isNavigatorDefined,
   PACKAGE: {
     HOMEPAGE: process.env.PACKAGE_HOMEPAGE,
-    VERSION: process.env.PACKAGE_VERSION
+    VERSION: process.env.PACKAGE_VERSION,
   },
   POLLING_INTERVAL: Number(process.env.POLLING_INTERVAL) || 10000,
 };

source/features/epochs/index.ts

@@ -60,10 +60,10 @@ export const createEpochsFeature = (
     api: epochsApi,
     store: epochsStore,
     start() {
-      epochsStore.start();
+      return epochsStore.start();
     },
     stop() {
-      epochsStore.stop();
+      return epochsStore.stop();
     },
   };
 };

source/features/epochs/ui/EpochProgress.module.scss

@@ -0,0 +1,24 @@
+.progressTextContent {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.progressTextLabel {
+  color: var(--info-text-color);
+  font-family: ProximaNova, sans-serif;
+  font-size: 10px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+  line-height: 1.4;
+  margin-bottom: 5px;
+}
+
+.progressTextValue {
+  color: var(--solid-text-color);
+  font-family: ProximaNova, sans-serif;
+  font-size: 46px;
+  font-weight: 300;
+  letter-spacing: 2.3px;
+}

source/features/epochs/ui/EpochSummary.module.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/mixins/info-panel';
+
 .epochSummaryContainer {
   margin: 0 auto;
   max-width: 872px;
@@ -11,60 +13,7 @@
     align-items: center;
     display: flex;
 
-    .progressTextContent {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .progressTextLabel {
-        color: var(--info-text-color);
-        font-family: ProximaNova, sans-serif;
-        font-size: 10px;
-        font-weight: 300;
-        letter-spacing: 0.5px;
-        line-height: 1.4;
-        margin-bottom: 5px;
-      }
-
-      .progressTextValue {
-        color: var(--solid-text-color);
-        font-family: ProximaNova, sans-serif;
-        font-size: 46px;
-        font-weight: 300;
-        letter-spacing: 2.3px;
-      }
-    }
-
-    .infoPanel {
-      color: var(--info-text-color);
-      margin-left: 60px;
-
-      .infoRow {
-        align-items: center;
-        display: flex;
-        font-size: 12px;
-        letter-spacing: 0.6px;
-        line-height: 1.33;
-        margin-bottom: 10px;
-
-        .infoLabel {
-          font-family: ProximaNova, sans-serif;
-          font-weight: 600;
-          width: 130px;
-        }
-
-        .infoValue {
-          font-family: ProximaNova, sans-serif;
-          font-weight: 300;
-        }
-      }
-
-      @media (max-width: 768px) {
-        margin-left: 0;
-        padding-top: 40px;
-      }
-    }
+    @include info-panel($label-width: 130px);
 
     @media (max-width: 768px) {
       flex-direction: column;

source/features/epochs/ui/EpochSummary.tsx

@@ -1,13 +1,12 @@
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { observer } from 'mobx-react-lite';
-import CircularProgress, {
-  CircularProgressSize,
-} from '../../../widgets/circular-progress/CircularProgress';
+import React from 'react';
 import DividerWithTitle from '../../../widgets/divider-with-title/DividerWithTitle';
 import { useI18nFeature } from '../../i18n/context';
 import { IEpochOverview } from '../types';
 import styles from './EpochSummary.module.scss';
+import { EpochSummaryProgress } from './EpochSummaryProgress';
 
 dayjs.extend(utc);
 
@@ -24,18 +23,10 @@ const EpochSummary = ({ title, epoch }: IEpochSummaryProps) => {
         <DividerWithTitle title={title} />
       </div>
       <div className={styles.content}>
-        <CircularProgress
+        <EpochSummaryProgress
+          epochNumber={epoch.number}
           percentage={epoch.percentage}
-          size={CircularProgressSize.BIG}
-          showText
-          text={
-            <div className={styles.progressTextContent}>
-              <div className={styles.progressTextLabel}>
-                {translate('epochSummary.epoch')}
-              </div>
-              <div className={styles.progressTextValue}>{epoch.number}</div>
-            </div>
-          }
+          title={translate('epochSummary.epoch')}
         />
         <div className={styles.infoPanel}>
           <div className={styles.infoRow}>

source/features/epochs/ui/EpochSummaryProgress.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import CircularProgress, {
+  CircularProgressSize,
+} from '../../../widgets/circular-progress/CircularProgress';
+import styles from './EpochProgress.module.scss';
+
+export interface IEpochProgressProps {
+  epochNumber: number;
+  percentage: number;
+  title: string;
+}
+
+export const EpochSummaryProgress = (props: IEpochProgressProps) => (
+  <CircularProgress
+    percentage={props.percentage}
+    size={CircularProgressSize.BIG}
+    showText
+    text={
+      <div className={styles.progressTextContent}>
+        <div className={styles.progressTextLabel}>{props.title}</div>
+        <div className={styles.progressTextValue}>{props.epochNumber}</div>
+      </div>
+    }
+  />
+);

source/features/landing-page/LandingPage.module.scss

@@ -1,48 +1,3 @@
-.headerBgContainer {
-  display: flex;
-  justify-content: center;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-
-  .headerBg {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    img {
-      height: 415px;
-      margin-top: -25px;
-      margin-left: 11px;
-    }
-  }
-}
-
-.sideBgContainer {
-  position: absolute;
-  bottom: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  z-index: -1;
-}
-
-.sideBackgroundImageContainer {
-  align-items: flex-end;
-  bottom: 0;
-  display: flex;
-  position: absolute;
-  right: 0;
-
-  .sideBackgroundImage {
-    height: auto;
-    object-fit: contain;
-    opacity: 0.3;
-    width: 596.5px;
-  }
-}
-
 .epochList {
   margin-top: 71px;
   margin-bottom: 21px;
@@ -60,31 +15,3 @@
     margin-bottom: 83px;
   }
 }
-
-.footer {
-  padding: 0 0 92px;
-}
-
-.mainNetHeaderImage,
-.testNetHeaderImage {
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-  position: absolute;
-  right: 0;
-  top: -113px;
-  width: 1100px;
-
-  @media (max-width: 1000px) {
-    width: 100%;
-  }
-
-  @media (max-width: 768px) {
-    display: none;
-  }
-}
-
-.testNetHeaderImage {
-  top: -173px !important;
-  width: 620px !important;
-}

source/features/landing-page/LandingPage.tsx

@@ -1,19 +1,13 @@
 import Head from 'next/head';
 import React from 'react';
-import { BrandType, CardanoNetwork } from '../../constants';
-import { environment } from '../../environment';
 import { StaticLayoutProps } from '../../lib/types';
-import SideBackgroundImage from '../../public/assets/images/main-side-background.svg';
-import { Footer, Header, Layout } from '../../widgets/layout';
+import { EnlargedHeaderLayout } from '../../widgets/layout/EnlargedHeaderLayout';
 import { BlocksFeatureProvider } from '../blocks/ui/BlocksFeatureProvider';
 import { LatestBlocks } from '../blocks/ui/LatestBlocks';
 import { EpochsFeatureProvider } from '../epochs/ui/EpochsFeatureProvider';
 import { LatestEpochs } from '../epochs/ui/LatestEpochs';
 import { useI18nFeature } from '../i18n/context';
 import { i18nInitialProps } from '../i18n/utils';
-import { SearchBar } from '../search/ui/SearchBar';
-const mainNetHeaderImage = require('../../public/assets/images/header/mainnet.png');
-const testNetHeaderImage = require('../../public/assets/images/header/testnet.png');
 import styles from './LandingPage.module.scss';
 
 export const LandingPage = () => (
@@ -36,23 +30,7 @@ const StaticLayout = (props: StaticLayoutProps) => {
       <Head>
         <title>{translate('index.pageTitle')}</title>
       </Head>
-      {environment.CARDANO.NETWORK === CardanoNetwork.MAINNET && (
-        <img src={mainNetHeaderImage} className={styles.mainNetHeaderImage} />
-      )}
-      {environment.CARDANO.NETWORK === CardanoNetwork.TESTNET && (
-        <img src={testNetHeaderImage} className={styles.testNetHeaderImage} />
-      )}
-      <Layout>
-        <Header brandType={BrandType.ENLARGED} />
-        <SearchBar brandType={BrandType.ENLARGED} />
-        {props.children}
-        <Footer rootClassname={styles.footer} />
-      </Layout>
-      <div className={styles.sideBgContainer}>
-        <div className={styles.sideBackgroundImageContainer}>
-          <SideBackgroundImage className={styles.sideBackgroundImage} />
-        </div>
-      </div>
+      <EnlargedHeaderLayout>{props.children}</EnlargedHeaderLayout>
     </>
   );
 };

source/features/navigation/ui/LocalizedLink.tsx

@@ -1,3 +1,4 @@
+import { omit } from 'lodash';
 import Link, { LinkProps } from 'next/link';
 import React from 'react';
 import { useI18nFeature } from '../../i18n/context';
@@ -6,16 +7,20 @@ import styles from './LocalizedLink.module.scss';
 export const LocalizedLink = (
   props: LinkProps & {
     children: React.ReactNode;
+    className?: string;
   }
 ) => {
   const i18n = useI18nFeature();
+  const linkProps = omit(props, ['class', 'className']);
   return (
-    <Link
-      {...props}
-      href={`/[locale]${props.href}`}
-      as={`/${i18n.store.locale}${props.href}`}
-    >
-      <a className={styles.link}>{props.children}</a>
-    </Link>
+    <span className={props.className}>
+      <Link
+        {...linkProps}
+        href={`/[locale]${props.href}`}
+        as={`/${i18n.store.locale}${props.href}`}
+      >
+        <a className={styles.link}>{props.children}</a>
+      </Link>
+    </span>
   );
 };