add blog entry (#41)

web3index · Sep 20, 2021 · 58123bc · 58123bc
1 parent 01de59c
commit 58123bc
Show file tree

Hide file tree

Showing 18 changed files with 581 additions and 456 deletions.
diff --git a/.github/ISSUE_TEMPLATE/project_submission.md b/.github/ISSUE_TEMPLATE/project_submission.md
diff --git a/.github/ISSUE_TEMPLATE/protocol_submission.md b/.github/ISSUE_TEMPLATE/protocol_submission.md
@@ -0,0 +1,47 @@
+---
+name: Protocol Submission
+about: Submit a protocol to be included in The Web3 Index
+title: New Protocol Submission
+labels: ""
+assignees: ""
+---
+
+## Protocol Name
+
+i.e. Livepeer
+
+## Symbol
+
+i.e. LPT
+
+## Brand Color
+
+Enter the protocol's brand color in hex value format
+
+## Category
+
+i.e. "Work Protocol"
+
+## Subcategory
+
+i.e. "Storage"
+
+## Blockchain
+
+i.e. "Ethereum". If it's a custom chain enter "Custom"
+
+## Everest ID
+
+Everest is used to pull information about the protocol such as the description. It can be found by searching for the protocol on [everest.link](https://everest.link).
+
+## Description
+
+Optional. If you don't provide a description it will pull from Everest
+
+## Image
+
+Provide a link to an svg version of the logo.
+
+## Revenue Data Source
+
+Will the protocol's revenue data get sourced using The Web3 Index subgraph or a publically accessible endpoint? For more information on how to provide revenue data for protocol submission check out the README.
diff --git a/components/BlogCard/index.tsx b/components/BlogCard/index.tsx
@@ -11,12 +11,14 @@ const BlogCard = ({ title, date, abstract, slug }) => {
         px: "$4",
         borderBottom: "1px solid",
         borderColor: "$border",
+        width: "100%",
         "&:last-child": {
           border: 0,
           mb: 0,
         },
         "@bp2": {
-          px: 380,
+          maxWidth: 800,
+          mx: "auto",
           pb: "$5",
           mb: "$5",
         },
@@ -26,6 +28,7 @@ const BlogCard = ({ title, date, abstract, slug }) => {
         <Box
           as="a"
           css={{
+            display: "block",
             textDecoration: "none",
             color: "$hiContrast",
             "&:hover": {

diff --git a/components/CallToAction/index.tsx b/components/CallToAction/index.tsx
@@ -35,7 +35,7 @@ const CallToAction = ({ ...props }) => {
           alignItems: "center",
         }}
       >
-        Submit a Project{" "}
+        Submit a Protocol{" "}
         <StyledIcon css={{ width: 15, height: 15, color: "$lowContrast" }} />
       </Button>
     </Box>

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -1,6 +1,7 @@
 import Box from "../Box";
 import Revenue from "./Revenue";
 import SubmitButton from "../SubmitButton";
+import Button from "../Button";
 
 const Header = ({ revenue, ...props }) => {
   return (
@@ -60,6 +61,32 @@ const Header = ({ revenue, ...props }) => {
             },
           }}
         />
+        <Button
+          as="a"
+          href="https://discord.gg/GsYEGuns9y"
+          target="_blank"
+          rel="noreferrer"
+          css={{
+            flex: "1 0 auto",
+            textAlign: "center",
+            backgroundColor: "$loContrast",
+            color: "$hiContrast",
+            border: "1px solid",
+            borderColor: "$border",
+            textDecoration: "none",
+            justifyContent: "center",
+            width: "100%",
+            mb: "$3",
+            "@bp2": {
+              mr: "$3",
+              mb: 0,
+              width: "auto",
+            },
+          }}
+        >
+          Chat on Discord
+        </Button>
+
         <SubmitButton
           css={{
             flex: "1 0 auto",

diff --git a/components/SubmitButton/index.tsx b/components/SubmitButton/index.tsx
@@ -12,7 +12,7 @@ const SubmitButton = ({ css = {}, ...props }) => {
       css={{ mx: "auto", display: "flex", alignItems: "center", ...css }}
       {...props}
     >
-      Submit a Project{" "}
+      Submit a Protocol{" "}
       <StyledIcon css={{ width: 15, height: 15, color: "$lowContrast" }} />
     </Button>
   );

diff --git a/content/posts/launching-the-web3-index.mdx b/content/posts/launching-the-web3-index.mdx
@@ -0,0 +1,30 @@
+---
+title: Launching The Web3 Index
+seoTitle: Launching The Index
+abstract: Today, after completing the process of analyzing and listing leading Web3 work protocols, we’re excited to launch The Web3 Index.
+author: Adam Soffer
+avatar: https://pbs.twimg.com/profile_images/1419749557974536193/zhKQU-Fo_400x400.jpg
+twitter: adamsoffer
+isPublished: true
+publishedOn: 2021-09-20T09:15:00-0400
+shareImage: https://web3index.org/images/og/launch-image.jpg
+---
+
+Four months ago we [introduced The Web3 Index](https://web3index.org/blog/introducing-the-web3-index), a fundamentally weighted index for discovering and monitoring leading [distributed work protocols](https://www.gemini.com/cryptopedia/distributed-work-protocols-web3-lpt-fil-grt) powering the burgeoning [ownership economy](https://variant.fund/the-ownership-economy-crypto-and-consumer-software/) colloquially known as [Web3](https://eshita.mirror.xyz/H5bNIXATsWUv_QbbEz6lckYcgAa2rhXEPDRkecOlCOI).
+
+Today, after completing the process of analyzing and listing leading Web3 work protocols, we’re excited to launch The Web3 Index. The first six protocols listed include:
+
+- [Arweave](https://www.arweave.org/): Permanent on-chain storage of documents and applications on a decentralized hard drive for a one-off fee.
+- [Filecoin](https://filecoin.io/): A decentralized data storage network that allows users to sell their excess storage on an open platform.
+- [The Graph](https://thegraph.com/): An indexing protocol for querying blockchain data.
+- [Livepeer](https://livepeer.org/): The world’s largest provider of distributed video infrastructure.
+- [Akash](https://akash.network/): The world's first open-source cloud.
+- [Helium](https://www.helium.com/): A distributed network of long-range wireless hotspots.
+
+A key belief behind the fundamental index methodology is that underlying valuation figures (i.e. network revenue and usage) are more accurate estimators of a network's intrinsic value as opposed to the listed market value of a network's token. By putting these protocols through the lens of demand side metrics, The Web3 Index aims to become an essential tool for anyone interested in discovering and monitoring Web3 protocols providing fundamental value.
+
+Are you a developer looking for reliable, scalable, permissionless, trust-minimized, and secure service providers for your Web3 application? An investor who needs fundamental data to guide your decision-making? Maybe you’re an aspiring node operator keen to find a stable and worthwhile protocol, a delegator hunting for protocols that will stand the test of time or a journalist who wants to cut through the hype. No matter what your role in Web3 is, The Web3 Index aims to be your go-to resource.
+
+We look forward to a bright future for The Web3 Index, as it matures and evolves alongside the third evolution of the World Wide Web.
+
+Learn more [here](https://web3index.org/).
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next-seo.config.js b/next-seo.config.js
@@ -8,11 +8,11 @@ export default {
       "The Web3 Index tracks key revenue metrics for protocols across the Web3 stack so you can stay up to date on the latest Web3 trends.",
     type: "website",
     locale: "en_IE",
-    url: "https://beta.web3index.org",
+    url: "https://web3index.org",
     site_name: "The Web3 Index",
     images: [
       {
-        url: "https://beta.web3index.org/og-image.png",
+        url: "https://web3index.org/og-image.png",
         width: 1200,
         height: 630,
         alt: "The Web3 Index",
@@ -27,7 +27,7 @@ export default {
   additionalLinkTags: [
     {
       rel: "icon",
-      href: "https://beta.web3index.org/favicon.ico",
+      href: "https://web3index.org/favicon.ico",
     },
   ],
 };
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "lightweight-charts": "^3.3.0",
     "limestone": "^0.2.0",
     "limestone-api": "^3.0.7",
-    "next": "^10.2.0",
+    "next": "^11.1.2",
     "next-mdx-remote": "^2.1.4",
     "next-seo": "^4.23.0",
     "next-themes": "^0.0.14",
@@ -47,7 +47,7 @@
     "react-fast-marquee": "^1.1.2",
     "react-markdown": "^5.0.3",
     "react-table": "^7.6.3",
-    "recharts": "^2.0.9",
+    "recharts": "2.0.9",
     "redstone-api": "^0.4.3",
     "remark-dropcap": "^0.1.7"
   },

diff --git a/pages/[slug].tsx b/pages/[slug].tsx
@@ -174,7 +174,7 @@ const Project = ({ slug, index, projects, project }) => {
       ...seo.openGraph,
       title: `The Web3 Index - ${project.name}`,
       description: project.description,
-      url: `https://beta.web3index.org/project/${slug}`,
+      url: `https://web3index.org/project/${slug}`,
     },
   };
 
@@ -209,15 +209,15 @@ const Project = ({ slug, index, projects, project }) => {
               gap: 0,
               "@bp2": {
                 gap: 100,
-                gridTemplateColumns: "33.334% calc(66.667% - 100px)",
+                gridTemplateColumns: "38% calc(62% - 100px)",
               },
             }}
           >
             <Box css={{ mt: "$5" }}>
               <Box css={{ fontSize: "$5", mb: "$3" }}>
-                <span role="img" aria-label="#1">
+                {/* <span role="img" aria-label="#1">
                   {trophies[index]}
-                </span>{" "}
+                </span>{" "} */}
                 #{index + 1}
               </Box>
               <Box
@@ -268,6 +268,65 @@ const Project = ({ slug, index, projects, project }) => {
                   <Metric label="Category" value={project.category} />
                   <Metric label="Subcategory" value={project.subcategory} />
                   <Metric label="Blockchain" value={project.blockchain} />
+                  <Metric label="Genesis Date" value={project.genesisDate} />
+                </Box>
+                <Box>
+                  <Metric
+                    label="30d Revenue"
+                    value={
+                      <Box>
+                        <Tooltip delayDuration={0}>
+                          <Box css={{ display: "flex", alignItems: "center" }}>
+                            <Box css={{ mr: "$1" }}>
+                              $
+                              {Math.round(
+                                project.usage.revenue.thirtyDayTotal
+                              ).toLocaleString()}
+                            </Box>
+                            <TooltipTrigger>
+                              <InfoCircledIcon />
+                            </TooltipTrigger>
+                          </Box>
+                          <TooltipContent>
+                            <TooltipArrow />
+                            Total demand side revenue accrued by the protocol
+                            over the last 30 days.
+                          </TooltipContent>
+                        </Tooltip>
+                      </Box>
+                    }
+                  />
+                  <Metric
+                    label="90d Revenue"
+                    value={
+                      <Box>
+                        <Tooltip delayDuration={0}>
+                          <Box css={{ display: "flex", alignItems: "center" }}>
+                            <Box css={{ mr: "$1" }}>
+                              $
+                              {Math.round(
+                                project.usage.revenue.ninetyDayTotal
+                              ).toLocaleString()}
+                            </Box>
+                            <TooltipTrigger>
+                              <InfoCircledIcon />
+                            </TooltipTrigger>
+                          </Box>
+                          <TooltipContent>
+                            <TooltipArrow />
+                            Total demand side revenue accrued by the protocol
+                            over the last 90 days.
+                          </TooltipContent>
+                        </Tooltip>
+                      </Box>
+                    }
+                  />
+                  <Metric
+                    label="Total Revenue"
+                    value={`$${Math.round(
+                      project.usage.revenue.now
+                    ).toLocaleString()}`}
+                  />
                   <Metric
                     label="30d Trend"
                     value={
@@ -300,26 +359,6 @@ const Project = ({ slug, index, projects, project }) => {
                     }
                   />
                 </Box>
-                <Box>
-                  <Metric
-                    label="30d Revenue"
-                    value={`$${Math.round(
-                      project.usage.revenue.thirtyDayTotal
-                    ).toLocaleString()}`}
-                  />
-                  <Metric
-                    label="90d Revenue"
-                    value={`$${Math.round(
-                      project.usage.revenue.ninetyDayTotal
-                    ).toLocaleString()}`}
-                  />
-                  <Metric
-                    label="Total Revenue"
-                    value={`$${Math.round(
-                      project.usage.revenue.now
-                    ).toLocaleString()}`}
-                  />
-                </Box>
               </Box>
               <Box>
                 <SocialButton