2021 styling

bancorprotocol · Jan 6, 2022 · 42207e3 · 42207e3
1 parent 7a06da8
commit 42207e3
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 20 deletions.
diff --git a/components/SocialTags.tsx b/components/SocialTags.tsx
@@ -9,13 +9,17 @@ interface SocialTagsProps {
 
 const SocialTags: React.FC<SocialTagsProps> = ({ title, image, query }) => {
   const _title = title ? `${title} - CryptoFees.info` : 'CryptoFees.info';
+
+  const _image =
+    image && image.indexOf('.png') !== -1
+      ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}${image}`
+      : `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api/social/${image || 'top'}.png` +
+        `?${new Date().getDate()}${query ? `&${query}` : ''}`;
+
   return (
     <Head>
       <meta property="og:title" content={_title} />
-      <meta
-        property="og:image"
-        content={`https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api/social/${image || 'top'}.png`}
-      />
+      <meta property="og:image" content={image} />
       <meta
         property="og:description"
         content="There's tons of crypto projects. Which ones are people actually paying to use?"
@@ -26,12 +30,7 @@ const SocialTags: React.FC<SocialTagsProps> = ({ title, image, query }) => {
         name="twitter:description"
         content="There's tons of crypto projects. Which ones are people actually paying to use?"
       />
-      <meta
-        name="twitter:image"
-        content={`https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api/social/${
-          image || 'top'
-        }.png?${new Date().getDate()}${query ? `&${query}` : ''}`}
-      />
+      <meta name="twitter:image" content={_image} />
       <meta name="twitter:card" content="summary_large_image" />
     </Head>
   );

diff --git a/components/Toolbar.tsx b/components/Toolbar.tsx
@@ -127,9 +127,11 @@ const Toolbar: React.FC<ToolbarProps> = ({
           </Button>
         )}
 
-        <Button onClick={onShare} Icon={Share}>
-          Share
-        </Button>
+        {onShare && (
+          <Button onClick={onShare} Icon={Share}>
+            Share
+          </Button>
+        )}
 
         <Button onClick={() => onBundleChange(!bundle)} Icon={bundle ? CheckSquare : Square}>
           Bundle

diff --git a/components/year/YearList.tsx b/components/year/YearList.tsx
@@ -10,7 +10,7 @@ const YearList: React.FC<ListProps> = ({ data }) => {
   const [showAll, setShowAll] = useState(false);
   const sortedData = data
     .sort((a: any, b: any) => b.oneDay - a.oneDay)
-    .slice(0, showAll ? undefined : 25);
+    .slice(0, showAll ? undefined : 5);
 
   return (
     <div className="list">

diff --git a/pages/2021.tsx b/pages/2021.tsx
@@ -11,6 +11,8 @@ import Toolbar from 'components/Toolbar';
 import { ensureListLoaded, getBundle, getMetadata } from 'data/adapters';
 import Chart, { FeeItem } from 'components/Chart';
 import sdk from 'data/sdk';
+import { ArrowLeft } from 'react-feather';
+import Link from 'next/link';
 
 interface HomeProps {
   data: ProtocolData[];
@@ -47,12 +49,20 @@ export const Home: NextPage<HomeProps> = ({ data, bundles, charts }) => {
 
   return (
     <main>
-      <SocialTags />
+      <SocialTags title="2021 in Fees" image="/2021.png" />
 
-      <h1 className="title">Crypto Fees</h1>
+      <h1 className="title">2021 in Fees</h1>
 
       <p className="description">What did people pay to use in 2021?</p>
 
+      <div className="back-container">
+        <Link href="/">
+          <a>
+            <ArrowLeft size={14} /> Back to list
+          </a>
+        </Link>
+      </div>
+
       <div className="toolbar-container">
         <Toolbar
           onFilterToggle={() => setFilterCardOpen(toggle)}
@@ -83,12 +93,13 @@ export const Home: NextPage<HomeProps> = ({ data, bundles, charts }) => {
 
       <h2>Ethereum fees take off</h2>
       <p>
-        We can&amp;t talk about fees in 2021 without mentioning Ethereum&amp;s massive revenue
-        numbers. Ethereum&amp;s fees peaked out on May 11th with over $117m, before slumping down
+        We can&apos;t talk about fees in 2021 without mentioning Ethereum&apos;s massive revenue
+        numbers. Ethereum&apos;s fees peaked out on May 11th with over $117m, before slumping down
         for the summer.
       </p>
 
       <Chart data={charts.eth} primary="eth" protocols={{ eth: 'Ethereum' }} />
+      <div className="label">Ethereum</div>
 
       <h2>Native-asset yield farming</h2>
       <p>
@@ -119,7 +130,7 @@ export const Home: NextPage<HomeProps> = ({ data, bundles, charts }) => {
           },
         ]}
       />
-      <div>Avalanche</div>
+      <div className="label">Avalanche</div>
 
       <Chart
         data={charts.fantom.slice(180, 300)}
@@ -132,7 +143,7 @@ export const Home: NextPage<HomeProps> = ({ data, bundles, charts }) => {
           },
         ]}
       />
-      <div>Fantom</div>
+      <div className="label">Fantom</div>
 
       <h2>Tokens drive usage, even without incentives</h2>
       <p>
@@ -159,6 +170,7 @@ export const Home: NextPage<HomeProps> = ({ data, bundles, charts }) => {
           },
         ]}
       />
+      <div className="label">ENS</div>
 
       <style jsx>{`
         main {
@@ -197,13 +209,35 @@ export const Home: NextPage<HomeProps> = ({ data, bundles, charts }) => {
           flex-direction: column;
         }
 
+        h2 {
+          margin-top: 50px;
+        }
+
         p {
           max-width: 720px;
+          font-size: 20px;
+          color: #414046;
         }
 
         main :global(.recharts-responsive-container) {
           max-width: 900px;
         }
+
+        main :global(.list) {
+          margin-bottom: 20px;
+        }
+
+        .label {
+          background: #fad3f6;
+          padding: 8px 16px;
+          margin: 18px;
+          font-size: 14px;
+        }
+
+        .back-container {
+          max-width: 600px;
+          width: 100%;
+        }
       `}</style>
     </main>
   );

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -12,6 +12,8 @@ import List from 'components/List';
 import ShareModal from 'components/ShareModal';
 import SocialTags from 'components/SocialTags';
 import Toolbar from 'components/Toolbar';
+import Link from 'next/link';
+import { ChevronRight } from 'react-feather';
 
 interface HomeProps {
   data: ProtocolData[];
@@ -60,6 +62,14 @@ export const Home: NextPage<HomeProps> = ({ data, bundles }) => {
         Which ones are people actually paying to use?
       </p>
 
+      <Link href="/2021">
+        <a className="cta">
+          <div style={{ fontWeight: 'bold', marginRight: '8px' }}>2021 in Fees 🎉🗓</div>
+          <div>Check out the total fees spent in 2021, and what trends we can see from them</div>
+          <ChevronRight />
+        </a>
+      </Link>
+
       <Toolbar
         onDateChange={(newDate: string) =>
           router.push(`/history/${newDate}`, null, { scroll: false })
@@ -119,6 +129,23 @@ export const Home: NextPage<HomeProps> = ({ data, bundles }) => {
           font-size: 1.5rem;
           margin: 4px 0 20px;
         }
+
+        .cta {
+          text-decoration: none;
+          background: #fad3f6;
+          padding: 16px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+        }
+
+        :global(body) {
+          margin-top: 50px;
+        }
       `}</style>
     </main>
   );

diff --git a/public/2021.png b/public/2021.png