Remove header fromstatic page

bancorprotocol · Dec 2, 2020 · e7da910 · e7da910
1 parent c5eef93
commit e7da910
Showing 1 changed file with 95 additions and 46 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,59 +1,100 @@
-import React, { useEffect } from 'react';
-import Head from 'next/head';
-import { NextPage, GetStaticProps } from 'next';
-import { FeeData, getFeeData, getUniswapV1Data, getUniswapV2Data, getSushiswapData } from 'data/feeData';
-import { getBalancerData } from 'data/balancer';
-import { getCurveData } from 'data/curve';
-import { getOmenData } from 'data/omen';
-import { get0xData } from 'data/zerox';
-import { getRenData } from 'data/ren';
-import { getSynthetixData } from 'data/synthetix';
-import { getPolymarketData } from 'data/polymarket';
-import { getPolkadotData, getKusamaData } from 'data/polkadot';
-import List from 'components/List';
-import ReactGA from 'react-ga';
+import React, { useEffect } from 'react'
+import Head from 'next/head'
+import { NextPage, GetStaticProps } from 'next'
+import {
+  FeeData,
+  getFeeData,
+  getUniswapV1Data,
+  getUniswapV2Data,
+  getSushiswapData,
+} from 'data/feeData'
+import { getBalancerData } from 'data/balancer'
+import { getCurveData } from 'data/curve'
+import { getOmenData } from 'data/omen'
+import { get0xData } from 'data/zerox'
+import { getRenData } from 'data/ren'
+import { getSynthetixData } from 'data/synthetix'
+import { getPolymarketData } from 'data/polymarket'
+import { getPolkadotData, getKusamaData } from 'data/polkadot'
+import List from 'components/List'
+import ReactGA from 'react-ga'
 
 interface HomeProps {
-  data: FeeData[];
+  data: FeeData[]
 }
 
-const ASSETS = ['eth', 'btc', 'ltc', 'ada', 'xtz', 'bsv', 'bch', 'xrp', 'doge', 'xmr', 'xlm', 'bnb_mainnet'];
-
-ReactGA.initialize("UA-150445352-3")
+const ASSETS = [
+  'eth',
+  'btc',
+  'ltc',
+  'ada',
+  'xtz',
+  'bsv',
+  'bch',
+  'xrp',
+  'doge',
+  'xmr',
+  'xlm',
+  'bnb_mainnet',
+]
+
+ReactGA.initialize('UA-150445352-3')
 
 export const Home: NextPage<HomeProps> = ({ data }) => {
   useEffect(() => {
-    ReactGA.set({ page: window.location.pathname });
-    ReactGA.pageview(window.location.pathname);
-  }, []);
+    ReactGA.set({ page: window.location.pathname })
+    ReactGA.pageview(window.location.pathname)
+  }, [])
 
   return (
     <div className="container">
       <Head>
         <title>Crypto Fees</title>
         <link rel="icon" href="/favicon.png" />
-        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" />
-
+        <link
+          href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap"
+          rel="stylesheet"
+        />
+
         <meta property="og:title" content="Crypto Fees" />
-        <meta property="og:image" content="https://cryptofees.info/api/screenshot" />
-        <meta property="og:description" content="There's tons of crypto projects. Which ones are people actually paying to use?" />
+        <meta
+          property="og:image"
+          content="https://cryptofees.info/api/screenshot"
+        />
+        <meta
+          property="og:description"
+          content="There's tons of crypto projects. Which ones are people actually paying to use?"
+        />
 
         <meta name="twitter:title" content="Crypto Fees" />
-        <meta name="twitter:description" content="There's tons of crypto projects. Which ones are people actually paying to use?" />
-        <meta name="twitter:image" content={`https://cryptofees.info/api/screenshot?${(new Date()).getDate()}`} />
+        <meta
+          name="twitter:description"
+          content="There's tons of crypto projects. Which ones are people actually paying to use?"
+        />
+        <meta
+          name="twitter:image"
+          content={`https://cryptofees.info/api/screenshot?${new Date().getDate()}`}
+        />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
 
       <main>
         <h1 className="title">Crypto Fees</h1>
 
         <p className="description">
-          There&apos;s tons of crypto projects.<br />
+          There&apos;s tons of crypto projects.
+          <br />
           Which ones are people actually paying to use?
         </p>
 
         <div>
-          <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" className="twitter-share-button" data-show-count="true">Tweet</a>
+          <a
+            href="https://twitter.com/share?ref_src=twsrc%5Etfw"
+            className="twitter-share-button"
+            data-show-count="true"
+          >
+            Tweet
+          </a>
           <script async src="https://platform.twitter.com/widgets.js"></script>
         </div>
 
@@ -62,10 +103,22 @@ export const Home: NextPage<HomeProps> = ({ data }) => {
 
       <footer>
         <div>Data updates at midnight, UTC</div>
-        <div>Network data from CoinMetrics, application data from The Graph</div>
+        <div>
+          Network data from CoinMetrics, application data from The Graph
+        </div>
         <div>Application data does not include Ethereum transaction fees</div>
-        <div>Created by <a href="https://twitter.com/dmihal" target="twitter">David Mihal</a></div>
-        <div>Design help from <a href="https://twitter.com/hey_heey_heeey" target="twitter">@heyheeyheeey</a></div>
+        <div>
+          Created by{' '}
+          <a href="https://twitter.com/dmihal" target="twitter">
+            David Mihal
+          </a>
+        </div>
+        <div>
+          Design help from{' '}
+          <a href="https://twitter.com/hey_heey_heeey" target="twitter">
+            @heyheeyheeey
+          </a>
+        </div>
       </footer>
 
       <style jsx>{`
@@ -81,7 +134,7 @@ export const Home: NextPage<HomeProps> = ({ data }) => {
         main {
           padding: 2rem 0 3rem;
           flex: 1;
-          display:flex;
+          display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
@@ -150,13 +203,13 @@ export const Home: NextPage<HomeProps> = ({ data }) => {
         }
       `}</style>
     </div>
-  );
-};
+  )
+}
 
-export const getStaticProps: GetStaticProps = async ({ res }) => {
+export const getStaticProps: GetStaticProps = async () => {
   const handleFailure = (e: any) => {
-    console.warn(e);
-    return null;
+    console.warn(e)
+    return null
   }
 
   const [assetData, ...appData] = await Promise.all([
@@ -173,15 +226,11 @@ export const getStaticProps: GetStaticProps = async ({ res }) => {
     getRenData().catch(handleFailure),
     getSushiswapData().catch(handleFailure),
     getSynthetixData().catch(handleFailure),
-  ]);
+  ])
 
-  const data = [...assetData, ...appData].filter((val: any) => !!val);
+  const data = [...assetData, ...appData].filter((val: any) => !!val)
 
-  if (res) {
-    res.setHeader('Cache-Control', 's-maxage=1800');
-  }
-
-  return { props: { data }, revalidate: 60 };
-};
+  return { props: { data }, revalidate: 60 }
+}
 
 export default Home